a tool for shared writing and social publishing
scroll on selection change if needed
Including a custom scrollIntoViewIfNeeded cause firefox doesn't
implement it! alas
+48
+27
components/SelectionManager.tsx
+27
components/SelectionManager.tsx
···
13
13
import { indent, outdent } from "src/utils/list-operations";
14
14
import { addShortcut } from "src/shortcuts";
15
15
import { htmlToMarkdown } from "src/htmlMarkdownParsers";
16
+
import { elementId } from "src/utils/elementId";
17
+
import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded";
16
18
export const useSelectingMouse = create(() => ({
17
19
start: null as null | string,
18
20
}));
···
264
266
let nextSelectedBlock = siblings[index - 1];
265
267
if (!nextSelectedBlock) return;
266
268
269
+
scrollIntoViewIfNeeded(
270
+
document.getElementById(
271
+
elementId.block(nextSelectedBlock.value).container,
272
+
),
273
+
false,
274
+
);
267
275
useUIState.getState().addBlockToSelection({
268
276
...nextSelectedBlock,
269
277
});
···
279
287
parent: b.parent,
280
288
entityID: nextBlock.value,
281
289
});
290
+
scrollIntoViewIfNeeded(
291
+
document.getElementById(
292
+
elementId.block(nextBlock.value).container,
293
+
),
294
+
false,
295
+
);
282
296
if (sortedBlocks.length === 2) {
283
297
useEditorStates
284
298
.getState()
···
397
411
useUIState.getState().addBlockToSelection({
398
412
...nextSelectedBlock,
399
413
});
414
+
415
+
scrollIntoViewIfNeeded(
416
+
document.getElementById(
417
+
elementId.block(nextSelectedBlock.value).container,
418
+
),
419
+
false,
420
+
);
400
421
useUIState.getState().setFocusedBlock({
401
422
type: "block",
402
423
parent: nextSelectedBlock.parent,
···
407
428
useUIState
408
429
.getState()
409
430
.removeBlockFromSelection({ value: b.entityID });
431
+
scrollIntoViewIfNeeded(
432
+
document.getElementById(
433
+
elementId.block(nextBlock.value).container,
434
+
),
435
+
false,
436
+
);
410
437
useUIState.getState().setFocusedBlock({
411
438
type: "block",
412
439
parent: b.parent,
+21
src/utils/scrollIntoViewIfNeeded.ts
+21
src/utils/scrollIntoViewIfNeeded.ts
···
1
+
export function scrollIntoViewIfNeeded(
2
+
el: Element | null,
3
+
centerIfNeeded: boolean = true,
4
+
) {
5
+
if (!el) return;
6
+
let observer = new IntersectionObserver(function ([entry]) {
7
+
const ratio = entry.intersectionRatio;
8
+
if (ratio < 1) {
9
+
let place =
10
+
ratio <= 0 && centerIfNeeded
11
+
? ("center" as const)
12
+
: ("nearest" as const);
13
+
el.scrollIntoView({
14
+
block: place,
15
+
inline: place,
16
+
});
17
+
}
18
+
observer.disconnect();
19
+
});
20
+
observer.observe(el);
21
+
}