Skip to content

Commit

Permalink
fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@zbeyens
zbeyens committed Oct 1, 2024
1 parent 660bd7b commit 7943d8c
Show file tree
Hide file tree
Showing 34 changed files with 271 additions and 98 deletions.
5 changes: 5 additions & 0 deletions .changeset/core.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@udecode/plate-core': patch
---

`useOptions`, `useOption` missing plugins now warn instead of erroring.
108 changes: 86 additions & 22 deletions apps/www/public/r/index.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,34 @@
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [
"@udecode/plate-selection"
],
"files": [
{
"path": "plate-ui/block-selection.tsx",
"type": "registry:ui"
}
],
"name": "block-selection",
"registryDependencies": [],
"type": "registry:ui"
},
{
"dependencies": [],
"files": [
{
"path": "plate-ui/plate-element.tsx",
"type": "registry:ui"
}
],
"name": "plate-element",
"registryDependencies": [
"block-selection"
],
"type": "registry:ui"
},
{
"dependencies": [
"@udecode/plate-cloud"
Expand Down Expand Up @@ -65,7 +93,8 @@
],
"name": "code-block-element",
"registryDependencies": [
"command"
"command",
"plate-element"
],
"type": "registry:ui"
},
Expand All @@ -86,7 +115,8 @@
"name": "column-element",
"registryDependencies": [
"command",
"resizable"
"resizable",
"plate-element"
],
"type": "registry:ui"
},
Expand Down Expand Up @@ -176,6 +206,7 @@
{
"dependencies": [
"@udecode/plate-dnd",
"@udecode/plate-selection",
"react-dnd",
"react-dnd-html5-backend"
],
Expand Down Expand Up @@ -255,7 +286,9 @@
],
"name": "emoji-input-element",
"registryDependencies": [
"inline-combobox"
"inline-combobox",
"plate-element",
"use-debounce"
],
"type": "registry:ui"
},
Expand Down Expand Up @@ -301,7 +334,9 @@
}
],
"name": "blockquote-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
},
{
Expand All @@ -316,7 +351,8 @@
],
"name": "date-element",
"registryDependencies": [
"calendar"
"calendar",
"plate-element"
],
"type": "registry:ui"
},
Expand Down Expand Up @@ -404,7 +440,9 @@
}
],
"name": "code-line-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
},
{
Expand Down Expand Up @@ -514,7 +552,9 @@
}
],
"name": "excalidraw-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
},
{
Expand Down Expand Up @@ -596,7 +636,9 @@
}
],
"name": "heading-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
},
{
Expand Down Expand Up @@ -624,7 +666,9 @@
}
],
"name": "hr-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
},
{
Expand All @@ -641,7 +685,8 @@
"registryDependencies": [
"media-popover",
"caption",
"resizable"
"resizable",
"plate-element"
],
"type": "registry:ui"
},
Expand Down Expand Up @@ -764,7 +809,9 @@
}
],
"name": "link-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
},
{
Expand Down Expand Up @@ -813,7 +860,9 @@
}
],
"name": "list-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
},
{
Expand Down Expand Up @@ -864,7 +913,8 @@
"registryDependencies": [
"media-popover",
"caption",
"resizable"
"resizable",
"plate-element"
],
"type": "registry:ui"
},
Expand Down Expand Up @@ -914,7 +964,10 @@
}
],
"name": "mention-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element",
"use-mounted"
],
"type": "registry:ui"
},
{
Expand All @@ -929,7 +982,8 @@
],
"name": "mention-input-element",
"registryDependencies": [
"inline-combobox"
"inline-combobox",
"plate-element"
],
"type": "registry:ui"
},
Expand Down Expand Up @@ -989,7 +1043,9 @@
}
],
"name": "paragraph-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
},
{
Expand Down Expand Up @@ -1063,7 +1119,8 @@
],
"name": "slash-input-element",
"registryDependencies": [
"inline-combobox"
"inline-combobox",
"plate-element"
],
"type": "registry:ui"
},
Expand All @@ -1079,7 +1136,8 @@
],
"name": "table-cell-element",
"registryDependencies": [
"resizable"
"resizable",
"plate-element"
],
"type": "registry:ui"
},
Expand Down Expand Up @@ -1112,7 +1170,8 @@
],
"name": "table-element",
"registryDependencies": [
"dropdown-menu"
"dropdown-menu",
"plate-element"
],
"type": "registry:ui"
},
Expand All @@ -1127,7 +1186,9 @@
}
],
"name": "table-row-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
},
{
Expand All @@ -1142,7 +1203,8 @@
],
"name": "todo-list-element",
"registryDependencies": [
"checkbox"
"checkbox",
"plate-element"
],
"type": "registry:ui"
},
Expand All @@ -1157,7 +1219,9 @@
}
],
"name": "toggle-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
},
{
Expand Down
16 changes: 16 additions & 0 deletions apps/www/public/r/styles/default/block-selection.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"dependencies": [
"@udecode/plate-selection"
],
"files": [
{
"content": "import { useBlockSelected } from '@udecode/plate-selection/react';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nconst blockSelectionVariants = cva(\n 'pointer-events-none absolute inset-0 z-[1] bg-brand/[.13] transition-opacity',\n {\n defaultVariants: {\n active: false,\n },\n variants: {\n active: {\n false: 'opacity-0',\n true: 'opacity-100',\n },\n },\n }\n);\n\nexport function BlockSelection({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> &\n VariantProps<typeof blockSelectionVariants>) {\n const isBlockSelected = useBlockSelected();\n\n if (!isBlockSelected) return null;\n\n return (\n <div\n className={blockSelectionVariants({\n active: isBlockSelected,\n className,\n })}\n {...props}\n />\n );\n}\n",
"path": "plate-ui/block-selection.tsx",
"target": "",
"type": "registry:ui"
}
],
"name": "block-selection",
"registryDependencies": [],
"type": "registry:ui"
}
6 changes: 4 additions & 2 deletions apps/www/public/r/styles/default/blockquote-element.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
],
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const BlockquoteElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n return (\n <PlateElement\n ref={ref}\n asChild\n className={cn('my-1 border-l-2 pl-6 italic', className)}\n {...props}\n >\n <blockquote>{children}</blockquote>\n </PlateElement>\n );\n }\n);\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const BlockquoteElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n return (\n <PlateElement\n ref={ref}\n as=\"blockquote\"\n className={cn('my-1 border-l-2 pl-6 italic', className)}\n {...props}\n >\n {children}\n </PlateElement>\n );\n }\n);\n",
"path": "plate-ui/blockquote-element.tsx",
"target": "",
"type": "registry:ui"
}
],
"name": "blockquote-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
}
5 changes: 3 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 @@ -4,7 +4,7 @@
],
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef<typeof PlateElement>(\n ({ children, className, ...props }, ref) => {\n const { element } = props;\n const state = useCodeBlockElementState({ element });\n\n return (\n <PlateElement\n ref={ref}\n className={cn('relative py-1', state.className, 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 const state = useCodeBlockElementState({ element });\n\n return (\n <PlateElement\n ref={ref}\n className={cn('relative py-1', state.className, 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": "",
"type": "registry:ui"
Expand All @@ -24,7 +24,8 @@
],
"name": "code-block-element",
"registryDependencies": [
"command"
"command",
"plate-element"
],
"type": "registry:ui"
}
6 changes: 4 additions & 2 deletions apps/www/public/r/styles/default/code-line-element.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,15 @@
],
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const CodeLineElement = withRef<typeof PlateElement>((props, ref) => (\n <PlateElement ref={ref} {...props} />\n));\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { PlateElement } from './plate-element';\n\nexport const CodeLineElement = withRef<typeof PlateElement>((props, ref) => (\n <PlateElement ref={ref} {...props} />\n));\n",
"path": "plate-ui/code-line-element.tsx",
"target": "",
"type": "registry:ui"
}
],
"name": "code-line-element",
"registryDependencies": [],
"registryDependencies": [
"plate-element"
],
"type": "registry:ui"
}
7 changes: 4 additions & 3 deletions apps/www/public/r/styles/default/column-element.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
],
"files": [
{
"content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement, useElement, withHOC } from '@udecode/plate-common/react';\nimport { ResizableProvider } from '@udecode/plate-resizable';\nimport { useReadOnly } from 'slate-react';\n\nexport const ColumnElement = withHOC(\n ResizableProvider,\n withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {\n const readOnly = useReadOnly();\n const { width } = useElement<TColumnElement>();\n\n return (\n <PlateElement\n ref={ref}\n className={cn(\n className,\n !readOnly && 'rounded-lg border border-dashed p-1.5'\n )}\n style={{ width }}\n {...props}\n >\n {children}\n </PlateElement>\n );\n })\n);\n",
"content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement, withHOC } from '@udecode/plate-common/react';\nimport { ResizableProvider } from '@udecode/plate-resizable';\nimport { useReadOnly } from 'slate-react';\n\nimport { PlateElement } from './plate-element';\n\nexport const ColumnElement = withHOC(\n ResizableProvider,\n withRef<typeof PlateElement>(({ children, className, ...props }, ref) => {\n const readOnly = useReadOnly();\n const { width } = useElement<TColumnElement>();\n\n return (\n <PlateElement\n ref={ref}\n className={cn(\n className,\n !readOnly && 'rounded-lg border border-dashed p-1.5'\n )}\n style={{ width }}\n {...props}\n >\n {children}\n </PlateElement>\n );\n })\n);\n",
"path": "plate-ui/column-element.tsx",
"target": "",
"type": "registry:ui"
},
{
"content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport {\n PlateElement,\n useElement,\n useRemoveNodeButton,\n} from '@udecode/plate-common/react';\nimport {\n ColumnItemPlugin,\n useColumnState,\n useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\n\nimport { Button } from './button';\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, 'my-2')} {...props}>\n <ColumnFloatingToolbar>\n <div className={cn('flex size-full gap-4 rounded')}>{children}</div>\n </ColumnFloatingToolbar>\n </PlateElement>\n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const readOnly = useReadOnly();\n\n const {\n setDoubleColumn,\n setDoubleSideDoubleColumn,\n setLeftSideDoubleColumn,\n setRightSideDoubleColumn,\n setThreeColumn,\n } = useColumnState();\n\n const element = useElement<TColumnElement>(ColumnItemPlugin.key);\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\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 h-9 items-center gap-1 [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n <Button size=\"sms\" variant=\"ghost\" onClick={setDoubleColumn}>\n <Icons.doubleColumn />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setThreeColumn}>\n <Icons.threeColumn />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setRightSideDoubleColumn}>\n <Icons.rightSideDoubleColumn />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setLeftSideDoubleColumn}>\n <Icons.leftSideDoubleColumn />\n </Button>\n <Button\n size=\"sms\"\n variant=\"ghost\"\n onClick={setDoubleSideDoubleColumn}\n >\n <Icons.doubleSideDoubleColumn />\n </Button>\n\n <Separator orientation=\"vertical\" className=\"my-1\" />\n <Button size=\"sms\" variant=\"ghost\" {...buttonProps}>\n <Icons.delete />\n </Button>\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n",
"content": "import React from 'react';\n\nimport type { TColumnElement } from '@udecode/plate-layout';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useElement, useRemoveNodeButton } from '@udecode/plate-common/react';\nimport {\n ColumnItemPlugin,\n useColumnState,\n useDebouncePopoverOpen,\n} from '@udecode/plate-layout/react';\nimport { useReadOnly } from 'slate-react';\n\nimport { Icons } from '@/components/icons';\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, 'my-2')} {...props}>\n <ColumnFloatingToolbar>\n <div className={cn('flex size-full gap-4 rounded')}>{children}</div>\n </ColumnFloatingToolbar>\n </PlateElement>\n );\n }\n);\n\nexport function ColumnFloatingToolbar({ children }: React.PropsWithChildren) {\n const readOnly = useReadOnly();\n\n const {\n setDoubleColumn,\n setDoubleSideDoubleColumn,\n setLeftSideDoubleColumn,\n setRightSideDoubleColumn,\n setThreeColumn,\n } = useColumnState();\n\n const element = useElement<TColumnElement>(ColumnItemPlugin.key);\n\n const { props: buttonProps } = useRemoveNodeButton({ element });\n\n const isOpen = useDebouncePopoverOpen();\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 h-9 items-center gap-1 [&_svg]:size-4 [&_svg]:text-muted-foreground\">\n <Button size=\"sms\" variant=\"ghost\" onClick={setDoubleColumn}>\n <Icons.doubleColumn />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setThreeColumn}>\n <Icons.threeColumn />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setRightSideDoubleColumn}>\n <Icons.rightSideDoubleColumn />\n </Button>\n <Button size=\"sms\" variant=\"ghost\" onClick={setLeftSideDoubleColumn}>\n <Icons.leftSideDoubleColumn />\n </Button>\n <Button\n size=\"sms\"\n variant=\"ghost\"\n onClick={setDoubleSideDoubleColumn}\n >\n <Icons.doubleSideDoubleColumn />\n </Button>\n\n <Separator orientation=\"vertical\" className=\"my-1\" />\n <Button size=\"sms\" variant=\"ghost\" {...buttonProps}>\n <Icons.delete />\n </Button>\n </div>\n </PopoverContent>\n </Popover>\n );\n}\n",
"path": "plate-ui/column-group-element.tsx",
"target": "",
"type": "registry:ui"
Expand All @@ -19,7 +19,8 @@
"name": "column-element",
"registryDependencies": [
"command",
"resizable"
"resizable",
"plate-element"
],
"type": "registry:ui"
}
Loading

0 comments on commit 7943d8c

Please sign in to comment.