Skip to content

Commit

Permalink
Merge pull request udecode#3933 from udecode/registry
Browse files Browse the repository at this point in the history
  • Loading branch information
@felixfeng33
felixfeng33 authored Dec 28, 2024
2 parents 9ba5253 + 99090fe commit 8fdd9c8
Show file tree
Hide file tree
Showing 13 changed files with 21 additions and 21 deletions.
4 changes: 2 additions & 2 deletions apps/www/public/r/styles/default/code-block-element.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@
},
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\nimport { PlateElement } from './plate-element';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n\n const state = useCodeBlockElementState({ element });\n\n return (\n <PlateElement\n ref={ref}\n className={cn(className, 'relative py-1', state.className)}\n {...props}\n >\n <pre className=\"overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]\">\n <code>{children}</code>\n </pre>\n\n {state.syntax && (\n <div\n className=\"absolute right-2 top-2 z-10 select-none\"\n contentEditable={false}\n >\n <CodeBlockCombobox />\n </div>\n )}\n </PlateElement>\n );\n }\n);\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\nimport { PlateElement } from './plate-element';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n\n const state = useCodeBlockElementState({ element });\n\n return (\n <PlateElement\n ref={ref}\n className={cn(className, 'py-1', state.className)}\n {...props}\n >\n <pre className=\"overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]\">\n <code>{children}</code>\n </pre>\n\n {state.syntax && (\n <div\n className=\"absolute right-2 top-2 z-10 select-none\"\n contentEditable={false}\n >\n <CodeBlockCombobox />\n </div>\n )}\n </PlateElement>\n );\n }\n);\n",
"path": "plate-ui/code-block-element.tsx",
"target": "components/plate-ui/code-block-element.tsx",
"type": "registry:ui"
},
{
"content": "import React from 'react';\n\nimport type { TCodeBlockElement } from '@udecode/plate-code-block';\nimport type { SlateElementProps } from '@udecode/plate-common';\n\nimport { cn } from '@udecode/cn';\nimport { SlateElement } from '@udecode/plate-common';\n\nexport const CodeBlockElementStatic = ({\n children,\n className,\n ...props\n}: SlateElementProps<TCodeBlockElement>) => {\n const { element } = props;\n\n const codeClassName = element?.lang\n ? `${element.lang} language-${element.lang}`\n : '';\n\n return (\n <SlateElement\n className={cn(className, 'relative py-1', codeClassName)}\n {...props}\n >\n <pre className=\"overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]\">\n <code>{children}</code>\n </pre>\n </SlateElement>\n );\n};\n",
"content": "import React from 'react';\n\nimport type { TCodeBlockElement } from '@udecode/plate-code-block';\nimport type { SlateElementProps } from '@udecode/plate-common';\n\nimport { cn } from '@udecode/cn';\nimport { SlateElement } from '@udecode/plate-common';\n\nexport const CodeBlockElementStatic = ({\n children,\n className,\n ...props\n}: SlateElementProps<TCodeBlockElement>) => {\n const { element } = props;\n\n const state = {\n className: element?.lang ? `${element.lang} language-${element.lang}` : '',\n };\n\n return (\n <SlateElement className={cn(className, 'py-1', state.className)} {...props}>\n <pre className=\"overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]\">\n <code>{children}</code>\n </pre>\n </SlateElement>\n );\n};\n",
"path": "plate-ui/code-block-element-static.tsx",
"target": "components/plate-ui/code-block-element-static.tsx",
"type": "registry:ui"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/column-element.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"type": "registry:ui"
},
{
"content": "import React from 'react';\n\nimport type { SlateElementProps } from '@udecode/plate-common';\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn } from '@udecode/cn';\nimport { SlateElement } from '@udecode/plate-common';\n\nexport function ColumnElementStatic({\n children,\n className,\n ...props\n}: SlateElementProps) {\n const { width } = props.element as TColumnElement;\n\n return (\n <SlateElement\n className={cn(className, 'border border-transparent p-1.5')}\n style={{ width: width ?? '100%' }}\n {...props}\n >\n {children}\n </SlateElement>\n );\n}\n",
"content": "import React from 'react';\n\nimport type { SlateElementProps } from '@udecode/plate-common';\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn } from '@udecode/cn';\nimport { SlateElement } from '@udecode/plate-common';\n\nexport function ColumnElementStatic({\n children,\n className,\n ...props\n}: SlateElementProps) {\n const { width } = props.element as TColumnElement;\n\n return (\n <div className=\"group/column relative\" style={{ width: width ?? '100%' }}>\n <SlateElement\n className={cn(\n className,\n 'h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0'\n )}\n {...props}\n >\n <div className={cn('relative h-full border border-transparent p-1.5')}>\n {children}\n </div>\n </SlateElement>\n </div>\n );\n}\n",
"path": "plate-ui/column-element-static.tsx",
"target": "components/plate-ui/column-element-static.tsx",
"type": "registry:ui"
Expand Down
4 changes: 2 additions & 2 deletions apps/www/public/r/styles/default/column-group-element.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@
},
"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/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",
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { findNodePath } from '@udecode/plate-common';\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 { 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"
},
{
"content": "import React from 'react';\n\nimport type { SlateElementProps } from '@udecode/plate-common';\n\nimport { cn } from '@udecode/cn';\nimport { SlateElement } from '@udecode/plate-common';\n\nexport function ColumnGroupElementStatic({\n children,\n className,\n ...props\n}: SlateElementProps) {\n return (\n <SlateElement className={cn(className, 'my-2')} {...props}>\n <div className={cn('flex size-full gap-4 rounded')}>{children}</div>\n </SlateElement>\n );\n}\n",
"content": "import React from 'react';\n\nimport type { SlateElementProps } from '@udecode/plate-common';\n\nimport { cn } from '@udecode/cn';\nimport { SlateElement } from '@udecode/plate-common';\n\nexport function ColumnGroupElementStatic({\n children,\n className,\n ...props\n}: SlateElementProps) {\n return (\n <SlateElement className={cn(className, 'mb-2')} {...props}>\n <div className={cn('flex size-full rounded')}>{children}</div>\n </SlateElement>\n );\n}\n",
"path": "plate-ui/column-group-element-static.tsx",
"target": "components/plate-ui/column-group-element-static.tsx",
"type": "registry:ui"
Expand Down
Loading

0 comments on commit 8fdd9c8

Please sign in to comment.