Feat/templates

README.md

@@ -35,12 +35,12 @@ Plate
 
 You can choose one of the following templates to get started:
 
-| Option                                                                            | NextJS |  Plate | Plugins |AI & Backend |
-| --------------------------------------------------------------------------------- | ------ |  ----- | ------- |-------- |
-| [Notion clone template](https://pro.platejs.org/docs/templates/potion) | ✅     |  ✅    | ✅      |✅       |
-| [Plate playground template](https://github.com/udecode/plate-playground-template) | ✅     |  ✅    | ✅      |       |
-| [Plate minimal template](https://github.com/udecode/plate-template)               | ✅     |  ✅    |         |       |
-| [NextJS template](https://platejs.org/docs/components/installation/next)          | ✅     |        |         |       |
+| Option                                                                            | NextJS | Plate | Plugins | AI & Backend |
+| --------------------------------------------------------------------------------- | ------ | ----- | ------- | ------------ |
+| [Notion-like template](https://pro.platejs.org/docs/templates/potion)             | ✅     | ✅    | ✅      | ✅           |
+| [Plate playground template](https://github.com/udecode/plate-playground-template) | ✅     | ✅    | ✅      |              |
+| [Plate minimal template](https://github.com/udecode/plate-template)               | ✅     | ✅    |         |              |
+| [NextJS template](https://platejs.org/docs/components/installation/next)          | ✅     |       |         |              |
 
 ## Documentation
 

apps/www/content/docs/block-selection.mdx

@@ -138,7 +138,7 @@ options: {
 
 ### Selection area
 
-Style the selection area using `.slate-selection-area` class. For example:
+Style the selection area using `.slate-selection-area` class to your `EditorContainer` component. For example:
 
 ```js
 '[&_.slate-selection-area]:border [&_.slate-selection-area]:border-primary [&_.slate-selection-area]:bg-primary/10'

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

@@ -9,6 +9,12 @@ Since Plate UI is not a component library, a changelog is maintained here.
 Use the [CLI](https://platejs.org/docs/components/cli) to install the latest version of the components.
 
 
+## November 2024 #16
+
+### November 1 #16.1
+
+- `editor`: styles + `<EditorContainer />`
+
 ## October 2024 #15
 
 ### October 31 #15.6
@@ -22,36 +28,36 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
   - `inline-combobox`
 - Added groups and items to `slash-input-element`
 - Spacing and sizing update:
-  - `ai-menu-items.tsx`
-  - `align-dropdown-menu.tsx`
-  - `block-context-menu.tsx`
-  - `button.tsx`
-  - `code-block-combobox.tsx`
-  - `color-dropdown-menu-items.tsx`
-  - `color-picker.tsx`
-  - `column-group-element.tsx`
-  - `command.tsx`
-  - `comment-more-dropdown.tsx`
-  - `context-menu.tsx`
-  - `dropdown-menu.tsx`
-  - `emoji-dropdown-menu.tsx`
-  - `emoji-input-element.tsx`
-  - `image-preview.tsx`
-  - `inline-combobox.tsx`
-  - `input.tsx`
-  - `insert-dropdown-menu.tsx`
-  - `line-height-dropdown-menu.tsx`
-  - `link-floating-toolbar.tsx`
-  - `media-popover.tsx`
-  - `mention-input-element.tsx`
-  - `mode-dropdown-menu.tsx`
-  - `more-dropdown-menu.tsx`
-  - `popover.tsx`
-  - `slash-input-element.tsx`
-  - `table-dropdown-menu.tsx`
-  - `table-element.tsx`
-  - `toggle-element.tsx`
-  - `toggle-toolbar-button.tsx`
+  - `ai-menu-items`
+  - `align-dropdown-menu`
+  - `block-context-menu`
+  - `button`
+  - `code-block-combobox`
+  - `color-dropdown-menu-items`
+  - `color-picker`
+  - `column-group-element`
+  - `command`
+  - `comment-more-dropdown`
+  - `context-menu`
+  - `dropdown-menu`
+  - `emoji-dropdown-menu`
+  - `emoji-input-element`
+  - `image-preview`
+  - `inline-combobox`
+  - `input`
+  - `insert-dropdown-menu`
+  - `line-height-dropdown-menu`
+  - `link-floating-toolbar`
+  - `media-popover`
+  - `mention-input-element`
+  - `mode-dropdown-menu`
+  - `more-dropdown-menu`
+  - `popover`
+  - `slash-input-element`
+  - `table-dropdown-menu`
+  - `table-element`
+  - `toggle-element`
+  - `toggle-toolbar-button`
 
 ### October 26 #15.5
 
@@ -87,27 +93,27 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ### October 1 #15.1
 
-- New `block-selection.tsx` component for visual selection feedback
-- New `plate-element.tsx` component for rendering the plate element with `BlockSelection`
-- Updated `paragraph-element.tsx` and all block elements to use `plate-element.tsx`
-- `draggable.tsx`:
+- New `block-selection` component for visual selection feedback
+- New `plate-element` component for rendering the plate element with `BlockSelection`
+- Updated `paragraph-element` and all block elements to use `plate-element`
+- `draggable`:
   - Refactored to use new hooks: `useDraggableGutter` and `useDropLine`
   - Removed `classNames` prop in favor of a single `className`
   - Added `DraggableProvider` wrapper
   - Introduced `Gutter` and `DropLine` as separate components
-- `with-draggables.tsx`:
+- `with-draggables`:
   - Updated to use new className format for draggable props
 - fix `mention-element`: prevent IME input interruption on MacOS
 
 Use `--highlight` color for the following components:
 
-- `comment-leaf.tsx`
-- `highlight-leaf.tsx`
+- `comment-leaf`
+- `highlight-leaf`
 
 Use `--brand` color for the following components:
 
-- `block-selection.tsx`
-- `draggable.tsx`
+- `block-selection`
+- `draggable`
 
 
 ## September 2024 #14

apps/www/content/docs/emoji.mdx

@@ -2,6 +2,8 @@
 title: Emoji
 description: Insert emoji inline.
 docs:
+  - route: /docs/combobox
+    title: Combobox
   - route: /docs/components/emoji-input-element
     title: Emoji Input Element
   - route: /docs/components/emoji-dropdown-menu

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

@@ -15,7 +15,7 @@ You can choose one of the following templates to get started:
 
 | Option                                                                            | NextJS | Plate | Plugins | AI & Backend |
 | --------------------------------------------------------------------------------- | ------ | ----- | ------- | ------------ |
-| [Notion clone template](https://pro.platejs.org/docs/templates/potion)            | ✅     | ✅    | ✅      | ✅           |
+| [Notion-like template](https://pro.platejs.org/docs/templates/potion)            | ✅     | ✅    | ✅      | ✅           |
 | [Plate playground template](https://github.com/udecode/plate-playground-template) | ✅     | ✅    | ✅      |              |
 | [Plate minimal template](https://github.com/udecode/plate-template)               | ✅     | ✅    |         |              |
 | [NextJS template](/docs/components/installation/next)                             | ✅     |       |         |              |

apps/www/content/docs/mention.mdx

@@ -2,7 +2,7 @@
 title: Mention
 description: Enable autocompletion for user mentions.
 docs:
-  - route: /docs/components/combobox
+  - route: /docs/combobox
     title: Combobox
   - route: /docs/components/mention-element
     title: Mention Element

apps/www/content/docs/slash-command.mdx

@@ -2,6 +2,8 @@
 title: Slash Command
 description: Slash command menu for quick insertion of various content types.
 docs:
+  - route: /docs/combobox
+    title: Combobox
   - route: components/slash-input-element
     title: Slash Input Element
   - route: https://pro.platejs.org/docs/components/slash-input-element

apps/www/public/r/index.json

@@ -1549,10 +1549,8 @@
       "examples": [
         "editor-default",
         "editor-disabled",
-        "editor-ghost",
-        "editor-label",
-        "editor-text",
-        "editor-button"
+        "editor-full-width",
+        "editor-ai-chat"
       ]
     },
     "files": [