@dxos/react-ui-editor 0.4.8 → 0.4.9-main.2d20855

package/dist/lib/browser/index.mjs

@@ -17,7 +17,10 @@ var translations_default = [
         "comment label": "Create comment",
         "image label": "Insert image",
         "heading label": "Heading level",
-        "table label": "Create table"
+        "table label": "Create table",
+        "heading level label_zero": "Paragraph",
+        "heading level label_one": "Heading level {{count}}",
+        "heading level label_other": "Heading level {{count}}"
       }
     }
   }
@@ -4485,11 +4488,11 @@ var TextEditor = /* @__PURE__ */ forwardRef(({ id, doc, selection, extensions, c
 });
 
 // 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 } 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 } from "@phosphor-icons/react";
 import { createContext } from "@radix-ui/react-context";
 import React2, { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 import { useDropzone } from "react-dropzone";
-import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
+import { DensityProvider, ElevationProvider, Toolbar as NaturalToolbar, Tooltip, useTranslation, DropdownMenu, Button } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
 var tooltipProps = {
   side: "top",
@@ -4572,58 +4575,48 @@ var MarkdownHeading = () => {
         return setTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ React2.createElement(Select.Root, {
-    disabled: value === null,
-    value: value ?? "0",
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
     open: selectOpen,
     onOpenChange: (nextOpen) => {
       if (!nextOpen) {
         suppressNextTooltip.current = true;
       }
       return setSelectOpen(nextOpen);
-    },
-    onValueChange: (value2) => onAction?.({
-      type: "heading",
-      data: parseInt(value2)
-    })
+    }
   }, /* @__PURE__ */ React2.createElement(Tooltip.Trigger, {
     asChild: true
   }, /* @__PURE__ */ React2.createElement(NaturalToolbar.Button, {
     asChild: true
-  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
+  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React2.createElement(Button, {
     variant: "ghost",
-    classNames: buttonStyles
+    classNames: buttonStyles,
+    disabled: value === null
   }, /* @__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, {
-    value: "0"
-  }, /* @__PURE__ */ React2.createElement(Paragraph, {
-    className: iconStyles
-  })), [
-    1,
-    2,
-    3,
-    4,
-    5,
-    6
-  ].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)))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
+  }), /* @__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, Object.keys(HeadingIcons).map((level) => {
+    const Icon = HeadingIcons[level];
+    return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+      key: level,
+      checked: value === level,
+      onClick: () => onAction?.({
+        type: "heading",
+        data: level
+      })
+    }, /* @__PURE__ */ React2.createElement("span", {
+      className: "sr-only"
+    }, t("heading level label", {
+      count: parseInt(level)
+    })), /* @__PURE__ */ React2.createElement(Icon, {
+      className: iconStyles
+    }), /* @__PURE__ */ React2.createElement(DropdownMenu.ItemIndicator, null, /* @__PURE__ */ React2.createElement(Check, null)));
+  })), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))), /* @__PURE__ */ React2.createElement(Tooltip.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip.Content, tooltipProps, t("heading label"), /* @__PURE__ */ React2.createElement(Tooltip.Arrow, null))));
 };
 var markdownStyles = [
   {