@dxos/react-ui-editor 0.3.11-main.668f0ff → 0.3.11-main.9bacd9f

package/dist/lib/browser/index.mjs

@@ -1422,13 +1422,64 @@ var ImageWidget = class extends WidgetType3 {
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/link.ts
 import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateField as StateField5 } from "@codemirror/state";
-import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType4 } from "@codemirror/view";
+import { Decoration as Decoration5, EditorView as EditorView7, WidgetType as WidgetType4, hoverTooltip as hoverTooltip2 } from "@codemirror/view";
+import { tooltipContent } from "@dxos/react-ui-theme";
+var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
 var link = (options = {}) => {
-  return StateField5.define({
-    create: (state) => update2(state, options),
-    update: (_, tr) => update2(tr.state, options),
-    provide: (field) => EditorView7.decorations.from(field)
-  });
+  const extensions = [
+    StateField5.define({
+      create: (state) => update2(state, options),
+      update: (_, tr) => update2(tr.state, options),
+      provide: (field) => EditorView7.decorations.from(field)
+    })
+  ];
+  if (options.onHover) {
+    extensions.push(
+      // https://codemirror.net/examples/tooltip
+      // https://codemirror.net/docs/ref/#view.hoverTooltip
+      // https://github.com/codemirror/view/blob/main/src/tooltip.ts
+      hoverTooltip2((view, pos) => {
+        const { from, text } = view.state.doc.lineAt(pos);
+        const p = pos - from;
+        let idx = 0;
+        let match;
+        do {
+          match = text.substring(idx).match(markdownLinkRegexp);
+          if (!match) {
+            match = void 0;
+            break;
+          }
+          idx = text.indexOf(match[0]);
+          if (p >= idx && p < idx + match[0].length) {
+            break;
+          }
+          idx += match[0].length;
+        } while (true);
+        if (!match) {
+          return null;
+        }
+        const [, , url] = match ?? [];
+        return {
+          pos: idx + from,
+          end: idx + from + match[0].length,
+          above: true,
+          create: () => {
+            const el = document.createElement("div");
+            el.className = tooltipContent({}, "pli-2 plb-1");
+            options.onHover(el, url);
+            return {
+              dom: el,
+              offset: {
+                x: 0,
+                y: 4
+              }
+            };
+          }
+        };
+      })
+    );
+  }
+  return extensions;
 };
 var LinkButton = class extends WidgetType4 {
   constructor(_pos, _url, _onAttach) {
@@ -1447,14 +1498,13 @@ var LinkButton = class extends WidgetType4 {
   }
 };
 var LinkText = class extends WidgetType4 {
-  constructor(_pos, _text, _url) {
+  constructor(_text, _url) {
     super();
-    this._pos = _pos;
     this._text = _text;
     this._url = _url;
   }
   eq(other) {
-    return this._pos === other._pos && this._url === other._url;
+    return this._url === other._url;
   }
   toDOM(view) {
     const link2 = document.createElement("a");
@@ -1468,7 +1518,7 @@ var LinkText = class extends WidgetType4 {
       link2.onclick = () => {
         view.dispatch({
           selection: {
-            anchor: this._pos
+            anchor: view.posAtDOM(link2)
           }
         });
       };
@@ -1491,7 +1541,7 @@ var update2 = (state, options) => {
         }
         if (state.readOnly || cursor < node.from || cursor > node.to) {
           builder.add(node.from, node.to, Decoration5.replace({
-            widget: new LinkText(node.from, text, options.link ? url : void 0)
+            widget: new LinkText(text, options.link ? url : void 0)
           }));
         }
         if (options.onRender) {
@@ -1507,24 +1557,18 @@ var update2 = (state, options) => {
 };
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/listener.ts
-import { StateField as StateField6 } from "@codemirror/state";
 import { EditorView as EditorView8 } from "@codemirror/view";
-import { nonNullable as nonNullable2 } from "@dxos/util";
-var listener = ({ onFocus, onChange }) => [
-  onFocus ? EditorView8.focusChangeEffect.of((view, focused) => {
+var listener = ({ onFocus, onChange }) => {
+  const extensions = [];
+  onFocus && extensions.push(EditorView8.focusChangeEffect.of((_, focused) => {
     onFocus(focused);
     return null;
-  }) : void 0,
-  onChange ? StateField6.define({
-    create: () => null,
-    update: (_value, transaction) => {
-      if (transaction.docChanged) {
-        onChange(transaction.newDoc.toString());
-      }
-      return null;
-    }
-  }) : void 0
-].filter(nonNullable2);
+  }));
+  onChange && extensions.push(EditorView8.updateListener.of((update4) => {
+    onChange(update4.state.doc.toString());
+  }));
+  return extensions;
+};
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/markdown/bundle.ts
 import { closeBrackets as closeBrackets2, closeBracketsKeymap } from "@codemirror/autocomplete";
@@ -1816,10 +1860,10 @@ var mermaid = () => {
 
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/table.ts
 import { syntaxTree as syntaxTree3 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField7 } from "@codemirror/state";
+import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
 import { Decoration as Decoration6, EditorView as EditorView10, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField7.define({
+  return StateField6.define({
     create: (state) => update3(state, options),
     update: (_, tr) => update3(tr.state, options),
     provide: (field) => EditorView10.decorations.from(field)
@@ -1995,50 +2039,6 @@ var tasklist = (options = {}) => {
   ];
 };
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/tooltip.ts
-import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
-import { tooltipContent } from "@dxos/react-ui-theme";
-var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
-var tooltip = ({ onHover, regexp = markdownLinkRegexp }) => hoverTooltip2((view, pos) => {
-  const { from, text } = view.state.doc.lineAt(pos);
-  const p = pos - from;
-  let idx = 0;
-  let match;
-  do {
-    match = text.substring(idx).match(regexp);
-    if (!match) {
-      match = void 0;
-      break;
-    }
-    idx = text.indexOf(match[0]);
-    if (p >= idx && p < idx + match[0].length) {
-      break;
-    }
-    idx += match[0].length;
-  } while (true);
-  if (!match) {
-    return null;
-  }
-  const [, , url] = match ?? [];
-  return {
-    pos: idx + from,
-    end: idx + from + match[0].length,
-    above: true,
-    create: () => {
-      const el = document.createElement("div");
-      el.className = tooltipContent({}, "pli-2 plb-1");
-      onHover(el, url);
-      return {
-        dom: el,
-        offset: {
-          x: 0,
-          y: 4
-        }
-      };
-    }
-  };
-});
-
 // packages/ui/react-ui-editor/src/components/TextEditor/extensions/typewriter.ts
 import { keymap as keymap5 } from "@codemirror/view";
 var defaultItems = [
@@ -2589,7 +2589,6 @@ export {
   tags2 as tags,
   tasklist,
   textTheme,
-  tooltip,
   typewriter,
   useTextModel
 };