@domternal/core 1.0.2 → 1.1.0

package/README.md

@@ -29,6 +29,9 @@ the DOM, so it runs anywhere without it.
 pnpm add linkedom
 ```
 
+The 1.1 release installs `@domternal/pm` in the range `>=1.1.0 <2.0.0`.
+Use matching 1.1 versions of the framework wrappers and extensions when upgrading.
+
 ### One copy of the core, and of ProseMirror
 
 ProseMirror compares classes by identity, and so does this package. Two copies of
@@ -97,6 +100,25 @@ const editor = new Editor({
 });
 ```
 
+## Moving an existing editor
+
+Use `editor.adoptDom(element)` to move the existing editor view into a new mount
+element while preserving its document, selection, undo history, and plugin state:
+
+```ts
+editor.adoptDom(document.getElementById('next-editor-mount')!);
+```
+
+The `adopt` event reports a changed DOM context and lets host-dependent UI rebind.
+The original `mount` and `create` events remain creation-time events; they are not
+repeated by adoption. Calling `adoptDom` with an unchanged DOM context is a no-op.
+React and Vue wrappers use this path when attaching an existing editor.
+
+Custom plugin views can use `createAdoptablePluginView(editor, view, createView)`
+to recreate their DOM bindings after adoption while retaining plugin state. The
+factory must return a ProseMirror plugin view and clean up its own DOM resources
+in `destroy`. The event payload type is exported as `AdoptEventProps`.
+
 ## Presets
 
 `preset: 'notion'` switches the editor to the Notion-style experience in one option. It paints

package/dist/index.cjs

@@ -3664,6 +3664,7 @@ var Editor = class _Editor extends EventEmitter {
    * editor itself added, never one the consumer wrote.
    */
   _presetClassHost = null;
+  _domContext = null;
   /**
    * Creates a new Editor instance
    *
@@ -3742,18 +3743,50 @@ var Editor = class _Editor extends EventEmitter {
    * wrappers call it again after adopting the view's DOM: they construct
    * the editor in a detached element, so the creation-time run cannot see
    * the host yet. Idempotent; a no-op for any other preset. Only a class
-   * added here is removed again on destroy.
+   * added here is removed when the host changes or the editor is destroyed.
    */
   adoptPresetClass() {
-    if (this.options.preset !== "notion" || this._presetClassHost) {
+    if (this.options.preset !== "notion") {
       return;
     }
     const host = this.view.dom.closest(".dm-editor");
+    if (this._presetClassHost && this._presetClassHost !== host) {
+      this._presetClassHost.classList.remove("dm-notion-mode");
+      this._presetClassHost = null;
+    }
     if (host && !host.classList.contains("dm-notion-mode")) {
       host.classList.add("dm-notion-mode");
       this._presetClassHost = host;
     }
   }
+  /**
+   * Moves the existing view into a mount element without recreating its state.
+   * Host-dependent UI receives an `adopt` event after the move. Calling this
+   * again with the same DOM context is a no-op. The original `mount` and
+   * `create` events remain creation-time events.
+   */
+  adoptDom(element) {
+    if (this._isDestroyed) return this;
+    if (this.view.dom.parentElement !== element) {
+      element.appendChild(this.view.dom);
+    }
+    this.view.updateRoot();
+    this.adoptPresetClass();
+    const previous = this._domContext;
+    const current = this.captureDomContext();
+    this._domContext = current;
+    if (previous?.element === current.element && previous.host === current.host && previous.hostParent === current.hostParent && previous.root === current.root && previous.connected === current.connected) {
+      return this;
+    }
+    this.emit("adopt", {
+      editor: this,
+      view: this.view,
+      element,
+      host: current.host,
+      previousHost: previous?.host ?? null
+    });
+    return this;
+  }
   /**
    * Checks if the editor content is empty
    */
@@ -4101,6 +4134,7 @@ var Editor = class _Editor extends EventEmitter {
       this._presetClassHost = null;
     }
     this.view.destroy();
+    this._domContext = null;
     this._extensionManager.destroy();
     this.removeAllListeners();
     this._isDestroyed = true;
@@ -4203,6 +4237,7 @@ var Editor = class _Editor extends EventEmitter {
     });
     this._isViewConstructing = false;
     this.adoptPresetClass();
+    this._domContext = this.captureDomContext();
     this.emit("mount", { editor: this, view: this.view });
     this.options.onMount?.({ editor: this, view: this.view });
     this.commandManager = new CommandManager(this);
@@ -4218,6 +4253,16 @@ var Editor = class _Editor extends EventEmitter {
     this.options.onCreate?.({ editor: this });
     this._extensionManager.callOnCreate();
   }
+  captureDomContext() {
+    const host = this.view.dom.closest(".dm-editor");
+    return {
+      element: this.view.dom.parentElement,
+      host,
+      hostParent: host?.parentElement ?? null,
+      root: this.view.dom.getRootNode(),
+      connected: this.view.dom.isConnected
+    };
+  }
   /**
    * Builds the dispatchTransaction prop. Plugin views can dispatch synchronously
    * inside EditorView's constructor, before `editor.view` is assigned; ProseMirror
@@ -4438,6 +4483,36 @@ function refocusEditorAfterCommand(view) {
   });
 }
 
+// src/utils/createAdoptablePluginView.ts
+function createAdoptablePluginView(editor, view, createView) {
+  let currentView = view;
+  let binding = createView(currentView);
+  let destroyed = false;
+  const rebind = () => {
+    const previous = binding;
+    binding = void 0;
+    previous?.destroy?.();
+    if (!destroyed) {
+      binding = createView(currentView);
+    }
+  };
+  editor?.on("adopt", rebind);
+  return {
+    update(nextView, previousState) {
+      currentView = nextView;
+      binding?.update?.(nextView, previousState);
+    },
+    destroy() {
+      if (destroyed) return;
+      destroyed = true;
+      editor?.off("adopt", rebind);
+      const previous = binding;
+      binding = void 0;
+      previous?.destroy?.();
+    }
+  };
+}
+
 // src/utils/defaultBubbleContexts.ts
 var NOTION_TEXT_CONTEXT = Object.freeze([
   "ai",
@@ -5831,7 +5906,7 @@ function createFloatingMenuPlugin(options) {
         return false;
       }
     },
-    view: (editorView) => {
+    view: (view) => createAdoptablePluginView(editor, view, (editorView) => {
       editorEl = editorView.dom.closest(".dm-editor");
       if (editorEl && element.parentElement !== editorEl) {
         editorEl.appendChild(element);
@@ -5867,11 +5942,11 @@ function createFloatingMenuPlugin(options) {
       editor.on("focus", onFocus);
       editor.on("blur", onBlur);
       return {
-        update: (view) => {
-          if (isVisibleNow(view)) updatePosition(view);
+        update: (view2) => {
+          if (isVisibleNow(view2)) updatePosition(view2);
           else {
             hideMenu();
-            clearTriggeredFlag(view);
+            clearTriggeredFlag(view2);
           }
         },
         destroy: () => {
@@ -5889,7 +5964,7 @@ function createFloatingMenuPlugin(options) {
           editorEl = null;
         }
       };
-    }
+    })
   });
 }
 
@@ -7953,9 +8028,9 @@ function autolinkPlugin(options) {
         }
         const { state } = view;
         const $from = state.doc.resolve(from);
+        const lookbackStart = Math.max(0, $from.parentOffset - 500);
         const textBefore = $from.parent.textBetween(
-          Math.max(0, $from.parentOffset - 500),
-          // Look back max 500 chars
+          lookbackStart,
           $from.parentOffset,
           void 0,
           "\uFFFC"
@@ -7986,15 +8061,35 @@ function autolinkPlugin(options) {
           return false;
         }
         const blockStart = from - $from.parentOffset;
-        const linkStart = blockStart + lastMatch.start;
-        const linkEnd = blockStart + lastMatch.end;
+        const linkStart = blockStart + lookbackStart + lastMatch.start;
+        const linkEnd = blockStart + lookbackStart + lastMatch.end;
         const $linkStart = state.doc.resolve(linkStart);
-        if ($linkStart.marks().some((m) => m.type === type)) {
+        const existingLink = $linkStart.marks().find((mark2) => mark2.type === type);
+        if (existingLink && state.doc.resolve(to).nodeAfter?.marks.some((mark2) => mark2.eq(existingLink))) {
           return false;
         }
         const tr = state.tr;
-        tr.addMark(linkStart, linkEnd, type.create({ href }));
+        if (!existingLink) {
+          tr.addMark(linkStart, linkEnd, type.create({ href }));
+        } else {
+          let markedEnd = linkStart;
+          state.doc.nodesBetween(linkStart, linkEnd, (node, pos) => {
+            if (node.isText && pos <= markedEnd && node.marks.some((mark2) => mark2.eq(existingLink))) {
+              markedEnd = Math.min(pos + node.nodeSize, linkEnd);
+            }
+          });
+          if (markedEnd > linkStart && markedEnd < linkEnd) {
+            const prefix = state.doc.textBetween(linkStart, markedEnd);
+            const prefixMatch = linkifyjs.find(prefix, { defaultProtocol })[0];
+            if (prefixMatch?.start === 0 && prefixMatch.end === prefix.length && prefixMatch.href === existingLink.attrs["href"]) {
+              tr.addMark(linkStart, linkEnd, type.create({ ...existingLink.attrs, href }));
+            }
+          }
+        }
+        const insertionMarks = type.removeFromSet(state.storedMarks ?? $from.marks());
+        tr.setStoredMarks(insertionMarks);
         tr.insertText(text, from, to);
+        tr.setStoredMarks(insertionMarks);
         view.dispatch(tr);
         return true;
       }
@@ -9730,11 +9825,11 @@ var SelectionDecoration = Extension.create(
                     return false;
                   }
                 }
-                const { from, to } = view.state.selection;
+                const { from, to, $from } = view.state.selection;
                 if (from !== to) {
                   view.dispatch(
                     view.state.tr.setSelection(
-                      state.TextSelection.create(view.state.doc, from)
+                      state.TextSelection.between($from, $from, 1)
                     )
                   );
                 }
@@ -11040,7 +11135,7 @@ function createBubbleMenuPlugin(options) {
         return { visible, from, to };
       }
     },
-    view: (editorView) => {
+    view: (view) => createAdoptablePluginView(editor, view, (editorView) => {
       const editorEl = editorView.dom.closest(".dm-editor");
       if (editorEl && element.parentElement !== editorEl) {
         editorEl.appendChild(element);
@@ -11104,16 +11199,16 @@ function createBubbleMenuPlugin(options) {
       editor.on("focus", onFocus);
       editor.on("blur", onBlur);
       return {
-        update: (view, prevState) => {
-          if (view.composing) return;
-          if (!view.editable) {
+        update: (view2, prevState) => {
+          if (view2.composing) return;
+          if (!view2.editable) {
             hideMenu();
             return;
           }
-          const state = pluginKey.getState(view.state);
+          const state = pluginKey.getState(view2.state);
           const prevPluginState = pluginKey.getState(prevState);
           const domShown = element.hasAttribute("data-show") || updateTimeout !== null;
-          if (state?.visible === prevPluginState?.visible && state?.from === prevPluginState?.from && state?.to === prevPluginState?.to && !(state?.visible && view.state.doc !== prevState.doc) && domShown === Boolean(state?.visible)) {
+          if (state?.visible === prevPluginState?.visible && state?.from === prevPluginState?.from && state?.to === prevPluginState?.to && !(state?.visible && view2.state.doc !== prevState.doc) && domShown === Boolean(state?.visible)) {
             return;
           }
           if (updateTimeout) {
@@ -11123,10 +11218,10 @@ function createBubbleMenuPlugin(options) {
           if (state?.visible && !mouseDown) {
             if (updateDelay > 0) {
               updateTimeout = setTimeout(() => {
-                updatePosition(view, state.from, state.to);
+                updatePosition(view2, state.from, state.to);
               }, updateDelay);
             } else {
-              updatePosition(view, state.from, state.to);
+              updatePosition(view2, state.from, state.to);
             }
           } else {
             hideMenu();
@@ -11154,7 +11249,7 @@ function createBubbleMenuPlugin(options) {
           hideMenu();
         }
       };
-    }
+    })
   });
 }
 var BubbleMenu = Extension.create({
@@ -11240,7 +11335,7 @@ var StarterKit = Extension.create({
 });
 
 // src/index.ts
-var VERSION = "1.0.2";
+var VERSION = "1.1.0";
 
 Object.defineProperty(exports, "PluginKey", {
   enumerable: true,
@@ -11333,6 +11428,7 @@ exports.clearContent = clearContent;
 exports.collapseSeparators = collapseSeparators;
 exports.copyThemeClass = copyThemeClass;
 exports.createAccumulatingDispatch = createAccumulatingDispatch;
+exports.createAdoptablePluginView = createAdoptablePluginView;
 exports.createBubbleMenuPlugin = createBubbleMenuPlugin;
 exports.createBubbleShouldShow = createBubbleShouldShow;
 exports.createCanChecker = createCanChecker;