diff --git a/src/editor/deserialize.js b/src/editor/deserialize.js index aabe272d..51108be7 100644 --- a/src/editor/deserialize.js +++ b/src/editor/deserialize.js @@ -1,6 +1,5 @@ import { jsx } from 'slate-hyperscript'; import { Text } from 'slate'; -// import { TD } from './../constants'; const TEXT_NODE = 3; const ELEMENT_NODE = 1; @@ -9,13 +8,10 @@ export const deserialize = (editor, el) => { const { htmlTagsToSlate } = editor; // console.log('des:', el.nodeType, el); - if (el.textContent === '\n') { - console.log('el', el.textContent); - } if (el.nodeType === TEXT_NODE) { return el.textContent === '\n' ? ' ' - : el.textContent.replace(/\n$/g, '').replace(/\n/g, ' '); + : el.textContent.replace(/\n$/g, ' ').replace(/\n/g, ' '); } else if (el.nodeType !== ELEMENT_NODE) { return null; } else if (el.nodeName === 'BR') { @@ -51,16 +47,10 @@ export const blockTagDeserializer = (tagname) => (editor, el) => { let children = deserializeChildren(el, editor); // normalizes block elements so that they're never empty - // if (tagname === 'p') debugger; - // console.log('deserialize', tagname); const hasValidChildren = children.find((c) => !!c); if (!(editor.isInline(el) || editor.isVoid(el)) && !hasValidChildren) { children = [{ text: '' }]; - // console.log('adding children', el); } - // if ([TD].includes(tagname) && children.length === 0) { - // children = [{ text: '' }]; - // } return jsx('element', { type: tagname }, children); }; diff --git a/src/editor/extensions/insertData.js b/src/editor/extensions/insertData.js index 66046908..148733cb 100644 --- a/src/editor/extensions/insertData.js +++ b/src/editor/extensions/insertData.js @@ -2,16 +2,16 @@ import { Editor, Text, Transforms } from 'slate'; import { deserialize } from 'volto-slate/editor/deserialize'; export const insertData = (editor) => { - const { insertData } = editor; + // const { insertData } = editor; editor.insertData = (data) => { // console.log('data in custom editor.insertData', data); + // TODO: use the rtf data to get the embedded images. // const text = data.getData('text/rtf'); // console.log('text', text); let fragment; - const html = data.getData('text/html'); fragment = data.getData('application/x-slate-fragment'); if (fragment) { @@ -21,55 +21,50 @@ export const insertData = (editor) => { return; } - if (html) { - const parsed = new DOMParser().parseFromString(html, 'text/html'); - - const body = - parsed.getElementsByTagName('google-sheets-html-origin').length > 0 - ? parsed.querySelector('google-sheets-html-origin > table') - : parsed.body; - - fragment = deserialize(editor, body); - console.log('deserialize body', body); - console.log('parsed body', parsed); - console.log('parsed fragment', fragment); - - // If there is text in the editor, insert a fragment, otherwise insert - // nodes - if (Editor.string(editor, [])) { - if ( - Array.isArray(fragment) && - fragment.findIndex((b) => Editor.isInline(b) || Text.isText(b)) > -1 - ) { - console.log('insert fragment'); - Transforms.insertFragment(editor, fragment); - return; - } + const html = data.getData('text/html'); + // Avoid responding to drag/drop and others + if (!html) return; // insertData(data) + + const parsed = new DOMParser().parseFromString(html, 'text/html'); + + const body = + parsed.getElementsByTagName('google-sheets-html-origin').length > 0 + ? parsed.querySelector('google-sheets-html-origin > table') + : parsed.body; + + fragment = deserialize(editor, body); + console.log('deserialize body', body); + console.log('parsed body', parsed); + console.log('parsed fragment', fragment); + + // If there is text in the editor, insert a fragment, otherwise insert + // nodes + if (Editor.string(editor, [])) { + if ( + Array.isArray(fragment) && + fragment.findIndex((b) => Editor.isInline(b) || Text.isText(b)) > -1 + ) { + console.log('insert fragment'); + Transforms.insertFragment(editor, fragment); + return; } - console.log('insert nodes'); - Transforms.insertNodes( - editor, - fragment.filter((n) => !Text.isText(n)), - ); - - // TODO: This used to solve a problem when pasting images. What is it? - // Transforms.deselect(editor); - - return; } - - // Don't respond to drag/drop and others - // insertData(data); + console.log('insert nodes'); + Transforms.insertNodes( + editor, + fragment.filter((n) => !Text.isText(n)), + ); + + // TODO: This used to solve a problem when pasting images. What is it? + // Transforms.deselect(editor); }; return editor; }; -// // // Delete the empty placeholder paragraph, if we can // // Transforms.deselect(editor); // Transforms.removeNodes(editor); -// // // Wrap the text nodes of the fragment in paragraphs // // fragment = Array.isArray(fragment) // // ? fragment.map((b) => @@ -77,12 +72,3 @@ export const insertData = (editor) => { // // ) // // : fragment; // // console.log('Pasting in empty block:', fragment); -// } - -// TODO: use Editor.isEmpty(editor, editor); - -// TODO: insertNodes works a lot better then insertFragment (needs less cleanup) -// but insertFragment is more reliable to get content inserted -// We can't afford to insert a fragment, we want Slate to clean up -// Editor.insertFragment(editor, fragment); -// Transforms.insertFragment(editor, fragment);