Merge pull request #3809 from udecode/feat/editor-select

Select editor

.changeset/config.json

@@ -2,7 +2,17 @@
   "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
   "changelog": ["./changelog-config", { "repo": "udecode/plate" }],
   "commit": false,
-  "linked": [["@udecode/*"]],
+  "linked": [
+    [
+      "@udecode/plate",
+      "@udecode/plate*",
+      "@udecode/slate",
+      "@udecode/slate*",
+      "@udecode/react*",
+      "@udecode/cn",
+      "@udecode/utils"
+    ]
+  ],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",

.changeset/heavy-sheep-hang copy 2.md

@@ -0,0 +1,5 @@
+---
+'@udecode/slate-utils': patch
+---
+
+- Add `removeEditorText`: Remove non-empty editor text nodes

.changeset/heavy-sheep-hang copy 3.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-tag': patch
+---
+
+- New plugins: `TagPlugin`, `MultiSelectPlugin`

.changeset/heavy-sheep-hang copy.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-utils': patch
+---
+
+- Add `useEditorString`: Subscribes to the editor string on each change

.changeset/heavy-sheep-hang.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-core': patch
+---
+
+- `PlateContent` new prop - `autoFocusOnEditable`: Autofocus when it becomes editable (readOnly false -> readOnly true)

.changeset/tender-parents-own.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-media': patch
+---
+
+Fix README

apps/www/content/docs/api/core/plate.mdx

@@ -49,6 +49,9 @@ Custom render function for leaf nodes.
 Props for the [Editable](https://docs.slatejs.org/libraries/slate-react/editable) component. Extends `TextareaHTMLAttributes<HTMLDivElement>`.
 
 <APIProps>
+<APIItem name="autoFocusOnEditable" type="boolean" optional>
+Automatically focus the editor when it transitions from read-only to editable mode (when `readOnly` changes from `true` to `false`).
+</APIItem>
 <APIItem name="renderEditable" type="(editable: ReactNode) => ReactNode" optional>
 Custom `Editable` node.
 

apps/www/content/docs/api/slate-utils.mdx

@@ -771,6 +771,19 @@ The number of children moved.
 
 </APIReturns>
 
+### removeEditorText
+
+Removes all non-empty text nodes from the editor.
+
+<APIParameters>
+  <APIItem name="editor" type="TEditor">
+    The editor instance.
+  </APIItem>
+  <APIItem name="options" type="RemoveNodesOptions<E>" optional>
+    Options for removing nodes. The `match` function in options will be combined with the text length check.
+  </APIItem>
+</APIParameters>
+
 ### removeMark
 
 Removes a mark and triggers `onChange` if the selection is collapsed.

apps/www/content/docs/api/utils.mdx

@@ -121,6 +121,16 @@ If true, merges its props onto its immediate child.
 
 ## Hooks
 
+### useEditorString
+
+A hook that returns the entire text content of the editor as a string.
+
+<APIReturns>
+  <APIItem name="string" type="string">
+    The concatenated text content of all text nodes in the editor.
+  </APIItem>
+</APIReturns>
+
 ### useMarkToolbarButtonState
 
 Generates the state for a mark toolbar button.

apps/www/content/docs/comments.mdx

@@ -78,7 +78,7 @@ The currently active comment.
 
 ## API
 
-### editor.insert.comment
+### editor.tf.insert.comment
 
 Insert a new comment mark.
 

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

@@ -13,6 +13,14 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ### November 26 #16.9
 
+https://github.com/udecode/plate/pull/3809/files
+- Add `select-editor`, `tag-element`, `label`, `form`
+- Replace `cmdk` dependency with `@udecode/cmdk`. It's a controllable version of `cmdk`.
+- `command`: add variants
+- `editor`: add `select` variant
+- `popover`: add `animate` variant
+
+https://github.com/udecode/plate/pull/3807/files
 - `toc-element`: remove `<nav>` tag using `<div>` instead to fix html2canvas issue
 - `editor`: remove `role="button"` to fix html2canvas issue
 

apps/www/content/docs/components/components-json.mdx

@@ -19,7 +19,7 @@ You can create a `components.json` file in your project by running the following
 npx shadcx@latest init plate
 ```
 
-See the [CLI section](/docs/cli) for more information.
+See the [CLI section](/docs/components/cli) for more information.
 
 ## $schema
 

apps/www/content/docs/date.mdx

@@ -73,7 +73,7 @@ A boolean indicating the direction to check. If true, checks the previous node;
 
 ## Plugin Transforms
 
-### editor.insert.date
+### editor.tf.insert.date
 
 Insert a date into the editor.
 

apps/www/content/docs/dnd.mdx

@@ -3,7 +3,7 @@ title: Drag & Drop
 docs:
   - route: /docs/components/draggable
     title: Draggable
-  - route: /docs/api/dnd
+  - route: /docs/dnd
     title: Dnd Plugin
 ---
 

apps/www/content/docs/emoji.mdx

@@ -7,8 +7,6 @@ docs:
     title: Emoji Input Element
   - route: /docs/components/emoji-dropdown-menu
     title: Emoji Dropdown Menu
-  - route: /docs/components/emoji-toolbar-dropdown
-    title: Emoji Toolbar Dropdown
 ---
 
 <ComponentPreview name="emoji-demo" />

apps/www/content/docs/examples/export.mdx

@@ -44,4 +44,4 @@ Refer to the preview above.
 
 Try it out with our server-side PDF export:
 
-<ComponentPreviewPro name="export-demo" />
+<ComponentPreviewPro name="export-pro" />

apps/www/content/docs/link.mdx

@@ -46,7 +46,7 @@ const plugins = [
 
 ## Plugin Transforms
 
-### editor.insert.link
+### editor.tf.insert.link
 
 Inserts a link node into the editor.
 

apps/www/content/docs/media.mdx

@@ -3,11 +3,11 @@ title: Media
 docs:
   - route: /docs/components/image-element
     title: Image Element
-  - route: /docs/components/video-element
+  - route: /docs/components/media-video-element
     title: Video Element
-  - route: /docs/components/audio-element
+  - route: /docs/components/media-audio-element
     title: Audio Element
-  - route: /docs/components/file-element
+  - route: /docs/components/media-file-element
     title: File Element
   - route: /docs/components/media-embed-element
     title: Media Embed Element

apps/www/content/docs/multi-select.mdx

@@ -0,0 +1,89 @@
+---
+title: Multi Select
+docs:
+  - route: /docs/components/tag-element
+  - route: /docs/components/select-editor
+---
+
+<ComponentPreview name="select-editor-demo" />
+
+<PackageInfo>
+
+## Features
+
+- Inline selectable elements with keyboard navigation
+- Multi-item selection support
+- Automatic cleanup of surrounding text
+- Duplicate prevention
+- Customizable rendering and behavior
+- Built on top of the Tag plugin infrastructure
+- Keyboard shortcuts for quick selection and navigation
+
+</PackageInfo>
+
+## Installation
+
+```bash
+npm install @udecode/plate-tag
+```
+
+## Usage
+
+```tsx
+import { MultiSelectPlugin } from '@udecode/plate-tag/react';
+import { TagElement } from '@/components/plate-ui/tag-element';
+import {
+  SelectEditor,
+  SelectEditorContent,
+  SelectEditorInput,
+  SelectEditorCombobox,
+  type SelectItem,
+} from '@/components/plate-ui/select-editor';
+
+// Define your items
+const ITEMS: SelectItem[] = [
+  { value: 'React' },
+  { value: 'TypeScript' },
+  { value: 'JavaScript' },
+];
+
+export default function MySelectEditor() {
+  const [value, setValue] = React.useState<SelectItem[]>([ITEMS[0]]);
+
+  return (
+    <SelectEditor
+      value={value}
+      onValueChange={setValue}
+      items={ITEMS}
+    >
+      <SelectEditorContent>
+        <SelectEditorInput placeholder="Select items..." />
+        <SelectEditorCombobox />
+      </SelectEditorContent>
+    </SelectEditor>
+  );
+}
+```
+
+- [TagElement](/docs/components/tag-element)
+- [SelectEditor](/docs/components/select-editor)
+
+## Plugins
+
+### MultiSelectPlugin
+
+Handling multi-select elements in the editor. Built on top of TagPlugin.
+
+<APIOptions>
+<APIItem name="type" type="string" optional>
+The type identifier for multi-select elements.
+
+- **Default:** `'multi-select'`
+</APIItem>
+</APIOptions>
+
+### TagPlugin
+
+Inline void element plugin.
+
+## API

apps/www/content/docs/tag.mdx

@@ -0,0 +1,7 @@
+---
+title: Tag
+docs:
+  - route: /docs/components/tag-element
+    title: Tag Element
+---
+

apps/www/package.json

@@ -15,7 +15,8 @@
     "lint:fix": "yarn lint --fix",
     "preview": "next build && next start",
     "start": "next start",
-    "typecheck": "yarn prebuild && tsc --noEmit"
+    "typecheck": "yarn prebuild && tsc --noEmit",
+    "typecheck:watch": "yarn typecheck --watch"
   },
   "browserslist": {
     "production": [
@@ -37,6 +38,7 @@
     "@ai-sdk/openai": "^0.0.67",
     "@ariakit/react": "0.4.11",
     "@faker-js/faker": "^9.0.2",
+    "@hookform/resolvers": "3.9.1",
     "@next/third-parties": "15.0.3",
     "@radix-ui/colors": "3.0.0",
     "@radix-ui/react-accessible-icon": "^1.1.0",
@@ -69,6 +71,7 @@
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-toolbar": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@udecode/cmdk": "workspace:^",
     "@udecode/cn": "workspace:^",
     "@udecode/plate": "workspace:^",
     "@udecode/plate-ai": "workspace:^",
@@ -121,6 +124,7 @@
     "@udecode/plate-suggestion": "workspace:^",
     "@udecode/plate-tabbable": "workspace:^",
     "@udecode/plate-table": "workspace:^",
+    "@udecode/plate-tag": "workspace:^",
     "@udecode/plate-test-utils": "workspace:^",
     "@udecode/plate-toggle": "workspace:^",
     "@udecode/plate-trailing-block": "workspace:^",
@@ -139,6 +143,7 @@
     "contentlayer2": "^0.4.6",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.5.4",
+    "fzf": "0.5.2",
     "html2canvas": "^1.4.1",
     "lodash.template": "^4.5.0",
     "lucide-react": "0.460.0",
@@ -154,6 +159,7 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "7.53.2",
     "react-lite-youtube-embed": "^2.4.0",
     "react-markdown": "9.0.1",
     "react-player": "2.16.0",