Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@felixfeng33
felixfeng33 authored Dec 25, 2024
1 parent 6e26522 commit 3f2c474
Show file tree
Hide file tree
Showing 4 changed files with 4 additions and 4 deletions.
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 3f2c474

Please sign in to comment.