basic-elements-demo.json

{
  "doc": {
    "description": "Basic block elements like headings, quotes, and code blocks.",
    "docs": [
      {
        "route": "/docs/basic-elements",
        "title": "Basic Elements"
      }
    ]
  },
  "files": [
    {
      "content": "'use client';\n\nimport React from 'react';\n\nimport { Plate } from '@udecode/plate-common/react';\n\nimport { editorPlugins } from '@/components/editor/plugins/editor-plugins';\nimport { useCreateEditor } from '@/components/editor/use-create-editor';\nimport { Editor, EditorContainer } from '@/components/plate-ui/editor';\n\nimport { DEMO_VALUES } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n  const editor = useCreateEditor({\n    plugins: [...editorPlugins],\n    value: DEMO_VALUES[id],\n  });\n\n  return (\n    <Plate editor={editor}>\n      <EditorContainer variant=\"demo\">\n        <Editor />\n      </EditorContainer>\n    </Plate>\n  );\n}\n",
      "path": "example/demo.tsx",
      "target": "components/demo.tsx",
      "type": "registry:example"
    },
    {
      "content": "import { jsx } from '@udecode/plate-test-utils';\n\njsx;\n\nexport const basicElementsValue: any = (\n  <fragment>\n    <hh2>Blocks</hh2>\n    <hp>\n      Easily create headings of various levels, from H1 to H6, to structure your\n      content and make it more organized.\n    </hp>\n    <hblockquote>\n      Create blockquotes to emphasize important information or highlight quotes\n      from external sources.\n    </hblockquote>\n    <hcodeblock lang=\"javascript\">\n      <hcodeline>// Use code blocks to showcase code snippets</hcodeline>\n      <hcodeline>{`function greet() {`}</hcodeline>\n      <hcodeline>{`  console.info('Hello World!');`}</hcodeline>\n      <hcodeline>{`}`}</hcodeline>\n    </hcodeblock>\n  </fragment>\n);\n",
      "path": "example/values/basic-elements-value.tsx",
      "target": "components/basic-elements-value.tsx",
      "type": "registry:example"
    },
    {
      "content": "'use client';\n\nimport type { Value } from '@udecode/plate-common';\n\nimport { withProps } from '@udecode/cn';\nimport { AIPlugin } from '@udecode/plate-ai/react';\nimport {\n  BoldPlugin,\n  CodePlugin,\n  ItalicPlugin,\n  StrikethroughPlugin,\n  SubscriptPlugin,\n  SuperscriptPlugin,\n  UnderlinePlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { BlockquotePlugin } from '@udecode/plate-block-quote/react';\nimport {\n  CodeBlockPlugin,\n  CodeLinePlugin,\n  CodeSyntaxPlugin,\n} from '@udecode/plate-code-block/react';\nimport { CommentsPlugin } from '@udecode/plate-comments/react';\nimport {\n  type CreatePlateEditorOptions,\n  ParagraphPlugin,\n  PlateLeaf,\n  usePlateEditor,\n} from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { EmojiInputPlugin } from '@udecode/plate-emoji/react';\nimport { HEADING_KEYS } from '@udecode/plate-heading';\nimport { TocPlugin } from '@udecode/plate-heading/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';\nimport { LinkPlugin } from '@udecode/plate-link/react';\nimport {\n  AudioPlugin,\n  FilePlugin,\n  ImagePlugin,\n  MediaEmbedPlugin,\n  PlaceholderPlugin,\n  VideoPlugin,\n} from '@udecode/plate-media/react';\nimport {\n  MentionInputPlugin,\n  MentionPlugin,\n} from '@udecode/plate-mention/react';\nimport { SlashInputPlugin } from '@udecode/plate-slash-command/react';\nimport {\n  TableCellHeaderPlugin,\n  TableCellPlugin,\n  TablePlugin,\n  TableRowPlugin,\n} from '@udecode/plate-table/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\n\nimport { AILeaf } from '@/components/plate-ui/ai-leaf';\nimport { BlockquoteElement } from '@/components/plate-ui/blockquote-element';\nimport { CodeBlockElement } from '@/components/plate-ui/code-block-element';\nimport { CodeLeaf } from '@/components/plate-ui/code-leaf';\nimport { CodeLineElement } from '@/components/plate-ui/code-line-element';\nimport { CodeSyntaxLeaf } from '@/components/plate-ui/code-syntax-leaf';\nimport { ColumnElement } from '@/components/plate-ui/column-element';\nimport { ColumnGroupElement } from '@/components/plate-ui/column-group-element';\nimport { CommentLeaf } from '@/components/plate-ui/comment-leaf';\nimport { DateElement } from '@/components/plate-ui/date-element';\nimport { EmojiInputElement } from '@/components/plate-ui/emoji-input-element';\nimport { HeadingElement } from '@/components/plate-ui/heading-element';\nimport { HighlightLeaf } from '@/components/plate-ui/highlight-leaf';\nimport { HrElement } from '@/components/plate-ui/hr-element';\nimport { ImageElement } from '@/components/plate-ui/image-element';\nimport { KbdLeaf } from '@/components/plate-ui/kbd-leaf';\nimport { LinkElement } from '@/components/plate-ui/link-element';\nimport { MediaAudioElement } from '@/components/plate-ui/media-audio-element';\nimport { MediaEmbedElement } from '@/components/plate-ui/media-embed-element';\nimport { MediaFileElement } from '@/components/plate-ui/media-file-element';\nimport { MediaPlaceholderElement } from '@/components/plate-ui/media-placeholder-element';\nimport { MediaVideoElement } from '@/components/plate-ui/media-video-element';\nimport { MentionElement } from '@/components/plate-ui/mention-element';\nimport { MentionInputElement } from '@/components/plate-ui/mention-input-element';\nimport { ParagraphElement } from '@/components/plate-ui/paragraph-element';\nimport { withPlaceholders } from '@/components/plate-ui/placeholder';\nimport { SlashInputElement } from '@/components/plate-ui/slash-input-element';\nimport {\n  TableCellElement,\n  TableCellHeaderElement,\n} from '@/components/plate-ui/table-cell-element';\nimport { TableElement } from '@/components/plate-ui/table-element';\nimport { TableRowElement } from '@/components/plate-ui/table-row-element';\nimport { TocElement } from '@/components/plate-ui/toc-element';\nimport { ToggleElement } from '@/components/plate-ui/toggle-element';\nimport { withDraggables } from '@/components/plate-ui/with-draggables';\n\nimport { editorPlugins, viewPlugins } from './plugins/editor-plugins';\n\nexport const viewComponents = {\n  [AudioPlugin.key]: MediaAudioElement,\n  [BlockquotePlugin.key]: BlockquoteElement,\n  [BoldPlugin.key]: withProps(PlateLeaf, { as: 'strong' }),\n  [CodeBlockPlugin.key]: CodeBlockElement,\n  [CodeLinePlugin.key]: CodeLineElement,\n  [CodePlugin.key]: CodeLeaf,\n  [CodeSyntaxPlugin.key]: CodeSyntaxLeaf,\n  [ColumnItemPlugin.key]: ColumnElement,\n  [ColumnPlugin.key]: ColumnGroupElement,\n  [CommentsPlugin.key]: CommentLeaf,\n  [DatePlugin.key]: DateElement,\n  [FilePlugin.key]: MediaFileElement,\n  [HEADING_KEYS.h1]: withProps(HeadingElement, { variant: 'h1' }),\n  [HEADING_KEYS.h2]: withProps(HeadingElement, { variant: 'h2' }),\n  [HEADING_KEYS.h3]: withProps(HeadingElement, { variant: 'h3' }),\n  [HEADING_KEYS.h4]: withProps(HeadingElement, { variant: 'h4' }),\n  [HEADING_KEYS.h5]: withProps(HeadingElement, { variant: 'h5' }),\n  [HEADING_KEYS.h6]: withProps(HeadingElement, { variant: 'h6' }),\n  [HighlightPlugin.key]: HighlightLeaf,\n  [HorizontalRulePlugin.key]: HrElement,\n  [ImagePlugin.key]: ImageElement,\n  [ItalicPlugin.key]: withProps(PlateLeaf, { as: 'em' }),\n  [KbdPlugin.key]: KbdLeaf,\n  [LinkPlugin.key]: LinkElement,\n  [MediaEmbedPlugin.key]: MediaEmbedElement,\n  [MentionPlugin.key]: MentionElement,\n  [ParagraphPlugin.key]: ParagraphElement,\n  [PlaceholderPlugin.key]: MediaPlaceholderElement,\n  [StrikethroughPlugin.key]: withProps(PlateLeaf, { as: 's' }),\n  [SubscriptPlugin.key]: withProps(PlateLeaf, { as: 'sub' }),\n  [SuperscriptPlugin.key]: withProps(PlateLeaf, { as: 'sup' }),\n  [TableCellHeaderPlugin.key]: TableCellHeaderElement,\n  [TableCellPlugin.key]: TableCellElement,\n  [TablePlugin.key]: TableElement,\n  [TableRowPlugin.key]: TableRowElement,\n  [TocPlugin.key]: TocElement,\n  [TogglePlugin.key]: ToggleElement,\n  [UnderlinePlugin.key]: withProps(PlateLeaf, { as: 'u' }),\n  [VideoPlugin.key]: MediaVideoElement,\n};\n\nexport const editorComponents = {\n  ...viewComponents,\n  [AIPlugin.key]: AILeaf,\n  [EmojiInputPlugin.key]: EmojiInputElement,\n  [MentionInputPlugin.key]: MentionInputElement,\n  [SlashInputPlugin.key]: SlashInputElement,\n};\n\nexport const useCreateEditor = (\n  {\n    components,\n    override,\n    readOnly,\n    ...options\n  }: {\n    components?: Record<string, any>;\n    plugins?: any[];\n    readOnly?: boolean;\n  } & Omit<CreatePlateEditorOptions, 'plugins'> = {},\n  deps: any[] = []\n) => {\n  return usePlateEditor<Value, (typeof editorPlugins)[number]>(\n    {\n      override: {\n        components: {\n          ...(readOnly\n            ? viewComponents\n            : withPlaceholders(withDraggables(editorComponents))),\n          ...components,\n        },\n        ...override,\n      },\n      plugins: (readOnly ? viewPlugins : editorPlugins) as any,\n      ...options,\n    },\n    deps\n  );\n};\n",
      "path": "components/editor/use-create-editor.ts",
      "target": "components/use-create-editor.ts",
      "type": "registry:example"
    },
    {
      "content": "'use client';\n\nimport { CalloutPlugin } from '@udecode/plate-callout/react';\nimport { ParagraphPlugin } from '@udecode/plate-common/react';\nimport { DatePlugin } from '@udecode/plate-date/react';\nimport { DocxPlugin } from '@udecode/plate-docx';\nimport { EmojiPlugin } from '@udecode/plate-emoji/react';\nimport {\n  FontBackgroundColorPlugin,\n  FontColorPlugin,\n  FontSizePlugin,\n} from '@udecode/plate-font/react';\nimport { HighlightPlugin } from '@udecode/plate-highlight/react';\nimport { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';\nimport { JuicePlugin } from '@udecode/plate-juice';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport { ColumnPlugin } from '@udecode/plate-layout/react';\nimport { MarkdownPlugin } from '@udecode/plate-markdown';\nimport {\n  EquationPlugin,\n  InlineEquationPlugin,\n} from '@udecode/plate-math/react';\nimport { SlashPlugin } from '@udecode/plate-slash-command/react';\nimport { TogglePlugin } from '@udecode/plate-toggle/react';\nimport { TrailingBlockPlugin } from '@udecode/plate-trailing-block';\n\nimport { FixedToolbarPlugin } from '@/components/editor/plugins/fixed-toolbar-plugin';\nimport { FloatingToolbarPlugin } from '@/components/editor/plugins/floating-toolbar-plugin';\n\nimport { aiPlugins } from './ai-plugins';\nimport { alignPlugin } from './align-plugin';\nimport { autoformatPlugin } from './autoformat-plugin';\nimport { basicNodesPlugins } from './basic-nodes-plugins';\nimport { blockMenuPlugins } from './block-menu-plugins';\nimport { commentsPlugin } from './comments-plugin';\nimport { cursorOverlayPlugin } from './cursor-overlay-plugin';\nimport { deletePlugins } from './delete-plugins';\nimport { dndPlugins } from './dnd-plugins';\nimport { exitBreakPlugin } from './exit-break-plugin';\nimport { indentListPlugins } from './indent-list-plugins';\nimport { lineHeightPlugin } from './line-height-plugin';\nimport { linkPlugin } from './link-plugin';\nimport { mediaPlugins } from './media-plugins';\nimport { mentionPlugin } from './mention-plugin';\nimport { resetBlockTypePlugin } from './reset-block-type-plugin';\nimport { softBreakPlugin } from './soft-break-plugin';\nimport { tablePlugin } from './table-plugin';\nimport { tocPlugin } from './toc-plugin';\n\nexport const viewPlugins = [\n  ...basicNodesPlugins,\n  HorizontalRulePlugin,\n  linkPlugin,\n  DatePlugin,\n  mentionPlugin,\n  tablePlugin,\n  TogglePlugin,\n  tocPlugin,\n  ...mediaPlugins,\n  InlineEquationPlugin,\n  EquationPlugin,\n  CalloutPlugin,\n  ColumnPlugin,\n\n  // Marks\n  FontColorPlugin,\n  FontBackgroundColorPlugin,\n  FontSizePlugin,\n  HighlightPlugin,\n  KbdPlugin,\n\n  // Block Style\n  alignPlugin,\n  ...indentListPlugins,\n  lineHeightPlugin,\n\n  // Collaboration\n  commentsPlugin,\n] as const;\n\nexport const editorPlugins = [\n  // AI\n  ...aiPlugins,\n\n  // Nodes\n  ...viewPlugins,\n\n  // Functionality\n  SlashPlugin,\n  autoformatPlugin,\n  cursorOverlayPlugin,\n  ...blockMenuPlugins,\n  ...dndPlugins,\n  EmojiPlugin,\n  exitBreakPlugin,\n  resetBlockTypePlugin,\n  ...deletePlugins,\n  softBreakPlugin,\n  TrailingBlockPlugin.configure({ options: { type: ParagraphPlugin.key } }),\n\n  // Deserialization\n  DocxPlugin,\n  MarkdownPlugin.configure({ options: { indentList: true } }),\n  JuicePlugin,\n\n  // UI\n  FixedToolbarPlugin,\n  FloatingToolbarPlugin,\n];\n",
      "path": "components/editor/plugins/editor-plugins.tsx",
      "target": "components/editor-plugins.tsx",
      "type": "registry:example"
    }
  ],
  "name": "basic-elements-demo",
  "registryDependencies": [
    "basic-nodes-plugins"
  ],
  "type": "registry:example"
}