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

package/dist/lib/browser/index.mjs

@@ -17,10 +17,7 @@ var translations_default = [
         "comment label": "Create comment",
         "image label": "Insert image",
         "heading label": "Heading level",
-        "table label": "Create table",
-        "heading level label_zero": "Paragraph",
-        "heading level label_one": "Heading level {{count}}",
-        "heading level label_other": "Heading level {{count}}"
+        "table label": "Create table"
       }
     }
   }
@@ -4488,11 +4485,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, CaretDown, Check } 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 } 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, Toolbar as NaturalToolbar, Tooltip, useTranslation, DropdownMenu, Button } from "@dxos/react-ui";
+import { DensityProvider, ElevationProvider, Select, Toolbar as NaturalToolbar, Tooltip, useTranslation } from "@dxos/react-ui";
 import { getSize } from "@dxos/react-ui-theme";
 var tooltipProps = {
   side: "top",
@@ -4575,48 +4572,58 @@ var MarkdownHeading = () => {
         return setTooltipOpen(nextOpen);
       }
     }
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+  }, /* @__PURE__ */ React2.createElement(Select.Root, {
+    disabled: value === null,
+    value: value ?? "0",
     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(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(Button, {
+  }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     variant: "ghost",
-    classNames: buttonStyles,
-    disabled: value === null
+    classNames: buttonStyles
   }, /* @__PURE__ */ React2.createElement("span", {
     className: "sr-only"
   }, t("heading label")), /* @__PURE__ */ React2.createElement(HeadingIcon, {
     className: iconStyles
-  }), /* @__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))));
+  })))), /* @__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))));
 };
 var markdownStyles = [
   {