@yurikilian/lex4 1.5.1 → 1.5.3

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$r = [
   ["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$r);
 /**
  * @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$q = [
   [
     "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$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$n = [
+const __iconNode$p = [
   [
     "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,23 @@ const __iconNode$n = [
     }
   ]
 ];
-const Braces = createLucideIcon("braces", __iconNode$n);
+const Braces = createLucideIcon("braces", __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$o = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __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
  *
@@ -1989,7 +2005,9 @@ const EMPTY_RESOLVED = {
   handleFactories: []
 };
 const ExtensionResolvedContext = createContext(EMPTY_RESOLVED);
-function arraysEqual(a, b) {
+function extensionArraysEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return !a && !b;
   if (a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) {
     if (a[i] !== b[i]) return false;
@@ -1997,12 +2015,11 @@ function arraysEqual(a, b) {
   return true;
 }
 const ExtensionProvider = ({ extensions, children }) => {
-  const prevNamesRef = useRef([]);
+  const prevExtensionsRef = useRef(void 0);
   const resolvedRef = useRef(EMPTY_RESOLVED);
-  const currentNames = (extensions ?? []).map((e) => e.name);
-  if (!arraysEqual(currentNames, prevNamesRef.current)) {
+  if (!extensionArraysEqual(extensions, prevExtensionsRef.current)) {
     resolvedRef.current = extensions && extensions.length > 0 ? resolveExtensions(extensions) : EMPTY_RESOLVED;
-    prevNamesRef.current = currentNames;
+    prevExtensionsRef.current = extensions;
   }
   const resolved = resolvedRef.current;
   let wrapped = /* @__PURE__ */ jsx(Fragment, { children });
@@ -2484,6 +2501,136 @@ 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 }),
+                    /* @__PURE__ */ jsx("span", { className: "lex4-block-type-item-check", "aria-hidden": "true", children: active ? /* @__PURE__ */ jsx(Check, { size: 14 }) : null })
+                  ]
+                },
+                option.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
 const HeaderFooterToggle = ({
   enabled,
   onToggle,
@@ -2982,19 +3129,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 +3141,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 +3176,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, {}),