@dxos/react-ui-editor 0.4.3-main.dda98d3 → 0.4.3-main.e5bbcda

package/dist/lib/browser/index.mjs

@@ -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
       }));
@@ -4024,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";
@@ -4040,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",
@@ -4079,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",
@@ -4096,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);
@@ -4109,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,
@@ -4133,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 = () => {
@@ -4162,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 = () => {
@@ -4197,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 = () => {
@@ -4259,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"
     }),
@@ -4408,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;