37:I[3994,["7513","static/chunks/b6eb3486-df1bae131da191bb.js","7547","static/chunks/7547-7fbb79598e587741.js","5486","static/chunks/5486-37701c54a74cd980.js","915","static/chunks/915-a268354dc85322c8.js","1110","static/chunks/1110-9af6d887e4ab1348.js","5487","static/chunks/5487-d84c69d2dbf3cb4e.js","7700","static/chunks/7700-ae0a9a8d54dd57e4.js","448","static/chunks/448-8500b9bdf42a375b.js","8955","static/chunks/8955-9a5fb3923b4ff472.js","4950","static/chunks/4950-a9b85c738862ca40.js","679","static/chunks/679-bcb27f54d6fdc722.js","4036","static/chunks/4036-410f678a8286098b.js","5634","static/chunks/5634-aa207deffab9ab71.js","7369","static/chunks/7369-52503b4b8b6a8275.js","7256","static/chunks/7256-9ed3a3977fac773b.js","7006","static/chunks/7006-4b864bad3a7de601.js","8365","static/chunks/8365-9be9047e47857a03.js","1249","static/chunks/1249-b992ee59c5b04196.js","1090","static/chunks/1090-92115e0839b38a4e.js","851","static/chunks/851-63491d0d0bb396ab.js","6717","static/chunks/6717-b7947465e55fded8.js","1731","static/chunks/1731-cfcffe537970438b.js","3994","static/chunks/3994-02cbc7a4d4a56cff.js","9623","static/chunks/9623-b76053c6be00ed84.js","8320","static/chunks/8320-7bbfe0c4fd7214a0.js","7668","static/chunks/7668-7147c1e5665a87bd.js","757","static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-826026f5822c6d9e.js"],"DocContent"] 38:I[24469,["7513","static/chunks/b6eb3486-df1bae131da191bb.js","7547","static/chunks/7547-7fbb79598e587741.js","5486","static/chunks/5486-37701c54a74cd980.js","915","static/chunks/915-a268354dc85322c8.js","1110","static/chunks/1110-9af6d887e4ab1348.js","5487","static/chunks/5487-d84c69d2dbf3cb4e.js","7700","static/chunks/7700-ae0a9a8d54dd57e4.js","448","static/chunks/448-8500b9bdf42a375b.js","8955","static/chunks/8955-9a5fb3923b4ff472.js","4950","static/chunks/4950-a9b85c738862ca40.js","679","static/chunks/679-bcb27f54d6fdc722.js","4036","static/chunks/4036-410f678a8286098b.js","5634","static/chunks/5634-aa207deffab9ab71.js","7369","static/chunks/7369-52503b4b8b6a8275.js","7256","static/chunks/7256-9ed3a3977fac773b.js","7006","static/chunks/7006-4b864bad3a7de601.js","8365","static/chunks/8365-9be9047e47857a03.js","1249","static/chunks/1249-b992ee59c5b04196.js","1090","static/chunks/1090-92115e0839b38a4e.js","851","static/chunks/851-63491d0d0bb396ab.js","6717","static/chunks/6717-b7947465e55fded8.js","1731","static/chunks/1731-cfcffe537970438b.js","3994","static/chunks/3994-02cbc7a4d4a56cff.js","9623","static/chunks/9623-b76053c6be00ed84.js","8320","static/chunks/8320-7bbfe0c4fd7214a0.js","7668","static/chunks/7668-7147c1e5665a87bd.js","757","static/chunks/app/(app)/docs/%5B%5B...slug%5D%5D/page-826026f5822c6d9e.js"],"ComponentInstallation"] 39:T184a,

'use client';

import { Plate, usePlateEditor } from 'platejs/react';
import * as React from 'react';

import { Editor, EditorContainer } from '@/components/editor/editor';
import { EditorKit } from '@/components/editor/plugins';

import { createValue } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    initialValue: createValue(id),
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

3a:T1933,'use client'; import { exportToDocx } from '@platejs/docx-export'; import { MarkdownPlugin } from '@platejs/markdown'; import { ArrowDownToLineIcon } from 'lucide-react'; import { createBaseEditor } from 'platejs'; import { useEditor } from 'platejs/react'; import { renderStaticHtml } from 'platejs/static'; import * as React from 'react'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { DocxExportKit } from '@/components/editor/docx-export'; import { BaseEditorKit } from '@/components/editor/plugins-static'; import { ToolbarButton } from '@/components/editor/toolbar'; import { EditorStatic } from './editor-static'; const siteUrl = 'https://platejs.org'; const downloadFile = async (url: string, filename: string) => { const response = await fetch(url); const blob = await response.blob(); const blobUrl = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = blobUrl; link.download = filename; document.body.append(link); link.click(); link.remove(); window.URL.revokeObjectURL(blobUrl); }; export function ExportToolbarButton() { const editor = useEditor(); const [open, setOpen] = React.useState(false); const getCanvas = async () => { const { default: html2canvas } = await import('html2canvas-pro'); const style = document.createElement('style'); document.head.append(style); const editorElement = editor.api.dom.resolveDOMNode(editor); if (!editorElement) { style.remove(); throw new Error('Cannot resolve editor DOM node for export.'); } const canvas = await html2canvas(editorElement, { onclone: (document: Document) => { const innerEditorElement = document.querySelector( '[contenteditable="true"]' ); if (innerEditorElement) { Array.from(innerEditorElement.querySelectorAll('*')).forEach( (element) => { const existingStyle = element.getAttribute('style') || ''; element.setAttribute( 'style', `${existingStyle}; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important` ); } ); } }, }); style.remove(); return canvas; }; const exportToPdf = async () => { const [canvas, PDFLib] = await Promise.all([ getCanvas(), import('pdf-lib'), ]); const pdfDoc = await PDFLib.PDFDocument.create(); const page = pdfDoc.addPage([canvas.width, canvas.height]); const imageEmbed = await pdfDoc.embedPng(canvas.toDataURL('PNG')); const { height, width } = imageEmbed.scale(1); page.drawImage(imageEmbed, { height, width, x: 0, y: 0, }); const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true }); await downloadFile(pdfBase64, 'plate.pdf'); }; const exportToImage = async () => { const canvas = await getCanvas(); await downloadFile(canvas.toDataURL('image/png'), 'plate.png'); }; const exportToHtml = async () => { const editorStatic = createBaseEditor({ plugins: BaseEditorKit, initialValue: editor.read.children(), }); const editorHtml = await renderStaticHtml(editorStatic, { editorComponent: EditorStatic, props: { style: { padding: '0 calc(50% - 350px)', paddingBottom: '' } }, }); const tailwindCss = ``; const katexCss = ``; const html = ` ${tailwindCss} ${katexCss} ${editorHtml} `; const url = `data:text/html;charset=utf-8,${encodeURIComponent(html)}`; await downloadFile(url, 'plate.html'); }; const exportToMarkdown = async () => { const md = editor.plugin(MarkdownPlugin).api.serialize(); const url = `data:text/markdown;charset=utf-8,${encodeURIComponent(md)}`; await downloadFile(url, 'plate.md'); }; const exportToWord = async () => { const blob = await exportToDocx(editor.read.value().children, { editorPlugins: [...BaseEditorKit, ...DocxExportKit], }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'plate.docx'; document.body.append(link); link.click(); link.remove(); URL.revokeObjectURL(url); }; return ( Export as HTML Export as PDF Export as Image Export as Markdown Export as Word ); } 3b:Tce78,

'use client';

import { exportToDocx } from '@platejs/docx-export';
import { MarkdownPlugin } from '@platejs/markdown';
import { ArrowDownToLineIcon } from 'lucide-react';
import { createBaseEditor } from 'platejs';
import { useEditor } from 'platejs/react';
import { renderStaticHtml } from 'platejs/static';
import * as React from 'react';

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { DocxExportKit } from '@/components/editor/docx-export';
import { BaseEditorKit } from '@/components/editor/plugins-static';
import { ToolbarButton } from '@/components/editor/toolbar';

import { EditorStatic } from './editor-static';

const siteUrl = 'https://platejs.org';

const downloadFile = async (url: string, filename: string) => {
  const response = await fetch(url);
  const blob = await response.blob();
  const blobUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');

  link.href = blobUrl;
  link.download = filename;
  document.body.append(link);
  link.click();
  link.remove();
  window.URL.revokeObjectURL(blobUrl);
};

export function ExportToolbarButton() {
  const editor = useEditor();
  const [open, setOpen] = React.useState(false);

  const getCanvas = async () => {
    const { default: html2canvas } = await import('html2canvas-pro');

    const style = document.createElement('style');
    document.head.append(style);
    const editorElement = editor.api.dom.resolveDOMNode(editor);

    if (!editorElement) {
      style.remove();
      throw new Error('Cannot resolve editor DOM node for export.');
    }

    const canvas = await html2canvas(editorElement, {
      onclone: (document: Document) => {
        const innerEditorElement = document.querySelector(
          '[contenteditable="true"]'
        );
        if (innerEditorElement) {
          Array.from(innerEditorElement.querySelectorAll('*')).forEach(
            (element) => {
              const existingStyle = element.getAttribute('style') || '';
              element.setAttribute(
                'style',
                `${existingStyle}; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important`
              );
            }
          );
        }
      },
    });
    style.remove();

    return canvas;
  };

  const exportToPdf = async () => {
    const [canvas, PDFLib] = await Promise.all([
      getCanvas(),
      import('pdf-lib'),
    ]);
    const pdfDoc = await PDFLib.PDFDocument.create();
    const page = pdfDoc.addPage([canvas.width, canvas.height]);
    const imageEmbed = await pdfDoc.embedPng(canvas.toDataURL('PNG'));
    const { height, width } = imageEmbed.scale(1);
    page.drawImage(imageEmbed, {
      height,
      width,
      x: 0,
      y: 0,
    });
    const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true });

    await downloadFile(pdfBase64, 'plate.pdf');
  };

  const exportToImage = async () => {
    const canvas = await getCanvas();
    await downloadFile(canvas.toDataURL('image/png'), 'plate.png');
  };

  const exportToHtml = async () => {
    const editorStatic = createBaseEditor({
      plugins: BaseEditorKit,
      initialValue: editor.read.children(),
    });

    const editorHtml = await renderStaticHtml(editorStatic, {
      editorComponent: EditorStatic,
      props: { style: { padding: '0 calc(50% - 350px)', paddingBottom: '' } },
    });

    const tailwindCss = `<link rel="stylesheet" href="${siteUrl}/tailwind.css">`;
    const katexCss = `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.css" integrity="sha384-9PvLvaiSKCPkFKB1ZsEoTjgnJn+O3KvEwtsz37/XrkYft3DTk2gHdYvd9oWgW3tV" crossorigin="anonymous">`;

    const html = `<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="color-scheme" content="light dark" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
          href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=JetBrains+Mono:wght@400..700&display=swap"
          rel="stylesheet"
        />
        ${tailwindCss}
        ${katexCss}
        <style>
          :root {
            --font-sans: 'Inter', 'Inter Fallback';
            --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback';
          }
        </style>
      </head>
      <body>
        ${editorHtml}
      </body>
    </html>`;

    const url = `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;

    await downloadFile(url, 'plate.html');
  };

  const exportToMarkdown = async () => {
    const md = editor.plugin(MarkdownPlugin).api.serialize();
    const url = `data:text/markdown;charset=utf-8,${encodeURIComponent(md)}`;
    await downloadFile(url, 'plate.md');
  };

  const exportToWord = async () => {
    const blob = await exportToDocx(editor.read.value().children, {
      editorPlugins: [...BaseEditorKit, ...DocxExportKit],
    });

    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'plate.docx';
    document.body.append(link);
    link.click();
    link.remove();
    URL.revokeObjectURL(url);
  };

  return (
    <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
      <DropdownMenuTrigger asChild>
        <ToolbarButton pressed={open} tooltip="Export" isDropdown>
          <ArrowDownToLineIcon className="size-4" />
        </ToolbarButton>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="start">
        <DropdownMenuGroup>
          <DropdownMenuItem onSelect={exportToHtml}>
            Export as HTML
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={exportToPdf}>
            Export as PDF
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={exportToImage}>
            Export as Image
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={exportToMarkdown}>
            Export as Markdown
          </DropdownMenuItem>
          <DropdownMenuItem onSelect={exportToWord}>
            Export as Word
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

3c:T1933,'use client'; import { exportToDocx } from '@platejs/docx-export'; import { MarkdownPlugin } from '@platejs/markdown'; import { ArrowDownToLineIcon } from 'lucide-react'; import { createBaseEditor } from 'platejs'; import { useEditor } from 'platejs/react'; import { renderStaticHtml } from 'platejs/static'; import * as React from 'react'; import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'; import { DocxExportKit } from '@/components/editor/docx-export'; import { BaseEditorKit } from '@/components/editor/plugins-static'; import { ToolbarButton } from '@/components/editor/toolbar'; import { EditorStatic } from './editor-static'; const siteUrl = 'https://platejs.org'; const downloadFile = async (url: string, filename: string) => { const response = await fetch(url); const blob = await response.blob(); const blobUrl = window.URL.createObjectURL(blob); const link = document.createElement('a'); link.href = blobUrl; link.download = filename; document.body.append(link); link.click(); link.remove(); window.URL.revokeObjectURL(blobUrl); }; export function ExportToolbarButton() { const editor = useEditor(); const [open, setOpen] = React.useState(false); const getCanvas = async () => { const { default: html2canvas } = await import('html2canvas-pro'); const style = document.createElement('style'); document.head.append(style); const editorElement = editor.api.dom.resolveDOMNode(editor); if (!editorElement) { style.remove(); throw new Error('Cannot resolve editor DOM node for export.'); } const canvas = await html2canvas(editorElement, { onclone: (document: Document) => { const innerEditorElement = document.querySelector( '[contenteditable="true"]' ); if (innerEditorElement) { Array.from(innerEditorElement.querySelectorAll('*')).forEach( (element) => { const existingStyle = element.getAttribute('style') || ''; element.setAttribute( 'style', `${existingStyle}; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important` ); } ); } }, }); style.remove(); return canvas; }; const exportToPdf = async () => { const [canvas, PDFLib] = await Promise.all([ getCanvas(), import('pdf-lib'), ]); const pdfDoc = await PDFLib.PDFDocument.create(); const page = pdfDoc.addPage([canvas.width, canvas.height]); const imageEmbed = await pdfDoc.embedPng(canvas.toDataURL('PNG')); const { height, width } = imageEmbed.scale(1); page.drawImage(imageEmbed, { height, width, x: 0, y: 0, }); const pdfBase64 = await pdfDoc.saveAsBase64({ dataUri: true }); await downloadFile(pdfBase64, 'plate.pdf'); }; const exportToImage = async () => { const canvas = await getCanvas(); await downloadFile(canvas.toDataURL('image/png'), 'plate.png'); }; const exportToHtml = async () => { const editorStatic = createBaseEditor({ plugins: BaseEditorKit, initialValue: editor.read.children(), }); const editorHtml = await renderStaticHtml(editorStatic, { editorComponent: EditorStatic, props: { style: { padding: '0 calc(50% - 350px)', paddingBottom: '' } }, }); const tailwindCss = ``; const katexCss = ``; const html = ` ${tailwindCss} ${katexCss} ${editorHtml} `; const url = `data:text/html;charset=utf-8,${encodeURIComponent(html)}`; await downloadFile(url, 'plate.html'); }; const exportToMarkdown = async () => { const md = editor.plugin(MarkdownPlugin).api.serialize(); const url = `data:text/markdown;charset=utf-8,${encodeURIComponent(md)}`; await downloadFile(url, 'plate.md'); }; const exportToWord = async () => { const blob = await exportToDocx(editor.read.value().children, { editorPlugins: [...BaseEditorKit, ...DocxExportKit], }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = 'plate.docx'; document.body.append(link); link.click(); link.remove(); URL.revokeObjectURL(url); }; return ( Export as HTML Export as PDF Export as Image Export as Markdown Export as Word ); } 1c:["$","$L37",null,{"category":"component","dependencies":["@platejs/docx-export","@platejs/markdown","html2canvas-pro","pdf-lib","lucide-react"],"description":"A toolbar button for exporting editor content in various formats (HTML, PDF, Image, Markdown).","files":[{"path":"components/editor/export-toolbar-button.tsx","type":"registry:component"}],"meta":{"docs":[{"route":"/docs/export","title":"Export"}],"examples":["basic-nodes-demo"],"label":"New"},"name":"export-toolbar-button","registryDependencies":["@plate/docx-export","dropdown-menu","@plate/toolbar","@plate/editor-static","@plate/editor","@plate/editor-plugins-static"],"title":"Export Toolbar Button","type":"registry:component","doc":{"docs":[{"route":"/docs/export","title":"Export Plugin"},{"route":"/docs/components/block-list-static","title":"Block List Static"},{"route":"/docs/components/blockquote-static","title":"Blockquote Static"},{"route":"/docs/components/caption-static","title":"Caption Static"},{"route":"/docs/components/code-static","title":"Code Static"},{"route":"/docs/components/editor","title":"Editor"},{"route":"/docs/components/heading-static","title":"Heading Static"},{"route":"/docs/components/highlight-static","title":"Highlight Static"},{"route":"/docs/components/horizontal-rule-static","title":"Horizontal Rule Static"},{"route":"/docs/components/kbd-static","title":"Kbd Static"},{"route":"/docs/components/media-audio-static","title":"Media Audio Static"},{"route":"/docs/components/media-embed-static","title":"Media Embed Static"},{"route":"/docs/components/media-file-static","title":"Media File Static"},{"route":"/docs/components/media-image-static","title":"Media Image Static"},{"route":"/docs/components/media-video-static","title":"Media Video Static"},{"route":"/docs/components/paragraph-static","title":"Paragraph Static"},{"route":"/docs/components/editor-static","title":"Static Editor"},{"route":"/docs/components/toolbar","title":"Toolbar"}],"examples":"$1c:props:meta:examples","label":"New","slug":"/docs/components/export-toolbar-button"},"neighbours":{"next":{"href":"/docs/components/caption","title":"Caption","titleCn":"Caption"},"previous":{"href":"/docs/components/import-toolbar-button","title":"Import Toolbar Button","titleCn":"Import Toolbar Button"}},"children":["$","$L38",null,{"name":"export-toolbar-button","dependencies":["@platejs/docx-export","@platejs/markdown","html2canvas-pro","pdf-lib","lucide-react","@platejs/basic-nodes","@platejs/callout","@platejs/code-block","@platejs/layout","@platejs/math","@platejs/toc","lowlight","@radix-ui/react-slot","@radix-ui/react-dropdown-menu","@base-ui/react","@platejs/basic-styles","@platejs/comment","@platejs/date","@platejs/utils","@platejs/footnote","@platejs/link","@platejs/list","@platejs/indent","remark-emoji","remark-gfm","remark-math","@platejs/media","@platejs/suggestion","@platejs/mention","@platejs/table","@platejs/toggle"],"examples":[{"dependencies":["@platejs/test-utils","@platejs/basic-nodes","@base-ui/react"],"doc":{"title":"$undefined"},"highlightedFiles":[{"path":"demo.tsx","content":"'use client';\n\nimport { Plate, usePlateEditor } from 'platejs/react';\nimport * as React from 'react';\n\nimport { Editor, EditorContainer } from '@/components/editor/editor';\nimport { EditorKit } from '@/components/editor/plugins';\n\nimport { createValue } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = usePlateEditor({\n plugins: EditorKit,\n initialValue: createValue(id),\n });\n\n return (\n \n \n \n \n \n );\n}\n","type":"registry:example","target":"components/demo.tsx","highlightedContent":"$39"},{"path":"values/basic-nodes-value.tsx","content":"$undefined","type":"registry:example","target":"components/basic-nodes-value.tsx","highlightedContent":"

"},{"path":"values/basic-blocks-value.tsx","content":"$undefined","type":"registry:example","target":"components/basic-blocks-value.tsx","highlightedContent":"

"},{"path":"values/basic-marks-value.tsx","content":"$undefined","type":"registry:example","target":"components/basic-marks-value.tsx","highlightedContent":"

"},{"path":"../components/editor/basic-nodes.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-nodes.tsx","highlightedContent":"

"},{"path":"../components/editor/basic-blocks.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-blocks.tsx","highlightedContent":"

"},{"path":"../components/editor/blockquote.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/blockquote.tsx","highlightedContent":"

"},{"path":"../components/editor/heading.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/heading.tsx","highlightedContent":"

"},{"path":"../components/editor/horizontal-rule.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/horizontal-rule.tsx","highlightedContent":"

"},{"path":"../components/editor/paragraph.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/paragraph.tsx","highlightedContent":"

"},{"path":"../components/editor/basic-marks.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks.tsx","highlightedContent":"

"},{"path":"../components/editor/code.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code.tsx","highlightedContent":"

"},{"path":"../components/editor/highlight.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight.tsx","highlightedContent":"

"},{"path":"../components/editor/kbd.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd.tsx","highlightedContent":"

"},{"path":"../components/editor/mark-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/mark-toolbar-button.tsx","highlightedContent":"

"},{"path":"../bases/base/toolbar.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar.tsx","highlightedContent":"

"},{"path":"../components/editor/editor.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor.tsx","highlightedContent":"

"}],"item":{"name":"basic-nodes-demo","description":"Basic block elements and text marks.","dependencies":["@platejs/test-utils"],"registryDependencies":["@plate/basic-nodes","@plate/editor"],"files":[{"path":"demo.tsx","content":"'use client';\n\nimport { Plate, usePlateEditor } from 'platejs/react';\nimport * as React from 'react';\n\nimport { Editor, EditorContainer } from '@/components/editor/editor';\nimport { EditorKit } from '@/components/editor/plugins';\n\nimport { createValue } from './values/demo-values';\n\nexport default function Demo({ id }: { id: string }) {\n const editor = usePlateEditor({\n plugins: EditorKit,\n initialValue: createValue(id),\n });\n\n return (\n \n \n \n \n \n );\n}\n","type":"registry:example","target":"components/demo.tsx"},{"path":"values/basic-nodes-value.tsx","content":"$undefined","type":"registry:example","target":"components/basic-nodes-value.tsx"},{"path":"values/basic-blocks-value.tsx","content":"$undefined","type":"registry:example","target":"components/basic-blocks-value.tsx"},{"path":"values/basic-marks-value.tsx","content":"$undefined","type":"registry:example","target":"components/basic-marks-value.tsx"},{"path":"../components/editor/basic-nodes.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-nodes.tsx"},{"path":"../components/editor/basic-blocks.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-blocks.tsx"},{"path":"../components/editor/blockquote.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/blockquote.tsx"},{"path":"../components/editor/heading.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/heading.tsx"},{"path":"../components/editor/horizontal-rule.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/horizontal-rule.tsx"},{"path":"../components/editor/paragraph.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/paragraph.tsx"},{"path":"../components/editor/basic-marks.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks.tsx"},{"path":"../components/editor/code.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code.tsx"},{"path":"../components/editor/highlight.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight.tsx"},{"path":"../components/editor/kbd.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd.tsx"},{"path":"../components/editor/mark-toolbar-button.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/mark-toolbar-button.tsx"},{"path":"../bases/base/toolbar.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar.tsx"},{"path":"../components/editor/editor.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor.tsx"}],"meta":{"docs":[{"route":"/docs/basic-blocks","title":"Basic Elements"}],"keywords":["element","leaf"],"registry":false},"type":"registry:example"},"name":"basic-nodes-demo","tree":[{"children":[{"name":"demo.tsx","path":"components/demo.tsx"},{"name":"basic-nodes-value.tsx","path":"components/basic-nodes-value.tsx"},{"name":"basic-blocks-value.tsx","path":"components/basic-blocks-value.tsx"},{"name":"basic-marks-value.tsx","path":"components/basic-marks-value.tsx"}],"name":"components"},{"children":[{"children":[{"name":"basic-nodes.tsx","path":"@components/editor/basic-nodes.tsx"},{"name":"basic-blocks.tsx","path":"@components/editor/basic-blocks.tsx"},{"name":"blockquote.tsx","path":"@components/editor/blockquote.tsx"},{"name":"heading.tsx","path":"@components/editor/heading.tsx"},{"name":"horizontal-rule.tsx","path":"@components/editor/horizontal-rule.tsx"},{"name":"paragraph.tsx","path":"@components/editor/paragraph.tsx"},{"name":"basic-marks.tsx","path":"@components/editor/basic-marks.tsx"},{"name":"code.tsx","path":"@components/editor/code.tsx"},{"name":"highlight.tsx","path":"@components/editor/highlight.tsx"},{"name":"kbd.tsx","path":"@components/editor/kbd.tsx"},{"name":"mark-toolbar-button.tsx","path":"@components/editor/mark-toolbar-button.tsx"},{"name":"toolbar.tsx","path":"@components/editor/toolbar.tsx"},{"name":"editor.tsx","path":"@components/editor/editor.tsx"}],"name":"editor"}],"name":"@components"}]}],"highlightedFiles":[{"path":"export-toolbar-button.tsx","content":"$3a","type":"registry:component","target":"@components/editor/export-toolbar-button.tsx","highlightedContent":"$3b"},{"path":"docx-export.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/docx-export.tsx","highlightedContent":"

"},{"path":"callout-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/callout-static.tsx","highlightedContent":"

"},{"path":"code-block-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-block-static.tsx","highlightedContent":"

"},{"path":"column-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/column-static.tsx","highlightedContent":"

"},{"path":"math-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/math-static.tsx","highlightedContent":"

"},{"path":"../../lib/inline-suggestion.ts","content":"$undefined","type":"registry:lib","target":"lib/inline-suggestion.ts","highlightedContent":"

"},{"path":"heading-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/heading-static.tsx","highlightedContent":"

"},{"path":"toc-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toc-static.tsx","highlightedContent":"

"},{"path":"../../bases/base/toolbar.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar.tsx","highlightedContent":"

"},{"path":"editor-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor-static.tsx","highlightedContent":"

"},{"path":"editor.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor.tsx","highlightedContent":"

"},{"path":"plugins-static.ts","content":"$undefined","type":"registry:component","target":"@components/editor/plugins-static.ts","highlightedContent":"

"},{"path":"align-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/align-static.tsx","highlightedContent":"

"},{"path":"basic-blocks-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-blocks-static.tsx","highlightedContent":"

"},{"path":"blockquote-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/blockquote-static.tsx","highlightedContent":"

"},{"path":"horizontal-rule-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/horizontal-rule-static.tsx","highlightedContent":"

"},{"path":"paragraph-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/paragraph-static.tsx","highlightedContent":"

"},{"path":"basic-marks-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks-static.tsx","highlightedContent":"

"},{"path":"code-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-static.tsx","highlightedContent":"

"},{"path":"highlight-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight-static.tsx","highlightedContent":"

"},{"path":"kbd-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd-static.tsx","highlightedContent":"

"},{"path":"comment-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/comment-static.tsx","highlightedContent":"

"},{"path":"date-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/date-static.tsx","highlightedContent":"

"},{"path":"font-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/font-static.tsx","highlightedContent":"

"},{"path":"footnote-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/footnote-static.tsx","highlightedContent":"

"},{"path":"line-height-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/line-height-static.tsx","highlightedContent":"

"},{"path":"link-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/link-static.tsx","highlightedContent":"

"},{"path":"list-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/list-static.tsx","highlightedContent":"

"},{"path":"block-list-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/block-list-static.tsx","highlightedContent":"

"},{"path":"indent-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/indent-static.tsx","highlightedContent":"

"},{"path":"markdown.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/markdown.tsx","highlightedContent":"

"},{"path":"media-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-static.tsx","highlightedContent":"

"},{"path":"media-audio-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-audio-static.tsx","highlightedContent":"

"},{"path":"caption-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/caption-static.tsx","highlightedContent":"

"},{"path":"media-embed-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-embed-static.tsx","highlightedContent":"

"},{"path":"media-file-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-file-static.tsx","highlightedContent":"

"},{"path":"media-image-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-image-static.tsx","highlightedContent":"

"},{"path":"media-video-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-video-static.tsx","highlightedContent":"

"},{"path":"mention-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/mention-static.tsx","highlightedContent":"

"},{"path":"suggestion-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/suggestion-static.tsx","highlightedContent":"

"},{"path":"table-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/table-static.tsx","highlightedContent":"

"},{"path":"toggle-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toggle-static.tsx","highlightedContent":"

"}],"item":{"name":"export-toolbar-button","title":"Export Toolbar Button","description":"A toolbar button for exporting editor content in various formats (HTML, PDF, Image, Markdown).","dependencies":["@platejs/docx-export","@platejs/markdown","html2canvas-pro","pdf-lib","lucide-react"],"registryDependencies":["@plate/docx-export","dropdown-menu","@plate/toolbar","@plate/editor-static","@plate/editor","@plate/editor-plugins-static"],"files":[{"path":"export-toolbar-button.tsx","content":"$3c","type":"registry:component","target":"@components/editor/export-toolbar-button.tsx"},{"path":"docx-export.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/docx-export.tsx"},{"path":"callout-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/callout-static.tsx"},{"path":"code-block-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-block-static.tsx"},{"path":"column-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/column-static.tsx"},{"path":"math-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/math-static.tsx"},{"path":"../../lib/inline-suggestion.ts","content":"$undefined","type":"registry:lib","target":"lib/inline-suggestion.ts"},{"path":"heading-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/heading-static.tsx"},{"path":"toc-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toc-static.tsx"},{"path":"../../bases/base/toolbar.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toolbar.tsx"},{"path":"editor-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor-static.tsx"},{"path":"editor.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/editor.tsx"},{"path":"plugins-static.ts","content":"$undefined","type":"registry:component","target":"@components/editor/plugins-static.ts"},{"path":"align-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/align-static.tsx"},{"path":"basic-blocks-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-blocks-static.tsx"},{"path":"blockquote-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/blockquote-static.tsx"},{"path":"horizontal-rule-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/horizontal-rule-static.tsx"},{"path":"paragraph-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/paragraph-static.tsx"},{"path":"basic-marks-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/basic-marks-static.tsx"},{"path":"code-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/code-static.tsx"},{"path":"highlight-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/highlight-static.tsx"},{"path":"kbd-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/kbd-static.tsx"},{"path":"comment-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/comment-static.tsx"},{"path":"date-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/date-static.tsx"},{"path":"font-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/font-static.tsx"},{"path":"footnote-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/footnote-static.tsx"},{"path":"line-height-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/line-height-static.tsx"},{"path":"link-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/link-static.tsx"},{"path":"list-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/list-static.tsx"},{"path":"block-list-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/block-list-static.tsx"},{"path":"indent-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/indent-static.tsx"},{"path":"markdown.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/markdown.tsx"},{"path":"media-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-static.tsx"},{"path":"media-audio-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-audio-static.tsx"},{"path":"caption-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/caption-static.tsx"},{"path":"media-embed-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-embed-static.tsx"},{"path":"media-file-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-file-static.tsx"},{"path":"media-image-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-image-static.tsx"},{"path":"media-video-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/media-video-static.tsx"},{"path":"mention-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/mention-static.tsx"},{"path":"suggestion-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/suggestion-static.tsx"},{"path":"table-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/table-static.tsx"},{"path":"toggle-static.tsx","content":"$undefined","type":"registry:component","target":"@components/editor/toggle-static.tsx"}],"meta":{"docs":"$1c:props:meta:docs","examples":"$1c:props:meta:examples","label":"New"},"type":"registry:component"},"tree":[{"children":[{"children":[{"name":"export-toolbar-button.tsx","path":"@components/editor/export-toolbar-button.tsx"},{"name":"docx-export.tsx","path":"@components/editor/docx-export.tsx"},{"name":"callout-static.tsx","path":"@components/editor/callout-static.tsx"},{"name":"code-block-static.tsx","path":"@components/editor/code-block-static.tsx"},{"name":"column-static.tsx","path":"@components/editor/column-static.tsx"},{"name":"math-static.tsx","path":"@components/editor/math-static.tsx"},{"name":"heading-static.tsx","path":"@components/editor/heading-static.tsx"},{"name":"toc-static.tsx","path":"@components/editor/toc-static.tsx"},{"name":"toolbar.tsx","path":"@components/editor/toolbar.tsx"},{"name":"editor-static.tsx","path":"@components/editor/editor-static.tsx"},{"name":"editor.tsx","path":"@components/editor/editor.tsx"},{"name":"plugins-static.ts","path":"@components/editor/plugins-static.ts"},{"name":"align-static.tsx","path":"@components/editor/align-static.tsx"},{"name":"basic-blocks-static.tsx","path":"@components/editor/basic-blocks-static.tsx"},{"name":"blockquote-static.tsx","path":"@components/editor/blockquote-static.tsx"},{"name":"horizontal-rule-static.tsx","path":"@components/editor/horizontal-rule-static.tsx"},{"name":"paragraph-static.tsx","path":"@components/editor/paragraph-static.tsx"},{"name":"basic-marks-static.tsx","path":"@components/editor/basic-marks-static.tsx"},{"name":"code-static.tsx","path":"@components/editor/code-static.tsx"},{"name":"highlight-static.tsx","path":"@components/editor/highlight-static.tsx"},{"name":"kbd-static.tsx","path":"@components/editor/kbd-static.tsx"},{"name":"comment-static.tsx","path":"@components/editor/comment-static.tsx"},{"name":"date-static.tsx","path":"@components/editor/date-static.tsx"},{"name":"font-static.tsx","path":"@components/editor/font-static.tsx"},{"name":"footnote-static.tsx","path":"@components/editor/footnote-static.tsx"},{"name":"line-height-static.tsx","path":"@components/editor/line-height-static.tsx"},{"name":"link-static.tsx","path":"@components/editor/link-static.tsx"},{"name":"list-static.tsx","path":"@components/editor/list-static.tsx"},{"name":"block-list-static.tsx","path":"@components/editor/block-list-static.tsx"},{"name":"indent-static.tsx","path":"@components/editor/indent-static.tsx"},{"name":"markdown.tsx","path":"@components/editor/markdown.tsx"},{"name":"media-static.tsx","path":"@components/editor/media-static.tsx"},{"name":"media-audio-static.tsx","path":"@components/editor/media-audio-static.tsx"},{"name":"caption-static.tsx","path":"@components/editor/caption-static.tsx"},{"name":"media-embed-static.tsx","path":"@components/editor/media-embed-static.tsx"},{"name":"media-file-static.tsx","path":"@components/editor/media-file-static.tsx"},{"name":"media-image-static.tsx","path":"@components/editor/media-image-static.tsx"},{"name":"media-video-static.tsx","path":"@components/editor/media-video-static.tsx"},{"name":"mention-static.tsx","path":"@components/editor/mention-static.tsx"},{"name":"suggestion-static.tsx","path":"@components/editor/suggestion-static.tsx"},{"name":"table-static.tsx","path":"@components/editor/table-static.tsx"},{"name":"toggle-static.tsx","path":"@components/editor/toggle-static.tsx"}],"name":"editor"}],"name":"@components"},{"children":[{"name":"inline-suggestion.ts","path":"lib/inline-suggestion.ts"}],"name":"lib"}],"usage":"$undefined"}]}]

Export Toolbar Button

Installation

Examples

Export Toolbar Button

Installation

Examples