@thangph2146/lexical-editor 0.0.6 → 0.0.7

package/package.json

@@ -1,86 +1,86 @@
-{
-  "name": "@thangph2146/lexical-editor",
-  "version": "0.0.6",
-  "description": "Rich Text Editor library based on Lexical for React/Next.js",
-  "license": "MIT",
-  "type": "module",
-  "private": false,
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "src"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "lint": "eslint",
-    "format": "prettier --write \"**/*.{ts,tsx}\"",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@lexical/code": "^0.38.2",
-    "@lexical/file": "^0.38.2",
-    "@lexical/hashtag": "^0.38.2",
-    "@lexical/link": "^0.38.2",
-    "@lexical/list": "^0.38.2",
-    "@lexical/markdown": "^0.38.2",
-    "@lexical/overflow": "^0.38.2",
-    "@lexical/rich-text": "^0.38.2",
-    "@lexical/selection": "^0.38.2",
-    "@lexical/table": "^0.38.2",
-    "@lexical/text": "^0.38.2",
-    "@lexical/utils": "^0.38.2",
-    "@radix-ui/react-slider": "^1.2.3",
-    "@radix-ui/react-slot": "^1.2.4",
-    "framer-motion": "^12.4.7",
-    "lucide-react": "^0.552.0",
-    "sonner": "^2.0.7"
-  },
-  "peerDependencies": {
-    "@lexical/react": "^0.38.2",
-    "lexical": "^0.38.2",
-    "react": ">=18",
-    "react-dom": ">=18"
-  },
-  "devDependencies": {
-    "@types/node": "^25.1.0",
-    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.2.3",
-    "@workspace/eslint-config": "workspace:*",
-    "@workspace/typescript-config": "workspace:*",
-    "esbuild-sass-plugin": "^3.3.1",
-    "eslint": "^9.39.2",
-    "next": "16.1.6",
-    "sass": "^1.83.0",
-    "tsup": "^8.4.0",
-    "typescript": "^5.9.3"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./style.css": "./dist/index.css",
-    "./editor": {
-      "types": "./dist/editor-x/editor.d.ts",
-      "import": "./dist/editor-x/editor.js",
-      "require": "./dist/editor-x/editor.cjs"
-    },
-    "./styles": {
-      "sass": "./src/themes/editor-theme.scss",
-      "default": "./src/themes/editor-theme.scss"
-    },
-    "./variables": {
-      "sass": "./src/themes/_variables.scss",
-      "default": "./src/themes/_variables.scss"
-    },
-    "./themes/*": "./src/themes/*.ts",
-    "./utils/*": "./src/utils/*.ts"
-  }
-}
+{
+  "name": "@thangph2146/lexical-editor",
+  "version": "0.0.7",
+  "description": "Rich Text Editor library based on Lexical for React/Next.js",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@lexical/code": "^0.38.2",
+    "@lexical/file": "^0.38.2",
+    "@lexical/hashtag": "^0.38.2",
+    "@lexical/link": "^0.38.2",
+    "@lexical/list": "^0.38.2",
+    "@lexical/markdown": "^0.38.2",
+    "@lexical/overflow": "^0.38.2",
+    "@lexical/rich-text": "^0.38.2",
+    "@lexical/selection": "^0.38.2",
+    "@lexical/table": "^0.38.2",
+    "@lexical/text": "^0.38.2",
+    "@lexical/utils": "^0.38.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.2.4",
+    "framer-motion": "^12.4.7",
+    "lucide-react": "^0.552.0",
+    "sonner": "^2.0.7"
+  },
+  "peerDependencies": {
+    "@lexical/react": "^0.38.2",
+    "lexical": "^0.38.2",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "esbuild-sass-plugin": "^3.3.1",
+    "eslint": "^9.39.2",
+    "next": "16.1.6",
+    "sass": "^1.83.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.9.3",
+    "@workspace/eslint-config": "0.0.0",
+    "@workspace/typescript-config": "0.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/index.css",
+    "./editor": {
+      "types": "./dist/editor-x/editor.d.ts",
+      "import": "./dist/editor-x/editor.js",
+      "require": "./dist/editor-x/editor.cjs"
+    },
+    "./styles": {
+      "sass": "./src/themes/editor-theme.scss",
+      "default": "./src/themes/editor-theme.scss"
+    },
+    "./variables": {
+      "sass": "./src/themes/_variables.scss",
+      "default": "./src/themes/_variables.scss"
+    },
+    "./themes/*": "./src/themes/*.ts",
+    "./utils/*": "./src/utils/*.ts"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/editor-x/plugins.tsx

@@ -110,6 +110,7 @@ import { TABLE } from "../transformers/markdown-table-transformer"
 import { TWEET } from "../transformers/markdown-tweet-transformer"
 import { UNORDERED_LIST } from "../transformers/markdown-list-transformer"
 import { Separator } from "../ui/separator"
+import { Flex } from "../ui/flex"
 
 export function Plugins({
   readOnly = false,
@@ -349,11 +350,11 @@ export function Plugins({
       {!readOnly && (
         <ActionsPlugin>
           <div className="editor-actions-bar">
-            <div className="editor-flex-shrink-0">
+            <Flex align="center" className="editor-flex-shrink-0">
               <CounterCharacterPlugin charset="UTF-16" />
-            </div>
+            </Flex>
             <div className="editor-flex-1" />
-            <div className="editor-flex-shrink-0 editor-flex-end">
+            <Flex align="center" justify="end" gap={1} wrap="nowrap" className="editor-flex-shrink-0">
               <SpeechToTextPlugin />
               <ShareContentPlugin />
               <ImportExportPlugin />
@@ -376,7 +377,7 @@ export function Plugins({
               <EditModeTogglePlugin />
               <ClearEditorActionPlugin />
               <TreeViewPlugin />
-            </div>
+            </Flex>
           </div>
         </ActionsPlugin>
       )}

package/src/plugins/images-plugin.tsx

@@ -41,6 +41,7 @@ import { Button } from "../ui/button"
 import { DialogFooter } from "../ui/dialog"
 import { Input } from "../ui/input"
 import { Label } from "../ui/label"
+import { Flex } from "../ui/flex"
 import {
   Tabs,
   TabsContent,
@@ -337,9 +338,9 @@ export function InsertImageUploadsDialogBody({
       <div className="editor-form-item">
         <Label>Chọn hình ảnh từ thư viện</Label>
         {isLoading ? (
-          <div className="editor-flex-center-justify-py-8">
+          <Flex align="center" justify="center" className="editor-py-8">
             <Loader2 className="editor-loader" />
-          </div>
+          </Flex>
         ) : !folderTree || (folderTree.subfolders.length === 0 && folderTree.images.length === 0) ? (
           <div className="editor-empty-state">
             <TypographySpanSmallMuted>Chưa có hình ảnh nào được upload</TypographySpanSmallMuted>

package/src/plugins/layout-plugin.tsx

@@ -43,6 +43,7 @@ import {
   LayoutItemNode,
 } from "../nodes/layout-item-node"
 import { Button } from "../ui/button"
+import { NumberInput } from "../ui/number-input"
 import {
   Select,
   SelectContent,
@@ -82,14 +83,16 @@ type InsertLayoutPayload =
   | {
       template: string
       itemBackgroundColor?: string
-      itemPaddingPx?: number
+      itemPaddingXPx?: number
+      itemPaddingYPx?: number
       itemBorderRadiusPx?: number
     }
 
 type LayoutDialogValues = {
   template: string
   itemBackgroundColor: string
-  itemPaddingPx: number
+  itemPaddingXPx: number
+  itemPaddingYPx: number
   itemBorderRadiusPx: number
 }
 
@@ -116,13 +119,15 @@ export function InsertLayoutDialog({
   const [backgroundColor, setBackgroundColor] = useState(
     initialValues?.itemBackgroundColor ?? "#ffffff"
   )
-  const [paddingPx, setPaddingPx] = useState(initialValues?.itemPaddingPx ?? 12)
+  const [paddingXPx, setPaddingXPx] = useState(initialValues?.itemPaddingXPx ?? 12)
+  const [paddingYPx, setPaddingYPx] = useState(initialValues?.itemPaddingYPx ?? 12)
   const [borderRadiusPx, setBorderRadiusPx] = useState(
     initialValues?.itemBorderRadiusPx ?? 8
   )
   const layoutRef = useRef(layout)
   const backgroundColorRef = useRef(backgroundColor)
-  const paddingPxRef = useRef(paddingPx)
+  const paddingXPxRef = useRef(paddingXPx)
+  const paddingYPxRef = useRef(paddingYPx)
   const borderRadiusPxRef = useRef(borderRadiusPx)
 
   useEffect(() => {
@@ -132,8 +137,11 @@ export function InsertLayoutDialog({
     backgroundColorRef.current = backgroundColor
   }, [backgroundColor])
   useEffect(() => {
-    paddingPxRef.current = paddingPx
-  }, [paddingPx])
+    paddingXPxRef.current = paddingXPx
+  }, [paddingXPx])
+  useEffect(() => {
+    paddingYPxRef.current = paddingYPx
+  }, [paddingYPx])
   useEffect(() => {
     borderRadiusPxRef.current = borderRadiusPx
   }, [borderRadiusPx])
@@ -143,10 +151,16 @@ export function InsertLayoutDialog({
     setBackgroundColor(value)
   }
 
-  const onPaddingChange = (next: number) => {
+  const onPaddingXChange = (next: number) => {
     const value = Math.min(Math.max(next, 0), 64)
-    paddingPxRef.current = value
-    setPaddingPx(value)
+    paddingXPxRef.current = value
+    setPaddingXPx(value)
+  }
+
+  const onPaddingYChange = (next: number) => {
+    const value = Math.min(Math.max(next, 0), 64)
+    paddingYPxRef.current = value
+    setPaddingYPx(value)
   }
 
   const onBorderRadiusChange = (next: number) => {
@@ -160,7 +174,8 @@ export function InsertLayoutDialog({
     const values: LayoutDialogValues = {
       template: layoutRef.current,
       itemBackgroundColor: backgroundColorRef.current,
-      itemPaddingPx: paddingPxRef.current,
+      itemPaddingXPx: paddingXPxRef.current,
+      itemPaddingYPx: paddingYPxRef.current,
       itemBorderRadiusPx: borderRadiusPxRef.current,
     }
     logger.info("[Layout] Submit dialog values", {
@@ -177,7 +192,7 @@ export function InsertLayoutDialog({
   }
 
   return (
-    <>
+    <Flex direction="column" gap={4}>
       <Select onValueChange={setLayout} value={layout}>
         <SelectTrigger className="editor-input-lg editor-w-full">
           <SelectValue placeholder={buttonLabel} />
@@ -191,7 +206,7 @@ export function InsertLayoutDialog({
         </SelectContent>
       </Select>
       <div className="editor-layout-dialog-grid">
-        <div className="editor-layout-dialog-group">
+        <Flex direction="column" gap={1.5}>
           <div className="editor-text-xs-muted">Background</div>
           <ColorPicker
             modal
@@ -227,48 +242,37 @@ export function InsertLayoutDialog({
               <ColorPickerPresets />
             </ColorPickerContent>
           </ColorPicker>
-        </div>
-        <div className="editor-layout-dialog-group">
-          <div className="editor-text-xs-muted">Padding (px)</div>
-          <Input
-            type="number"
+        </Flex>
+        <Flex direction="column" gap={1.5}>
+          <div className="editor-text-xs-muted">Padding X (px)</div>
+          <NumberInput
             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}
           />
-        </div>
-        <div className="editor-layout-dialog-group">
+        </Flex>
+        <Flex direction="column" gap={1.5}>
+          <div className="editor-text-xs-muted">Padding Y (px)</div>
+          <NumberInput
+            min={0}
+            max={64}
+            value={paddingYPx}
+            onValueChange={onPaddingYChange}
+          />
+        </Flex>
+        <Flex direction="column" gap={1.5}>
           <div className="editor-text-xs-muted">Border radius (px)</div>
-          <Input
-            type="number"
+          <NumberInput
             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}
           />
-        </div>
+        </Flex>
       </div>
       <Button onClick={onClick}>{submitLabel}</Button>
-    </>
+    </Flex>
   )
 }
 
@@ -339,29 +343,42 @@ export function LayoutPlugin(): JSX.Element | null {
       return match?.[1]?.trim()
     }
 
-    const extractNumericStyle = (style: string, property: string): number | undefined => {
+    const extractNumericStyle = (style: string, property: string): number[] | undefined => {
       const value = extractStyleValue(style, property)
       if (!value) {
         return undefined
       }
-      const match = value.match(/^(\d+)px$/i)
-      if (!match?.[1]) {
-        return undefined
-      }
-      const parsed = Number.parseInt(match[1], 10)
-      return Number.isFinite(parsed) ? parsed : undefined
+      // Remove !important and split by whitespace
+      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 is number => v !== null)
+
+      if (parsedValues.length === 0) return undefined
+      return parsedValues
     }
 
     const buildLayoutItemStyle = ({
       itemBackgroundColor,
-      itemPaddingPx,
+      itemPaddingXPx,
+      itemPaddingYPx,
       itemBorderRadiusPx,
     }: LayoutDialogValues): string => {
       const itemStyles: string[] = []
       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`
       )
@@ -376,7 +393,10 @@ export function LayoutPlugin(): JSX.Element | null {
       }
 
       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)
@@ -438,6 +458,9 @@ export function LayoutPlugin(): JSX.Element | null {
         }
 
         const style = layoutItem.getStyle()
+        const paddingValues = extractNumericStyle(style, "padding")
+        const borderRadiusValues = extractNumericStyle(style, "border-radius")
+
         payload = {
           containerKey: parentContainer.getKey(),
           layoutItemKey: layoutItem.getKey(),
@@ -445,8 +468,12 @@ export function LayoutPlugin(): JSX.Element | null {
             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)
@@ -566,12 +593,19 @@ export function LayoutPlugin(): JSX.Element | null {
               typeof payload === "string"
                 ? undefined
                 : payload.itemBackgroundColor?.trim()
-            const itemPaddingPx =
+            const itemPaddingXPx =
+              typeof payload === "string"
+                ? undefined
+                : typeof payload.itemPaddingXPx === "number" &&
+                    Number.isFinite(payload.itemPaddingXPx)
+                  ? Math.min(Math.max(payload.itemPaddingXPx, 0), 64)
+                  : undefined
+            const itemPaddingYPx =
               typeof payload === "string"
                 ? undefined
-                : typeof payload.itemPaddingPx === "number" &&
-                    Number.isFinite(payload.itemPaddingPx)
-                  ? Math.min(Math.max(payload.itemPaddingPx, 0), 64)
+                : typeof payload.itemPaddingYPx === "number" &&
+                    Number.isFinite(payload.itemPaddingYPx)
+                  ? Math.min(Math.max(payload.itemPaddingYPx, 0), 64)
                   : undefined
             const itemBorderRadiusPx =
               typeof payload === "string"
@@ -584,7 +618,8 @@ export function LayoutPlugin(): JSX.Element | null {
             const itemStyle = buildLayoutItemStyle({
               template,
               itemBackgroundColor: itemBackgroundColor ?? "#ffffff",
-              itemPaddingPx: itemPaddingPx ?? 12,
+              itemPaddingXPx: itemPaddingXPx ?? 12,
+              itemPaddingYPx: itemPaddingYPx ?? 12,
               itemBorderRadiusPx: itemBorderRadiusPx ?? 8,
             })
 

package/src/themes/_mixins.scss

@@ -26,9 +26,14 @@
   justify-content: space-between;
 }
 
+@mixin flex-row {
+  display: flex !important;
+  flex-direction: row !important;
+}
+
 @mixin flex-col {
-  display: flex;
-  flex-direction: column;
+  display: flex !important;
+  flex-direction: column !important;
 }
 
 @mixin flex-center-justify {
@@ -63,19 +68,19 @@
 }
 
 @mixin shadow-sm {
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
 }
 
 @mixin shadow-md {
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
 }
 
 @mixin shadow-lg {
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
 }
 
 @mixin shadow-xl {
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
 }
 
 @mixin absolute-full {
@@ -138,7 +143,7 @@
 // --- Unified Hover Styles ---
 @mixin editor-hover-base {
   transform: translateY(-1px);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
 }
 
 @mixin editor-active-base {

package/src/themes/_variables.scss

@@ -172,7 +172,8 @@ $editor-popover-max-height: 300px !default;
  $editor-format-select-width: 72px !default;
  $editor-floating-toolbar-max-width: 560px !default;
  $editor-color-picker-height: 160px !default;
- $editor-scroll-area-max-height: 350px !default;
+$editor-color-picker-width: 380px !default;
+$editor-scroll-area-max-height: 350px !default;
  $editor-link-editor-max-width: 400px !default;
  $editor-component-picker-width: 250px !default;
  $editor-mentions-width: 200px !default;

package/src/themes/core/_reset.scss

@@ -11,6 +11,15 @@
   }
 }
 
+// Global resets
+*, *::before, *::after {
+  box-sizing: border-box;
+
+  @supports (color: color-mix(in lab, red, red)) {
+    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+  }
+}
+
 // Lexical Editor Root
 .lexical-editor-root {
   font-family: $editor-font-family !important;
@@ -24,12 +33,7 @@
   text-align: left !important;
   box-sizing: border-box !important;
 
-  // Reset common elements
-  *, *::before, *::after {
-    box-sizing: border-box;
-  }
-
-  p, ul, ol, li, span, strong, em, b, i, blockquote, h1, h2, h3, h4, h5, h6 {
+  p, div, ul, ol, li, span, strong, em, b, i, blockquote, h1, h2, h3, h4, h5, h6 {
     margin: 0 !important;
     padding: 0;
     border: 0 !important;

package/src/themes/plugins/_color-picker.scss

@@ -3,6 +3,7 @@
 
 .editor-color-picker-content {
   @include flex-col;
+  width: $editor-color-picker-width;
   gap: $editor-gap-4;
   padding: $editor-gap-4;
 }

package/src/themes/plugins/_layout.scss

@@ -4,17 +4,13 @@
 .editor-layout-dialog-grid {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: $editor-gap-3;
+  gap: $editor-gap-4;
   
-  @media (min-width: 768px) {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  @media (min-width: 480px) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
-.editor-layout-dialog-group {
-  @include flex-col;
-  gap: $editor-gap-1-5;
-}
 
 .editor-layout-color-trigger {
   height: $editor-control-size-xl; // h-11

package/src/themes/plugins/_list-color.scss

@@ -2,6 +2,8 @@
 @use "../mixins" as *;
 
 .editor-list-color-dialog {
+  @include flex-col;
+  gap: $editor-gap-4;
   padding: $editor-gap-2 0;
   animation: editor-fade-in $editor-transition-slow;
 }