@dxos/react-ui-editor 0.4.3-main.97fc241 → 0.4.3-main.aa1c078

package/dist/lib/browser/index.mjs

@@ -2177,6 +2177,7 @@ var snippets = {
   codeblock: snippet([
     //
     "```#{}",
+    "#{}",
     "```"
   ].join("\n")),
   table: snippet([
@@ -2381,17 +2382,13 @@ 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
+            insert: type === 1 ? "- " : type === 0 ? "1. " : "- [ ] "
           }
         ],
-        selection: {
-          anchor: from + insert.length
-        },
         userEvent: "format.list.add",
         scrollIntoView: true
       }));
@@ -4033,7 +4030,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 } 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 { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, useTranslation } from "@dxos/react-ui";
@@ -4049,9 +4046,9 @@ var translations_default = [
         "emphasis label": "Emphasis",
         "strikethrough label": "Strike-through",
         "code label": "Code",
-        "list-bullet label": "Bullet list",
-        "list-ordered label": "Numbered list",
-        "list-task label": "Task list",
+        "bullet label": "Bullet list",
+        "ordered label": "Numbered list",
+        "task label": "Task list",
         "blockquote label": "Block quote",
         "codeblock label": "Code block",
         "comment label": "Create comment",
@@ -4088,7 +4085,7 @@ var ToolbarRoot = ({ children, onAction, classNames, state }) => {
   }, children))));
 };
 var buttonStyles = "min-bs-0 p-2";
-var iconStyles = getSize(5);
+var iconStyles = getSize(4);
 var ToolbarButton = ({ Icon, children, ...props }) => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroupItem, {
     variant: "ghost",
@@ -4105,6 +4102,7 @@ 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);
@@ -4117,13 +4115,21 @@ var MarkdownHeading = () => {
       type: "heading",
       data: parseInt(value2)
     })
-  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, null, /* @__PURE__ */ React2.createElement(HeadingIcon, {
+  }, /* @__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(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(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"
-  }, /* @__PURE__ */ React2.createElement(Paragraph, {
-    className: iconStyles
-  })), [
+  }, "Paragraph"), [
     1,
     2,
     3,
@@ -4133,45 +4139,28 @@ var MarkdownHeading = () => {
   ].map((level) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: level,
     value: String(level)
-  }, 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))));
+  }, "Heading ", level))), /* @__PURE__ */ React2.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React2.createElement(Select.Arrow, null))));
 };
 var markdownStyles = [
   {
-    type: "strong",
-    Icon: TextB,
-    getState: (state) => state.strong
+    key: "strong",
+    Icon: TextB
   },
   {
-    type: "emphasis",
-    Icon: TextItalic,
-    getState: (state) => state.emphasis
+    key: "emphasis",
+    Icon: TextItalic
   },
   {
-    type: "strikethrough",
-    Icon: TextStrikethrough,
-    getState: (state) => state.strikethrough
+    key: "strikethrough",
+    Icon: TextStrikethrough
   },
   {
-    type: "code",
-    Icon: Code,
-    getState: (state) => state.code
+    key: "code",
+    Icon: Code
   },
   {
-    type: "link",
-    Icon: Link,
-    getState: (state) => state.link
+    key: "link",
+    Icon: Link
   }
 ];
 var MarkdownStyles = () => {
@@ -4179,33 +4168,33 @@ var MarkdownStyles = () => {
   const { t } = useTranslation(translationKey);
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "multiple",
-    value: markdownStyles.filter(({ getState }) => state && getState(state)).map(({ type }) => type)
-  }, markdownStyles.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
-    key: type,
-    value: type,
+    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: state ? () => onAction?.({
-      type,
-      data: !getState(state)
-    }) : void 0
-  }, t(`${type} label`))));
+    onClick: () => onAction?.({
+      type: key,
+      data: state ? !state[key] : null
+    })
+  }, t(`${key} label`))));
 };
 var markdownLists = [
   {
-    type: "list-bullet",
+    key: "bullet",
     Icon: ListBullets,
-    getState: (state) => state.listStyle === "bullet"
+    actionType: "list-bullet"
   },
   {
-    type: "list-ordered",
+    key: "ordered",
     Icon: ListNumbers,
-    getState: (state) => state.listStyle === "ordered"
+    actionType: "list-ordered"
   },
   {
-    type: "list-task",
+    key: "task",
     Icon: ListChecks,
-    getState: (state) => state.listStyle === "task"
+    actionType: "list-tasks"
   }
 ];
 var MarkdownLists = () => {
@@ -4214,52 +4203,61 @@ var MarkdownLists = () => {
   return /* @__PURE__ */ React2.createElement(NaturalToolbar.ToggleGroup, {
     type: "single",
     value: state?.listStyle ?? void 0
-  }, markdownLists.map(({ type, getState, Icon }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
-    key: type,
-    value: type,
+  }, markdownLists.map(({ key, Icon, actionType }) => /* @__PURE__ */ React2.createElement(ToolbarButton, {
+    key,
+    value: key,
     Icon,
-    onClick: state ? () => onAction?.({
-      type,
-      data: !getState(state)
-    }) : void 0
-  }, t(`${type} label`))));
+    onClick: () => onAction?.({
+      type: actionType,
+      data: state ? state.listStyle !== key : null
+    })
+  }, t(`${key} label`))));
 };
 var markdownBlocks = [
   {
-    type: "blockquote",
+    key: "blockquote",
     Icon: Quotes,
-    getState: (state) => state.blockQuote
+    pressed: (state) => state?.blockQuote,
+    action: (state) => ({
+      type: "blockquote",
+      data: state ? !state.blockQuote : null
+    }),
+    disabled: (state) => false
   },
   {
-    type: "codeblock",
+    key: "codeblock",
     Icon: CodeBlock,
-    getState: (state) => state.blockQuote,
-    disabled: (state) => !state.blankLine
-  },
-  {
-    type: "table",
-    Icon: Table2,
-    getState: (state) => state.blockType === "tablecell",
-    disabled: (state) => !state.blankLine
+    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);
-  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,
+  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,
-    disabled: !state || disabled?.(state),
-    onClick: state ? () => onAction?.({
-      type,
-      data: !getState(state)
-    }) : void 0
-  }, t(`${type} label`))));
+    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 = () => {
@@ -4417,7 +4415,7 @@ var useActionHandler = (view) => {
         break;
       case "list-ordered":
       case "list-bullet":
-      case "list-task":
+      case "list-tasks":
         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;