@dxos/react-ui-editor 0.3.9-next.4584ca9 → 0.3.9-next.7522f7a

package/dist/lib/browser/index.mjs

@@ -397,6 +397,13 @@ var markdownTheme = {
   "& .cm-yLineSelection": {
     margin: "0"
   },
+  ".cm-link": {
+    color: "rgb(20 89 208)",
+    textDecorationLine: "underline",
+    textDecorationThickness: "1px",
+    textUnderlineOffset: "2px",
+    borderRadius: ".125rem"
+  },
   ...Object.keys(get(tokens, "extend.fontSize", {})).reduce((acc, fontSize) => {
     const height = get(tokens, [
       "extend",
@@ -417,7 +424,7 @@ var markdownTheme = {
     return acc;
   }, {})
 };
-var markdownDarkHighlighting = HighlightStyle.define([
+var markdownHighlightStyle = HighlightStyle.define([
   {
     tag: [
       tags.keyword,
@@ -594,49 +601,56 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, editorMode
     const state2 = EditorState.create({
       doc: content?.toString(),
       extensions: [
-        // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799.
+        // Based on https://github.com/codemirror/dev/issues/44#issuecomment-789093799
         listenChangesExtension,
-        ...editorMode === "vim" ? [
-          vim()
-        ] : [],
+        // TODO(burdon): Create custom bundle to make this class more reusable and retire simpler TextEditor component.
         // All of https://github.com/codemirror/basic-setup minus line numbers and fold gutter.
+        // https://codemirror.net/docs/ref/#codemirror.basicSetup
+        autocompletion(),
+        bracketMatching(),
+        closeBrackets(),
+        crosshairCursor(),
+        dropCursor(),
+        drawSelection(),
+        highlightActiveLine(),
         highlightActiveLineGutter(),
+        highlightSelectionMatches(),
         highlightSpecialChars(),
         history(),
-        drawSelection(),
-        dropCursor(),
-        EditorState.allowMultipleSelections.of(true),
         indentOnInput(),
+        placeholder(slots.editor?.placeholder ?? ""),
+        rectangularSelection(),
         syntaxHighlighting(defaultHighlightStyle, {
           fallback: true
         }),
-        bracketMatching(),
-        closeBrackets(),
-        autocompletion(),
-        rectangularSelection(),
-        crosshairCursor(),
-        highlightActiveLine(),
-        highlightSelectionMatches(),
-        placeholder(slots.editor?.placeholder ?? ""),
+        EditorState.allowMultipleSelections.of(true),
+        EditorView.lineWrapping,
         keymap.of([
           ...closeBracketsKeymap,
+          ...completionKeymap,
           ...defaultKeymap,
-          ...searchKeymap,
-          ...historyKeymap,
           ...foldKeymap,
-          ...completionKeymap,
+          ...historyKeymap,
           ...lintKeymap,
+          ...searchKeymap,
           indentWithTab
         ]),
-        EditorView.lineWrapping,
-        // Themes.
+        // Main extension.
+        // https://github.com/codemirror/lang-markdown
         markdown({
           base: markdownLanguage2,
           codeLanguages: languages,
           extensions: [
+            // TODO(burdon): This seems to upgrade the parser.
+            // GitHub flavored markdown bundle: Table, TaskList, Strikethrough, and Autolink.
+            // https://github.com/lezer-parser/markdown?tab=readme-ov-file#github-flavored-markdown
+            // https://github.github.com/gfm
+            // GFM,
+            // Custom styling.
             markdownTagsExtension
           ]
         }),
+        // Theme.
         EditorView.theme({
           ...markdownTheme,
           ...slots.editor?.markdownTheme
@@ -647,8 +661,14 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, editorMode
           syntaxHighlighting(defaultHighlightStyle)
         ],
         // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-        syntaxHighlighting(markdownDarkHighlighting),
+        syntaxHighlighting(markdownHighlightStyle),
+        // Settings.
+        ...editorMode === "vim" ? [
+          vim()
+        ] : [],
+        // TODO(burdon): Move to extensions.
         // Replication and awareness (incl. remote selection).
+        // https://codemirror.net/docs/ref/#collab
         ...content instanceof YText ? [
           yCollab(content, provider?.awareness)
         ] : [],
@@ -850,6 +870,9 @@ var RichTextEditor = /* @__PURE__ */ forwardRef2((props, ref) => {
 // packages/ui/react-ui-editor/src/components/Editor/Editor.tsx
 var Editor = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef3(({ slots, ...params }, forwardedRef) => {
   const model = useTextModel(params);
+  if (!model) {
+    return null;
+  }
   if (model?.content instanceof YXmlFragment) {
     return /* @__PURE__ */ React3.createElement(RichTextEditor, {
       ref: forwardedRef,
@@ -887,16 +910,17 @@ var defaultStyles = {
   "&.cm-focused": {
     outline: "none"
   },
-  ".cm-placeholder": {
-    fontFamily: get2(tokens2, "fontFamily.body", []).join(",")
-  },
-  "& .cm-scroller": {
+  ".cm-scroller": {
     fontFamily: get2(tokens2, "fontFamily.body", []).join(","),
     overflow: "visible"
   },
   ".cm-tooltip": {
     backgroundColor: "transparent",
     border: "none"
+  },
+  ".cm-link": {
+    color: get2(tokens2, "extend.colors.primary.500"),
+    textDecoration: "underline"
   }
 };
 
@@ -936,6 +960,7 @@ var TextEditor = /* @__PURE__ */ forwardRef4(({ model, extensions = [], theme =
           syntaxHighlighting2(defaultHighlightStyle2)
         ],
         // Replication.
+        // TODO(burdon): Move to default extensions.
         ...content instanceof YText2 ? [
           yCollab2(content, void 0)
         ] : [],
@@ -983,11 +1008,117 @@ var TextEditor = /* @__PURE__ */ forwardRef4(({ model, extensions = [], theme =
   });
 });
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlink.tsx
-import { Decoration, EditorView as EditorView3, MatchDecorator, ViewPlugin } from "@codemirror/view";
-var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlinkDecoration.ts
+import { syntaxTree } from "@codemirror/language";
+import { RangeSetBuilder, StateField as StateField2 } from "@codemirror/state";
+import { Decoration, EditorView as EditorView3, WidgetType } from "@codemirror/view";
+var Link = class extends WidgetType {
+  constructor(_anchor, _text, _url) {
+    super();
+    this._anchor = _anchor;
+    this._text = _text;
+    this._url = _url;
+  }
+  eq(other) {
+    return this._text === other.text && this._url === other.url;
+  }
+  toDOM(view) {
+    const link = document.createElement("a");
+    link.setAttribute("class", "cm-link");
+    link.textContent = this._text;
+    if (this._url) {
+      link.setAttribute("target", "_blank");
+      link.href = this._url;
+    } else {
+      link.onclick = () => {
+        view.dispatch({
+          selection: {
+            anchor: this._anchor
+          }
+        });
+      };
+    }
+    return link;
+  }
+};
+var hyperlinkDecoration = ({ link } = {}) => {
+  return StateField2.define({
+    create: (state) => update(state, link),
+    update: (_, tr) => update(tr.state, link),
+    provide: (field) => EditorView3.decorations.from(field)
+  });
+};
+var update = (state, link) => {
+  const builder = new RangeSetBuilder();
+  const cursor2 = state.selection.main.head;
+  syntaxTree(state).iterate({
+    enter: (node) => {
+      if (cursor2 < node.from || cursor2 > node.to) {
+        if (node.name === "Link") {
+          const marks = node.node.getChildren("LinkMark");
+          const text = marks.length >= 2 ? state.sliceDoc(marks[0].to, marks[1].from) : "";
+          const urlNode = node.node.getChild("URL");
+          const url = urlNode ? state.sliceDoc(urlNode.from, urlNode.to) : "";
+          builder.add(node.from, node.to, Decoration.replace({
+            widget: new Link(node.from, text, link ? url : void 0)
+          }));
+          return false;
+        }
+      }
+      return true;
+    }
+  });
+  return builder.finish();
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlinkTooltip.tsx
+import { hoverTooltip } from "@codemirror/view";
+import { tooltipContent } from "@dxos/react-ui-theme";
+var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)/;
+var createHyperlinkTooltip = (onHover, regexp = markdownLinkRegexp) => hoverTooltip((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("a");
+      el.innerText = "_";
+      el.className = tooltipContent({}, "mb-2 p-1");
+      el.setAttribute("target", "_blank");
+      el.setAttribute("href", url);
+      onHover(el, url);
+      return {
+        dom: el
+      };
+    }
+  };
+});
+
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlinkWidget.tsx
+import { Decoration as Decoration2, EditorView as EditorView4, MatchDecorator, ViewPlugin } from "@codemirror/view";
+var markdownLinkRegexp2 = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
 var linkDecorator = () => new MatchDecorator({
-  regexp: markdownLinkRegexp,
+  regexp: markdownLinkRegexp2,
   decorate: (add, from, to, match, view) => {
     const [_, label, url] = match;
     const p0 = {
@@ -1006,18 +1137,24 @@ var linkDecorator = () => new MatchDecorator({
       start: p1.end + 1,
       end: p1.end + 1 + url.length + 2
     };
-    add(p0.start, p0.end, Decoration.mark({
-      class: "cm-hyperlink-bracket"
+    add(p0.start, p0.end, Decoration2.mark({
+      class: "cm-hyperlink-bracket",
+      _attributes: {
+        style: "display: none"
+      }
     }));
-    add(p1.start, p1.end, Decoration.mark({
+    add(p1.start, p1.end, Decoration2.mark({
       class: "cm-hyperlink-label"
     }));
-    add(p2.start, p2.end, Decoration.mark({
-      class: "cm-hyperlink-bracket"
+    add(p2.start, p2.end, Decoration2.mark({
+      class: "cm-hyperlink-bracket",
+      _attributes: {
+        style: "display: none"
+      }
     }));
-    add(p3.start, p3.end, Decoration.mark({
+    add(p3.start, p3.end, Decoration2.mark({
       class: "cm-hyperlink-url",
-      __attributes: {
+      _attributes: {
         style: "display: none"
       }
     }));
@@ -1029,9 +1166,9 @@ function hyperLinkExtension() {
       this.decorator = linkDecorator();
       this.decorations = this.decorator.createDeco(view);
     }
-    update(update) {
-      if (update.docChanged || update.viewportChanged) {
-        this.decorations = this.decorator.updateDeco(update, this.decorations);
+    update(update2) {
+      if (update2.docChanged || update2.viewportChanged) {
+        this.decorations = this.decorator.updateDeco(update2, this.decorations);
       }
     }
   }, {
@@ -1052,7 +1189,7 @@ function hyperLinkExtension() {
     }
   });
 }
-var hyperLinkStyle = EditorView3.baseTheme({
+var hyperlinkStyle = EditorView4.baseTheme({
   ".cm-hyperlink-label": {
     cursor: "pointer",
     textDecoration: "underline"
@@ -1065,67 +1202,11 @@ var hyperLinkStyle = EditorView3.baseTheme({
     fontFamily: "monospace"
   }
 });
-var hyperlink = [
+var hyperlinkWidget = [
   hyperLinkExtension(),
-  hyperLinkStyle
+  hyperlinkStyle
 ];
 
-// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlinkTooltip.tsx
-import { hoverTooltip } from "@codemirror/view";
-import { ArrowCircleUp } from "@phosphor-icons/react";
-import React5, { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { getSize, mx as mx3, tooltipContent } from "@dxos/react-ui-theme";
-var markdownLinkRegexp2 = /\[([^\]]+)]\(([^)]+)\)/;
-var createHyperlinkTooltip = (onHover, regexp = markdownLinkRegexp2) => hoverTooltip((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("a");
-      el.innerText = "_";
-      el.className = tooltipContent({}, "mb-2 p-1");
-      el.setAttribute("target", "_blank");
-      el.setAttribute("href", url);
-      onHover(el, url);
-      return {
-        dom: el
-      };
-    }
-  };
-});
-var defaultHyperLinkTooltip = createHyperlinkTooltip((el, url) => {
-  const web = new URL(url);
-  createRoot(el).render(/* @__PURE__ */ React5.createElement(StrictMode, null, /* @__PURE__ */ React5.createElement("div", {
-    className: "flex gap-1 items-center"
-  }, /* @__PURE__ */ React5.createElement(ArrowCircleUp, {
-    className: mx3(getSize(6), "text-blue-500")
-  }), /* @__PURE__ */ React5.createElement("p", {
-    className: "pr-1"
-  }, web.origin))));
-});
-
 // packages/ui/react-ui-editor/src/index.ts
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { Doc, YText as YText3, YXmlFragment as YXmlFragment2 } from "@dxos/text-model";
@@ -1140,11 +1221,11 @@ export {
   YText3 as YText,
   YXmlFragment2 as YXmlFragment,
   createHyperlinkTooltip,
-  defaultHyperLinkTooltip,
   defaultStyles,
   hyperLinkExtension,
-  hyperLinkStyle,
-  hyperlink,
+  hyperlinkDecoration,
+  hyperlinkStyle,
+  hyperlinkWidget,
   tags2 as tags,
   useTextModel
 };