@dxos/react-ui-editor 0.3.9-main.f8fc6b9 → 0.3.9-next.35264cb

package/dist/lib/browser/index.mjs

@@ -261,10 +261,7 @@ import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
 
 // packages/ui/react-ui-editor/src/components/Markdown/markdownTheme.ts
-var ivory = "#abb2bf";
 var malibu = "#61afef";
-var highlightBackground = "#2c313a";
-var tooltipBackground = "#353a42";
 var cursor = "#ffffff";
 var monospace = get(tokens, "fontFamily.mono", [
   "monospace"
@@ -307,24 +304,28 @@ var markdownTheme = {
   //   border: 'none',
   //   color: '#ddd'
   // },
-  ".dark & .cm-tooltip": {
-    border: "none",
-    backgroundColor: tooltipBackground
-  },
-  ".dark & .cm-tooltip .cm-tooltip-arrow:before": {
-    borderTopColor: "transparent",
-    borderBottomColor: "transparent"
-  },
-  ".dark & .cm-tooltip .cm-tooltip-arrow:after": {
-    borderTopColor: tooltipBackground,
-    borderBottomColor: tooltipBackground
-  },
-  ".dark & .cm-tooltip-autocomplete": {
-    "& > ul > li[aria-selected]": {
-      backgroundColor: highlightBackground,
-      color: ivory
-    }
+  ".cm-tooltip": {
+    backgroundColor: "transparent",
+    border: "none"
   },
+  // '.dark & .cm-tooltip': {
+  //   border: 'none',
+  //   backgroundColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:before': {
+  //   borderTopColor: 'transparent',
+  //   borderBottomColor: 'transparent',
+  // },
+  // '.dark & .cm-tooltip .cm-tooltip-arrow:after': {
+  //   borderTopColor: tooltipBackground,
+  //   borderBottomColor: tooltipBackground,
+  // },
+  // '.dark & .cm-tooltip-autocomplete': {
+  //   '& > ul > li[aria-selected]': {
+  //     backgroundColor: highlightBackground,
+  //     color: ivory,
+  //   },
+  // },
   "&.cm-focused": {
     outline: "none"
   },
@@ -396,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",
@@ -416,7 +424,7 @@ var markdownTheme = {
     return acc;
   }, {})
 };
-var markdownDarkHighlighting = HighlightStyle.define([
+var markdownHighlightStyle = HighlightStyle.define([
   {
     tag: [
       tags.keyword,
@@ -541,7 +549,7 @@ var EditorModes = [
   "default",
   "vim"
 ];
-var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, editorMode, onChange }, forwardedRef) => {
+var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, editorMode, extensions = [], onChange }, forwardedRef) => {
   const { id, content, provider, peer } = model ?? {};
   const { themeMode } = useThemeContext();
   const tabsterDOMAttribute = useFocusableGroup({
@@ -593,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
@@ -646,11 +661,19 @@ 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)
-        ] : []
+        ] : [],
+        // Custom.
+        ...extensions
       ]
     });
     setState(state2);
@@ -847,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,
@@ -884,12 +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"
   }
 };
 
@@ -929,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)
         ] : [],
@@ -976,6 +1008,205 @@ var TextEditor = /* @__PURE__ */ forwardRef4(({ model, extensions = [], theme =
   });
 });
 
+// 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: markdownLinkRegexp2,
+  decorate: (add, from, to, match, view) => {
+    const [_, label, url] = match;
+    const p0 = {
+      start: from,
+      end: from + 1
+    };
+    const p1 = {
+      start: from + 1,
+      end: from + 1 + label.length
+    };
+    const p2 = {
+      start: p1.end,
+      end: p1.end + 1
+    };
+    const p3 = {
+      start: p1.end + 1,
+      end: p1.end + 1 + url.length + 2
+    };
+    add(p0.start, p0.end, Decoration2.mark({
+      class: "cm-hyperlink-bracket",
+      _attributes: {
+        style: "display: none"
+      }
+    }));
+    add(p1.start, p1.end, Decoration2.mark({
+      class: "cm-hyperlink-label"
+    }));
+    add(p2.start, p2.end, Decoration2.mark({
+      class: "cm-hyperlink-bracket",
+      _attributes: {
+        style: "display: none"
+      }
+    }));
+    add(p3.start, p3.end, Decoration2.mark({
+      class: "cm-hyperlink-url",
+      _attributes: {
+        style: "display: none"
+      }
+    }));
+  }
+});
+function hyperLinkExtension() {
+  return ViewPlugin.fromClass(class HyperLinkView {
+    constructor(view) {
+      this.decorator = linkDecorator();
+      this.decorations = this.decorator.createDeco(view);
+    }
+    update(update2) {
+      if (update2.docChanged || update2.viewportChanged) {
+        this.decorations = this.decorator.updateDeco(update2, this.decorations);
+      }
+    }
+  }, {
+    decorations: (view) => view.decorations,
+    eventHandlers: {
+      // TODO(burdon): CLick to expand link.
+      // https://discuss.codemirror.net/t/decorator-iteration-on-click-event/4226/2
+      mousedown: function(event, view) {
+        const pos = view.posAtDOM(event.target);
+        if (pos !== 0) {
+          console.log(this);
+        }
+      },
+      // TODO(burdon): Hide when cursor moves away.
+      keydown: (event, view) => {
+        view.update([]);
+      }
+    }
+  });
+}
+var hyperlinkStyle = EditorView4.baseTheme({
+  ".cm-hyperlink-label": {
+    cursor: "pointer",
+    textDecoration: "underline"
+  },
+  ".cm-hyperlink-bracket": {
+    opacity: 0.2
+  },
+  ".cm-hyperlink-url": {
+    opacity: 0.5,
+    fontFamily: "monospace"
+  }
+});
+var hyperlinkWidget = [
+  hyperLinkExtension(),
+  hyperlinkStyle
+];
+
 // 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";
@@ -989,7 +1220,12 @@ export {
   TextKind,
   YText3 as YText,
   YXmlFragment2 as YXmlFragment,
+  createHyperlinkTooltip,
   defaultStyles,
+  hyperLinkExtension,
+  hyperlinkDecoration,
+  hyperlinkStyle,
+  hyperlinkWidget,
   tags2 as tags,
   useTextModel
 };