From fbfe5db64914adcdcd7addcaa4d3e6e1c2fa9215 Mon Sep 17 00:00:00 2001
From: Felix Feng <felixfeng33@gmail.com>
Date: Fri, 20 Dec 2024 19:53:46 +0800
Subject: [PATCH] fix

---
 apps/www/public/r/styles/default/column-group-element.json      | 2 +-
 apps/www/src/registry/default/plate-ui/column-group-element.tsx | 2 +-
 .../src/components/plate-ui/column-group-element.tsx            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/www/public/r/styles/default/column-group-element.json b/apps/www/public/r/styles/default/column-group-element.json
index 28c522a9f..025eebf65 100644
--- a/apps/www/public/r/styles/default/column-group-element.json
+++ b/apps/www/public/r/styles/default/column-group-element.json
@@ -18,7 +18,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  useEditorRef,\n  useElement,\n  useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n  type TColumnElement,\n  type TColumnGroupElement,\n  setColumns,\n} from '@udecode/plate-layout';\nimport {\n  ColumnItemPlugin,\n  ColumnPlugin,\n  useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { findNodePath } from '@udecode/slate';\nimport { type LucideProps, Trash2Icon } from 'lucide-react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateElement ref={ref} className={cn(className, 'mb-2')} {...props}>\n        <ColumnFloatingToolbar>\n          <div className={cn('flex size-full rounded')}>{children}</div>\n        </ColumnFloatingToolbar>\n      </PlateElement>\n    );\n  }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n  const editor = useEditorRef();\n  const readOnly = useReadOnly();\n\n  const element = useElement<TColumnElement>(ColumnItemPlugin.key);\n  const columnGroupElement = useElement<TColumnGroupElement>(ColumnPlugin.key);\n\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  const isOpen = useDebouncePopoverOpen();\n\n  const onColumnChange = (widths: string[]) => {\n    setColumns(editor, {\n      at: findNodePath(editor, columnGroupElement),\n      widths,\n    });\n  };\n\n  if (readOnly) return <>{children}</>;\n\n  return (\n    <Popover open={isOpen} modal={false}>\n      <PopoverAnchor>{children}</PopoverAnchor>\n      <PopoverContent\n        className=\"w-auto p-1\"\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        align=\"center\"\n        side=\"top\"\n        sideOffset={10}\n      >\n        <div className=\"box-content flex items-center [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onColumnChange(['50%', '50%'])}\n          >\n            <DoubleColumnOutlined />\n          </Button>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onColumnChange(['33%', '33%', '33%'])}\n          >\n            <ThreeColumnOutlined />\n          </Button>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onColumnChange(['70%', '30%'])}\n          >\n            <RightSideDoubleColumnOutlined />\n          </Button>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onColumnChange(['30%', '70%'])}\n          >\n            <LeftSideDoubleColumnOutlined />\n          </Button>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onColumnChange(['25%', '50%', '25%'])}\n          >\n            <DoubleSideDoubleColumnOutlined />\n          </Button>\n\n          <Separator orientation=\"vertical\" className=\"mx-1 h-6\" />\n          <Button size=\"icon\" variant=\"ghost\" {...buttonProps}>\n            <Trash2Icon />\n          </Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nconst DoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst ThreeColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z\"\n      fill=\"#4C5161\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst RightSideDoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst LeftSideDoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst DoubleSideDoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n  useEditorRef,\n  useElement,\n  useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n  type TColumnElement,\n  type TColumnGroupElement,\n  setColumns,\n} from '@udecode/plate-layout';\nimport {\n  ColumnItemPlugin,\n  ColumnPlugin,\n  useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { findNodePath } from '@udecode/plate-common';\nimport { type LucideProps, Trash2Icon } from 'lucide-react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Button } from './button';\nimport { PlateElement } from './plate-element';\nimport { Popover, PopoverAnchor, PopoverContent } from './popover';\nimport { Separator } from './separator';\n\nexport const ColumnGroupElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateElement ref={ref} className={cn(className, 'mb-2')} {...props}>\n        <ColumnFloatingToolbar>\n          <div className={cn('flex size-full rounded')}>{children}</div>\n        </ColumnFloatingToolbar>\n      </PlateElement>\n    );\n  }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n  const editor = useEditorRef();\n  const readOnly = useReadOnly();\n\n  const element = useElement<TColumnElement>(ColumnItemPlugin.key);\n  const columnGroupElement = useElement<TColumnGroupElement>(ColumnPlugin.key);\n\n  const { props: buttonProps } = useRemoveNodeButton({ element });\n\n  const isOpen = useDebouncePopoverOpen();\n\n  const onColumnChange = (widths: string[]) => {\n    setColumns(editor, {\n      at: findNodePath(editor, columnGroupElement),\n      widths,\n    });\n  };\n\n  if (readOnly) return <>{children}</>;\n\n  return (\n    <Popover open={isOpen} modal={false}>\n      <PopoverAnchor>{children}</PopoverAnchor>\n      <PopoverContent\n        className=\"w-auto p-1\"\n        onOpenAutoFocus={(e) => e.preventDefault()}\n        align=\"center\"\n        side=\"top\"\n        sideOffset={10}\n      >\n        <div className=\"box-content flex items-center [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onColumnChange(['50%', '50%'])}\n          >\n            <DoubleColumnOutlined />\n          </Button>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onColumnChange(['33%', '33%', '33%'])}\n          >\n            <ThreeColumnOutlined />\n          </Button>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onColumnChange(['70%', '30%'])}\n          >\n            <RightSideDoubleColumnOutlined />\n          </Button>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onColumnChange(['30%', '70%'])}\n          >\n            <LeftSideDoubleColumnOutlined />\n          </Button>\n          <Button\n            size=\"icon\"\n            variant=\"ghost\"\n            onClick={() => onColumnChange(['25%', '50%', '25%'])}\n          >\n            <DoubleSideDoubleColumnOutlined />\n          </Button>\n\n          <Separator orientation=\"vertical\" className=\"mx-1 h-6\" />\n          <Button size=\"icon\" variant=\"ghost\" {...buttonProps}>\n            <Trash2Icon />\n          </Button>\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nconst DoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M8.5 3H13V13H8.5V3ZM7.5 2H8.5H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H8.5H7.5H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H7.5ZM7.5 13H3L3 3H7.5V13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst ThreeColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M9.25 3H6.75V13H9.25V3ZM9.25 2H6.75H5.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H5.75H6.75H9.25H10.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H10.25H9.25ZM10.25 3V13H13V3H10.25ZM3 13H5.75V3H3L3 13Z\"\n      fill=\"#4C5161\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst RightSideDoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M11.25 3H13V13H11.25V3ZM10.25 2H11.25H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H11.25H10.25H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H10.25ZM10.25 13H3L3 3H10.25V13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst LeftSideDoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M5.75 3H13V13H5.75V3ZM4.75 2H5.75H13C13.5523 2 14 2.44772 14 3V13C14 13.5523 13.5523 14 13 14H5.75H4.75H3C2.44772 14 2 13.5523 2 13V3C2 2.44772 2.44772 2 3 2H4.75ZM4.75 13H3L3 3H4.75V13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n\nconst DoubleSideDoubleColumnOutlined = (props: LucideProps) => (\n  <svg\n    fill=\"none\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    width=\"16\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <path\n      clipRule=\"evenodd\"\n      d=\"M10.25 3H5.75V13H10.25V3ZM10.25 2H5.75H4.75H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.75H5.75H10.25H11.25H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H11.25H10.25ZM11.25 3V13H13V3H11.25ZM3 13H4.75V3H3L3 13Z\"\n      fill=\"#595E6F\"\n      fillRule=\"evenodd\"\n    />\n  </svg>\n);\n",
       "path": "plate-ui/column-group-element.tsx",
       "target": "components/plate-ui/column-group-element.tsx",
       "type": "registry:ui"
diff --git a/apps/www/src/registry/default/plate-ui/column-group-element.tsx b/apps/www/src/registry/default/plate-ui/column-group-element.tsx
index 1e8fb6aff..d66ef57fa 100644
--- a/apps/www/src/registry/default/plate-ui/column-group-element.tsx
+++ b/apps/www/src/registry/default/plate-ui/column-group-element.tsx
@@ -18,7 +18,7 @@ import {
   ColumnPlugin,
   useDebouncePopoverOpen,
 } from '@udecode/plate-layout/react';
-import { findNodePath } from '@udecode/slate';
+import { findNodePath } from '@udecode/plate-common';
 import { type LucideProps, Trash2Icon } from 'lucide-react';
 import { useReadOnly } from 'slate-react';
 
diff --git a/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx b/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx
index 1e8fb6aff..d66ef57fa 100644
--- a/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/column-group-element.tsx
@@ -18,7 +18,7 @@ import {
   ColumnPlugin,
   useDebouncePopoverOpen,
 } from '@udecode/plate-layout/react';
-import { findNodePath } from '@udecode/slate';
+import { findNodePath } from '@udecode/plate-common';
 import { type LucideProps, Trash2Icon } from 'lucide-react';
 import { useReadOnly } from 'slate-react';