Merge pull request #2634 from udecode/feat/editor

New component: Editor
udecode · Sep 18, 2023 · 6149be6 · 6149be6
2 parents 05c24d9 + 938c818
commit 6149be6
Show file tree

Hide file tree

Showing 53 changed files with 1,257 additions and 509 deletions.
diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -10,6 +10,13 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## September 2023 #4
 
+### 18 Sept #4.4
+
+- `editor`: New component 🎉 See [Editor](https://platejs.org/docs/components/editor)
+- `fixed-toolbar-buttons`, `floating-toolbar-buttons`, `mode-dropdown-menu`: 
+  - plate 24: rename `usePlateReadOnly` to `useEditorReadOnly`
+- `code-block-element`: changes in `code-block-element.css`
+
 ### 15 Sept #4.3
 
 - `table-element`

diff --git a/apps/www/content/docs/components/cloud.mdx b/apps/www/content/docs/components/cloud.mdx
@@ -101,7 +101,7 @@ export default function CloudDemo() {
       <FixedToolbar>
         <CloudToolbarButtons />
       </FixedToolbar>
-      <PlateContent />
+      <Editor />
     </Plate>
   );
 }

diff --git a/apps/www/content/docs/components/editor.mdx b/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" />
diff --git a/apps/www/content/docs/getting-started.mdx b/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>
   );
 }

diff --git a/apps/www/public/registry/index.json b/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": [

diff --git a/apps/www/public/registry/styles/default/editor.json b/apps/www/public/registry/styles/default/editor.json
@@ -0,0 +1,12 @@
+{
+  "name": "editor",
+  "dependencies": [],
+  "registryDependencies": [],
+  "files": [
+    {
+      "name": "editor.tsx",
+      "content": "import React from 'react';\nimport { PlateContent } from '@udecode/plate-common';\nimport { cva } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nimport type { PlateContentProps } from '@udecode/plate-common';\nimport type { VariantProps } from 'class-variance-authority';\n\nconst editorVariants = cva(\n  cn(\n    'relative overflow-x-auto whitespace-pre-wrap break-words',\n    'min-h-[80px] w-full rounded-md bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none',\n    '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',\n    '[&_[data-slate-placeholder]]:top-[auto_!important]',\n    '[&_strong]:font-bold'\n  ),\n  {\n    variants: {\n      variant: {\n        outline: 'border border-input',\n        ghost: '',\n      },\n      focused: {\n        true: 'ring-2 ring-ring ring-offset-2',\n      },\n      disabled: {\n        true: 'cursor-not-allowed opacity-50',\n      },\n      focusRing: {\n        true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n        false: '',\n      },\n      size: {\n        sm: 'text-sm',\n        md: 'text-base',\n      },\n    },\n    defaultVariants: {\n      variant: 'outline',\n      focusRing: true,\n      size: 'sm',\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nconst Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  (\n    {\n      className,\n      disabled,\n      focused,\n      focusRing,\n      readOnly,\n      size,\n      variant,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className=\"relative w-full\">\n        <PlateContent\n          className={cn(\n            editorVariants({\n              disabled,\n              focused,\n              focusRing,\n              size,\n              variant,\n            }),\n            className\n          )}\n          disableDefaultStyles\n          readOnly={disabled ?? readOnly}\n          aria-disabled={disabled}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nEditor.displayName = 'Editor';\n\nexport { Editor };\n"
+    }
+  ],
+  "type": "components:plate-ui"
+}
diff --git a/apps/www/public/registry/themes.css b/apps/www/public/registry/themes.css
@@ -91,7 +91,7 @@
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
-    --ring: 222.2 84% 4.9%;
+    --ring: 215 20.2% 65.1%;
 
     --radius: 0.5rem;
   }
@@ -124,7 +124,7 @@
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
 
-    --ring: 212.7 26.8% 83.9;
+    --ring: 217.2 32.6% 17.5%;
   }
 
   .theme-stone {

diff --git a/apps/www/src/__registry__/index.tsx b/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',

diff --git a/apps/www/src/app/_components/installation-tab.tsx b/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(``);

diff --git a/apps/www/src/config/customizer-components.ts b/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',

diff --git a/apps/www/src/config/customizer-items.ts b/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',

diff --git a/apps/www/src/config/docs.ts b/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,

diff --git a/apps/www/src/lib/plate/demo/editableProps.ts b/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'),
 };