diff --git a/.changeset/fluffy-camels-applaud.md b/.changeset/fluffy-camels-applaud.md new file mode 100644 index 0000000..5142490 --- /dev/null +++ b/.changeset/fluffy-camels-applaud.md @@ -0,0 +1,23 @@ +--- +"@kaizen/rich-text-editor": major +--- + +Rename `value` prop to reflect uncontrolled form field + +To conform to React naming convention for form control props. +Uncontrolled form fields take a `defaultValue` to indicate that +changes to this prop's value will not update the mounted component. +Rather, the component manages its current value as internal state, +and notifies subscribers via `onChange` when it changes. + +Consumers will need to update their code to the new prop name. E.g. before: + +```jsx + +``` + +and after: + +```jsx + +``` diff --git a/.eslintignore b/.eslintignore index 2c3cc1f..e994683 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1 +1,9 @@ -/packages/**/dist \ No newline at end of file +/packages/**/dist +/draft-packages/**/*.js +/draft-packages/**/*.js.map +/draft-packages/**/*.d.ts +/packages/**/*.js +!/packages/**/*.config.js +!/packages/**/svgMock.js +/packages/**/*.js.map +/packages/**/*.d.ts diff --git a/packages/rich-text-editor/docs/EditableRichTextContent.stories.tsx b/packages/rich-text-editor/docs/EditableRichTextContent.stories.tsx index be237ce..5e93257 100644 --- a/packages/rich-text-editor/docs/EditableRichTextContent.stories.tsx +++ b/packages/rich-text-editor/docs/EditableRichTextContent.stories.tsx @@ -60,7 +60,7 @@ function InlineEditor(props: { { name: "bulletList", group: "list" }, { name: "link", group: "link" }, ]} - value={rteData} + defaultValue={rteData} onChange={handleOnChange} /> diff --git a/packages/rich-text-editor/docs/RichTextEditor.stories.tsx b/packages/rich-text-editor/docs/RichTextEditor.stories.tsx index 3c8de1b..6e86e34 100644 --- a/packages/rich-text-editor/docs/RichTextEditor.stories.tsx +++ b/packages/rich-text-editor/docs/RichTextEditor.stories.tsx @@ -9,7 +9,7 @@ import dummyContent from "./dummyContent.json" import dummyMalformedContent from "./dummyMalformedContent.json" type RTEStory = StoryFn< - Omit + Omit > export default { @@ -32,7 +32,7 @@ export const Default: RTEStory = ({ labelText, ...args }) => { return ( @@ -60,7 +60,7 @@ export const WithData: RTEStory = ({ labelText, ...args }) => { return ( @@ -89,7 +89,7 @@ export const WithBadData: RTEStory = ({ labelText, ...args }) => { return ( @@ -121,14 +121,14 @@ export const WithDescriptionAndValidationMessage: RTEStory = ({ <> { } const TestRTE = ( - args: Omit & { - rteMockData?: RichTextEditorProps["value"] + args: Omit< + RichTextEditorProps, + "defaultValue" | "onChange" | "aria-labelledby" + > & { + rteMockData?: RichTextEditorProps["defaultValue"] } ): JSX.Element => { const { rteMockData, ...rest } = args @@ -34,7 +37,7 @@ const TestRTE = ( { name: "orderedList", group: "list" }, { name: "bulletList", group: "list" }, ]} - value={rteData} + defaultValue={rteData} onChange={handleOnChange} {...rest} /> diff --git a/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.tsx b/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.tsx index 017dff9..a13c33b 100644 --- a/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.tsx +++ b/packages/rich-text-editor/src/RichTextEditor/RichTextEditor.tsx @@ -23,10 +23,10 @@ import styles from "./RichTextEditor.module.scss" export interface BaseRichTextEditorProps extends OverrideClassName< - Omit, "onChange" | "content"> + Omit, "onChange" | "defaultValue"> > { onChange: (content: ProseMirrorState.EditorState) => void - value: EditorContentArray + defaultValue: EditorContentArray controls?: ToolbarItems[] /** * Sets a default min-height for the editable area in units of body paragraph line height, similar to the 'rows' attribute on