✨

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`

apps/www/public/registry/styles/default/editor.json

@@ -5,7 +5,7 @@
   "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 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 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\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    },\n    defaultVariants: {\n      variant: 'outline',\n    },\n  }\n);\n\nexport type EditorProps = PlateContentProps &\n  VariantProps<typeof editorVariants>;\n\nconst Editor = React.forwardRef<HTMLDivElement, EditorProps>(\n  ({ variant, disabled, focused, readOnly, className, ...props }, ref) => {\n    return (\n      <div ref={ref} className=\"relative w-full\">\n        <PlateContent\n          className={cn(\n            editorVariants({ variant, focused, disabled }),\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"
+      "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"

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 {

apps/www/src/registry/default/example/editor-button.tsx

@@ -1,15 +1,30 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Button } from '@/registry/default/plate-ui/button';
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorButton() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] grid w-full gap-2 p-10">
       <Plate>
         <Editor placeholder="Type your message here." />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
+
         <Button>Send message</Button>
       </Plate>
     </div>

apps/www/src/registry/default/example/editor-default.tsx

@@ -1,14 +1,28 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorDefault() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] p-10">
-      <Plate>
+      <Plate plugins={plugins}>
         <Editor placeholder="Type your message here." />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
       </Plate>
     </div>
   );

apps/www/src/registry/default/example/editor-form.tsx

@@ -1,14 +1,28 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorForm() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] p-10">
       <Plate>
         <Editor placeholder="Type your message here." />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
       </Plate>
     </div>
   );

apps/www/src/registry/default/example/editor-ghost.tsx

@@ -1,14 +1,28 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorGhost() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] p-10">
       <Plate>
         <Editor placeholder="Type your message here." variant="ghost" />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
       </Plate>
     </div>
   );

apps/www/src/registry/default/example/editor-label.tsx

@@ -1,16 +1,30 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Label } from '@/components/ui/label';
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorLabel() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] grid gap-1.5 p-10">
       <Plate id="message">
         <Label htmlFor="message">Your message</Label>
         <Editor placeholder="Type your message here." id="message" />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
       </Plate>
     </div>
   );

apps/www/src/registry/default/example/editor-text.tsx

@@ -1,16 +1,31 @@
 'use client';
 
-import { Plate } from '@udecode/plate-common';
+import { createPlateUI } from '@/plate/create-plate-ui';
+import { createBasicElementsPlugin } from '@udecode/plate-basic-elements';
+import { createBasicMarksPlugin } from '@udecode/plate-basic-marks';
+import { createPlugins, Plate } from '@udecode/plate-common';
 
 import { Label } from '@/components/ui/label';
 import { Editor } from '@/registry/default/plate-ui/editor';
+import { FloatingToolbar } from '@/registry/default/plate-ui/floating-toolbar';
+import { FloatingToolbarButtons } from '@/registry/default/plate-ui/floating-toolbar-buttons';
 
 export default function EditorText() {
+  const plugins = createPlugins(
+    [createBasicElementsPlugin(), createBasicMarksPlugin()],
+    { components: createPlateUI() }
+  );
+
   return (
     <div className="mt-[72px] grid gap-1.5 p-10">
       <Plate>
         <Label htmlFor="message-2">Your Message</Label>
         <Editor placeholder="Type your message here." id="message-2" />
+
+        <FloatingToolbar>
+          <FloatingToolbarButtons />
+        </FloatingToolbar>
+
         <p className="text-sm text-muted-foreground">
           Your message will be copied to the support team.
         </p>

apps/www/src/registry/default/example/playground-demo.tsx

@@ -325,9 +325,11 @@ export default function PlaygroundDemo({ id }: { id?: ValueId }) {
                   {...editableProps}
                   placeholder=""
                   variant="ghost"
+                  size="md"
+                  focusRing={false}
                   className={cn(
                     editableProps.className,
-                    'px-8 text-base',
+                    'px-8',
                     !id && 'min-h-[920px] pb-[20vh] pt-4 md:px-[96px]',
                     id && 'pb-8 pt-2'
                   )}

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

@@ -9,8 +9,8 @@ import type { VariantProps } from 'class-variance-authority';
 
 const editorVariants = cva(
   cn(
-    'relative whitespace-pre-wrap break-words',
-    '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 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+    'relative overflow-x-auto whitespace-pre-wrap break-words',
+    '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',
     '[&_[data-slate-placeholder]]:text-muted-foreground [&_[data-slate-placeholder]]:!opacity-100',
     '[&_[data-slate-placeholder]]:top-[auto_!important]',
     '[&_strong]:font-bold'
@@ -27,9 +27,19 @@ const editorVariants = cva(
       disabled: {
         true: 'cursor-not-allowed opacity-50',
       },
+      focusRing: {
+        true: 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        false: '',
+      },
+      size: {
+        sm: 'text-sm',
+        md: 'text-base',
+      },
     },
     defaultVariants: {
       variant: 'outline',
+      focusRing: true,
+      size: 'sm',
     },
   }
 );
@@ -38,12 +48,30 @@ export type EditorProps = PlateContentProps &
   VariantProps<typeof editorVariants>;
 
 const Editor = React.forwardRef<HTMLDivElement, EditorProps>(
-  ({ variant, disabled, focused, readOnly, className, ...props }, ref) => {
+  (
+    {
+      className,
+      disabled,
+      focused,
+      focusRing,
+      readOnly,
+      size,
+      variant,
+      ...props
+    },
+    ref
+  ) => {
     return (
       <div ref={ref} className="relative w-full">
         <PlateContent
           className={cn(
-            editorVariants({ variant, focused, disabled }),
+            editorVariants({
+              disabled,
+              focused,
+              focusRing,
+              size,
+              variant,
+            }),
             className
           )}
           disableDefaultStyles

apps/www/src/registry/themes.ts

@@ -79,7 +79,7 @@ export const themes = [
         'destructive-foreground': '210 40% 98%',
         border: '214.3 31.8% 91.4%',
         input: '214.3 31.8% 91.4%',
-        ring: '222.2 84% 4.9%',
+        ring: '215 20.2% 65.1%',
         radius: '0.5rem',
       },
       dark: {
@@ -101,7 +101,7 @@ export const themes = [
         'destructive-foreground': '210 40% 98%',
         border: '217.2 32.6% 17.5%',
         input: '217.2 32.6% 17.5%',
-        ring: '212.7 26.8% 83.9',
+        ring: '217.2 32.6% 17.5%',
       },
     },
   },