Skip to content

Commit

Permalink
docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@felixfeng33
felixfeng33 authored Dec 28, 2024
1 parent 9c72530 commit 09ba37c
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 2 deletions.
2 changes: 1 addition & 1 deletion apps/www/public/r/styles/default/insert-dropdown-menu.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
},
"files": [
{
"content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n type PlateEditor,\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n CalendarIcon,\n ChevronRightIcon,\n Columns3Icon,\n FileCodeIcon,\n FilmIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ImageIcon,\n Link2Icon,\n ListIcon,\n ListOrderedIcon,\n MinusIcon,\n PenToolIcon,\n PilcrowIcon,\n PlusIcon,\n QuoteIcon,\n SquareIcon,\n TableIcon,\n TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n insertBlock,\n insertInlineElement,\n} from '@/components/editor/transforms';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\ntype Group = {\n group: string;\n items: Item[];\n};\n\ninterface Item {\n icon: React.ReactNode;\n onSelect: (editor: PlateEditor, value: string) => void;\n value: string;\n focusEditor?: boolean;\n label?: string;\n}\n\nconst groups: Group[] = [\n {\n group: 'Basic blocks',\n items: [\n {\n icon: <PilcrowIcon />,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n icon: <Heading1Icon />,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: <Heading2Icon />,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: <Heading3Icon />,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: <TableIcon />,\n label: 'Table',\n value: TablePlugin.key,\n },\n {\n icon: <FileCodeIcon />,\n label: 'Code',\n value: CodeBlockPlugin.key,\n },\n {\n icon: <QuoteIcon />,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n {\n icon: <MinusIcon />,\n label: 'Divider',\n value: HorizontalRulePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Lists',\n items: [\n {\n icon: <ListIcon />,\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: <ListOrderedIcon />,\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: <SquareIcon />,\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: <ChevronRightIcon />,\n label: 'Toggle list',\n value: TogglePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Media',\n items: [\n {\n icon: <ImageIcon />,\n label: 'Image',\n value: ImagePlugin.key,\n },\n {\n icon: <FilmIcon />,\n label: 'Embed',\n value: MediaEmbedPlugin.key,\n },\n {\n icon: <PenToolIcon />,\n label: 'Excalidraw',\n value: ExcalidrawPlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Advanced blocks',\n items: [\n {\n icon: <TableOfContentsIcon />,\n label: 'Table of contents',\n value: TocPlugin.key,\n },\n {\n icon: <Columns3Icon />,\n label: '3 columns',\n value: 'action_three_columns',\n },\n // {\n // focusEditor: false,\n // icon: <RadicalIcon />,\n // label: 'Equation',\n // value: EquationPlugin.key,\n // },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Inline',\n items: [\n {\n icon: <Link2Icon />,\n label: 'Link',\n value: LinkPlugin.key,\n },\n {\n focusEditor: true,\n icon: <CalendarIcon />,\n label: 'Date',\n value: DatePlugin.key,\n },\n // {\n // focusEditor: false,\n // icon: <RadicalIcon />,\n // label: 'Inline Equation',\n // value: InlineEquationPlugin.key,\n // },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertInlineElement(editor, value);\n },\n })),\n },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n <DropdownMenu modal={false} {...openState} {...props}>\n <DropdownMenuTrigger asChild>\n <ToolbarButton pressed={openState.open} tooltip=\"Insert\" isDropdown>\n <PlusIcon />\n </ToolbarButton>\n </DropdownMenuTrigger>\n\n <DropdownMenuContent\n className=\"flex max-h-[500px] min-w-0 flex-col overflow-y-auto\"\n align=\"start\"\n >\n {groups.map(({ group, items: nestedItems }) => (\n <DropdownMenuGroup key={group} label={group}>\n {nestedItems.map(({ icon, label, value, onSelect }) => (\n <DropdownMenuItem\n key={value}\n className=\"min-w-[180px]\"\n onSelect={() => {\n onSelect(editor, value);\n focusEditor(editor);\n }}\n >\n {icon}\n {label}\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n",
"content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport { CodeBlockPlugin } from '@udecode/plate-code-block/react';\nimport {\n type PlateEditor,\n ParagraphPlugin,\n focusEditor,\n useEditorRef,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { ExcalidrawPlugin } from '@udecode/plate-excalidraw/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n EquationPlugin,\n InlineEquationPlugin,\n} from '@udecode/plate-math/react';\nimport { ImagePlugin, MediaEmbedPlugin } from '@udecode/plate-media/react';\nimport { TablePlugin } from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport {\n CalendarIcon,\n ChevronRightIcon,\n Columns3Icon,\n FileCodeIcon,\n FilmIcon,\n Heading1Icon,\n Heading2Icon,\n Heading3Icon,\n ImageIcon,\n Link2Icon,\n ListIcon,\n ListOrderedIcon,\n MinusIcon,\n PenToolIcon,\n PilcrowIcon,\n PlusIcon,\n QuoteIcon,\n RadicalIcon,\n SquareIcon,\n TableIcon,\n TableOfContentsIcon,\n} from 'lucide-react';\n\nimport {\n insertBlock,\n insertInlineElement,\n} from '@/components/editor/transforms';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\ntype Group = {\n group: string;\n items: Item[];\n};\n\ninterface Item {\n icon: React.ReactNode;\n onSelect: (editor: PlateEditor, value: string) => void;\n value: string;\n focusEditor?: boolean;\n label?: string;\n}\n\nconst groups: Group[] = [\n {\n group: 'Basic blocks',\n items: [\n {\n icon: <PilcrowIcon />,\n label: 'Paragraph',\n value: ParagraphPlugin.key,\n },\n {\n icon: <Heading1Icon />,\n label: 'Heading 1',\n value: HEADING_KEYS.h1,\n },\n {\n icon: <Heading2Icon />,\n label: 'Heading 2',\n value: HEADING_KEYS.h2,\n },\n {\n icon: <Heading3Icon />,\n label: 'Heading 3',\n value: HEADING_KEYS.h3,\n },\n {\n icon: <TableIcon />,\n label: 'Table',\n value: TablePlugin.key,\n },\n {\n icon: <FileCodeIcon />,\n label: 'Code',\n value: CodeBlockPlugin.key,\n },\n {\n icon: <QuoteIcon />,\n label: 'Quote',\n value: BlockquotePlugin.key,\n },\n {\n icon: <MinusIcon />,\n label: 'Divider',\n value: HorizontalRulePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Lists',\n items: [\n {\n icon: <ListIcon />,\n label: 'Bulleted list',\n value: ListStyleType.Disc,\n },\n {\n icon: <ListOrderedIcon />,\n label: 'Numbered list',\n value: ListStyleType.Decimal,\n },\n {\n icon: <SquareIcon />,\n label: 'To-do list',\n value: INDENT_LIST_KEYS.todo,\n },\n {\n icon: <ChevronRightIcon />,\n label: 'Toggle list',\n value: TogglePlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Media',\n items: [\n {\n icon: <ImageIcon />,\n label: 'Image',\n value: ImagePlugin.key,\n },\n {\n icon: <FilmIcon />,\n label: 'Embed',\n value: MediaEmbedPlugin.key,\n },\n {\n icon: <PenToolIcon />,\n label: 'Excalidraw',\n value: ExcalidrawPlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Advanced blocks',\n items: [\n {\n icon: <TableOfContentsIcon />,\n label: 'Table of contents',\n value: TocPlugin.key,\n },\n {\n icon: <Columns3Icon />,\n label: '3 columns',\n value: 'action_three_columns',\n },\n {\n focusEditor: false,\n icon: <RadicalIcon />,\n label: 'Equation',\n value: EquationPlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertBlock(editor, value);\n },\n })),\n },\n {\n group: 'Inline',\n items: [\n {\n icon: <Link2Icon />,\n label: 'Link',\n value: LinkPlugin.key,\n },\n {\n focusEditor: true,\n icon: <CalendarIcon />,\n label: 'Date',\n value: DatePlugin.key,\n },\n {\n focusEditor: false,\n icon: <RadicalIcon />,\n label: 'Inline Equation',\n value: InlineEquationPlugin.key,\n },\n ].map((item) => ({\n ...item,\n onSelect: (editor, value) => {\n insertInlineElement(editor, value);\n },\n })),\n },\n];\n\nexport function InsertDropdownMenu(props: DropdownMenuProps) {\n const editor = useEditorRef();\n const openState = useOpenState();\n\n return (\n <DropdownMenu modal={false} {...openState} {...props}>\n <DropdownMenuTrigger asChild>\n <ToolbarButton pressed={openState.open} tooltip=\"Insert\" isDropdown>\n <PlusIcon />\n </ToolbarButton>\n </DropdownMenuTrigger>\n\n <DropdownMenuContent\n className=\"flex max-h-[500px] min-w-0 flex-col overflow-y-auto\"\n align=\"start\"\n >\n {groups.map(({ group, items: nestedItems }) => (\n <DropdownMenuGroup key={group} label={group}>\n {nestedItems.map(({ icon, label, value, onSelect }) => (\n <DropdownMenuItem\n key={value}\n className=\"min-w-[180px]\"\n onSelect={() => {\n onSelect(editor, value);\n focusEditor(editor);\n }}\n >\n {icon}\n {label}\n </DropdownMenuItem>\n ))}\n </DropdownMenuGroup>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n",
"path": "plate-ui/insert-dropdown-menu.tsx",
"target": "components/plate-ui/insert-dropdown-menu.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 09ba37c

Please sign in to comment.