From 93b202a0cc0de085e4292f6e382de822ed3b4be9 Mon Sep 17 00:00:00 2001 From: Felix Feng Date: Fri, 20 Dec 2024 18:15:07 +0800 Subject: [PATCH] sync --- .../components/editor/plugins/dnd-plugins.tsx | 5 + .../src/components/editor/transforms.ts | 6 +- .../components/editor/use-create-editor.ts | 95 +++--- .../components/plate-ui/column-element.tsx | 24 +- .../plate-ui/column-group-element.tsx | 55 +++- .../src/components/plate-ui/date-element.tsx | 9 +- .../plate-ui/export-toolbar-button.tsx | 294 +++++++++++++++++- .../src/components/plate-ui/image-element.tsx | 15 +- .../plate-ui/media-video-element.tsx | 8 +- .../plate-ui/table-cell-element-static.tsx | 2 +- .../plate-ui/table-cell-element.tsx | 2 +- 11 files changed, 404 insertions(+), 111 deletions(-) diff --git a/templates/plate-playground-template/src/components/editor/plugins/dnd-plugins.tsx b/templates/plate-playground-template/src/components/editor/plugins/dnd-plugins.tsx index f5569c0f58..614d3bf4c7 100644 --- a/templates/plate-playground-template/src/components/editor/plugins/dnd-plugins.tsx +++ b/templates/plate-playground-template/src/components/editor/plugins/dnd-plugins.tsx @@ -4,6 +4,8 @@ import { DndPlugin } from '@udecode/plate-dnd'; import { PlaceholderPlugin } from '@udecode/plate-media/react'; import { NodeIdPlugin } from '@udecode/plate-node-id'; +import { DraggableAboveNodes } from '@/components/plate-ui/draggable'; + export const dndPlugins = [ NodeIdPlugin, DndPlugin.configure({ @@ -15,5 +17,8 @@ export const dndPlugins = [ .insert.media(dragItem.files, { at: target, nextBlock: false }); }, }, + render: { + aboveNodes: DraggableAboveNodes, + }, }), ] as const; diff --git a/templates/plate-playground-template/src/components/editor/transforms.ts b/templates/plate-playground-template/src/components/editor/transforms.ts index 26d7431155..bd1448eca8 100644 --- a/templates/plate-playground-template/src/components/editor/transforms.ts +++ b/templates/plate-playground-template/src/components/editor/transforms.ts @@ -53,7 +53,7 @@ import { } from '@udecode/plate-table/react'; import { Path } from 'slate'; -export const STRUCTURAL_TYPES = [ +export const STRUCTURAL_TYPES: string[] = [ ColumnPlugin.key, ColumnItemPlugin.key, TablePlugin.key, @@ -79,7 +79,7 @@ const insertBlockMap: Record< (editor: PlateEditor, type: string) => void > = { [ACTION_THREE_COLUMNS]: (editor) => - insertColumnGroup(editor, { layout: 3, select: true }), + insertColumnGroup(editor, { columns: 3, select: true }), [AudioPlugin.key]: (editor) => insertAudioPlaceholder(editor, { select: true }), [CalloutPlugin.key]: (editor) => insertCallout(editor, { select: true }), @@ -163,7 +163,7 @@ const setBlockMap: Record< string, (editor: PlateEditor, type: string, entry: TNodeEntry) => void > = { - [ACTION_THREE_COLUMNS]: (editor) => toggleColumnGroup(editor, { layout: 3 }), + [ACTION_THREE_COLUMNS]: (editor) => toggleColumnGroup(editor, { columns: 3 }), [INDENT_LIST_KEYS.todo]: setList, [ListStyleType.Decimal]: setList, [ListStyleType.Disc]: setList, diff --git a/templates/plate-playground-template/src/components/editor/use-create-editor.ts b/templates/plate-playground-template/src/components/editor/use-create-editor.ts index eced477bea..a9ae7be907 100644 --- a/templates/plate-playground-template/src/components/editor/use-create-editor.ts +++ b/templates/plate-playground-template/src/components/editor/use-create-editor.ts @@ -92,59 +92,56 @@ import { TableElement } from '@/components/plate-ui/table-element'; import { TableRowElement } from '@/components/plate-ui/table-row-element'; import { TocElement } from '@/components/plate-ui/toc-element'; import { ToggleElement } from '@/components/plate-ui/toggle-element'; -import { withDraggables } from '@/components/plate-ui/with-draggables'; export const useCreateEditor = () => { return usePlateEditor({ override: { - components: withDraggables( - withPlaceholders({ - [AIPlugin.key]: AILeaf, - [AudioPlugin.key]: MediaAudioElement, - [BlockquotePlugin.key]: BlockquoteElement, - [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), - [CodeBlockPlugin.key]: CodeBlockElement, - [CodeLinePlugin.key]: CodeLineElement, - [CodePlugin.key]: CodeLeaf, - [CodeSyntaxPlugin.key]: CodeSyntaxLeaf, - [ColumnItemPlugin.key]: ColumnElement, - [ColumnPlugin.key]: ColumnGroupElement, - [CommentsPlugin.key]: CommentLeaf, - [DatePlugin.key]: DateElement, - [EmojiInputPlugin.key]: EmojiInputElement, - [ExcalidrawPlugin.key]: ExcalidrawElement, - [FilePlugin.key]: MediaFileElement, - [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }), - [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }), - [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }), - [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: 'h4' }), - [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: 'h5' }), - [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: 'h6' }), - [HighlightPlugin.key]: HighlightLeaf, - [HorizontalRulePlugin.key]: HrElement, - [ImagePlugin.key]: ImageElement, - [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), - [KbdPlugin.key]: KbdLeaf, - [LinkPlugin.key]: LinkElement, - [MediaEmbedPlugin.key]: MediaEmbedElement, - [MentionInputPlugin.key]: MentionInputElement, - [MentionPlugin.key]: MentionElement, - [ParagraphPlugin.key]: ParagraphElement, - [PlaceholderPlugin.key]: MediaPlaceholderElement, - [SlashInputPlugin.key]: SlashInputElement, - [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), - [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }), - [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: 'sup' }), - [TableCellHeaderPlugin.key]: TableCellHeaderElement, - [TableCellPlugin.key]: TableCellElement, - [TablePlugin.key]: TableElement, - [TableRowPlugin.key]: TableRowElement, - [TocPlugin.key]: TocElement, - [TogglePlugin.key]: ToggleElement, - [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), - [VideoPlugin.key]: MediaVideoElement, - }) - ), + components: withPlaceholders({ + [AIPlugin.key]: AILeaf, + [AudioPlugin.key]: MediaAudioElement, + [BlockquotePlugin.key]: BlockquoteElement, + [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }), + [CodeBlockPlugin.key]: CodeBlockElement, + [CodeLinePlugin.key]: CodeLineElement, + [CodePlugin.key]: CodeLeaf, + [CodeSyntaxPlugin.key]: CodeSyntaxLeaf, + [ColumnItemPlugin.key]: ColumnElement, + [ColumnPlugin.key]: ColumnGroupElement, + [CommentsPlugin.key]: CommentLeaf, + [DatePlugin.key]: DateElement, + [EmojiInputPlugin.key]: EmojiInputElement, + [ExcalidrawPlugin.key]: ExcalidrawElement, + [FilePlugin.key]: MediaFileElement, + [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }), + [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }), + [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }), + [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: 'h4' }), + [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: 'h5' }), + [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: 'h6' }), + [HighlightPlugin.key]: HighlightLeaf, + [HorizontalRulePlugin.key]: HrElement, + [ImagePlugin.key]: ImageElement, + [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }), + [KbdPlugin.key]: KbdLeaf, + [LinkPlugin.key]: LinkElement, + [MediaEmbedPlugin.key]: MediaEmbedElement, + [MentionInputPlugin.key]: MentionInputElement, + [MentionPlugin.key]: MentionElement, + [ParagraphPlugin.key]: ParagraphElement, + [PlaceholderPlugin.key]: MediaPlaceholderElement, + [SlashInputPlugin.key]: SlashInputElement, + [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }), + [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }), + [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: 'sup' }), + [TableCellHeaderPlugin.key]: TableCellHeaderElement, + [TableCellPlugin.key]: TableCellElement, + [TablePlugin.key]: TableElement, + [TableRowPlugin.key]: TableRowElement, + [TocPlugin.key]: TocElement, + [TogglePlugin.key]: ToggleElement, + [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }), + [VideoPlugin.key]: MediaVideoElement, + }), }, plugins: [ ...copilotPlugins, diff --git a/templates/plate-playground-template/src/components/plate-ui/column-element.tsx b/templates/plate-playground-template/src/components/plate-ui/column-element.tsx index 1e5caf7369..271aac256a 100644 --- a/templates/plate-playground-template/src/components/plate-ui/column-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/column-element.tsx @@ -6,11 +6,7 @@ import type { TColumnElement } from '@udecode/plate-layout'; import { cn, useComposedRef, withRef } from '@udecode/cn'; import { useElement, withHOC } from '@udecode/plate-common/react'; -import { - useDraggable, - useDraggableState, - useDropLine, -} from '@udecode/plate-dnd'; +import { useDraggable, useDropLine } from '@udecode/plate-dnd'; import { ResizableProvider } from '@udecode/plate-resizable'; import { GripHorizontal } from 'lucide-react'; import { Path } from 'slate'; @@ -26,24 +22,20 @@ import { TooltipTrigger, } from './tooltip'; -const DRAG_ITEM_COLUMN = 'column'; - export const ColumnElement = withHOC( ResizableProvider, withRef(({ children, className, ...props }, ref) => { const readOnly = useReadOnly(); const { width } = useElement(); - const state = useDraggableState({ + const { isDragging, previewRef, handleRef } = useDraggable({ canDropNode: ({ dragEntry, dropEntry }) => Path.equals(Path.parent(dragEntry[1]), Path.parent(dropEntry[1])), element: props.element, orientation: 'horizontal', - type: DRAG_ITEM_COLUMN, + type: 'column', }); - const { previewRef, handleRef } = useDraggable(state); - return (
{children} @@ -108,9 +100,9 @@ const DropLine = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { - const state = useDropLine({ orientation: 'horizontal' }); + const { dropLine } = useDropLine({ orientation: 'horizontal' }); - if (!state.dropLine) return null; + if (!dropLine) return null; return (
( ); export function ColumnFloatingToolbar({ children }: React.PropsWithChildren) { + const editor = useEditorRef(); const readOnly = useReadOnly(); - const { - setDoubleColumn, - setDoubleSideDoubleColumn, - setLeftSideDoubleColumn, - setRightSideDoubleColumn, - setThreeColumn, - } = useColumnState(); - const element = useElement(ColumnItemPlugin.key); + const columnGroupElement = useElement(ColumnPlugin.key); const { props: buttonProps } = useRemoveNodeButton({ element }); const isOpen = useDebouncePopoverOpen(); + const onColumnChange = (widths: string[]) => { + setColumns(editor, { + at: findNodePath(editor, columnGroupElement), + widths, + }); + }; + if (readOnly) return <>{children}; return ( @@ -61,26 +70,38 @@ export function ColumnFloatingToolbar({ children }: React.PropsWithChildren) { sideOffset={10} >
- - - diff --git a/templates/plate-playground-template/src/components/plate-ui/date-element.tsx b/templates/plate-playground-template/src/components/plate-ui/date-element.tsx index f914ec68b7..f9f90708db 100644 --- a/templates/plate-playground-template/src/components/plate-ui/date-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/date-element.tsx @@ -1,8 +1,7 @@ 'use client'; import { cn, withRef } from '@udecode/cn'; -import { setNodes } from '@udecode/plate-common'; -import { findPath } from '@udecode/plate-common/react'; +import { setNode } from '@udecode/plate-common/react'; import { useReadOnly } from 'slate-react'; import { Calendar } from './calendar'; @@ -74,11 +73,7 @@ export const DateElement = withRef( onSelect={(date) => { if (!date) return; - setNodes( - editor, - { date: date.toDateString() }, - { at: findPath(editor, element) } - ); + setNode(editor, element, { date: date.toDateString() }); }} mode="single" initialFocus diff --git a/templates/plate-playground-template/src/components/plate-ui/export-toolbar-button.tsx b/templates/plate-playground-template/src/components/plate-ui/export-toolbar-button.tsx index a659a8bf70..589997c8ea 100644 --- a/templates/plate-playground-template/src/components/plate-ui/export-toolbar-button.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/export-toolbar-button.tsx @@ -4,8 +4,105 @@ import React from 'react'; import type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu'; +import { withProps } from '@udecode/cn'; +import { BaseAlignPlugin } from '@udecode/plate-alignment'; +import { + BaseBoldPlugin, + BaseCodePlugin, + BaseItalicPlugin, + BaseStrikethroughPlugin, + BaseSubscriptPlugin, + BaseSuperscriptPlugin, + BaseUnderlinePlugin, +} from '@udecode/plate-basic-marks'; +import { BaseBlockquotePlugin } from '@udecode/plate-block-quote'; +import { + BaseCodeBlockPlugin, + BaseCodeLinePlugin, + BaseCodeSyntaxPlugin, +} from '@udecode/plate-code-block'; +import { BaseCommentsPlugin } from '@udecode/plate-comments'; +import { + BaseParagraphPlugin, + SlateLeaf, + createSlateEditor, + serializeHtml, +} from '@udecode/plate-common'; import { toDOMNode, useEditorRef } from '@udecode/plate-common/react'; +import { BaseDatePlugin } from '@udecode/plate-date'; +import { + BaseFontBackgroundColorPlugin, + BaseFontColorPlugin, + BaseFontSizePlugin, +} from '@udecode/plate-font'; +import { + BaseHeadingPlugin, + BaseTocPlugin, + HEADING_KEYS, + HEADING_LEVELS, +} from '@udecode/plate-heading'; +import { BaseHighlightPlugin } from '@udecode/plate-highlight'; +import { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule'; +import { BaseIndentPlugin } from '@udecode/plate-indent'; +import { BaseIndentListPlugin } from '@udecode/plate-indent-list'; +import { BaseKbdPlugin } from '@udecode/plate-kbd'; +import { BaseColumnItemPlugin, BaseColumnPlugin } from '@udecode/plate-layout'; +import { BaseLineHeightPlugin } from '@udecode/plate-line-height'; +import { BaseLinkPlugin } from '@udecode/plate-link'; +import { + BaseAudioPlugin, + BaseFilePlugin, + BaseImagePlugin, + BaseMediaEmbedPlugin, + BaseVideoPlugin, +} from '@udecode/plate-media'; +import { BaseMentionPlugin } from '@udecode/plate-mention'; +import { + BaseTableCellHeaderPlugin, + BaseTableCellPlugin, + BaseTablePlugin, + BaseTableRowPlugin, +} from '@udecode/plate-table'; +import { BaseTogglePlugin } from '@udecode/plate-toggle'; import { ArrowDownToLineIcon } from 'lucide-react'; +import Prism from 'prismjs'; + +import { BlockquoteElementStatic } from '@/components/plate-ui/blockquote-element-static'; +import { CodeBlockElementStatic } from '@/components/plate-ui/code-block-element-static'; +import { CodeLeafStatic } from '@/components/plate-ui/code-leaf-static'; +import { CodeLineElementStatic } from '@/components/plate-ui/code-line-element-static'; +import { CodeSyntaxLeafStatic } from '@/components/plate-ui/code-syntax-leaf-static'; +import { ColumnElementStatic } from '@/components/plate-ui/column-element-static'; +import { ColumnGroupElementStatic } from '@/components/plate-ui/column-group-element-static'; +import { CommentLeafStatic } from '@/components/plate-ui/comment-leaf-static'; +import { DateElementStatic } from '@/components/plate-ui/date-element-static'; +import { HeadingElementStatic } from '@/components/plate-ui/heading-element-static'; +import { HighlightLeafStatic } from '@/components/plate-ui/highlight-leaf-static'; +import { HrElementStatic } from '@/components/plate-ui/hr-element-static'; +import { ImageElementStatic } from '@/components/plate-ui/image-element-static'; +import { + FireLiComponent, + FireMarker, +} from '@/components/plate-ui/indent-fire-marker'; +import { + TodoLiStatic, + TodoMarkerStatic, +} from '@/components/plate-ui/indent-todo-marker-static'; +import { KbdLeafStatic } from '@/components/plate-ui/kbd-leaf-static'; +import { LinkElementStatic } from '@/components/plate-ui/link-element-static'; +import { MediaAudioElementStatic } from '@/components/plate-ui/media-audio-element-static'; +import { MediaFileElementStatic } from '@/components/plate-ui/media-file-element-static'; +import { MediaVideoElementStatic } from '@/components/plate-ui/media-video-element-static'; +import { MentionElementStatic } from '@/components/plate-ui/mention-element-static'; +import { ParagraphElementStatic } from '@/components/plate-ui/paragraph-element-static'; +import { + TableCellElementStatic, + TableCellHeaderStaticElement, +} from '@/components/plate-ui/table-cell-element-static'; +import { TableElementStatic } from '@/components/plate-ui/table-element-static'; +import { TableRowElementStatic } from '@/components/plate-ui/table-row-element-static'; +import { TocElementStatic } from '@/components/plate-ui/toc-element-static'; +import { ToggleElementStatic } from '@/components/plate-ui/toggle-element-static'; import { DropdownMenu, @@ -15,6 +112,7 @@ import { DropdownMenuTrigger, useOpenState, } from './dropdown-menu'; +import { EditorStatic } from './editor-static'; import { ToolbarButton } from './toolbar'; export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) { @@ -36,8 +134,19 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) { return canvas; }; - const downloadFile = (href: string, filename: string) => { + const downloadFile = ({ + content, + filename, + isHtml = false, + }: { + content: string; + filename: string; + isHtml?: boolean; + }) => { const element = document.createElement('a'); + const href = isHtml + ? `data:text/html;charset=utf-8,${encodeURIComponent(content)}` + : content; element.setAttribute('href', href); element.setAttribute('download', filename); element.style.display = 'none'; @@ -62,12 +171,188 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) { }); const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true }); - downloadFile(pdfBase64, 'plate.pdf'); + downloadFile({ content: pdfBase64, filename: 'plate.pdf' }); }; const exportToImage = async () => { const canvas = await getCanvas(); - downloadFile(canvas.toDataURL('image/png'), 'plate.png'); + downloadFile({ + content: canvas.toDataURL('image/png'), + filename: 'plate.png', + }); + }; + + const exportToHtml = async () => { + const components = { + [BaseAudioPlugin.key]: MediaAudioElementStatic, + [BaseBlockquotePlugin.key]: BlockquoteElementStatic, + [BaseBoldPlugin.key]: withProps(SlateLeaf, { as: 'strong' }), + [BaseCodeBlockPlugin.key]: CodeBlockElementStatic, + [BaseCodeLinePlugin.key]: CodeLineElementStatic, + [BaseCodePlugin.key]: CodeLeafStatic, + [BaseCodeSyntaxPlugin.key]: CodeSyntaxLeafStatic, + [BaseColumnItemPlugin.key]: ColumnElementStatic, + [BaseColumnPlugin.key]: ColumnGroupElementStatic, + [BaseCommentsPlugin.key]: CommentLeafStatic, + [BaseDatePlugin.key]: DateElementStatic, + [BaseFilePlugin.key]: MediaFileElementStatic, + [BaseHighlightPlugin.key]: HighlightLeafStatic, + [BaseHorizontalRulePlugin.key]: HrElementStatic, + [BaseImagePlugin.key]: ImageElementStatic, + [BaseItalicPlugin.key]: withProps(SlateLeaf, { as: 'em' }), + [BaseKbdPlugin.key]: KbdLeafStatic, + [BaseLinkPlugin.key]: LinkElementStatic, + // [BaseMediaEmbedPlugin.key]: MediaEmbedElementStatic, + [BaseMentionPlugin.key]: MentionElementStatic, + [BaseParagraphPlugin.key]: ParagraphElementStatic, + [BaseStrikethroughPlugin.key]: withProps(SlateLeaf, { as: 'del' }), + [BaseSubscriptPlugin.key]: withProps(SlateLeaf, { as: 'sub' }), + [BaseSuperscriptPlugin.key]: withProps(SlateLeaf, { as: 'sup' }), + [BaseTableCellHeaderPlugin.key]: TableCellHeaderStaticElement, + [BaseTableCellPlugin.key]: TableCellElementStatic, + [BaseTablePlugin.key]: TableElementStatic, + [BaseTableRowPlugin.key]: TableRowElementStatic, + [BaseTocPlugin.key]: TocElementStatic, + [BaseTogglePlugin.key]: ToggleElementStatic, + [BaseUnderlinePlugin.key]: withProps(SlateLeaf, { as: 'u' }), + [BaseVideoPlugin.key]: MediaVideoElementStatic, + [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }), + [HEADING_KEYS.h2]: withProps(HeadingElementStatic, { variant: 'h2' }), + [HEADING_KEYS.h3]: withProps(HeadingElementStatic, { variant: 'h3' }), + [HEADING_KEYS.h4]: withProps(HeadingElementStatic, { variant: 'h4' }), + [HEADING_KEYS.h5]: withProps(HeadingElementStatic, { variant: 'h5' }), + [HEADING_KEYS.h6]: withProps(HeadingElementStatic, { variant: 'h6' }), + }; + + const editorStatic = createSlateEditor({ + plugins: [ + BaseColumnPlugin, + BaseColumnItemPlugin, + BaseTocPlugin, + BaseVideoPlugin, + BaseAudioPlugin, + BaseParagraphPlugin, + BaseHeadingPlugin, + BaseMediaEmbedPlugin, + BaseBoldPlugin, + BaseCodePlugin, + BaseItalicPlugin, + BaseStrikethroughPlugin, + BaseSubscriptPlugin, + BaseSuperscriptPlugin, + BaseUnderlinePlugin, + BaseBlockquotePlugin, + BaseDatePlugin, + BaseCodeBlockPlugin.configure({ + options: { + prism: Prism, + }, + }), + BaseIndentPlugin.extend({ + inject: { + targetPlugins: [ + BaseParagraphPlugin.key, + BaseBlockquotePlugin.key, + BaseCodeBlockPlugin.key, + ], + }, + }), + BaseIndentListPlugin.extend({ + inject: { + targetPlugins: [ + BaseParagraphPlugin.key, + ...HEADING_LEVELS, + BaseBlockquotePlugin.key, + BaseCodeBlockPlugin.key, + BaseTogglePlugin.key, + ], + }, + options: { + listStyleTypes: { + fire: { + liComponent: FireLiComponent, + markerComponent: FireMarker, + type: 'fire', + }, + todo: { + liComponent: TodoLiStatic, + markerComponent: TodoMarkerStatic, + type: 'todo', + }, + }, + }, + }), + BaseLinkPlugin, + BaseTableRowPlugin, + BaseTablePlugin, + BaseTableCellPlugin, + BaseHorizontalRulePlugin, + BaseFontColorPlugin, + BaseFontBackgroundColorPlugin, + BaseFontSizePlugin, + BaseKbdPlugin, + BaseAlignPlugin.extend({ + inject: { + targetPlugins: [ + BaseParagraphPlugin.key, + BaseMediaEmbedPlugin.key, + ...HEADING_LEVELS, + BaseImagePlugin.key, + ], + }, + }), + BaseLineHeightPlugin, + BaseHighlightPlugin, + BaseFilePlugin, + BaseImagePlugin, + BaseMentionPlugin, + BaseCommentsPlugin, + BaseTogglePlugin, + ], + value: editor.children, + }); + + const editorHtml = await serializeHtml(editorStatic, { + components, + editorComponent: EditorStatic, + props: { style: { padding: '0 calc(50% - 350px)', paddingBottom: '' } }, + }); + + console.log(process.env.NEXT_PUBLIC_URL, 'fj'); + + const prismCss = ``; + const tailwindCss = ` + + + `; + + const html = ` + + + + + + + + + ${tailwindCss} + ${prismCss} + + + + ${editorHtml} + + `; + + downloadFile({ content: html, filename: 'plate.html', isHtml: true }); }; return ( @@ -80,6 +365,9 @@ export function ExportToolbarButton({ children, ...props }: DropdownMenuProps) { + + Export as HTML + Export as PDF diff --git a/templates/plate-playground-template/src/components/plate-ui/image-element.tsx b/templates/plate-playground-template/src/components/plate-ui/image-element.tsx index e05ea38aa3..337ae132ae 100644 --- a/templates/plate-playground-template/src/components/plate-ui/image-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/image-element.tsx @@ -3,8 +3,8 @@ import React from 'react'; import { cn, withRef } from '@udecode/cn'; -import { useEditorRef, withHOC } from '@udecode/plate-common/react'; -import { useDraggable, useDraggableState } from '@udecode/plate-dnd'; +import { withHOC } from '@udecode/plate-common/react'; +import { useDraggable } from '@udecode/plate-dnd'; import { Image, ImagePlugin, useMediaState } from '@udecode/plate-media/react'; import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable'; @@ -21,18 +21,13 @@ export const ImageElement = withHOC( ResizableProvider, withRef( ({ children, className, nodeProps, ...props }, ref) => { - const editor = useEditorRef(); - const { align = 'center', focused, readOnly, selected } = useMediaState(); const width = useResizableStore().get.width(); - const state = editor.plugins.dnd - ? useDraggableState({ element: props.element }) - : ({} as any); - - const { isDragging } = state; - const { handleRef } = useDraggable(state); + const { isDragging, handleRef } = useDraggable({ + element: props.element, + }); return ( diff --git a/templates/plate-playground-template/src/components/plate-ui/media-video-element.tsx b/templates/plate-playground-template/src/components/plate-ui/media-video-element.tsx index 571da9a527..2140e048c2 100644 --- a/templates/plate-playground-template/src/components/plate-ui/media-video-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/media-video-element.tsx @@ -6,7 +6,7 @@ import ReactPlayer from 'react-player'; import { cn, withRef } from '@udecode/cn'; import { useEditorMounted, withHOC } from '@udecode/plate-common/react'; -import { useDraggable, useDraggableState } from '@udecode/plate-dnd'; +import { useDraggable } from '@udecode/plate-dnd'; import { parseTwitterUrl, parseVideoUrl } from '@udecode/plate-media'; import { useMediaState } from '@udecode/plate-media/react'; import { ResizableProvider, useResizableStore } from '@udecode/plate-resizable'; @@ -39,9 +39,9 @@ export const MediaVideoElement = withHOC( const isTweet = true; - const state = useDraggableState({ element: props.element }); - const { isDragging } = state; - const { handleRef } = useDraggable(state); + const { isDragging, handleRef } = useDraggable({ + element: props.element, + }); return ( -
+
{children}
diff --git a/templates/plate-playground-template/src/components/plate-ui/table-cell-element.tsx b/templates/plate-playground-template/src/components/plate-ui/table-cell-element.tsx index b0bacd0987..abd0f7e7a3 100644 --- a/templates/plate-playground-template/src/components/plate-ui/table-cell-element.tsx +++ b/templates/plate-playground-template/src/components/plate-ui/table-cell-element.tsx @@ -86,7 +86,7 @@ export const TableCellElement = withRef< } >