🐛

udecode · Sep 18, 2023 · 0137b33 · 0137b33
1 parent d376b1b
commit 0137b33
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 8 deletions.
diff --git a/.changeset/two-avocados-hear.md b/.changeset/two-avocados-hear.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-core': patch
+---
+
+- Fix: set Plate `id` prop type to `string` to satisfy [HTML specs](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
diff --git a/apps/www/content/docs/api/core/plate.mdx b/apps/www/content/docs/api/core/plate.mdx
@@ -10,7 +10,7 @@ description: API reference for Plate component.
 ## Plate Props
 
 <APIParameters>
-<APIItem name="id" type="symbol | string | number" optional>
+<APIItem name="id" type="string" optional>
 A unique ID to store the editor state by ID. This is mandatory when nesting **`Plate`** instances but optional otherwise.
 
 - **Default:** `'plate'`.

diff --git a/apps/www/src/lib/plate/demo/plugins/emojiPlugin.ts b/apps/www/src/lib/plate/demo/plugins/emojiPlugin.ts
@@ -1,9 +1,8 @@
-import { RenderAfterEditable } from '@udecode/plate-common';
 import { EmojiPlugin } from '@udecode/plate-emoji';
 
 import { MyPlatePlugin } from '@/types/plate-types';
 import { EmojiCombobox } from '@/registry/default/plate-ui/emoji-combobox';
 
 export const emojiPlugin: Partial<MyPlatePlugin<EmojiPlugin>> = {
-  renderAfterEditable: EmojiCombobox as RenderAfterEditable,
+  renderAfterEditable: EmojiCombobox,
 };
diff --git a/packages/core/src/stores/plate/createPlateStore.ts b/packages/core/src/stores/plate/createPlateStore.ts
@@ -8,7 +8,7 @@ import {
   SetRecord,
   UseRecord,
 } from '../../atoms/index';
-import { Scope, useAtom } from '../../libs/index';
+import { useAtom } from '../../libs/index';
 import { PlateEditor } from '../../types/PlateEditor';
 import { PlateStoreState } from '../../types/PlateStore';
 
@@ -17,7 +17,7 @@ import { PlateStoreState } from '../../types/PlateStore';
  * Use it if you have multiple `Plate` in the same React tree.
  * @default PLATE_SCOPE
  */
-export type PlateId = Scope;
+export type PlateId = string;
 
 export const PLATE_SCOPE = 'plate';
 export const GLOBAL_PLATE_SCOPE = Symbol('global-plate');

diff --git a/packages/core/src/types/slate-react/TEditableProps.ts b/packages/core/src/types/slate-react/TEditableProps.ts
@@ -2,17 +2,15 @@ import { RenderLeafFn, TNodeEntry } from '@udecode/slate';
 import { Range } from 'slate';
 import { EditableProps } from 'slate-react/dist/components/editable';
 
-import { PlateId } from '../../stores/index';
 import { RenderElementFn } from './TRenderElementProps';
 
 /**
  * `EditableProps` are passed to the <Editable> component.
  */
 export type TEditableProps = Omit<
   EditableProps,
-  'id' | 'decorate' | 'renderElement' | 'renderLeaf'
+  'decorate' | 'renderElement' | 'renderLeaf'
 > & {
-  id?: PlateId;
   decorate?: (entry: TNodeEntry) => Range[];
   renderElement?: RenderElementFn;
   renderLeaf?: RenderLeafFn;