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

package/dist/lib/browser/index.mjs

@@ -1,7 +1,7 @@
 // packages/ui/react-ui-editor/src/index.ts
+import { keymap as keymap8 } from "@codemirror/view";
 import { TextKind } from "@dxos/protocols/proto/dxos/echo/model/text";
 import { Doc, YText, YXmlFragment } from "@dxos/text-model";
-import { keymap as keymap7 } from "@codemirror/view";
 
 // packages/ui/react-ui-editor/src/components/TextEditor/index.ts
 import { tags as tags2 } from "@lezer/highlight";
@@ -9,7 +9,7 @@ import { tags as tags2 } from "@lezer/highlight";
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 import { EditorState as EditorState2 } from "@codemirror/state";
 import { EditorView as EditorView15 } from "@codemirror/view";
-import { vim } from "@replit/codemirror-vim";
+import { useFocusableGroup } from "@fluentui/react-tabster";
 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";
@@ -1152,10 +1152,16 @@ var styles3 = EditorView6.baseTheme({
   }
 });
 var commentMark = Decoration3.mark({
-  class: "cm-comment"
+  class: "cm-comment",
+  attributes: {
+    "data-testid": "cm-comment"
+  }
 });
 var commentCurrentMark = Decoration3.mark({
-  class: "cm-comment-current"
+  class: "cm-comment-current",
+  attributes: {
+    "data-testid": "cm-comment"
+  }
 });
 var focusComment = (view, id, center = true) => {
   const comment = view.state.field(commentsState).comments.find((range2) => range2.comment.id === id);
@@ -2171,7 +2177,6 @@ var snippets = {
   codeblock: snippet([
     //
     "```#{}",
-    "#{}",
     "```"
   ].join("\n")),
   table: snippet([
@@ -2376,13 +2381,17 @@ var addList = (type) => ({ state, dispatch }) => {
   if (!blocks.length) {
     const { from, to } = state.doc.lineAt(state.selection.main.anchor);
     if (from === to) {
+      const insert = type === 1 ? "- " : type === 0 ? "1. " : "- [ ] ";
       dispatch(state.update({
         changes: [
           {
             from,
-            insert: type === 1 ? "- " : type === 0 ? "1. " : "- [ ] "
+            insert
           }
         ],
+        selection: {
+          anchor: from + insert.length
+        },
         userEvent: "format.list.add",
         scrollIntoView: true
       }));
@@ -3517,13 +3526,42 @@ var mention = ({ onSearch }) => {
   });
 };
 
+// packages/ui/react-ui-editor/src/extensions/modes.ts
+import { Facet as Facet4 } from "@codemirror/state";
+import { keymap as keymap6 } from "@codemirror/view";
+import { vim } from "@replit/codemirror-vim";
+var editorMode = Facet4.define({
+  combine: (modes) => modes[0] ?? {}
+});
+var EditorModes = {
+  default: [],
+  vim: [
+    vim(),
+    editorMode.of({
+      type: "vim",
+      noTabster: true
+    }),
+    keymap6.of([
+      {
+        key: "Alt-Escape",
+        run: (view) => {
+          view.dispatch({
+            userEvent: "focus.container"
+          });
+          return true;
+        }
+      }
+    ])
+  ]
+};
+
 // packages/ui/react-ui-editor/src/extensions/outliner.ts
 var outliner = (options = {}) => {
   return [];
 };
 
 // packages/ui/react-ui-editor/src/extensions/typewriter.ts
-import { keymap as keymap6 } from "@codemirror/view";
+import { keymap as keymap7 } from "@codemirror/view";
 var defaultItems = [
   "hello world!",
   "this is a test.",
@@ -3533,7 +3571,7 @@ var typewriter = ({ delay = 75, items = defaultItems } = {}) => {
   let t;
   let idx = 0;
   return [
-    keymap6.of([
+    keymap7.of([
       {
         // Reset.
         key: "alt-meta-'",
@@ -3821,11 +3859,10 @@ var codeTheme = {
 
 // packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx
 var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-editor/src/components/TextEditor/TextEditor.tsx";
-var EditorModes = [
-  "default",
-  "vim"
-];
-var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo, selection, editorMode, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
+var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, scrollTo, selection, theme, slots = defaultSlots, extensions = [], debug }, forwardedRef) => {
+  const tabsterDOMAttribute = useFocusableGroup({
+    tabBehavior: "limited"
+  });
   const { themeMode } = useThemeContext();
   const rootRef = useRef(null);
   const [view, setView] = useState2(null);
@@ -3860,7 +3897,7 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         EditorView15.exceptionSink.of((err) => {
           log2.catch(err, void 0, {
             F: __dxlog_file3,
-            L: 135,
+            L: 112,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -3876,14 +3913,20 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
         EditorView15.contentAttributes.of({
           class: slots.content?.className ?? ""
         }),
+        // Focus.
+        EditorView15.updateListener.of((update2) => {
+          update2.transactions.forEach((transaction) => {
+            if (transaction.isUserEvent("focus.container")) {
+              rootRef.current?.focus();
+            }
+          });
+        }),
         // State.
         EditorView15.editable.of(!readonly),
         EditorState2.readOnly.of(!!readonly),
         // Storage and replication.
         // NOTE: This must come before user extensions.
         model.extension,
-        // TODO(burdon): Factor out? (Requires special handling for Escape/Enter below).
-        editorMode === "vim" && vim(),
         // Custom.
         ...extensions
       ].filter(isNotFalsy4)
@@ -3903,6 +3946,9 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     });
     view?.destroy();
     setView(newView);
+    if (state.facet(editorMode).noTabster) {
+      rootRef.current.removeAttribute("data-tabster");
+    }
     return () => {
       newView?.destroy();
       setView(null);
@@ -3911,35 +3957,27 @@ var BaseTextEditor = /* @__PURE__ */ forwardRef(({ model, readonly, autoFocus, s
     rootRef,
     model,
     readonly,
-    editorMode,
     themeMode
   ]);
   const handleKeyUp = useCallback((event) => {
-    const { key, altKey, shiftKey, metaKey, ctrlKey } = event;
+    const { key } = event;
     switch (key) {
       case "Enter": {
         view?.focus();
         break;
       }
-      case "Escape": {
-        if (editorMode === "vim" && (altKey || shiftKey || metaKey || ctrlKey)) {
-          view?.focus();
-        }
-        break;
-      }
     }
   }, [
-    view,
-    editorMode
+    view
   ]);
   return /* @__PURE__ */ React.createElement("div", {
-    key: model.id,
     role: "none",
+    ref: rootRef,
+    key: model.id,
     tabIndex: 0,
-    ...slots.root,
-    // {...(editorMode !== 'vim' && tabsterDOMAttribute)}
     onKeyUp: handleKeyUp,
-    ref: rootRef
+    ...slots.root,
+    ...tabsterDOMAttribute
   });
 });
 var TextEditor = /* @__PURE__ */ forwardRef(({ readonly, placeholder: placeholder3, lineWrapping, theme = textTheme, slots, extensions = [], ...props }, forwardedRef) => {
@@ -3995,7 +4033,7 @@ var defaultMarkdownSlots = {
 };
 
 // packages/ui/react-ui-editor/src/components/Toolbar/Toolbar.tsx
-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 { ChatText, Code, CodeBlock, Link, ListBullets, ListChecks, ListNumbers, Paragraph, TextStrikethrough, Table as Table2, TextB, TextHOne, TextHTwo, TextHThree, TextHFour, TextHFive, TextHSix, TextItalic, Quotes } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
 import React2 from "react";
 import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, useTranslation } from "@dxos/react-ui";
@@ -4011,9 +4049,9 @@ var translations_default = [
         "emphasis label": "Emphasis",
         "strikethrough label": "Strike-through",
         "code label": "Code",
-        "bullet label": "Bullet list",
-        "ordered label": "Numbered list",
-        "task label": "Task list",
+        "list-bullet label": "Bullet list",
+        "list-ordered label": "Numbered list",
+        "list-task label": "Task list",
         "blockquote label": "Block quote",
         "codeblock label": "Code block",
         "comment label": "Create comment",
@@ -4050,7 +4088,7 @@ var ToolbarRoot = ({ children, onAction, classNames, state }) => {
   }, children))));
 };
 var buttonStyles = "min-bs-0 p-2";
-var iconStyles = getSize(4);
+var iconStyles = getSize(5);
 var ToolbarButton = ({ Icon, children, ...props }) => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
     variant: "ghost",
@@ -4067,7 +4105,6 @@ var ToolbarSeparator = () => /* @__PURE__ */ React2.createElement("div", {
   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);
@@ -4080,21 +4117,13 @@ var MarkdownHeading = () => {
       type: "heading",
       data: parseInt(value2)
     })
-  }, /* @__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, {
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, null, /* @__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, {
+  })), /* @__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"), [
+  }, /* @__PURE__ */ React2.createElement(Paragraph, {
+    className: iconStyles
+  })), [
     1,
     2,
     3,
@@ -4104,28 +4133,45 @@ var MarkdownHeading = () => {
   ].map((level) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: level,
     value: String(level)
-  }, "Heading ", level))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null))));
+  }, level === 1 && /* @__PURE__ */ React2.createElement(TextHOne, {
+    className: iconStyles
+  }), level === 2 && /* @__PURE__ */ React2.createElement(TextHTwo, {
+    className: iconStyles
+  }), level === 3 && /* @__PURE__ */ React2.createElement(TextHThree, {
+    className: iconStyles
+  }), level === 4 && /* @__PURE__ */ React2.createElement(TextHFour, {
+    className: iconStyles
+  }), level === 5 && /* @__PURE__ */ React2.createElement(TextHFive, {
+    className: iconStyles
+  }), level === 6 && /* @__PURE__ */ React2.createElement(TextHSix, {
+    className: iconStyles
+  })))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null))));
 };
 var markdownStyles = [
   {
-    key: "strong",
-    Icon: TextB
+    type: "strong",
+    Icon: TextB,
+    getState: (state) => state.strong
   },
   {
-    key: "emphasis",
-    Icon: TextItalic
+    type: "emphasis",
+    Icon: TextItalic,
+    getState: (state) => state.emphasis
   },
   {
-    key: "strikethrough",
-    Icon: TextStrikethrough
+    type: "strikethrough",
+    Icon: TextStrikethrough,
+    getState: (state) => state.strikethrough
   },
   {
-    key: "code",
-    Icon: Code
+    type: "code",
+    Icon: Code,
+    getState: (state) => state.code
   },
   {
-    key: "link",
-    Icon: Link
+    type: "link",
+    Icon: Link,
+    getState: (state) => state.link
   }
 ];
 var MarkdownStyles = () => {
@@ -4133,33 +4179,33 @@ var 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,
+    value: markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)
+  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key: type,
+    value: type,
     Icon,
     disabled: state?.blockType === "codeblock",
-    onClick: () => onAction?.({
-      type: key,
-      data: state ? !state[key] : null
-    })
-  }, t(`${key} label`))));
+    onClick: state ? () => onAction?.({
+      type,
+      data: !getState(state)
+    }) : void 0
+  }, t(`${type} label`))));
 };
 var markdownLists = [
   {
-    key: "bullet",
+    type: "list-bullet",
     Icon: ListBullets,
-    actionType: "list-bullet"
+    getState: (state) => state.listStyle === "bullet"
   },
   {
-    key: "ordered",
+    type: "list-ordered",
     Icon: ListNumbers,
-    actionType: "list-ordered"
+    getState: (state) => state.listStyle === "ordered"
   },
   {
-    key: "task",
+    type: "list-task",
     Icon: ListChecks,
-    actionType: "list-tasks"
+    getState: (state) => state.listStyle === "task"
   }
 ];
 var MarkdownLists = () => {
@@ -4168,61 +4214,52 @@ var MarkdownLists = () => {
   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,
+  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key: type,
+    value: type,
     Icon,
-    onClick: () => onAction?.({
-      type: actionType,
-      data: state ? state.listStyle !== key : null
-    })
-  }, t(`${key} label`))));
+    onClick: state ? () => onAction?.({
+      type,
+      data: !getState(state)
+    }) : void 0
+  }, t(`${type} label`))));
 };
 var markdownBlocks = [
   {
-    key: "blockquote",
+    type: "blockquote",
     Icon: Quotes,
-    pressed: (state) => state?.blockQuote,
-    action: (state) => ({
-      type: "blockquote",
-      data: state ? !state.blockQuote : null
-    }),
-    disabled: (state) => false
+    getState: (state) => state.blockQuote
   },
   {
-    key: "codeblock",
+    type: "codeblock",
     Icon: CodeBlock,
-    pressed: (state) => state?.blockType === "codeblock",
-    action: (state) => ({
-      type: "blockquote",
-      data: state ? !state.blockQuote : null
-    }),
-    disabled: (state) => !state?.blankLine
+    getState: (state) => state.blockQuote,
+    disabled: (state) => !state.blankLine
+  },
+  {
+    type: "table",
+    Icon: Table2,
+    getState: (state) => state.blockType === "tablecell",
+    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,
+  const value = markdownBlocks.find(({ getState }) => state && getState(state));
+  return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
+    type: "single",
+    value: value?.type
+  }, markdownBlocks.map(({ type, disabled, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key: type,
+    value: type,
     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"))));
+    disabled: !state || disabled?.(state),
+    onClick: state ? () => onAction?.({
+      type,
+      data: !getState(state)
+    }) : void 0
+  }, t(`${type} 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 = () => {
@@ -4230,6 +4267,7 @@ var MarkdownExtended = () => {
   const { t } = useTranslation(translationKey);
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
     variant: "ghost",
+    "data-testid": "editor.toolbar.comment",
     onClick: () => onAction?.({
       type: "comment"
     }),
@@ -4379,7 +4417,7 @@ var useActionHandler = (view) => {
         break;
       case "list-ordered":
       case "list-bullet":
-      case "list-tasks":
+      case "list-task":
         listType = action.type === "list-ordered" ? List.Ordered : action.type === "list-bullet" ? List.Bullet : List.Task;
         (action.data === false ? removeList(listType) : action.data === true ? addList(listType) : toggleList(listType))(view);
         break;
@@ -4643,6 +4681,7 @@ export {
   defaultSlots,
   defaultTextSlots,
   defaultTheme,
+  editorMode,
   editorWithToolbarLayout,
   focusComment,
   formatting,
@@ -4652,7 +4691,7 @@ export {
   hr,
   image,
   insertTable,
-  keymap7 as keymap,
+  keymap8 as keymap,
   link,
   listener,
   logChanges,