Merge pull request #2635 from udecode/fix/id

Plate id prop string
udecode · Sep 18, 2023 · a98c032 · a98c032
2 parents d376b1b + 6f27879
commit a98c032
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 12 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/components/Plate.spec.tsx b/packages/core/src/components/Plate.spec.tsx
@@ -139,21 +139,21 @@ describe('Plate', () => {
       const _plugins = [{ key: 'test1' }];
 
       const wrapper = ({ children, id }: any) => (
-        <Plate id={id} plugins={id === 1 ? _plugins : undefined}>
+        <Plate id={id} plugins={id === '1' ? _plugins : undefined}>
           {children}
         </Plate>
       );
       const { result, rerender } = renderHook(
         ({ id }) => usePlateSelectors(id).plugins(),
         {
           wrapper,
-          initialProps: { id: 1 },
+          initialProps: { id: '1' },
         }
       );
 
       expect(result.current.at(-1)!.key).toBe('test1');
 
-      rerender({ id: 2 });
+      rerender({ id: '2' });
 
       expect(result.current.at(-1)!.key).not.toBe('test1');
     });

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;

diff --git a/templates/plate-playground-template/src/lib/plate/plate-plugins.ts b/templates/plate-playground-template/src/lib/plate/plate-plugins.ts
@@ -262,7 +262,7 @@ export const plugins = createPlugins(
       options: { enableScroller: true },
     }),
     createEmojiPlugin({
-      renderAfterEditable: EmojiCombobox,
+      renderAfterEditable: EmojiCombobox as RenderAfterEditable,
     }),
     createExitBreakPlugin({
       options: {