@thangph2146/lexical-editor 0.0.3 → 0.0.5

package/dist/editor-x/editor.js

@@ -1,13 +1,13 @@
 import * as React20 from 'react';
-import { createContext, useRef, useState, useEffect, useCallback, Suspense, useContext, useMemo, useLayoutEffect } from 'react';
+import { createContext, useRef, useState, useEffect, useCallback, Suspense, useMemo, useContext, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { $patchStyleText, $setBlocksType, $getSelectionStyleValueForProperty, $isAtNodeEnd } from '@lexical/selection';
 import { mergeRegister, IS_APPLE, $findMatchingParent, $getNearestNodeOfType, $getNearestBlockElementAncestorOrThrow, $wrapNodeInElement, $insertNodeToNearestRoot, mediaFileReader, isMimeType, addClassNamesToElement, calculateZoomLevel } from '@lexical/utils';
-import { $getNodeByKey, FORMAT_ELEMENT_COMMAND, $isNodeSelection, $getRoot, $getSelection, $setSelection, $isRangeSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND, $isRootOrShadowRoot, FORMAT_TEXT_COMMAND, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_NORMAL, $isTextNode, $createParagraphNode, $isElementNode, COMMAND_PRIORITY_EDITOR, $insertNodes, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, DROP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_LEFT_COMMAND, FOCUS_COMMAND, KEY_TAB_COMMAND, CUT_COMMAND, COPY_COMMAND, PASTE_COMMAND, $isDecoratorNode, $createTextNode, INDENT_CONTENT_COMMAND, CLEAR_HISTORY_COMMAND, CLEAR_EDITOR_COMMAND, ParagraphNode, TextNode, OUTDENT_CONTENT_COMMAND, $getNearestNodeFromDOMNode, $applyNodeReplacement, $createRangeSelection, $isParagraphNode, DecoratorNode, createEditor, RootNode, ElementNode, createCommand, HISTORY_MERGE_TAG, $isLineBreakNode, isHTMLElement, $addUpdateTag } from 'lexical';
+import { $getNodeByKey, FORMAT_ELEMENT_COMMAND, $isNodeSelection, $getRoot, $getSelection, $setSelection, $isRangeSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_CRITICAL, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND, $isRootOrShadowRoot, FORMAT_TEXT_COMMAND, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_NORMAL, $isTextNode, $createParagraphNode, $isElementNode, COMMAND_PRIORITY_EDITOR, $getNearestNodeFromDOMNode, $insertNodes, COMMAND_PRIORITY_HIGH, DRAGOVER_COMMAND, DROP_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ARROW_LEFT_COMMAND, FOCUS_COMMAND, KEY_TAB_COMMAND, CUT_COMMAND, COPY_COMMAND, PASTE_COMMAND, $isDecoratorNode, $createTextNode, INDENT_CONTENT_COMMAND, CLEAR_HISTORY_COMMAND, CLEAR_EDITOR_COMMAND, ParagraphNode, TextNode, OUTDENT_CONTENT_COMMAND, $applyNodeReplacement, $createRangeSelection, $isParagraphNode, DecoratorNode, createEditor, RootNode, ElementNode, createCommand, HISTORY_MERGE_TAG, $isLineBreakNode, isHTMLElement, $addUpdateTag } from 'lexical';
 import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
 import { $isDecoratorBlockNode, DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-import { UndoIcon, RedoIcon, PlusIcon, ScissorsIcon, ImageIcon, TableIcon, Columns3Icon, TypeIcon, Minus, Plus, SubscriptIcon, SuperscriptIcon, LinkIcon, EraserIcon, BaselineIcon, PaintBucketIcon, IndentDecreaseIcon, IndentIncreaseIcon, CircleUserRoundIcon, GripVerticalIcon, TextIcon, ListTodoIcon, ListOrderedIcon, ListIcon, QuoteIcon, CodeIcon, MinusIcon, Combine, SplitSquareVertical, Columns3, Rows3, LayoutGrid, Palette, Link2Off, Scissors, Copy, Clipboard, ClipboardType, Trash2, SendIcon, UploadIcon, DownloadIcon, FileTextIcon, LockIcon, UnlockIcon, Trash2Icon, NotebookPenIcon, Loader2, PipetteIcon, Heading3Icon, Heading2Icon, Heading1Icon, AlignJustifyIcon, AlignRightIcon, AlignCenterIcon, AlignLeftIcon, YoutubeIcon, TwitterIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ChevronRight, Folder, CircleCheckIcon, CopyIcon, X, Check, Pencil, Trash, MicIcon, ListPlusIcon, ListMinusIcon, CaseSensitiveIcon, AlignLeft, AlignCenter, AlignRight, Minimize2, Maximize2, ImageMinus, ImagePlus } from 'lucide-react';
+import { UndoIcon, RedoIcon, PlusIcon, ScissorsIcon, ImageIcon, TableIcon, Columns3Icon, TypeIcon, Minus, Plus, SubscriptIcon, SuperscriptIcon, LinkIcon, EraserIcon, BaselineIcon, PaintBucketIcon, IndentDecreaseIcon, IndentIncreaseIcon, CircleUserRoundIcon, GripVerticalIcon, TextIcon, ListTodoIcon, ListOrderedIcon, ListIcon, QuoteIcon, CodeIcon, MinusIcon, Combine, SplitSquareVertical, Columns3, Rows3, LayoutGrid, Palette, Hash, Link2Off, Scissors, Copy, Clipboard, ClipboardType, Trash2, SendIcon, UploadIcon, DownloadIcon, FileTextIcon, LockIcon, UnlockIcon, Trash2Icon, NotebookPenIcon, Loader2, PipetteIcon, Heading3Icon, Heading2Icon, Heading1Icon, AlignJustifyIcon, AlignRightIcon, AlignCenterIcon, AlignLeftIcon, YoutubeIcon, TwitterIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ChevronRight, Folder, CircleCheckIcon, CopyIcon, X, Check, Pencil, Trash, MicIcon, ListPlusIcon, ListMinusIcon, CaseSensitiveIcon, AlignLeft, AlignCenter, AlignRight, Minimize2, Maximize2, ImageMinus, ImagePlus } from 'lucide-react';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { createPortal } from 'react-dom';
@@ -25,7 +25,7 @@ import { TOGGLE_LINK_COMMAND, $isLinkNode, LinkNode, AutoLinkNode, $createLinkNo
 import { OverflowNode } from '@lexical/overflow';
 import { INSERT_HORIZONTAL_RULE_COMMAND, HorizontalRuleNode, $createHorizontalRuleNode, $isHorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
 import { $isHeadingNode, $isQuoteNode, $createHeadingNode, $createQuoteNode, DRAG_DROP_PASTE, HeadingNode, QuoteNode } from '@lexical/rich-text';
-import { $isTableSelection, TableNode, INSERT_TABLE_COMMAND, $isTableCellNode, $mergeCells, $unmergeCell, $insertTableColumnAtSelection, $insertTableRowAtSelection, TableCellNode, TableRowNode, $createTableNodeWithDimensions, $getTableNodeFromLexicalNodeOrThrow, $computeTableMapSkipCellCheck, $isTableNode, $isTableRowNode, TableCellHeaderStates, $createTableNode, $createTableRowNode, $createTableCellNode } from '@lexical/table';
+import { $isTableSelection, TableNode, $isTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $computeTableMapSkipCellCheck, INSERT_TABLE_COMMAND, $mergeCells, $unmergeCell, $insertTableColumnAtSelection, $insertTableRowAtSelection, TableCellNode, TableRowNode, $createTableNodeWithDimensions, $isTableNode, $isTableRowNode, TableCellHeaderStates, $createTableNode, $createTableRowNode, $createTableCellNode } from '@lexical/table';
 import { $rootTextContent } from '@lexical/text';
 import { editorStateFromSerializedDocument, serializedDocumentFromEditorState, importFile, exportFile } from '@lexical/file';
 import { CHECK_LIST, MULTILINE_ELEMENT_TRANSFORMERS, TEXT_FORMAT_TRANSFORMERS, TEXT_MATCH_TRANSFORMERS, ELEMENT_TRANSFORMERS, $convertFromMarkdownString, $convertToMarkdownString } from '@lexical/markdown';
@@ -2964,8 +2964,8 @@ var init_button = __esm({
   "src/ui/button.tsx"() {
     init_utils();
     Button = React20.forwardRef(
-      ({ className, variant = "default", size = "default", type = "button", ...props }, ref) => {
-        return /* @__PURE__ */ jsx(
+      ({ className, variant = "default", size = "default", type = "button", isLoading, disabled, children, ...props }, ref) => {
+        return /* @__PURE__ */ jsxs(
           "button",
           {
             type,
@@ -2973,10 +2973,16 @@ var init_button = __esm({
               "editor-btn",
               variant !== "default" && `editor-btn--${variant}`,
               size !== "default" && `editor-btn--size-${size}`,
+              isLoading && "editor-btn--loading",
               className
             ),
+            disabled: isLoading || disabled,
             ref,
-            ...props
+            ...props,
+            children: [
+              isLoading && /* @__PURE__ */ jsx(Loader2, { className: "editor-btn__loader editor-animate-spin", size: 16 }),
+              /* @__PURE__ */ jsx("span", { className: cn("editor-btn__content", isLoading && "editor-opacity-0"), children })
+            ]
           }
         );
       }
@@ -4349,8 +4355,8 @@ function ImagePickerFolderTree({
       /* @__PURE__ */ jsx(TypographyP, { className: "editor-truncate", children: folder.name }),
       /* @__PURE__ */ jsx(TypographySpanSmallMuted, { className: "editor-ml-auto editor-shrink-0", children: `${folder.images.length} h\xECnh${folder.subfolders.length > 0 ? `, ${folder.subfolders.length} th\u01B0 m\u1EE5c` : ""}` })
     ] }),
-    /* @__PURE__ */ jsxs(CollapsibleContent, { className: "editor-ml-4 editor-mt-1", children: [
-      folder.images.length > 0 && /* @__PURE__ */ jsx("div", { className: "editor-image-grid", children: folder.images.map((image) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(CollapsibleContent, { className: "editor-ml-4 editor-mt-1 editor-flex editor-flex-col editor-gap-1", children: [
+      folder.images.length > 0 && /* @__PURE__ */ jsx("div", { className: "editor-image-grid editor-gap-2", children: folder.images.map((image) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -4437,10 +4443,10 @@ function InsertImageUploadsDialogBody({
   return /* @__PURE__ */ jsxs("div", { className: "editor-form-grid", children: [
     /* @__PURE__ */ jsxs("div", { className: "editor-form-item", children: [
       /* @__PURE__ */ jsx(Label, { children: "Ch\u1ECDn h\xECnh \u1EA3nh t\u1EEB th\u01B0 vi\u1EC7n" }),
-      isLoading ? /* @__PURE__ */ jsx("div", { className: "editor-flex-center-justify-py-8", children: /* @__PURE__ */ jsx(Loader2, { className: "editor-loader" }) }) : !folderTree || folderTree.subfolders.length === 0 && folderTree.images.length === 0 ? /* @__PURE__ */ jsx("div", { className: "editor-empty-state", children: /* @__PURE__ */ jsx(TypographySpanSmallMuted, { children: "Ch\u01B0a c\xF3 h\xECnh \u1EA3nh n\xE0o \u0111\u01B0\u1EE3c upload" }) }) : /* @__PURE__ */ jsxs("div", { className: "editor-scroll-area", children: [
+      isLoading ? /* @__PURE__ */ jsx("div", { className: "editor-flex-center-justify-py-8", children: /* @__PURE__ */ jsx(Loader2, { className: "editor-loader" }) }) : !folderTree || folderTree.subfolders.length === 0 && folderTree.images.length === 0 ? /* @__PURE__ */ jsx("div", { className: "editor-empty-state", children: /* @__PURE__ */ jsx(TypographySpanSmallMuted, { children: "Ch\u01B0a c\xF3 h\xECnh \u1EA3nh n\xE0o \u0111\u01B0\u1EE3c upload" }) }) : /* @__PURE__ */ jsxs("div", { className: "editor-scroll-area editor-flex editor-flex-col editor-gap-1", children: [
         folderTree.images.length > 0 && /* @__PURE__ */ jsxs("div", { className: "editor-mb-3", children: [
           /* @__PURE__ */ jsx(TypographySpanSmallMuted, { className: "editor-mb-2 editor-px-1", children: "Root" }),
-          /* @__PURE__ */ jsx("div", { className: "editor-image-grid", children: folderTree.images.map((image) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "editor-image-grid editor-gap-2", children: folderTree.images.map((image) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -5036,13 +5042,13 @@ function ContentEditable({
   placeholderClassName,
   placeholderDefaults = true
 }) {
-  const isReadOnly = className?.includes("--readonly");
+  const isReadOnlyOrReview = className?.includes("--readonly") || className?.includes("--review");
   return /* @__PURE__ */ jsx(
     ContentEditable$1,
     {
       className: cn(
         "ContentEditable__root relative block focus:outline-none",
-        !isReadOnly && "min-h-72 px-8 py-4",
+        !isReadOnlyOrReview && "min-h-72 px-8 py-4",
         className
       ),
       "aria-placeholder": placeholder2,
@@ -5053,7 +5059,7 @@ function ContentEditable({
           className: cn(
             placeholderClassName,
             "text-muted-foreground pointer-events-none select-none",
-            placeholderDefaults && !isReadOnly && "absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis"
+            placeholderDefaults && !isReadOnlyOrReview && "absolute top-0 left-0 overflow-hidden px-8 py-[18px] text-ellipsis"
           ),
           children: placeholder2
         }
@@ -6481,10 +6487,10 @@ var init_flex = __esm({
             ref,
             className: cn(
               "editor-flex",
-              align && `editor-flex--items-${align}`,
-              justify && `editor-flex--justify-${justify}`,
-              direction && `editor-flex--flex-${direction}`,
-              wrap && `editor-flex--flex-${wrap}`,
+              align && `editor-items-${align}`,
+              justify && `editor-justify-${justify}`,
+              direction && `editor-flex-${direction}`,
+              wrap && `editor-flex-${wrap}`,
               className
             ),
             style: { ...gapStyle, ...style },
@@ -10162,6 +10168,9 @@ var init_list_color_plugin = __esm({
 });
 function ContextMenuPlugin() {
   const [editor] = useLexicalComposerContext();
+  const [contextTarget, setContextTarget] = useState(null);
+  const [showMarkerDialog, setShowMarkerDialog] = useState(false);
+  const [customMarker, setCustomMarker] = useState("");
   const isInTable = (node) => $findMatchingParent(node, $isTableCellNode) !== null;
   const isMergedCell = (node) => {
     const cell = $findMatchingParent(node, $isTableCellNode);
@@ -10173,6 +10182,105 @@ function ContextMenuPlugin() {
   };
   const isInLayoutItem = (node) => $findMatchingParent(node, $isLayoutItemNode) !== null;
   const isInList = (node) => $findMatchingParent(node, $isListNode) !== null;
+  const isInNumberList = (node) => {
+    const listNode = $findMatchingParent(node, $isListNode);
+    return $isListNode(listNode) && listNode.getListType() === "number";
+  };
+  useEffect(() => {
+    const rootElement = editor.getRootElement();
+    if (!rootElement) return;
+    const onContextMenu = (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+      setContextTarget(target);
+    };
+    rootElement.addEventListener("contextmenu", onContextMenu);
+    return () => {
+      rootElement.removeEventListener("contextmenu", onContextMenu);
+    };
+  }, [editor]);
+  const getContextAnchorNode = useCallback(() => {
+    if (contextTarget) {
+      const nearestNode = $getNearestNodeFromDOMNode(contextTarget);
+      if (nearestNode) return nearestNode;
+    }
+    const selection = $getSelection();
+    if ($isRangeSelection(selection)) {
+      return selection.anchor.getNode();
+    }
+    return null;
+  }, [contextTarget]);
+  const updateNumberListMarkerType = useCallback((markerType) => {
+    editor.update(() => {
+      const anchorNode = getContextAnchorNode();
+      if (!anchorNode) return;
+      const nearestListNode = $findMatchingParent(
+        anchorNode,
+        (node) => $isListNode(node) && node.getListType() === "number"
+      );
+      if (!nearestListNode) return;
+      let listNode = nearestListNode;
+      let parent = listNode.getParent();
+      while (parent) {
+        if ($isListNode(parent) && parent.getListType() === "number") {
+          listNode = parent;
+          parent = parent.getParent();
+          continue;
+        }
+        break;
+      }
+      if ($isListWithColorNode(listNode)) {
+        listNode.setMarkerType(markerType);
+        return;
+      }
+      const newList = createListWithColorNodeFromRegistry(
+        editor,
+        listNode.getListType(),
+        listNode.getStart()
+      );
+      newList.setMarkerType(markerType);
+      const children = listNode.getChildren();
+      for (const child of children) newList.append(child);
+      listNode.replace(newList);
+    });
+  }, [editor, getContextAnchorNode]);
+  const syncMarkerToSameLevelLists = useCallback((targetListNode, markerType) => {
+    editor.update(() => {
+      const parent = targetListNode.getParent();
+      if (!parent) return;
+      const siblings = parent.getChildren();
+      for (const sibling of siblings) {
+        if ($isListNode(sibling) && sibling.getListType() === "number" && sibling !== targetListNode) {
+          if ($isListWithColorNode(sibling)) {
+            sibling.setMarkerType(markerType);
+          } else {
+            const newList = $createListWithColorNode("number", sibling.getStart());
+            newList.setMarkerType(markerType);
+            const children = sibling.getChildren();
+            for (const child of children) newList.append(child);
+            sibling.replace(newList);
+          }
+        }
+      }
+    });
+  }, [editor]);
+  const handleCustomMarkerSubmit = () => {
+    if (customMarker.trim()) {
+      editor.update(() => {
+        const anchorNode = getContextAnchorNode();
+        if (!anchorNode) return;
+        const nearestListNode = $findMatchingParent(
+          anchorNode,
+          (node) => $isListNode(node) && node.getListType() === "number"
+        );
+        if (!nearestListNode) return;
+        updateNumberListMarkerType(customMarker.trim());
+        syncMarkerToSameLevelLists(nearestListNode, customMarker.trim());
+      });
+      setShowMarkerDialog(false);
+      setCustomMarker("");
+    }
+  };
   const items = useMemo(() => {
     return [
       new NodeContextMenuOption(`G\u1ED9p \xF4`, {
@@ -10298,6 +10406,41 @@ function ContextMenuPlugin() {
       new NodeContextMenuSeparator({
         $showOn: isInList
       }),
+      new NodeContextMenuOption(`\u0110\xE1nh s\u1ED1 1, 2, 3`, {
+        $onSelect: () => {
+          updateNumberListMarkerType(void 0);
+        },
+        $showOn: isInNumberList,
+        disabled: false,
+        icon: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(ListOrderedIcon, {}) })
+      }),
+      new NodeContextMenuOption(`\u0110\xE1nh s\u1ED1 \u0111a c\u1EA5p 1.1 / 1.1.1`, {
+        $onSelect: () => {
+          updateNumberListMarkerType("multi-level");
+        },
+        $showOn: isInNumberList,
+        disabled: false,
+        icon: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(ListOrderedIcon, {}) })
+      }),
+      new NodeContextMenuOption(`\u0110\xE1nh s\u1ED1 a, b, c`, {
+        $onSelect: () => {
+          updateNumberListMarkerType("alpha");
+        },
+        $showOn: isInNumberList,
+        disabled: false,
+        icon: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(ListOrderedIcon, {}) })
+      }),
+      new NodeContextMenuOption(`T\xF9y ch\u1EC9nh marker...`, {
+        $onSelect: () => {
+          setShowMarkerDialog(true);
+        },
+        $showOn: isInNumberList,
+        disabled: false,
+        icon: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(Hash, { className: "text-blue-600" }) })
+      }),
+      new NodeContextMenuSeparator({
+        $showOn: isInNumberList
+      }),
       new NodeContextMenuOption(`Remove Link`, {
         $onSelect: () => {
           editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
@@ -10393,23 +10536,101 @@ function ContextMenuPlugin() {
         icon: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(Trash2, {}) })
       })
     ];
-  }, [editor]);
-  return /* @__PURE__ */ jsx(
-    NodeContextMenuPlugin,
-    {
-      className: "editor-context-menu",
-      itemClassName: "editor-context-menu-item",
-      separatorClassName: "editor-context-menu-separator",
-      items
-    }
-  );
+  }, [editor, updateNumberListMarkerType]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      NodeContextMenuPlugin,
+      {
+        className: "editor-context-menu",
+        itemClassName: "editor-context-menu-item",
+        separatorClassName: "editor-context-menu-separator",
+        items
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog, { open: showMarkerDialog, onOpenChange: setShowMarkerDialog, children: /* @__PURE__ */ jsxs(DialogContent, { style: { maxWidth: "400px" }, children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: "T\xF9y ch\u1EC9nh Marker" }),
+        /* @__PURE__ */ jsx("p", { className: "editor-text-sm editor-text-muted-foreground", children: "Nh\u1EADp ki\u1EC3u marker cho danh s\xE1ch c\u1EE7a b\u1EA1n" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "editor-flex-col editor-py-4 editor-gap-4", children: /* @__PURE__ */ jsxs("div", { className: "editor-flex-col editor-gap-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "marker-input", className: "editor-font-medium", children: "Ki\u1EC3u marker" }),
+        /* @__PURE__ */ jsxs("div", { className: "editor-relative editor-flex editor-items-center", children: [
+          /* @__PURE__ */ jsx(
+            Hash,
+            {
+              className: "editor-absolute editor-text-muted-foreground",
+              style: { left: "0.75rem" },
+              size: 16
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "marker-input",
+              value: customMarker,
+              onChange: (e) => setCustomMarker(e.target.value),
+              placeholder: "V\xED d\u1EE5: multi-level, alpha, 4.1, ...",
+              style: { paddingLeft: "2.25rem" },
+              onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                  handleCustomMarkerSubmit();
+                }
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "editor-flex-col editor-gap-1 editor-text-sm editor-text-muted-foreground editor-mt-2", children: [
+          /* @__PURE__ */ jsxs("p", { className: "editor-flex editor-items-center editor-gap-2", style: { margin: 0 }, children: [
+            /* @__PURE__ */ jsx("span", { className: "editor-font-medium", children: "multi-level" }),
+            " - Hi\u1EC3n th\u1ECB d\u1EA1ng 4.1, 4.1.1"
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "editor-flex editor-items-center editor-gap-2", style: { margin: 0 }, children: [
+            /* @__PURE__ */ jsx("span", { className: "editor-font-medium", children: "alpha" }),
+            " - Hi\u1EC3n th\u1ECB d\u1EA1ng a, b, c"
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "editor-flex editor-items-center editor-gap-2", style: { margin: 0 }, children: [
+            /* @__PURE__ */ jsx("span", { className: "editor-font-medium", children: "\u0110\u1EC3 tr\u1ED1ng" }),
+            " - V\u1EC1 m\u1EB7c \u0111\u1ECBnh 1, 2, 3"
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            onClick: () => setShowMarkerDialog(false),
+            children: "H\u1EE7y"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: handleCustomMarkerSubmit,
+            disabled: !customMarker.trim(),
+            className: "editor-gap-2",
+            children: [
+              /* @__PURE__ */ jsx(ListIcon, { size: 16 }),
+              /* @__PURE__ */ jsx("span", { children: "\xC1p d\u1EE5ng" })
+            ]
+          }
+        )
+      ] })
+    ] }) })
+  ] });
 }
 var init_context_menu_plugin = __esm({
   "src/plugins/context-menu-plugin.tsx"() {
     init_layout_item_node();
+    init_nodes();
+    init_list_with_color_node();
     init_layout_plugin();
     init_list_color_plugin();
     init_typography();
+    init_dialog();
+    init_input();
+    init_button();
+    init_label();
   }
 });
 function DragDropPastePlugin() {
@@ -28661,99 +28882,90 @@ function FloatingTextFormat({
       ref: popupCharStylesEditorRef,
       className: "editor-floating-text-format",
       children: editor.isEditable() && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 1, className: "editor-flex-nowrap", children: [
-        /* @__PURE__ */ jsx("div", { className: "editor-floating-group editor-flex editor-items-center", children: /* @__PURE__ */ jsxs(
-          ToggleGroup,
-          {
-            type: "multiple",
-            className: "editor-flex editor-items-center",
-            value: [
-              isBold ? "bold" : "",
-              isItalic ? "italic" : "",
-              isUnderline ? "underline" : "",
-              isStrikethrough ? "strikethrough" : "",
-              isCode ? "code" : "",
-              isLink ? "link" : ""
-            ].filter(Boolean),
-            children: [
-              /* @__PURE__ */ jsx(
-                ToggleGroupItem,
-                {
-                  value: "bold",
-                  "aria-label": "Toggle bold",
-                  className: "editor-toolbar-item",
-                  onClick: () => {
-                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
-                  },
-                  size: "sm",
-                  children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(BoldIcon, {}) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToggleGroupItem,
-                {
-                  value: "italic",
-                  "aria-label": "Toggle italic",
-                  className: "editor-toolbar-item",
-                  onClick: () => {
-                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
-                  },
-                  size: "sm",
-                  children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(ItalicIcon, {}) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToggleGroupItem,
-                {
-                  value: "underline",
-                  "aria-label": "Toggle underline",
-                  className: "editor-toolbar-item",
-                  onClick: () => {
-                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
-                  },
-                  size: "sm",
-                  children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(UnderlineIcon, {}) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToggleGroupItem,
-                {
-                  value: "strikethrough",
-                  "aria-label": "Toggle strikethrough",
-                  className: "editor-toolbar-item",
-                  onClick: () => {
-                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
-                  },
-                  size: "sm",
-                  children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(StrikethroughIcon, {}) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToggleGroupItem,
-                {
-                  value: "code",
-                  "aria-label": "Toggle code",
-                  className: "editor-toolbar-item",
-                  onClick: () => {
-                    editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
-                  },
-                  size: "sm",
-                  children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(CodeIcon, {}) })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ToggleGroupItem,
-                {
-                  value: "link",
-                  "aria-label": "Toggle link",
-                  className: "editor-toolbar-item",
-                  onClick: insertLink,
-                  size: "sm",
-                  children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(LinkIcon, {}) })
-                }
-              )
-            ]
-          }
-        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "editor-floating-group editor-flex editor-items-center", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "editor-toolbar-item",
+              "data-state": isBold ? "on" : "off",
+              onClick: () => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+              },
+              "aria-label": "Toggle bold",
+              children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(BoldIcon, {}) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "editor-toolbar-item",
+              "data-state": isItalic ? "on" : "off",
+              onClick: () => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+              },
+              "aria-label": "Toggle italic",
+              children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(ItalicIcon, {}) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "editor-toolbar-item",
+              "data-state": isUnderline ? "on" : "off",
+              onClick: () => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+              },
+              "aria-label": "Toggle underline",
+              children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(UnderlineIcon, {}) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "editor-toolbar-item",
+              "data-state": isStrikethrough ? "on" : "off",
+              onClick: () => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+              },
+              "aria-label": "Toggle strikethrough",
+              children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(StrikethroughIcon, {}) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "editor-toolbar-item",
+              "data-state": isCode ? "on" : "off",
+              onClick: () => {
+                editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+              },
+              "aria-label": "Toggle code",
+              children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(CodeIcon, {}) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "editor-toolbar-item",
+              "data-state": isLink ? "on" : "off",
+              onClick: insertLink,
+              "aria-label": "Toggle link",
+              children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(LinkIcon, {}) })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "editor-separator--vertical" }),
         /* @__PURE__ */ jsxs("div", { className: "editor-floating-group--lg editor-flex editor-items-center", children: [
           /* @__PURE__ */ jsx(
@@ -28950,8 +29162,8 @@ var init_floating_text_format_plugin = __esm({
     init_dialog();
     init_flex();
     init_separator();
-    init_toggle_group();
     init_typography();
+    init_toggle_group();
   }
 });
 function KeywordsPlugin() {
@@ -30146,7 +30358,7 @@ function getResizeEdge(clientX, rect) {
   if (nearLeft && nearRight) return "right";
   return nearLeft ? "left" : "right";
 }
-function getColumnIndexFromTableMap(tableNode, tableCellNode) {
+function $getColumnIndexFromTableMap(tableNode, tableCellNode) {
   if (!$isTableCellNode(tableCellNode)) return null;
   const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
   for (let row = 0; row < tableMap.length; row++) {
@@ -30161,183 +30373,290 @@ function getColumnIndexFromTableMap(tableNode, tableCellNode) {
   }
   return null;
 }
-function TableColumnResizerPlugin() {
+function TableColumnResizerPlugin({
+  anchorElem = document.body
+}) {
   const [editor] = useLexicalComposerContext();
   const isEditable = useLexicalEditable();
   const dragRef = useRef(null);
+  const [hoverState, setHoverState] = useState(null);
+  const resizerRef = useRef(null);
+  const onPointerDownImpl = useCallback((event, cell, edge) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    const target = event.target;
+    if (target) {
+      target.setPointerCapture(event.pointerId);
+    }
+    let nextDragState = null;
+    editor.update(() => {
+      const tableCellNode = $getNearestNodeFromDOMNode(cell);
+      if (!$isTableCellNode(tableCellNode)) return;
+      const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+      const tableElement = editor.getElementByKey(tableNode.getKey());
+      if (!tableElement) return;
+      const tableMap = $computeTableMapSkipCellCheck(tableNode, null, null)[0];
+      const colCount = tableMap[0]?.length ?? 0;
+      const columnIndexFromMap = $getColumnIndexFromTableMap(tableNode, tableCellNode);
+      if (columnIndexFromMap === null) return;
+      const colSpan = tableCellNode.getColSpan();
+      const resizeColumnIndex = edge === "left" ? columnIndexFromMap - 1 : columnIndexFromMap + colSpan - 1;
+      if (resizeColumnIndex < 0 || resizeColumnIndex >= colCount - 1) return;
+      let currentWidths = tableNode.getColWidths();
+      if (!currentWidths) {
+        const columns = tableElement.querySelectorAll("col");
+        const widths = [];
+        if (columns.length === colCount) {
+          columns.forEach((col) => {
+            const styleWidth = col.style.width;
+            if (styleWidth && styleWidth.endsWith("px")) {
+              widths.push(parseFloat(styleWidth));
+            } else {
+              const rect = col.getBoundingClientRect();
+              widths.push(rect.width || 0);
+            }
+          });
+        }
+        if (widths.length !== colCount) {
+          const firstRow = tableElement.querySelector("tr");
+          if (firstRow) {
+            const cells = firstRow.querySelectorAll("th, td");
+            if (cells.length === colCount) {
+              cells.forEach((cell2) => {
+                widths.push(cell2.getBoundingClientRect().width);
+              });
+            }
+          }
+        }
+        if (widths.length !== colCount) {
+          const tableRect = tableElement.getBoundingClientRect();
+          const avgWidth = tableRect.width / (colCount || 1);
+          for (let i = 0; i < colCount; i++) {
+            widths.push(avgWidth);
+          }
+        }
+        currentWidths = widths;
+      }
+      if (currentWidths[resizeColumnIndex] === void 0 || currentWidths[resizeColumnIndex + 1] === void 0) {
+        return;
+      }
+      nextDragState = {
+        columnIndex: resizeColumnIndex,
+        initialColWidths: currentWidths,
+        startX: event.clientX,
+        startWidth: currentWidths[resizeColumnIndex],
+        tableKey: tableNode.getKey()
+      };
+    });
+    if (!nextDragState) return;
+    dragRef.current = nextDragState;
+    const rootElement = editor.getRootElement();
+    if (rootElement) {
+      rootElement.style.userSelect = "none";
+      rootElement.style.cursor = "col-resize";
+    }
+    const onPointerMoveDocument = (event2) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      event2.preventDefault();
+      const deltaX = event2.clientX - drag.startX;
+      const { tableKey, columnIndex, initialColWidths } = drag;
+      editor.update(() => {
+        const tableNode = $getNodeByKey(tableKey);
+        if (!(tableNode instanceof TableNode)) return;
+        const currentWidths = tableNode.getColWidths() || initialColWidths;
+        const colCount = tableNode.getColumnCount();
+        const nextColumnIndex = columnIndex + 1;
+        if (nextColumnIndex >= colCount) return;
+        const currentLeftWidth = initialColWidths[columnIndex];
+        const currentRightWidth = initialColWidths[nextColumnIndex];
+        if (currentLeftWidth === void 0 || currentRightWidth === void 0) return;
+        const maxShrinkLeft = currentLeftWidth - MIN_COLUMN_WIDTH_PX;
+        const maxGrowLeft = currentRightWidth - MIN_COLUMN_WIDTH_PX;
+        const constrainedDelta = Math.min(Math.max(deltaX, -maxShrinkLeft), maxGrowLeft);
+        const newLeftWidth = currentLeftWidth + constrainedDelta;
+        const newRightWidth = currentRightWidth - constrainedDelta;
+        const nextColWidths = Array.from({ length: colCount }, (_, i) => {
+          if (i === columnIndex) return newLeftWidth;
+          if (i === nextColumnIndex) return newRightWidth;
+          return currentWidths[i] ?? initialColWidths[i] ?? 0;
+        });
+        if (typeof tableNode.setColWidths === "function") {
+          tableNode.setColWidths(nextColWidths);
+        } else {
+          tableNode.__colWidths = nextColWidths;
+          tableNode.__widths = nextColWidths;
+          tableNode.markDirty();
+        }
+      });
+    };
+    const onPointerUpDocument = (event2) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      const target2 = event2.target;
+      if (target2 && target2.hasPointerCapture(event2.pointerId)) {
+        target2.releasePointerCapture(event2.pointerId);
+      }
+      dragRef.current = null;
+      const rootElement2 = editor.getRootElement();
+      if (rootElement2) {
+        rootElement2.style.userSelect = "";
+        rootElement2.style.cursor = "";
+      }
+      document.removeEventListener("pointermove", onPointerMoveDocument);
+      document.removeEventListener("pointerup", onPointerUpDocument);
+    };
+    document.addEventListener("pointermove", onPointerMoveDocument);
+    document.addEventListener("pointerup", onPointerUpDocument);
+  }, [editor]);
+  const updateResizerPosition = useCallback(() => {
+    const state = hoverState;
+    if (state === null || !resizerRef.current) return;
+    const { cellKey, edge } = state;
+    const cell = editor.getElementByKey(cellKey);
+    if (!cell) return;
+    const cellRect = cell.getBoundingClientRect();
+    const anchorRect = anchorElem.getBoundingClientRect();
+    const resizerElem = resizerRef.current;
+    const tableElement = cell.closest("table");
+    let top = cellRect.top - anchorRect.top;
+    let height = cellRect.height;
+    if (tableElement) {
+      const tableRect = tableElement.getBoundingClientRect();
+      top = tableRect.top - anchorRect.top;
+      height = tableRect.height;
+    }
+    const left = (edge === "left" ? cellRect.left : cellRect.right) - anchorRect.left - 8;
+    resizerElem.style.transform = `translate(${left}px, ${top}px)`;
+    resizerElem.style.height = `${height}px`;
+    resizerElem.style.opacity = "1";
+  }, [editor, hoverState, anchorElem]);
+  useLayoutEffect(() => {
+    updateResizerPosition();
+    window.addEventListener("resize", updateResizerPosition);
+    window.addEventListener("scroll", updateResizerPosition, true);
+    const updateListener = editor.registerUpdateListener(() => {
+      editor.read(() => {
+        const state = hoverState;
+        if (state !== null) {
+          const cell = editor.getElementByKey(state.cellKey);
+          if (!cell) {
+            setHoverState(null);
+          } else {
+            updateResizerPosition();
+          }
+        }
+      });
+    });
+    return () => {
+      window.removeEventListener("resize", updateResizerPosition);
+      window.removeEventListener("scroll", updateResizerPosition, true);
+      updateListener();
+    };
+  }, [editor, hoverState, updateResizerPosition]);
   useEffect(() => {
     if (!isEditable) return;
     const rootElement = editor.getRootElement();
     if (!rootElement) return;
     const setCursor = (cursor) => {
-      rootElement.style.cursor = cursor;
+      if (rootElement) {
+        rootElement.style.cursor = cursor;
+      }
     };
     const clearCursor = () => {
       setCursor("");
     };
     const onPointerMove = (event) => {
       if (dragRef.current) return;
-      const cell = getCellTarget(event.target);
-      if (!cell) {
-        clearCursor();
+      if (event.buttons !== 0) return;
+      if (resizerRef.current && (event.target === resizerRef.current || resizerRef.current.contains(event.target))) {
         return;
       }
-      const edge = getResizeEdge(event.clientX, cell.getBoundingClientRect());
-      if (edge === "left") {
-        const table = cell.closest("table");
-        if (table) {
-          const tableRect = table.getBoundingClientRect();
-          const cellRect = cell.getBoundingClientRect();
-          if (Math.abs(cellRect.left - tableRect.left) < 5) {
-            clearCursor();
-            return;
-          }
-        }
-      }
-      setCursor(edge ? "col-resize" : "");
-    };
-    const onPointerDown = (event) => {
-      if (event.button !== 0) return;
       const cell = getCellTarget(event.target);
-      if (!cell) return;
-      const edge = getResizeEdge(event.clientX, cell.getBoundingClientRect());
-      if (!edge) return;
-      event.preventDefault();
-      let nextDragState = null;
-      editor.read(() => {
-        const tableCellNode = $getNearestNodeFromDOMNode(cell);
-        if (!$isTableCellNode(tableCellNode)) return;
-        const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
-        const columnIndexFromMap = getColumnIndexFromTableMap(tableNode, tableCellNode);
-        if (columnIndexFromMap == null) return;
-        if (edge === "left" && columnIndexFromMap === 0) return;
-        const colSpan = tableCellNode.getColSpan();
-        const resizeColumnIndex = edge === "left" ? columnIndexFromMap - 1 : columnIndexFromMap + colSpan - 1;
-        let currentWidths = tableNode.getColWidths();
-        if (!currentWidths) {
-          const tableElement = editor.getElementByKey(tableNode.getKey());
-          if (tableElement instanceof HTMLTableElement) {
-            const [tableMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
-            const colCount = tableNode.getColumnCount();
-            const widths = new Array(colCount).fill(void 0);
-            for (let r = 0; r < tableMap.length; r++) {
-              const row = tableMap[r];
-              if (!row) continue;
-              for (let c = 0; c < row.length; c++) {
-                if (widths[c] !== void 0) continue;
-                const tableMapCell = row[c];
-                if (!tableMapCell) continue;
-                const { cell: cell2 } = tableMapCell;
-                if (cell2.getColSpan() === 1) {
-                  const cellElem = editor.getElementByKey(cell2.getKey());
-                  if (cellElem) {
-                    widths[c] = Math.round(cellElem.getBoundingClientRect().width);
-                  }
-                }
-              }
-              if (widths.every((w) => w !== void 0)) break;
-            }
-            if (widths.some((w) => w === void 0)) {
-              if (tableElement.rows.length > 0) {
-                const row = tableElement.rows[0];
-                if (row && row.cells.length === colCount) {
-                  const rowWidths = Array.from(row.cells).map((c) => Math.round(c.getBoundingClientRect().width));
-                  for (let i = 0; i < colCount; i++) {
-                    if (widths[i] === void 0) widths[i] = rowWidths[i];
-                  }
-                }
+      let nextHoverState = null;
+      if (cell) {
+        editor.read(() => {
+          const cellNode = $getNearestNodeFromDOMNode(cell);
+          if ($isTableCellNode(cellNode)) {
+            const tableNode = $getTableNodeFromLexicalNodeOrThrow(cellNode);
+            const cellKey = cellNode.getKey();
+            const tableKey = tableNode.getKey();
+            const edge = getResizeEdge(event.clientX, cell.getBoundingClientRect());
+            if (edge) {
+              const colCount = tableNode.getColumnCount();
+              const colSpan = cellNode.getColSpan();
+              const columnIndexFromMap = $getColumnIndexFromTableMap(tableNode, cellNode);
+              if (columnIndexFromMap !== null && !(edge === "left" && columnIndexFromMap === 0 || edge === "right" && columnIndexFromMap + colSpan === colCount)) {
+                nextHoverState = { cellKey, tableKey, edge };
               }
             }
-            if (widths.some((w) => w === void 0)) {
-              const tableWidth = tableElement.getBoundingClientRect().width;
-              const defaultWidth = tableWidth / colCount;
-              for (let i = 0; i < colCount; i++) {
-                if (widths[i] === void 0) widths[i] = defaultWidth;
-              }
-            }
-            currentWidths = widths;
           }
+        });
+      }
+      if (!nextHoverState) {
+        if (hoverState !== null) {
+          clearCursor();
+          setHoverState(null);
         }
-        if (!currentWidths) {
-          currentWidths = Array(tableNode.getColumnCount()).fill(MIN_COLUMN_WIDTH_PX);
-        }
-        const startWidth = currentWidths[resizeColumnIndex] ?? Math.max(Math.round(cell.getBoundingClientRect().width), MIN_COLUMN_WIDTH_PX);
-        nextDragState = {
-          tableKey: tableNode.getKey(),
-          columnIndex: resizeColumnIndex,
-          startX: event.clientX,
-          startWidth,
-          initialColWidths: [...currentWidths]
-        };
-      });
-      if (!nextDragState) return;
-      event.preventDefault();
-      event.stopPropagation();
-      dragRef.current = nextDragState;
-      setCursor("col-resize");
-    };
-    const onPointerMoveDocument = (event) => {
-      const drag = dragRef.current;
-      if (!drag) return;
-      const { initialColWidths, startX, columnIndex } = drag;
-      const deltaX = event.clientX - startX;
-      editor.update(() => {
-        const tableNode = $getNodeByKey(drag.tableKey);
-        if (!(tableNode instanceof TableNode)) return;
-        const colWidths = tableNode.getColWidths() ?? initialColWidths;
-        const nextColumnIndex = columnIndex + 1;
-        const hasNeighbor = nextColumnIndex < initialColWidths.length;
-        if (hasNeighbor) {
-          const currentLeftWidth = initialColWidths[columnIndex];
-          const currentRightWidth = initialColWidths[nextColumnIndex];
-          if (currentLeftWidth === void 0 || currentRightWidth === void 0) return;
-          const maxShrinkLeft = currentLeftWidth - MIN_COLUMN_WIDTH_PX;
-          const maxGrowLeft = currentRightWidth - MIN_COLUMN_WIDTH_PX;
-          const constrainedDelta = Math.min(Math.max(deltaX, -maxShrinkLeft), maxGrowLeft);
-          const newLeftWidth = currentLeftWidth + constrainedDelta;
-          const newRightWidth = currentRightWidth - constrainedDelta;
-          if (colWidths[columnIndex] === newLeftWidth && colWidths[nextColumnIndex] === newRightWidth)
-            return;
-          const nextColWidths = [...colWidths];
-          nextColWidths[columnIndex] = newLeftWidth;
-          nextColWidths[nextColumnIndex] = newRightWidth;
-          tableNode.setColWidths(nextColWidths);
-        } else {
-          const currentWidth = initialColWidths[columnIndex];
-          if (currentWidth === void 0) return;
-          const newWidth = Math.max(MIN_COLUMN_WIDTH_PX, Math.round(currentWidth + deltaX));
-          if (colWidths[columnIndex] === newWidth) return;
-          const nextColWidths = [...colWidths];
-          nextColWidths[columnIndex] = newWidth;
-          tableNode.setColWidths(nextColWidths);
+      } else {
+        setCursor("col-resize");
+        if (!hoverState || hoverState.cellKey !== nextHoverState.cellKey || hoverState.edge !== nextHoverState.edge) {
+          setHoverState(nextHoverState);
         }
-      });
-    };
-    const onPointerUpDocument = () => {
-      if (!dragRef.current) return;
-      dragRef.current = null;
-      clearCursor();
+      }
     };
-    rootElement.addEventListener("pointermove", onPointerMove);
-    rootElement.addEventListener("pointerdown", onPointerDown);
-    document.addEventListener("pointermove", onPointerMoveDocument);
-    document.addEventListener("pointerup", onPointerUpDocument);
+    anchorElem.addEventListener("pointermove", onPointerMove);
     return () => {
-      rootElement.removeEventListener("pointermove", onPointerMove);
-      rootElement.removeEventListener("pointerdown", onPointerDown);
-      document.removeEventListener("pointermove", onPointerMoveDocument);
-      document.removeEventListener("pointerup", onPointerUpDocument);
+      anchorElem.removeEventListener("pointermove", onPointerMove);
       clearCursor();
-      dragRef.current = null;
     };
-  }, [editor, isEditable]);
-  return null;
+  }, [editor, isEditable, hoverState, anchorElem]);
+  const resizer = useMemo(() => {
+    const state = hoverState;
+    if (state === null) return null;
+    const { cellKey, edge } = state;
+    return createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: resizerRef,
+          className: "editor-table-cell-resizer",
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "16px",
+            opacity: 1,
+            willChange: "transform",
+            userSelect: "none"
+          },
+          onPointerDown: (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            const cell = editor.getElementByKey(cellKey);
+            if (cell instanceof HTMLTableCellElement) {
+              onPointerDownImpl(event.nativeEvent, cell, edge);
+            }
+          },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "editor-table-cell-resize-ruler",
+              style: { pointerEvents: "none" }
+            }
+          )
+        }
+      ),
+      anchorElem
+    );
+  }, [hoverState, anchorElem, editor, onPointerDownImpl]);
+  return resizer;
 }
 var EDGE_HITBOX_PX, MIN_COLUMN_WIDTH_PX;
 var init_table_column_resizer_plugin = __esm({
   "src/plugins/table-column-resizer-plugin.tsx"() {
     "use client";
-    EDGE_HITBOX_PX = 12;
+    EDGE_HITBOX_PX = 8;
     MIN_COLUMN_WIDTH_PX = 15;
   }
 });
@@ -30441,6 +30760,10 @@ var init_block_format_data = __esm({
         label: "Alpha List (a, b, c)",
         icon: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(CaseSensitiveIcon, {}) })
       },
+      "number-multi-level": {
+        label: "Multi-level List (1.1 / 1.1.1)",
+        icon: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(ListOrderedIcon, {}) })
+      },
       bullet: {
         label: "Bulleted List",
         icon: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(ListIcon, {}) })
@@ -30502,6 +30825,7 @@ function BlockFormatDropDown({
               else if (markerType === "+") type = "bullet-plus";
             } else if (type === "number") {
               if (markerType === "alpha") type = "number-alpha";
+              else if (markerType === "multi-level") type = "number-multi-level";
             }
           }
           setBlockType(type);
@@ -31219,61 +31543,40 @@ function ElementFormatToolbarPlugin({
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      ToggleGroup,
+    Object.entries(ELEMENT_FORMAT_OPTIONS).map(([value, option]) => /* @__PURE__ */ jsx(
+      Button,
       {
-        type: "single",
-        value: elementFormat,
-        onValueChange: handleValueChange,
+        variant: "outline",
         size: "sm",
+        "aria-label": option.name,
+        "data-state": elementFormat === value ? "on" : "off",
+        onClick: () => handleValueChange(value),
+        className: "editor-toolbar-item",
+        children: option.icon
+      },
+      value
+    )),
+    separator && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "editor-toolbar-separator" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
         variant: "outline",
-        children: Object.entries(ELEMENT_FORMAT_OPTIONS).map(([value, option]) => /* @__PURE__ */ jsx(
-          ToggleGroupItem,
-          {
-            value,
-            variant: "outline",
-            size: "sm",
-            "aria-label": option.name,
-            className: "editor-toolbar-item",
-            children: option.icon
-          },
-          value
-        ))
+        size: "sm",
+        "aria-label": "Outdent",
+        onClick: () => handleValueChange("outdent"),
+        className: "editor-toolbar-item",
+        children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(IndentDecreaseIcon, {}) })
       }
     ),
-    separator && /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "editor-toolbar-separator" }),
-    /* @__PURE__ */ jsxs(
-      ToggleGroup,
+    /* @__PURE__ */ jsx(
+      Button,
       {
-        type: "single",
-        value: elementFormat,
-        onValueChange: handleValueChange,
-        size: "sm",
         variant: "outline",
-        children: [
-          /* @__PURE__ */ jsx(
-            ToggleGroupItem,
-            {
-              value: "outdent",
-              "aria-label": "Outdent",
-              variant: "outline",
-              size: "sm",
-              className: "editor-toolbar-item",
-              children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(IndentDecreaseIcon, {}) })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ToggleGroupItem,
-            {
-              value: "indent",
-              variant: "outline",
-              "aria-label": "Indent",
-              size: "sm",
-              className: "editor-toolbar-item",
-              children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(IndentIncreaseIcon, {}) })
-            }
-          )
-        ]
+        size: "sm",
+        "aria-label": "Indent",
+        onClick: () => handleValueChange("indent"),
+        className: "editor-toolbar-item",
+        children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(IndentIncreaseIcon, {}) })
       }
     )
   ] });
@@ -31286,8 +31589,8 @@ var init_element_format_toolbar_plugin = __esm({
     init_layout_item_node();
     init_use_update_toolbar();
     init_get_selected_node();
+    init_button();
     init_separator();
-    init_toggle_group();
     init_typography();
     ELEMENT_FORMAT_OPTIONS = {
       left: {
@@ -31617,32 +31920,24 @@ function FontFormatToolbarPlugin() {
     }
   }, []);
   useUpdateToolbarHandler($updateToolbar);
-  return /* @__PURE__ */ jsx(
-    ToggleGroup,
+  return /* @__PURE__ */ jsx(Fragment, { children: FORMATS.map(({ format, icon: Icon, label }) => /* @__PURE__ */ jsx(
+    Button,
     {
-      type: "multiple",
-      value: activeFormats,
-      onValueChange: setActiveFormats,
-      variant: "default",
+      variant: "ghost",
       size: "sm",
-      children: FORMATS.map(({ format, icon: Icon, label }) => /* @__PURE__ */ jsx(
-        ToggleGroupItem,
-        {
-          value: format,
-          "aria-label": label,
-          className: "editor-toolbar-item",
-          onClick: () => {
-            activeEditor.dispatchCommand(
-              FORMAT_TEXT_COMMAND,
-              format
-            );
-          },
-          children: /* @__PURE__ */ jsx(Icon, { className: "editor-icon-sm" })
-        },
-        format
-      ))
-    }
-  );
+      "aria-label": label,
+      "data-state": activeFormats.includes(format) ? "on" : "off",
+      className: "editor-toolbar-item",
+      onClick: () => {
+        activeEditor.dispatchCommand(
+          FORMAT_TEXT_COMMAND,
+          format
+        );
+      },
+      children: /* @__PURE__ */ jsx(Icon, { className: "editor-icon-sm" })
+    },
+    format
+  )) });
 }
 var FORMATS;
 var init_font_format_toolbar_plugin = __esm({
@@ -31650,7 +31945,7 @@ var init_font_format_toolbar_plugin = __esm({
     "use client";
     init_toolbar_context();
     init_use_update_toolbar();
-    init_toggle_group();
+    init_button();
     FORMATS = [
       { format: "bold", icon: BoldIcon, label: "Bold" },
       { format: "italic", icon: ItalicIcon, label: "Italic" },
@@ -31659,14 +31954,6 @@ var init_font_format_toolbar_plugin = __esm({
     ];
   }
 });
-function ButtonGroup({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("editor-button-group", className), ...props, children });
-}
-var init_button_group = __esm({
-  "src/ui/button-group.tsx"() {
-    init_utils();
-  }
-});
 function FontSizeToolbarPlugin() {
   const style = "font-size";
   const [fontSize, setFontSize] = useState(DEFAULT_FONT_SIZE);
@@ -31756,7 +32043,7 @@ function FontSizeToolbarPlugin() {
   useEffect(() => {
     return () => stopTimer();
   }, [stopTimer]);
-  return /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -31813,7 +32100,6 @@ var init_font_size_toolbar_plugin = __esm({
     init_toolbar_context();
     init_use_update_toolbar();
     init_button();
-    init_button_group();
     init_input();
     init_typography();
     DEFAULT_FONT_SIZE = 16;
@@ -31857,7 +32143,7 @@ function HistoryToolbarPlugin() {
       )
     );
   }, [$updateToolbar, activeEditor, editor]);
-  return /* @__PURE__ */ jsxs(ButtonGroup, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -31868,7 +32154,6 @@ function HistoryToolbarPlugin() {
         title: IS_APPLE ? "Undo (\u2318Z)" : "Undo (Ctrl+Z)",
         type: "button",
         "aria-label": "Undo",
-        size: "sm",
         variant: "ghost",
         className: "editor-toolbar-item",
         children: /* @__PURE__ */ jsx(UndoIcon, { className: "editor-icon-sm" })
@@ -31884,7 +32169,6 @@ function HistoryToolbarPlugin() {
         title: IS_APPLE ? "Redo (\u21E7\u2318Z)" : "Redo (Ctrl+Y)",
         type: "button",
         "aria-label": "Redo",
-        size: "sm",
         variant: "ghost",
         className: "editor-toolbar-item",
         children: /* @__PURE__ */ jsx(RedoIcon, { className: "editor-icon-sm" })
@@ -31897,7 +32181,6 @@ var init_history_toolbar_plugin = __esm({
     "use client";
     init_toolbar_context();
     init_button();
-    init_button_group();
   }
 });
 var Toggle;
@@ -32007,50 +32290,43 @@ function SubSuperToolbarPlugin() {
     }
   };
   useUpdateToolbarHandler($updateToolbar);
-  return /* @__PURE__ */ jsxs(
-    ToggleGroup,
-    {
-      type: "single",
-      value: isSubscript ? "subscript" : isSuperscript ? "superscript" : "",
-      size: "default",
-      variant: "outline",
-      children: [
-        /* @__PURE__ */ jsx(
-          ToggleGroupItem,
-          {
-            value: "subscript",
-            size: "default",
-            "aria-label": "Toggle subscript",
-            onClick: () => {
-              activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript");
-            },
-            variant: "outline",
-            children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(SubscriptIcon, {}) })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ToggleGroupItem,
-          {
-            value: "superscript",
-            size: "default",
-            "aria-label": "Toggle superscript",
-            onClick: () => {
-              activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript");
-            },
-            variant: "outline",
-            children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(SuperscriptIcon, {}) })
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        "aria-label": "Toggle subscript",
+        "data-state": isSubscript ? "on" : "off",
+        onClick: () => {
+          activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "subscript");
+        },
+        className: "editor-toolbar-item",
+        children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(SubscriptIcon, {}) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        "aria-label": "Toggle superscript",
+        "data-state": isSuperscript ? "on" : "off",
+        onClick: () => {
+          activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, "superscript");
+        },
+        className: "editor-toolbar-item",
+        children: /* @__PURE__ */ jsx(IconSize, { size: "sm", children: /* @__PURE__ */ jsx(SuperscriptIcon, {}) })
+      }
+    )
+  ] });
 }
 var init_subsuper_toolbar_plugin = __esm({
   "src/plugins/toolbar/subsuper-toolbar-plugin.tsx"() {
     "use client";
     init_toolbar_context();
     init_use_update_toolbar();
-    init_toggle_group();
+    init_button();
     init_typography();
   }
 });
@@ -32580,47 +32856,50 @@ function Plugins({
         children: ({ blockType }) => /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: "editor-toolbar-group", children: /* @__PURE__ */ jsx(HistoryToolbarPlugin, {}) }),
           /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "editor-toolbar-separator" }),
-          /* @__PURE__ */ jsx("div", { className: "editor-toolbar-group", children: /* @__PURE__ */ jsxs(BlockInsertPlugin, { children: [
-            /* @__PURE__ */ jsx(InsertHorizontalRule, {}),
-            /* @__PURE__ */ jsx(InsertImage, {}),
-            /* @__PURE__ */ jsx(InsertTable, {}),
-            /* @__PURE__ */ jsx(InsertColumnsLayout, {}),
-            /* @__PURE__ */ jsx(InsertEmbeds, {})
-          ] }) }),
-          /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "editor-toolbar-separator" }),
-          /* @__PURE__ */ jsx("div", { className: "editor-toolbar-group", children: /* @__PURE__ */ jsxs(BlockFormatDropDown, { children: [
-            /* @__PURE__ */ jsx(FormatParagraph, {}),
-            /* @__PURE__ */ jsx(FormatHeading, { levels: ["h1", "h2", "h3"] }),
-            /* @__PURE__ */ jsx(FormatNumberedList, {}),
-            /* @__PURE__ */ jsx(
-              FormatListWithMarker,
-              {
-                blockFormatValue: "number-alpha",
-                listType: "number",
-                markerType: "alpha"
-              }
-            ),
-            /* @__PURE__ */ jsx(FormatBulletedList, {}),
-            /* @__PURE__ */ jsx(
-              FormatListWithMarker,
-              {
-                blockFormatValue: "bullet-dash",
-                listType: "bullet",
-                markerType: "-"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              FormatListWithMarker,
-              {
-                blockFormatValue: "bullet-plus",
-                listType: "bullet",
-                markerType: "+"
-              }
-            ),
-            /* @__PURE__ */ jsx(FormatCheckList, {}),
-            /* @__PURE__ */ jsx(FormatCodeBlock, {}),
-            /* @__PURE__ */ jsx(FormatQuote, {})
-          ] }) }),
+          blockType !== "code" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "editor-toolbar-group", children: /* @__PURE__ */ jsxs(BlockInsertPlugin, { children: [
+              /* @__PURE__ */ jsx(InsertHorizontalRule, {}),
+              /* @__PURE__ */ jsx(InsertImage, {}),
+              /* @__PURE__ */ jsx(InsertTable, {}),
+              /* @__PURE__ */ jsx(InsertColumnsLayout, {}),
+              /* @__PURE__ */ jsx(InsertEmbeds, {})
+            ] }) }),
+            /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "editor-toolbar-separator" }),
+            /* @__PURE__ */ jsx("div", { className: "editor-toolbar-group", children: /* @__PURE__ */ jsxs(BlockFormatDropDown, { children: [
+              /* @__PURE__ */ jsx(FormatParagraph, {}),
+              /* @__PURE__ */ jsx(FormatHeading, { levels: ["h1", "h2", "h3"] }),
+              /* @__PURE__ */ jsx(FormatNumberedList, {}),
+              /* @__PURE__ */ jsx(
+                FormatListWithMarker,
+                {
+                  blockFormatValue: "number-alpha",
+                  listType: "number",
+                  markerType: "alpha"
+                }
+              ),
+              /* @__PURE__ */ jsx(FormatBulletedList, {}),
+              /* @__PURE__ */ jsx(
+                FormatListWithMarker,
+                {
+                  blockFormatValue: "bullet-dash",
+                  listType: "bullet",
+                  markerType: "-"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                FormatListWithMarker,
+                {
+                  blockFormatValue: "bullet-plus",
+                  listType: "bullet",
+                  markerType: "+"
+                }
+              ),
+              /* @__PURE__ */ jsx(FormatCheckList, {}),
+              /* @__PURE__ */ jsx(FormatCodeBlock, {}),
+              /* @__PURE__ */ jsx(FormatQuote, {})
+            ] }) }),
+            /* @__PURE__ */ jsx(Separator, { orientation: "vertical", className: "editor-toolbar-separator" })
+          ] }),
           blockType === "code" ? /* @__PURE__ */ jsx("div", { className: "editor-toolbar-group", children: /* @__PURE__ */ jsx(CodeLanguageToolbarPlugin, {}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs("div", { className: "editor-toolbar-group", children: [
               /* @__PURE__ */ jsx(FontFamilyToolbarPlugin, {}),
@@ -32671,7 +32950,7 @@ function Plugins({
         /* @__PURE__ */ jsx(HorizontalRulePlugin, {}),
         /* @__PURE__ */ jsx(TablePlugin, { hasHorizontalScroll: true }),
         /* @__PURE__ */ jsx(InsertTableCommandPlugin, {}),
-        /* @__PURE__ */ jsx(TableColumnResizerPlugin, {}),
+        /* @__PURE__ */ jsx(TableColumnResizerPlugin, { anchorElem: floatingAnchorElem ?? document.body }),
         /* @__PURE__ */ jsx(ListPlugin, {}),
         /* @__PURE__ */ jsx(TabIndentationPlugin, {}),
         /* @__PURE__ */ jsx(HistoryPlugin, {})
@@ -33044,7 +33323,18 @@ function Editor({
       Promise.resolve().then(() => (init_plugins(), plugins_exports)).then((m) => ({ Plugins: m.Plugins }))
     ]).then(([nodes2, { Plugins: Plugins3 }]) => setConfig({ nodes: nodes2, Plugins: Plugins3 }));
   }, []);
-  if (!config) {
+  const editorConfig = useMemo(() => {
+    if (!config || !config.nodes) return null;
+    const validNodes = config.nodes.filter((node) => {
+      if (node === void 0) {
+        console.error("[Editor] Found undefined node in config.nodes");
+        return false;
+      }
+      return true;
+    });
+    return createEditorConfig(validNodes);
+  }, [config]);
+  if (!config || !editorConfig) {
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -33056,7 +33346,6 @@ function Editor({
       }
     );
   }
-  const editorConfig = createEditorConfig(config.nodes);
   const { Plugins: Plugins2 } = config;
   return /* @__PURE__ */ jsx(
     "div",