✨

apps/www/content/docs/components/cloud.mdx

@@ -101,7 +101,7 @@ export default function CloudDemo() {
       <FixedToolbar>
         <CloudToolbarButtons />
       </FixedToolbar>
-      <PlateContent />
+      <Editor />
     </Plate>
   );
 }

apps/www/content/docs/components/editor.mdx

@@ -0,0 +1,75 @@
+---
+title: Editor
+description: From Textarea to WYSIWYG editor.
+component: true
+docs:
+  - route: /docs/api/core/plate
+    title: Plate
+---
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+
+<TabsContent value="cli">
+
+```bash
+npx @udecode/plate-ui@latest add editor
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>
+
+Copy and paste the following code into your project.
+
+</Step>
+
+<ComponentSource name="editor" />
+
+<Step>
+
+Update the import paths to match your project setup.
+
+</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Examples
+
+### Default
+
+<ComponentPreview name="editor-default" />
+
+### Disabled
+
+<ComponentPreview name="editor-disabled" />
+
+### Ghost
+
+<ComponentPreview name="editor-ghost" />
+
+### With Label
+
+<ComponentPreview name="editor-label" />
+
+### With Text
+
+<ComponentPreview name="editor-text" />
+
+### With Button
+
+<ComponentPreview name="editor-button" />

apps/www/content/docs/getting-started.mdx

@@ -37,7 +37,7 @@ npm install @udecode/plate slate slate-react slate-history slate-hyperscript rea
 
 ### Basic Editor
 
-Let's start with a minimal editor setup using **`Plate`** and **`PlateContent`**.
+Let's start with a minimal editor setup.
 
 ```tsx showLineNumbers {1,5-7}
 import { Plate } from '@udecode/plate-common';
@@ -51,12 +51,30 @@ export default function BasicEditor() {
 }
 ```
 
-Simple and straightforward. Try it out:
+`Plate` manages the editor state and `PlateContent` renders the editor content. 
 
 <ComponentPreview name="basic-editor-default-demo" padding="md" />
 
+### Styling
+
+Let's give our editor some styles: [Editor](/docs/components/editor) is a styled version of `PlateContent`. 
+
+```tsx showLineNumbers {1,5-7}
+import { Plate } from '@udecode/plate-common';
+
+export default function BasicEditor() {
+  return (
+    <Plate>
+      <Editor placeholder="Type..." />
+    </Plate>
+  );
+}
+```
+
+<ComponentPreview name="basic-editor-styling-demo" padding="md" />
+
 <Callout className="mt-4">
-  **Note**: The following examples are using these global styles:
+  **Note**: `Editor` is just an example of a styled editor using Tailwind. You can create your own styled version of `PlateContent`.
   <ComponentSource name="globals" />
 </Callout>
 
@@ -81,7 +99,7 @@ const initialValue = [
 export default function BasicEditor() {
   return (
     <Plate initialValue={initialValue}>
-      <PlateContent />
+      <Editor />
     </Plate>
   );
 }
@@ -109,7 +127,7 @@ export default function BasicEditor() {
         // save newValue...
       }}
     >
-      <PlateContent />
+      <Editor />
     </Plate>
   );
 }
@@ -186,7 +204,7 @@ export default function BasicEditor() {
       plugins={plugins}
       // ...
     >
-      <PlateContent />
+      <Editor />
     </Plate>
   );
 }

apps/www/public/registry/index.json

@@ -1,4 +1,13 @@
 [
+  {
+    "name": "editor",
+    "dependencies": [],
+    "registryDependencies": [],
+    "files": [
+      "plate-ui/editor.tsx"
+    ],
+    "type": "components:plate-ui"
+  },
   {
     "name": "cloud",
     "dependencies": [

apps/www/src/__registry__/index.tsx

@@ -4,6 +4,13 @@
 import * as React from 'react'
 export const Index: Record<string, any> = {
   'default': {
+    'editor': {
+      name: 'editor',
+      type: 'components:plate-ui',
+      registryDependencies: [],
+      files: ['registry/default/plate-ui/editor.tsx'],
+      component: React.lazy(() => import('@/registry/default/plate-ui/editor')),
+    },
     'cloud': {
       name: 'cloud',
       type: 'components:plate-ui',
@@ -669,13 +676,69 @@ export const Index: Record<string, any> = {
       files: ['registry/default/plate-ui/resizable.tsx'],
       component: React.lazy(() => import('@/registry/default/plate-ui/resizable')),
     },
+    'editor-default': {
+      name: 'editor-default',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-default.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-default')),
+    },
+    'editor-disabled': {
+      name: 'editor-disabled',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-disabled.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-disabled')),
+    },
+    'editor-ghost': {
+      name: 'editor-ghost',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-ghost.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-ghost')),
+    },
+    'editor-label': {
+      name: 'editor-label',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-label.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-label')),
+    },
+    'editor-text': {
+      name: 'editor-text',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-text.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-text')),
+    },
+    'editor-button': {
+      name: 'editor-button',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-button.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-button')),
+    },
+    'editor-form': {
+      name: 'editor-form',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/editor-form.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/editor-form')),
+    },
     'basic-editor-default-demo': {
       name: 'basic-editor-default-demo',
       type: 'components:example',
       registryDependencies: [],
       files: ['registry/default/example/basic-editor-default-demo.tsx'],
       component: React.lazy(() => import('@/registry/default/example/basic-editor-default-demo')),
     },
+    'basic-editor-styling-demo': {
+      name: 'basic-editor-styling-demo',
+      type: 'components:example',
+      registryDependencies: [],
+      files: ['registry/default/example/basic-editor-styling-demo.tsx'],
+      component: React.lazy(() => import('@/registry/default/example/basic-editor-styling-demo')),
+    },
     'basic-editor-handler-demo': {
       name: 'basic-editor-handler-demo',
       type: 'components:example',

apps/www/src/app/_components/installation-tab.tsx

@@ -177,6 +177,8 @@ export default function InstallationTab() {
     return res;
   }, [plugins]);
 
+  const hasEditor = components.some((comp) => comp.id === 'editor');
+
   const importsCode = useMemo(() => {
     const importsGroups = Object.entries(groupedImportsByPackage).map(
       ([packageName, imports]) =>
@@ -189,7 +191,7 @@ export default function InstallationTab() {
         )} } from '@/components/plate-ui/${componentId}';`
     );
     return [
-      `import { createPlugins, Plate, PlateContent${
+      `import { createPlugins, Plate${hasEditor ? '' : ', PlateContent'}${
         plateImports.length > 0 ? ', ' + plateImports : ''
       } } from '@udecode/plate-common';`,
       ...importsGroups,
@@ -314,7 +316,7 @@ export default function InstallationTab() {
     addLine(``);
   }
 
-  addLine(`<PlateContent />`);
+  addLine(`<${hasEditor ? 'Editor' : 'PlateContent'} />`);
 
   if (hasFloatingToolbar) {
     addLine(``);

apps/www/src/config/customizer-components.ts

@@ -1,4 +1,8 @@
 export const customizerComponents = {
+  editor: {
+    title: 'Editor',
+    href: '/docs/components/editor',
+  },
   alignDropdownMenu: {
     title: 'Align Dropdown Menu',
     href: '/docs/components/align-dropdown-menu',

apps/www/src/config/customizer-items.ts

@@ -88,6 +88,12 @@ export const customizerItems: Record<string, SettingPlugin> = {
     label: 'Components',
     badges: [customizerBadges.ui],
     components: [
+      {
+        id: 'editor',
+        label: 'Editor',
+        usage: 'Editor',
+        route: customizerComponents.editor.href,
+      },
       {
         id: 'fixed-toolbar',
         label: 'FixedToolbar',

apps/www/src/config/docs.ts

@@ -720,6 +720,7 @@ export const docsConfig: DocsConfig = {
     {
       title: 'Components',
       items: [
+        customizerComponents.editor,
         customizerComponents.alignDropdownMenu,
         customizerComponents.avatar,
         customizerComponents.blockquoteElement,

apps/www/src/lib/plate/demo/editableProps.ts

@@ -1,13 +1,7 @@
 import { PlateContentProps } from '@udecode/plate-common';
 
-import { cn } from '@/lib/utils';
-
 export const editableProps: PlateContentProps = {
   spellCheck: false,
   autoFocus: false,
   placeholder: 'Type…',
-  style: {
-    outline: 'none',
-  },
-  className: cn('relative max-w-full [&_strong]:font-bold'),
 };

apps/www/src/registry/default/example/basic-editor-handler-demo.tsx

@@ -1,31 +1,45 @@
 import React, { useState } from 'react';
 import { editableProps } from '@/plate/demo/editableProps';
-import { Plate, PlateContent, Value } from '@udecode/plate-common';
+import { Plate, Value } from '@udecode/plate-common';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import { Editor } from '@/registry/default/plate-ui/editor';
+
+const initialValue = [
+  {
+    type: 'p',
+    children: [
+      {
+        text: 'This is editable plain text with react and history plugins, just like a textarea!',
+      },
+    ],
+  },
+];
 
 export default function BasicEditorHandlerDemo() {
-  const [debugValue, setDebugValue] = useState<Value>([]);
+  const [debugValue, setDebugValue] = useState<Value>(initialValue);
 
   return (
     <Plate
-      initialValue={[
-        {
-          type: 'p',
-          children: [
-            {
-              text: 'This is editable plain text with react and history plugins, just like a textarea!',
-            },
-          ],
-        },
-      ]}
+      initialValue={initialValue}
       onChange={(newValue) => {
         setDebugValue(newValue);
         // save newValue...
       }}
     >
-      <PlateContent {...editableProps} />
-      debug value:
-      <br />
-      {JSON.stringify(debugValue)}
+      <Editor {...editableProps} />
+
+      <Accordion type="single" collapsible>
+        <AccordionItem value="manual-installation">
+          <AccordionTrigger>Debug Value</AccordionTrigger>
+          <AccordionContent>{JSON.stringify(debugValue)}</AccordionContent>
+        </AccordionItem>
+      </Accordion>
     </Plate>
   );
 }

apps/www/src/registry/default/example/basic-editor-styling-demo.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Plate } from '@udecode/plate-common';
+
+import { Editor } from '@/registry/default/plate-ui/editor';
+
+export default function BasicEditorStylingDemo() {
+  return (
+    <Plate>
+      <Editor placeholder="Type..." />
+    </Plate>
+  );
+}