quoin-editor 1.0.0 → 1.0.2

package/dist/{chunk-ZS2WA357.js → chunk-EPARJI4V.js}

@@ -41,11 +41,12 @@ import {
   toggleTask,
   undo,
   undoInputRule
-} from "./chunk-HJIQT3S5.js";
+} from "./chunk-OBMBSU2S.js";
 import {
   alignOrUndefined,
   blockById,
   dataAttributes,
+  firstNamed,
   headingLevel,
   inlineLength,
   inlinePlainText,
@@ -61,7 +62,7 @@ import {
   sanitizeHref,
   sliceInline,
   writtenAttrs
-} from "./chunk-LCQSG4M6.js";
+} from "./chunk-4XFXB37X.js";
 
 // src/view/react/use-editor-state.ts
 import { useCallback, useRef, useSyncExternalStore } from "react";
@@ -610,6 +611,15 @@ function writeSelection(registry, selection, domSelection, blockElement) {
   return true;
 }
 
+// src/view/dom/listen.ts
+function listen(target, handlers, options) {
+  const entries = Object.entries(handlers);
+  for (const [type, handler] of entries) target.addEventListener(type, handler, options);
+  return () => {
+    for (const [type, handler] of entries) target.removeEventListener(type, handler, options);
+  };
+}
+
 // src/view/navigation/node-entry.ts
 var NODE_ENTRY = "data-quoin-node-entry";
 var entersAsNode = (controller, block) => controller.blockElement(block)?.querySelector(`[${NODE_ENTRY}]`) != null;
@@ -829,6 +839,8 @@ function createCrossBlockPointer(controller) {
       const doc = root.ownerDocument;
       const view = doc.defaultView;
       let press = null;
+      let unfollow = () => {
+      };
       let last = { x: 0, y: 0 };
       let preventMouseDown = false;
       const scroll = createAutoScroll(root, () => follow(last.x, last.y));
@@ -863,10 +875,7 @@ function createCrossBlockPointer(controller) {
         else if (press?.kind === "blocks") followBlocks(press, x, y);
       }
       function release() {
-        doc.removeEventListener("pointermove", onPointerMove);
-        doc.removeEventListener("pointerup", end);
-        doc.removeEventListener("pointercancel", end);
-        view.removeEventListener("blur", end);
+        unfollow();
         scroll.stop();
         press = null;
         const dragged = controller.dragging;
@@ -912,21 +921,21 @@ function createCrossBlockPointer(controller) {
         } else {
           return;
         }
-        doc.addEventListener("pointermove", onPointerMove);
-        doc.addEventListener("pointerup", end);
-        doc.addEventListener("pointercancel", end);
-        view.addEventListener("blur", end);
+        const unfollowDocument = listen(doc, { pointermove: onPointerMove, pointerup: end, pointercancel: end });
+        const unfollowView = listen(view, { blur: end });
+        unfollow = () => {
+          unfollowDocument();
+          unfollowView();
+        };
       }
       function onMouseDown(event) {
         if (preventMouseDown) event.preventDefault();
         preventMouseDown = false;
       }
-      root.addEventListener("pointerdown", onPointerDown);
-      root.addEventListener("mousedown", onMouseDown);
+      const unlisten = listen(root, { pointerdown: onPointerDown, mousedown: onMouseDown });
       return () => {
         release();
-        root.removeEventListener("pointerdown", onPointerDown);
-        root.removeEventListener("mousedown", onMouseDown);
+        unlisten();
       };
     }
   };
@@ -1098,19 +1107,27 @@ var nodeOf = (selection) => selection?.kind === "node" ? selection.block : null;
 function createNodeReveal(element) {
   let shown = null;
   let pressed = null;
+  let owed = null;
   return {
     pressed(block) {
       pressed = block;
     },
     follow(selection) {
-      if (nodeOf(selection) !== shown) shown = null;
+      const block = nodeOf(selection);
+      if (block !== shown) shown = null;
+      if (block !== owed) owed = null;
     },
     settle(selection) {
-      shown = nodeOf(selection);
+      const block = nodeOf(selection);
+      if (block !== shown) owed = block;
+      shown = block;
     },
-    show(selection) {
+    show(selection, local) {
       const block = nodeOf(selection);
-      if (block !== null && block !== shown && block !== pressed) element(block)?.scrollIntoView({ block: "nearest" });
+      if (block !== null && block !== pressed && (block !== shown || local && block === owed)) {
+        element(block)?.scrollIntoView({ block: "nearest" });
+      }
+      if (local) owed = null;
       shown = block;
       pressed = null;
     }
@@ -1458,7 +1475,7 @@ function handleDrop(controller, event) {
     return;
   }
   const pos = dropPos(controller, event.clientX, event.clientY);
-  if (pos) dispatchSelection(controller, textSelection(pos));
+  if (pos) controller.dispatch(controller.editor.createTransaction().setSelection(textSelection(pos)).setOrigin("drop"));
   pasteTransfer(controller, dataTransfer);
 }
 function handleDragOver(event) {
@@ -1811,7 +1828,7 @@ function targetAt(controller, node) {
 }
 function elementOf(controller, target) {
   if (target === EMPTY_HOST) return controller.emptyHost ?? void 0;
-  return target === null ? void 0 : controller.registry.get(target.block, target.region);
+  return target ? controller.registry.get(target.block, target.region) : void 0;
 }
 function createCompositionHandlers(controller) {
   let active = false;
@@ -2286,11 +2303,13 @@ function attachInput(controller, root) {
     else composition.end(event);
   };
   const detachClipboard = attachClipboard(controller, root, catchUp);
-  root.addEventListener("keydown", onKeyDown);
-  root.addEventListener("beforeinput", onBeforeInput);
-  root.addEventListener("input", onInput);
-  root.addEventListener("compositionstart", onCompositionStart);
-  root.addEventListener("compositionend", onCompositionEnd);
+  const unlisten = listen(root, {
+    keydown: onKeyDown,
+    beforeinput: onBeforeInput,
+    input: onInput,
+    compositionstart: onCompositionStart,
+    compositionend: onCompositionEnd
+  });
   function observe(host) {
     if (!observed.has(host)) observed.set(host, fallback.observe(host));
   }
@@ -2306,11 +2325,7 @@ function attachInput(controller, root) {
       composition.release();
       sinkComposition.release();
       detachClipboard();
-      root.removeEventListener("keydown", onKeyDown);
-      root.removeEventListener("beforeinput", onBeforeInput);
-      root.removeEventListener("input", onInput);
-      root.removeEventListener("compositionstart", onCompositionStart);
-      root.removeEventListener("compositionend", onCompositionEnd);
+      unlisten();
       for (const stop of observed.values()) stop();
       observed.clear();
     }
@@ -2332,13 +2347,11 @@ function watchFocusReturn(root, handlers) {
   const onFocusOut = (event) => {
     if (!root.contains(event.relatedTarget)) pressed = false;
   };
-  root.addEventListener("pointerdown", onPointerDown, true);
-  root.addEventListener("focusin", onFocusIn);
-  root.addEventListener("focusout", onFocusOut);
+  const unlistenPress = listen(root, { pointerdown: onPointerDown }, true);
+  const unlistenFocus = listen(root, { focusin: onFocusIn, focusout: onFocusOut });
   return () => {
-    root.removeEventListener("pointerdown", onPointerDown, true);
-    root.removeEventListener("focusin", onFocusIn);
-    root.removeEventListener("focusout", onFocusOut);
+    unlistenPress();
+    unlistenFocus();
   };
 }
 
@@ -2409,7 +2422,7 @@ function movedSelection(controller, doc, model) {
   const selection = readSelection(controller.registry, doc.getSelection(), (node) => controller.blockAt(node));
   return selection === null || sameSelection(selection, model) ? null : selection;
 }
-function writeModelSelection(controller, doc, moved) {
+function writeModelSelection(controller, doc, moved, local) {
   const domSelection = doc?.getSelection();
   if (focusingSink(controller) || controller.composingKey !== null || !doc || !domSelection || !ownsFocus(controller, doc)) {
     return;
@@ -2419,7 +2432,7 @@ function writeModelSelection(controller, doc, moved) {
   if (heldBySink(selection) && controller.sink !== null) focusSink(controller);
   else if (selection?.kind === "blocks") domSelection.removeAllRanges();
   else writeSelection(controller.registry, selection, domSelection, (id) => controller.blockElement(id));
-  controller.nodeReveal.show(selection);
+  controller.nodeReveal.show(selection, local);
   if (!samePoints(before, selectionPoints(domSelection))) moved();
 }
 
@@ -2428,102 +2441,105 @@ var runNow = (fn) => fn();
 var ViewController = class {
   editor;
   registry = createHostRegistry((element) => {
-    this.binding?.input.observe(element);
-    this.drawn.syncTabStop();
+    this.#binding?.input.observe(element);
+    this.#drawn.syncTabStop();
     return () => {
-      this.binding?.input.unobserve(element);
-      this.drawn.syncTabStop();
+      this.#binding?.input.unobserve(element);
+      this.#drawn.syncTabStop();
     };
   });
   keyInterceptors = /* @__PURE__ */ new Set();
   nodeReveal = createNodeReveal((id) => this.blockElement(id));
-  announcer = createAnnouncer(() => this.said);
+  announcer = createAnnouncer(() => this.#said);
   isMac;
   onFiles;
   goalX = null;
   nativeVerticalMove = false;
   dragging = false;
   composingKey = null;
-  flush;
-  hosts;
-  drawn = createDrawnElements(this.registry, () => this.editor.state);
-  cross = createCrossMode(this);
-  outside = createOutsideChanges(
-    () => hasFocus(this, this.ownerDocument()),
-    (model) => movedSelection(this, this.ownerDocument(), model)
+  #flush;
+  #hosts;
+  #drawn = createDrawnElements(this.registry, () => this.editor.state);
+  #cross = createCrossMode(this);
+  #outside = createOutsideChanges(
+    () => hasFocus(this, this.#ownerDocument()),
+    (model) => movedSelection(this, this.#ownerDocument(), model)
   );
-  binding = null;
-  quiet = false;
-  said;
-  detachRoot = null;
-  readOnlyState;
+  #binding = null;
+  #quiet = false;
+  #loud = false;
+  #said;
+  #detachRoot = null;
+  #readOnlyState;
   constructor(options) {
     this.editor = options.editor;
     options.editor.subscribe((state, tr) => {
-      if (tr?.origin !== "remote") this.said = state;
+      if (tr?.origin !== "remote") this.#said = state;
     });
-    this.flush = options.flush ?? runNow;
+    this.#flush = options.flush ?? runNow;
     this.onFiles = options.onFiles;
     this.isMac = options.isMac ?? detectMac();
     const decorationsOf = (block, region) => this.decorationsFor(block, region);
-    this.hosts = createHostRenderer(options.editor, options.render, decorationsOf, (host) => this.binding?.input.drain(host));
-    this.readOnlyState = createReadOnly(this.registry, options.readOnly ?? false);
+    const drain = (element) => this.#binding?.input.drain(element);
+    this.#hosts = createHostRenderer(options.editor, options.render, decorationsOf, drain);
+    this.#readOnlyState = createReadOnly(this.registry, options.readOnly ?? false);
   }
   get root() {
-    return this.binding?.root ?? null;
+    return this.#binding?.root ?? null;
   }
   get readOnly() {
-    return this.readOnlyState.current();
+    return this.#readOnlyState.current();
   }
   get sink() {
-    return this.drawn.sink;
+    return this.#drawn.sink;
   }
   get emptyHost() {
-    return this.drawn.emptyHost;
+    return this.#drawn.emptyHost;
   }
   attach(root) {
-    this.detachRoot?.();
-    const binding = bindRoot(this, root, this.cross, (_, tr) => {
-      this.quiet ||= tr?.origin === "remote";
-      this.outside.committed(tr);
+    this.#detachRoot?.();
+    const binding = bindRoot(this, root, this.#cross, (_, tr) => {
+      this.#quiet ||= tr?.origin === "remote" && tr.docChanged;
+      this.#loud ||= tr?.origin !== "remote";
+      this.#outside.committed(tr);
       this.nodeReveal.follow(this.editor.state.selection);
-      this.drawn.syncTabStop();
-      this.cross.syncLater();
+      this.#drawn.syncTabStop();
+      this.#cross.syncLater();
     });
     const unmount = this.editor.mount();
     const detach = () => {
       unmount();
       binding.detach();
-      if (this.detachRoot !== detach) return;
-      this.detachRoot = null;
-      this.binding = null;
+      if (this.#detachRoot !== detach) return;
+      this.#detachRoot = null;
+      this.#binding = null;
     };
-    this.binding = binding;
-    this.detachRoot = detach;
-    this.drawn.syncTabStop();
+    this.#binding = binding;
+    this.#detachRoot = detach;
+    this.#drawn.syncTabStop();
     return detach;
   }
   registerBlockElement(id, element) {
-    return this.drawn.registerBlock(id, element);
+    return this.#drawn.registerBlock(id, element);
   }
   blockElement(id) {
-    return this.drawn.block(id);
+    return this.#drawn.block(id);
   }
   blockAt(node) {
-    return this.drawn.blockAt(node);
+    return this.#drawn.blockAt(node);
   }
   registerSink(element) {
-    return this.drawn.registerSink(element);
+    return this.#drawn.registerSink(element);
   }
   // An empty document draws one host that stands for a paragraph not created yet, so it belongs to no block.
   registerEmptyHost(element) {
-    return this.drawn.registerEmptyHost(element);
+    return this.#drawn.registerEmptyHost(element);
   }
   isEditorElement(element) {
-    return this.drawn.isEditorElement(element);
+    return this.#drawn.isEditorElement(element);
   }
   decorationsFor(block, region) {
-    return hostDecorations(this.editor, block, region, this.cross.mode);
+    return hostDecorations(this.editor, block, region, this.#cross.mode);
   }
   dispatch(tr) {
     this.edit(() => {
@@ -2536,34 +2552,35 @@ var ViewController = class {
   // open a popover that takes it.
   edit(change) {
     const before = this.editor.state;
-    const doc = this.ownerDocument();
+    const doc = this.#ownerDocument();
     const focused = hasFocus(this, doc);
     let handled = false;
-    this.flush(
-      () => this.outside.inside(() => {
+    this.#flush(
+      () => this.#outside.inside(() => {
         handled = change();
       })
     );
     if (this.editor.state === before) return handled;
     if (this.editor.state.doc !== before.doc) this.goalX = null;
     this.refreshHosts();
-    this.cross.sync();
-    if (focused && doc !== null && ownsFocus(this, doc)) this.keepFocus();
-    this.syncSelectionToDom();
+    this.#cross.sync();
+    if (focused && doc !== null && ownsFocus(this, doc)) this.#keepFocus();
+    this.syncSelectionToDom(true);
     return handled;
   }
   // A change made outside edit() reaches the hosts when React draws them, so the selection is written back once that
-  // has happened, and focus follows a host the change replaced. A collaborator's change scrolls nothing doing so.
+  // has happened, and focus follows a host the change replaced. A render of collaborators' changes alone, or of one
+  // that changed the document, scrolls nothing doing so; a caret move of theirs leaves the rest to scroll as it would.
   afterRender() {
-    const { quiet } = this;
-    this.quiet = false;
-    const doc = this.ownerDocument();
-    const moved = this.outside.takeMoved();
-    if (!this.outside.takeFocused() || !doc || !ownsFocus(this, doc)) return;
-    if (moved) this.selectFromDom(moved);
-    this.cross.sync();
+    const quiet = this.#quiet || !this.#loud;
+    this.#quiet = this.#loud = false;
+    const doc = this.#ownerDocument();
+    const moved = this.#outside.takeMoved();
+    if (!this.#outside.takeFocused() || !doc || !ownsFocus(this, doc)) return;
+    if (moved) this.#selectFromDom(moved);
+    this.#cross.sync();
     const follow = () => {
-      this.keepFocus(quiet);
+      this.#keepFocus(quiet);
       this.syncSelectionToDom();
     };
     if (!quiet) return follow();
@@ -2572,7 +2589,7 @@ var ViewController = class {
   }
   refreshHosts() {
     for (const host of this.registry.all()) {
-      if (!this.isComposing(host)) this.hosts.renderIfChanged(host);
+      if (!this.#isComposing(host)) this.#hosts.renderIfChanged(host);
     }
   }
   run(command) {
@@ -2587,63 +2604,63 @@ var ViewController = class {
   renderHost(block, region) {
     const element = this.registry.get(block, region);
     const host = element && { block, region, element };
-    if (!host || this.isComposing(host) || !this.hosts.render(host)) return;
+    if (!host || this.#isComposing(host) || !this.#hosts.render(host)) return;
     const inSelection = element.contains(this.domSelection()?.focusNode ?? null);
     if (inSelection && hasFocus(this, element.ownerDocument)) this.syncSelectionToDom();
   }
   domSelection() {
-    return this.ownerDocument()?.getSelection() ?? null;
+    return this.#ownerDocument()?.getSelection() ?? null;
   }
-  syncSelectionToDom() {
-    writeModelSelection(this, this.ownerDocument(), () => this.binding?.selectionSync.suppressNext());
+  syncSelectionToDom(local) {
+    writeModelSelection(this, this.#ownerDocument(), () => this.#binding?.selectionSync.suppressNext(), local);
   }
   // A pointer drag across hosts sets the model selection itself, while the browser keeps extending its own. Leaving
   // cross mode re-renders the hosts that drew it as decorations, which can remove the node holding the caret, so the
   // selection is written back.
   readSelectionFromDom() {
-    const selection = movedSelection(this, this.ownerDocument(), this.editor.state.selection);
+    const selection = movedSelection(this, this.#ownerDocument(), this.editor.state.selection);
     if (selection === null) return;
-    const wasCross = this.cross.active;
+    const wasCross = this.#cross.active;
     if (!this.nativeVerticalMove) this.goalX = null;
-    this.flush(() => this.selectFromDom(selection));
-    this.cross.sync();
-    if (!wasCross && !this.cross.active) return;
-    this.keepFocus();
+    this.#flush(() => this.#selectFromDom(selection));
+    this.#cross.sync();
+    if (!wasCross && !this.#cross.active) return;
+    this.#keepFocus();
     this.syncSelectionToDom();
   }
   focus(target) {
     const { editor } = this;
     const selection = focusTarget(editor.state, target);
     if (selection !== null && !sameSelection(selection, editor.state.selection)) dispatchSelection(this, selection);
-    this.takeFocus();
+    this.#takeFocus();
     this.syncSelectionToDom();
   }
   setReadOnly(readOnly) {
-    this.readOnlyState.set(readOnly);
+    this.#readOnlyState.set(readOnly);
   }
   subscribeReadOnly(listener) {
-    return this.readOnlyState.subscribe(listener);
+    return this.#readOnlyState.subscribe(listener);
   }
   destroy() {
-    this.detachRoot?.();
+    this.#detachRoot?.();
   }
-  selectFromDom(selection) {
+  #selectFromDom(selection) {
     const { editor } = this;
-    this.outside.inside(() => editor.dispatch(editor.createTransaction().setSelection(selection).setOrigin("input")));
+    this.#outside.inside(() => editor.dispatch(editor.createTransaction().setSelection(selection).setOrigin("input")));
   }
-  isComposing(host) {
+  #isComposing(host) {
     return this.composingKey !== null && hostKey(host.block, host.region) === this.composingKey;
   }
-  ownerDocument() {
-    return (this.binding?.root ?? this.registry.all().next().value?.element)?.ownerDocument ?? null;
+  #ownerDocument() {
+    return (this.#binding?.root ?? this.registry.all().next().value?.element)?.ownerDocument ?? null;
   }
   // React replaces a host whose block changes kind, which drops focus, and Firefox does not move focus into another
   // host when a script selects inside it.
-  keepFocus(preventScroll) {
-    if (this.composingKey === null) this.takeFocus(preventScroll);
+  #keepFocus(preventScroll) {
+    if (this.composingKey === null) this.#takeFocus(preventScroll);
   }
-  takeFocus(preventScroll) {
-    const element = this.drawn.focusElement();
+  #takeFocus(preventScroll) {
+    const element = this.#drawn.focusElement();
     if (!element || element.ownerDocument.activeElement === element) return;
     if (element === this.sink) focusSink(this);
     else element.focus({ preventScroll });
@@ -2722,7 +2739,7 @@ function SelectionSink({ label = "Selected content", blockLabel }) {
   );
   useIsomorphicLayoutEffect(() => {
     const sink = ref.current;
-    return sink === null ? void 0 : controller.registerSink(sink);
+    return sink ? controller.registerSink(sink) : void 0;
   }, [controller]);
   return /* @__PURE__ */ jsx(
     "div",
@@ -2780,7 +2797,7 @@ function EditableRegion({ block, region, label, id, placeholder, className }) {
   const { inline, decorations, placeholder: shown } = useEditorState(controller, select, samePainted);
   useIsomorphicLayoutEffect(() => {
     const host = ref.current;
-    return host === null ? void 0 : controller.registry.register(block, region, host);
+    return host ? controller.registry.register(block, region, host) : void 0;
   }, [controller, block, region]);
   useIsomorphicLayoutEffect(() => {
     controller.renderHost(block, region);
@@ -2831,7 +2848,7 @@ var keepFocus = (event) => event.preventDefault();
 
 // src/view/react/TaskCheckbox.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-function TaskCheckbox({ block, controller, label = "Task", labelledBy }) {
+function TaskCheckbox({ block, controller, label, labelledBy }) {
   const checked = block.attrs.checked === true;
   const flip2 = flipCommand(block);
   const readOnly = useReadOnly(controller);
@@ -2842,7 +2859,7 @@ function TaskCheckbox({ block, controller, label = "Task", labelledBy }) {
       role: "checkbox",
       "aria-checked": checked,
       "aria-readonly": readOnly ? "true" : void 0,
-      "aria-label": label,
+      "aria-label": firstNamed(label, "Task"),
       "aria-labelledby": labelledBy,
       className: "quoin-task-box",
       contentEditable: false,
@@ -3051,7 +3068,7 @@ var BlockShell = memo(function BlockShell2({ block, renderers }) {
   const hidden = status === "hidden";
   useIsomorphicLayoutEffect(() => {
     const element = ref.current;
-    return hidden || element === null ? void 0 : controller.registerBlockElement(block.id, element);
+    return hidden || !element ? void 0 : controller.registerBlockElement(block.id, element);
   }, [controller, block.id, hidden]);
   if (hidden) return null;
   const Renderer = rendererFor(renderers, block.type);
@@ -3214,7 +3231,7 @@ function EditorView({
   const blockIdScope = useId();
   const blocks = useEditorState(controller, (state) => state.doc.blocks);
   const shells = useBlockElements(blocks, renderers);
-  useIsomorphicLayoutEffect(() => root.current === null ? void 0 : controller.attach(root.current), [controller]);
+  useIsomorphicLayoutEffect(() => root.current ? controller.attach(root.current) : void 0, [controller]);
   return /* @__PURE__ */ jsx13(QuoinEditorContext.Provider, { value: controller, children: /* @__PURE__ */ jsxs3(
     "div",
     {
@@ -3224,7 +3241,7 @@ function EditorView({
       role: "group",
       "aria-label": label,
       "aria-describedby": hintId,
-      onFocus: (event) => focusOwners.set(event.target, controller),
+      onFocusCapture: (event) => focusOwners.set(event.target, controller),
       children: [
         /* @__PURE__ */ jsx13(BlockDomIdScope.Provider, { value: blockIdScope, children: /* @__PURE__ */ jsx13(UnsupportedBlockLabel.Provider, { value: unsupportedBlockLabel, children: /* @__PURE__ */ jsx13(BlockPlaceholderContext.Provider, { value: blockPlaceholder, children: blocks.length === 0 ? /* @__PURE__ */ jsx13(EmptyDocumentHost, { placeholder, label: paragraphLabel }) : shells }) }) }),
         children,
@@ -3262,6 +3279,7 @@ export {
   NATIVE_INTERACTION,
   useIsomorphicLayoutEffect,
   onBlock,
+  listen,
   createAutoScroll,
   hostKey,
   regionInline,
@@ -3283,4 +3301,4 @@ export {
   BlockShell,
   EditorView
 };
-//# sourceMappingURL=chunk-ZS2WA357.js.map
+//# sourceMappingURL=chunk-EPARJI4V.js.map