Slate To Html

import * as React from 'react';

import { cva } from 'class-variance-authority';
import fs from 'node:fs/promises';
import path from 'node:path';
import { type Value, normalizeStaticValue } from 'platejs';
import { createStaticEditor, serializeHtml } from 'platejs/static';

import { BaseEditorKit } from '@/registry/components/editor/editor-base-kit';
import {
  EditorClient,
  EditorViewClient,
  ExportHtmlButton,
  HtmlIframe,
} from '@/registry/components/editor/slate-to-html';
import { alignValue } from '@/registry/examples/values/align-value';
import { basicBlocksValue } from '@/registry/examples/values/basic-blocks-value';
import { basicMarksValue } from '@/registry/examples/values/basic-marks-value';
import { columnValue } from '@/registry/examples/values/column-value';
import { dateValue } from '@/registry/examples/values/date-value';
import { discussionValue } from '@/registry/examples/values/discussion-value';
import { equationValue } from '@/registry/examples/values/equation-value';
import { fontValue } from '@/registry/examples/values/font-value';
import { indentValue } from '@/registry/examples/values/indent-value';
import { lineHeightValue } from '@/registry/examples/values/line-height-value';
import { linkValue } from '@/registry/examples/values/link-value';
import { listValue } from '@/registry/examples/values/list-value';
import { mediaValue } from '@/registry/examples/values/media-value';
import { mentionValue } from '@/registry/examples/values/mention-value';
import { tableValue } from '@/registry/examples/values/table-value';
import { tocPlaygroundValue } from '@/registry/examples/values/toc-value';
import { createHtmlDocument } from '@/registry/lib/create-html-document';
import { EditorStatic } from '@/registry/ui/editor-static';

const getCachedTailwindCss = React.cache(async () => {
  const cssPath = path.join(process.cwd(), 'public', 'tailwind.css');

  return await fs.readFile(cssPath, 'utf8');
});

export default async function SlateToHtmlBlock() {
  const createValue = (): Value =>
    normalizeStaticValue([
      ...basicBlocksValue,
      ...basicMarksValue,
      ...tocPlaygroundValue,
      ...linkValue,
      ...tableValue,
      ...equationValue,
      ...columnValue,
      ...mentionValue,
      ...dateValue,
      ...fontValue,
      ...discussionValue,
      ...alignValue,
      ...lineHeightValue,
      ...indentValue,
      ...listValue,
      ...mediaValue,
    ]);

  const editor = createStaticEditor({
    plugins: BaseEditorKit,
    value: createValue(),
  });

  const tailwindCss = await getCachedTailwindCss();
  const katexCDN = `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.18/dist/katex.css" integrity="sha384-9PvLvaiSKCPkFKB1ZsEoTjgnJn+O3KvEwtsz37/XrkYft3DTk2gHdYvd9oWgW3tV" crossorigin="anonymous">`;

  // const cookieStore = await cookies();
  // const theme = cookieStore.get('theme')?.value;
  const theme = 'light';

  // Get the editor content HTML using EditorStatic
  const editorHtml = await serializeHtml(editor, {
    editorComponent: EditorStatic,
    props: { style: { padding: '0 calc(50% - 350px)', paddingBottom: '' } },
  });

  // Create the full HTML document
  const html = createHtmlDocument({
    editorHtml,
    katexCDN,
    tailwindCss,
    theme,
  });

  return (
    <div className="grid grid-cols-3 px-4">
      <div className="p-2">
        <h3 className={headingVariants()}>Editor</h3>
        <EditorClient value={createValue()} />
      </div>

      <div className="p-2">
        <h3 className={headingVariants()}>EditorView</h3>
        <EditorViewClient value={createValue()} />
      </div>

      <div className="relative p-2">
        <h3 className={headingVariants()}>HTML Iframe</h3>
        <ExportHtmlButton
          className="absolute top-10 right-0"
          html={html}
          serverTheme={theme}
        />
        <HtmlIframe
          className="h-[7500px] w-full"
          html={html}
          serverTheme={theme}
        />
      </div>
    </div>
  );
}

const headingVariants = cva(
  'group mt-8 scroll-m-20 font-heading font-semibold text-xl tracking-tight'
);

'use client';

import * as React from 'react';

import { useTheme } from 'next-themes';
import { Plate, usePlateEditor, usePlateViewEditor } from 'platejs/react';

import { Button } from '@/components/ui/button';
import { EditorKit } from '@/registry/components/editor/editor-kit';
import { Editor, EditorView } from '@/registry/ui/editor';

import { BaseEditorKit } from './editor-base-kit';

function useThemedHtml(html: string, serverTheme?: string) {
  const { resolvedTheme } = useTheme();

  return React.useMemo(() => {
    if (typeof window === 'undefined') return html;
    // Only parse and update if theme differs from server
    if (serverTheme === resolvedTheme) return html;

    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    const htmlElement = doc.documentElement;

    if (resolvedTheme === 'dark') {
      htmlElement.classList.add('dark');
    } else {
      htmlElement.classList.remove('dark');
    }

    return doc.documentElement.outerHTML;
  }, [html, resolvedTheme, serverTheme]);
}

export function ExportHtmlButton({
  className,
  html,
  serverTheme,
}: {
  html: string;
  className?: string;
  serverTheme?: string;
}) {
  const themedHtml = useThemedHtml(html, serverTheme);
  const [url, setUrl] = React.useState<string>();

  React.useEffect(() => {
    const blob = new Blob([themedHtml], { type: 'text/html' });
    const blobUrl = URL.createObjectURL(blob);
    // eslint-disable-next-line react-hooks/set-state-in-effect -- Track browser object URL lifecycle for the generated export blob.
    setUrl(blobUrl);

    return () => {
      URL.revokeObjectURL(blobUrl);
    };
  }, [themedHtml]);

  return (
    <a
      className={className}
      download="export-plate.html"
      href={url}
      rel="noopener noreferrer"
      role="button"
    >
      <Button>Export HTML</Button>
    </a>
  );
}

export function HtmlIframe({
  html,
  serverTheme,
  ...props
}: {
  html: string;
  serverTheme?: string;
} & React.ComponentProps<'iframe'>) {
  const content = useThemedHtml(html, serverTheme);

  return <iframe title="Preview" srcDoc={content} {...props} />;
}

export function EditorClient({ value }: { value: any }) {
  const editor = usePlateEditor({
    override: {
      enabled: {
        'fixed-toolbar': false,
        'floating-toolbar': false,
      },
    },
    plugins: EditorKit,
    value,
  });

  return (
    <Plate readOnly editor={editor}>
      <Editor variant="none" />
    </Plate>
  );
}

export const EditorViewClient = ({ value }: { value: any }) => {
  const editor = usePlateViewEditor({
    plugins: BaseEditorKit,
    value,
  });

  return <EditorView variant="none" editor={editor} />;
};

export function createHtmlDocument({
  editorHtml,
  katexCDN,
  tailwindCss,
  theme,
}: {
  editorHtml: string;
  tailwindCss: string;
  katexCDN?: string;
  theme?: string;
}): string {
  return `<!DOCTYPE html>
<html lang="en"${theme === 'dark' ? ' class="dark"' : ''}>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
    <style>${tailwindCss}</style>
    ${katexCDN}
    <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"
    />
    <style>
      :root {
        --font-sans: 'Inter', 'Inter Fallback';
        --font-mono: 'JetBrains Mono', 'JetBrains Mono Fallback';
      }
    </style>
  </head>
  <body>
    ${editorHtml}
  </body>
</html>`;
}

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const alignValue: any = (
  <fragment>
    <hh2 align="right">Alignment</hh2>
    <hp align="right">
      Align text within blocks to create visually appealing and balanced
      layouts.
    </hp>
    <hh3 align="center">Center</hh3>
    <hp align="justify">
      Create clean and balanced layouts by justifying block text, providing a
      professional and polished look.
    </hp>
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';
import { KEYS } from 'platejs';

jsx;

export const basicBlocksValue: any = (
  <fragment>
    <hh1>Heading 1</hh1>
    <hp>
      This is a top-level heading, typically used for main titles and major
      section headers.
    </hp>
    <hh2>Heading 2</hh2>
    <hp>
      Secondary headings help organize content into clear sections and
      subsections.
    </hp>
    <hh3>Heading 3</hh3>
    <hp>
      Third-level headings provide further content structure and hierarchy.
    </hp>
    <hblockquote>
      <hp>
        Blockquotes can group multiple paragraphs, quoted lists, and replies in
        one container.
      </hp>
      <hp>
        Use nested blockquotes when you need to keep the quote hierarchy
        explicit.
      </hp>
      <hblockquote>
        <hp>Nested blockquotes keep reply chains readable.</hp>
      </hblockquote>
    </hblockquote>
    <hp>
      Use headings to create a clear document structure that helps readers
      navigate your content effectively. Combine them with blockquotes to
      emphasize important information.
    </hp>
    <element type={KEYS.hr}>
      <htext />
    </element>
    <hp>
      Horizontal rules help visually separate different sections of your
      content, creating clear breaks between topics or ideas.
    </hp>
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const basicMarksValue: any = (
  <fragment>
    <hh2>Text Formatting</hh2>
    <hp>
      Add style and emphasis to your text using various formatting options.
    </hp>
    <hp>
      Make text <htext bold>bold</htext>, <htext italic>italic</htext>,{' '}
      <htext underline>underlined</htext>, or apply a{' '}
      <htext bold italic underline>
        combination
      </htext>{' '}
      of these styles for emphasis.
    </hp>
    <hp>
      Add <htext strikethrough>strikethrough</htext> to indicate deleted
      content, use <htext code>inline code</htext> for technical terms, or{' '}
      <htext highlight>highlight</htext> important information.
    </hp>
    <hp>
      Format mathematical expressions with <htext subscript>subscript</htext>{' '}
      and <htext superscript>superscript</htext> text.
    </hp>
    <hp>
      Show keyboard shortcuts like <htext kbd>⌘ + B</htext> for bold or{' '}
      <htext kbd>⌘ + I</htext> for italic formatting.
    </hp>
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const columnValue: any = (
  <fragment>
    <hh2>Column</hh2>
    <hp>Create column and the border will hidden when viewing</hp>
    <hcolumngroup layout={[50, 50]}>
      <hcolumn width="50%">
        <hp>left 1</hp>
        <hp>left 2</hp>
      </hcolumn>
      <hcolumn width="50%">
        <hp>right 1</hp>
        <hp>right 2</hp>
      </hcolumn>
    </hcolumngroup>
  </fragment>
);

import type { Value } from 'platejs';

export const discussionValue: Value = [
  {
    children: [{ text: 'Discussions' }],
    type: 'h2',
  },
  {
    children: [
      { text: 'Review and refine content seamlessly. Use ' },
      {
        children: [
          {
            suggestion: true,
            suggestion_playground1: {
              id: 'playground1',
              createdAt: Date.now(),
              type: 'insert',
              userId: 'alice',
            },
            text: 'suggestions',
          },
        ],
        type: 'a',
        url: '/docs/suggestion',
      },
      {
        suggestion: true,
        suggestion_playground1: {
          id: 'playground1',
          createdAt: Date.now(),
          type: 'insert',
          userId: 'alice',
        },
        text: ' ',
      },
      {
        suggestion: true,
        suggestion_playground1: {
          id: 'playground1',
          createdAt: Date.now(),
          type: 'insert',
          userId: 'alice',
        },
        text: 'like this added text',
      },
      { text: ' or to ' },
      {
        suggestion: true,
        suggestion_playground2: {
          id: 'playground2',
          createdAt: Date.now(),
          type: 'remove',
          userId: 'bob',
        },
        text: 'mark text for removal',
      },
      { text: '. Discuss changes using ' },
      {
        children: [
          { comment: true, comment_discussion1: true, text: 'comments' },
        ],
        type: 'a',
        url: '/docs/comment',
      },
      {
        comment: true,
        comment_discussion1: true,
        text: ' on many text segments',
      },
      { text: '. You can even have ' },
      {
        comment: true,
        comment_discussion2: true,
        suggestion: true,
        suggestion_playground3: {
          id: 'playground3',
          createdAt: Date.now(),
          type: 'insert',
          userId: 'charlie',
        },
        text: 'overlapping',
      },
      { text: ' annotations!' },
    ],
    type: 'p',
  },
];

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

const today = new Date().toISOString().split('T')[0];

export const dateValue: any = (
  <fragment>
    <hh2>Date</hh2>
    <hp>
      Insert and display dates within your text using inline date elements.
      These dates can be easily selected and modified using a calendar
      interface.
    </hp>
    <hp>
      Try selecting{' '}
      <hdate date="2024-01-01">
        <htext />
      </hdate>{' '}
      or{' '}
      <hdate date={today}>
        <htext />
      </hdate>
      .
    </hp>
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const equationValue: any = (
  <fragment>
    <hh2>
      <htext>Equation</htext>
    </hh2>
    <hp indent={1} listStyleType="decimal">
      <htext>
        Equations allow you to express complex mathematical concepts in both
        inline and block formats.
      </htext>
    </hp>
    <hp indent={1} listStart={2} listStyleType="decimal">
      <htext>Key features:</htext>
    </hp>
    <hp indent={2} listStyleType="disc">
      <htext>LaTeX syntax support</htext>
    </hp>
    <hp indent={2} listStyleType="disc">
      <htext>Inline and block equation formats</htext>
    </hp>
    <hp indent={1} listStart={3} listStyleType="decimal">
      <htext>Inline equation example: </htext>
      <hinlineequation texExpression="E=mc^2">
        <htext />
      </hinlineequation>
      <htext> (Einstein's famous equation)</htext>
    </hp>
    <hp indent={1} listStart={4} listStyleType="decimal">
      <htext>Block equation examples:</htext>
    </hp>
    <hequation texExpression="\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}">
      <htext />
    </hequation>
    <hp>
      <htext>The quadratic formula for solving </htext>
      <hinlineequation texExpression="ax^2 + bx + c = 0">
        <htext />
      </hinlineequation>
      <htext>.</htext>
    </hp>
    <hequation texExpression="\int_{a}^{b} f(x) \, dx = F(b) - F(a)">
      <htext />
    </hequation>
    <hp>
      <htext>The fundamental theorem of calculus.</htext>
    </hp>
    <hp indent={1} listStart={5} listStyleType="decimal">
      <htext>Try these actions:</htext>
    </hp>
    <hp indent={2} listStyleType="disc">
      <htext>
        Click on any equation to edit it. Press Escape to close the menu without
        editing it.
      </htext>
    </hp>
    <hp indent={2} listStyleType="disc">
      <htext>
        You can navigate through the equation by using the arrow keys
      </htext>
    </hp>
    <hp indent={2} listStyleType="disc">
      <htext>Use the slash command (/equation) to insert a new equation</htext>
    </hp>
    <hp indent={2} listStyleType="disc">
      <htext>
        Use the slash command (/inline equation) for inline equations
      </htext>
    </hp>
    <hp>
      <htext>
        Advanced usage: Combine equations with other elements like tables or
        code blocks for comprehensive scientific documentation. For example:
      </htext>
    </hp>
    <hp>
      <htext>The Schrödinger equation, </htext>
      <hinlineequation texExpression="i\hbar\frac{\partial}{\partial t}\Psi = \hat{H}\Psi">
        <htext />
      </hinlineequation>
      <htext>, is fundamental in quantum mechanics.</htext>
    </hp>
    <hp>
      <htext>
        Experiment with different equation types and formatting to create rich,
        mathematical content in your documents.
      </htext>
    </hp>
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const fontValue: any = (
  <fragment>
    <hh2>Colors</hh2>
    <hp>
      Add{' '}
      <htext color="white" backgroundColor="#df4538">
        m
      </htext>
      <htext color="white" backgroundColor="#e2533a">
        u
      </htext>
      <htext color="white" backgroundColor="#e6603d">
        l
      </htext>
      <htext color="white" backgroundColor="#e96f40">
        t
      </htext>
      <htext color="white" backgroundColor="#ec7d43">
        i
      </htext>
      <htext color="white" backgroundColor="#ef8a45">
        p
      </htext>
      <htext color="white" backgroundColor="#f29948">
        l
      </htext>
      <htext color="white" backgroundColor="#f5a74b">
        e
      </htext>{' '}
      <htext color="rgb(252, 109, 38)">font</htext> and{' '}
      <htext color="white" backgroundColor="rgb(252, 109, 38)">
        background
      </htext>{' '}
      colors to create vibrant and eye-catching text.
    </hp>
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const indentValue: any = (
  <fragment>
    <hh2>Indentation</hh2>
    <hp indent={1}>
      Easily control the indentation of specific blocks to highlight important
      information and improve visual structure.
    </hp>
    <hp indent={2}>
      For instance, this paragraph looks like it belongs to the previous one.
    </hp>
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const lineHeightValue: any = (
  <fragment>
    <hh2>Line Height</hh2>
    <hp>
      Control the line height of your text to improve readability and adjust the
      spacing between lines.
    </hp>
    <hp lineHeight={2}>
      Choose the ideal line height to ensure comfortable reading and an
      aesthetically pleasing document.
    </hp>
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const linkValue: any = (
  <fragment>
    <hh2>Link</hh2>
    <hp>
      Add{' '}
      <ha target="_blank" url="https://en.wikipedia.org/wiki/Hypertext">
        hyperlinks
      </ha>{' '}
      within your text to reference external sources or provide additional
      information using the Link plugin.
    </hp>
    <hp>
      Effortlessly create hyperlinks using the toolbar or by pasting a URL while
      selecting the desired text.
    </hp>
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const listValue: any = (
  <fragment>
    <hh2>List</hh2>

    <hp>
      Create indented lists with multiple levels of indentation and customize
      the list style type for each level.
    </hp>
    <hp checked={true} indent={1} listStyleType="todo">
      Todo 1
    </hp>

    <hp indent={1} listStyleType="disc">
      Disc 1
    </hp>
    <hp indent={2} listStyleType="disc">
      Disc 2
    </hp>
    <hp checked={false} indent={3} listStyleType="todo">
      Todo 2
    </hp>
    <hp indent={1} listStyleType="upper-roman">
      Roman 1
    </hp>
    <hp indent={2} listStyleType="decimal">
      Decimal 11
    </hp>
    <hp indent={3} listStart={2} listStyleType="decimal">
      Decimal 111
    </hp>
    <hp indent={3} listStart={2} listStyleType="decimal">
      Decimal 112
    </hp>

    {/* <hp indent={3} listStyleType="lower-latin"> */}
    {/*  7K-T */}
    {/* </hp> */}
    {/* <hp indent={3} listStyleType="lower-latin"> */}
    {/*  7K-TM */}
    {/* </hp> */}
    <hp indent={2} listStart={2} listStyleType="decimal">
      Decimal 12
    </hp>
    <hp indent={2} listStart={3} listStyleType="decimal">
      Decimal 13
    </hp>
    {/* <hp indent={2} listStyleType="decimal"> */}
    {/*  Soyuz TMA (retired) */}
    {/* </hp> */}
    {/* <hp indent={2} listStyleType="decimal"> */}
    {/*  Soyuz TMA-M (retired) */}
    {/* </hp> */}
    {/* <hp indent={2} listStyleType="decimal"> */}
    {/*  Soyuz MS */}
    {/* </hp> */}
    <hp indent={1} listStart={2} listStyleType="upper-roman">
      Roman 2
    </hp>
    <hp indent={2} listStyleType="decimal">
      Decimal 11
    </hp>
    <hp indent={2} listStart={2} listStyleType="decimal">
      Decimal 12
    </hp>
    {/* <hp indent={2} listStyleType="decimal"> */}
    {/*  Discovery */}
    {/* </hp> */}
    {/* <hp indent={2} listStyleType="decimal"> */}
    {/*  Atlantis */}
    {/* </hp> */}
    {/* <hp indent={2} listStyleType="decimal"> */}
    {/*  Endeavour */}
    {/* </hp> */}
    <hp indent={1} listStart={3} listStyleType="upper-roman">
      Roman 3
    </hp>
    <hp indent={1} listStart={4} listStyleType="upper-roman">
      Roman 4
    </hp>
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const imageValue: any = (
  <fragment>
    <hh2>Image</hh2>
    <hp>Add images by either uploading them or providing the image URL:</hp>
    <himg
      align="center"
      caption={[{ children: [{ text: 'Image caption' }] }]}
      url="https://images.unsplash.com/photo-1712688930249-98e1963af7bd?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      width="55%"
    >
      <htext />
    </himg>
    <hp>Customize image captions and resize images.</hp>
  </fragment>
);

export const mediaPlaceholderValue: any = (
  <fragment>
    <hh2>Upload</hh2>
    <hp>
      Our editor supports various media types for upload, including images,
      videos, audio, and files.
    </hp>
    <hfile
      name="sample.pdf"
      align="center"
      url="https://s26.q4cdn.com/900411403/files/doc_downloads/test.pdf"
      width="80%"
      isUpload
    >
      <htext />
    </hfile>
    <hp indent={1} listStyleType="disc">
      Real-time upload status and progress tracking
    </hp>
    <haudio
      align="center"
      url="https://samplelib.com/lib/preview/mp3/sample-3s.mp3"
      width="80%"
    >
      <htext />
    </haudio>
    <hp indent={1} listStyleType="disc">
      Configurable file size limits and batch upload settings
    </hp>
    <hvideo
      align="center"
      url="https://videos.pexels.com/video-files/6769791/6769791-uhd_2560_1440_24fps.mp4"
      width="80%"
      isUpload
    >
      <htext />
    </hvideo>
    <hp indent={1} listStyleType="disc">
      Clear error messages for any upload issues
    </hp>
    <hp indent={1} listStyleType="disc">
      Try it now - drag an image from your desktop or click the upload button in
      the toolbar
    </hp>
  </fragment>
);

export const mediaValue: any = (
  <fragment>
    {imageValue}
    {mediaPlaceholderValue}

    <hh2>Embed</hh2>
    <hp>Embed various types of content, such as videos and tweets:</hp>
    <hmediaembed
      align="center"
      url="https://www.youtube.com/watch?v=MyiBAziEWUA"
    >
      <htext />
    </hmediaembed>
    {/* BUG */}
    {/* <hmediaembed
      align="center"
      url="https://twitter.com/zbeyens/status/1677214892212776960"
    >
      <htext />
    </hmediaembed> */}
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const mentionValue: any = (
  <fragment>
    <hh2>Mention</hh2>
    <hp>
      Mention and reference other users or entities within your text using
      @-mentions.
    </hp>
    <hp>
      Try mentioning{' '}
      <hmention key="mention_id_1" value="BB-8">
        <htext />
      </hmention>{' '}
      or{' '}
      <hmention key="mention_id_2" value="Boba Fett">
        <htext />
      </hmention>
      .
    </hp>
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const createTable = (spanning?: boolean): any => (
  <fragment>
    <htable colSizes={[100, 100, 100, 100]} marginLeft={20}>
      {spanning ? (
        <htr>
          <hth colSpan={4}>
            <hp>
              <htext bold>Plugin</htext>
            </hp>
          </hth>
        </htr>
      ) : (
        <htr>
          <hth>
            <hp>
              <htext bold>Plugin</htext>
            </hp>
          </hth>
          <hth>
            <hp>
              <htext bold>Element</htext>
            </hp>
          </hth>
          <hth>
            <hp>
              <htext bold>Inline</htext>
            </hp>
          </hth>
          <hth>
            <hp>
              <htext bold>Void</htext>
            </hp>
          </hth>
        </htr>
      )}

      <htr>
        <htd>
          <hp>
            <htext bold>Heading</htext>
          </hp>
        </htd>
        <htd>
          <hp>
            <htext />
          </hp>
        </htd>
        <htd>
          <hp>
            <htext />
          </hp>
        </htd>
        <htd>
          <hp>No</hp>
        </htd>
      </htr>
      <htr>
        <htd>
          <hp>
            <htext bold>Image</htext>
          </hp>
        </htd>
        <htd>
          <hp>Yes</hp>
        </htd>
        <htd>
          <hp>No</hp>
        </htd>
        <htd>
          <hp>Yes</hp>
        </htd>
      </htr>
      <htr>
        <htd>
          <hp>
            <htext bold>Mention</htext>
          </hp>
        </htd>
        <htd>
          <hp>Yes</hp>
        </htd>
        <htd>
          <hp>Yes</hp>
        </htd>
        <htd>
          <hp>Yes</hp>
        </htd>
      </htr>
    </htable>
  </fragment>
);

export const tableValue: any = (
  <fragment>
    <hh2>Table</hh2>
    <hp>
      Create customizable tables with resizable columns and rows, allowing you
      to design structured layouts.
    </hp>
    {createTable()}
  </fragment>
);

export const tableMergeValue: any = (
  <fragment>
    <hh3>Table Merge</hh3>
    <hp>
      You can disable merging using <htext code>disableMerge: true</htext>{' '}
      option. Try it out:
    </hp>
    {createTable(true)}
  </fragment>
);

/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx } from '@platejs/test-utils';

jsx;

export const tocValue: any = (
  <fragment>
    <hh1>
      <htext>Table of Contents</htext>
    </hh1>
    <hp>
      <htext>
        The Table of Contents (TOC) feature allows you to create an
        automatically updated overview of your document's structure.
      </htext>
    </hp>
    <hp>How to use the Table of Contents:</hp>
    <hp indent={1} listStyleType="disc">
      <htext>Type "/toc" and press Enter to create the TOC.</htext>
    </hp>
    <hp indent={1} listStyleType="disc">
      <htext>
        The TOC updates automatically when you modify headings in the document.
      </htext>
    </hp>
    <htoc>
      <htext />
    </htoc>
    <hh2>Example Content</hh2>
    <hp>
      <htext>
        This is an example of content that would be reflected in the Table of
        Contents.
      </htext>
    </hp>
    <hh3>Subsection</hh3>
    <hp>
      <htext>
        Adding or modifying headings in your document will automatically update
        the TOC.
      </htext>
    </hp>
    <hh2>Benefits of Using TOC</hh2>
    <hp>
      <htext>
        A Table of Contents improves document navigation and provides a quick
        overview of your content structure.
      </htext>
    </hp>
  </fragment>
);

export const tocPlaygroundValue: any = (
  <fragment>
    <htoc>
      <htext />
    </htoc>
    <hp>
      <htext>
        Click on any heading in the table of contents to smoothly scroll to that
        section.
      </htext>
    </hp>
  </fragment>
);