@yurikilian/lex4 1.5.1 → 1.5.2

package/dist/components/BlockTypePicker.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { Lex4Translations } from '../i18n';
+import { BlockType } from '../lexical/commands/block-commands';
+export declare function getBlockTypeLabel(t: Lex4Translations, blockType: BlockType): string;
+interface BlockTypePickerProps {
+    value: BlockType;
+    onChange: (blockType: BlockType) => void;
+}
+export declare const BlockTypePicker: React.FC<BlockTypePickerProps>;
+export {};
+//# sourceMappingURL=BlockTypePicker.d.ts.map

package/dist/components/BlockTypePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockTypePicker.d.ts","sourceRoot":"","sources":["../../src/components/BlockTypePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAC;AAYpE,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,SAAS,GAAG,MAAM,CAiBnF;AAMD,UAAU,oBAAoB;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6F1D,CAAC"}

package/dist/components/Toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAoEhE,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAgc3B,CAAC"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAqEhE,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAoa3B,CAAC"}

package/dist/lex4-editor.cjs

@@ -1460,33 +1460,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" }
@@ -1499,7 +1499,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
  *
@@ -2486,6 +2494,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] = React.useState(false);
+  const containerRef = React.useRef(null);
+  React.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: "lex4-block-type-picker",
+      "data-testid": "block-type-picker",
+      children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `lex4-block-type-trigger-code${value === "paragraph" ? "" : " heading"}`,
+                  children: getBlockTypeShortLabel(value)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 14, className: `lex4-block-type-trigger-chevron${open ? " open" : ""}` })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: `lex4-block-type-item-code${option.value === "paragraph" ? "" : " heading"}${active ? " active" : ""}`,
+                        children: option.shortLabel
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-block-type-item-label", children: label })
+                  ]
+                },
+                option.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
 const HeaderFooterToggle = ({
   enabled,
   onToggle,
@@ -2984,19 +3121,9 @@ const Toolbar = () => {
     [activeEditor, applyToBodyEditors, runToolbarAction, t.history.actions.fontSizeChanged]
   );
   const handleBlockTypeChange = React.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));
         }
@@ -3006,13 +3133,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 = React.useCallback(() => {
@@ -3047,23 +3168,11 @@ const Toolbar = () => {
           )
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-toolbar-group-gap lex4-toolbar-group-block", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "select",
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-toolbar-group", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: "paragraph", children: t.toolbar.paragraph }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h1", children: t.toolbar.heading1 }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h2", children: t.toolbar.heading2 }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h3", children: t.toolbar.heading3 }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h4", children: t.toolbar.heading4 }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h5", children: t.toolbar.heading5 }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "h6", children: t.toolbar.heading6 })
-            ]
+            onChange: handleBlockTypeChange
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),