sync

templates/plate-playground-template/package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toolbar": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.3",
+    "@udecode/cmdk": "^0.1.1",
     "@udecode/cn": "^39.0.0",
     "@udecode/plate-ai": "40.2.2",
     "@udecode/plate-alignment": "^40.0.0",

templates/plate-playground-template/src/components/editor/transforms.ts

@@ -25,6 +25,7 @@ import { TocPlugin } from '@udecode/plate-heading/react';
 import { INDENT_LIST_KEYS, ListStyleType } from '@udecode/plate-indent-list';
 import { IndentListPlugin } from '@udecode/plate-indent-list/react';
 import { insertColumnGroup, toggleColumnGroup } from '@udecode/plate-layout';
+import { ColumnItemPlugin, ColumnPlugin } from '@udecode/plate-layout/react';
 import { LinkPlugin, triggerFloatingLink } from '@udecode/plate-link/react';
 import { insertEquation, insertInlineEquation } from '@udecode/plate-math';
 import {
@@ -44,9 +45,22 @@ import {
   MediaEmbedPlugin,
   VideoPlugin,
 } from '@udecode/plate-media/react';
-import { TablePlugin, insertTable } from '@udecode/plate-table/react';
+import { insertTable } from '@udecode/plate-table';
+import {
+  TableCellPlugin,
+  TablePlugin,
+  TableRowPlugin,
+} from '@udecode/plate-table/react';
 import { Path } from 'slate';
 
+export const STRUCTURAL_TYPES = [
+  ColumnPlugin.key,
+  ColumnItemPlugin.key,
+  TablePlugin.key,
+  TableRowPlugin.key,
+  TableCellPlugin.key,
+];
+
 const ACTION_THREE_COLUMNS = 'action_three_columns';
 
 const insertList = (editor: PlateEditor, type: string) => {
@@ -185,7 +199,7 @@ export const setBlockType = (
       }
     }
 
-    const entries = getBlocks(editor);
+    const entries = getBlocks(editor, { mode: 'lowest' });
 
     entries.forEach((entry) => setEntry(entry));
   });

templates/plate-playground-template/src/components/plate-ui/ai-leaf.tsx

@@ -11,9 +11,9 @@ export const AILeaf = withRef<typeof PlateLeaf>(
       <PlateLeaf
         ref={ref}
         className={cn(
+          className,
           'border-b-2 border-b-purple-100 bg-purple-50 text-purple-800',
-          'transition-all duration-200 ease-in-out',
-          className
+          'transition-all duration-200 ease-in-out'
         )}
         {...props}
       >

templates/plate-playground-template/src/components/plate-ui/blockquote-element-static.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import type { SlateElementProps } from '@udecode/plate-common';
+
+import { cn } from '@udecode/cn';
+import { SlateElement } from '@udecode/plate-common';
+
+export const BlockquoteElementStatic = ({
+  children,
+  className,
+  ...props
+}: SlateElementProps) => {
+  return (
+    <SlateElement
+      as="blockquote"
+      className={cn(className, 'my-1 border-l-2 pl-6 italic')}
+      {...props}
+    >
+      {children}
+    </SlateElement>
+  );
+};

templates/plate-playground-template/src/components/plate-ui/blockquote-element.tsx

@@ -12,7 +12,7 @@ export const BlockquoteElement = withRef<typeof PlateElement>(
       <PlateElement
         ref={ref}
         as="blockquote"
-        className={cn('my-1 border-l-2 pl-6 italic', className)}
+        className={cn(className, 'my-1 border-l-2 pl-6 italic')}
         {...props}
       >
         {children}

templates/plate-playground-template/src/components/plate-ui/checkbox-static.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { cn } from '@udecode/cn';
+import { Check } from 'lucide-react';
+
+export function CheckboxStatic({
+  className,
+  ...props
+}: {
+  checked: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <button
+      className={cn(
+        'peer size-4 shrink-0 rounded-sm border border-primary bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        className
+      )}
+      data-state={props.checked ? 'checked' : 'unchecked'}
+      type="button"
+      {...props}
+    >
+      <div className={cn('flex items-center justify-center text-current')}>
+        {props.checked && <Check className="size-4" />}
+      </div>
+    </button>
+  );
+}

templates/plate-playground-template/src/components/plate-ui/code-block-element-static.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import type { TCodeBlockElement } from '@udecode/plate-code-block';
+import type { SlateElementProps } from '@udecode/plate-common';
+
+import { cn } from '@udecode/cn';
+import { SlateElement } from '@udecode/plate-common';
+
+export const CodeBlockElementStatic = ({
+  children,
+  className,
+  ...props
+}: SlateElementProps<TCodeBlockElement>) => {
+  const { element } = props;
+
+  const codeClassName = element?.lang
+    ? `${element.lang} language-${element.lang}`
+    : '';
+
+  return (
+    <SlateElement
+      className={cn(className, 'relative py-1', codeClassName)}
+      {...props}
+    >
+      <pre className="overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]">
+        <code>{children}</code>
+      </pre>
+    </SlateElement>
+  );
+};

templates/plate-playground-template/src/components/plate-ui/code-block-element.tsx

@@ -13,12 +13,13 @@ import './code-block-element.css';
 export const CodeBlockElement = withRef<typeof PlateElement>(
   ({ children, className, ...props }, ref) => {
     const { element } = props;
+
     const state = useCodeBlockElementState({ element });
 
     return (
       <PlateElement
         ref={ref}
-        className={cn('relative py-1', state.className, className)}
+        className={cn(className, 'relative py-1', state.className)}
         {...props}
       >
         <pre className="overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]">

templates/plate-playground-template/src/components/plate-ui/code-leaf-static.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import type { SlateLeafProps } from '@udecode/plate-common';
+
+import { cn } from '@udecode/cn';
+import { SlateLeaf } from '@udecode/plate-common';
+
+export const CodeLeafStatic = ({
+  children,
+  className,
+  ...props
+}: SlateLeafProps) => {
+  return (
+    <SlateLeaf
+      as="code"
+      className={cn(
+        className,
+        'whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm'
+      )}
+      {...props}
+    >
+      {children}
+    </SlateLeaf>
+  );
+};

templates/plate-playground-template/src/components/plate-ui/code-leaf.tsx

@@ -10,14 +10,14 @@ export const CodeLeaf = withRef<typeof PlateLeaf>(
     return (
       <PlateLeaf
         ref={ref}
-        asChild
+        as="code"
         className={cn(
-          'whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm',
-          className
+          className,
+          'whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm'
         )}
         {...props}
       >
-        <code>{children}</code>
+        {children}
       </PlateLeaf>
     );
   }

templates/plate-playground-template/src/components/plate-ui/code-line-element-static.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import type { SlateElementProps } from '@udecode/plate-common';
+
+import { SlateElement } from '@udecode/plate-common';
+
+export const CodeLineElementStatic = ({
+  children,
+  ...props
+}: SlateElementProps) => {
+  return <SlateElement {...props}>{children}</SlateElement>;
+};

templates/plate-playground-template/src/components/plate-ui/code-syntax-leaf-static.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import type { SlateLeafProps } from '@udecode/plate-common';
+
+import { cn } from '@udecode/cn';
+import { SlateLeaf } from '@udecode/plate-common';
+
+export function CodeSyntaxLeafStatic({
+  children,
+  className,
+  ...props
+}: SlateLeafProps) {
+  const syntaxClassName = `prism-token token ${props.leaf.tokenType}`;
+
+  return (
+    <SlateLeaf className={cn(className, syntaxClassName)} {...props}>
+      {children}
+    </SlateLeaf>
+  );
+}

templates/plate-playground-template/src/components/plate-ui/column-element-static.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import type { SlateElementProps } from '@udecode/plate-common';
+import type { TColumnElement } from '@udecode/plate-layout';
+
+import { cn } from '@udecode/cn';
+import { SlateElement } from '@udecode/plate-common';
+
+export function ColumnElementStatic({
+  children,
+  className,
+  ...props
+}: SlateElementProps) {
+  const { width } = props.element as TColumnElement;
+
+  return (
+    <SlateElement
+      className={cn(className, 'border border-transparent p-1.5')}
+      style={{ width: width ?? '100%' }}
+      {...props}
+    >
+      {children}
+    </SlateElement>
+  );
+}