From c5428ec3aab5bfbef06a9331eb2dd7026cde8c95 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Fri, 6 Aug 2021 15:19:56 +0200 Subject: [PATCH] Update static methods --- src/dom_components/model/Component.js | 218 +++++++++++++------------- src/parser/model/ParserHtml.js | 1 - 2 files changed, 109 insertions(+), 110 deletions(-) diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 36c75095e..0c06bf6a9 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -1720,132 +1720,132 @@ export default class Component extends Model.extend(Styleable) { const selector = this._getStyleSelector({ id: idPrev }); selector && selector.set({ name: id, label: id }); } +} - static ensureInList(model) { - const list = Component.getList(model); - const id = model.getId(); - const current = list[id]; - - if (!current) { - // Insert in list - list[id] = model; - } else if (current !== model) { - // Create new ID - const nextId = Component.getIncrementId(id, list); - model.setId(nextId); - list[nextId] = model; - } - - model.components().forEach(i => Component.ensureInList(i)); - } - - /** - * Relying simply on the number of components becomes a problem when you - * store and load them back, you might hit collisions with new components - * @param {Model} model - * @return {string} - * @private - */ - static createId(model, opts = {}) { - const list = Component.getList(model); - const { idMap = {} } = opts; - let { id } = model.get('attributes'); - let nextId; - - if (id) { - nextId = Component.getIncrementId(id, list, opts); - model.setId(nextId); - if (id !== nextId) idMap[id] = nextId; - } else { - nextId = Component.getNewId(list); - } +/** + * Detect if the passed element is a valid component. + * In case the element is valid an object abstracted + * from the element will be returned + * @param {HTMLElement} + * @return {Object} + * @private + */ +Component.isComponent = el => { + return { tagName: el.tagName ? el.tagName.toLowerCase() : '' }; +}; +Component.ensureInList = model => { + const list = Component.getList(model); + const id = model.getId(); + const current = list[id]; + + if (!current) { + // Insert in list + list[id] = model; + } else if (current !== model) { + // Create new ID + const nextId = Component.getIncrementId(id, list); + model.setId(nextId); list[nextId] = model; - return nextId; } - static getNewId(list) { - const count = Object.keys(list).length; - // Testing 1000000 components with `+ 2` returns 0 collisions - const ilen = count.toString().length + 2; - const uid = (Math.random() + 1.1).toString(36).slice(-ilen); - let newId = `i${uid}`; + model.components().forEach(i => Component.ensureInList(i)); +}; - while (list[newId]) { - newId = Component.getNewId(list); - } +/** + * Relying simply on the number of components becomes a problem when you + * store and load them back, you might hit collisions with new components + * @param {Model} model + * @return {string} + * @private + */ +Component.createId = (model, opts = {}) => { + const list = Component.getList(model); + const { idMap = {} } = opts; + let { id } = model.get('attributes'); + let nextId; + + if (id) { + nextId = Component.getIncrementId(id, list, opts); + model.setId(nextId); + if (id !== nextId) idMap[id] = nextId; + } else { + nextId = Component.getNewId(list); + } + + list[nextId] = model; + return nextId; +}; - return newId; - } +Component.getNewId = list => { + const count = Object.keys(list).length; + // Testing 1000000 components with `+ 2` returns 0 collisions + const ilen = count.toString().length + 2; + const uid = (Math.random() + 1.1).toString(36).slice(-ilen); + let newId = `i${uid}`; - static getIncrementId(id, list, opts = {}) { - const { keepIds = [] } = opts; - let counter = 1; - let newId = id; + while (list[newId]) { + newId = Component.getNewId(list); + } - if (keepIds.indexOf(id) < 0) { - while (list[newId]) { - counter++; - newId = `${id}-${counter}`; - } - } + return newId; +}; - return newId; - } +Component.getIncrementId = (id, list, opts = {}) => { + const { keepIds = [] } = opts; + let counter = 1; + let newId = id; - /** - * The list of components is taken from the Components module. - * Initially, the list, was set statically on the Component object but it was - * not ok, as it was shared between multiple editor instances - */ - static getList(model) { - const { opt = {} } = model; - const { domc, em } = opt; - const dm = domc || (em && em.get('DomComponents')); - return dm ? dm.componentsById : {}; + if (keepIds.indexOf(id) < 0) { + while (list[newId]) { + counter++; + newId = `${id}-${counter}`; + } } - /** - * This method checks, for each parsed component and style object - * (are not Components/CSSRules yet), for duplicated id and fixes them - * This method is used in Components.js just after the parsing - */ - static checkId(components, styles = [], list = {}, opts = {}) { - const comps = isArray(components) ? components : [components]; - const { keepIds = [] } = opts; - comps.forEach(comp => { - const { attributes = {}, components } = comp; - const { id } = attributes; - - // Check if we have collisions with current components - if (id && list[id] && keepIds.indexOf(id) < 0) { - const newId = Component.getIncrementId(id, list); - attributes.id = newId; - // Update passed styles - isArray(styles) && - styles.forEach(style => { - const { selectors } = style; - selectors.forEach((sel, idx) => { - if (sel === `#${id}`) selectors[idx] = `#${newId}`; - }); - }); - } + return newId; +}; - components && Component.checkId(components, styles, list, opts); - }); - } -} +/** + * The list of components is taken from the Components module. + * Initially, the list, was set statically on the Component object but it was + * not ok, as it was shared between multiple editor instances + */ +Component.getList = model => { + const { opt = {} } = model; + const { domc, em } = opt; + const dm = domc || (em && em.get('DomComponents')); + return dm ? dm.componentsById : {}; +}; /** - * Detect if the passed element is a valid component. - * In case the element is valid an object abstracted - * from the element will be returned - * @param {HTMLElement} - * @return {Object} - * @private + * This method checks, for each parsed component and style object + * (are not Components/CSSRules yet), for duplicated id and fixes them + * This method is used in Components.js just after the parsing */ -Component.isComponent = el => { - return { tagName: el.tagName ? el.tagName.toLowerCase() : '' }; +Component.checkId = (components, styles = [], list = {}, opts = {}) => { + const comps = isArray(components) ? components : [components]; + const { keepIds = [] } = opts; + comps.forEach(comp => { + const { attributes = {}, components } = comp; + const { id } = attributes; + + // Check if we have collisions with current components + if (id && list[id] && keepIds.indexOf(id) < 0) { + const newId = Component.getIncrementId(id, list); + attributes.id = newId; + // Update passed styles + isArray(styles) && + styles.forEach(style => { + const { selectors } = style; + selectors.forEach((sel, idx) => { + if (sel === `#${id}`) selectors[idx] = `#${newId}`; + }); + }); + } + + components && Component.checkId(components, styles, list, opts); + }); }; Component.prototype.defaults = { diff --git a/src/parser/model/ParserHtml.js b/src/parser/model/ParserHtml.js index 4e090ad21..654031e73 100644 --- a/src/parser/model/ParserHtml.js +++ b/src/parser/model/ParserHtml.js @@ -128,7 +128,6 @@ export default config => { // the first with a valid result will be that component for (let it = 0; it < ct.length; it++) { const compType = ct[it]; - console.log({ compType, model: compType.model }); obj = compType.model.isComponent(node); if (obj) {