@dxos/react-ui-editor 0.3.9-main.7cfe653 → 0.3.9-main.8045d90

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"
   },
@@ -541,7 +542,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({
@@ -628,7 +629,7 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, onChange,
           indentWithTab
         ]),
         EditorView.lineWrapping,
-        // Theme
+        // Themes.
         markdown({
           base: markdownLanguage2,
           codeLanguages: languages,
@@ -647,10 +648,12 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ model, slots = {}, onChange,
         ],
         // TODO(thure): All but one rule here apply to both themes; rename or refactor.
         syntaxHighlighting(markdownDarkHighlighting),
-        // Collaboration
+        // Replication and awareness (incl. remote selection).
         ...content instanceof YText ? [
           yCollab(content, provider?.awareness)
-        ] : []
+        ] : [],
+        // Custom.
+        ...extensions
       ]
     });
     setState(state2);
@@ -671,14 +674,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 +692,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 +712,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 +817,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 +848,8 @@ 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?.content instanceof YXmlFragment) {
     return /* @__PURE__ */ React3.createElement(RichTextEditor, {
       ref: forwardedRef,
@@ -859,18 +865,287 @@ 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-placeholder": {
+    fontFamily: get2(tokens2, "fontFamily.body", []).join(",")
+  },
+  "& .cm-scroller": {
+    fontFamily: get2(tokens2, "fontFamily.body", []).join(","),
+    overflow: "visible"
+  },
+  ".cm-tooltip": {
+    backgroundColor: "transparent",
+    border: "none"
+  }
+};
+
+// 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.
+        ...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/hyperlink.tsx
+import { Decoration, EditorView as EditorView3, MatchDecorator, ViewPlugin } from "@codemirror/view";
+var markdownLinkRegexp = /\[([^\]]+)]\(([^)]+)\)(!?)/gi;
+var linkDecorator = () => new MatchDecorator({
+  regexp: markdownLinkRegexp,
+  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, Decoration.mark({
+      class: "cm-hyperlink-bracket"
+    }));
+    add(p1.start, p1.end, Decoration.mark({
+      class: "cm-hyperlink-label"
+    }));
+    add(p2.start, p2.end, Decoration.mark({
+      class: "cm-hyperlink-bracket"
+    }));
+    add(p3.start, p3.end, Decoration.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(update) {
+      if (update.docChanged || update.viewportChanged) {
+        this.decorations = this.decorator.updateDeco(update, 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 = EditorView3.baseTheme({
+  ".cm-hyperlink-label": {
+    cursor: "pointer",
+    textDecoration: "underline"
+  },
+  ".cm-hyperlink-bracket": {
+    opacity: 0.2
+  },
+  ".cm-hyperlink-url": {
+    opacity: 0.5,
+    fontFamily: "monospace"
+  }
+});
+var hyperlink = [
+  hyperLinkExtension(),
+  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 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,
+  defaultHyperLinkTooltip,
+  defaultStyles,
+  hyperLinkExtension,
+  hyperLinkStyle,
+  hyperlink,
+  tags2 as tags,
   useTextModel
 };
 //# sourceMappingURL=index.mjs.map