diff --git a/src/editor/index.js b/src/editor/index.js index c2a1b44bf..72fb0c853 100644 --- a/src/editor/index.js +++ b/src/editor/index.js @@ -567,6 +567,30 @@ module.exports = config => { this.RichTextEditor.customRte = obj; }, + /** + * Replace the default CSS parser with a custom one. + * The parser function receives a CSS string as a parameter and expects + * an array of CSSRule objects as a result. If you need to remove the + * custom parser, pass the `null` to this method + * @param {Function|null} parser Parser function + * @return {this} + * @example + * editor.setCustomParserCss(css => { + * const result = []; + * // ... parse the CSS string + * result.push({ + * selectors: '.someclass, div .otherclass', + * style: { color: 'red' } + * }) + * // ... + * return result; + * }); + */ + setCustomParserCss(parser) { + em.setCustomParserCss(parser); + return this; + }, + /** * Attach event * @param {string} event Event name @@ -574,7 +598,8 @@ module.exports = config => { * @return {this} */ on(event, callback) { - return em.on(event, callback); + em.on(event, callback); + return this; }, /** @@ -584,7 +609,8 @@ module.exports = config => { * @return {this} */ off(event, callback) { - return em.off(event, callback); + em.off(event, callback); + return this; }, /** @@ -593,7 +619,8 @@ module.exports = config => { * @return {this} */ trigger(event) { - return em.trigger.apply(em, arguments); + em.trigger.apply(em, arguments); + return this; }, /** diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index 561fc599c..b757bd845 100644 --- a/src/editor/model/Editor.js +++ b/src/editor/model/Editor.js @@ -644,6 +644,10 @@ module.exports = Backbone.Model.extend({ }, getCustomParserCss() { - return null; + return this.get('Parser').parserCss; + }, + + setCustomParserCss(parser) { + this.get('Parser').parserCss = parser; } }); diff --git a/src/parser/config/config.js b/src/parser/config/config.js index 31922f6db..5afc514ca 100644 --- a/src/parser/config/config.js +++ b/src/parser/config/config.js @@ -1,3 +1,9 @@ module.exports = { - textTags: ['br', 'b', 'i', 'u', 'a', 'ul', 'ol'] + textTags: ['br', 'b', 'i', 'u', 'a', 'ul', 'ol'], + + // Custom CSS parser + parserCss: null, + + // Custom HTML parser + parserHtml: null }; diff --git a/src/parser/index.js b/src/parser/index.js index c9d6bb021..15d0cde39 100644 --- a/src/parser/index.js +++ b/src/parser/index.js @@ -1,13 +1,17 @@ module.exports = () => { - var c = {}, + let conf = {}, defaults = require('./config/config'), parserCss = require('./model/ParserCss'), parserHtml = require('./model/ParserHtml'); - var pHtml, pCss; + let pHtml, pCss; return { compTypes: '', + parserCss: null, + + parserHtml: null, + /** * Name of the module * @type {String} @@ -30,13 +34,12 @@ module.exports = () => { * } * ... */ - init(config) { - c = config || {}; - for (var name in defaults) { - if (!(name in c)) c[name] = defaults[name]; - } - pHtml = new parserHtml(c); - pCss = new parserCss(c); + init(config = {}) { + conf = { ...defaults, ...config }; + this.parserCss = conf.parserCss || null; + this.parserHtml = conf.parserHtml || null; + pHtml = new parserHtml(conf); + pCss = new parserCss(conf); return this; }, diff --git a/test/specs/parser/model/ParserCss.js b/test/specs/parser/model/ParserCss.js index 4cd64359f..756fd5e4b 100644 --- a/test/specs/parser/model/ParserCss.js +++ b/test/specs/parser/model/ParserCss.js @@ -4,7 +4,7 @@ const Selector = require('selector_manager/model/Selector'); module.exports = { run() { - describe.only('ParserCss', () => { + describe('ParserCss', () => { let obj; let config; let customParser; @@ -346,6 +346,41 @@ module.exports = { }; expect(obj.parse(str)).toEqual([result]); }); + + test('Parse CSS with custom parser', () => { + var str = '.test1 { color:red }'; + var result = { + selectors: ['test1'], + style: { color: 'red' } + }; + obj = new ParserCss({ + em: { + getCustomParserCss: () => () => [result] + } + }); + expect(obj.parse(str)).toEqual([result]); + }); + + test.only('Parse CSS with custom async parser', done => { + var str = '.test1 { color:red }'; + var result = { + selectors: ['test1'], + style: { color: 'red' } + }; + obj = new ParserCss({ + em: { + getCustomParserCss: () => { + return async function() { + return [result]; + }; + } + } + }); + obj.parse(str).then(res => { + expect(res).toEqual([result]); + done(); + }); + }); }); } };