diff --git a/src/dom_components/model/ComponentComment.ts b/src/dom_components/model/ComponentComment.ts index b24c9c21e..dd62ccdbb 100644 --- a/src/dom_components/model/ComponentComment.ts +++ b/src/dom_components/model/ComponentComment.ts @@ -13,7 +13,6 @@ export default class ComponentComment extends ComponentTextNode { static isComponent(el: HTMLElement) { if (el.nodeType == 8) { return { - tagName: 'NULL', type: 'comment', content: el.textContent ?? '', }; diff --git a/src/parser/config/config.ts b/src/parser/config/config.ts index f61ff1178..fde821a0c 100644 --- a/src/parser/config/config.ts +++ b/src/parser/config/config.ts @@ -46,6 +46,12 @@ export interface ParserConfig { */ textTags?: string[]; + /** + * Let the editor know which Component types should be treated as part of the text component. + * @default ['text', 'textnode', 'comment'] + */ + textTypes?: string[]; + /** * Custom CSS parser. * @see https://grapesjs.com/docs/guides/Custom-CSS-parser.html @@ -71,6 +77,7 @@ export interface ParserConfig { const config: ParserConfig = { textTags: ['br', 'b', 'i', 'u', 'a', 'ul', 'ol'], + textTypes: ['text', 'textnode', 'comment'], parserCss: undefined, parserHtml: undefined, optionsHtml: { diff --git a/src/parser/model/ParserHtml.ts b/src/parser/model/ParserHtml.ts index db5f86d80..df0699ab4 100644 --- a/src/parser/model/ParserHtml.ts +++ b/src/parser/model/ParserHtml.ts @@ -260,6 +260,7 @@ const ParserHtml = (em?: EditorModel, config: ParserConfig & { returnArray?: boo // be text too otherwise I'm unable to edit texnodes const comps = model.components; if (!model.type && comps) { + const { textTypes = [], textTags = [] } = config; let allTxt = 1; let foundTextNode = 0; @@ -267,7 +268,7 @@ const ParserHtml = (em?: EditorModel, config: ParserConfig & { returnArray?: boo const comp = comps[ci]; const cType = comp.type; - if (['text', 'textnode'].indexOf(cType) < 0 && config.textTags!.indexOf(comp.tagName) < 0) { + if (!textTypes.includes(cType) && !textTags.includes(comp.tagName)) { allTxt = 0; break; } @@ -283,7 +284,7 @@ const ParserHtml = (em?: EditorModel, config: ParserConfig & { returnArray?: boo } // If tagName is still empty and is not a textnode, do not push it - if (!model.tagName && model.type != 'textnode') { + if (!model.tagName && isUndefined(model.content)) { continue; } diff --git a/test/specs/parser/model/ParserHtml.ts b/test/specs/parser/model/ParserHtml.ts index e4001e950..f588824a4 100644 --- a/test/specs/parser/model/ParserHtml.ts +++ b/test/specs/parser/model/ParserHtml.ts @@ -12,6 +12,7 @@ describe('ParserHtml', () => { var dom = new DomComponents(em); obj = ParserHtml(em, { textTags: ['br', 'b', 'i', 'u'], + textTypes: ['text', 'textnode', 'comment'], returnArray: true, }); obj.compTypes = dom.componentTypes as any; @@ -267,6 +268,36 @@ describe('ParserHtml', () => { expect(obj.parse(str).html).toEqual(result); }); + test('Parse text with few text tags and comment', () => { + var str = '