ci

apps/www/public/r/styles/default/blockquote-element.json

@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const BlockquoteElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"blockquote\"\n        className={cn('my-1 border-l-2 pl-6 italic', className)}\n        {...props}\n      >\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const BlockquoteElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"blockquote\"\n        className={cn('my-1 border-l-2 pl-6 italic', className)}\n        {...props}\n      >\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/blockquote-element.tsx",
       "target": "components/plate-ui/blockquote-element.tsx",
       "type": "registry:ui"

apps/www/public/r/styles/default/code-block-element.json

@@ -19,7 +19,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\nimport { PlateElement } from './plate-element';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const { element } = props;\n\n    const state = useCodeBlockElementState({ element });\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('relative py-1', state.className, className)}\n        {...props}\n      >\n        <pre className=\"overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]\">\n          <code>{children}</code>\n        </pre>\n\n        {state.syntax && (\n          <div\n            className=\"absolute right-2 top-2 z-10 select-none\"\n            contentEditable={false}\n          >\n            <CodeBlockCombobox />\n          </div>\n        )}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\nimport { PlateElement } from './plate-element';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const { element } = props;\n\n    const state = useCodeBlockElementState({ element });\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('relative py-1', state.className, className)}\n        {...props}\n      >\n        <pre className=\"overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]\">\n          <code>{children}</code>\n        </pre>\n\n        {state.syntax && (\n          <div\n            className=\"absolute right-2 top-2 z-10 select-none\"\n            contentEditable={false}\n          >\n            <CodeBlockCombobox />\n          </div>\n        )}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/code-block-element.tsx",
       "target": "components/plate-ui/code-block-element.tsx",
       "type": "registry:ui"

apps/www/public/r/styles/default/code-leaf.json

@@ -16,7 +16,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const CodeLeaf = withRef<typeof PlateLeaf>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateLeaf\n        ref={ref}\n        asChild\n        className={cn(\n          'whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm',\n          className\n        )}\n        {...props}\n      >\n        <code>{children}</code>\n      </PlateLeaf>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const CodeLeaf = withRef<typeof PlateLeaf>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateLeaf\n        ref={ref}\n        asChild\n        className={cn(\n          'whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm',\n          className\n        )}\n        {...props}\n      >\n        <code>{children}</code>\n      </PlateLeaf>\n    );\n  }\n);\n",
       "path": "plate-ui/code-leaf.tsx",
       "target": "components/plate-ui/code-leaf.tsx",
       "type": "registry:ui"

apps/www/public/r/styles/default/code-line-element.json

@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const CodeLineElement = withRef<typeof PlateElement>((props, ref) => (\n  <PlateElement ref={ref} {...props} />\n));\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const CodeLineElement = withRef<typeof PlateElement>((props, ref) => (\n  <PlateElement ref={ref} {...props} />\n));\n",
       "path": "plate-ui/code-line-element.tsx",
       "target": "components/plate-ui/code-line-element.tsx",
       "type": "registry:ui"

apps/www/public/r/styles/default/excalidraw-element.json

@@ -12,7 +12,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useExcalidrawElement } from '@udecode/plate-excalidraw/react';\n\nimport { PlateElement } from './plate-element';\n\nexport const ExcalidrawElement = withRef<typeof PlateElement>(\n  ({ nodeProps, ...props }, ref) => {\n    const { children, element } = props;\n\n    const { Excalidraw, excalidrawProps } = useExcalidrawElement({\n      element,\n    });\n\n    return (\n      <PlateElement ref={ref} {...props}>\n        <div contentEditable={false}>\n          <div className=\"mx-auto aspect-video h-[600px] w-[min(100%,600px)] overflow-hidden rounded-sm border\">\n            {Excalidraw && (\n              <Excalidraw {...nodeProps} {...(excalidrawProps as any)} />\n            )}\n          </div>\n        </div>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useExcalidrawElement } from '@udecode/plate-excalidraw/react';\n\nimport { PlateElement } from './plate-element';\n\nexport const ExcalidrawElement = withRef<typeof PlateElement>(\n  ({ nodeProps, ...props }, ref) => {\n    const { children, element } = props;\n\n    const { Excalidraw, excalidrawProps } = useExcalidrawElement({\n      element,\n    });\n\n    return (\n      <PlateElement ref={ref} {...props}>\n        <div contentEditable={false}>\n          <div className=\"mx-auto aspect-video h-[600px] w-[min(100%,600px)] overflow-hidden rounded-sm border\">\n            {Excalidraw && (\n              <Excalidraw {...nodeProps} {...(excalidrawProps as any)} />\n            )}\n          </div>\n        </div>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/excalidraw-element.tsx",
       "target": "components/plate-ui/excalidraw-element.tsx",
       "type": "registry:ui"

apps/www/public/r/styles/default/indent-fire-marker.json

@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "import type { PlateRenderElementProps } from '@udecode/plate-common/react';\nimport type { TIndentElement } from '@udecode/plate-indent';\n\nexport const FireMarker = (\n  props: Omit<PlateRenderElementProps, 'children'>\n) => {\n  const { element } = props;\n\n  return (\n    <div contentEditable={false}>\n      <span style={{ left: -26, position: 'absolute', top: -1 }}>\n        {(element as TIndentElement).indent % 2 === 0 ? '🔥' : '🚀'}\n      </span>\n    </div>\n  );\n};\n\nexport const FireLiComponent = (props: PlateRenderElementProps) => {\n  const { children } = props;\n\n  return <span>{children}</span>;\n};\n",
+      "content": "import type { PlateRenderElementStaticProps } from '@udecode/plate-common';\nimport type { TIndentElement } from '@udecode/plate-indent';\n\nexport const FireMarker = (\n  props: Omit<PlateRenderElementStaticProps, 'children'>\n) => {\n  const { element } = props;\n\n  return (\n    <div contentEditable={false}>\n      <span style={{ left: -26, position: 'absolute', top: -1 }}>\n        {(element as TIndentElement).indent % 2 === 0 ? '🔥' : '🚀'}\n      </span>\n    </div>\n  );\n};\n\nexport const FireLiComponent = (props: PlateRenderElementStaticProps) => {\n  const { children } = props;\n\n  return <span>{children}</span>;\n};\n",
       "path": "plate-ui/indent-fire-marker.tsx",
       "target": "components/plate-ui/indent-fire-marker.tsx",
       "type": "registry:ui"

apps/www/public/r/styles/default/indent-todo-marker.json

@@ -18,7 +18,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport type { PlateRenderElementProps } from '@udecode/plate-common/react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  useIndentTodoListElement,\n  useIndentTodoListElementState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoMarker = ({\n  element,\n}: Omit<PlateRenderElementProps, 'children'>) => {\n  const state = useIndentTodoListElementState({ element });\n  const { checkboxProps } = useIndentTodoListElement(state);\n\n  return (\n    <div contentEditable={false}>\n      <Checkbox\n        style={{ left: -24, position: 'absolute', top: 4 }}\n        {...checkboxProps}\n      />\n    </div>\n  );\n};\n\nexport const TodoLi = (props: PlateRenderElementProps) => {\n  const { children, element } = props;\n\n  return (\n    <span\n      className={cn(\n        (element.checked as boolean) && 'text-muted-foreground line-through'\n      )}\n    >\n      {children}\n    </span>\n  );\n};\n",
+      "content": "'use client';\n\nimport type { PlateRenderElementStaticProps } from '@udecode/plate-common';\n\nimport { cn } from '@udecode/cn';\nimport {\n  useIndentTodoListElement,\n  useIndentTodoListElementState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoMarker = ({\n  element,\n}: Omit<PlateRenderElementStaticProps, 'children'>) => {\n  const state = useIndentTodoListElementState({ element });\n  const { checkboxProps } = useIndentTodoListElement(state);\n\n  return (\n    <div contentEditable={false}>\n      <Checkbox\n        style={{ left: -24, position: 'absolute', top: 4 }}\n        {...checkboxProps}\n      />\n    </div>\n  );\n};\n\nexport const TodoLi = (props: PlateRenderElementStaticProps) => {\n  const { children, element } = props;\n\n  return (\n    <span\n      className={cn(\n        (element.checked as boolean) && 'text-muted-foreground line-through'\n      )}\n    >\n      {children}\n    </span>\n  );\n};\n",
       "path": "plate-ui/indent-todo-marker.tsx",
       "target": "components/plate-ui/indent-todo-marker.tsx",
       "type": "registry:ui"

apps/www/public/r/styles/default/more-dropdown-menu.json

@@ -18,7 +18,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  SubscriptPlugin,\n  SuperscriptPlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { collapseSelection } from '@udecode/plate-common';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport {\n  KeyboardIcon,\n  MoreHorizontalIcon,\n  SubscriptIcon,\n  SuperscriptIcon,\n} from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Insert\">\n          <MoreHorizontalIcon />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto\"\n        align=\"start\"\n      >\n        <DropdownMenuGroup>\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({ key: KbdPlugin.key });\n              collapseSelection(editor, { edge: 'end' });\n              focusEditor(editor);\n            }}\n          >\n            <KeyboardIcon />\n            Keyboard input\n          </DropdownMenuItem>\n\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({\n                key: SuperscriptPlugin.key,\n                clear: [SubscriptPlugin.key, SuperscriptPlugin.key],\n              });\n              focusEditor(editor);\n            }}\n          >\n            <SuperscriptIcon />\n            Superscript\n            {/* (⌘+,) */}\n          </DropdownMenuItem>\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({\n                key: SubscriptPlugin.key,\n                clear: [SuperscriptPlugin.key, SubscriptPlugin.key],\n              });\n              focusEditor(editor);\n            }}\n          >\n            <SubscriptIcon />\n            Subscript\n            {/* (⌘+.) */}\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  SubscriptPlugin,\n  SuperscriptPlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { collapseSelection } from '@udecode/plate-common';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport {\n  KeyboardIcon,\n  MoreHorizontalIcon,\n  SubscriptIcon,\n  SuperscriptIcon,\n} from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Insert\">\n          <MoreHorizontalIcon />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto\"\n        align=\"start\"\n      >\n        <DropdownMenuGroup>\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({ key: KbdPlugin.key });\n              collapseSelection(editor, { edge: 'end' });\n              focusEditor(editor);\n            }}\n          >\n            <KeyboardIcon />\n            Keyboard input\n          </DropdownMenuItem>\n\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({\n                key: SuperscriptPlugin.key,\n                clear: [SubscriptPlugin.key, SuperscriptPlugin.key],\n              });\n              focusEditor(editor);\n            }}\n          >\n            <SuperscriptIcon />\n            Superscript\n            {/* (⌘+,) */}\n          </DropdownMenuItem>\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({\n                key: SubscriptPlugin.key,\n                clear: [SuperscriptPlugin.key, SubscriptPlugin.key],\n              });\n              focusEditor(editor);\n            }}\n          >\n            <SubscriptIcon />\n            Subscript\n            {/* (⌘+.) */}\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/more-dropdown-menu.tsx",
       "target": "components/plate-ui/more-dropdown-menu.tsx",
       "type": "registry:ui"

apps/www/src/app/(app)/dev/page.tsx

@@ -291,8 +291,8 @@ export default function DevPage() {
   return (
     <PlateStatic
       variant="demo"
+      components={staticComponents}
       editor={editorStatic}
-      staticComponents={staticComponents}
     />
   );
 }

apps/www/src/registry/default/plate-ui/code-syntax-leaf-static.tsx

@@ -4,6 +4,9 @@ import type { PlateLeafStaticProps } from '@udecode/plate-common';
 
 import { PlateLeafStatic } from '@udecode/plate-common';
 
-export function CodeSyntaxLeafStatic({ children, ...props }: PlateLeafStaticProps) {
+export function CodeSyntaxLeafStatic({
+  children,
+  ...props
+}: PlateLeafStaticProps) {
   return <PlateLeafStatic {...props}>{children}</PlateLeafStatic>;
 }

apps/www/src/registry/default/plate-ui/editor-static.tsx

@@ -58,6 +58,7 @@ export function PlateStatic({
         }),
         className
       )}
+      disableDefaultStyles
       {...props}
     />
   );

apps/www/src/registry/default/plate-ui/indent-fire-marker-static.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 
-import type { PlateRenderElementProps } from '@udecode/plate-common/react';
+import type { PlateRenderElementStaticProps } from '@udecode/plate-common';
 import type { TIndentElement } from '@udecode/plate-indent';
 
 export function FireMarkerStatic({
   element,
-}: Omit<PlateRenderElementProps, 'children'>) {
+}: Omit<PlateRenderElementStaticProps, 'children'>) {
   return (
     <div contentEditable={false}>
       <span style={{ left: -26, position: 'absolute', top: -1 }}>
@@ -15,8 +15,8 @@ export function FireMarkerStatic({
   );
 }
 
-export function FireLiComponentStatic(props: PlateRenderElementProps) {
-  const { children } = props;
-
+export function FireLiComponentStatic({
+  children,
+}: PlateRenderElementStaticProps) {
   return <span>{children}</span>;
 }

apps/www/src/registry/default/plate-ui/indent-fire-marker.tsx

@@ -1,8 +1,8 @@
-import type { PlateRenderElementProps } from '@udecode/plate-common/react';
+import type { PlateRenderElementStaticProps } from '@udecode/plate-common';
 import type { TIndentElement } from '@udecode/plate-indent';
 
 export const FireMarker = (
-  props: Omit<PlateRenderElementProps, 'children'>
+  props: Omit<PlateRenderElementStaticProps, 'children'>
 ) => {
   const { element } = props;
 
@@ -15,7 +15,7 @@ export const FireMarker = (
   );
 };
 
-export const FireLiComponent = (props: PlateRenderElementProps) => {
+export const FireLiComponent = (props: PlateRenderElementStaticProps) => {
   const { children } = props;
 
   return <span>{children}</span>;

apps/www/src/registry/default/plate-ui/indent-todo-marker-static.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import type { PlateRenderElementProps } from '@udecode/plate-common/react';
+import type { PlateRenderElementStaticProps } from '@udecode/plate-common';
 
 import { cn } from '@udecode/cn';
 
 import { CheckboxStatic } from './checkbox-static';
 
 export const TodoMarkerStatic = ({
   element,
-}: Omit<PlateRenderElementProps, 'children'>) => {
+}: Omit<PlateRenderElementStaticProps, 'children'>) => {
   return (
     <div contentEditable={false}>
       <CheckboxStatic
@@ -19,7 +19,7 @@ export const TodoMarkerStatic = ({
   );
 };
 
-export const TodoLiStatic = (props: PlateRenderElementProps) => {
+export const TodoLiStatic = (props: PlateRenderElementStaticProps) => {
   const { children, element } = props;
 
   return (