@thangph2146/lexical-editor 0.0.6 → 0.0.7

package/dist/editor-x/editor.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React20 = require('react');
+var React21 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var selection = require('@lexical/selection');
@@ -74,7 +74,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React20__namespace = /*#__PURE__*/_interopNamespace(React20);
+var React21__namespace = /*#__PURE__*/_interopNamespace(React21);
 var Image__default = /*#__PURE__*/_interopDefault(Image);
 var dynamic__default = /*#__PURE__*/_interopDefault(dynamic);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
@@ -117,9 +117,9 @@ var init_tooltip = __esm({
     TooltipProvider = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
     Tooltip = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-tooltip-group", children });
     TooltipTrigger = ({ asChild, children, ...props }) => {
-      const child = asChild ? React20__namespace.Children.only(children) : children;
-      if (!React20__namespace.isValidElement(child)) return null;
-      return React20__namespace.cloneElement(child, {
+      const child = asChild ? React21__namespace.Children.only(children) : children;
+      if (!React21__namespace.isValidElement(child)) return null;
+      return React21__namespace.cloneElement(child, {
         ...props,
         className: cn(child.props.className, "editor-tooltip-trigger")
       });
@@ -154,16 +154,16 @@ var init_logger = __esm({
 var useIsomorphicLayoutEffect;
 var init_use_isomorphic_layout_effect = __esm({
   "src/hooks/use-isomorphic-layout-effect.ts"() {
-    useIsomorphicLayoutEffect = typeof window !== "undefined" ? React20.useLayoutEffect : React20.useEffect;
+    useIsomorphicLayoutEffect = typeof window !== "undefined" ? React21.useLayoutEffect : React21.useEffect;
   }
 });
 function useElementSize() {
-  const [node, setNode] = React20.useState(null);
-  const [size, setSize] = React20.useState({
+  const [node, setNode] = React21.useState(null);
+  const [size, setSize] = React21.useState({
     width: 0,
     height: 0
   });
-  const handleSize = React20.useCallback(() => {
+  const handleSize = React21.useCallback(() => {
     if (!node) return;
     setSize({
       width: node.offsetWidth || 0,
@@ -201,13 +201,13 @@ function EditorContainerProvider({
   return /* @__PURE__ */ jsxRuntime.jsx(EditorContainerContext.Provider, { value, children });
 }
 function useEditorContainer() {
-  return React20.useContext(EditorContainerContext);
+  return React21.useContext(EditorContainerContext);
 }
 var EditorContainerContext;
 var init_editor_container_context = __esm({
   "src/context/editor-container-context.tsx"() {
     "use client";
-    EditorContainerContext = React20.createContext(
+    EditorContainerContext = React21.createContext(
       null
     );
   }
@@ -307,7 +307,7 @@ function $search(selection$1) {
   return [true, word.reverse().join("")];
 }
 function useQuery() {
-  return React20.useCallback((searchText) => {
+  return React21.useCallback((searchText) => {
     const server = new AutocompleteServer();
     const response = server.query(searchText);
     return response;
@@ -321,7 +321,7 @@ function formatSuggestionText(suggestion) {
 function AutocompletePlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const query = useQuery();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     let autocompleteNodeKey = null;
     let lastMatch = null;
     let lastSuggestion = null;
@@ -2842,10 +2842,10 @@ function TweetComponent({
   onLoad,
   tweetID
 }) {
-  const containerRef = React20.useRef(null);
-  const previousTweetIDRef = React20.useRef("");
-  const [isTweetLoading, setIsTweetLoading] = React20.useState(false);
-  const createTweet = React20.useCallback(async () => {
+  const containerRef = React21.useRef(null);
+  const previousTweetIDRef = React21.useRef("");
+  const [isTweetLoading, setIsTweetLoading] = React21.useState(false);
+  const createTweet = React21.useCallback(async () => {
     try {
       await window.twttr.widgets.createTweet(tweetID, containerRef.current);
       setIsTweetLoading(false);
@@ -2859,7 +2859,7 @@ function TweetComponent({
       }
     }
   }, [onError, onLoad, tweetID]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (tweetID !== previousTweetIDRef.current) {
       setTimeout(() => {
         setIsTweetLoading(true);
@@ -2989,7 +2989,7 @@ var Button;
 var init_button = __esm({
   "src/ui/button.tsx"() {
     init_utils();
-    Button = React20__namespace.forwardRef(
+    Button = React21__namespace.forwardRef(
       ({ className, variant = "default", size = "default", type = "button", isLoading, disabled, children, ...props }, ref) => {
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
@@ -3130,22 +3130,22 @@ var init_typography = __esm({
         md: "editor-icon-md",
         lg: "editor-icon-lg"
       };
-      if (React20__namespace.isValidElement(children)) {
-        return React20__namespace.cloneElement(children, {
+      if (React21__namespace.isValidElement(children)) {
+        return React21__namespace.cloneElement(children, {
           className: cn(sizeMap[size] || sizeMap.medium, children.props.className, className)
         });
       }
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
     };
-    TypographyP = React20__namespace.forwardRef(
+    TypographyP = React21__namespace.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("editor-typography-p", className), ...props })
     );
     TypographyP.displayName = "TypographyP";
-    TypographyPSmall = React20__namespace.forwardRef(
+    TypographyPSmall = React21__namespace.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("editor-typography-p-small", className), ...props })
     );
     TypographyPSmall.displayName = "TypographyPSmall";
-    TypographySpanSmallMuted = React20__namespace.forwardRef(
+    TypographySpanSmallMuted = React21__namespace.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn("editor-typography-span-small-muted", className), ...props })
     );
     TypographySpanSmallMuted.displayName = "TypographySpanSmallMuted";
@@ -3174,12 +3174,12 @@ function MediaResizer({
   onDelete,
   onAlign
 }) {
-  const controlWrapperRef = React20.useRef(null);
-  const userSelect = React20.useRef({
+  const controlWrapperRef = React21.useRef(null);
+  const userSelect = React21.useRef({
     priority: "",
     value: "default"
   });
-  const positioningRef = React20.useRef({
+  const positioningRef = React21.useRef({
     currentHeight: 0,
     currentWidth: 0,
     direction: 0,
@@ -3197,7 +3197,7 @@ function MediaResizer({
   const hardWidthLimit = maxWidth ?? editorContainer?.maxWidth;
   const minWidth = 100;
   const minHeight = 100;
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
   }, [mediaRef, unlockBoundaries]);
   const setStartCursor = (direction) => {
     const ew = direction === Direction.east || direction === Direction.west;
@@ -3544,14 +3544,14 @@ function YouTubeComponent({
 }) {
   const isEditable = useLexicalEditable.useLexicalEditable();
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
-  const [isResizing, setIsResizing] = React20__namespace.useState(false);
-  const wrapperRef = React20__namespace.useRef(null);
-  const [wrapperElement, setWrapperElement] = React20__namespace.useState(null);
-  const buttonRef = React20__namespace.useRef(null);
-  const [containerWidth, setContainerWidth] = React20__namespace.useState(maxWidth);
+  const [isResizing, setIsResizing] = React21__namespace.useState(false);
+  const wrapperRef = React21__namespace.useRef(null);
+  const [wrapperElement, setWrapperElement] = React21__namespace.useState(null);
+  const buttonRef = React21__namespace.useRef(null);
+  const [containerWidth, setContainerWidth] = React21__namespace.useState(maxWidth);
   const editorContainer = useEditorContainer();
   const editorHardWidthLimit = editorContainer?.maxWidth;
-  const updateNode = React20__namespace.useCallback(
+  const updateNode = React21__namespace.useCallback(
     (updater) => {
       editor.update(() => {
         const node = lexical.$getNodeByKey(nodeKey);
@@ -3563,14 +3563,14 @@ function YouTubeComponent({
     [editor, nodeKey]
   );
   const aspectRatio = 16 / 9;
-  const clampToContainer = React20__namespace.useCallback(
+  const clampToContainer = React21__namespace.useCallback(
     (value) => {
       const limit = typeof editorHardWidthLimit === "number" && editorHardWidthLimit > 0 ? editorHardWidthLimit : containerWidth || value;
       return Math.min(value, limit);
     },
     [containerWidth, editorHardWidthLimit]
   );
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
     if (!wrapperElement) {
       return;
     }
@@ -3615,7 +3615,7 @@ function YouTubeComponent({
       return () => window.removeEventListener("resize", updateAvailableWidth);
     }
   }, [editor, editorHardWidthLimit, maxWidth, wrapperElement]);
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
     if (!containerWidth) {
       return;
     }
@@ -3642,11 +3642,11 @@ function YouTubeComponent({
   const disablePlaybackInteractions = isEditable;
   const iframeWidth = safeRenderedWidth;
   const iframeHeight = Math.round(iframeWidth / aspectRatio);
-  const handleWrapperRef = React20__namespace.useCallback((node) => {
+  const handleWrapperRef = React21__namespace.useCallback((node) => {
     wrapperRef.current = node;
     setWrapperElement(node);
   }, []);
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
     if (!isEditable) {
       return;
     }
@@ -3677,7 +3677,7 @@ function YouTubeComponent({
       )
     );
   }, [clearSelection, editor, isEditable, isResizing, isSelected, setSelected]);
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
     if (!containerWidth || typeof width !== "number" || fullWidth || width <= containerWidth) {
       return;
     }
@@ -3977,15 +3977,15 @@ function Dialog({ open = false, onOpenChange = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: { open, onOpenChange }, children });
 }
 function DialogTrigger({ asChild, children, className, ...props }) {
-  const context = React20__namespace.useContext(DialogContext);
+  const context = React21__namespace.useContext(DialogContext);
   const handleClick = (e) => {
     context?.onOpenChange(true);
-    if (React20__namespace.isValidElement(children)) {
+    if (React21__namespace.isValidElement(children)) {
       children.props.onClick?.(e);
     }
   };
-  if (asChild && React20__namespace.isValidElement(children)) {
-    return React20__namespace.cloneElement(children, {
+  if (asChild && React21__namespace.isValidElement(children)) {
+    return React21__namespace.cloneElement(children, {
       onClick: handleClick,
       ...props
     });
@@ -3993,15 +3993,15 @@ function DialogTrigger({ asChild, children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className, ...props, children });
 }
 function DialogClose({ asChild, children, className, ...props }) {
-  const context = React20__namespace.useContext(DialogContext);
+  const context = React21__namespace.useContext(DialogContext);
   const handleClick = (e) => {
     context?.onOpenChange(false);
-    if (React20__namespace.isValidElement(children)) {
+    if (React21__namespace.isValidElement(children)) {
       children.props.onClick?.(e);
     }
   };
-  if (asChild && React20__namespace.isValidElement(children)) {
-    return React20__namespace.cloneElement(children, {
+  if (asChild && React21__namespace.isValidElement(children)) {
+    return React21__namespace.cloneElement(children, {
       onClick: handleClick,
       ...props
     });
@@ -4009,9 +4009,9 @@ function DialogClose({ asChild, children, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className, ...props, children });
 }
 function DialogContent({ children, className, disableOutsideClick, ...props }) {
-  const context = React20__namespace.useContext(DialogContext);
-  const [mounted, setMounted] = React20__namespace.useState(false);
-  React20__namespace.useEffect(() => {
+  const context = React21__namespace.useContext(DialogContext);
+  const [mounted, setMounted] = React21__namespace.useState(false);
+  React21__namespace.useEffect(() => {
     setMounted(true);
     return () => setMounted(false);
   }, []);
@@ -4070,7 +4070,7 @@ var DialogContext;
 var init_dialog = __esm({
   "src/ui/dialog.tsx"() {
     init_utils();
-    DialogContext = React20__namespace.createContext(null);
+    DialogContext = React21__namespace.createContext(null);
   }
 });
 
@@ -4085,7 +4085,7 @@ var Input;
 var init_input = __esm({
   "src/ui/input.tsx"() {
     init_utils();
-    Input = React20__namespace.forwardRef(
+    Input = React21__namespace.forwardRef(
       ({ className, type, ...props }, ref) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -4105,7 +4105,7 @@ var Label;
 var init_label = __esm({
   "src/ui/label.tsx"() {
     init_utils();
-    Label = React20__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Label = React21__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
       "label",
       {
         ref,
@@ -4120,6 +4120,37 @@ var init_label = __esm({
     Label.displayName = "Label";
   }
 });
+var Flex;
+var init_flex = __esm({
+  "src/ui/flex.tsx"() {
+    init_utils();
+    Flex = React21__namespace.forwardRef(
+      ({ className, align, justify, direction, wrap, gap, style, ...props }, ref) => {
+        const isStandardGap = typeof gap === "number" && [0.5, 1, 1.5, 2, 3, 4, 5].includes(gap);
+        const gapClass = isStandardGap ? `editor-gap-${gap.toString().replace(".", "-")}` : void 0;
+        const gapStyle = !isStandardGap && typeof gap === "number" ? { gap: `${gap * 0.25}rem` } : !isStandardGap && typeof gap !== "undefined" ? { gap } : void 0;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            className: cn(
+              "editor-flex",
+              align && `editor-items-${align}`,
+              justify && `editor-justify-${justify}`,
+              direction && `editor-flex-${direction}`,
+              wrap && `editor-flex-${wrap}`,
+              gapClass,
+              className
+            ),
+            style: { ...gapStyle, ...style },
+            ...props
+          }
+        );
+      }
+    );
+    Flex.displayName = "Flex";
+  }
+});
 function Tabs({
   defaultValue,
   value: controlledValue,
@@ -4128,7 +4159,7 @@ function Tabs({
   className,
   ...props
 }) {
-  const [uncontrolledValue, setUncontrolledValue] = React20__namespace.useState(defaultValue || "");
+  const [uncontrolledValue, setUncontrolledValue] = React21__namespace.useState(defaultValue || "");
   const value = controlledValue ?? uncontrolledValue;
   const setValue = onValueChange ?? setUncontrolledValue;
   return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value, onValueChange: setValue }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), ...props, children }) });
@@ -4147,7 +4178,7 @@ function TabsList({ className, children, ...props }) {
   );
 }
 function TabsTrigger({ value, className, children, ...props }) {
-  const context = React20__namespace.useContext(TabsContext);
+  const context = React21__namespace.useContext(TabsContext);
   const isSelected = context?.value === value;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -4165,7 +4196,7 @@ function TabsTrigger({ value, className, children, ...props }) {
   );
 }
 function TabsContent({ value, className, children, ...props }) {
-  const context = React20__namespace.useContext(TabsContext);
+  const context = React21__namespace.useContext(TabsContext);
   const isSelected = context?.value === value;
   if (!isSelected) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4184,11 +4215,11 @@ var TabsContext;
 var init_tabs = __esm({
   "src/ui/tabs.tsx"() {
     init_utils();
-    TabsContext = React20__namespace.createContext(null);
+    TabsContext = React21__namespace.createContext(null);
   }
 });
 function useEditorUploads() {
-  const context = React20.useContext(EditorUploadsContext);
+  const context = React21.useContext(EditorUploadsContext);
   if (context === void 0) {
     return {
       isLoading: false,
@@ -4201,7 +4232,7 @@ var EditorUploadsContext;
 var init_uploads_context = __esm({
   "src/context/uploads-context.tsx"() {
     "use client";
-    EditorUploadsContext = React20.createContext(void 0);
+    EditorUploadsContext = React21.createContext(void 0);
   }
 });
 function Collapsible({
@@ -4211,27 +4242,27 @@ function Collapsible({
   className,
   ...props
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React20__namespace.useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React21__namespace.useState(false);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = onOpenChange ?? setUncontrolledOpen;
   return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.Provider, { value: { open, setOpen }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("editor-collapsible", className), "data-state": open ? "open" : "closed", ...props, children }) });
 }
 function CollapsibleTrigger({ children, asChild, ...props }) {
-  const context = React20__namespace.useContext(CollapsibleContext);
+  const context = React21__namespace.useContext(CollapsibleContext);
   if (!context) throw new Error("CollapsibleTrigger must be used within Collapsible");
   const handleClick = (e) => {
     context.setOpen(!context.open);
-    if (React20__namespace.isValidElement(children)) {
+    if (React21__namespace.isValidElement(children)) {
       children.props.onClick?.(e);
     }
   };
-  if (asChild && React20__namespace.isValidElement(children)) {
-    return React20__namespace.cloneElement(children, { onClick: handleClick, ...props });
+  if (asChild && React21__namespace.isValidElement(children)) {
+    return React21__namespace.cloneElement(children, { onClick: handleClick, ...props });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleClick, ...props, children });
 }
 function CollapsibleContent({ children, className, ...props }) {
-  const context = React20__namespace.useContext(CollapsibleContext);
+  const context = React21__namespace.useContext(CollapsibleContext);
   if (!context) throw new Error("CollapsibleContent must be used within Collapsible");
   if (!context.open) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("editor-overflow-hidden", className), ...props, children });
@@ -4240,14 +4271,14 @@ var CollapsibleContext;
 var init_collapsible = __esm({
   "src/ui/collapsible.tsx"() {
     init_utils();
-    CollapsibleContext = React20__namespace.createContext(null);
+    CollapsibleContext = React21__namespace.createContext(null);
   }
 });
 function InsertImageUriDialogBody({
   onClick
 }) {
-  const [src, setSrc] = React20.useState("");
-  const [altText, setAltText] = React20.useState("");
+  const [src, setSrc] = React21.useState("");
+  const [altText, setAltText] = React21.useState("");
   const isDisabled = src === "";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-form-grid", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-form-item", children: [
@@ -4291,8 +4322,8 @@ function InsertImageUriDialogBody({
 function InsertImageUploadedDialogBody({
   onClick
 }) {
-  const [src, setSrc] = React20.useState("");
-  const [altText, setAltText] = React20.useState("");
+  const [src, setSrc] = React21.useState("");
+  const [altText, setAltText] = React21.useState("");
   const isDisabled = src === "";
   const loadImage = (files) => {
     const reader = new FileReader();
@@ -4355,7 +4386,7 @@ function ImagePickerFolderTree({
 }) {
   const hasContent = folder.images.length > 0 || folder.subfolders.length > 0;
   const isOpen = openFolders.has(folder.path);
-  const handleOpenChange = React20__namespace.useCallback(
+  const handleOpenChange = React21__namespace.useCallback(
     (open) => {
       if (open) {
         setOpenFolders((prev) => {
@@ -4430,16 +4461,16 @@ function ImagePickerFolderTree({
 function InsertImageUploadsDialogBody({
   onClick
 }) {
-  const [selectedImage, setSelectedImage] = React20.useState(null);
-  const [altText, setAltText] = React20.useState("");
-  const [openFolders, setOpenFolders] = React20.useState(/* @__PURE__ */ new Set());
+  const [selectedImage, setSelectedImage] = React21.useState(null);
+  const [altText, setAltText] = React21.useState("");
+  const [openFolders, setOpenFolders] = React21.useState(/* @__PURE__ */ new Set());
   const { folderTree, isLoading } = useEditorUploads();
   const isDisabled = !selectedImage;
-  const handleImageSelect = React20__namespace.useCallback((imageUrl, originalName) => {
+  const handleImageSelect = React21__namespace.useCallback((imageUrl, originalName) => {
     setSelectedImage(imageUrl);
     setAltText((prev) => prev || originalName);
   }, []);
-  const handleConfirm = React20__namespace.useCallback(() => {
+  const handleConfirm = React21__namespace.useCallback(() => {
     if (selectedImage) {
       let imageUrl = selectedImage;
       if (imageUrl.startsWith("/api/uploads")) {
@@ -4450,7 +4481,7 @@ function InsertImageUploadsDialogBody({
       onClick({ altText: altText || "", src: imageUrl });
     }
   }, [selectedImage, altText, onClick]);
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
     const handleDoubleClickConfirm = () => {
       setTimeout(() => {
         handleConfirm();
@@ -4461,7 +4492,7 @@ function InsertImageUploadsDialogBody({
       document.removeEventListener("confirm-image-insert", handleDoubleClickConfirm);
     };
   }, [handleConfirm]);
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
     if (folderTree && folderTree.subfolders.length > 0) {
       setOpenFolders(new Set(folderTree.subfolders.map((f) => f.path)));
     }
@@ -4469,7 +4500,7 @@ function InsertImageUploadsDialogBody({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-form-grid", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-form-item", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Label, { children: "Ch\u1ECDn h\xECnh \u1EA3nh t\u1EEB th\u01B0 vi\u1EC7n" }),
-      isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-flex-center-justify-py-8", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "editor-loader" }) }) : !folderTree || folderTree.subfolders.length === 0 && folderTree.images.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-empty-state", children: /* @__PURE__ */ jsxRuntime.jsx(TypographySpanSmallMuted, { children: "Ch\u01B0a c\xF3 h\xECnh \u1EA3nh n\xE0o \u0111\u01B0\u1EE3c upload" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-scroll-area editor-flex editor-flex-col editor-gap-1", children: [
+      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(Flex, { align: "center", justify: "center", className: "editor-py-8", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "editor-loader" }) }) : !folderTree || folderTree.subfolders.length === 0 && folderTree.images.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-empty-state", children: /* @__PURE__ */ jsxRuntime.jsx(TypographySpanSmallMuted, { children: "Ch\u01B0a c\xF3 h\xECnh \u1EA3nh n\xE0o \u0111\u01B0\u1EE3c upload" }) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-scroll-area editor-flex editor-flex-col editor-gap-1", children: [
         folderTree.images.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-mb-3", children: [
           /* @__PURE__ */ jsxRuntime.jsx(TypographySpanSmallMuted, { className: "editor-mb-2 editor-px-1", children: "Root" }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-image-grid editor-gap-2", children: folderTree.images.map((image) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -4548,8 +4579,8 @@ function InsertImageDialog({
   onInsert,
   activeTab = "uploads"
 }) {
-  const hasModifier = React20.useRef(false);
-  React20.useEffect(() => {
+  const hasModifier = React21.useRef(false);
+  React21.useEffect(() => {
     hasModifier.current = false;
     const handler = (e) => {
       hasModifier.current = e.altKey;
@@ -4582,7 +4613,7 @@ function ImagesPlugin({
   captionsEnabled
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!editor.hasNodes([ImageNode])) {
       throw new Error("ImagesPlugin: ImageNode not registered on editor");
     }
@@ -4737,6 +4768,7 @@ var init_images_plugin = __esm({
     init_dialog();
     init_input();
     init_label();
+    init_flex();
     init_tabs();
     init_uploads_context();
     init_collapsible();
@@ -4749,8 +4781,8 @@ var PriorityImageContext, usePriorityImage;
 var init_priority_image_context = __esm({
   "src/context/priority-image-context.tsx"() {
     "use client";
-    PriorityImageContext = React20.createContext(null);
-    usePriorityImage = () => React20.useContext(PriorityImageContext);
+    PriorityImageContext = React21.createContext(null);
+    usePriorityImage = () => React21.useContext(PriorityImageContext);
   }
 });
 function useResponsiveImageDimensions({
@@ -4763,11 +4795,11 @@ function useResponsiveImageDimensions({
   maxWidthLimit,
   src
 }) {
-  const [dimensions, setDimensions] = React20.useState({
+  const [dimensions, setDimensions] = React21.useState({
     width,
     height
   });
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (isResizing) {
       return;
     }
@@ -4919,11 +4951,11 @@ function LazyImage({
   const widthAttr = getNumericValue(width);
   const heightAttr = getNumericValue(height);
   const cachedDims = imageCache.get(src);
-  const [actualDimensions, setActualDimensions] = React20.useState(
+  const [actualDimensions, setActualDimensions] = React21.useState(
     cachedDims || DEFAULT_DIMENSIONS
   );
-  const wrapperRef = React20.useRef(null);
-  React20.useEffect(() => {
+  const wrapperRef = React21.useRef(null);
+  React21.useEffect(() => {
     if (wrapperRef.current) {
       const imgElement = wrapperRef.current.querySelector("img");
       if (imgElement) {
@@ -5133,11 +5165,11 @@ function useImageCaptionControls({
   nodeKey,
   showCaption
 }) {
-  const [hasCaptionContent, setHasCaptionContent] = React20.useState(false);
-  const [localShowCaption, setLocalShowCaption] = React20.useState(showCaption);
-  const isUpdatingCaptionRef = React20.useRef(false);
-  const lastShowCaptionRef = React20.useRef(showCaption);
-  React20.useEffect(() => {
+  const [hasCaptionContent, setHasCaptionContent] = React21.useState(false);
+  const [localShowCaption, setLocalShowCaption] = React21.useState(showCaption);
+  const isUpdatingCaptionRef = React21.useRef(false);
+  const lastShowCaptionRef = React21.useRef(showCaption);
+  React21.useEffect(() => {
     let timeout = null;
     timeout = setTimeout(() => {
       if (!showCaption) {
@@ -5155,7 +5187,7 @@ function useImageCaptionControls({
       }
     };
   }, [showCaption]);
-  const setShowCaption = React20.useCallback(
+  const setShowCaption = React21.useCallback(
     (show) => {
       isUpdatingCaptionRef.current = true;
       lastShowCaptionRef.current = show;
@@ -5178,7 +5210,7 @@ function useImageCaptionControls({
     },
     [caption, editor, nodeKey]
   );
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const computeHasContent = () => {
       const state = caption.getEditorState();
       const hasContent = state.read(() => {
@@ -5227,10 +5259,10 @@ function useImageNodeInteractions({
   nodeKey,
   showCaption
 }) {
-  const [selection, setSelection] = React20.useState(null);
+  const [selection, setSelection] = React21.useState(null);
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
-  const activeEditorRef = React20.useRef(null);
-  const $onDelete = React20.useCallback(
+  const activeEditorRef = React21.useRef(null);
+  const $onDelete = React21.useCallback(
     (payload) => {
       const deleteSelection = lexical.$getSelection();
       if (isSelected && lexical.$isNodeSelection(deleteSelection)) {
@@ -5249,7 +5281,7 @@ function useImageNodeInteractions({
     },
     [editor, isSelected]
   );
-  const $onEnter = React20.useCallback(
+  const $onEnter = React21.useCallback(
     (event) => {
       const latestSelection = lexical.$getSelection();
       const buttonElem = buttonRef.current;
@@ -5269,7 +5301,7 @@ function useImageNodeInteractions({
     },
     [buttonRef, caption, isSelected, showCaption]
   );
-  const $onEscape = React20.useCallback(
+  const $onEscape = React21.useCallback(
     (event) => {
       if (activeEditorRef.current === caption || buttonRef.current === event.target) {
         lexical.$setSelection(null);
@@ -5286,7 +5318,7 @@ function useImageNodeInteractions({
     },
     [buttonRef, caption, editor, setSelected]
   );
-  const onClick = React20.useCallback(
+  const onClick = React21.useCallback(
     (payload) => {
       const event = payload;
       if (isResizing) {
@@ -5305,7 +5337,7 @@ function useImageNodeInteractions({
     },
     [clearSelection, imageRef, isResizing, isSelected, setSelected]
   );
-  const onRightClick = React20.useCallback(
+  const onRightClick = React21.useCallback(
     (event) => {
       editor.getEditorState().read(() => {
         const latestSelection = lexical.$getSelection();
@@ -5320,7 +5352,7 @@ function useImageNodeInteractions({
     },
     [editor]
   );
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     let isMounted = true;
     const rootElement = editor.getRootElement();
     const unregister = utils.mergeRegister(
@@ -5424,13 +5456,13 @@ function ImageComponent({
   src,
   width
 }) {
-  const imageRef = React20.useRef(null);
-  const buttonRef = React20.useRef(null);
-  const [isResizing, setIsResizing] = React20.useState(false);
-  const resizeTimeoutRef = React20.useRef(null);
+  const imageRef = React21.useRef(null);
+  const buttonRef = React21.useRef(null);
+  const [isResizing, setIsResizing] = React21.useState(false);
+  const resizeTimeoutRef = React21.useRef(null);
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [isLoadError, setIsLoadError] = React20.useState(false);
-  const [isReplaceDialogOpen, setIsReplaceDialogOpen] = React20.useState(false);
+  const [isLoadError, setIsLoadError] = React21.useState(false);
+  const [isReplaceDialogOpen, setIsReplaceDialogOpen] = React21.useState(false);
   const isEditable = useLexicalEditable.useLexicalEditable();
   const editorContainer = useEditorContainer();
   const prioritySrc = usePriorityImage();
@@ -5464,21 +5496,21 @@ function ImageComponent({
     nodeKey,
     showCaption
   });
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!isEditable && isReplaceDialogOpen) {
       setTimeout(() => {
         setIsReplaceDialogOpen(false);
       }, 0);
     }
   }, [isEditable, isReplaceDialogOpen]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return () => {
       if (resizeTimeoutRef.current) {
         clearTimeout(resizeTimeoutRef.current);
       }
     };
   }, []);
-  const onResizeEnd = React20.useCallback(
+  const onResizeEnd = React21.useCallback(
     (nextWidth, nextHeight) => {
       if (resizeTimeoutRef.current) {
         clearTimeout(resizeTimeoutRef.current);
@@ -5495,7 +5527,7 @@ function ImageComponent({
     },
     [editor, nodeKey]
   );
-  const onResizeStart = React20.useCallback(() => {
+  const onResizeStart = React21.useCallback(() => {
     setIsResizing(true);
     editor.update(() => {
       const node = lexical.$getNodeByKey(nodeKey);
@@ -5504,7 +5536,7 @@ function ImageComponent({
       }
     });
   }, [editor, nodeKey]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const element = editor.getElementByKey(nodeKey);
     if (element) {
       if (fullWidth) {
@@ -5516,7 +5548,7 @@ function ImageComponent({
       }
     }
   }, [editor, nodeKey, fullWidth]);
-  const onSetFullWidth = React20.useCallback(() => {
+  const onSetFullWidth = React21.useCallback(() => {
     editor.update(() => {
       const node = lexical.$getNodeByKey(nodeKey);
       if ($isImageNode(node)) {
@@ -5524,13 +5556,13 @@ function ImageComponent({
       }
     });
   }, [editor, fullWidth, nodeKey]);
-  const onAlign = React20.useCallback(
+  const onAlign = React21.useCallback(
     (format) => {
       editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, format);
     },
     [editor]
   );
-  const handleReplaceImage = React20.useCallback(
+  const handleReplaceImage = React21.useCallback(
     (payload) => {
       if (!payload?.src) {
         return;
@@ -5548,7 +5580,7 @@ function ImageComponent({
     },
     [editor, nodeKey]
   );
-  const onDelete = React20.useCallback(() => {
+  const onDelete = React21.useCallback(() => {
     editor.update(() => {
       const node = lexical.$getNodeByKey(nodeKey);
       if ($isImageNode(node)) {
@@ -5570,7 +5602,7 @@ function ImageComponent({
     isEditable ? "editable" : "readonly"
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
-    React20.Suspense,
+    React21.Suspense,
     {
       fallback: /* @__PURE__ */ jsxRuntime.jsx("div", { draggable, children: /* @__PURE__ */ jsxRuntime.jsx(
         ImagePlaceholder,
@@ -5721,7 +5753,7 @@ function $isImageNode(node) {
 var ImageComponent2, WHITESPACE_REGEX, ImageNode;
 var init_image_node = __esm({
   "src/nodes/image-node.tsx"() {
-    ImageComponent2 = React20__namespace.lazy(() => Promise.resolve().then(() => (init_image_component(), image_component_exports)));
+    ImageComponent2 = React21__namespace.lazy(() => Promise.resolve().then(() => (init_image_component(), image_component_exports)));
     WHITESPACE_REGEX = /[\u200B\u00A0\s]+/g;
     ImageNode = class _ImageNode extends lexical.DecoratorNode {
       __src;
@@ -5864,7 +5896,7 @@ var init_image_node = __esm({
         return this.__altText;
       }
       decorate() {
-        return /* @__PURE__ */ jsxRuntime.jsx(React20.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        return /* @__PURE__ */ jsxRuntime.jsx(React21.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
           ImageComponent2,
           {
             src: this.__src,
@@ -6384,7 +6416,7 @@ var init_actions_plugin = __esm({
 });
 function AlignPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const config = editor._config;
     if (config.theme && !config.theme.textAlign) {
       config.theme.textAlign = {
@@ -6483,7 +6515,7 @@ var Separator;
 var init_separator = __esm({
   "src/ui/separator.tsx"() {
     init_utils();
-    Separator = React20__namespace.forwardRef(({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Separator = React21__namespace.forwardRef(({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
@@ -6500,34 +6532,6 @@ var init_separator = __esm({
     Separator.displayName = "Separator";
   }
 });
-var Flex;
-var init_flex = __esm({
-  "src/ui/flex.tsx"() {
-    init_utils();
-    Flex = React20__namespace.forwardRef(
-      ({ className, align, justify, direction, wrap, gap, style, ...props }, ref) => {
-        const gapStyle = typeof gap === "number" ? { gap: `${gap * 0.25}rem` } : typeof gap !== "undefined" ? { gap } : void 0;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref,
-            className: cn(
-              "editor-flex",
-              align && `editor-items-${align}`,
-              justify && `editor-justify-${justify}`,
-              direction && `editor-flex-${direction}`,
-              wrap && `editor-flex-${wrap}`,
-              className
-            ),
-            style: { ...gapStyle, ...style },
-            ...props
-          }
-        );
-      }
-    );
-    Flex.displayName = "Flex";
-  }
-});
 function textEncoder() {
   if (window.TextEncoder === void 0) {
     return null;
@@ -6549,14 +6553,14 @@ function CounterCharacterPlugin({
   charset = "UTF-16"
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [stats, setStats] = React20.useState(() => {
+  const [stats, setStats] = React21.useState(() => {
     const initialText = editor.getEditorState().read(text.$rootTextContent);
     return {
       characters: strlen(initialText, charset),
       words: countWords(initialText)
     };
   });
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return editor.registerTextContentListener((currentText) => {
       setStats({
         characters: strlen(currentText, charset),
@@ -6598,7 +6602,7 @@ var init_counter_character_plugin = __esm({
 });
 function EditModeTogglePlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [isEditable, setIsEditable] = React20.useState(() => editor.isEditable());
+  const [isEditable, setIsEditable] = React21.useState(() => editor.isEditable());
   return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       Button,
@@ -6677,7 +6681,7 @@ function MarkdownTogglePlugin({
   transformers
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const handleMarkdownToggle = React20.useCallback(() => {
+  const handleMarkdownToggle = React21.useCallback(() => {
     editor.update(() => {
       const root = lexical.$getRoot();
       const firstChild = root.getFirstChild();
@@ -6796,7 +6800,7 @@ function ShareContentPlugin() {
     window.history.replaceState({}, "", newUrl);
     await window.navigator.clipboard.writeText(newUrl);
   }
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     docFromHash(window.location.hash).then((doc) => {
       if (doc && doc.source === "editor") {
         editor.setEditorState(file.editorStateFromSerializedDocument(editor, doc));
@@ -6837,8 +6841,8 @@ var init_share_content_plugin = __esm({
   }
 });
 function useReport() {
-  const timer = React20.useRef(null);
-  const cleanup = React20.useCallback(() => {
+  const timer = React21.useRef(null);
+  const cleanup = React21.useCallback(() => {
     if (timer.current !== null) {
       clearTimeout(timer.current);
       timer.current = null;
@@ -6847,10 +6851,10 @@ function useReport() {
       document.body.removeChild(getElement());
     }
   }, []);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return cleanup;
   }, [cleanup]);
-  return React20.useCallback(
+  return React21.useCallback(
     (content) => {
       logger.debug("Report content", { content });
       const element = getElement();
@@ -6891,13 +6895,13 @@ var init_use_report = __esm({
 });
 function SpeechToTextPluginImpl() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [isEnabled, setIsEnabled] = React20.useState(false);
-  const [isSpeechToText, setIsSpeechToText] = React20.useState(false);
+  const [isEnabled, setIsEnabled] = React21.useState(false);
+  const [isSpeechToText, setIsSpeechToText] = React21.useState(false);
   const SpeechRecognition = CAN_USE_DOM && // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (window.SpeechRecognition || window.webkitSpeechRecognition);
-  const recognition = React20.useRef(null);
+  const recognition = React21.useRef(null);
   const report = useReport();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (isEnabled && recognition.current === null) {
       recognition.current = new SpeechRecognition();
       recognition.current.continuous = true;
@@ -6943,7 +6947,7 @@ function SpeechToTextPluginImpl() {
       }
     };
   }, [SpeechRecognition, editor, isEnabled, report]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return editor.registerCommand(
       SPEECH_TO_TEXT_COMMAND,
       (_isEnabled) => {
@@ -7003,7 +7007,7 @@ var ScrollArea, ScrollBar;
 var init_scroll_area = __esm({
   "src/ui/scroll-area.tsx"() {
     init_utils();
-    ScrollArea = React20__namespace.forwardRef(
+    ScrollArea = React21__namespace.forwardRef(
       ({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -7106,12 +7110,12 @@ function debounce(fn, ms, options) {
   return debounced;
 }
 function useDebounce(fn, ms, maxWait) {
-  const funcRef = React20.useRef(fn);
-  const debouncedRef = React20.useRef(null);
-  React20.useEffect(() => {
+  const funcRef = React21.useRef(fn);
+  const debouncedRef = React21.useRef(null);
+  React21.useEffect(() => {
     funcRef.current = fn;
   }, [fn]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const debounced = debounce(
       ((...args) => {
         funcRef.current(...args);
@@ -7125,7 +7129,7 @@ function useDebounce(fn, ms, maxWait) {
       debouncedRef.current = null;
     };
   }, [ms, maxWait]);
-  return React20.useMemo(() => {
+  return React21.useMemo(() => {
     const run = (...args) => {
       debouncedRef.current?.(...args);
     };
@@ -7140,7 +7144,7 @@ var init_use_debounce = __esm({
   }
 });
 function CopyButton({ editor, getCodeDOMNode }) {
-  const [isCopyCompleted, setCopyCompleted] = React20.useState(false);
+  const [isCopyCompleted, setCopyCompleted] = React21.useState(false);
   const removeSuccessIcon = useDebounce(() => {
     setCopyCompleted(false);
   }, 1e3);
@@ -7185,9 +7189,9 @@ var init_code_button = __esm({
   }
 });
 function Select({ value, onValueChange, children, disabled }) {
-  const [open, setOpen] = React20__namespace.useState(false);
-  const triggerRef = React20__namespace.useRef(null);
-  const contextValue = React20__namespace.useMemo(() => ({
+  const [open, setOpen] = React21__namespace.useState(false);
+  const triggerRef = React21__namespace.useRef(null);
+  const contextValue = React21__namespace.useMemo(() => ({
     value,
     onValueChange,
     open,
@@ -7198,7 +7202,7 @@ function Select({ value, onValueChange, children, disabled }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children });
 }
 function SelectTrigger({ className, children, size = "default", ...props }) {
-  const context = React20__namespace.useContext(SelectContext);
+  const context = React21__namespace.useContext(SelectContext);
   if (!context) throw new Error("SelectTrigger must be used within Select");
   const { triggerRef, disabled, open, setOpen } = context;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7222,15 +7226,15 @@ function SelectTrigger({ className, children, size = "default", ...props }) {
   );
 }
 function SelectValue({ placeholder }) {
-  const context = React20__namespace.useContext(SelectContext);
+  const context = React21__namespace.useContext(SelectContext);
   if (!context) throw new Error("SelectValue must be used within Select");
   return /* @__PURE__ */ jsxRuntime.jsx("span", { children: context.value || placeholder });
 }
 function SelectContent({ className, children, ...props }) {
-  const context = React20__namespace.useContext(SelectContext);
-  const [position, setPosition] = React20__namespace.useState({ top: 0, left: 0, width: 0 });
-  const contentRef = React20__namespace.useRef(null);
-  React20__namespace.useEffect(() => {
+  const context = React21__namespace.useContext(SelectContext);
+  const [position, setPosition] = React21__namespace.useState({ top: 0, left: 0, width: 0 });
+  const contentRef = React21__namespace.useRef(null);
+  React21__namespace.useEffect(() => {
     if (context?.open && context.triggerRef.current) {
       const rect = context.triggerRef.current.getBoundingClientRect();
       setPosition({
@@ -7272,7 +7276,7 @@ function SelectContent({ className, children, ...props }) {
   );
 }
 function SelectItem({ value, children, className, ...props }) {
-  const context = React20__namespace.useContext(SelectContext);
+  const context = React21__namespace.useContext(SelectContext);
   if (!context) throw new Error("SelectItem must be used within Select");
   const isSelected = context.value === value;
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -7302,7 +7306,7 @@ var SelectContext;
 var init_select = __esm({
   "src/ui/select.tsx"() {
     init_utils();
-    SelectContext = React20__namespace.createContext(null);
+    SelectContext = React21__namespace.createContext(null);
   }
 });
 function getCodeLanguageOptions() {
@@ -7318,16 +7322,16 @@ function CodeActionMenuContainer({
   anchorElem
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [lang, setLang] = React20.useState("");
-  const [nodeKey, setNodeKey] = React20.useState(null);
-  const [isShown, setShown] = React20.useState(false);
-  const [shouldListenMouseMove, setShouldListenMouseMove] = React20.useState(false);
-  const [position, setPosition] = React20.useState({
+  const [lang, setLang] = React21.useState("");
+  const [nodeKey, setNodeKey] = React21.useState(null);
+  const [isShown, setShown] = React21.useState(false);
+  const [shouldListenMouseMove, setShouldListenMouseMove] = React21.useState(false);
+  const [position, setPosition] = React21.useState({
     right: "0",
     top: "0"
   });
-  const codeSetRef = React20.useRef(/* @__PURE__ */ new Set());
-  const codeDOMNodeRef = React20.useRef(null);
+  const codeSetRef = React21.useRef(/* @__PURE__ */ new Set());
+  const codeDOMNodeRef = React21.useRef(null);
   function getCodeDOMNode() {
     return codeDOMNodeRef.current;
   }
@@ -7368,7 +7372,7 @@ function CodeActionMenuContainer({
     50,
     1e3
   );
-  const onCodeLanguageSelect = React20.useCallback(
+  const onCodeLanguageSelect = React21.useCallback(
     (value) => {
       editor.update(() => {
         if (nodeKey !== null) {
@@ -7382,7 +7386,7 @@ function CodeActionMenuContainer({
     },
     [editor, nodeKey]
   );
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!shouldListenMouseMove) {
       return;
     }
@@ -7393,7 +7397,7 @@ function CodeActionMenuContainer({
       document.removeEventListener("mousemove", debouncedOnMouseMove);
     };
   }, [shouldListenMouseMove, debouncedOnMouseMove]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return editor.registerMutationListener(
       code.CodeNode,
       (mutations) => {
@@ -7482,7 +7486,7 @@ var init_code_action_menu_plugin = __esm({
 });
 function CodeHighlightPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return code.registerCodeHighlighting(editor);
   }, [editor]);
   return null;
@@ -7493,11 +7497,11 @@ var init_code_highlight_plugin = __esm({
   }
 });
 function useEditorModal() {
-  const [modalContent, setModalContent] = React20.useState(null);
-  const onClose = React20.useCallback(() => {
+  const [modalContent, setModalContent] = React21.useState(null);
+  const onClose = React21.useCallback(() => {
     setModalContent(null);
   }, []);
-  const modal = React20.useMemo(() => {
+  const modal = React21.useMemo(() => {
     if (modalContent === null) {
       return null;
     }
@@ -7510,7 +7514,7 @@ function useEditorModal() {
       content
     ] }) });
   }, [modalContent, onClose]);
-  const showModal = React20.useCallback(
+  const showModal = React21.useCallback(
     (title, getContent, closeOnClickOutside = false) => {
       setModalContent({
         closeOnClickOutside,
@@ -7531,7 +7535,7 @@ var Command, CommandList, CommandGroup, CommandItem;
 var init_command = __esm({
   "src/ui/command.tsx"() {
     init_utils();
-    Command = React20__namespace.forwardRef(
+    Command = React21__namespace.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -7542,7 +7546,7 @@ var init_command = __esm({
       )
     );
     Command.displayName = "Command";
-    CommandList = React20__namespace.forwardRef(
+    CommandList = React21__namespace.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -7553,7 +7557,7 @@ var init_command = __esm({
       )
     );
     CommandList.displayName = "CommandList";
-    CommandGroup = React20__namespace.forwardRef(
+    CommandGroup = React21__namespace.forwardRef(
       ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
@@ -7564,7 +7568,7 @@ var init_command = __esm({
       )
     );
     CommandGroup.displayName = "CommandGroup";
-    CommandItem = React20__namespace.forwardRef(({ className, onSelect, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    CommandItem = React21__namespace.forwardRef(({ className, onSelect, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
@@ -7582,8 +7586,8 @@ function MenuContent({
   selectOptionAndCleanUp,
   setHighlightedIndex
 }) {
-  const containerRef = React20.useRef(null);
-  React20.useEffect(() => {
+  const containerRef = React21.useRef(null);
+  React21.useEffect(() => {
     if (selectedIndex !== null && selectedIndex >= 0 && selectedIndex < options.length) {
       const timeoutId = setTimeout(() => {
         const container = containerRef.current;
@@ -7742,7 +7746,7 @@ function ComponentPickerMenuPlugin({
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [modal, showModal] = useEditorModal();
-  const [queryString, setQueryString] = React20.useState(null);
+  const [queryString, setQueryString] = React21.useState(null);
   logger.debug("ComponentPickerMenuPlugin initialized", {
     baseOptionsCount: baseOptions.length,
     hasDynamicOptionsFn: !!dynamicOptionsFn
@@ -7750,7 +7754,7 @@ function ComponentPickerMenuPlugin({
   const checkForTriggerMatch = LexicalTypeaheadMenuPlugin$1.useBasicTypeaheadTriggerMatch("/", {
     minLength: 0
   });
-  const options = React20.useMemo(() => {
+  const options = React21.useMemo(() => {
     if (!queryString) {
       logger.debug("ComponentPickerMenuPlugin: No query string, returning baseOptions", {
         baseOptionsCount: baseOptions.length,
@@ -7775,7 +7779,7 @@ function ComponentPickerMenuPlugin({
     });
     return filtered;
   }, [baseOptions, dynamicOptionsFn, queryString]);
-  const onSelectOption = React20.useCallback(
+  const onSelectOption = React21.useCallback(
     (selectedOption, nodeToRemove, closeMenu, matchingString) => {
       editor.update(() => {
         nodeToRemove?.remove();
@@ -7900,6 +7904,98 @@ var init_component_picker_menu_plugin = __esm({
     );
   }
 });
+var NumberInput;
+var init_number_input = __esm({
+  "src/ui/number-input.tsx"() {
+    "use client";
+    init_utils();
+    init_button();
+    init_input();
+    NumberInput = React21__namespace.forwardRef(
+      ({ value, onValueChange, min = 0, max = 100, step = 1, unit = "px", className, ...props }, ref) => {
+        const timerRef = React21__namespace.useRef(null);
+        const intervalRef = React21__namespace.useRef(null);
+        const valueRef = React21__namespace.useRef(value);
+        React21__namespace.useEffect(() => {
+          valueRef.current = value;
+        }, [value]);
+        const updateValue = React21__namespace.useCallback((delta) => {
+          onValueChange(Math.min(Math.max(valueRef.current + delta, min), max));
+        }, [onValueChange, min, max]);
+        const startLongPress = (delta) => {
+          updateValue(delta);
+          timerRef.current = setTimeout(() => {
+            intervalRef.current = setInterval(() => {
+              updateValue(delta);
+            }, 50);
+          }, 300);
+        };
+        const stopLongPress = React21__namespace.useCallback(() => {
+          if (timerRef.current) clearTimeout(timerRef.current);
+          if (intervalRef.current) clearInterval(intervalRef.current);
+        }, []);
+        const handleBlur = () => {
+          onValueChange(Math.min(Math.max(value, min), max));
+        };
+        React21__namespace.useEffect(() => {
+          return () => stopLongPress();
+        }, [stopLongPress]);
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("editor-number-input-container", className), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "editor-number-input-btn",
+              onMouseDown: () => startLongPress(-step),
+              onMouseUp: stopLongPress,
+              onMouseLeave: stopLongPress,
+              onTouchStart: () => startLongPress(-step),
+              onTouchEnd: stopLongPress,
+              tabIndex: -1,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-number-input-wrapper", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Input,
+              {
+                ...props,
+                ref,
+                type: "number",
+                value,
+                onBlur: handleBlur,
+                onChange: (e) => {
+                  const val = parseInt(e.target.value, 10);
+                  if (!isNaN(val)) onValueChange(val);
+                  else onValueChange(0);
+                },
+                className: "editor-number-input-field"
+              }
+            ),
+            unit && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "editor-number-input-unit", children: unit })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "editor-number-input-btn",
+              onMouseDown: () => startLongPress(step),
+              onMouseUp: stopLongPress,
+              onMouseLeave: stopLongPress,
+              onTouchStart: () => startLongPress(step),
+              onTouchEnd: stopLongPress,
+              tabIndex: -1,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: 14 })
+            }
+          )
+        ] });
+      }
+    );
+    NumberInput.displayName = "NumberInput";
+  }
+});
 var Slot;
 var init_slot = __esm({
   "src/ui/slot.tsx"() {
@@ -7907,11 +8003,11 @@ var init_slot = __esm({
   }
 });
 function Popover({ children, open: controlledOpen, defaultOpen = false, onOpenChange, modal = false }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React20__namespace.useState(defaultOpen);
-  const triggerRef = React20__namespace.useRef(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = React21__namespace.useState(defaultOpen);
+  const triggerRef = React21__namespace.useRef(null);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = onOpenChange ?? setUncontrolledOpen;
-  const contextValue = React20__namespace.useMemo(() => ({
+  const contextValue = React21__namespace.useMemo(() => ({
     open,
     setOpen,
     triggerRef,
@@ -7920,17 +8016,17 @@ function Popover({ children, open: controlledOpen, defaultOpen = false, onOpenCh
   return /* @__PURE__ */ jsxRuntime.jsx(PopoverContext.Provider, { value: contextValue, children });
 }
 function PopoverTrigger({ children, asChild, ...props }) {
-  const context = React20__namespace.useContext(PopoverContext);
+  const context = React21__namespace.useContext(PopoverContext);
   if (!context) throw new Error("PopoverTrigger must be used within Popover");
   const { triggerRef, open, setOpen } = context;
   const handleClick = (e) => {
     setOpen(!open);
-    if (React20__namespace.isValidElement(children)) {
+    if (React21__namespace.isValidElement(children)) {
       children.props.onClick?.(e);
     }
   };
-  if (asChild && React20__namespace.isValidElement(children)) {
-    return React20__namespace.cloneElement(children, {
+  if (asChild && React21__namespace.isValidElement(children)) {
+    return React21__namespace.cloneElement(children, {
       ref: triggerRef,
       onClick: handleClick,
       ...props
@@ -7948,10 +8044,10 @@ function PopoverTrigger({ children, asChild, ...props }) {
   );
 }
 function PopoverContent({ children, className, align = "center", sideOffset = 4, ...props }) {
-  const context = React20__namespace.useContext(PopoverContext);
-  const [position, setPosition] = React20__namespace.useState({ top: 0, left: 0 });
-  const contentRef = React20__namespace.useRef(null);
-  React20__namespace.useEffect(() => {
+  const context = React21__namespace.useContext(PopoverContext);
+  const [position, setPosition] = React21__namespace.useState({ top: 0, left: 0 });
+  const contentRef = React21__namespace.useRef(null);
+  React21__namespace.useEffect(() => {
     if (context?.open && context.triggerRef.current) {
       const rect = context.triggerRef.current.getBoundingClientRect();
       let left = rect.left;
@@ -8001,7 +8097,7 @@ var PopoverContext;
 var init_popover = __esm({
   "src/ui/popover.tsx"() {
     init_utils();
-    PopoverContext = React20__namespace.createContext(null);
+    PopoverContext = React21__namespace.createContext(null);
   }
 });
 function setRef(ref, value) {
@@ -8037,7 +8133,7 @@ function composeRefs(...refs) {
   };
 }
 function useComposedRefs(...refs) {
-  return React20__namespace.useCallback(
+  return React21__namespace.useCallback(
     (value) => {
       composeRefs(...refs)(value);
     },
@@ -8055,19 +8151,19 @@ function VisuallyHiddenInput(props) {
     style,
     ...inputProps
   } = props;
-  const isCheckInput = React20__namespace.useMemo(
+  const isCheckInput = React21__namespace.useMemo(
     () => type === "checkbox" || type === "radio" || type === "switch",
     [type]
   );
-  const inputRef = React20__namespace.useRef(null);
-  const prevValueRef = React20__namespace.useRef({
+  const inputRef = React21__namespace.useRef(null);
+  const prevValueRef = React21__namespace.useRef({
     value: isCheckInput ? checked : value,
     previous: isCheckInput ? checked : value
   });
-  const [prevValue, setPrevValue] = React20__namespace.useState(
+  const [prevValue, setPrevValue] = React21__namespace.useState(
     isCheckInput ? checked : value
   );
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
     const currentValue = isCheckInput ? checked : value;
     if (prevValueRef.current.value !== currentValue) {
       prevValueRef.current.previous = prevValueRef.current.value;
@@ -8075,8 +8171,8 @@ function VisuallyHiddenInput(props) {
       setPrevValue(prevValueRef.current.previous);
     }
   }, [isCheckInput, value, checked]);
-  const [controlSize, setControlSize] = React20__namespace.useState({});
-  React20__namespace.useLayoutEffect(() => {
+  const [controlSize, setControlSize] = React21__namespace.useState({});
+  React21__namespace.useLayoutEffect(() => {
     if (!control) {
       setControlSize({});
       return;
@@ -8108,7 +8204,7 @@ function VisuallyHiddenInput(props) {
       resizeObserver.disconnect();
     };
   }, [control]);
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
     const input = inputRef.current;
     if (!input) return;
     const inputProto = window.HTMLInputElement.prototype;
@@ -8124,7 +8220,7 @@ function VisuallyHiddenInput(props) {
       input.dispatchEvent(event);
     }
   }, [prevValue, value, checked, bubbles, isCheckInput]);
-  const composedStyle = React20__namespace.useMemo(() => {
+  const composedStyle = React21__namespace.useMemo(() => {
     return {
       ...style,
       ...controlSize.width !== void 0 && controlSize.height !== void 0 ? controlSize : {},
@@ -8436,11 +8532,11 @@ function parseColorString(value) {
   return null;
 }
 function useDirection(dirProp) {
-  const contextDir = React20__namespace.useContext(DirectionContext);
+  const contextDir = React21__namespace.useContext(DirectionContext);
   return dirProp ?? contextDir ?? "ltr";
 }
 function useLazyRef(fn) {
-  const ref = React20__namespace.useRef(null);
+  const ref = React21__namespace.useRef(null);
   if (ref.current === null) {
     ref.current = fn();
   }
@@ -8514,7 +8610,7 @@ function createColorPickerStore(listenersRef, stateRef, callbacks) {
   return store;
 }
 function useColorPickerStoreContext(consumerName) {
-  const context = React20__namespace.useContext(ColorPickerStoreContext);
+  const context = React21__namespace.useContext(ColorPickerStoreContext);
   if (!context) {
     throw new Error(
       `\`${consumerName}\` must be used within \`ColorPickerRoot\``
@@ -8524,14 +8620,14 @@ function useColorPickerStoreContext(consumerName) {
 }
 function useColorPickerStore(selector) {
   const store = useColorPickerStoreContext("useColorPickerStoreSelector");
-  const getSnapshot = React20__namespace.useCallback(
+  const getSnapshot = React21__namespace.useCallback(
     () => selector(store.getState()),
     [store, selector]
   );
-  return React20__namespace.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+  return React21__namespace.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
 }
 function useColorPickerContext(consumerName) {
-  const context = React20__namespace.useContext(ColorPickerContext);
+  const context = React21__namespace.useContext(ColorPickerContext);
   if (!context) {
     throw new Error(
       `\`${consumerName}\` must be used within \`ColorPickerRoot\``
@@ -8558,12 +8654,12 @@ function ColorPickerRootImpl(props) {
   } = props;
   const store = useColorPickerStoreContext("ColorPickerRootImpl");
   const dir = useDirection(dirProp);
-  const [formTrigger, setFormTrigger] = React20__namespace.useState(
+  const [formTrigger, setFormTrigger] = React21__namespace.useState(
     null
   );
   const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
   const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
     if (valueProp !== void 0) {
       const color = parseColorString(valueProp);
       if (color) {
@@ -8573,12 +8669,12 @@ function ColorPickerRootImpl(props) {
       }
     }
   }, [valueProp, store]);
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
     if (openProp !== void 0) {
       store.setOpen(openProp);
     }
   }, [openProp, store]);
-  const contextValue = React20__namespace.useMemo(
+  const contextValue = React21__namespace.useMemo(
     () => ({
       dir,
       disabled,
@@ -8590,7 +8686,7 @@ function ColorPickerRootImpl(props) {
   );
   const value = useColorPickerStore((state) => rgbToHex(state.color));
   const open = useColorPickerStore((state) => state.open);
-  const onPopoverOpenChange = React20__namespace.useCallback(
+  const onPopoverOpenChange = React21__namespace.useCallback(
     (newOpen) => {
       store.setOpen(newOpen);
       onOpenChange?.(newOpen);
@@ -8676,10 +8772,10 @@ function ColorPickerArea(props) {
   const context = useColorPickerContext("ColorPickerArea");
   const store = useColorPickerStoreContext("ColorPickerArea");
   const hsv = useColorPickerStore((state) => state.hsv);
-  const isDraggingRef = React20__namespace.useRef(false);
-  const areaRef = React20__namespace.useRef(null);
+  const isDraggingRef = React21__namespace.useRef(false);
+  const areaRef = React21__namespace.useRef(null);
   const composedRef = useComposedRefs(ref, areaRef);
-  const updateColorFromPosition = React20__namespace.useCallback(
+  const updateColorFromPosition = React21__namespace.useCallback(
     (clientX, clientY) => {
       if (!areaRef.current) return;
       const rect = areaRef.current.getBoundingClientRect();
@@ -8696,7 +8792,7 @@ function ColorPickerArea(props) {
     },
     [hsv, store]
   );
-  const onPointerDown = React20__namespace.useCallback(
+  const onPointerDown = React21__namespace.useCallback(
     (event) => {
       if (context.disabled) return;
       event.preventDefault();
@@ -8706,7 +8802,7 @@ function ColorPickerArea(props) {
     },
     [context.disabled, updateColorFromPosition]
   );
-  const onPointerMove = React20__namespace.useCallback(
+  const onPointerMove = React21__namespace.useCallback(
     (event) => {
       if (isDraggingRef.current) {
         updateColorFromPosition(event.clientX, event.clientY);
@@ -8714,7 +8810,7 @@ function ColorPickerArea(props) {
     },
     [updateColorFromPosition]
   );
-  const onPointerUp = React20__namespace.useCallback((event) => {
+  const onPointerUp = React21__namespace.useCallback((event) => {
     isDraggingRef.current = false;
     areaRef.current?.releasePointerCapture(event.pointerId);
   }, []);
@@ -8784,7 +8880,7 @@ function ColorPickerHueSlider(props) {
   const context = useColorPickerContext("ColorPickerHueSlider");
   const store = useColorPickerStoreContext("ColorPickerHueSlider");
   const hsv = useColorPickerStore((state) => state.hsv);
-  const onValueChange = React20__namespace.useCallback(
+  const onValueChange = React21__namespace.useCallback(
     (values) => {
       const newHsv = {
         h: values[0] ?? 0,
@@ -8824,7 +8920,7 @@ function ColorPickerAlphaSlider(props) {
   const store = useColorPickerStoreContext("ColorPickerAlphaSlider");
   const color = useColorPickerStore((state) => state.color);
   const hsv = useColorPickerStore((state) => state.hsv);
-  const onValueChange = React20__namespace.useCallback(
+  const onValueChange = React21__namespace.useCallback(
     (values) => {
       const alpha = (values[0] ?? 0) / 100;
       const newColor = { ...color, a: alpha };
@@ -8883,7 +8979,7 @@ function ColorPickerEyeDropper(props) {
   const context = useColorPickerContext("ColorPickerEyeDropper");
   const store = useColorPickerStoreContext("ColorPickerEyeDropper");
   const color = useColorPickerStore((state) => state.color);
-  const onEyeDropper = React20__namespace.useCallback(async () => {
+  const onEyeDropper = React21__namespace.useCallback(async () => {
     if (!window.EyeDropper) return;
     try {
       const eyeDropper = new window.EyeDropper();
@@ -8920,7 +9016,7 @@ function ColorPickerFormatSelect(props) {
   const context = useColorPickerContext("ColorPickerFormatSelector");
   const store = useColorPickerStoreContext("ColorPickerFormatSelector");
   const format = useColorPickerStore((state) => state.format);
-  const onFormatChange = React20__namespace.useCallback(
+  const onFormatChange = React21__namespace.useCallback(
     (value) => {
       if (colorFormats.includes(value)) {
         store.setFormat(value);
@@ -8957,7 +9053,7 @@ function ColorPickerInput(props) {
   const color = useColorPickerStore((state) => state.color);
   const format = useColorPickerStore((state) => state.format);
   const hsv = useColorPickerStore((state) => state.hsv);
-  const onColorChange = React20__namespace.useCallback(
+  const onColorChange = React21__namespace.useCallback(
     (newColor) => {
       const newHsv = rgbToHsv(newColor);
       store.setColor(newColor);
@@ -9039,7 +9135,7 @@ function HexInput(props) {
   } = props;
   const hexValue = rgbToHex(color);
   const alphaValue = Math.round((color?.a ?? 1) * 100);
-  const onHexChange = React20__namespace.useCallback(
+  const onHexChange = React21__namespace.useCallback(
     (event) => {
       const value = event.target.value;
       const parsedColor = parseColorString(value);
@@ -9049,7 +9145,7 @@ function HexInput(props) {
     },
     [color, onColorChange]
   );
-  const onAlphaChange = React20__namespace.useCallback(
+  const onAlphaChange = React21__namespace.useCallback(
     (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= 100) {
@@ -9126,7 +9222,7 @@ function RgbInput(props) {
   const gValue = Math.round(color?.g ?? 0);
   const bValue = Math.round(color?.b ?? 0);
   const alphaValue = Math.round((color?.a ?? 1) * 100);
-  const onChannelChange = React20__namespace.useCallback(
+  const onChannelChange = React21__namespace.useCallback(
     (channel, max, isAlpha = false) => (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= max) {
@@ -9223,9 +9319,9 @@ function HslInput(props) {
     className,
     ...inputProps
   } = props;
-  const hsl = React20__namespace.useMemo(() => rgbToHsl(color), [color]);
+  const hsl = React21__namespace.useMemo(() => rgbToHsl(color), [color]);
   const alphaValue = Math.round((color?.a ?? 1) * 100);
-  const onHslChannelChange = React20__namespace.useCallback(
+  const onHslChannelChange = React21__namespace.useCallback(
     (channel, max) => (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= max) {
@@ -9236,7 +9332,7 @@ function HslInput(props) {
     },
     [hsl, color, onColorChange]
   );
-  const onAlphaChange = React20__namespace.useCallback(
+  const onAlphaChange = React21__namespace.useCallback(
     (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= 100) {
@@ -9333,7 +9429,7 @@ function HsbInput(props) {
     ...inputProps
   } = props;
   const alphaValue = Math.round((hsv?.a ?? 1) * 100);
-  const onHsvChannelChange = React20__namespace.useCallback(
+  const onHsvChannelChange = React21__namespace.useCallback(
     (channel, max) => (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= max) {
@@ -9344,7 +9440,7 @@ function HsbInput(props) {
     },
     [hsv, onColorChange]
   );
-  const onAlphaChange = React20__namespace.useCallback(
+  const onAlphaChange = React21__namespace.useCallback(
     (event) => {
       const value = Number.parseInt(event.target.value, 10);
       if (!Number.isNaN(value) && value >= 0 && value <= 100) {
@@ -9437,7 +9533,7 @@ function ColorPickerPresets(props) {
   const context = useColorPickerContext("ColorPickerPresets");
   const store = useColorPickerStoreContext("ColorPickerPresets");
   const color = useColorPickerStore((state) => state.color);
-  const onPresetClick = React20__namespace.useCallback(
+  const onPresetClick = React21__namespace.useCallback(
     (hex, alpha) => {
       const nextAlpha = alpha ?? (color?.a ?? 1);
       const newColor = hexToRgb(hex, nextAlpha);
@@ -9498,14 +9594,14 @@ var init_color_picker = __esm({
       // --muted in light theme is #F5F5F5, /50 -> alpha 0.5
       { label: "bg-muted/50", value: "#F5F5F5", alpha: 0.5 }
     ];
-    DirectionContext = React20__namespace.createContext(void 0);
-    ColorPickerStoreContext = React20__namespace.createContext(
+    DirectionContext = React21__namespace.createContext(void 0);
+    ColorPickerStoreContext = React21__namespace.createContext(
       null
     );
-    ColorPickerContext = React20__namespace.createContext(
+    ColorPickerContext = React21__namespace.createContext(
       null
     );
-    ColorPickerRoot = React20__namespace.memo(function ColorPickerRoot2(props) {
+    ColorPickerRoot = React21__namespace.memo(function ColorPickerRoot2(props) {
       const {
         value: valueProp,
         defaultValue = "#000000",
@@ -9523,7 +9619,7 @@ var init_color_picker = __esm({
         required,
         ...rootProps
       } = props;
-      const initialColor = React20__namespace.useMemo(() => {
+      const initialColor = React21__namespace.useMemo(() => {
         const colorString = valueProp ?? defaultValue;
         const color = parseColorString(colorString) ?? hexToRgb(defaultValue);
         return {
@@ -9542,7 +9638,7 @@ var init_color_picker = __esm({
       ]);
       const stateRef = useLazyRef(() => initialColor);
       const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
-      const storeCallbacks = React20__namespace.useMemo(
+      const storeCallbacks = React21__namespace.useMemo(
         () => ({
           onColorChange: onValueChange,
           onOpenChange,
@@ -9550,7 +9646,7 @@ var init_color_picker = __esm({
         }),
         [onValueChange, onOpenChange, onFormatChange]
       );
-      const store = React20__namespace.useMemo(
+      const store = React21__namespace.useMemo(
         () => createColorPickerStore(listenersRef, stateRef, storeCallbacks),
         [listenersRef, stateRef, storeCallbacks]
       );
@@ -9579,38 +9675,48 @@ function InsertLayoutDialog({
   submitLabel = "Insert",
   onSubmit
 }) {
-  const [layout, setLayout] = React20.useState(initialValues?.template ?? (LAYOUTS[0]?.value || "1fr"));
-  const [backgroundColor, setBackgroundColor] = React20.useState(
+  const [layout, setLayout] = React21.useState(initialValues?.template ?? (LAYOUTS[0]?.value || "1fr"));
+  const [backgroundColor, setBackgroundColor] = React21.useState(
     initialValues?.itemBackgroundColor ?? "#ffffff"
   );
-  const [paddingPx, setPaddingPx] = React20.useState(initialValues?.itemPaddingPx ?? 12);
-  const [borderRadiusPx, setBorderRadiusPx] = React20.useState(
+  const [paddingXPx, setPaddingXPx] = React21.useState(initialValues?.itemPaddingXPx ?? 12);
+  const [paddingYPx, setPaddingYPx] = React21.useState(initialValues?.itemPaddingYPx ?? 12);
+  const [borderRadiusPx, setBorderRadiusPx] = React21.useState(
     initialValues?.itemBorderRadiusPx ?? 8
   );
-  const layoutRef = React20.useRef(layout);
-  const backgroundColorRef = React20.useRef(backgroundColor);
-  const paddingPxRef = React20.useRef(paddingPx);
-  const borderRadiusPxRef = React20.useRef(borderRadiusPx);
-  React20.useEffect(() => {
+  const layoutRef = React21.useRef(layout);
+  const backgroundColorRef = React21.useRef(backgroundColor);
+  const paddingXPxRef = React21.useRef(paddingXPx);
+  const paddingYPxRef = React21.useRef(paddingYPx);
+  const borderRadiusPxRef = React21.useRef(borderRadiusPx);
+  React21.useEffect(() => {
     layoutRef.current = layout;
   }, [layout]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     backgroundColorRef.current = backgroundColor;
   }, [backgroundColor]);
-  React20.useEffect(() => {
-    paddingPxRef.current = paddingPx;
-  }, [paddingPx]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
+    paddingXPxRef.current = paddingXPx;
+  }, [paddingXPx]);
+  React21.useEffect(() => {
+    paddingYPxRef.current = paddingYPx;
+  }, [paddingYPx]);
+  React21.useEffect(() => {
     borderRadiusPxRef.current = borderRadiusPx;
   }, [borderRadiusPx]);
   const onBackgroundColorChange = (value) => {
     backgroundColorRef.current = value;
     setBackgroundColor(value);
   };
-  const onPaddingChange = (next) => {
+  const onPaddingXChange = (next) => {
+    const value = Math.min(Math.max(next, 0), 64);
+    paddingXPxRef.current = value;
+    setPaddingXPx(value);
+  };
+  const onPaddingYChange = (next) => {
     const value = Math.min(Math.max(next, 0), 64);
-    paddingPxRef.current = value;
-    setPaddingPx(value);
+    paddingYPxRef.current = value;
+    setPaddingYPx(value);
   };
   const onBorderRadiusChange = (next) => {
     const value = Math.min(Math.max(next, 0), 64);
@@ -9622,7 +9728,8 @@ function InsertLayoutDialog({
     const values = {
       template: layoutRef.current,
       itemBackgroundColor: backgroundColorRef.current,
-      itemPaddingPx: paddingPxRef.current,
+      itemPaddingXPx: paddingXPxRef.current,
+      itemPaddingYPx: paddingYPxRef.current,
       itemBorderRadiusPx: borderRadiusPxRef.current
     };
     logger.info("[Layout] Submit dialog values", {
@@ -9637,13 +9744,13 @@ function InsertLayoutDialog({
     activeEditor.dispatchCommand(INSERT_LAYOUT_COMMAND, values);
     onClose();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: 4, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Select, { onValueChange: setLayout, value: layout, children: [
       /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: "editor-input-lg editor-w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: buttonLabel }) }),
       /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { className: "editor-w-full", children: LAYOUTS.map(({ label, value }) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value, children: label }, value)) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-layout-dialog-grid", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-layout-dialog-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: 1.5, children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-text-xs-muted", children: "Background" }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           ColorPickerRoot,
@@ -9689,47 +9796,39 @@ function InsertLayoutDialog({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-layout-dialog-group", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-text-xs-muted", children: "Padding (px)" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: 1.5, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-text-xs-muted", children: "Padding X (px)" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
+          NumberInput,
           {
-            type: "number",
             min: 0,
             max: 64,
-            step: 1,
-            value: paddingPx,
-            onChange: (event) => {
-              const next = Number.parseInt(event.target.value, 10);
-              if (Number.isFinite(next)) {
-                onPaddingChange(next);
-              } else {
-                onPaddingChange(0);
-              }
-            },
-            className: "editor-input-lg editor-w-full"
+            value: paddingXPx,
+            onValueChange: onPaddingXChange
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-layout-dialog-group", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: 1.5, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-text-xs-muted", children: "Padding Y (px)" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NumberInput,
+          {
+            min: 0,
+            max: 64,
+            value: paddingYPx,
+            onValueChange: onPaddingYChange
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: 1.5, children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-text-xs-muted", children: "Border radius (px)" }),
         /* @__PURE__ */ jsxRuntime.jsx(
-          Input,
+          NumberInput,
           {
-            type: "number",
             min: 0,
             max: 64,
-            step: 1,
             value: borderRadiusPx,
-            onChange: (event) => {
-              const next = Number.parseInt(event.target.value, 10);
-              if (Number.isFinite(next)) {
-                onBorderRadiusChange(next);
-              } else {
-                onBorderRadiusChange(0);
-              }
-            },
-            className: "editor-input-lg editor-w-full"
+            onValueChange: onBorderRadiusChange
           }
         )
       ] })
@@ -9740,7 +9839,7 @@ function InsertLayoutDialog({
 function LayoutPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [modal, showModal] = useEditorModal();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!editor.hasNodes([LayoutContainerNode, LayoutItemNode])) {
       throw new Error(
         "LayoutPlugin: LayoutContainerNode, or LayoutItemNode not registered on editor"
@@ -9780,23 +9879,32 @@ function LayoutPlugin() {
       if (!value) {
         return void 0;
       }
-      const match = value.match(/^(\d+)px$/i);
-      if (!match?.[1]) {
-        return void 0;
-      }
-      const parsed = Number.parseInt(match[1], 10);
-      return Number.isFinite(parsed) ? parsed : void 0;
+      const values = value.replace(/!important/gi, "").trim().split(/\s+/);
+      const parsedValues = values.map((v) => {
+        const match = v.match(/^(\d+)px/i);
+        if (!match?.[1]) return null;
+        const parsed = Number.parseInt(match[1], 10);
+        return Number.isFinite(parsed) ? parsed : null;
+      }).filter((v) => v !== null);
+      if (parsedValues.length === 0) return void 0;
+      return parsedValues;
     };
     const buildLayoutItemStyle = ({
       itemBackgroundColor,
-      itemPaddingPx,
+      itemPaddingXPx,
+      itemPaddingYPx,
       itemBorderRadiusPx
     }) => {
       const itemStyles = [];
       if (itemBackgroundColor.trim()) {
         itemStyles.push(`background-color: ${itemBackgroundColor.trim()}`);
       }
-      itemStyles.push(`padding: ${Math.min(Math.max(itemPaddingPx, 0), 64)}px`);
+      itemStyles.push(
+        `padding: ${Math.min(Math.max(itemPaddingYPx, 0), 64)}px ${Math.min(
+          Math.max(itemPaddingXPx, 0),
+          64
+        )}px`
+      );
       itemStyles.push(
         `border-radius: ${Math.min(Math.max(itemBorderRadiusPx, 0), 64)}px`
       );
@@ -9809,7 +9917,10 @@ function LayoutPlugin() {
         return;
       }
       const background = values.itemBackgroundColor.trim();
-      const padding = `${Math.min(Math.max(values.itemPaddingPx, 0), 64)}px`;
+      const padding = `${Math.min(Math.max(values.itemPaddingYPx, 0), 64)}px ${Math.min(
+        Math.max(values.itemPaddingXPx, 0),
+        64
+      )}px`;
       const borderRadius = `${Math.min(Math.max(values.itemBorderRadiusPx, 0), 64)}px`;
       if (background) {
         element.style.setProperty("background-color", background);
@@ -9860,14 +9971,17 @@ function LayoutPlugin() {
           return;
         }
         const style = layoutItem.getStyle();
+        const paddingValues = extractNumericStyle(style, "padding");
+        const borderRadiusValues = extractNumericStyle(style, "border-radius");
         payload = {
           containerKey: parentContainer.getKey(),
           layoutItemKey: layoutItem.getKey(),
           values: {
             template: parentContainer.getTemplateColumns(),
             itemBackgroundColor: extractStyleValue(style, "background-color") ?? "#ffffff",
-            itemPaddingPx: extractNumericStyle(style, "padding") ?? 12,
-            itemBorderRadiusPx: extractNumericStyle(style, "border-radius") ?? 8
+            itemPaddingXPx: paddingValues && paddingValues.length > 1 ? paddingValues[1] : paddingValues?.[0] ?? 12,
+            itemPaddingYPx: paddingValues?.[0] ?? 12,
+            itemBorderRadiusPx: borderRadiusValues?.[0] ?? 8
           }
         };
         logger.debug("[Layout] Resolved payload from target", payload);
@@ -9980,11 +10094,13 @@ function LayoutPlugin() {
           editor.update(() => {
             const template = typeof payload === "string" ? payload : payload.template;
             const itemBackgroundColor = typeof payload === "string" ? void 0 : payload.itemBackgroundColor?.trim();
-            const itemPaddingPx = typeof payload === "string" ? void 0 : typeof payload.itemPaddingPx === "number" && Number.isFinite(payload.itemPaddingPx) ? Math.min(Math.max(payload.itemPaddingPx, 0), 64) : void 0;
+            const itemPaddingXPx = typeof payload === "string" ? void 0 : typeof payload.itemPaddingXPx === "number" && Number.isFinite(payload.itemPaddingXPx) ? Math.min(Math.max(payload.itemPaddingXPx, 0), 64) : void 0;
+            const itemPaddingYPx = typeof payload === "string" ? void 0 : typeof payload.itemPaddingYPx === "number" && Number.isFinite(payload.itemPaddingYPx) ? Math.min(Math.max(payload.itemPaddingYPx, 0), 64) : void 0;
             const itemBorderRadiusPx = typeof payload === "string" ? void 0 : typeof payload.itemBorderRadiusPx === "number" && Number.isFinite(payload.itemBorderRadiusPx) ? Math.min(Math.max(payload.itemBorderRadiusPx, 0), 64) : void 0;
             const itemStyle = buildLayoutItemStyle({
               itemBackgroundColor: itemBackgroundColor ?? "#ffffff",
-              itemPaddingPx: itemPaddingPx ?? 12,
+              itemPaddingXPx: itemPaddingXPx ?? 12,
+              itemPaddingYPx: itemPaddingYPx ?? 12,
               itemBorderRadiusPx: itemBorderRadiusPx ?? 8
             });
             const container = $createLayoutContainerNode(template);
@@ -10055,9 +10171,9 @@ var init_layout_plugin = __esm({
     init_layout_container_node();
     init_layout_item_node();
     init_button();
+    init_number_input();
     init_select();
     init_color_picker();
-    init_input();
     init_flex();
     init_use_modal();
     init_logger();
@@ -10094,7 +10210,7 @@ function applyListColor(editor) {
 function ListColorPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [modal, showModal] = useEditorModal();
-  React20__namespace.useEffect(() => {
+  React21__namespace.useEffect(() => {
     const applyColor = (color, listKey) => {
       listColorStore.set(listKey, color);
       editor.update(() => {
@@ -10140,7 +10256,7 @@ function ListColorPlugin() {
           const fromAttr = listEl.getAttribute("data-list-color");
           const initialColor = fromStore || fromVar || fromAttr || "#000000";
           function ListColorModalContent({ onClose }) {
-            const [color, setColor] = React20__namespace.useState(initialColor);
+            const [color, setColor] = React21__namespace.useState(initialColor);
             return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-list-color-dialog", children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: 4, children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-text-xs-muted", children: "Ch\u1ECDn m\xE0u cho bullet ho\u1EB7c s\u1ED1 th\u1EE9 t\u1EF1 c\u1EE7a list." }),
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -10194,9 +10310,9 @@ var init_list_color_plugin = __esm({
 });
 function ContextMenuPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [contextTarget, setContextTarget] = React20.useState(null);
-  const [showMarkerDialog, setShowMarkerDialog] = React20.useState(false);
-  const [customMarker, setCustomMarker] = React20.useState("");
+  const [contextTarget, setContextTarget] = React21.useState(null);
+  const [showMarkerDialog, setShowMarkerDialog] = React21.useState(false);
+  const [customMarker, setCustomMarker] = React21.useState("");
   const isInTable = (node) => utils.$findMatchingParent(node, table.$isTableCellNode) !== null;
   const isMergedCell = (node) => {
     const cell = utils.$findMatchingParent(node, table.$isTableCellNode);
@@ -10212,7 +10328,7 @@ function ContextMenuPlugin() {
     const listNode = utils.$findMatchingParent(node, list.$isListNode);
     return list.$isListNode(listNode) && listNode.getListType() === "number";
   };
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const rootElement = editor.getRootElement();
     if (!rootElement) return;
     const onContextMenu = (event) => {
@@ -10225,7 +10341,7 @@ function ContextMenuPlugin() {
       rootElement.removeEventListener("contextmenu", onContextMenu);
     };
   }, [editor]);
-  const getContextAnchorNode = React20.useCallback(() => {
+  const getContextAnchorNode = React21.useCallback(() => {
     if (contextTarget) {
       const nearestNode = lexical.$getNearestNodeFromDOMNode(contextTarget);
       if (nearestNode) return nearestNode;
@@ -10236,7 +10352,7 @@ function ContextMenuPlugin() {
     }
     return null;
   }, [contextTarget]);
-  const updateNumberListMarkerType = React20.useCallback((markerType) => {
+  const updateNumberListMarkerType = React21.useCallback((markerType) => {
     editor.update(() => {
       const anchorNode = getContextAnchorNode();
       if (!anchorNode) return;
@@ -10270,7 +10386,7 @@ function ContextMenuPlugin() {
       listNode.replace(newList);
     });
   }, [editor, getContextAnchorNode]);
-  const syncMarkerToSameLevelLists = React20.useCallback((targetListNode, markerType) => {
+  const syncMarkerToSameLevelLists = React21.useCallback((targetListNode, markerType) => {
     editor.update(() => {
       const parent = targetListNode.getParent();
       if (!parent) return;
@@ -10307,7 +10423,7 @@ function ContextMenuPlugin() {
       setCustomMarker("");
     }
   };
-  const items = React20.useMemo(() => {
+  const items = React21.useMemo(() => {
     return [
       new LexicalNodeContextMenuPlugin.NodeContextMenuOption(`G\u1ED9p \xF4`, {
         $onSelect: () => {
@@ -10661,7 +10777,7 @@ var init_context_menu_plugin = __esm({
 });
 function DragDropPastePlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return editor.registerCommand(
       richText.DRAG_DROP_PASTE,
       (files) => {
@@ -10706,8 +10822,8 @@ function isOnMenu(element) {
 function DraggableBlockPlugin({
   anchorElem
 }) {
-  const menuRef = React20.useRef(null);
-  const targetLineRef = React20.useRef(null);
+  const menuRef = React21.useRef(null);
+  const targetLineRef = React21.useRef(null);
   if (!anchorElem) {
     return null;
   }
@@ -10746,7 +10862,7 @@ var init_draggable_block_plugin = __esm({
 });
 function TwitterPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!editor.hasNodes([TweetNode])) {
       throw new Error("TwitterPlugin: TweetNode not registered on editor");
     }
@@ -10774,7 +10890,7 @@ var init_twitter_plugin = __esm({
 });
 function YouTubePlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!editor.hasNodes([YouTubeNode])) {
       throw new Error("YouTubePlugin: YouTubeNode not registered on editor");
     }
@@ -10831,9 +10947,9 @@ function AutoEmbedDialogContent({
   onClose,
   editor
 }) {
-  const [text, setText] = React20.useState("");
-  const [embedResult, setEmbedResult] = React20.useState(null);
-  const validateText = React20.useMemo(
+  const [text, setText] = React21.useState("");
+  const [embedResult, setEmbedResult] = React21.useState(null);
+  const validateText = React21.useMemo(
     () => debounce2((inputText) => {
       const urlMatch = LexicalAutoEmbedPlugin.URL_MATCHER.exec(inputText);
       if (embedConfig != null && inputText != null && urlMatch != null) {
@@ -27655,13 +27771,13 @@ var init_emoji_list = __esm({
 });
 function EmojiPickerPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [queryString, setQueryString] = React20.useState(null);
-  const [emojis2, setEmojis] = React20.useState([]);
-  const [, setIsOpen] = React20.useState(false);
-  React20.useEffect(() => {
+  const [queryString, setQueryString] = React21.useState(null);
+  const [emojis2, setEmojis] = React21.useState([]);
+  const [, setIsOpen] = React21.useState(false);
+  React21.useEffect(() => {
     Promise.resolve().then(() => (init_emoji_list(), emoji_list_exports)).then((file) => setEmojis(file.default));
   }, []);
-  const emojiOptions = React20.useMemo(
+  const emojiOptions = React21.useMemo(
     () => emojis2 != null ? emojis2.map(
       ({ emoji, aliases, tags }) => new EmojiOption(aliases[0] || "emoji", emoji, {
         keywords: [...aliases, ...tags]
@@ -27672,14 +27788,14 @@ function EmojiPickerPlugin() {
   const checkForTriggerMatch = LexicalTypeaheadMenuPlugin$1.useBasicTypeaheadTriggerMatch(":", {
     minLength: 0
   });
-  const options = React20.useMemo(() => {
+  const options = React21.useMemo(() => {
     return emojiOptions.filter((option) => {
       return queryString != null ? new RegExp(queryString, "gi").exec(option.title) || option.keywords != null ? option.keywords.some(
         (keyword) => new RegExp(queryString, "gi").exec(keyword)
       ) : false : emojiOptions;
     }).slice(0, MAX_EMOJI_SUGGESTION_COUNT);
   }, [emojiOptions, queryString]);
-  const onSelectOption = React20.useCallback(
+  const onSelectOption = React21.useCallback(
     (selectedOption, nodeToRemove, closeMenu) => {
       editor.update(() => {
         const selection = lexical.$getSelection();
@@ -27810,7 +27926,7 @@ function $textNodeTransform(node) {
   }
 }
 function useEmojis(editor) {
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!editor.hasNodes([EmojiNode])) {
       throw new Error("EmojisPlugin: EmojiNode not registered on editor");
     }
@@ -27928,12 +28044,12 @@ function FloatingLinkEditor({
   isLinkEditMode,
   setIsLinkEditMode
 }) {
-  const editorRef = React20.useRef(null);
-  const inputRef = React20.useRef(null);
-  const [linkUrl, setLinkUrl] = React20.useState("");
-  const [editedLinkUrl, setEditedLinkUrl] = React20.useState("https://");
-  const [lastSelection, setLastSelection] = React20.useState(null);
-  const $updateLinkEditor = React20.useCallback(() => {
+  const editorRef = React21.useRef(null);
+  const inputRef = React21.useRef(null);
+  const [linkUrl, setLinkUrl] = React21.useState("");
+  const [editedLinkUrl, setEditedLinkUrl] = React21.useState("https://");
+  const [lastSelection, setLastSelection] = React21.useState(null);
+  const $updateLinkEditor = React21.useCallback(() => {
     const selection = lexical.$getSelection();
     let linkNode = null;
     let selectedNode = null;
@@ -28058,7 +28174,7 @@ function FloatingLinkEditor({
     }
     return true;
   }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -28076,7 +28192,7 @@ function FloatingLinkEditor({
       }
     };
   }, [anchorElem.parentElement, editor, $updateLinkEditor]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return utils.mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
@@ -28104,12 +28220,12 @@ function FloatingLinkEditor({
       )
     );
   }, [editor, $updateLinkEditor, setIsLink, isLink]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     editor.getEditorState().read(() => {
       $updateLinkEditor();
     });
   }, [editor, $updateLinkEditor]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (isLinkEditMode && inputRef.current) {
       inputRef.current.focus();
       setTimeout(() => {
@@ -28278,9 +28394,9 @@ function FloatingLinkEditor({
   );
 }
 function useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsLinkEditMode) {
-  const [activeEditor, setActiveEditor] = React20.useState(editor);
-  const [isLink, setIsLink] = React20.useState(false);
-  React20.useEffect(() => {
+  const [activeEditor, setActiveEditor] = React21.useState(editor);
+  const [isLink, setIsLink] = React21.useState(false);
+  React21.useEffect(() => {
     function $updateToolbar() {
       const selection = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection)) {
@@ -28596,10 +28712,10 @@ var ToggleGroupContext, ToggleGroup, ToggleGroupItem;
 var init_toggle_group = __esm({
   "src/ui/toggle-group.tsx"() {
     init_utils();
-    ToggleGroupContext = React20__namespace.createContext(null);
-    ToggleGroup = React20__namespace.forwardRef(
+    ToggleGroupContext = React21__namespace.createContext(null);
+    ToggleGroup = React21__namespace.forwardRef(
       ({ className, type = "single", value, onValueChange, children, size, variant, ...props }, ref) => {
-        const contextValue = React20__namespace.useMemo(() => ({
+        const contextValue = React21__namespace.useMemo(() => ({
           type,
           value: value || (type === "multiple" ? [] : ""),
           onValueChange: (val) => {
@@ -28616,8 +28732,8 @@ var init_toggle_group = __esm({
       }
     );
     ToggleGroup.displayName = "ToggleGroup";
-    ToggleGroupItem = React20__namespace.forwardRef(({ className, value, onClick, size: itemSize, variant: itemVariant, ...props }, ref) => {
-      const context = React20__namespace.useContext(ToggleGroupContext);
+    ToggleGroupItem = React21__namespace.forwardRef(({ className, value, onClick, size: itemSize, variant: itemVariant, ...props }, ref) => {
+      const context = React21__namespace.useContext(ToggleGroupContext);
       const size = itemSize || context?.size || "default";
       if (!context) {
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -28672,7 +28788,7 @@ function FontColorModalContent({
   onApply,
   onClose
 }) {
-  const [color, setColor] = React20.useState(initialColor);
+  const [color, setColor] = React21.useState(initialColor);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-list-color-dialog", children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: 4, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-text-xs-muted", children: "Ch\u1ECDn m\xE0u cho v\u0103n b\u1EA3n \u0111ang ch\u1ECDn." }),
     /* @__PURE__ */ jsxRuntime.jsx(ColorPickerRoot, { inline: true, value: color, onValueChange: setColor, children: /* @__PURE__ */ jsxRuntime.jsxs(ColorPickerContent, { className: "editor-w-full editor-border-0 editor-shadow-none editor-p-0", children: [
@@ -28706,7 +28822,7 @@ function BgColorModalContent({
   onApply,
   onClose
 }) {
-  const [color, setColor] = React20.useState(initialColor);
+  const [color, setColor] = React21.useState(initialColor);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-list-color-dialog", children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { direction: "column", gap: 4, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-text-xs-muted", children: "Ch\u1ECDn m\xE0u n\u1EC1n cho v\u0103n b\u1EA3n \u0111ang ch\u1ECDn." }),
     /* @__PURE__ */ jsxRuntime.jsx(ColorPickerRoot, { inline: true, value: color, onValueChange: setColor, children: /* @__PURE__ */ jsxRuntime.jsxs(ColorPickerContent, { className: "editor-w-full editor-border-0 editor-shadow-none editor-p-0", children: [
@@ -28752,8 +28868,8 @@ function FloatingTextFormat({
   showModal,
   isModalOpen
 }) {
-  const popupCharStylesEditorRef = React20.useRef(null);
-  const insertLink = React20.useCallback(() => {
+  const popupCharStylesEditorRef = React21.useRef(null);
+  const insertLink = React21.useCallback(() => {
     if (!isLink) {
       setIsLinkEditMode(true);
       editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, "https://");
@@ -28762,7 +28878,7 @@ function FloatingTextFormat({
       editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, null);
     }
   }, [editor, isLink, setIsLinkEditMode]);
-  const applyStyleText = React20.useCallback(
+  const applyStyleText = React21.useCallback(
     (styles) => {
       editor.update(() => {
         const selection$1 = lexical.$getSelection();
@@ -28773,7 +28889,7 @@ function FloatingTextFormat({
     },
     [editor]
   );
-  const onFontColorSelect = React20.useCallback(
+  const onFontColorSelect = React21.useCallback(
     (value) => {
       if (value !== "inherit") {
         applyStyleText({ color: value });
@@ -28781,7 +28897,7 @@ function FloatingTextFormat({
     },
     [applyStyleText]
   );
-  const onBgColorSelect = React20.useCallback(
+  const onBgColorSelect = React21.useCallback(
     (value) => {
       if (value !== "inherit") {
         applyStyleText({ "background-color": value });
@@ -28809,7 +28925,7 @@ function FloatingTextFormat({
       }
     ));
   };
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     function mouseMoveListener(e) {
       if (popupCharStylesEditorRef?.current && (e.buttons === 1 || e.buttons === 3)) {
         if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
@@ -28838,7 +28954,7 @@ function FloatingTextFormat({
       };
     }
   }, [popupCharStylesEditorRef, isModalOpen]);
-  const $updateTextFormatFloatingToolbar = React20.useCallback(() => {
+  const $updateTextFormatFloatingToolbar = React21.useCallback(() => {
     const selection = lexical.$getSelection();
     const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
     const nativeSelection = window.getSelection();
@@ -28864,7 +28980,7 @@ function FloatingTextFormat({
       );
     }
   }, [editor, anchorElem, isLink]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -28882,7 +28998,7 @@ function FloatingTextFormat({
       }
     };
   }, [editor, $updateTextFormatFloatingToolbar, anchorElem]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     editor.getEditorState().read(() => {
       $updateTextFormatFloatingToolbar();
     });
@@ -29057,18 +29173,18 @@ function FloatingTextFormat({
   );
 }
 function useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode, showModal, isModalOpen) {
-  const [isText, setIsText] = React20.useState(false);
-  const [isLink, setIsLink] = React20.useState(false);
-  const [isBold, setIsBold] = React20.useState(false);
-  const [isItalic, setIsItalic] = React20.useState(false);
-  const [isUnderline, setIsUnderline] = React20.useState(false);
-  const [isStrikethrough, setIsStrikethrough] = React20.useState(false);
-  const [isSubscript, setIsSubscript] = React20.useState(false);
-  const [isSuperscript, setIsSuperscript] = React20.useState(false);
-  const [isCode, setIsCode] = React20.useState(false);
-  const [fontColor, setFontColor] = React20.useState("inherit");
-  const [bgColor, setBgColor] = React20.useState("inherit");
-  const updatePopup = React20.useCallback(() => {
+  const [isText, setIsText] = React21.useState(false);
+  const [isLink, setIsLink] = React21.useState(false);
+  const [isBold, setIsBold] = React21.useState(false);
+  const [isItalic, setIsItalic] = React21.useState(false);
+  const [isUnderline, setIsUnderline] = React21.useState(false);
+  const [isStrikethrough, setIsStrikethrough] = React21.useState(false);
+  const [isSubscript, setIsSubscript] = React21.useState(false);
+  const [isSuperscript, setIsSuperscript] = React21.useState(false);
+  const [isCode, setIsCode] = React21.useState(false);
+  const [fontColor, setFontColor] = React21.useState("inherit");
+  const [bgColor, setBgColor] = React21.useState("inherit");
+  const updatePopup = React21.useCallback(() => {
     editor.getEditorState().read(() => {
       if (editor.isComposing()) {
         return;
@@ -29113,13 +29229,13 @@ function useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode, sho
       }
     });
   }, [editor]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     document.addEventListener("selectionchange", updatePopup);
     return () => {
       document.removeEventListener("selectionchange", updatePopup);
     };
   }, [updatePopup]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return utils.mergeRegister(
       editor.registerUpdateListener(() => {
         updatePopup();
@@ -29194,15 +29310,15 @@ var init_floating_text_format_plugin = __esm({
 });
 function KeywordsPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!editor.hasNodes([KeywordNode])) {
       throw new Error("KeywordsPlugin: KeywordNode not registered on editor");
     }
   }, [editor]);
-  const $createKeywordNode_ = React20.useCallback((textNode) => {
+  const $createKeywordNode_ = React21.useCallback((textNode) => {
     return $createKeywordNode(textNode.getTextContent());
   }, []);
-  const getKeywordMatch = React20.useCallback((text) => {
+  const getKeywordMatch = React21.useCallback((text) => {
     const matchArr = KEYWORDS_REGEX.exec(text);
     if (matchArr === null || !matchArr[2] || !matchArr[1]) {
       return null;
@@ -29277,7 +29393,7 @@ function ListMaxIndentLevelPlugin({
   maxDepth = 7
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return editor.registerCommand(
       lexical.INDENT_CONTENT_COMMAND,
       () => $shouldPreventIndent(maxDepth),
@@ -29292,8 +29408,8 @@ var init_list_max_indent_level_plugin = __esm({
   }
 });
 function useMentionLookupService(mentionString) {
-  const [results, setResults] = React20.useState([]);
-  React20.useEffect(() => {
+  const [results, setResults] = React21.useState([]);
+  React21.useEffect(() => {
     const cachedResults = mentionsCache.get(mentionString);
     if (mentionString == null) {
       setTimeout(() => {
@@ -29339,12 +29455,12 @@ function getPossibleQueryMatch(text) {
 }
 function MentionsPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [queryString, setQueryString] = React20.useState(null);
+  const [queryString, setQueryString] = React21.useState(null);
   const results = useMentionLookupService(queryString);
   const checkForSlashTriggerMatch = LexicalTypeaheadMenuPlugin$1.useBasicTypeaheadTriggerMatch("/", {
     minLength: 0
   });
-  const options = React20.useMemo(
+  const options = React21.useMemo(
     () => results.map(
       (result) => new MentionTypeaheadOption(
         result,
@@ -29353,7 +29469,7 @@ function MentionsPlugin() {
     ).slice(0, SUGGESTION_LIST_LENGTH_LIMIT),
     [results]
   );
-  const onSelectOption = React20.useCallback(
+  const onSelectOption = React21.useCallback(
     (selectedOption, nodeToReplace, closeMenu) => {
       editor.update(() => {
         const mentionNode = $createMentionNode(selectedOption.name);
@@ -29366,7 +29482,7 @@ function MentionsPlugin() {
     },
     [editor]
   );
-  const checkForMentionMatch = React20.useCallback(
+  const checkForMentionMatch = React21.useCallback(
     (text) => {
       const slashMatch = checkForSlashTriggerMatch(text, editor);
       if (slashMatch !== null) {
@@ -30167,10 +30283,10 @@ function InsertTableDialog({
   activeEditor,
   onClose
 }) {
-  const [rows, setRows] = React20.useState("5");
-  const [columns, setColumns] = React20.useState("5");
-  const [includeHeaders, setIncludeHeaders] = React20.useState(true);
-  const isDisabled = React20.useMemo(() => {
+  const [rows, setRows] = React21.useState("5");
+  const [columns, setColumns] = React21.useState("5");
+  const [includeHeaders, setIncludeHeaders] = React21.useState(true);
+  const isDisabled = React21.useMemo(() => {
     const row = Number(rows);
     const column = Number(columns);
     return !(row && row > 0 && row <= 500 && column && column > 0 && column <= 100);
@@ -30254,7 +30370,7 @@ function InsertTableDialog({
 }
 function InsertTableCommandPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!editor.hasNodes([table.TableNode])) return;
     return editor.registerCommand(
       INSERT_NEW_TABLE_COMMAND,
@@ -30278,7 +30394,7 @@ var init_table_plugin = __esm({
     init_input();
     init_label();
     INSERT_NEW_TABLE_COMMAND = lexical.createCommand("INSERT_NEW_TABLE_COMMAND");
-    React20.createContext({
+    React21.createContext({
       cellEditorConfig: null,
       cellEditorPlugins: null,
       set: () => {
@@ -30336,7 +30452,7 @@ function registerKeyTimeStampTracker() {
 }
 function TabFocusPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!hasRegisteredKeyDownListener) {
       registerKeyTimeStampTracker();
       hasRegisteredKeyDownListener = true;
@@ -30404,10 +30520,10 @@ function TableColumnResizerPlugin({
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const isEditable = useLexicalEditable.useLexicalEditable();
-  const dragRef = React20.useRef(null);
-  const [hoverState, setHoverState] = React20.useState(null);
-  const resizerRef = React20.useRef(null);
-  const onPointerDownImpl = React20.useCallback((event, cell, edge) => {
+  const dragRef = React21.useRef(null);
+  const [hoverState, setHoverState] = React21.useState(null);
+  const resizerRef = React21.useRef(null);
+  const onPointerDownImpl = React21.useCallback((event, cell, edge) => {
     if (event.button !== 0) return;
     event.preventDefault();
     const target = event.target;
@@ -30535,7 +30651,7 @@ function TableColumnResizerPlugin({
     document.addEventListener("pointermove", onPointerMoveDocument);
     document.addEventListener("pointerup", onPointerUpDocument);
   }, [editor]);
-  const updateResizerPosition = React20.useCallback(() => {
+  const updateResizerPosition = React21.useCallback(() => {
     const state = hoverState;
     if (state === null || !resizerRef.current) return;
     const { cellKey, edge } = state;
@@ -30557,7 +30673,7 @@ function TableColumnResizerPlugin({
     resizerElem.style.height = `${height}px`;
     resizerElem.style.opacity = "1";
   }, [editor, hoverState, anchorElem]);
-  React20.useLayoutEffect(() => {
+  React21.useLayoutEffect(() => {
     updateResizerPosition();
     window.addEventListener("resize", updateResizerPosition);
     window.addEventListener("scroll", updateResizerPosition, true);
@@ -30580,7 +30696,7 @@ function TableColumnResizerPlugin({
       updateListener();
     };
   }, [editor, hoverState, updateResizerPosition]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (!isEditable) return;
     const rootElement = editor.getRootElement();
     if (!rootElement) return;
@@ -30637,7 +30753,7 @@ function TableColumnResizerPlugin({
       clearCursor();
     };
   }, [editor, isEditable, hoverState, anchorElem]);
-  const resizer = React20.useMemo(() => {
+  const resizer = React21.useMemo(() => {
     const state = hoverState;
     if (state === null) return null;
     const { cellKey, edge } = state;
@@ -30709,13 +30825,13 @@ function ToolbarContext({
   );
 }
 function useToolbarContext() {
-  return React20.useContext(Context);
+  return React21.useContext(Context);
 }
 var Context;
 var init_toolbar_context = __esm({
   "src/context/toolbar-context.tsx"() {
     "use client";
-    Context = React20.createContext({
+    Context = React21.createContext({
       activeEditor: {},
       $updateToolbar: () => {
       },
@@ -30730,7 +30846,7 @@ var init_toolbar_context = __esm({
 function useUpdateToolbarHandler(callback) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const { activeEditor } = useToolbarContext();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return activeEditor.registerCommand(
       lexical.SELECTION_CHANGE_COMMAND,
       () => {
@@ -30743,7 +30859,7 @@ function useUpdateToolbarHandler(callback) {
       lexical.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, callback]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     activeEditor.getEditorState().read(() => {
       const selection = lexical.$getSelection();
       if (selection) {
@@ -30823,7 +30939,7 @@ function BlockFormatDropDown({
   const { activeEditor, blockType, setBlockType } = useToolbarContext();
   const currentBlockType = blockTypeToBlockName[blockType] ? blockType : "paragraph";
   const currentBlockMeta = blockTypeToBlockName[currentBlockType];
-  const $updateToolbar = React20.useCallback(
+  const $updateToolbar = React21.useCallback(
     (selection) => {
       if (!lexical.$isRangeSelection(selection)) return;
       const anchorNode = selection.anchor.getNode();
@@ -31316,7 +31432,7 @@ var init_insert_table = __esm({
 });
 function ClearFormattingToolbarPlugin() {
   const { activeEditor } = useToolbarContext();
-  const clearFormatting = React20.useCallback(() => {
+  const clearFormatting = React21.useCallback(() => {
     activeEditor.update(() => {
       const selection = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection) || table.$isTableSelection(selection)) {
@@ -31388,8 +31504,8 @@ function getCodeLanguageOptions2() {
 }
 function CodeLanguageToolbarPlugin() {
   const { activeEditor } = useToolbarContext();
-  const [codeLanguage, setCodeLanguage] = React20.useState("");
-  const [selectedElementKey, setSelectedElementKey] = React20.useState(
+  const [codeLanguage, setCodeLanguage] = React21.useState("");
+  const [selectedElementKey, setSelectedElementKey] = React21.useState(
     null
   );
   const $updateToolbar = (selection) => {
@@ -31417,7 +31533,7 @@ function CodeLanguageToolbarPlugin() {
     }
   };
   useUpdateToolbarHandler($updateToolbar);
-  const onCodeLanguageSelect = React20.useCallback(
+  const onCodeLanguageSelect = React21.useCallback(
     (value) => {
       activeEditor.update(() => {
         if (selectedElementKey !== null) {
@@ -31464,8 +31580,8 @@ function ElementFormatToolbarPlugin({
   separator = true
 }) {
   const { activeEditor } = useToolbarContext();
-  const [elementFormat, setElementFormat] = React20.useState("left");
-  const activeLayoutItemKeyRef = React20.useRef(null);
+  const [elementFormat, setElementFormat] = React21.useState("left");
+  const activeLayoutItemKeyRef = React21.useRef(null);
   const extractPadding = (style) => {
     const match = style.match(/padding\s*:\s*(\d+)px/i);
     if (!match?.[1]) return null;
@@ -31644,8 +31760,8 @@ var init_element_format_toolbar_plugin = __esm({
 });
 function FontBackgroundToolbarPlugin() {
   const { activeEditor } = useToolbarContext();
-  const [bgColor, setBgColor] = React20.useState("#fff");
-  const activeLayoutItemKeyRef = React20.useRef(null);
+  const [bgColor, setBgColor] = React21.useState("#fff");
+  const activeLayoutItemKeyRef = React21.useRef(null);
   const extractStyleValue = (style, property) => {
     const escapedProperty = property.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     const match = style.match(new RegExp(`${escapedProperty}\\s*:\\s*([^;]+)`, "i"));
@@ -31686,7 +31802,7 @@ function FontBackgroundToolbarPlugin() {
     }
   };
   useUpdateToolbarHandler($updateToolbar);
-  const applyStyleText = React20.useCallback(
+  const applyStyleText = React21.useCallback(
     (styles, skipHistoryStack) => {
       activeEditor.update(
         () => {
@@ -31701,7 +31817,7 @@ function FontBackgroundToolbarPlugin() {
     },
     [activeEditor]
   );
-  const onBgColorSelect = React20.useCallback(
+  const onBgColorSelect = React21.useCallback(
     (value) => {
       let shouldApplyTextStyle = true;
       activeEditor.update(() => {
@@ -31782,7 +31898,7 @@ var init_font_background_toolbar_plugin = __esm({
 });
 function FontColorToolbarPlugin() {
   const { activeEditor } = useToolbarContext();
-  const [fontColor, setFontColor] = React20.useState("#000");
+  const [fontColor, setFontColor] = React21.useState("#000");
   const $updateToolbar = (selection$1) => {
     if (lexical.$isRangeSelection(selection$1)) {
       setFontColor(
@@ -31791,7 +31907,7 @@ function FontColorToolbarPlugin() {
     }
   };
   useUpdateToolbarHandler($updateToolbar);
-  const applyStyleText = React20.useCallback(
+  const applyStyleText = React21.useCallback(
     (styles) => {
       activeEditor.update(() => {
         const selection$1 = lexical.$getSelection();
@@ -31803,7 +31919,7 @@ function FontColorToolbarPlugin() {
     },
     [activeEditor]
   );
-  const onFontColorSelect = React20.useCallback(
+  const onFontColorSelect = React21.useCallback(
     (value) => {
       applyStyleText({ color: value });
     },
@@ -31856,7 +31972,7 @@ var init_font_color_toolbar_plugin = __esm({
 });
 function FontFamilyToolbarPlugin() {
   const style = "font-family";
-  const [fontFamily, setFontFamily] = React20.useState("Arial");
+  const [fontFamily, setFontFamily] = React21.useState("Arial");
   const { activeEditor } = useToolbarContext();
   const $updateToolbar = (selection$1) => {
     if (lexical.$isRangeSelection(selection$1)) {
@@ -31866,7 +31982,7 @@ function FontFamilyToolbarPlugin() {
     }
   };
   useUpdateToolbarHandler($updateToolbar);
-  const handleClick = React20.useCallback(
+  const handleClick = React21.useCallback(
     (option) => {
       activeEditor.update(() => {
         const selection$1 = lexical.$getSelection();
@@ -31928,8 +32044,8 @@ var init_font_family_toolbar_plugin = __esm({
 });
 function FontFormatToolbarPlugin() {
   const { activeEditor } = useToolbarContext();
-  const [activeFormats, setActiveFormats] = React20.useState([]);
-  const $updateToolbar = React20.useCallback((selection) => {
+  const [activeFormats, setActiveFormats] = React21.useState([]);
+  const $updateToolbar = React21.useCallback((selection) => {
     if (lexical.$isRangeSelection(selection) || table.$isTableSelection(selection)) {
       const formats = [];
       FORMATS.forEach(({ format }) => {
@@ -31982,9 +32098,9 @@ var init_font_format_toolbar_plugin = __esm({
 });
 function FontSizeToolbarPlugin() {
   const style = "font-size";
-  const [fontSize, setFontSize] = React20.useState(DEFAULT_FONT_SIZE);
-  const fontSizeRef = React20.useRef(fontSize);
-  React20.useEffect(() => {
+  const [fontSize, setFontSize] = React21.useState(DEFAULT_FONT_SIZE);
+  const fontSizeRef = React21.useRef(fontSize);
+  React21.useEffect(() => {
     fontSizeRef.current = fontSize;
   }, [fontSize]);
   const { activeEditor } = useToolbarContext();
@@ -32000,7 +32116,7 @@ function FontSizeToolbarPlugin() {
     }
   };
   useUpdateToolbarHandler($updateToolbar);
-  const updateFontSize = React20.useCallback(
+  const updateFontSize = React21.useCallback(
     (newSize) => {
       const size = Math.min(Math.max(newSize, MIN_FONT_SIZE), MAX_FONT_SIZE);
       activeEditor.update(() => {
@@ -32034,9 +32150,9 @@ function FontSizeToolbarPlugin() {
       updateFontSize(fontSize);
     }
   };
-  const timerRef = React20.useRef(null);
-  const intervalRef = React20.useRef(null);
-  const stopTimer = React20.useCallback(() => {
+  const timerRef = React21.useRef(null);
+  const intervalRef = React21.useRef(null);
+  const stopTimer = React21.useCallback(() => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
@@ -32046,7 +32162,7 @@ function FontSizeToolbarPlugin() {
       intervalRef.current = null;
     }
   }, []);
-  const startTimer = React20.useCallback(
+  const startTimer = React21.useCallback(
     (increment) => {
       stopTimer();
       const currentSize = typeof fontSizeRef.current === "number" ? fontSizeRef.current : DEFAULT_FONT_SIZE;
@@ -32066,7 +32182,7 @@ function FontSizeToolbarPlugin() {
     },
     [updateFontSize, stopTimer]
   );
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return () => stopTimer();
   }, [stopTimer]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -32138,10 +32254,10 @@ var init_font_size_toolbar_plugin = __esm({
 function HistoryToolbarPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const { activeEditor, $updateToolbar } = useToolbarContext();
-  const [isEditable, setIsEditable] = React20.useState(editor.isEditable());
-  const [canUndo, setCanUndo] = React20.useState(false);
-  const [canRedo, setCanRedo] = React20.useState(false);
-  React20.useEffect(() => {
+  const [isEditable, setIsEditable] = React21.useState(editor.isEditable());
+  const [canUndo, setCanUndo] = React21.useState(false);
+  const [canRedo, setCanRedo] = React21.useState(false);
+  React21.useEffect(() => {
     return utils.mergeRegister(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -32213,7 +32329,7 @@ var Toggle;
 var init_toggle = __esm({
   "src/ui/toggle.tsx"() {
     init_utils();
-    Toggle = React20__namespace.forwardRef(({ className, pressed, onPressedChange, variant = "default", size = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    Toggle = React21__namespace.forwardRef(({ className, pressed, onPressedChange, variant = "default", size = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         ref,
@@ -32237,7 +32353,7 @@ function LinkToolbarPlugin({
   setIsLinkEditMode
 }) {
   const { activeEditor } = useToolbarContext();
-  const [isLink, setIsLink] = React20.useState(false);
+  const [isLink, setIsLink] = React21.useState(false);
   const $updateToolbar = (selection) => {
     if (lexical.$isRangeSelection(selection)) {
       const node = getSelectedNode(selection);
@@ -32250,7 +32366,7 @@ function LinkToolbarPlugin({
     }
   };
   useUpdateToolbarHandler($updateToolbar);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return activeEditor.registerCommand(
       lexical.KEY_MODIFIER_COMMAND,
       (payload) => {
@@ -32273,7 +32389,7 @@ function LinkToolbarPlugin({
       lexical.COMMAND_PRIORITY_NORMAL
     );
   }, [activeEditor, isLink, setIsLinkEditMode]);
-  const insertLink = React20.useCallback(() => {
+  const insertLink = React21.useCallback(() => {
     if (!isLink) {
       setIsLinkEditMode(true);
       activeEditor.dispatchCommand(link.TOGGLE_LINK_COMMAND, sanitizeUrl("https://"));
@@ -32307,8 +32423,8 @@ var init_link_toolbar_plugin = __esm({
 });
 function SubSuperToolbarPlugin() {
   const { activeEditor } = useToolbarContext();
-  const [isSubscript, setIsSubscript] = React20.useState(false);
-  const [isSuperscript, setIsSuperscript] = React20.useState(false);
+  const [isSubscript, setIsSubscript] = React21.useState(false);
+  const [isSuperscript, setIsSuperscript] = React21.useState(false);
   const $updateToolbar = (selection) => {
     if (lexical.$isRangeSelection(selection) || table.$isTableSelection(selection)) {
       setIsSubscript(selection.hasFormat("subscript"));
@@ -32358,8 +32474,8 @@ var init_subsuper_toolbar_plugin = __esm({
 });
 function useHeaderHeight() {
   const { ref: headerRef, height: headerHeightValue } = useElementSize();
-  const [headerHeight, setHeaderHeight] = React20.useState(0);
-  const findAndSetHeader = React20.useCallback(() => {
+  const [headerHeight, setHeaderHeight] = React21.useState(0);
+  const findAndSetHeader = React21.useCallback(() => {
     if (typeof document === "undefined") {
       return null;
     }
@@ -32373,7 +32489,7 @@ function useHeaderHeight() {
     }
     return null;
   }, [headerRef]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (typeof document === "undefined") {
       return;
     }
@@ -32401,7 +32517,7 @@ function useHeaderHeight() {
       headerRef(null);
     };
   }, [findAndSetHeader, headerRef]);
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     if (headerHeightValue > 0) {
       setHeaderHeight(headerHeightValue);
     } else {
@@ -32433,12 +32549,12 @@ function ToolbarPlugin({
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const { headerHeight } = useHeaderHeight();
-  const [activeEditor, setActiveEditor] = React20.useState(editor);
-  const [blockType, setBlockType] = React20.useState("paragraph");
+  const [activeEditor, setActiveEditor] = React21.useState(editor);
+  const [blockType, setBlockType] = React21.useState("paragraph");
   const [modal, showModal] = useEditorModal();
   const $updateToolbar = () => {
   };
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     return activeEditor.registerCommand(
       lexical.SELECTION_CHANGE_COMMAND,
       (_payload, newEditor) => {
@@ -32487,7 +32603,7 @@ var init_toolbar_plugin = __esm({
 });
 function TypingPerfPlugin() {
   const report = useReport();
-  React20.useEffect(() => {
+  React21.useEffect(() => {
     let start = 0;
     let timerId;
     let keyPressTimerId;
@@ -32868,8 +32984,8 @@ function Plugins({
   readOnly = false,
   placeholder = ""
 }) {
-  const [floatingAnchorElem, setFloatingAnchorElem] = React20.useState(null);
-  const [isLinkEditMode, setIsLinkEditMode] = React20.useState(false);
+  const [floatingAnchorElem, setFloatingAnchorElem] = React21.useState(null);
+  const [isLinkEditMode, setIsLinkEditMode] = React21.useState(false);
   const onRef = (_floatingAnchorElem) => {
     if (_floatingAnchorElem !== null) {
       setFloatingAnchorElem(_floatingAnchorElem);
@@ -33074,9 +33190,9 @@ function Plugins({
       ] })
     ] }),
     !readOnly && /* @__PURE__ */ jsxRuntime.jsx(ActionsPlugin, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-actions-bar", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(CounterCharacterPlugin, { charset: "UTF-16" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Flex, { align: "center", className: "editor-flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(CounterCharacterPlugin, { charset: "UTF-16" }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "editor-flex-1" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "editor-flex-shrink-0 editor-flex-end", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", justify: "end", gap: 1, wrap: "nowrap", className: "editor-flex-shrink-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx(SpeechToTextPlugin, {}),
         /* @__PURE__ */ jsxRuntime.jsx(ShareContentPlugin, {}),
         /* @__PURE__ */ jsxRuntime.jsx(ImportExportPlugin, {}),
@@ -33194,6 +33310,7 @@ var init_plugins = __esm({
     init_markdown_tweet_transformer();
     init_markdown_list_transformer();
     init_separator();
+    init_flex();
   }
 });
 
@@ -33342,14 +33459,14 @@ function Editor({
 }) {
   const { ref: editorRef, width: editorWidth } = useElementSize();
   const editorMaxWidth = editorWidth || void 0;
-  const [config, setConfig] = React20.useState(null);
-  React20.useEffect(() => {
+  const [config, setConfig] = React21.useState(null);
+  React21.useEffect(() => {
     Promise.all([
       Promise.resolve().then(() => (init_nodes(), nodes_exports)).then((m) => m.nodes),
       Promise.resolve().then(() => (init_plugins(), plugins_exports)).then((m) => ({ Plugins: m.Plugins }))
     ]).then(([nodes2, { Plugins: Plugins3 }]) => setConfig({ nodes: nodes2, Plugins: Plugins3 }));
   }, []);
-  const editorConfig = React20.useMemo(() => {
+  const editorConfig = React21.useMemo(() => {
     if (!config || !config.nodes) return null;
     const validNodes = config.nodes.filter((node) => {
       if (node === void 0) {