Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toolbar/list #3918

Merged
merged 6 commits into from
Dec 25, 2024
Merged

Toolbar/list #3918

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b4f8182
toolbar
felixfeng33 Dec 25, 2024
051817c
fix
felixfeng33 Dec 25, 2024
5db1138
docs
felixfeng33 Dec 25, 2024
6771735
ci
felixfeng33 Dec 25, 2024
a4ed2bf
fix
felixfeng33 Dec 25, 2024
ba0269a
docs
felixfeng33 Dec 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/new-stingrays-live.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@udecode/plate-indent-list': patch
---

`someIndentList` support multiple type
56 changes: 54 additions & 2 deletions apps/www/content/docs/cn/components/changelog.mdx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading