Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@zbeyens
zbeyens authored Feb 1, 2025
1 parent 3eb6478 commit f4482be
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 3 deletions.
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/code-block-element.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,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';\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\n const state = useCodeBlockElementState({ element });\n\n return (\n <PlateElement\n ref={ref}\n className={cn(className, 'py-1', state.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 type { Editor, TElement } from '@udecode/plate';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { formatCodeBlock, isLangSupported } from '@udecode/plate-code-block';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\nimport { BracesIcon } from 'lucide-react';\n\nimport { Button } from './button';\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\n const state = useCodeBlockElementState({ element });\n\n return (\n <PlateElement\n ref={ref}\n className={cn(className, 'py-1', state.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 flex select-none items-center gap-1\"\n contentEditable={false}\n >\n <CodeBlockFormatButton {...props} />\n <CodeBlockCombobox />\n </div>\n )}\n </PlateElement>\n );\n }\n);\n\nexport function CodeBlockFormatButton({\n editor,\n element,\n}: {\n editor: Editor;\n element: TElement;\n}) {\n if (!isLangSupported(element.lang as string)) {\n return null;\n }\n\n return (\n <Button\n size=\"xs\"\n variant=\"ghost\"\n className=\"h-5 justify-between px-1 text-xs\"\n onClick={() => formatCodeBlock(editor, { element })}\n title=\"Format code\"\n >\n <BracesIcon className=\"text-gray-500\" />\n </Button>\n );\n}\n",
"path": "plate-ui/code-block-element.tsx",
"target": "components/plate-ui/code-block-element.tsx",
"type": "registry:ui"
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 { isType } from '@udecode/plate';\nimport {\n type NodeWrapperComponent,\n type PlateRenderElementProps,\n MemoizedChildren,\n ParagraphPlugin,\n useEditorPlugin,\n useEditorRef,\n useElement,\n usePath,\n} from '@udecode/plate/react';\nimport { useReadOnly, useSelected } from '@udecode/plate/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/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';\n\nimport { STRUCTURAL_TYPES } from '@/components/editor/transforms';\n\nimport { TooltipButton } 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 = editor.api.some({\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 = editor.api.some({\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 blockSelectionApi =\n editor.getApi(BlockSelectionPlugin).blockSelection;\n const { isDragging, previewRef, handleRef } = useDraggable({\n element,\n onDropHandler: (_, { dragItem }) => {\n const id = (dragItem as any).id;\n\n if (blockSelectionApi && id) {\n blockSelectionApi.set(id);\n }\n },\n });\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 {!isInTable && (\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 )}\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\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\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 className\n )}\n contentEditable={false}\n {...props}\n >\n {children}\n </div>\n );\n});\n\nconst DragHandle = React.memo(() => {\n const editor = useEditorRef();\n const element = useElement();\n\n return (\n <TooltipButton\n variant=\"ghost\"\n className=\"w-4.5 h-6 p-0\"\n onClick={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection.set(element.id as string);\n }}\n data-plate-prevent-deselect\n tooltip=\"Drag to move\"\n >\n <GripVertical className=\"text-muted-foreground\" />\n </TooltipButton>\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 { isType } from '@udecode/plate';\nimport {\n type PlateRenderElementProps,\n type RenderNodeWrapper,\n MemoizedChildren,\n ParagraphPlugin,\n useEditorPlugin,\n useEditorRef,\n useElement,\n usePath,\n} from '@udecode/plate/react';\nimport { useReadOnly, useSelected } from '@udecode/plate/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/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';\n\nimport { STRUCTURAL_TYPES } from '@/components/editor/transforms';\n\nimport { TooltipButton } from './tooltip';\n\nconst UNDRAGGABLE_KEYS = [\n ColumnItemPlugin.key,\n TableRowPlugin.key,\n TableCellPlugin.key,\n];\n\nexport const DraggableAboveNodes: RenderNodeWrapper = (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 = editor.api.some({\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 = editor.api.some({\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 blockSelectionApi =\n editor.getApi(BlockSelectionPlugin).blockSelection;\n const { isDragging, previewRef, handleRef } = useDraggable({\n element,\n onDropHandler: (_, { dragItem }) => {\n const id = (dragItem as any).id;\n\n if (blockSelectionApi && id) {\n blockSelectionApi.set(id);\n }\n },\n });\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 {!isInTable && (\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 )}\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\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\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 className\n )}\n contentEditable={false}\n {...props}\n >\n {children}\n </div>\n );\n});\n\nconst DragHandle = React.memo(() => {\n const editor = useEditorRef();\n const element = useElement();\n\n return (\n <TooltipButton\n variant=\"ghost\"\n className=\"w-4.5 h-6 p-0\"\n onClick={() => {\n editor\n .getApi(BlockSelectionPlugin)\n .blockSelection.set(element.id as string);\n }}\n data-plate-prevent-deselect\n tooltip=\"Drag to move\"\n >\n <GripVertical className=\"text-muted-foreground\" />\n </TooltipButton>\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
2 changes: 1 addition & 1 deletion apps/www/public/tailwind.css
View file

Large diffs are not rendered by default.

0 comments on commit f4482be

Please sign in to comment.