@yurikilian/lex4 1.5.1 → 1.5.2

package/dist/lex4-editor.js

@@ -1458,33 +1458,33 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$p = [
+const __iconNode$q = [
   ["path", { d: "m15 16 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16", key: "xik6mr" }],
   ["path", { d: "M15.697 14h5.606", key: "1stdlc" }],
   ["path", { d: "m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16", key: "d5nyq2" }],
   ["path", { d: "M3.304 13h6.392", key: "1q3zxz" }]
 ];
-const ALargeSmall = createLucideIcon("a-large-small", __iconNode$p);
+const ALargeSmall = createLucideIcon("a-large-small", __iconNode$q);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [
+const __iconNode$p = [
   [
     "path",
     { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
   ]
 ];
-const Bold = createLucideIcon("bold", __iconNode$o);
+const Bold = createLucideIcon("bold", __iconNode$p);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$n = [
+const __iconNode$o = [
   [
     "path",
     { d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1", key: "ezmyqa" }
@@ -1497,7 +1497,15 @@ const __iconNode$n = [
     }
   ]
 ];
-const Braces = createLucideIcon("braces", __iconNode$n);
+const Braces = createLucideIcon("braces", __iconNode$o);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$n = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$n);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
@@ -2484,6 +2492,135 @@ function readSelectedVariableFormatting(editor) {
     fontSize: extractFontSizePtFromStyle(style)
   };
 }
+const BLOCK_TYPE_OPTIONS = [
+  { value: "paragraph", shortLabel: "P" },
+  { value: "h1", shortLabel: "H1" },
+  { value: "h2", shortLabel: "H2" },
+  { value: "h3", shortLabel: "H3" },
+  { value: "h4", shortLabel: "H4" },
+  { value: "h5", shortLabel: "H5" },
+  { value: "h6", shortLabel: "H6" }
+];
+function getBlockTypeLabel(t, blockType) {
+  switch (blockType) {
+    case "h1":
+      return t.toolbar.heading1;
+    case "h2":
+      return t.toolbar.heading2;
+    case "h3":
+      return t.toolbar.heading3;
+    case "h4":
+      return t.toolbar.heading4;
+    case "h5":
+      return t.toolbar.heading5;
+    case "h6":
+      return t.toolbar.heading6;
+    default:
+      return t.toolbar.paragraph;
+  }
+}
+function getBlockTypeShortLabel(blockType) {
+  var _a;
+  return ((_a = BLOCK_TYPE_OPTIONS.find((option) => option.value === blockType)) == null ? void 0 : _a.shortLabel) ?? "P";
+}
+const BlockTypePicker = ({ value, onChange }) => {
+  const t = useTranslations();
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "lex4-block-type-picker",
+      "data-testid": "block-type-picker",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: `lex4-block-type-trigger${open ? " open" : ""}`,
+            "data-testid": "block-type-selector",
+            "aria-label": t.toolbar.blockType,
+            "aria-expanded": open,
+            "aria-haspopup": "menu",
+            title: getBlockTypeLabel(t, value),
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => setOpen((current) => !current),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `lex4-block-type-trigger-code${value === "paragraph" ? "" : " heading"}`,
+                  children: getBlockTypeShortLabel(value)
+                }
+              ),
+              /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: `lex4-block-type-trigger-chevron${open ? " open" : ""}` })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "lex4-block-type-menu",
+            role: "menu",
+            "data-testid": "block-type-menu",
+            children: BLOCK_TYPE_OPTIONS.map((option) => {
+              const label = getBlockTypeLabel(t, option.value);
+              const active = option.value === value;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitemradio",
+                  "aria-checked": active,
+                  className: `lex4-block-type-item${active ? " active" : ""}`,
+                  "data-testid": `block-type-option-${option.value}`,
+                  onMouseDown: (event) => event.preventDefault(),
+                  onClick: () => {
+                    onChange(option.value);
+                    setOpen(false);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `lex4-block-type-item-code${option.value === "paragraph" ? "" : " heading"}${active ? " active" : ""}`,
+                        children: option.shortLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "lex4-block-type-item-label", children: label })
+                  ]
+                },
+                option.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
 const HeaderFooterToggle = ({
   enabled,
   onToggle,
@@ -2982,19 +3119,9 @@ const Toolbar = () => {
     [activeEditor, applyToBodyEditors, runToolbarAction, t.history.actions.fontSizeChanged]
   );
   const handleBlockTypeChange = useCallback(
-    (e) => {
-      const blockType = e.target.value;
-      const labelMap = {
-        paragraph: t.toolbar.paragraph,
-        h1: t.toolbar.heading1,
-        h2: t.toolbar.heading2,
-        h3: t.toolbar.heading3,
-        h4: t.toolbar.heading4,
-        h5: t.toolbar.heading5,
-        h6: t.toolbar.heading6
-      };
+    (blockType) => {
       runToolbarAction(
-        interpolate(t.history.actions.blockTypeChanged, { value: labelMap[blockType] }),
+        interpolate(t.history.actions.blockTypeChanged, { value: getBlockTypeLabel(t, blockType) }),
         () => {
           applyToBodyEditors((editor) => setBlockType(editor, blockType));
         }
@@ -3004,13 +3131,7 @@ const Toolbar = () => {
       applyToBodyEditors,
       runToolbarAction,
       t.history.actions.blockTypeChanged,
-      t.toolbar.heading1,
-      t.toolbar.heading2,
-      t.toolbar.heading3,
-      t.toolbar.heading4,
-      t.toolbar.heading5,
-      t.toolbar.heading6,
-      t.toolbar.paragraph
+      t
     ]
   );
   const handleToggleHistory = useCallback(() => {
@@ -3045,23 +3166,11 @@ const Toolbar = () => {
           )
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx("div", { className: "lex4-toolbar-group-gap lex4-toolbar-group-block", children: /* @__PURE__ */ jsxs(
-          "select",
+        /* @__PURE__ */ jsx("div", { className: "lex4-toolbar-group", children: /* @__PURE__ */ jsx(
+          BlockTypePicker,
           {
-            className: "lex4-toolbar-select lex4-toolbar-select-block",
-            "data-testid": "block-type-selector",
-            "aria-label": t.toolbar.blockType,
             value: activeBlockType,
-            onChange: handleBlockTypeChange,
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "paragraph", children: t.toolbar.paragraph }),
-              /* @__PURE__ */ jsx("option", { value: "h1", children: t.toolbar.heading1 }),
-              /* @__PURE__ */ jsx("option", { value: "h2", children: t.toolbar.heading2 }),
-              /* @__PURE__ */ jsx("option", { value: "h3", children: t.toolbar.heading3 }),
-              /* @__PURE__ */ jsx("option", { value: "h4", children: t.toolbar.heading4 }),
-              /* @__PURE__ */ jsx("option", { value: "h5", children: t.toolbar.heading5 }),
-              /* @__PURE__ */ jsx("option", { value: "h6", children: t.toolbar.heading6 })
-            ]
+            onChange: handleBlockTypeChange
           }
         ) }),
         /* @__PURE__ */ jsx(Divider, {}),