diff --git a/package.json b/package.json index 1e51ff50c4..d1965b799d 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,6 @@ "@payloadcms/config-provider": "^0.1.0", "@types/mime": "^2.0.3", "@types/passport-local-mongoose": "^6.1.0", - "@udecode/slate-plugins": "^0.71.9", "babel-jest": "^26.3.0", "babel-loader": "^8.1.0", "body-parser": "^1.19.0", diff --git a/src/admin/components/forms/field-types/RichText/RichText.tsx b/src/admin/components/forms/field-types/RichText/RichText.tsx index 6511086170..de1a8b8989 100644 --- a/src/admin/components/forms/field-types/RichText/RichText.tsx +++ b/src/admin/components/forms/field-types/RichText/RichText.tsx @@ -138,11 +138,9 @@ const RichText: React.FC = (props) => { const editor = useMemo(() => { let CreatedEditor = withEnterBreakOut( - withHTML( - withHistory( - withReact( - createEditor(), - ), + withHistory( + withReact( + createEditor(), ), ), ); @@ -150,6 +148,8 @@ const RichText: React.FC = (props) => { CreatedEditor = enablePlugins(CreatedEditor, elements); CreatedEditor = enablePlugins(CreatedEditor, leaves); + CreatedEditor = withHTML(CreatedEditor); + return CreatedEditor; }, [elements, leaves]); diff --git a/src/admin/components/forms/field-types/RichText/plugins/withHTML.tsx b/src/admin/components/forms/field-types/RichText/plugins/withHTML.tsx index dbaa1a75a4..371a4590cc 100644 --- a/src/admin/components/forms/field-types/RichText/plugins/withHTML.tsx +++ b/src/admin/components/forms/field-types/RichText/plugins/withHTML.tsx @@ -28,7 +28,7 @@ const TEXT_TAGS = { U: () => ({ underline: true }), }; -export const deserialize = (el) => { +const deserialize = (el) => { if (el.nodeType === 3) { return el.textContent; } if (el.nodeType !== 1) { @@ -37,7 +37,6 @@ export const deserialize = (el) => { return '\n'; } - const { nodeName } = el; let parent = el; @@ -48,15 +47,10 @@ export const deserialize = (el) => { ) { [parent] = el.childNodes; } - - let children = Array.from(parent.childNodes) + const children = Array.from(parent.childNodes) .map(deserialize) .flat(); - if (children.length === 0) { - children = [{ text: '' }]; - } - if (el.nodeName === 'BODY') { return jsx('fragment', {}, children); } @@ -71,9 +65,7 @@ export const deserialize = (el) => { return children.map((child) => jsx('text', attrs, child)); } - return children.map((child) => (typeof child === 'string' - ? jsx('element', ELEMENT_TAGS.P(), [{ text: child }]) - : child)); + return children; }; const withHTML = (incomingEditor) => { @@ -82,14 +74,15 @@ const withHTML = (incomingEditor) => { const editor = incomingEditor; editor.insertData = (data) => { - const html = data.getData('text/html'); + if (!data.types.includes('application/x-slate-fragment')) { + const html = data.getData('text/html'); - - if (html) { - const parsed = new DOMParser().parseFromString(html, 'text/html'); - const fragment = deserialize(parsed.body); - Transforms.insertFragment(editor, fragment); - return; + if (html) { + const parsed = new DOMParser().parseFromString(html, 'text/html'); + const fragment = deserialize(parsed.body); + Transforms.insertFragment(editor, fragment); + return; + } } insertData(data);