diff --git a/apps/www/src/app/(app)/dev/page.tsx b/apps/www/src/app/(app)/dev/page.tsx
index 5d9c889ec2..875178a7a0 100644
--- a/apps/www/src/app/(app)/dev/page.tsx
+++ b/apps/www/src/app/(app)/dev/page.tsx
@@ -15,6 +15,7 @@ import {
   BaseCodeLinePlugin,
   BaseCodeSyntaxPlugin,
 } from '@udecode/plate-code-block';
+import { BaseCommentsPlugin } from '@udecode/plate-comments';
 import {
   BaseParagraphPlugin,
   PlateStatic,
@@ -22,6 +23,7 @@ import {
   createSlateEditor,
   serializePlateStatic,
 } from '@udecode/plate-common';
+import { BaseDatePlugin } from '@udecode/plate-date';
 import {
   BaseFontBackgroundColorPlugin,
   BaseFontColorPlugin,
@@ -29,6 +31,7 @@ import {
 } from '@udecode/plate-font';
 import {
   BaseHeadingPlugin,
+  BaseTocPlugin,
   HEADING_KEYS,
   HEADING_LEVELS,
 } from '@udecode/plate-heading';
@@ -46,6 +49,7 @@ import {
   BaseMediaEmbedPlugin,
   BaseVideoPlugin,
 } from '@udecode/plate-media';
+import { BaseMentionPlugin } from '@udecode/plate-mention';
 import {
   BaseTableCellHeaderPlugin,
   BaseTableCellPlugin,
@@ -55,7 +59,24 @@ import {
 import { BaseTogglePlugin } from '@udecode/plate-toggle';
 
 import { alignValue } from '@/registry/default/example/values/align-value';
-import { basicNodesValue } from '@/registry/default/example/values/basic-nodes-value';
+import { autoformatValue } from '@/registry/default/example/values/autoformat-value';
+import { basicElementsValue } from '@/registry/default/example/values/basic-elements-value';
+import { basicMarksValue } from '@/registry/default/example/values/basic-marks-value';
+import { blockMenuValue } from '@/registry/default/example/values/block-menu-value';
+import { blockSelectionValue } from '@/registry/default/example/values/block-selection-value';
+import { columnValue } from '@/registry/default/example/values/column-value';
+import { commentsValue } from '@/registry/default/example/values/comments-value';
+import { cursorOverlayValue } from '@/registry/default/example/values/cursor-overlay-value';
+import { dateValue } from '@/registry/default/example/values/date-value';
+import { deserializeCsvValue } from '@/registry/default/example/values/deserialize-csv-value';
+import { deserializeDocxValue } from '@/registry/default/example/values/deserialize-docx-value';
+import { deserializeHtmlValue } from '@/registry/default/example/values/deserialize-html-value';
+import { deserializeMdValue } from '@/registry/default/example/values/deserialize-md-value';
+import { emojiValue } from '@/registry/default/example/values/emoji-value';
+import {
+  exitBreakValue,
+  trailingBlockValue,
+} from '@/registry/default/example/values/exit-break-value';
 import { fontValue } from '@/registry/default/example/values/font-value';
 import { highlightValue } from '@/registry/default/example/values/highlight-value';
 import { horizontalRuleValue } from '@/registry/default/example/values/horizontal-rule-value';
@@ -64,16 +85,21 @@ import { indentValue } from '@/registry/default/example/values/indent-value';
 import { kbdValue } from '@/registry/default/example/values/kbd-value';
 import { lineHeightValue } from '@/registry/default/example/values/line-height-value';
 import { linkValue } from '@/registry/default/example/values/link-value';
+import { todoListValue } from '@/registry/default/example/values/list-value';
 import { mediaValue } from '@/registry/default/example/values/media-value';
-import {
-  tableMergeValue,
-  tableValue,
-} from '@/registry/default/example/values/table-value';
+import { mentionValue } from '@/registry/default/example/values/mention-value';
+import { slashCommandValue } from '@/registry/default/example/values/slash-command-value';
+import { softBreakValue } from '@/registry/default/example/values/soft-break-value';
+import { tableValue } from '@/registry/default/example/values/table-value';
+import { tocPlaygroundValue } from '@/registry/default/example/values/toc-value';
+import { toggleValue } from '@/registry/default/example/values/toggle-value';
 import { BlockquoteElementStatic } from '@/registry/default/plate-ui/blockquote-element-static';
 import { CodeBlockElementStatic } from '@/registry/default/plate-ui/code-block-element-static';
 import { CodeLeafStatic } from '@/registry/default/plate-ui/code-leaf-static';
 import { CodeLineElementStatic } from '@/registry/default/plate-ui/code-line-element-static';
 import { CodeSyntaxLeafStatic } from '@/registry/default/plate-ui/code-syntax-leaf-static';
+import { CommentLeafStatic } from '@/registry/default/plate-ui/comment-leaf-static';
+import { DateElementStatic } from '@/registry/default/plate-ui/date-element-static';
 import { HeadingElementStatic } from '@/registry/default/plate-ui/heading-element-static';
 import { HrElementStatic } from '@/registry/default/plate-ui/hr-element-static';
 import { ImageElementStatic } from '@/registry/default/plate-ui/image-element-static';
@@ -90,6 +116,7 @@ import { LinkElementStatic } from '@/registry/default/plate-ui/link-element-stat
 import { MediaAudioElementStatic } from '@/registry/default/plate-ui/media-audio-element-static';
 import { MediaFileElementStatic } from '@/registry/default/plate-ui/media-file-element-static';
 import { MediaVideoElementStatic } from '@/registry/default/plate-ui/media-video-element-static';
+import { MentionElementStatic } from '@/registry/default/plate-ui/mention-element-static';
 import { ParagraphElementStatic } from '@/registry/default/plate-ui/paragraph-element-static';
 import {
   TableCellElementStatic,
@@ -97,6 +124,8 @@ import {
 } from '@/registry/default/plate-ui/table-cell-element-static';
 import { TableElementStatic } from '@/registry/default/plate-ui/table-element-static';
 import { TableRowElementStatic } from '@/registry/default/plate-ui/table-row-element-static';
+import { TocElementStatic } from '@/registry/default/plate-ui/toc-element-static';
+import { ToggleElementStatic } from '@/registry/default/plate-ui/toggle-element-static';
 
 export default async function DevPage() {
   const staticComponents = {
@@ -107,12 +136,15 @@ export default async function DevPage() {
     [BaseCodeLinePlugin.key]: CodeLineElementStatic,
     [BaseCodePlugin.key]: CodeLeafStatic,
     [BaseCodeSyntaxPlugin.key]: CodeSyntaxLeafStatic,
+    [BaseCommentsPlugin.key]: CommentLeafStatic,
+    [BaseDatePlugin.key]: DateElementStatic,
     [BaseFilePlugin.key]: MediaFileElementStatic,
     [BaseHorizontalRulePlugin.key]: HrElementStatic,
     [BaseImagePlugin.key]: ImageElementStatic,
     [BaseItalicPlugin.key]: withProps(PlateStaticLeaf, { as: 'em' }),
     [BaseKbdPlugin.key]: KbdLeafStatic,
     [BaseLinkPlugin.key]: LinkElementStatic,
+    [BaseMentionPlugin.key]: MentionElementStatic,
     [BaseParagraphPlugin.key]: ParagraphElementStatic,
     [BaseStrikethroughPlugin.key]: withProps(PlateStaticLeaf, { as: 'del' }),
     [BaseSubscriptPlugin.key]: withProps(PlateStaticLeaf, { as: 'sub' }),
@@ -121,6 +153,8 @@ export default async function DevPage() {
     [BaseTableCellPlugin.key]: TableCellElementStatic,
     [BaseTablePlugin.key]: TableElementStatic,
     [BaseTableRowPlugin.key]: TableRowElementStatic,
+    [BaseTocPlugin.key]: TocElementStatic,
+    [BaseTogglePlugin.key]: ToggleElementStatic,
     [BaseUnderlinePlugin.key]: withProps(PlateStaticLeaf, { as: 'u' }),
     [BaseVideoPlugin.key]: MediaVideoElementStatic,
     [HEADING_KEYS.h1]: withProps(HeadingElementStatic, { variant: 'h1' }),
@@ -133,6 +167,7 @@ export default async function DevPage() {
 
   const editorStatic = createSlateEditor({
     plugins: [
+      BaseTocPlugin,
       BaseVideoPlugin,
       BaseAudioPlugin,
       BaseParagraphPlugin,
@@ -146,6 +181,7 @@ export default async function DevPage() {
       BaseSuperscriptPlugin,
       BaseUnderlinePlugin,
       BaseBlockquotePlugin,
+      BaseDatePlugin,
       BaseCodeBlockPlugin,
       BaseIndentPlugin.extend({
         inject: {
@@ -204,22 +240,44 @@ export default async function DevPage() {
       BaseHighlightPlugin,
       BaseFilePlugin,
       BaseImagePlugin,
+      BaseMentionPlugin,
+      BaseCommentsPlugin,
+      BaseTogglePlugin,
     ],
     value: [
-      ...basicNodesValue,
+      ...tocPlaygroundValue,
+      ...basicElementsValue,
+      ...basicMarksValue,
+      ...todoListValue,
       ...linkValue,
-      ...tableValue,
       ...horizontalRuleValue,
+      ...tableValue,
+      ...mediaValue,
+      ...columnValue,
+      ...mentionValue,
+      ...dateValue,
+      ...emojiValue,
       ...fontValue,
       ...highlightValue,
       ...kbdValue,
+      ...commentsValue,
       ...alignValue,
       ...lineHeightValue,
       ...indentValue,
       ...indentListValue,
-      ...mediaValue,
-      ...alignValue,
-      ...tableMergeValue,
+      ...toggleValue,
+      ...slashCommandValue,
+      ...blockSelectionValue,
+      ...blockMenuValue,
+      ...autoformatValue,
+      ...softBreakValue,
+      ...exitBreakValue,
+      ...cursorOverlayValue,
+      ...trailingBlockValue,
+      ...deserializeHtmlValue,
+      ...deserializeMdValue,
+      ...deserializeDocxValue,
+      ...deserializeCsvValue,
     ],
   });
 
@@ -232,8 +290,14 @@ export default async function DevPage() {
 
       <br />
       <br />
-      <h1 className="text-xl font-bold text-green-800">HTML :</h1>
-      <div dangerouslySetInnerHTML={{ __html: html }} />
+
+      {/* <h1 className="text-xl font-bold text-green-800">HTML :</h1> */}
+      {/* <iframe
+        style={{ height: '500px', width: '100%' }}
+        title="Plate Static"
+        frameBorder="0"
+        src={`data:text/html;charset=utf-8,${html}`}
+      /> */}
     </div>
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/comment-leaf-static.tsx b/apps/www/src/registry/default/plate-ui/comment-leaf-static.tsx
new file mode 100644
index 0000000000..ec209cc63b
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/comment-leaf-static.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import type { TCommentText } from '@udecode/plate-comments';
+import type { StaticLeafProps } from '@udecode/plate-common';
+
+import { cn } from '@udecode/cn';
+import { PlateStaticLeaf } from '@udecode/plate-common';
+
+export function CommentLeafStatic({
+  children,
+  className,
+  ...props
+}: StaticLeafProps<TCommentText>) {
+  return (
+    <PlateStaticLeaf
+      className={cn(
+        'border-b-2 border-b-highlight/35 bg-highlight/15',
+        className
+      )}
+      {...props}
+    >
+      <>{children}</>
+    </PlateStaticLeaf>
+  );
+}
diff --git a/apps/www/src/registry/default/plate-ui/date-element-static.tsx b/apps/www/src/registry/default/plate-ui/date-element-static.tsx
new file mode 100644
index 0000000000..46639f92fe
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/date-element-static.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import type { StaticElementProps } from '@udecode/plate-common';
+
+import { cn } from '@udecode/cn';
+import { PlateStaticElement } from '@udecode/plate-common';
+
+export function DateElementStatic({
+  children,
+  className,
+  element,
+  ...props
+}: StaticElementProps) {
+  return (
+    <PlateStaticElement
+      className={cn('inline-block', className)}
+      element={element}
+      {...props}
+    >
+      <span
+        className={cn('w-fit rounded-sm bg-muted px-1 text-muted-foreground')}
+      >
+        {element.date ? (
+          (() => {
+            const today = new Date();
+            const elementDate = new Date(element.date as string);
+            const isToday =
+              elementDate.getDate() === today.getDate() &&
+              elementDate.getMonth() === today.getMonth() &&
+              elementDate.getFullYear() === today.getFullYear();
+
+            const isYesterday =
+              new Date(today.setDate(today.getDate() - 1)).toDateString() ===
+              elementDate.toDateString();
+            const isTomorrow =
+              new Date(today.setDate(today.getDate() + 2)).toDateString() ===
+              elementDate.toDateString();
+
+            if (isToday) return 'Today';
+            if (isYesterday) return 'Yesterday';
+            if (isTomorrow) return 'Tomorrow';
+
+            return elementDate.toLocaleDateString(undefined, {
+              day: 'numeric',
+              month: 'long',
+              year: 'numeric',
+            });
+          })()
+        ) : (
+          <span>Pick a date</span>
+        )}
+      </span>
+      {children}
+    </PlateStaticElement>
+  );
+}
diff --git a/apps/www/src/registry/default/plate-ui/mention-element-static.tsx b/apps/www/src/registry/default/plate-ui/mention-element-static.tsx
new file mode 100644
index 0000000000..88ac8bf97f
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/mention-element-static.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+import type { StaticElementProps } from '@udecode/plate-common';
+import type { TMentionElement } from '@udecode/plate-mention';
+
+import { cn } from '@udecode/cn';
+import { IS_APPLE, PlateStaticElement } from '@udecode/plate-common';
+
+export function MentionElementStatic({
+  children,
+  className,
+  element,
+  prefix,
+  renderLabel,
+  ...props
+}: StaticElementProps & {
+  prefix?: string;
+  renderLabel?: (mentionable: TMentionElement) => string;
+}) {
+  return (
+    <PlateStaticElement
+      className={cn(
+        'inline-block cursor-pointer rounded-md bg-muted px-1.5 py-0.5 align-baseline text-sm font-medium',
+        element.children[0].bold === true && 'font-bold',
+        element.children[0].italic === true && 'italic',
+        element.children[0].underline === true && 'underline',
+        className
+      )}
+      data-slate-value={element.value}
+      element={element}
+      {...props}
+    >
+      {IS_APPLE ? (
+        // Mac OS IME https://github.com/ianstormtaylor/slate/issues/3490
+        <React.Fragment>
+          {children}
+          {prefix}
+          {renderLabel
+            ? renderLabel(element as TMentionElement)
+            : element.value}
+        </React.Fragment>
+      ) : (
+        // Others like Android https://github.com/ianstormtaylor/slate/pull/5360
+        <React.Fragment>
+          {prefix}
+          {renderLabel
+            ? renderLabel(element as TMentionElement)
+            : element.value}
+          {children}
+        </React.Fragment>
+      )}
+    </PlateStaticElement>
+  );
+}
diff --git a/apps/www/src/registry/default/plate-ui/toc-element-static.tsx b/apps/www/src/registry/default/plate-ui/toc-element-static.tsx
new file mode 100644
index 0000000000..083d9757a3
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/toc-element-static.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+
+import type {
+  SlateEditor,
+  StaticElementProps,
+  TElement,
+} from '@udecode/plate-common';
+
+import { cn } from '@udecode/cn';
+import {
+  PlateStaticElement,
+  getNodeEntries,
+  getNodeString,
+} from '@udecode/plate-common';
+import {
+  type Heading,
+  BaseTocPlugin,
+  HEADING_KEYS,
+  isHeading,
+} from '@udecode/plate-heading';
+import { cva } from 'class-variance-authority';
+
+import { Button } from './button';
+
+const headingItemVariants = cva(
+  'block h-auto w-full cursor-pointer truncate rounded-none px-0.5 py-1.5 text-left font-medium text-muted-foreground underline decoration-[0.5px] underline-offset-4 hover:bg-accent hover:text-muted-foreground',
+  {
+    variants: {
+      depth: {
+        1: 'pl-0.5',
+        2: 'pl-[26px]',
+        3: 'pl-[50px]',
+      },
+    },
+  }
+);
+
+export function TocElementStatic({
+  children,
+  className,
+  editor,
+  element,
+  ...props
+}: StaticElementProps) {
+  const headingList = getHeadingList(editor);
+
+  return (
+    <PlateStaticElement
+      className={cn('relative mb-1 p-0', className)}
+      editor={editor}
+      element={element}
+      {...props}
+    >
+      <div>
+        {headingList.length > 0 ? (
+          headingList.map((item) => (
+            <Button
+              key={item.title}
+              variant="ghost"
+              className={cn(headingItemVariants({ depth: item.depth as any }))}
+            >
+              {item.title}
+            </Button>
+          ))
+        ) : (
+          <div className="text-sm text-gray-500">
+            Create a heading to display the table of contents.
+          </div>
+        )}
+      </div>
+      {children}
+    </PlateStaticElement>
+  );
+}
+
+const headingDepth: Record<string, number> = {
+  [HEADING_KEYS.h1]: 1,
+  [HEADING_KEYS.h2]: 2,
+  [HEADING_KEYS.h3]: 3,
+  [HEADING_KEYS.h4]: 4,
+  [HEADING_KEYS.h5]: 5,
+  [HEADING_KEYS.h6]: 6,
+};
+
+const getHeadingList = (editor?: SlateEditor) => {
+  if (!editor) return [];
+
+  const options = editor.getOptions(BaseTocPlugin);
+
+  if (options.queryHeading) {
+    return options.queryHeading(editor);
+  }
+
+  const headingList: Heading[] = [];
+
+  const values = getNodeEntries(editor, {
+    at: [],
+    match: (n) => isHeading(n),
+  });
+
+  if (!values) return [];
+
+  Array.from(values, ([node, path]) => {
+    const { type } = node as TElement;
+    const title = getNodeString(node);
+    const depth = headingDepth[type];
+    const id = node.id;
+    title && headingList.push({ id, depth, path, title, type });
+  });
+
+  return headingList;
+};
diff --git a/apps/www/src/registry/default/plate-ui/toggle-element-static.tsx b/apps/www/src/registry/default/plate-ui/toggle-element-static.tsx
new file mode 100644
index 0000000000..fc9320e942
--- /dev/null
+++ b/apps/www/src/registry/default/plate-ui/toggle-element-static.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import type { StaticElementProps } from '@udecode/plate-common';
+
+import { cn } from '@udecode/cn';
+import { PlateStaticElement } from '@udecode/plate-common';
+import { ChevronRight } from 'lucide-react';
+
+export function ToggleElementStatic({
+  children,
+  className,
+  element,
+  ...props
+}: StaticElementProps) {
+  return (
+    <PlateStaticElement
+      className={cn('relative pl-6', className)}
+      element={element}
+      {...props}
+    >
+      <div
+        className="absolute -left-0.5 top-0 size-6 cursor-pointer select-none items-center justify-center rounded-md p-px text-muted-foreground transition-colors hover:bg-accent [&_svg]:size-4"
+        contentEditable={false}
+      >
+        <ChevronRight
+          className={cn('transition-transform duration-75', 'rotate-0')}
+        />
+      </div>
+      {children}
+    </PlateStaticElement>
+  );
+}