@multiplatform.one/rich-text 6.1.0 → 6.4.0

package/dist/cjs/toolbar/MathBubble.cjs

@@ -0,0 +1,159 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var MathBubble_exports = {};
+__export(MathBubble_exports, {
+  MathBubble: () => MathBubble
+});
+module.exports = __toCommonJS(MathBubble_exports);
+var import_react = require("react");
+var import_menus = require("@tiptap/react/menus");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("@phosphor-icons/react");
+var import_tamagui = require("tamagui");
+var import_forms = require("@multiplatform.one/forms");
+var import_lazyKatex = require("../editor/lazyKatex.cjs");
+var import_ToolbarButton = require("./ToolbarButton.cjs");
+var import_t = require("../shared/t.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function MathBubble({
+  editor
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [editing, setEditing] = (0, import_react.useState)(false);
+  const [latex, setLatex] = (0, import_react.useState)("");
+  const [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (!editing) return void 0;
+    if (!latex.trim()) {
+      setError(null);
+      return void 0;
+    }
+    let cancelled = false;
+    void (0, import_lazyKatex.renderKatexHtml)(latex).then(result => {
+      if (!cancelled) setError(result.ok ? null : result.error);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [latex, editing]);
+  const handleEdit = (0, import_react.useCallback)(() => {
+    if (!editor) return;
+    setLatex(editor.getAttributes("inlineMath").latex ?? "");
+    setError(null);
+    setEditing(true);
+  }, [editor]);
+  const handleSave = (0, import_react.useCallback)(() => {
+    if (!editor) return;
+    editor.chain().focus().updateInlineMath({
+      latex: latex.trim()
+    }).run();
+    setEditing(false);
+  }, [editor, latex]);
+  const handleRemove = (0, import_react.useCallback)(() => {
+    if (!editor) return;
+    editor.chain().focus().deleteSelection().run();
+    setEditing(false);
+  }, [editor]);
+  if (!editor) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menus.BubbleMenu, {
+    editor,
+    className: "rt-bubble-menu",
+    shouldShow: ({
+      editor: e
+    }) => e.isActive("inlineMath"),
+    options: {
+      placement: "top",
+      offset: 6
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      backgroundColor: "$background",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      borderRadius: knobProps.borderRadius.borderRadius,
+      padding: "$1.5",
+      gap: "$1.5",
+      alignItems: "center",
+      elevation: knobProps.elevation,
+      children: editing ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$1.5",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+          size: "$2",
+          placeholder: "x^2 + y^2",
+          value: latex,
+          onChangeText: setLatex,
+          onSubmitEditing: handleSave,
+          "aria-label": (0, import_t.t)("TeX expression"),
+          autoFocus: true,
+          minWidth: 220,
+          fontFamily: "$mono"
+        }), error ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: "$red11",
+          fontSize: 11,
+          maxWidth: 260,
+          role: "alert",
+          children: error
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$1",
+          justifyContent: "flex-end",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: "$2",
+            onPress: () => setEditing(false),
+            "aria-label": (0, import_t.t)("Cancel"),
+            children: (0, import_t.t)("Cancel")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: "$2",
+            theme: "active",
+            onPress: handleSave,
+            "aria-label": (0, import_t.t)("Save math"),
+            children: (0, import_t.t)("Save")
+          })]
+        })]
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: 12,
+          fontFamily: "$mono",
+          maxWidth: 220,
+          numberOfLines: 1,
+          color: "$color11",
+          children: editor.getAttributes("inlineMath").latex || (0, import_t.t)("empty")
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+          onPress: handleEdit,
+          "aria-label": (0, import_t.t)("Edit math"),
+          tooltip: (0, import_t.t)("Edit math"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PencilSimpleIcon, {
+            size: 14
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+          onPress: handleRemove,
+          "aria-label": (0, import_t.t)("Remove math"),
+          tooltip: (0, import_t.t)("Remove math"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.TrashIcon, {
+            size: 14
+          })
+        })]
+      })
+    })
+  });
+}

package/dist/cjs/toolbar/MathBubble.native.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var MathBubble_exports = {};
+__export(MathBubble_exports, {
+  MathBubble: () => MathBubble
+});
+module.exports = __toCommonJS(MathBubble_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_menus = require("@tiptap/react/menus");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("@phosphor-icons/react");
+var import_tamagui = require("tamagui");
+var import_forms = require("@multiplatform.one/forms");
+var import_lazyKatex = require("../editor/lazyKatex.native.js");
+var import_ToolbarButton = require("./ToolbarButton.native.js");
+var import_t = require("../shared/t.native.js");
+function MathBubble(param) {
+  var {
+    editor
+  } = param;
+  var {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  var [editing, setEditing] = (0, import_react.useState)(false);
+  var [latex, setLatex] = (0, import_react.useState)("");
+  var [error, setError] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(function () {
+    if (!editing) return void 0;
+    if (!latex.trim()) {
+      setError(null);
+      return void 0;
+    }
+    var cancelled = false;
+    void (0, import_lazyKatex.renderKatexHtml)(latex).then(function (result) {
+      if (!cancelled) setError(result.ok ? null : result.error);
+    });
+    return function () {
+      cancelled = true;
+    };
+  }, [latex, editing]);
+  var handleEdit = (0, import_react.useCallback)(function () {
+    var _editor_getAttributes_latex;
+    if (!editor) return;
+    setLatex((_editor_getAttributes_latex = editor.getAttributes("inlineMath").latex) !== null && _editor_getAttributes_latex !== void 0 ? _editor_getAttributes_latex : "");
+    setError(null);
+    setEditing(true);
+  }, [editor]);
+  var handleSave = (0, import_react.useCallback)(function () {
+    if (!editor) return;
+    editor.chain().focus().updateInlineMath({
+      latex: latex.trim()
+    }).run();
+    setEditing(false);
+  }, [editor, latex]);
+  var handleRemove = (0, import_react.useCallback)(function () {
+    if (!editor) return;
+    editor.chain().focus().deleteSelection().run();
+    setEditing(false);
+  }, [editor]);
+  if (!editor) return null;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_menus.BubbleMenu, {
+    editor,
+    className: "rt-bubble-menu",
+    shouldShow: function shouldShow(param2) {
+      var {
+        editor: e
+      } = param2;
+      return e.isActive("inlineMath");
+    },
+    options: {
+      placement: "top",
+      offset: 6
+    },
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      backgroundColor: "$background",
+      borderWidth: 1,
+      borderColor: "$borderColor",
+      borderRadius: knobProps.borderRadius.borderRadius,
+      padding: "$1.5",
+      gap: "$1.5",
+      alignItems: "center",
+      elevation: knobProps.elevation,
+      children: editing ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$1.5",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Input, {
+          size: "$2",
+          placeholder: "x^2 + y^2",
+          value: latex,
+          onChangeText: setLatex,
+          onSubmitEditing: handleSave,
+          "aria-label": (0, import_t.t)("TeX expression"),
+          autoFocus: true,
+          minWidth: 220,
+          fontFamily: "$mono"
+        }), error ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          color: "$red11",
+          fontSize: 11,
+          maxWidth: 260,
+          role: "alert",
+          children: error
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$1",
+          justifyContent: "flex-end",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: "$2",
+            onPress: function onPress() {
+              return setEditing(false);
+            },
+            "aria-label": (0, import_t.t)("Cancel"),
+            children: (0, import_t.t)("Cancel")
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: "$2",
+            theme: "active",
+            onPress: handleSave,
+            "aria-label": (0, import_t.t)("Save math"),
+            children: (0, import_t.t)("Save")
+          })]
+        })]
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: 12,
+          fontFamily: "$mono",
+          maxWidth: 220,
+          numberOfLines: 1,
+          color: "$color11",
+          children: editor.getAttributes("inlineMath").latex || (0, import_t.t)("empty")
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+          onPress: handleEdit,
+          "aria-label": (0, import_t.t)("Edit math"),
+          tooltip: (0, import_t.t)("Edit math"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.PencilSimpleIcon, {
+            size: 14
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
+          onPress: handleRemove,
+          "aria-label": (0, import_t.t)("Remove math"),
+          tooltip: (0, import_t.t)("Remove math"),
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.TrashIcon, {
+            size: 14
+          })
+        })]
+      })
+    })
+  });
+}
+//# sourceMappingURL=MathBubble.native.js.map

package/dist/cjs/toolbar/MathBubble.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","MathBubble_exports","__export","MathBubble","module","exports","import_jsx_runtime","require","import_react","import_menus","import_theme","import_react2","import_tamagui","import_forms","import_lazyKatex","import_ToolbarButton","import_t","param","editor","knobProps","useResolvedKnobs","editing","setEditing","useState","latex","setLatex","error","setError","useEffect","trim","cancelled","renderKatexHtml","then","result","ok","handleEdit","useCallback","_editor_getAttributes_latex","getAttributes","handleSave","chain","focus","updateInlineMath","run","handleRemove","deleteSelection","jsx","BubbleMenu","className","shouldShow","param2","e","isActive","options","placement","offset","children","XStack","backgroundColor","borderWidth","borderColor","borderRadius","padding","gap","alignItems","elevation","jsxs","YStack","Input","size","placeholder","onChangeText","onSubmitEditing","t","autoFocus","minWidth","fontFamily","Text","color","fontSize","maxWidth","role","justifyContent","Button","onPress","theme"],"sources":["../../../src/toolbar/MathBubble.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/toolbar/MoreDropdown.cjs

@@ -25,80 +25,62 @@ __export(MoreDropdown_exports, {
   MoreDropdown: () => MoreDropdown
 });
 module.exports = __toCommonJS(MoreDropdown_exports);
-var import_react = require("react");
-var import_theme = require("@multiplatform.one/theme");
-var import_tamagui = require("tamagui");
-var import_styled = require("../styled.cjs");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_components = require("@multiplatform.one/components");
+var import_capabilities = require("../editor/capabilities.cjs");
 var import_ToolbarButton = require("./ToolbarButton.cjs");
 var import_icons = require("./icons.cjs");
 var import_shortcuts = require("./shortcuts.cjs");
+var import_t = require("../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const INLINE_ITEMS = [{
-  label: import_shortcuts.SHORTCUTS.subscript,
+  label: () => import_shortcuts.SHORTCUTS.subscript,
   command: "subscript",
   icon: import_icons.SubscriptIcon,
   isActive: s => s.isSubscript
 }, {
-  label: import_shortcuts.SHORTCUTS.superscript,
+  label: () => import_shortcuts.SHORTCUTS.superscript,
   command: "superscript",
   icon: import_icons.SuperscriptIcon,
   isActive: s => s.isSuperscript
 }];
 const ALIGN_ITEMS = [{
-  label: import_shortcuts.SHORTCUTS.alignLeft,
+  label: () => import_shortcuts.SHORTCUTS.alignLeft,
   command: "alignLeft",
   icon: import_icons.AlignLeftIcon,
   isActive: s => s.textAlign === "left"
 }, {
-  label: import_shortcuts.SHORTCUTS.alignCenter,
+  label: () => import_shortcuts.SHORTCUTS.alignCenter,
   command: "alignCenter",
   icon: import_icons.AlignCenterIcon,
   isActive: s => s.textAlign === "center"
 }, {
-  label: import_shortcuts.SHORTCUTS.alignRight,
+  label: () => import_shortcuts.SHORTCUTS.alignRight,
   command: "alignRight",
   icon: import_icons.AlignRightIcon,
   isActive: s => s.textAlign === "right"
 }, {
-  label: import_shortcuts.SHORTCUTS.alignJustify,
+  label: () => import_shortcuts.SHORTCUTS.alignJustify,
   command: "alignJustify",
   icon: import_icons.AlignJustifyIcon,
   isActive: s => s.textAlign === "justify"
 }];
 const BLOCK_ITEMS = [{
-  label: import_shortcuts.SHORTCUTS.horizontalRule,
+  label: () => import_shortcuts.SHORTCUTS.horizontalRule,
   command: "horizontalRule",
   icon: import_icons.HorizontalRuleIcon
 }, {
-  label: import_shortcuts.SHORTCUTS.clearFormatting,
+  label: () => import_shortcuts.SHORTCUTS.clearFormatting,
   command: "clearFormatting",
   icon: import_icons.ClearFormattingIcon
 }];
 function MoreIcon() {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 24 24",
-    fill: "currentColor",
-    stroke: "none",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
-      cx: "5",
-      cy: "12",
-      r: "2"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
-      cx: "12",
-      cy: "12",
-      r: "2"
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("circle", {
-      cx: "19",
-      cy: "12",
-      r: "2"
-    })]
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsThreeIcon, {
+    size: 16,
+    weight: "bold"
   });
 }
-function preventFocusTheft(e) {
-  e.preventDefault();
-}
 function ItemSection({
   items,
   state,
@@ -107,15 +89,14 @@ function ItemSection({
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
     children: items.map(item => {
       const Icon = item.icon;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_styled.DropdownMenuItemFrame, {
-        active: item.isActive?.(state),
-        onMouseDown: preventFocusTheft,
-        onPress: () => onSelect(item.command, item.payload),
-        "aria-label": item.label,
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-          fontSize: 13,
-          children: item.label
-        })]
+      const label = item.label();
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Item, {
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(Icon, {}),
+        closeOnSelect: false,
+        backgroundColor: item.isActive?.(state) ? "$color4" : void 0,
+        "aria-label": label,
+        onSelect: () => onSelect(item.command, item.payload),
+        children: label
       }, item.command);
     })
   });
@@ -123,79 +104,59 @@ function ItemSection({
 function MoreDropdown({
   editorRef,
   state,
+  capabilities = "full",
   disabled
 }) {
-  const {
-    knobProps
-  } = (0, import_theme.useResolvedKnobs)();
-  const [open, setOpen] = (0, import_react.useState)(false);
+  const [open, setOpen] = (0, import_react2.useState)(false);
+  const selectedRef = (0, import_react2.useRef)(false);
   const handleSelect = (command, payload) => {
     editorRef.current?.executeCommand(command, payload);
     if (command === "horizontalRule" || command === "clearFormatting") {
+      selectedRef.current = true;
       setOpen(false);
     }
   };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+  const inlineItems = INLINE_ITEMS.filter(item => (0, import_capabilities.isCommandInCapabilities)(item.command, capabilities));
+  const alignItems = ALIGN_ITEMS.filter(item => (0, import_capabilities.isCommandInCapabilities)(item.command, capabilities));
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
     open,
     onOpenChange: setOpen,
     placement: "bottom-end",
-    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
       asChild: true,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ToolbarButton.ToolbarButton, {
         disabled,
         onPress: () => setOpen(true),
-        "aria-label": "More formatting options",
-        tooltip: "More",
+        "aria-label": (0, import_t.t)("More formatting options"),
+        tooltip: (0, import_t.t)("More"),
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(MoreIcon, {})
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
-      ...knobProps.panelPadding,
-      backgroundColor: "$background",
-      borderWidth: 1,
-      borderColor: "$borderColor",
-      borderRadius: knobProps.borderRadius.borderRadius,
-      elevation: knobProps.elevation,
-      enterStyle: {
-        opacity: 0,
-        y: -5
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu.Content, {
+      minWidth: 200,
+      onCloseAutoFocus: event => {
+        event.preventDefault();
+        if (selectedRef.current) {
+          selectedRef.current = false;
+          editorRef.current?.focus();
+        }
       },
-      exitStyle: {
-        opacity: 0,
-        y: -5
-      },
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-        gap: "$1",
-        minWidth: 200,
+      children: [inlineItems.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ItemSection, {
-          items: INLINE_ITEMS,
+          items: inlineItems,
           state,
           onSelect: handleSelect
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-          paddingVertical: "$1",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styled.ToolbarSeparatorFrame, {
-            vertical: false,
-            width: "100%",
-            height: 1,
-            marginHorizontal: 0
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ItemSection, {
-          items: ALIGN_ITEMS,
-          state,
-          onSelect: handleSelect
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
-          paddingVertical: "$1",
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_styled.ToolbarSeparatorFrame, {
-            vertical: false,
-            width: "100%",
-            height: 1,
-            marginHorizontal: 0
-          })
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ItemSection, {
-          items: BLOCK_ITEMS,
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Separator, {})]
+      }), alignItems.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(ItemSection, {
+          items: alignItems,
           state,
           onSelect: handleSelect
-        })]
-      })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Separator, {})]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(ItemSection, {
+        items: BLOCK_ITEMS,
+        state,
+        onSelect: handleSelect
+      })]
     })]
   });
 }