Skip to content

Commit

Permalink
Merge branch 'main' into improve-ts
Browse files Browse the repository at this point in the history
  • Loading branch information
@Goldziher
Goldziher authored Dec 26, 2024
2 parents 5b05fec + 63c4652 commit c30304b
Show file tree
Hide file tree
Showing 22 changed files with 355 additions and 84 deletions.
56 changes: 54 additions & 2 deletions apps/www/content/docs/cn/components/changelog.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,62 @@ toc: true

## 2024年12月 #17


### 12月25日 #17.6

- `indent-list-toolbar-button`: 移除 `IndentListToolbarButton`，改用 `NumberedIndentListToolbarButton` 和 `BulletedIndentListToolbarButton`。
- `table-dropdown-menu`: 新的插入表格界面。

### 12月23日 #17.5

- `table-element`: 修复选择
- 修改前: `isSelectingCell && '[&_*::selection]:bg-none'`
- 修改后: `isSelectingCell && '[&_*::selection]:!bg-transparent'`


### 12月21日 #17.4

更新 `tailwind.config.cjs` 以提供更好的 HTML 导出字体支持：

```ts
fontFamily: {
heading: [
'var(--font-heading)',
'ui-sans-serif',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI Variable Display',
'Segoe UI',
'Helvetica',
'Apple Color Emoji',
'Arial',
'sans-serif',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji',
],
mono: ['var(--font-mono)', ...fontFamily.mono],
sans: [
'var(--font-sans)',
'ui-sans-serif',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI Variable Display',
'Segoe UI',
'Helvetica',
'Apple Color Emoji',
'Arial',
'sans-serif',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji',
],
```
### 12月20日 #17.3
- `insertColumnGroup`, `toggleColumnGroup`: use `columns` option instead of `layout`
- Remove `with-draggables`. Add [`DraggableAboveNodes`](https://github.com/udecode/plate/pull/3878/files#diff-493c12ebed9c3ef9fd8c3a723909b18ad439a448c0132d2d93e5341ee0888ad2) to `draggable`. Add to `DndPlugin` config:
- `insertColumnGroup`、`toggleColumnGroup`：使用 `columns` 选项替代 `layout`
- 移除 `with-draggables`。将 [`DraggableAboveNodes`](https://github.com/udecode/plate/pull/3878/files#diff-493c12ebed9c3ef9fd8c3a723909b18ad439a448c0132d2d93e5341ee0888ad2) 添加到 `draggable`。添加到 `DndPlugin` 配置中：
```tsx
DndPlugin.configure({ render: { aboveNodes: DraggableAboveNodes } }),
```
Expand Down
2 changes: 1 addition & 1 deletion apps/www/content/docs/cn/indent-list.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ const plugins = [
<APIItem name="editor" type="PlateEditor">
编辑器实例。
</APIItem>
<APIItem name="type" type="string">
<APIItem name="type" type="string | string[]">
要检查的列表样式类型。
</APIItem>
</APIParameters>
Expand Down
5 changes: 5 additions & 0 deletions apps/www/content/docs/en/components/changelog.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver

## December 2024 #17

### December 25 #17.6

- `indent-list-toolbar-button`: Remove `IndentListToolbarButton` use `NumberedIndentListToolbarButton` and `BulletedIndentListToolbarButton` instead.
- `table-dropdown-menu`: new insert table interface.

### December 23 #17.5

- `table-element`: fix selection
Expand Down
2 changes: 1 addition & 1 deletion apps/www/content/docs/en/indent-list.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,7 @@ Checks if some of the selected blocks have a specific list style type.
<APIItem name="editor" type="PlateEditor">
The editor instance.
</APIItem>
<APIItem name="type" type="string">
<APIItem name="type" type="string | string[]">
The list style type to check.
</APIItem>
</APIParameters>
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/comments-plugin.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 { CommentsPlugin } from '@udecode/plate-comments/react';\n\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\n\nexport const commentsPlugin = CommentsPlugin.configure({\n options: {\n myUserId: '1',\n users: {\n 1: {\n id: '1',\n avatarUrl: 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4',\n name: 'zbeyens',\n },\n 2: {\n id: '2',\n avatarUrl: 'https://avatars.githubusercontent.com/u/4272090?v=4',\n name: '12joan',\n },\n },\n },\n render: { afterEditable: () => <CommentsPopover /> },\n});\n",
"content": "'use client';\n\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\n\nimport { commentsData } from '@/components/values/comments-value';\nimport { CommentsPopover } from '@/components/plate-ui/comments-popover';\n\nexport const commentsPlugin = CommentsPlugin.configure({\n options: {\n comments: commentsData,\n myUserId: '1',\n users: {\n 1: {\n id: '1',\n avatarUrl: 'https://avatars.githubusercontent.com/u/19695832?s=96&v=4',\n name: 'zbeyens',\n },\n 2: {\n id: '2',\n avatarUrl: 'https://avatars.githubusercontent.com/u/4272090?v=4',\n name: '12joan',\n },\n },\n },\n render: { afterEditable: () => <CommentsPopover /> },\n});\n",
"path": "components/editor/plugins/comments-plugin.tsx",
"target": "components/editor/plugins/comments-plugin.tsx",
"type": "registry:component"
Expand Down
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/draggable.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
},
"files": [
{
"content": "'use client';\n\nimport React, { useMemo } from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { isType, someNode } from '@udecode/plate-common';\nimport {\n type NodeWrapperComponent,\n type PlateRenderElementProps,\n MemoizedChildren,\n ParagraphPlugin,\n useEditorPlugin,\n useEditorRef,\n useElement,\n usePath,\n} from '@udecode/plate-common/react';\nimport { useDraggable, useDropLine } from '@udecode/plate-dnd';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport {\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n} from '@udecode/plate-media/react';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\nimport {\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { GripVertical } from 'lucide-react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { STRUCTURAL_TYPES } from '@/components/editor/transforms';\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip';\n\nconst UNDRAGGABLE_KEYS = [\n ColumnItemPlugin.key,\n TableRowPlugin.key,\n TableCellPlugin.key,\n];\n\nexport const DraggableAboveNodes: NodeWrapperComponent = (props) => {\n const { editor, element, path } = props;\n const readOnly = useReadOnly();\n\n const enabled = useMemo(() => {\n if (readOnly) return false;\n if (path.length === 1 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n return true;\n }\n if (path.length === 3 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n const block = someNode(editor, {\n at: path,\n match: {\n type: editor.getType(ColumnPlugin),\n },\n });\n\n if (block) {\n return true;\n }\n }\n if (path.length === 4 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n const block = someNode(editor, {\n at: path,\n match: {\n type: editor.getType(TablePlugin),\n },\n });\n\n if (block) {\n return true;\n }\n }\n\n return false;\n }, [editor, element, path, readOnly]);\n\n if (!enabled) return;\n\n return (props) => <Draggable {...props} />;\n};\n\nexport const Draggable = withRef<'div', PlateRenderElementProps>(\n ({ className, ...props }, ref) => {\n const { children, editor, element, path } = props;\n const { isDragging, previewRef, handleRef } = useDraggable({ element });\n\n const isInColumn = path?.length === 3;\n const isInTable = path?.length === 4;\n\n return (\n <div\n ref={ref}\n className={cn(\n 'relative',\n isDragging && 'opacity-50',\n STRUCTURAL_TYPES.includes(element.type)\n ? 'group/structural'\n : 'group',\n className\n )}\n >\n <Gutter>\n <div\n className={cn(\n 'slate-blockToolbarWrapper',\n 'flex h-[1.5em]',\n isType(editor, element, [\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ]) && 'h-[1.3em]',\n isInColumn && 'h-4',\n isInTable && 'mt-1 size-4'\n )}\n >\n <div\n className={cn(\n 'slate-blockToolbar',\n 'pointer-events-auto mr-1 flex items-center',\n isInColumn && 'mr-1.5'\n )}\n >\n <div ref={handleRef} className=\"size-4\">\n <DragHandle />\n </div>\n </div>\n </div>\n </Gutter>\n\n <div ref={previewRef} className=\"slate-blockWrapper\">\n <MemoizedChildren>{children}</MemoizedChildren>\n\n <DropLine />\n </div>\n </div>\n );\n }\n);\n\nconst Gutter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => {\n const { editor, useOption } = useEditorPlugin(BlockSelectionPlugin);\n const element = useElement();\n const path = usePath();\n const isSelectionAreaVisible = useOption('isSelectionAreaVisible');\n const selected = useSelected();\n\n const isNodeType = (keys: string[] | string) => isType(editor, element, keys);\n\n const isInColumn = path?.length === 3;\n const isInTable = path?.length === 4;\n\n return (\n <div\n ref={ref}\n className={cn(\n 'slate-gutterLeft',\n 'absolute -top-px z-50 flex h-full -translate-x-full cursor-text hover:opacity-100 sm:opacity-0',\n STRUCTURAL_TYPES.includes(element.type)\n ? 'main-hover:group-hover/structural:opacity-100'\n : 'main-hover:group-hover:opacity-100',\n isSelectionAreaVisible && 'hidden',\n !selected && 'opacity-0',\n isNodeType(HEADING_KEYS.h1) && 'pb-1 text-[1.875em]',\n isNodeType(HEADING_KEYS.h2) && 'pb-1 text-[1.5em]',\n isNodeType(HEADING_KEYS.h3) && 'pb-1 pt-[2px] text-[1.25em]',\n isNodeType([HEADING_KEYS.h4, HEADING_KEYS.h5]) &&\n 'pb-0 pt-[3px] text-[1.1em]',\n isNodeType(HEADING_KEYS.h6) && 'pb-0',\n isNodeType(ParagraphPlugin.key) && 'pb-0 pt-[3px]',\n isNodeType(['ul', 'ol']) && 'pb-0',\n isNodeType(BlockquotePlugin.key) && 'pb-0',\n isNodeType(CodeBlockPlugin.key) && 'pb-0 pt-6',\n isNodeType([\n ImagePlugin.key,\n MediaEmbedPlugin.key,\n ExcalidrawPlugin.key,\n TogglePlugin.key,\n ColumnPlugin.key,\n ]) && 'py-0',\n isNodeType([PlaceholderPlugin.key, TablePlugin.key]) && 'pb-0 pt-3',\n isInColumn && 'mt-2 h-4 pt-0',\n isInTable && 'size-4',\n className\n )}\n contentEditable={false}\n {...props}\n >\n {children}\n </div>\n );\n});\n\nconst DragHandle = React.memo(() => {\n const editor = useEditorRef();\n\n return (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger type=\"button\">\n <GripVertical\n className=\"size-4 text-muted-foreground\"\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection?.resetSelectedIds();\n }}\n />\n </TooltipTrigger>\n <TooltipPortal>\n <TooltipContent>Drag to move</TooltipContent>\n </TooltipPortal>\n </Tooltip>\n </TooltipProvider>\n );\n});\n\nconst DropLine = React.memo(\n React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const { dropLine } = useDropLine();\n\n if (!dropLine) return null;\n\n return (\n <div\n ref={ref}\n {...props}\n className={cn(\n 'slate-dropLine',\n 'absolute inset-x-0 h-0.5 opacity-100 transition-opacity',\n 'bg-brand/50',\n dropLine === 'top' && '-top-px',\n dropLine === 'bottom' && '-bottom-px',\n className\n )}\n />\n );\n }\n )\n);\n",
"content": "'use client';\n\nimport React, { useMemo } from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport { isType, someNode } from '@udecode/plate-common';\nimport {\n type NodeWrapperComponent,\n type PlateRenderElementProps,\n MemoizedChildren,\n ParagraphPlugin,\n useEditorPlugin,\n useEditorRef,\n useElement,\n usePath,\n} from '@udecode/plate-common/react';\nimport { useDraggable, useDropLine } from '@udecode/plate-dnd';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport {\n ImagePlugin,\n MediaEmbedPlugin,\n PlaceholderPlugin,\n} from '@udecode/plate-media/react';\nimport { BlockSelectionPlugin } from '@udecode/plate-selection/react';\nimport {\n TableCellPlugin,\n TablePlugin,\n TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { GripVertical } from 'lucide-react';\nimport { useReadOnly, useSelected } from 'slate-react';\n\nimport { STRUCTURAL_TYPES } from '@/components/editor/transforms';\n\nimport {\n Tooltip,\n TooltipContent,\n TooltipPortal,\n TooltipProvider,\n TooltipTrigger,\n} from './tooltip';\n\nconst UNDRAGGABLE_KEYS = [\n ColumnItemPlugin.key,\n TableRowPlugin.key,\n TableCellPlugin.key,\n];\n\nexport const DraggableAboveNodes: NodeWrapperComponent = (props) => {\n const { editor, element, path } = props;\n const readOnly = useReadOnly();\n\n const enabled = useMemo(() => {\n if (readOnly) return false;\n if (path.length === 1 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n return true;\n }\n if (path.length === 3 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n const block = someNode(editor, {\n at: path,\n match: {\n type: editor.getType(ColumnPlugin),\n },\n });\n\n if (block) {\n return true;\n }\n }\n if (path.length === 4 && !isType(editor, element, UNDRAGGABLE_KEYS)) {\n const block = someNode(editor, {\n at: path,\n match: {\n type: editor.getType(TablePlugin),\n },\n });\n\n if (block) {\n return true;\n }\n }\n\n return false;\n }, [editor, element, path, readOnly]);\n\n if (!enabled) return;\n\n return (props) => <Draggable {...props} />;\n};\n\nexport const Draggable = withRef<'div', PlateRenderElementProps>(\n ({ className, ...props }, ref) => {\n const { children, editor, element, path } = props;\n const { isDragging, previewRef, handleRef } = useDraggable({ element });\n\n const isInColumn = path?.length === 3;\n const isInTable = path?.length === 4;\n\n return (\n <div\n ref={ref}\n className={cn(\n 'relative',\n isDragging && 'opacity-50',\n STRUCTURAL_TYPES.includes(element.type) ? 'group/structural' : 'group'\n )}\n >\n <Gutter>\n <div\n className={cn(\n 'slate-blockToolbarWrapper',\n 'flex h-[1.5em]',\n isType(editor, element, [\n HEADING_KEYS.h1,\n HEADING_KEYS.h2,\n HEADING_KEYS.h3,\n HEADING_KEYS.h4,\n HEADING_KEYS.h5,\n ]) && 'h-[1.3em]',\n isInColumn && 'h-4',\n isInTable && 'mt-1 size-4'\n )}\n >\n <div\n className={cn(\n 'slate-blockToolbar',\n 'pointer-events-auto mr-1 flex items-center',\n isInColumn && 'mr-1.5'\n )}\n >\n <div ref={handleRef} className=\"size-4\">\n <DragHandle />\n </div>\n </div>\n </div>\n </Gutter>\n\n <div ref={previewRef} className=\"slate-blockWrapper\">\n <MemoizedChildren>{children}</MemoizedChildren>\n\n <DropLine />\n </div>\n </div>\n );\n }\n);\n\nconst Gutter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ children, className, ...props }, ref) => {\n const { editor, useOption } = useEditorPlugin(BlockSelectionPlugin);\n const element = useElement();\n const path = usePath();\n const isSelectionAreaVisible = useOption('isSelectionAreaVisible');\n const selected = useSelected();\n\n const isNodeType = (keys: string[] | string) => isType(editor, element, keys);\n\n const isInColumn = path?.length === 3;\n const isInTable = path?.length === 4;\n\n return (\n <div\n ref={ref}\n className={cn(\n 'slate-gutterLeft',\n 'absolute -top-px z-50 flex h-full -translate-x-full cursor-text hover:opacity-100 sm:opacity-0',\n STRUCTURAL_TYPES.includes(element.type)\n ? 'main-hover:group-hover/structural:opacity-100'\n : 'main-hover:group-hover:opacity-100',\n isSelectionAreaVisible && 'hidden',\n !selected && 'opacity-0',\n isNodeType(HEADING_KEYS.h1) && 'pb-1 text-[1.875em]',\n isNodeType(HEADING_KEYS.h2) && 'pb-1 text-[1.5em]',\n isNodeType(HEADING_KEYS.h3) && 'pb-1 pt-[2px] text-[1.25em]',\n isNodeType([HEADING_KEYS.h4, HEADING_KEYS.h5]) &&\n 'pb-0 pt-[3px] text-[1.1em]',\n isNodeType(HEADING_KEYS.h6) && 'pb-0',\n isNodeType(ParagraphPlugin.key) && 'pb-0 pt-[3px]',\n isNodeType(['ul', 'ol']) && 'pb-0',\n isNodeType(BlockquotePlugin.key) && 'pb-0',\n isNodeType(CodeBlockPlugin.key) && 'pb-0 pt-6',\n isNodeType([\n ImagePlugin.key,\n MediaEmbedPlugin.key,\n ExcalidrawPlugin.key,\n TogglePlugin.key,\n ColumnPlugin.key,\n ]) && 'py-0',\n isNodeType([PlaceholderPlugin.key, TablePlugin.key]) && 'pb-0 pt-3',\n isInColumn && 'mt-2 h-4 pt-0',\n isInTable && 'size-4',\n className\n )}\n contentEditable={false}\n {...props}\n >\n {children}\n </div>\n );\n});\n\nconst DragHandle = React.memo(() => {\n const editor = useEditorRef();\n\n return (\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger type=\"button\">\n <GripVertical\n className=\"size-4 text-muted-foreground\"\n onClick={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n onMouseDown={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection?.resetSelectedIds();\n }}\n />\n </TooltipTrigger>\n <TooltipPortal>\n <TooltipContent>Drag to move</TooltipContent>\n </TooltipPortal>\n </Tooltip>\n </TooltipProvider>\n );\n});\n\nconst DropLine = React.memo(\n React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n ({ className, ...props }, ref) => {\n const { dropLine } = useDropLine();\n\n if (!dropLine) return null;\n\n return (\n <div\n ref={ref}\n {...props}\n className={cn(\n 'slate-dropLine',\n 'absolute inset-x-0 h-0.5 opacity-100 transition-opacity',\n 'bg-brand/50',\n dropLine === 'top' && '-top-px',\n dropLine === 'bottom' && '-bottom-px',\n className\n )}\n />\n );\n }\n )\n);\n",
"path": "plate-ui/draggable.tsx",
"target": "components/plate-ui/draggable.tsx",
"type": "registry:ui"
Expand Down
Loading

0 comments on commit c30304b

Please sign in to comment.