From 0137b333a84fcef39e38338ed81c3328b34a90e1 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Mon, 18 Sep 2023 15:20:34 +0200 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=90=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/two-avocados-hear.md | 5 +++++ apps/www/content/docs/api/core/plate.mdx | 2 +- apps/www/src/lib/plate/demo/plugins/emojiPlugin.ts | 3 +-- packages/core/src/stores/plate/createPlateStore.ts | 4 ++-- packages/core/src/types/slate-react/TEditableProps.ts | 4 +--- 5 files changed, 10 insertions(+), 8 deletions(-) create mode 100644 .changeset/two-avocados-hear.md diff --git a/.changeset/two-avocados-hear.md b/.changeset/two-avocados-hear.md new file mode 100644 index 0000000000..f61fde4cc6 --- /dev/null +++ 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 index 26adfdcdf5..5cf08313bb 100644 --- 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 - + 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 index 063c131692..e153614c8e 100644 --- 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> = { - renderAfterEditable: EmojiCombobox as RenderAfterEditable, + renderAfterEditable: EmojiCombobox, }; diff --git a/packages/core/src/stores/plate/createPlateStore.ts b/packages/core/src/stores/plate/createPlateStore.ts index 9e6c07f740..e77e804485 100644 --- 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 index 7f580e80bb..b7ebbf8687 100644 --- a/packages/core/src/types/slate-react/TEditableProps.ts +++ b/packages/core/src/types/slate-react/TEditableProps.ts @@ -2,7 +2,6 @@ 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'; /** @@ -10,9 +9,8 @@ import { RenderElementFn } from './TRenderElementProps'; */ export type TEditableProps = Omit< EditableProps, - 'id' | 'decorate' | 'renderElement' | 'renderLeaf' + 'decorate' | 'renderElement' | 'renderLeaf' > & { - id?: PlateId; decorate?: (entry: TNodeEntry) => Range[]; renderElement?: RenderElementFn; renderLeaf?: RenderLeafFn; From 6f2787965357bf5b8fb768ef89a2a21d475fb502 Mon Sep 17 00:00:00 2001 From: zbeyens Date: Mon, 18 Sep 2023 15:56:10 +0200 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/components/Plate.spec.tsx | 6 +++--- .../src/lib/plate/plate-plugins.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components/Plate.spec.tsx b/packages/core/src/components/Plate.spec.tsx index cbc766bc44..a1a7b058ee 100644 --- a/packages/core/src/components/Plate.spec.tsx +++ b/packages/core/src/components/Plate.spec.tsx @@ -139,7 +139,7 @@ describe('Plate', () => { const _plugins = [{ key: 'test1' }]; const wrapper = ({ children, id }: any) => ( - + {children} ); @@ -147,13 +147,13 @@ describe('Plate', () => { ({ 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/templates/plate-playground-template/src/lib/plate/plate-plugins.ts b/templates/plate-playground-template/src/lib/plate/plate-plugins.ts index 540e3de069..b291ef8420 100644 --- 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: {