@dxos/react-ui-editor 0.3.9-main.35264cb → 0.3.9-main.35e0812

package/dist/lib/browser/index.mjs

@@ -397,13 +397,6 @@ 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",
@@ -424,7 +417,7 @@ var markdownTheme = {
     return acc;
   }, {})
 };
-var markdownHighlightStyle = HighlightStyle.define([
+var markdownDarkHighlighting = HighlightStyle.define([
   {
     tag: [
       tags.keyword,
@@ -601,56 +594,49 @@ 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,
-        // TODO(burdon): Create custom bundle to make this class more reusable and retire simpler TextEditor component.
+        ...editorMode === "vim" ? [
+          vim()
+        ] : [],
         // 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
         }),
-        EditorState.allowMultipleSelections.of(true),
-        EditorView.lineWrapping,
+        bracketMatching(),
+        closeBrackets(),
+        autocompletion(),
+        rectangularSelection(),
+        crosshairCursor(),
+        highlightActiveLine(),
+        highlightSelectionMatches(),
+        placeholder(slots.editor?.placeholder ?? ""),
         keymap.of([
           ...closeBracketsKeymap,
-          ...completionKeymap,
           ...defaultKeymap,
-          ...foldKeymap,
+          ...searchKeymap,
           ...historyKeymap,
+          ...foldKeymap,
+          ...completionKeymap,
           ...lintKeymap,
-          ...searchKeymap,
           indentWithTab
         ]),
-        // Main extension.
-        // https://github.com/codemirror/lang-markdown
+        EditorView.lineWrapping,
+        // Themes.
         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
@@ -661,14 +647,8 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, editorMode
           syntaxHighlighting(defaultHighlightStyle)
         ],
         // TODO(thure): All but one rule here apply to both themes; rename or refactor.
-        syntaxHighlighting(markdownHighlightStyle),
-        // Settings.
-        ...editorMode === "vim" ? [
-          vim()
-        ] : [],
-        // TODO(burdon): Move to extensions.
+        syntaxHighlighting(markdownDarkHighlighting),
         // Replication and awareness (incl. remote selection).
-        // https://codemirror.net/docs/ref/#collab
         ...content instanceof YText ? [
           yCollab(content, provider?.awareness)
         ] : [],
@@ -870,9 +850,6 @@ 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,
@@ -910,17 +887,16 @@ var defaultStyles = {
   "&.cm-focused": {
     outline: "none"
   },
-  ".cm-scroller": {
+  ".cm-placeholder": {
+    fontFamily: get2(tokens2, "fontFamily.body", []).join(",")
+  },
+  "& .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"
   }
 };
 
@@ -960,7 +936,6 @@ var TextEditor = /* @__PURE__ */ forwardRef4(({ model, extensions = [], theme =
           syntaxHighlighting2(defaultHighlightStyle2)
         ],
         // Replication.
-        // TODO(burdon): Move to default extensions.
         ...content instanceof YText2 ? [
           yCollab2(content, void 0)
         ] : [],
@@ -1008,117 +983,11 @@ 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;
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlink.tsx
+import { Decoration, EditorView as EditorView3, MatchDecorator, ViewPlugin } from "@codemirror/view";
+var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
 var linkDecorator = () => new MatchDecorator({
-  regexp: markdownLinkRegexp2,
+  regexp: markdownLinkRegexp,
   decorate: (add, from, to, match, view) => {
     const [_, label, url] = match;
     const p0 = {
@@ -1137,24 +1006,18 @@ var linkDecorator = () => new MatchDecorator({
       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(p0.start, p0.end, Decoration.mark({
+      class: "cm-hyperlink-bracket"
     }));
-    add(p1.start, p1.end, Decoration2.mark({
+    add(p1.start, p1.end, Decoration.mark({
       class: "cm-hyperlink-label"
     }));
-    add(p2.start, p2.end, Decoration2.mark({
-      class: "cm-hyperlink-bracket",
-      _attributes: {
-        style: "display: none"
-      }
+    add(p2.start, p2.end, Decoration.mark({
+      class: "cm-hyperlink-bracket"
     }));
-    add(p3.start, p3.end, Decoration2.mark({
+    add(p3.start, p3.end, Decoration.mark({
       class: "cm-hyperlink-url",
-      _attributes: {
+      __attributes: {
         style: "display: none"
       }
     }));
@@ -1166,9 +1029,9 @@ function hyperLinkExtension() {
       this.decorator = linkDecorator();
       this.decorations = this.decorator.createDeco(view);
     }
-    update(update2) {
-      if (update2.docChanged || update2.viewportChanged) {
-        this.decorations = this.decorator.updateDeco(update2, this.decorations);
+    update(update) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = this.decorator.updateDeco(update, this.decorations);
       }
     }
   }, {
@@ -1189,7 +1052,7 @@ function hyperLinkExtension() {
     }
   });
 }
-var hyperlinkStyle = EditorView4.baseTheme({
+var hyperLinkStyle = EditorView3.baseTheme({
   ".cm-hyperlink-label": {
     cursor: "pointer",
     textDecoration: "underline"
@@ -1202,11 +1065,54 @@ var hyperlinkStyle = EditorView4.baseTheme({
     fontFamily: "monospace"
   }
 });
-var hyperlinkWidget = [
+var hyperlink = [
   hyperLinkExtension(),
-  hyperlinkStyle
+  hyperLinkStyle
 ];
 
+// packages/ui/react-ui-editor/src/components/TextEditor/extensions/hyperlinkTooltip.tsx
+import { hoverTooltip } from "@codemirror/view";
+import { 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
+      };
+    }
+  };
+});
+
 // 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";
@@ -1223,9 +1129,8 @@ export {
   createHyperlinkTooltip,
   defaultStyles,
   hyperLinkExtension,
-  hyperlinkDecoration,
-  hyperlinkStyle,
-  hyperlinkWidget,
+  hyperLinkStyle,
+  hyperlink,
   tags2 as tags,
   useTextModel
 };