indent list

udecode · Dec 12, 2024 · 12b5e82 · 12b5e82
1 parent 6030943
commit 12b5e82
Show file tree

Hide file tree

Showing 34 changed files with 514 additions and 158 deletions.
diff --git a/apps/www/src/app/(app)/dev/page.tsx b/apps/www/src/app/(app)/dev/page.tsx
@@ -1,4 +1,5 @@
 import { withProps } from '@udecode/cn';
+import { BaseAlignPlugin } from '@udecode/plate-alignment';
 import {
   BaseBoldPlugin,
   BaseCodePlugin,
@@ -16,32 +17,62 @@ import {
 } from '@udecode/plate-code-block';
 import {
   BaseParagraphPlugin,
-  PlateStatic,
+  PlateStaticLeaf,
   createSlateEditor,
 } from '@udecode/plate-common';
-import { BaseHeadingPlugin, HEADING_KEYS } from '@udecode/plate-heading';
+import {
+  BaseFontBackgroundColorPlugin,
+  BaseFontColorPlugin,
+  BaseFontSizePlugin,
+} from '@udecode/plate-font';
+import {
+  BaseHeadingPlugin,
+  HEADING_KEYS,
+  HEADING_LEVELS,
+} from '@udecode/plate-heading';
+import { BaseHighlightPlugin } from '@udecode/plate-highlight';
+import { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';
 import { serializeHtml } from '@udecode/plate-html';
 import { BaseIndentPlugin } from '@udecode/plate-indent';
+import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
+import { BaseKbdPlugin } from '@udecode/plate-kbd';
+import { BaseLineHeightPlugin } from '@udecode/plate-line-height';
 import { BaseLinkPlugin } from '@udecode/plate-link';
+import { BaseImagePlugin, BaseMediaEmbedPlugin } from '@udecode/plate-media';
 import {
   BaseTableCellHeaderPlugin,
   BaseTableCellPlugin,
   BaseTablePlugin,
   BaseTableRowPlugin,
 } from '@udecode/plate-table';
+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 { 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';
 import { indentListValue } from '@/registry/default/example/values/indent-list-value';
+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 { tableValue } from '@/registry/default/example/values/table-value';
 import { BlockquoteStaticElement } from '@/registry/default/plate-static-ui/blockquote-element';
 import { CodeBlockElementStatic } from '@/registry/default/plate-static-ui/code-block-element';
 import { CodeStaticLeaf } from '@/registry/default/plate-static-ui/code-leaf';
 import { CodeLineStaticElement } from '@/registry/default/plate-static-ui/code-line-element';
 import { CodeSyntaxStaticLeaf } from '@/registry/default/plate-static-ui/code-syntax-leaf';
 import { HeadingStaticElement } from '@/registry/default/plate-static-ui/heading-element';
-import { LinkStaticElement } from '@/registry/default/plate-static-ui/link-element';
+import { HighlightStaticLeaf } from '@/registry/default/plate-static-ui/highlight-leaf';
+import { HrStaticElement } from '@/registry/default/plate-static-ui/hr-element';
 import {
-  ParagraphStaticElement,
-  PlateStaticLeaf,
-} from '@/registry/default/plate-static-ui/paragraph-element';
+  TodoLi,
+  TodoMarker,
+} from '@/registry/default/plate-static-ui/indent-todo-marker';
+import { KbdStaticLeaf } from '@/registry/default/plate-static-ui/kbd-leaf';
+import { LinkStaticElement } from '@/registry/default/plate-static-ui/link-element';
+import { ParagraphStaticElement } from '@/registry/default/plate-static-ui/paragraph-element';
 import {
   TableCellHeaderStaticElement,
   TableCellStaticElement,
@@ -72,10 +103,52 @@ export default async function DevPage() {
           ],
         },
       }),
+      BaseIndentListPlugin.extend({
+        inject: {
+          targetPlugins: [
+            BaseParagraphPlugin.key,
+            ...HEADING_LEVELS,
+            BaseBlockquotePlugin.key,
+            BaseCodeBlockPlugin.key,
+            BaseTogglePlugin.key,
+          ],
+        },
+        options: {
+          listStyleTypes: {
+            // fire: {
+            //   liComponent: FireLiComponent,
+            //   markerComponent: FireMarker,
+            //   type: 'fire',
+            // },
+            todo: {
+              liComponent: TodoLi,
+              markerComponent: TodoMarker,
+              type: 'todo',
+            },
+          },
+        },
+      }),
       BaseLinkPlugin,
       BaseTableRowPlugin,
       BaseTablePlugin,
       BaseTableCellPlugin,
+      BaseHorizontalRulePlugin,
+      BaseFontColorPlugin,
+      BaseFontBackgroundColorPlugin,
+      BaseFontSizePlugin,
+      BaseKbdPlugin,
+      BaseAlignPlugin.extend({
+        inject: {
+          targetPlugins: [
+            BaseParagraphPlugin.key,
+            BaseMediaEmbedPlugin.key,
+            ...HEADING_LEVELS,
+            BaseImagePlugin.key,
+          ],
+        },
+      }),
+      BaseLineHeightPlugin,
+      BaseHighlightPlugin,
     ],
     staticComponents: {
       [BaseBlockquotePlugin.key]: BlockquoteStaticElement,
@@ -84,6 +157,8 @@ export default async function DevPage() {
       [BaseCodeLinePlugin.key]: CodeLineStaticElement,
       [BaseCodePlugin.key]: CodeStaticLeaf,
       [BaseCodeSyntaxPlugin.key]: CodeSyntaxStaticLeaf,
+      [BaseHighlightPlugin.key]: HighlightStaticLeaf,
+      [BaseHorizontalRulePlugin.key]: HrStaticElement,
       [BaseItalicPlugin.key]: withProps(PlateStaticLeaf, { as: 'em' }),
       [BaseLinkPlugin.key]: LinkStaticElement,
       [BaseParagraphPlugin.key]: ParagraphStaticElement,
@@ -103,22 +178,56 @@ export default async function DevPage() {
       [HEADING_KEYS.h6]: withProps(HeadingStaticElement, { variant: 'h6' }),
     },
     value: [
-      // ...basicNodesValue,
-      // ...linkValue,
-      // ...tableValue,
+      ...basicNodesValue,
+      ...linkValue,
+      ...tableValue,
+      ...horizontalRuleValue,
+      ...fontValue,
+      ...highlightValue,
+      ...kbdValue,
+      ...alignValue,
+      ...lineHeightValue,
+      ...indentValue,
       ...indentListValue,
     ],
   });
 
   // eslint-disable-next-line @typescript-eslint/await-thenable
   const html = await serializeHtml(editorStatic, {
+    components: {
+      [BaseBlockquotePlugin.key]: BlockquoteStaticElement,
+      [BaseBoldPlugin.key]: withProps(PlateStaticLeaf, { as: 'strong' }),
+      [BaseCodeBlockPlugin.key]: CodeBlockElementStatic,
+      [BaseCodeLinePlugin.key]: CodeLineStaticElement,
+      [BaseCodePlugin.key]: CodeStaticLeaf,
+      [BaseCodeSyntaxPlugin.key]: CodeSyntaxStaticLeaf,
+      [BaseHorizontalRulePlugin.key]: HrStaticElement,
+      [BaseItalicPlugin.key]: withProps(PlateStaticLeaf, { as: 'em' }),
+      [BaseKbdPlugin.key]: KbdStaticLeaf,
+      [BaseLinkPlugin.key]: LinkStaticElement,
+      [BaseParagraphPlugin.key]: ParagraphStaticElement,
+      [BaseStrikethroughPlugin.key]: withProps(PlateStaticLeaf, { as: 'del' }),
+      [BaseSubscriptPlugin.key]: withProps(PlateStaticLeaf, { as: 'sub' }),
+      [BaseSuperscriptPlugin.key]: withProps(PlateStaticLeaf, { as: 'sup' }),
+      [BaseTableCellHeaderPlugin.key]: TableCellHeaderStaticElement,
+      [BaseTableCellPlugin.key]: TableCellStaticElement,
+      [BaseTablePlugin.key]: TableStaticElement,
+      [BaseTableRowPlugin.key]: TableRowStaticElement,
+      [BaseUnderlinePlugin.key]: withProps(PlateStaticLeaf, { as: 'u' }),
+      [HEADING_KEYS.h1]: withProps(HeadingStaticElement, { variant: 'h1' }),
+      [HEADING_KEYS.h2]: withProps(HeadingStaticElement, { variant: 'h2' }),
+      [HEADING_KEYS.h3]: withProps(HeadingStaticElement, { variant: 'h3' }),
+      [HEADING_KEYS.h4]: withProps(HeadingStaticElement, { variant: 'h4' }),
+      [HEADING_KEYS.h5]: withProps(HeadingStaticElement, { variant: 'h5' }),
+      [HEADING_KEYS.h6]: withProps(HeadingStaticElement, { variant: 'h6' }),
+    },
     nodes: editorStatic.children,
   });
 
   return (
     <div className="mx-auto w-1/2">
-      <h1 className="text-xl font-bold text-green-800">Plate Static :</h1>
-      <PlateStatic editor={editorStatic} />
+      {/* <h1 className="text-xl font-bold text-green-800">Plate Static :</h1> */}
+      {/* <PlateStatic editor={editorStatic} /> */}
 
       <br />
       <br />

diff --git a/apps/www/src/registry/default/example/values/horizontal-rule-value.tsx b/apps/www/src/registry/default/example/values/horizontal-rule-value.tsx
@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { HorizontalRulePlugin } from '@udecode/plate-horizontal-rule/react';
+import { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';
 import { jsx } from '@udecode/plate-test-utils';
 
 jsx;
@@ -12,7 +12,7 @@ export const horizontalRuleValue: any = (
       Add horizontal rules to visually separate sections and content within your
       document.
     </hp>
-    <element type={HorizontalRulePlugin.key}>
+    <element type={BaseHorizontalRulePlugin.key}>
       <htext />
     </element>
   </fragment>

diff --git a/apps/www/src/registry/default/plate-static-ui/blockquote-element.tsx b/apps/www/src/registry/default/plate-static-ui/blockquote-element.tsx
@@ -2,21 +2,22 @@ import React from 'react';
 
 import type { StaticElementProps } from '@udecode/plate-common';
 
+import { PlateStaticElement } from '@udecode/plate-common';
+
 import { cn } from '../lib/utils';
-import { StaticElement } from './paragraph-element';
 
 export const BlockquoteStaticElement = ({
   children,
   className,
   ...props
 }: StaticElementProps) => {
   return (
-    <StaticElement
+    <PlateStaticElement
       as="blockquote"
       className={cn('my-1 border-l-2 pl-6 italic', className)}
       {...props}
     >
       {children}
-    </StaticElement>
+    </PlateStaticElement>
   );
 };
diff --git a/apps/www/src/registry/default/plate-static-ui/checkbox.tsx b/apps/www/src/registry/default/plate-static-ui/checkbox.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+
+import { cn } from '@udecode/cn';
+import { Check } from 'lucide-react';
+
+export function StaticCheckbox({
+  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 disabled:cursor-not-allowed disabled:opacity-50 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>
+  );
+}
diff --git a/apps/www/src/registry/default/plate-static-ui/code-block-element.tsx b/apps/www/src/registry/default/plate-static-ui/code-block-element.tsx
@@ -3,8 +3,9 @@ import React from 'react';
 import type { TCodeBlockElement } from '@udecode/plate-code-block';
 import type { StaticElementProps } from '@udecode/plate-common';
 
+import { PlateStaticElement } from '@udecode/plate-common';
+
 import { cn } from '../lib/utils';
-import { StaticElement } from './paragraph-element';
 
 export const CodeBlockElementStatic = ({
   children,
@@ -16,14 +17,14 @@ export const CodeBlockElementStatic = ({
     : '';
 
   return (
-    <StaticElement
+    <PlateStaticElement
       className={cn('relative py-1', codeClassName)}
       {...props}
       element={element}
     >
       <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>
-    </StaticElement>
+    </PlateStaticElement>
   );
 };
diff --git a/apps/www/src/registry/default/plate-static-ui/code-leaf.tsx b/apps/www/src/registry/default/plate-static-ui/code-leaf.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { StaticLeafProps } from '@udecode/plate-common';
 
-import { PlateStaticLeaf } from './paragraph-element';
+import { PlateStaticLeaf } from '@udecode/plate-common';
 
 export const CodeStaticLeaf = ({ children, ...props }: StaticLeafProps) => {
   return (

diff --git a/apps/www/src/registry/default/plate-static-ui/code-line-element.tsx b/apps/www/src/registry/default/plate-static-ui/code-line-element.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 
 import type { StaticElementProps } from '@udecode/plate-common';
 
-import { StaticElement } from './paragraph-element';
+import { PlateStaticElement } from '@udecode/plate-common';
 
 export const CodeLineStaticElement = ({
   children,
   ...props
 }: StaticElementProps) => {
-  return <StaticElement {...props}>{children}</StaticElement>;
+  return <PlateStaticElement {...props}>{children}</PlateStaticElement>;
 };
diff --git a/apps/www/src/registry/default/plate-static-ui/code-syntax-leaf.tsx b/apps/www/src/registry/default/plate-static-ui/code-syntax-leaf.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { StaticLeafProps } from '@udecode/plate-common';
 
-import { PlateStaticLeaf } from './paragraph-element';
+import { PlateStaticLeaf } from '@udecode/plate-common';
 
 export function CodeSyntaxStaticLeaf({ children, ...props }: StaticLeafProps) {
   return <PlateStaticLeaf {...props}>{children}</PlateStaticLeaf>;

diff --git a/apps/www/src/registry/default/plate-static-ui/heading-element.tsx b/apps/www/src/registry/default/plate-static-ui/heading-element.tsx
@@ -3,10 +3,9 @@ import * as React from 'react';
 import type { StaticElementProps } from '@udecode/plate-common';
 
 import { cn } from '@udecode/cn';
+import { PlateStaticElement } from '@udecode/plate-common';
 import { cva } from 'class-variance-authority';
 
-import { StaticElement } from './paragraph-element';
-
 interface HeadingElementViewProps extends StaticElementProps {
   variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
@@ -31,12 +30,12 @@ export const HeadingStaticElement = ({
   ...props
 }: HeadingElementViewProps) => {
   return (
-    <StaticElement
+    <PlateStaticElement
       as={variant}
       className={cn(className, headingVariants({ variant }))}
       {...props}
     >
       {children}
-    </StaticElement>
+    </PlateStaticElement>
   );
 };
diff --git a/apps/www/src/registry/default/plate-static-ui/highlight-leaf.tsx b/apps/www/src/registry/default/plate-static-ui/highlight-leaf.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+import type { StaticLeafProps } from '@udecode/plate-core';
+
+import { cn } from '@udecode/cn';
+import { PlateStaticLeaf } from '@udecode/plate-common';
+
+export function HighlightStaticLeaf({
+  children,
+  className,
+  ...props
+}: StaticLeafProps) {
+  return (
+    <PlateStaticLeaf
+      className={cn('bg-highlight/30 text-inherit', className)}
+      {...props}
+    >
+      <mark>{children}</mark>
+    </PlateStaticLeaf>
+  );
+}