Merge pull request #4695 from udecode/fix/react-decouple2

Decouple react from platejs

Author: felixfeng33

.changeset/core-static-export.md

@@ -0,0 +1,16 @@
+---
+'@platejs/core': major
+---
+
+Moved static rendering functionality to `@platejs/core/static` / `platejs/static` to make `@platejs/core` / `platejs` React-free.
+
+**Migration**
+To migrate, update your imports from `platejs` to `platejs/static` for all static rendering features listed below:
+
+- `createStaticEditor`, `CreateStaticEditorOptions` - Create static editor instance
+- `serializeHtml`, `SerializeHtmlOptions` - Serialize editor content to HTML string
+- `PlateStatic`, `PlateStaticProps` - Main static editor component
+- `SlateElement`, `SlateElementProps` - Static element component
+- `SlateText`, `SlateTextProps` - Static text component
+- `SlateLeaf`, `SlateLeafProps` - Static leaf component
+- `getEditorDOMFromHtmlString`

.changeset/list-static-import.md

@@ -0,0 +1,5 @@
+---
+"@platejs/list": patch
+---
+
+Updated import path for `SlateRenderElementProps` to use the new static export from `platejs/static`.

apps/www/public/r/block-list.json

@@ -18,7 +18,7 @@
     },
     {
       "path": "src/registry/ui/block-list-static.tsx",
-      "content": "import * as React from 'react';\n\nimport type {\n  RenderStaticNodeWrapper,\n  SlateRenderElementProps,\n  TListElement,\n} from 'platejs';\n\nimport { isOrderedList } from '@platejs/list';\nimport { CheckIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nconst config: Record<\n  string,\n  {\n    Li: React.FC<SlateRenderElementProps>;\n    Marker: React.FC<SlateRenderElementProps>;\n  }\n> = {\n  todo: {\n    Li: TodoLiStatic,\n    Marker: TodoMarkerStatic,\n  },\n};\n\nexport const BlockListStatic: RenderStaticNodeWrapper = (props) => {\n  if (!props.element.listStyleType) return;\n\n  return (props) => <List {...props} />;\n};\n\nfunction List(props: SlateRenderElementProps) {\n  const { listStart, listStyleType } = props.element as TListElement;\n  const { Li, Marker } = config[listStyleType] ?? {};\n  const List = isOrderedList(props.element) ? 'ol' : 'ul';\n\n  return (\n    <List\n      className=\"relative m-0 p-0\"\n      style={{ listStyleType }}\n      start={listStart}\n    >\n      {Marker && <Marker {...props} />}\n      {Li ? <Li {...props} /> : <li>{props.children}</li>}\n    </List>\n  );\n}\n\nfunction TodoMarkerStatic(props: SlateRenderElementProps) {\n  const checked = props.element.checked as boolean;\n\n  return (\n    <div contentEditable={false}>\n      <button\n        className={cn(\n          'peer pointer-events-none absolute top-1 -left-6 size-4 shrink-0 rounded-sm border border-primary bg-background ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n          props.className\n        )}\n        data-state={checked ? 'checked' : 'unchecked'}\n        type=\"button\"\n      >\n        <div className={cn('flex items-center justify-center text-current')}>\n          {checked && <CheckIcon className=\"size-4\" />}\n        </div>\n      </button>\n    </div>\n  );\n}\n\nfunction TodoLiStatic(props: SlateRenderElementProps) {\n  return (\n    <li\n      className={cn(\n        'list-none',\n        (props.element.checked as boolean) &&\n          'text-muted-foreground line-through'\n      )}\n    >\n      {props.children}\n    </li>\n  );\n}\n",
+      "content": "import * as React from 'react';\n\nimport type { RenderStaticNodeWrapper, TListElement } from 'platejs';\nimport type { SlateRenderElementProps } from 'platejs/static';\n\nimport { isOrderedList } from '@platejs/list';\nimport { CheckIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nconst config: Record<\n  string,\n  {\n    Li: React.FC<SlateRenderElementProps>;\n    Marker: React.FC<SlateRenderElementProps>;\n  }\n> = {\n  todo: {\n    Li: TodoLiStatic,\n    Marker: TodoMarkerStatic,\n  },\n};\n\nexport const BlockListStatic: RenderStaticNodeWrapper = (props) => {\n  if (!props.element.listStyleType) return;\n\n  return (props) => <List {...props} />;\n};\n\nfunction List(props: SlateRenderElementProps) {\n  const { listStart, listStyleType } = props.element as TListElement;\n  const { Li, Marker } = config[listStyleType] ?? {};\n  const List = isOrderedList(props.element) ? 'ol' : 'ul';\n\n  return (\n    <List\n      className=\"relative m-0 p-0\"\n      style={{ listStyleType }}\n      start={listStart}\n    >\n      {Marker && <Marker {...props} />}\n      {Li ? <Li {...props} /> : <li>{props.children}</li>}\n    </List>\n  );\n}\n\nfunction TodoMarkerStatic(props: SlateRenderElementProps) {\n  const checked = props.element.checked as boolean;\n\n  return (\n    <div contentEditable={false}>\n      <button\n        className={cn(\n          'peer pointer-events-none absolute top-1 -left-6 size-4 shrink-0 rounded-sm border border-primary bg-background ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n          props.className\n        )}\n        data-state={checked ? 'checked' : 'unchecked'}\n        type=\"button\"\n      >\n        <div className={cn('flex items-center justify-center text-current')}>\n          {checked && <CheckIcon className=\"size-4\" />}\n        </div>\n      </button>\n    </div>\n  );\n}\n\nfunction TodoLiStatic(props: SlateRenderElementProps) {\n  return (\n    <li\n      className={cn(\n        'list-none',\n        (props.element.checked as boolean) &&\n          'text-muted-foreground line-through'\n      )}\n    >\n      {props.children}\n    </li>\n  );\n}\n",
       "type": "registry:ui"
     }
   ],

apps/www/public/r/blockquote-node.json

@@ -14,7 +14,7 @@
     },
     {
       "path": "src/registry/ui/blockquote-node-static.tsx",
-      "content": "import * as React from 'react';\n\nimport { type SlateElementProps, SlateElement } from 'platejs';\n\nexport function BlockquoteElementStatic(props: SlateElementProps) {\n  return (\n    <SlateElement\n      as=\"blockquote\"\n      className=\"my-1 border-l-2 pl-6 italic\"\n      {...props}\n    />\n  );\n}\n",
+      "content": "import * as React from 'react';\n\nimport { type SlateElementProps, SlateElement } from 'platejs/static';\n\nexport function BlockquoteElementStatic(props: SlateElementProps) {\n  return (\n    <SlateElement\n      as=\"blockquote\"\n      className=\"my-1 border-l-2 pl-6 italic\"\n      {...props}\n    />\n  );\n}\n",
       "type": "registry:ui"
     }
   ],

apps/www/public/r/callout-node.json

@@ -17,7 +17,7 @@
     },
     {
       "path": "src/registry/ui/callout-node-static.tsx",
-      "content": "import * as React from 'react';\n\nimport type { SlateElementProps } from 'platejs';\n\nimport { SlateElement } from 'platejs';\n\nimport { cn } from '@/lib/utils';\n\nexport function CalloutElementStatic({\n  children,\n  className,\n  ...props\n}: SlateElementProps) {\n  return (\n    <SlateElement\n      className={cn('my-1 flex rounded-sm bg-muted p-4 pl-3', className)}\n      style={{\n        backgroundColor: props.element.backgroundColor as any,\n      }}\n      {...props}\n    >\n      <div className=\"flex w-full gap-2 rounded-md\">\n        <div\n          className=\"size-6 text-[18px] select-none\"\n          style={{\n            fontFamily:\n              '\"Apple Color Emoji\", \"Segoe UI Emoji\", NotoColorEmoji, \"Noto Color Emoji\", \"Segoe UI Symbol\", \"Android Emoji\", EmojiSymbols',\n          }}\n        >\n          <span data-plate-prevent-deserialization>\n            {(props.element.icon as any) || '💡'}\n          </span>\n        </div>\n        <div className=\"w-full\">{children}</div>\n      </div>\n    </SlateElement>\n  );\n}\n",
+      "content": "import * as React from 'react';\n\nimport type { SlateElementProps } from 'platejs/static';\n\nimport { SlateElement } from 'platejs/static';\n\nimport { cn } from '@/lib/utils';\n\nexport function CalloutElementStatic({\n  children,\n  className,\n  ...props\n}: SlateElementProps) {\n  return (\n    <SlateElement\n      className={cn('my-1 flex rounded-sm bg-muted p-4 pl-3', className)}\n      style={{\n        backgroundColor: props.element.backgroundColor as any,\n      }}\n      {...props}\n    >\n      <div className=\"flex w-full gap-2 rounded-md\">\n        <div\n          className=\"size-6 text-[18px] select-none\"\n          style={{\n            fontFamily:\n              '\"Apple Color Emoji\", \"Segoe UI Emoji\", NotoColorEmoji, \"Noto Color Emoji\", \"Segoe UI Symbol\", \"Android Emoji\", EmojiSymbols',\n          }}\n        >\n          <span data-plate-prevent-deserialization>\n            {(props.element.icon as any) || '💡'}\n          </span>\n        </div>\n        <div className=\"w-full\">{children}</div>\n      </div>\n    </SlateElement>\n  );\n}\n",
       "type": "registry:ui"
     }
   ],

apps/www/public/r/code-block-node.json

@@ -21,7 +21,7 @@
     },
     {
       "path": "src/registry/ui/code-block-node-static.tsx",
-      "content": "import * as React from 'react';\n\nimport {\n  type SlateElementProps,\n  type SlateLeafProps,\n  type TCodeBlockElement,\n  SlateElement,\n  SlateLeaf,\n} from 'platejs';\n\nexport function CodeBlockElementStatic(\n  props: SlateElementProps<TCodeBlockElement>\n) {\n  return (\n    <SlateElement\n      className=\"py-1 **:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a] dark:**:[.hljs-addition]:bg-[#3c5743] dark:**:[.hljs-addition]:text-[#ceead5] **:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5] dark:**:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#6596cf] **:[.hljs-built\\\\\\\\_in,.hljs-symbol]:text-[#e36209] dark:**:[.hljs-built\\\\\\\\_in,.hljs-symbol]:text-[#c3854e] **:[.hljs-bullet]:text-[#735c0f] **:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] dark:**:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] **:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28] dark:**:[.hljs-deletion]:bg-[#473235] dark:**:[.hljs-deletion]:text-[#e7c7cb] **:[.hljs-emphasis]:italic **:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\\\\\_]:text-[#d73a49] dark:**:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\\\\\_]:text-[#ee6960] **:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a] dark:**:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#36a84f] **:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62] dark:**:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#3593ff] **:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5] dark:**:[.hljs-section]:text-[#61a5f2] **:[.hljs-strong]:font-bold **:[.hljs-title,.hljs-title.class\\\\\\\\_,.hljs-title.class\\\\\\\\_.inherited\\\\\\\\_\\\\\\\\_,.hljs-title.function\\\\\\\\_]:text-[#6f42c1] dark:**:[.hljs-title,.hljs-title.class\\\\\\\\_,.hljs-title.class\\\\\\\\_.inherited\\\\\\\\_\\\\\\\\_,.hljs-title.function\\\\\\\\_]:text-[#a77bfa]\"\n      {...props}\n    >\n      <div className=\"relative rounded-md bg-muted/50\">\n        <pre className=\"overflow-x-auto p-8 pr-4 font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid\">\n          <code>{props.children}</code>\n        </pre>\n      </div>\n    </SlateElement>\n  );\n}\n\nexport function CodeLineElementStatic(props: SlateElementProps) {\n  return <SlateElement {...props} />;\n}\n\nexport function CodeSyntaxLeafStatic(props: SlateLeafProps) {\n  const tokenClassName = props.leaf.className as string;\n\n  return <SlateLeaf className={tokenClassName} {...props} />;\n}\n",
+      "content": "import * as React from 'react';\n\nimport type { TCodeBlockElement } from 'platejs';\n\nimport {\n  type SlateElementProps,\n  type SlateLeafProps,\n  SlateElement,\n  SlateLeaf,\n} from 'platejs/static';\n\nexport function CodeBlockElementStatic(\n  props: SlateElementProps<TCodeBlockElement>\n) {\n  return (\n    <SlateElement\n      className=\"py-1 **:[.hljs-addition]:bg-[#f0fff4] **:[.hljs-addition]:text-[#22863a] dark:**:[.hljs-addition]:bg-[#3c5743] dark:**:[.hljs-addition]:text-[#ceead5] **:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#005cc5] dark:**:[.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable]:text-[#6596cf] **:[.hljs-built\\\\\\\\_in,.hljs-symbol]:text-[#e36209] dark:**:[.hljs-built\\\\\\\\_in,.hljs-symbol]:text-[#c3854e] **:[.hljs-bullet]:text-[#735c0f] **:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] dark:**:[.hljs-comment,.hljs-code,.hljs-formula]:text-[#6a737d] **:[.hljs-deletion]:bg-[#ffeef0] **:[.hljs-deletion]:text-[#b31d28] dark:**:[.hljs-deletion]:bg-[#473235] dark:**:[.hljs-deletion]:text-[#e7c7cb] **:[.hljs-emphasis]:italic **:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\\\\\_]:text-[#d73a49] dark:**:[.hljs-keyword,.hljs-doctag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language\\\\\\\\_]:text-[#ee6960] **:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#22863a] dark:**:[.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo]:text-[#36a84f] **:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#032f62] dark:**:[.hljs-regexp,.hljs-string,.hljs-meta_.hljs-string]:text-[#3593ff] **:[.hljs-section]:font-bold **:[.hljs-section]:text-[#005cc5] dark:**:[.hljs-section]:text-[#61a5f2] **:[.hljs-strong]:font-bold **:[.hljs-title,.hljs-title.class\\\\\\\\_,.hljs-title.class\\\\\\\\_.inherited\\\\\\\\_\\\\\\\\_,.hljs-title.function\\\\\\\\_]:text-[#6f42c1] dark:**:[.hljs-title,.hljs-title.class\\\\\\\\_,.hljs-title.class\\\\\\\\_.inherited\\\\\\\\_\\\\\\\\_,.hljs-title.function\\\\\\\\_]:text-[#a77bfa]\"\n      {...props}\n    >\n      <div className=\"relative rounded-md bg-muted/50\">\n        <pre className=\"overflow-x-auto p-8 pr-4 font-mono text-sm leading-[normal] [tab-size:2] print:break-inside-avoid\">\n          <code>{props.children}</code>\n        </pre>\n      </div>\n    </SlateElement>\n  );\n}\n\nexport function CodeLineElementStatic(props: SlateElementProps) {\n  return <SlateElement {...props} />;\n}\n\nexport function CodeSyntaxLeafStatic(props: SlateLeafProps) {\n  const tokenClassName = props.leaf.className as string;\n\n  return <SlateLeaf className={tokenClassName} {...props} />;\n}\n",
       "type": "registry:ui"
     }
   ],

apps/www/public/r/code-node.json

@@ -14,7 +14,7 @@
     },
     {
       "path": "src/registry/ui/code-node-static.tsx",
-      "content": "import * as React from 'react';\n\nimport type { SlateLeafProps } from 'platejs';\n\nimport { SlateLeaf } from 'platejs';\n\nexport function CodeLeafStatic(props: SlateLeafProps) {\n  return (\n    <SlateLeaf\n      {...props}\n      as=\"code\"\n      className=\"rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm whitespace-pre-wrap\"\n    >\n      {props.children}\n    </SlateLeaf>\n  );\n}\n",
+      "content": "import * as React from 'react';\n\nimport type { SlateLeafProps } from 'platejs/static';\n\nimport { SlateLeaf } from 'platejs/static';\n\nexport function CodeLeafStatic(props: SlateLeafProps) {\n  return (\n    <SlateLeaf\n      {...props}\n      as=\"code\"\n      className=\"rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm whitespace-pre-wrap\"\n    >\n      {props.children}\n    </SlateLeaf>\n  );\n}\n",
       "type": "registry:ui"
     }
   ],

apps/www/public/r/column-node.json

@@ -19,7 +19,7 @@
     },
     {
       "path": "src/registry/ui/column-node-static.tsx",
-      "content": "import * as React from 'react';\n\nimport type { SlateElementProps, TColumnElement } from 'platejs';\n\nimport { SlateElement } from 'platejs';\n\nexport function ColumnElementStatic(props: SlateElementProps<TColumnElement>) {\n  const { width } = props.element;\n\n  return (\n    <div className=\"group/column relative\" style={{ width: width ?? '100%' }}>\n      <SlateElement\n        className=\"h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0\"\n        {...props}\n      >\n        <div className=\"relative h-full border border-transparent p-1.5\">\n          {props.children}\n        </div>\n      </SlateElement>\n    </div>\n  );\n}\n\nexport function ColumnGroupElementStatic(props: SlateElementProps) {\n  return (\n    <SlateElement className=\"mb-2\" {...props}>\n      <div className=\"flex size-full rounded\">{props.children}</div>\n    </SlateElement>\n  );\n}\n",
+      "content": "import * as React from 'react';\n\nimport type { TColumnElement } from 'platejs';\nimport type { SlateElementProps } from 'platejs/static';\n\nimport { SlateElement } from 'platejs/static';\n\nexport function ColumnElementStatic(props: SlateElementProps<TColumnElement>) {\n  const { width } = props.element;\n\n  return (\n    <div className=\"group/column relative\" style={{ width: width ?? '100%' }}>\n      <SlateElement\n        className=\"h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0\"\n        {...props}\n      >\n        <div className=\"relative h-full border border-transparent p-1.5\">\n          {props.children}\n        </div>\n      </SlateElement>\n    </div>\n  );\n}\n\nexport function ColumnGroupElementStatic(props: SlateElementProps) {\n  return (\n    <SlateElement className=\"mb-2\" {...props}>\n      <div className=\"flex size-full rounded\">{props.children}</div>\n    </SlateElement>\n  );\n}\n",
       "type": "registry:ui"
     }
   ],

apps/www/public/r/comment-node.json

@@ -18,7 +18,7 @@
     },
     {
       "path": "src/registry/ui/comment-node-static.tsx",
-      "content": "import * as React from 'react';\n\nimport type { SlateLeafProps, TCommentText } from 'platejs';\n\nimport { SlateLeaf } from 'platejs';\n\nexport function CommentLeafStatic(props: SlateLeafProps<TCommentText>) {\n  return (\n    <SlateLeaf\n      {...props}\n      className=\"border-b-2 border-b-highlight/35 bg-highlight/15\"\n    >\n      {props.children}\n    </SlateLeaf>\n  );\n}\n",
+      "content": "import * as React from 'react';\n\nimport type { TCommentText } from 'platejs';\nimport type { SlateLeafProps } from 'platejs/static';\n\nimport { SlateLeaf } from 'platejs/static';\n\nexport function CommentLeafStatic(props: SlateLeafProps<TCommentText>) {\n  return (\n    <SlateLeaf\n      {...props}\n      className=\"border-b-2 border-b-highlight/35 bg-highlight/15\"\n    >\n      {props.children}\n    </SlateLeaf>\n  );\n}\n",
       "type": "registry:ui"
     }
   ],