@dxos/react-ui-editor 0.3.9-main.f27ec14 → 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 = {}, onChange, editorMode }, 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 = {}, onChange,
     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,
-        // Theme
+        // 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 = {}, onChange,
           syntaxHighlighting(defaultHighlightStyle)
         ],
         // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-        syntaxHighlighting(markdownDarkHighlighting),
-        // Collaboration
+        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);
@@ -671,14 +694,17 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, onChange,
     themeMode,
     editorMode
   ]);
-  const handleKeyUp = useCallback(({ key, altKey, shiftKey, metaKey, ctrlKey }) => {
+  const handleKeyUp = useCallback((event) => {
+    const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
     switch (key) {
-      case "Enter":
+      case "Enter": {
         view?.contentDOM.focus();
         break;
-      case "Escape":
+      }
+      case "Escape": {
         editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey) && parent?.focus();
         break;
+      }
     }
   }, [
     view,
@@ -686,11 +712,11 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, onChange,
   ]);
   return /* @__PURE__ */ React.createElement("div", {
     tabIndex: 0,
+    ref: setParent,
     key: id,
     ...slots.root,
-    onKeyUp: handleKeyUp,
     ...editorMode !== "vim" ? tabsterDOMAttribute : {},
-    ref: setParent
+    onKeyUp: handleKeyUp
   });
 });
 
@@ -706,7 +732,7 @@ import StarterKit from "@tiptap/starter-kit";
 import React2, { forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle2, useMemo as useMemo3 } from "react";
 import { generateName as generateName2 } from "@dxos/display-name";
 import { mx as mx2 } from "@dxos/react-ui-theme";
-var useEditor = ({ model, placeholder: placeholder2 = "Enter text\u2026", slots = {} }) => {
+var useEditor = ({ model, placeholder: placeholder3 = "Enter text\u2026", slots = {} }) => {
   const extensions = useMemo3(() => [
     StarterKit.configure({
       // Extensions
@@ -811,7 +837,7 @@ var useEditor = ({ model, placeholder: placeholder2 = "Enter text\u2026", slots
       })
     ] : [],
     Placeholder.configure({
-      placeholder: placeholder2,
+      placeholder: placeholder3,
       emptyEditorClass: "before:content-[attr(data-placeholder)] before:absolute opacity-50 cursor-text"
     })
   ], [
@@ -842,8 +868,11 @@ var RichTextEditor = /* @__PURE__ */ forwardRef2((props, ref) => {
 });
 
 // packages/ui/react-ui-editor/src/components/Editor/Editor.tsx
-var Editor = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef3(({ slots, ...options }, forwardedRef) => {
-  const model = useTextModel(options);
+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,
@@ -859,18 +888,345 @@ var Editor = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef3(({ slots, ...optio
   }
 }));
 
+// packages/ui/react-ui-editor/src/components/TextEditor/index.ts
+import { tags as tags2 } from "@lezer/highlight";
+
+// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
+import { closeBrackets as closeBrackets2 } from "@codemirror/autocomplete";
+import { bracketMatching as bracketMatching2, defaultHighlightStyle as defaultHighlightStyle2, syntaxHighlighting as syntaxHighlighting2 } from "@codemirror/language";
+import { EditorState as EditorState2 } from "@codemirror/state";
+import { oneDarkHighlightStyle as oneDarkHighlightStyle2 } from "@codemirror/theme-one-dark";
+import { EditorView as EditorView2, placeholder as placeholder2 } from "@codemirror/view";
+import React4, { forwardRef as forwardRef4, useEffect as useEffect2, useImperativeHandle as useImperativeHandle3, useState as useState2, useCallback as useCallback2 } from "react";
+import { yCollab as yCollab2 } from "y-codemirror.next";
+import { useThemeContext as useThemeContext2 } from "@dxos/react-ui";
+import { YText as YText2 } from "@dxos/text-model";
+
+// packages/ui/react-ui-editor/src/components/TextEditor/theme.ts
+import get2 from "lodash.get";
+import { tailwindConfig as tailwindConfig2 } from "@dxos/react-ui-theme";
+var tokens2 = tailwindConfig2({}).theme;
+var defaultStyles = {
+  "&.cm-focused": {
+    outline: "none"
+  },
+  ".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"
+  }
+};
+
+// packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
+var TextEditor = /* @__PURE__ */ forwardRef4(({ model, extensions = [], theme = defaultStyles, slots = {}, onKeyDown, ...props }, forwardedRef) => {
+  const { id, content } = model ?? {};
+  const { themeMode } = useThemeContext2();
+  const [parent, setParent] = useState2(null);
+  const [state, setState] = useState2();
+  const [view, setView] = useState2();
+  useImperativeHandle3(forwardedRef, () => {
+    return {
+      editor: parent,
+      state,
+      view
+    };
+  }, [
+    view
+  ]);
+  useEffect2(() => {
+    if (!parent) {
+      return;
+    }
+    view?.destroy();
+    const state2 = EditorState2.create({
+      doc: content?.toString(),
+      extensions: [
+        bracketMatching2(),
+        closeBrackets2(),
+        placeholder2(slots.editor?.placeholder ?? ""),
+        EditorView2.lineWrapping,
+        // Themes.
+        EditorView2.theme(theme),
+        ...themeMode === "dark" ? [
+          syntaxHighlighting2(oneDarkHighlightStyle2)
+        ] : [
+          syntaxHighlighting2(defaultHighlightStyle2)
+        ],
+        // Replication.
+        // TODO(burdon): Move to default extensions.
+        ...content instanceof YText2 ? [
+          yCollab2(content, void 0)
+        ] : [],
+        // Custom.
+        ...extensions
+      ]
+    });
+    setState(state2);
+    setView(new EditorView2({
+      state: state2,
+      parent
+    }));
+    return () => {
+      view?.destroy();
+      setView(void 0);
+      setState(void 0);
+    };
+  }, [
+    parent,
+    content,
+    themeMode
+  ]);
+  const handleKeyDown = useCallback2((event) => {
+    if (view) {
+      const { head, from, to } = view.state.selection.ranges[0];
+      const { number } = view.state.doc.lineAt(head);
+      const after = view.state.sliceDoc(from);
+      onKeyDown?.(event, {
+        from,
+        to,
+        line: number,
+        lines: view.state.doc.lines,
+        after
+      });
+    }
+  }, [
+    view
+  ]);
+  return /* @__PURE__ */ React4.createElement("div", {
+    key: id,
+    ref: setParent,
+    ...slots.root,
+    onKeyDown: handleKeyDown,
+    ...props
+  });
+});
+
+// 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 YText2, YXmlFragment as YXmlFragment2 } from "@dxos/text-model";
+import { Doc, YText as YText3, YXmlFragment as YXmlFragment2 } from "@dxos/text-model";
 export {
   Doc,
   Editor,
   EditorModes,
   MarkdownEditor,
   RichTextEditor,
+  TextEditor,
   TextKind,
-  YText2 as YText,
+  YText3 as YText,
   YXmlFragment2 as YXmlFragment,
+  createHyperlinkTooltip,
+  defaultStyles,
+  hyperLinkExtension,
+  hyperlinkDecoration,
+  hyperlinkStyle,
+  hyperlinkWidget,
+  tags2 as tags,
   useTextModel
 };
 //# sourceMappingURL=index.mjs.map