@dxos/react-ui-editor 0.6.5 → 0.6.6-main.e1a6e1f

package/dist/lib/browser/index.mjs

@@ -20,7 +20,11 @@ var translations_default = [
         "table label": "Create table",
         "heading level label_zero": "Paragraph",
         "heading level label_one": "Heading level {{count}}",
-        "heading level label_other": "Heading level {{count}}"
+        "heading level label_other": "Heading level {{count}}",
+        "view mode label": "Editor view",
+        "preview mode label": "Live preview",
+        "readonly mode label": "Read only",
+        "source mode label": "Source"
       }
     }
   }
@@ -146,7 +150,7 @@ var styles = EditorView.baseTheme({
 import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
 import { markdownLanguage } from "@codemirror/lang-markdown";
 import { keymap } from "@codemirror/view";
-var autocomplete = ({ onSearch }) => {
+var autocomplete = ({ activateOnTyping, onSearch }) => {
   return [
     // https://codemirror.net/docs/ref/#view.keymap
     // https://discuss.codemirror.net/t/how-can-i-replace-the-default-autocompletion-keymap-v6/3322
@@ -155,13 +159,12 @@ var autocomplete = ({ onSearch }) => {
     // https://codemirror.net/examples/autocompletion
     // https://codemirror.net/docs/ref/#autocomplete.autocompletion
     autocompletion({
-      activateOnTyping: false,
+      activateOnTyping,
       // closeOnBlur: false,
       // defaultKeymap: false,
       // TODO(burdon): Styles/fragments.
       tooltipClass: () => "shadow rounded"
     }),
-    // TODO(burdon): Option to create new page?
     // TODO(burdon): Optional decoration via addToOptions
     markdownLanguage.data.of({
       autocomplete: (context) => {
@@ -1542,7 +1545,7 @@ var commentsDecorations = EditorView7.decorations.compute([
     if (!range) {
       log4.warn("Invalid range:", range, {
         F: __dxlog_file6,
-        L: 181,
+        L: 182,
         S: void 0,
         C: (f, a) => f(...a)
       });
@@ -1954,6 +1957,19 @@ var useCommentClickListener = (onCommentClick) => {
   return observer;
 };
 
+// packages/ui/react-ui-editor/src/extensions/debug.ts
+import { syntaxTree } from "@codemirror/language";
+import { StateField as StateField5 } from "@codemirror/state";
+var debugNodeLogger = (log9 = console.log) => {
+  const logTokens = (state2) => syntaxTree(state2).iterate({
+    enter: (node) => log9(node.type)
+  });
+  return StateField5.define({
+    create: (state2) => logTokens(state2),
+    update: (_, tr) => logTokens(tr.state)
+  });
+};
+
 // packages/ui/react-ui-editor/src/extensions/doc.ts
 import { Facet as Facet5 } from "@codemirror/state";
 import { invariant as invariant3 } from "@dxos/invariant";
@@ -2386,7 +2402,7 @@ var listener = ({ onFocus, onChange }) => {
 
 // packages/ui/react-ui-editor/src/extensions/markdown/formatting.ts
 import { snippet } from "@codemirror/autocomplete";
-import { syntaxTree } from "@codemirror/language";
+import { syntaxTree as syntaxTree2 } from "@codemirror/language";
 import { EditorSelection } from "@codemirror/state";
 import { EditorView as EditorView11, keymap as keymap6 } from "@codemirror/view";
 import { useMemo as useMemo2, useState as useState2 } from "react";
@@ -2411,7 +2427,7 @@ var setHeading = (level) => {
     let prevBlock = -1;
     for (const range of ranges) {
       let sawBlock = false;
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from: range.from,
         to: range.to,
         enter: (node) => {
@@ -2520,7 +2536,7 @@ var setStyle = (type, enable) => {
       let startCovered = false;
       let endCovered = false;
       let { from, to } = range;
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from,
         to,
         enter: (node) => {
@@ -2723,7 +2739,7 @@ var insertTable = (view) => {
   snippets.table(view, null, from, from);
 };
 var removeLinkInner = (from, to, changes, state2) => {
-  syntaxTree(state2).iterate({
+  syntaxTree2(state2).iterate({
     from,
     to,
     enter: (node) => {
@@ -2768,7 +2784,7 @@ var addLink = ({ url, image: image2 } = {}) => {
       let { from, to } = range;
       const cutStyles = [];
       let okay = null;
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from,
         to,
         enter: (node) => {
@@ -2863,7 +2879,7 @@ var addList = (type) => {
     let parentColumn = null;
     const blocks = [];
     for (const { from, to } of state2.selection.ranges) {
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from,
         to,
         enter: (node) => {
@@ -2999,7 +3015,7 @@ var removeList = (type) => {
     const stack = [];
     const targetNodeType = type === 0 ? "OrderedList" : type === 1 ? "BulletList" : "TaskList";
     for (const { from, to } of state2.selection.ranges) {
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from,
         to,
         enter: (node) => {
@@ -3086,7 +3102,7 @@ var setBlockquote = (enable) => {
     let lastBlock = -1;
     for (const { from, to } of state2.selection.ranges) {
       const sawBlock = false;
-      syntaxTree(state2).iterate({
+      syntaxTree2(state2).iterate({
         from,
         to,
         enter: (node) => {
@@ -3176,7 +3192,7 @@ var addCodeblock = (target) => {
   for (const { from, to } of selection.ranges) {
     let blockFrom = from;
     let blockTo = to;
-    syntaxTree(state2).iterate({
+    syntaxTree2(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3227,7 +3243,7 @@ var removeCodeblock = ({ state: state2, dispatch }) => {
   let lastBlock = -1;
   const changes = [];
   for (const { from, to } of state2.selection.ranges) {
-    syntaxTree(state2).iterate({
+    syntaxTree2(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -3389,7 +3405,7 @@ var getFormatting = (state2) => {
         }
       }
     }
-    syntaxTree(state2).iterate({
+    syntaxTree2(state2).iterate({
       from: range.from,
       to: range.to,
       enter: (node) => {
@@ -3739,7 +3755,7 @@ var markdownHighlightStyle = (readonly) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/linkPaste.ts
-import { syntaxTree as syntaxTree2 } from "@codemirror/language";
+import { syntaxTree as syntaxTree3 } from "@codemirror/language";
 import { Transaction } from "@codemirror/state";
 import { ViewPlugin as ViewPlugin5 } from "@codemirror/view";
 var VALID_PROTOCOLS = [
@@ -3813,7 +3829,7 @@ var linkPastePlugin = ViewPlugin5.fromClass(class {
    * checking for CodeBlock or FencedCode nodes.
    */
   isInCodeBlock(state2, pos) {
-    const tree = syntaxTree2(state2);
+    const tree = syntaxTree3(state2);
     let node = tree.resolveInner(pos, -1);
     while (node) {
       if (node.name.includes("Code") || node.name.includes("FencedCode")) {
@@ -3873,7 +3889,7 @@ var createMarkdownExtensions = ({ themeMode } = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/decorate.ts
-import { syntaxTree as syntaxTree3 } from "@codemirror/language";
+import { syntaxTree as syntaxTree4 } from "@codemirror/language";
 import { RangeSetBuilder as RangeSetBuilder2, StateEffect as StateEffect4 } from "@codemirror/state";
 import { EditorView as EditorView12, Decoration as Decoration5, WidgetType as WidgetType3, ViewPlugin as ViewPlugin6 } from "@codemirror/view";
 import { mx as mx2 } from "@dxos/react-ui-theme";
@@ -3974,7 +3990,7 @@ var buildDecorations = (view, options, focus) => {
   const atomicDeco = new RangeSetBuilder2();
   const { state: state2 } = view;
   for (const { from, to } of view.visibleRanges) {
-    syntaxTree3(state2).iterate({
+    syntaxTree4(state2).iterate({
       from,
       to,
       enter: (node) => {
@@ -4180,11 +4196,11 @@ var formattingStyles = EditorView12.baseTheme({
 });
 
 // packages/ui/react-ui-editor/src/extensions/markdown/image.ts
-import { syntaxTree as syntaxTree4 } from "@codemirror/language";
-import { StateField as StateField5 } from "@codemirror/state";
+import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { StateField as StateField6 } from "@codemirror/state";
 import { Decoration as Decoration6, EditorView as EditorView13, WidgetType as WidgetType4 } from "@codemirror/view";
 var image = (options = {}) => {
-  return StateField5.define({
+  return StateField6.define({
     create: (state2) => {
       return Decoration6.set(buildDecorations2(0, state2.doc.length, state2));
     },
@@ -4223,7 +4239,7 @@ var preloadImage = (url) => {
 var buildDecorations2 = (from, to, state2) => {
   const decorations = [];
   const cursor = state2.selection.main.head;
-  syntaxTree4(state2).iterate({
+  syntaxTree5(state2).iterate({
     enter: (node) => {
       if (node.name === "Image") {
         const urlNode = node.node.getChild("URL");
@@ -4263,11 +4279,11 @@ var imageUpload = (options = {}) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/markdown/link.ts
-import { syntaxTree as syntaxTree5 } from "@codemirror/language";
+import { syntaxTree as syntaxTree6 } from "@codemirror/language";
 import { hoverTooltip as hoverTooltip2 } from "@codemirror/view";
 import { tooltipContent } from "@dxos/react-ui-theme";
 var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
-  const syntax = syntaxTree5(view.state).resolveInner(pos, side);
+  const syntax = syntaxTree6(view.state).resolveInner(pos, side);
   let link = null;
   for (let i = 0, node = syntax; !link && node && i < 5; node = node.parent, i++) {
     link = node.name === "Link" ? node : null;
@@ -4297,11 +4313,11 @@ var linkTooltip = (render) => hoverTooltip2((view, pos, side) => {
 });
 
 // packages/ui/react-ui-editor/src/extensions/markdown/table.ts
-import { syntaxTree as syntaxTree6 } from "@codemirror/language";
-import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField6 } from "@codemirror/state";
+import { syntaxTree as syntaxTree7 } from "@codemirror/language";
+import { RangeSetBuilder as RangeSetBuilder3, StateField as StateField7 } from "@codemirror/state";
 import { Decoration as Decoration7, EditorView as EditorView14, WidgetType as WidgetType5 } from "@codemirror/view";
 var table = (options = {}) => {
-  return StateField6.define({
+  return StateField7.define({
     create: (state2) => update(state2, options),
     update: (_, tr) => update(tr.state, options),
     provide: (field) => EditorView14.decorations.from(field)
@@ -4316,7 +4332,7 @@ var update = (state2, options) => {
     const table2 = getTable();
     return table2.rows?.[table2.rows.length - 1];
   };
-  syntaxTree6(state2).iterate({
+  syntaxTree7(state2).iterate({
     enter: (node) => {
       switch (node.name) {
         case "Table": {
@@ -4442,14 +4458,24 @@ import { keymap as keymap8 } from "@codemirror/view";
 import { vim } from "@replit/codemirror-vim";
 import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
 var focusEvent = "focus.container";
-var editorMode = Facet6.define({
+var EditorViewModes = [
+  "preview",
+  "readonly",
+  "source"
+];
+var EditorInputModes = [
+  "default",
+  "vim",
+  "vscode"
+];
+var editorInputMode = Facet6.define({
   combine: (modes) => modes[0] ?? {}
 });
-var EditorModes = {
+var InputModeExtensions = {
   default: [],
   vscode: [
     // https://github.com/replit/codemirror-vscode-keymap
-    editorMode.of({
+    editorInputMode.of({
       type: "vscode"
     }),
     keymap8.of(vscodeKeymap)
@@ -4457,7 +4483,7 @@ var EditorModes = {
   vim: [
     // https://github.com/replit/codemirror-vim
     vim(),
-    editorMode.of({
+    editorInputMode.of({
       type: "vim",
       noTabster: true
     }),
@@ -4710,7 +4736,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({
         }
       });
     }
-    if (state2.facet(editorMode).noTabster) {
+    if (state2.facet(editorInputMode).noTabster) {
       rootRef.current?.removeAttribute("data-tabster");
     }
     setView(view2);
@@ -4730,7 +4756,6 @@ var TextEditor = /* @__PURE__ */ forwardRef(({
     id,
     selection,
     scrollTo,
-    editorMode,
     extensions
   ]);
   const handleKeyUp = useCallback((event) => {
@@ -4756,7 +4781,7 @@ var TextEditor = /* @__PURE__ */ forwardRef(({
 });
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, CaretDown, Check } from "@phosphor-icons/react";
+import { ChatText, Code, CodeBlock, Image, Link, ListBullets, ListChecks, ListNumbers, Paragraph, Quotes, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, CaretDown, Check, PencilSimpleSlash, MarkdownLogo, PencilSimple } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
 import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState4 } from "react";
 import { useDropzone } from "react-dropzone";
@@ -4783,9 +4808,12 @@ var ToolbarRoot = ({ children, onAction, classNames, state: state2 }) => {
     elevation: "chrome"
   }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Root, {
     classNames: [
-      "is-full shrink-0 overflow-x-auto overflow-y-hidden p-1",
+      "p-1 is-full shrink-0 overflow-x-auto overflow-y-hidden",
       classNames
-    ]
+    ],
+    style: {
+      contain: "layout"
+    }
   }, children))));
 };
 var ToolbarToggleButton = ({ Icon, children, ...props }) => {
@@ -4814,6 +4842,70 @@ var ToolbarButton = ({ Icon, children, ...props }) => {
     className: "sr-only"
   }, children))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, children, /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
+var ViewModeIcons = {
+  preview: PencilSimple,
+  readonly: PencilSimpleSlash,
+  source: MarkdownLogo
+};
+var MarkdownView = ({ mode }) => {
+  const { t } = useTranslation(translationKey);
+  const { onAction } = useToolbarContext("ViewMode");
+  const ModeIcon = ViewModeIcons[mode ?? "preview"];
+  const suppressNextTooltip = useRef2(false);
+  const [tooltipOpen, setTooltipOpen] = useState4(false);
+  const [selectOpen, setSelectOpen] = useState4(false);
+  return /* @__PURE__ */ React2.createElement(Tooltip.Root, {
+    open: tooltipOpen,
+    onOpenChange: (nextOpen) => {
+      if (nextOpen && suppressNextTooltip.current) {
+        suppressNextTooltip.current = false;
+        return setTooltipOpen(false);
+      } else {
+        return setTooltipOpen(nextOpen);
+      }
+    }
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+    open: selectOpen,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) {
+        suppressNextTooltip.current = true;
+      }
+      return setSelectOpen(nextOpen);
+    }
+  }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Button, {
+    variant: "ghost",
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("mode label")), /* @__PURE__ */ React2.createElement(ModeIcon, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement(CaretDown, null))))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
+    classNames: "is-min md:is-min",
+    onCloseAutoFocus: (e) => e.preventDefault()
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, null, EditorViewModes.map((value) => {
+    const Icon = ViewModeIcons[value];
+    return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+      key: value,
+      checked: value === mode,
+      onClick: () => onAction?.({
+        type: "view-mode",
+        data: value
+      })
+    }, /* @__PURE__ */ React2.createElement(Icon, {
+      className: iconStyles
+    }), /* @__PURE__ */ React2.createElement("span", {
+      className: "whitespace-nowrap grow"
+    }, t(`${value} mode label`)), /* @__PURE__ */ React2.createElement(Check, {
+      className: value === mode ? "visible" : "invisible"
+    }));
+  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("view mode label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+};
 var HeadingIcons = {
   "0": Paragraph,
   "1": TextHOne,
@@ -5060,6 +5152,7 @@ var Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarToggleButton,
   Separator: ToolbarSeparator,
+  View: MarkdownView,
   Markdown: MarkdownStandard,
   Custom: MarkdownCustom,
   Actions: MarkdownActions
@@ -5196,8 +5289,10 @@ var useTextEditor = (cb = () => ({}), deps = []) => {
 };
 export {
   Cursor,
-  EditorModes,
+  EditorInputModes,
+  EditorViewModes,
   Inline,
+  InputModeExtensions,
   List,
   RemoteSelectionsDecorator,
   SpaceAwarenessProvider,
@@ -5225,6 +5320,7 @@ export {
   createExternalCommentSync,
   createMarkdownExtensions,
   createThemeExtensions,
+  debugNodeLogger,
   decorateMarkdown,
   defaultOptions,
   defaultTheme,
@@ -5232,7 +5328,7 @@ export {
   dropFile,
   editorFillLayoutEditor,
   editorFillLayoutRoot,
-  editorMode,
+  editorInputMode,
   editorWithToolbarLayout,
   focusEvent,
   formattingEquals,