@dxos/react-ui-editor 0.4.2 → 0.4.3-main.c3bfede

package/dist/lib/browser/index.mjs

@@ -14,7 +14,7 @@ import defaultsDeep2 from "lodash.defaultsdeep";
 import React, { forwardRef, useCallback, useEffect as useEffect2, useImperativeHandle, useRef, useState as useState2 } from "react";
 import { log as log2 } from "@dxos/log";
 import { useThemeContext } from "@dxos/react-ui";
-import { focusRing, mx as mx3 } from "@dxos/react-ui-theme";
+import { focusRing } from "@dxos/react-ui-theme";
 import { isNotFalsy as isNotFalsy4 } from "@dxos/util";
 
 // packages/ui/react-ui-editor/src/extensions/annotations.ts
@@ -154,7 +154,6 @@ var autocomplete = ({ onSearch }) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/automerge/automerge.ts
-import { invertedEffects } from "@codemirror/commands";
 import { StateField as StateField2 } from "@codemirror/state";
 import { EditorView as EditorView2, ViewPlugin } from "@codemirror/view";
 import { next as A4 } from "@dxos/automerge/automerge";
@@ -208,7 +207,7 @@ var isReconcile = (tr) => {
   return !!tr.annotation(reconcileAnnotation);
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
+// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
 import { next as A3 } from "@dxos/automerge/automerge";
 
 // packages/ui/react-ui-editor/src/extensions/automerge/update-automerge.ts
@@ -349,40 +348,42 @@ var charPath = (textPath, candidatePath) => {
   return null;
 };
 
-// packages/ui/react-ui-editor/src/extensions/automerge/semaphore.ts
-var PatchSemaphore = class {
+// packages/ui/react-ui-editor/src/extensions/automerge/sync.ts
+var Syncer = class {
   // prettier-ignore
   constructor(_handle, _state) {
     this._handle = _handle;
     this._state = _state;
-    this._inReconcile = false;
+    this._pending = false;
   }
-  reconcile(view) {
-    if (!this._inReconcile) {
-      this._inReconcile = true;
-      this.doReconcile(view);
-      this._inReconcile = false;
+  reconcile(view, editor) {
+    if (this._pending) {
+      return;
     }
+    this._pending = true;
+    if (editor) {
+      this.onEditorChange(view);
+    } else {
+      this.onAutomergeChange(view);
+    }
+    this._pending = false;
   }
-  doReconcile(view) {
-    const path = getPath(view.state, this._state);
-    const oldHeads = getLastHeads(view.state, this._state);
-    let selection = view.state.selection;
+  onEditorChange(view) {
     const transactions = view.state.field(this._state).unreconciledTransactions.filter((tx) => !isReconcile(tx));
-    const toInvert = transactions.slice().reverse();
-    for (const tr of toInvert) {
-      const inverted = tr.changes.invert(tr.startState.doc);
-      selection = selection.map(inverted);
+    const newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
+    if (newHeads) {
       view.dispatch({
-        changes: inverted,
-        annotations: reconcileAnnotation.of(true)
+        effects: updateHeads(newHeads),
+        annotations: reconcileAnnotation.of(false)
       });
     }
-    let newHeads = updateAutomerge(this._state, this._handle, transactions, view.state);
-    if (newHeads === null || newHeads === void 0) {
-      newHeads = A3.getHeads(this._handle.docSync());
-    }
+  }
+  onAutomergeChange(view) {
+    const oldHeads = getLastHeads(view.state, this._state);
+    const newHeads = A3.getHeads(this._handle.docSync());
     const diff = A3.equals(oldHeads, newHeads) ? [] : A3.diff(this._handle.docSync(), oldHeads, newHeads);
+    const selection = view.state.selection;
+    const path = getPath(view.state, this._state);
     updateCodeMirror(view, selection, path, diff);
     view.dispatch({
       effects: updateHeads(newHeads),
@@ -422,7 +423,7 @@ var automerge = ({ handle, path }) => {
       return result;
     }
   });
-  const semaphore = new PatchSemaphore(handle, syncState);
+  const syncer = new Syncer(handle, syncState);
   return [
     Cursor.converter.of(cursorConverter(handle, path)),
     syncState,
@@ -436,25 +437,14 @@ var automerge = ({ handle, path }) => {
         handle.removeListener("change", this._handleChange.bind(this));
       }
       _handleChange() {
-        semaphore.reconcile(this._view);
+        syncer.reconcile(this._view, false);
       }
     }),
     // Reconcile local updates.
     EditorView2.updateListener.of(({ view, changes }) => {
       if (!changes.empty) {
-        semaphore.reconcile(view);
+        syncer.reconcile(view, true);
       }
-    }),
-    // TODO(burdon): Record undo transactions.
-    //  See https://github.com/yjs/y-codemirror.next/tree/main
-    // https://codemirror.net/examples/inverted-effect
-    invertedEffects.of((tr) => {
-      const effects = [];
-      if (!tr.changes.empty) {
-        tr.changes.iterChanges((fromA, toA, fromB, toB, inserted) => {
-        });
-      }
-      return effects;
     })
   ];
 };
@@ -1025,7 +1015,7 @@ var random = (min, max) => {
 };
 
 // packages/ui/react-ui-editor/src/extensions/comments.ts
-import { invertedEffects as invertedEffects2 } from "@codemirror/commands";
+import { invertedEffects } from "@codemirror/commands";
 import { Facet as Facet3, StateEffect as StateEffect2, StateField as StateField3 } from "@codemirror/state";
 import { hoverTooltip, keymap as keymap3, Decoration as Decoration3, EditorView as EditorView6 } from "@codemirror/view";
 import sortBy from "lodash.sortby";
@@ -1100,6 +1090,9 @@ import { tailwindConfig } from "@dxos/react-ui-theme";
 var tokens = tailwindConfig({}).theme;
 var getToken = (path, defaultValue = void 0) => get2(tokens, path, defaultValue);
 
+// packages/ui/react-ui-editor/src/styles/layout.ts
+var editorWithToolbarLayout = "fixed inset-0 grid grid-cols-1 grid-rows-[min-content_1fr] justify-center content-start overflow-hidden";
+
 // packages/ui/react-ui-editor/src/util.ts
 import { log } from "@dxos/log";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/util.ts";
@@ -1269,7 +1262,7 @@ var trackPastedComments = (onUpdate) => {
       copy: handleTrack
     }),
     // Track deleted comments.
-    invertedEffects2.of((tr) => {
+    invertedEffects.of((tr) => {
       const { comments: comments2 } = tr.startState.field(commentsState);
       const effects = [];
       tr.changes.iterChangedRanges((fromA, toA) => {
@@ -3988,10 +3981,10 @@ var MarkdownEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeh
 });
 var defaultSlots = {
   root: {
-    className: mx3("grow", focusRing)
+    className: focusRing
   },
   editor: {
-    className: "bs-full"
+    className: "min-bs-full"
   }
 };
 var defaultTextSlots = {
@@ -4002,11 +3995,35 @@ var defaultMarkdownSlots = {
 };
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-import { CaretRight, ChatText, Code, CodeBlock, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic } from "@phosphor-icons/react";
+import { ChatText, Code, CodeBlock, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, Quotes, CaretDown } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
 import React2 from "react";
-import { Button, DensityProvider, Select } from "@dxos/react-ui";
-import { getSize, mx as mx4 } from "@dxos/react-ui-theme";
+import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, useTranslation } from "@dxos/react-ui";
+import { getSize } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-editor/src/translations.ts
+var translationKey = "react-ui-editor";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "strong label": "Strong",
+        "emphasis label": "Emphasis",
+        "strikethrough label": "Strike-through",
+        "code label": "Code",
+        "bullet label": "Bullet list",
+        "ordered label": "Numbered list",
+        "task label": "Task list",
+        "blockquote label": "Block quote",
+        "codeblock label": "Code block",
+        "comment label": "Create comment",
+        "heading label": "Heading level"
+      }
+    }
+  }
+];
+
+// packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
 var HeadingIcons = {
   "0": Paragraph,
   "1": TextHOne,
@@ -4017,42 +4034,40 @@ var HeadingIcons = {
   "6": TextHSix
 };
 var [ToolbarContextProvider, useToolbarContext] = createContext("Toolbar");
-var ToolbarRoot = ({ children, onAction, state }) => {
+var ToolbarRoot = ({ children, onAction, classNames, state }) => {
   return /* @__PURE__ */ React2.createElement(ToolbarContextProvider, {
     onAction,
     state
   }, /* @__PURE__ */ React2.createElement(DensityProvider, {
     density: "fine"
-  }, /* @__PURE__ */ React2.createElement("div", {
-    role: "toolbar",
-    className: "flex w-full shrink-0 p-1 gap-4 items-center whitespace-nowrap overflow-hidden"
-  }, children)));
+  }, /* @__PURE__ */ React2.createElement(ElevationProvider, {
+    elevation: "chrome"
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Root, {
+    classNames: [
+      "is-full shrink-0 overflow-x-auto p-1",
+      classNames
+    ]
+  }, children))));
 };
-var ToolbarButton = ({ Icon, onClick, title, getState, disable }) => {
-  const { onAction, state } = useToolbarContext("ToolbarButton");
-  const active = getState && state ? getState(state) : false;
-  const disabled = disable && state ? disable(state) : false;
-  const handleClick = (event) => {
-    const action = onClick(state);
-    if (action) {
-      onAction?.(action);
-      event.preventDefault();
-    }
-  };
-  return /* @__PURE__ */ React2.createElement(Button, {
+var buttonStyles = "min-bs-0 p-2";
+var iconStyles = getSize(4);
+var ToolbarButton = ({ Icon, children, ...props }) => {
+  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
     variant: "ghost",
-    classNames: mx4("p-2", active && "ring-[1px]"),
-    onMouseDown: handleClick,
-    title,
-    disabled
+    ...props,
+    classNames: buttonStyles
   }, /* @__PURE__ */ React2.createElement(Icon, {
-    className: getSize(5)
-  }));
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, children));
 };
 var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
+  role: "separator",
   className: "grow"
 });
 var MarkdownHeading = () => {
+  const { t } = useTranslation(translationKey);
   const { onAction, state } = useToolbarContext("MarkdownFormatting");
   const blockType = state ? state.blockType : "paragraph";
   const header = blockType && /heading(\d)/.exec(blockType);
@@ -4065,9 +4080,19 @@ var MarkdownHeading = () => {
       type: "heading",
       data: parseInt(value2)
     })
-  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, null, /* @__PURE__ */ React2.createElement(HeadingIcon, {
-    className: getSize(5)
-  })), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
+  }, /* @__PURE__ */ React2.createElement(Select.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("heading label")), /* @__PURE__ */ React2.createElement(HeadingIcon, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement(CaretDown, {
+    className: getSize(2),
+    weight: "bold"
+  }))), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React2.createElement(Select.Viewport, null, /* @__PURE__ */ React2.createElement(Select.Option, {
     value: "0"
   }, "Paragraph"), [
     1,
@@ -4079,120 +4104,142 @@ var MarkdownHeading = () => {
   ].map((level) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: level,
     value: String(level)
-  }, "Heading ", level))))));
+  }, "Heading ", level))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null))));
+};
+var markdownStyles = [
+  {
+    key: "strong",
+    Icon: TextB
+  },
+  {
+    key: "emphasis",
+    Icon: TextItalic
+  },
+  {
+    key: "strikethrough",
+    Icon: TextStrikethrough
+  },
+  {
+    key: "code",
+    Icon: Code
+  },
+  {
+    key: "link",
+    Icon: Link
+  }
+];
+var MarkdownStyles = () => {
+  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+    type: "multiple",
+    value: markdownStyles.filter(({ key }) => !!state?.[key]).map(({ key }) => key)
+  }, markdownStyles.map(({ key, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key,
+    value: key,
+    Icon,
+    disabled: state?.blockType === "codeblock",
+    onClick: () => onAction?.({
+      type: key,
+      data: state ? !state[key] : null
+    })
+  }, t(`${key} label`))));
+};
+var markdownLists = [
+  {
+    key: "bullet",
+    Icon: ListBullets,
+    actionType: "list-bullet"
+  },
+  {
+    key: "ordered",
+    Icon: ListNumbers,
+    actionType: "list-ordered"
+  },
+  {
+    key: "task",
+    Icon: ListChecks,
+    actionType: "list-tasks"
+  }
+];
+var MarkdownLists = () => {
+  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+    type: "single",
+    value: state?.listStyle ?? void 0
+  }, markdownLists.map(({ key, Icon, actionType }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key,
+    value: key,
+    Icon,
+    onClick: () => onAction?.({
+      type: actionType,
+      data: state ? state.listStyle !== key : null
+    })
+  }, t(`${key} label`))));
+};
+var markdownBlocks = [
+  {
+    key: "blockquote",
+    Icon: Quotes,
+    pressed: (state) => state?.blockQuote,
+    action: (state) => ({
+      type: "blockquote",
+      data: state ? !state.blockQuote : null
+    }),
+    disabled: (state) => false
+  },
+  {
+    key: "codeblock",
+    Icon: CodeBlock,
+    pressed: (state) => state?.blockType === "codeblock",
+    action: (state) => ({
+      type: "blockquote",
+      data: state ? !state.blockQuote : null
+    }),
+    disabled: (state) => !state?.blankLine
+  }
+];
+var MarkdownBlocks = () => {
+  const { onAction, state } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+    type: "multiple",
+    value: markdownBlocks.filter(({ pressed }) => pressed(state)).map(({ key }) => key)
+  }, markdownBlocks.map(({ key, Icon, action }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key,
+    value: key,
+    Icon,
+    onClick: () => onAction?.(action(state))
+  }, t(`${key} label`)))), /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    disabled: !state?.blankLine,
+    onClick: () => onAction?.({
+      type: "table"
+    }),
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement(Table2, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("table label"))));
+};
+var MarkdownStandard = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MarkdownHeading, null), /* @__PURE__ */ React2.createElement(MarkdownStyles, null), /* @__PURE__ */ React2.createElement(MarkdownLists, null), /* @__PURE__ */ React2.createElement(MarkdownBlocks, null));
+var MarkdownExtended = () => {
+  const { onAction } = useToolbarContext("MarkdownStyles");
+  const { t } = useTranslation(translationKey);
+  return /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
+    variant: "ghost",
+    onClick: () => onAction?.({
+      type: "comment"
+    }),
+    classNames: buttonStyles
+  }, /* @__PURE__ */ React2.createElement(ChatText, {
+    className: iconStyles
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "sr-only"
+  }, t("comment label")));
 };
-var MarkdownStyles = () => /* @__PURE__ */ React2.createElement("div", {
-  role: "none"
-}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: TextB,
-  title: "String",
-  disable: (s) => s.blockType === "codeblock",
-  getState: (s) => s.strong,
-  onClick: (s) => ({
-    type: "strong",
-    data: s ? !s.strong : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: TextItalic,
-  title: "Emphasis",
-  disable: (s) => s.blockType === "codeblock",
-  getState: (s) => s.emphasis,
-  onClick: (s) => ({
-    type: "emphasis",
-    data: s ? !s.emphasis : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: TextStrikethrough,
-  title: "Strike-through",
-  disable: (s) => s.blockType === "codeblock",
-  getState: (s) => s.strikethrough,
-  onClick: (s) => ({
-    type: "strikethrough",
-    data: s ? !s.strikethrough : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: Code,
-  title: "Inline code",
-  disable: (s) => s.blockType === "codeblock",
-  getState: (s) => s.code,
-  onClick: (s) => ({
-    type: "code",
-    data: s ? !s.code : null
-  })
-}));
-var MarkdownLists = () => /* @__PURE__ */ React2.createElement("div", {
-  role: "none"
-}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: ListBullets,
-  title: "Bullet list",
-  getState: (s) => s.listStyle === "bullet",
-  onClick: (s) => ({
-    type: "list-bullet",
-    data: s ? s.listStyle !== "bullet" : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: ListNumbers,
-  title: "Numbered list",
-  getState: (s) => s.listStyle === "ordered",
-  onClick: (s) => ({
-    type: "list-ordered",
-    data: s ? s.listStyle !== "ordered" : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: ListChecks,
-  title: "Task list",
-  getState: (s) => s.listStyle === "task",
-  onClick: (s) => ({
-    type: "list-tasks",
-    data: s ? s.listStyle !== "task" : null
-  })
-}));
-var MarkdownBlocks = () => /* @__PURE__ */ React2.createElement("div", {
-  role: "none"
-}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: CaretRight,
-  title: "Block quote",
-  getState: (s) => s.blockQuote,
-  onClick: (s) => ({
-    type: "blockquote",
-    data: s ? !s.blockQuote : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: CodeBlock,
-  title: "Code block",
-  disable: (s) => !s.blankLine,
-  getState: (s) => s.blockType === "codeblock",
-  onClick: (s) => ({
-    type: "codeblock",
-    data: s ? s.blockType !== "codeblock" : null
-  })
-}), /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: Table2,
-  title: "Table",
-  disable: (s) => !s.blankLine,
-  onClick: () => ({
-    type: "table"
-  })
-}));
-var MarkdownLinks = () => /* @__PURE__ */ React2.createElement("div", {
-  role: "none"
-}, /* @__PURE__ */ React2.createElement(ToolbarButton, {
-  Icon: Link,
-  title: "Link",
-  getState: (s) => s.link,
-  onClick: (s) => ({
-    type: "link",
-    data: s ? !s.link : null
-  })
-}));
-var MarkdownStandard = () => /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(MarkdownHeading, null), /* @__PURE__ */ React2.createElement(MarkdownStyles, null), /* @__PURE__ */ React2.createElement(MarkdownLists, null), /* @__PURE__ */ React2.createElement(MarkdownBlocks, null), /* @__PURE__ */ React2.createElement(MarkdownLinks, null));
-var MarkdownExtended = () => /* @__PURE__ */ React2.createElement(Toolbar.Button, {
-  Icon: ChatText,
-  title: "Create comment",
-  onClick: () => ({
-    type: "comment"
-  })
-});
 var Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarButton,
@@ -4596,6 +4643,7 @@ export {
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  editorWithToolbarLayout,
   focusComment,
   formatting,
   getFormatting,