diff --git a/.changeset/rude-lamps-brake.md b/.changeset/rude-lamps-brake.md new file mode 100644 index 00000000000..1e8c92a10ce --- /dev/null +++ b/.changeset/rude-lamps-brake.md @@ -0,0 +1,5 @@ +--- +"@kaizen/components": patch +--- + +RichTextContent: remove contenteditable attribute instead of contenteditable=false diff --git a/packages/components/src/RichTextEditor/RichTextContent/RichTextContent.tsx b/packages/components/src/RichTextEditor/RichTextContent/RichTextContent.tsx index 89b1a557da5..ae49cfc1d93 100644 --- a/packages/components/src/RichTextEditor/RichTextContent/RichTextContent.tsx +++ b/packages/components/src/RichTextEditor/RichTextContent/RichTextContent.tsx @@ -1,4 +1,4 @@ -import React, { useState, HTMLAttributes } from "react" +import React, { useState, HTMLAttributes, useId, useEffect } from "react" import classnames from "classnames" import { OverrideClassName } from "~components/types/OverrideClassName" import { createSchemaWithAll } from "../RichTextEditor/schema" @@ -14,6 +14,13 @@ export type RichTextContentProps = { export const RichTextContent = (props: RichTextContentProps): JSX.Element => { const { content, classNameOverride, ...restProps } = props const [schema] = useState(createSchemaWithAll()) + const editorId = useId() + + useEffect(() => { + // prosemirror only allows us to set this to false (which has caused a strange bug in the platform) + // so we have to hack a bit to remove the attribute completely + document.getElementById(editorId)?.removeAttribute("contenteditable") + }, []) const [editorRef] = useRichTextEditor( ProseMirrorState.EditorState.create({ @@ -23,7 +30,9 @@ export const RichTextContent = (props: RichTextContentProps): JSX.Element => { }), schema, }), - undefined, + { + id: editorId, + }, { editable: false, }