Add setCustomParserCss method the the Editor API

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;
     },
 
     /**

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;
   }
 });

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
 };

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;
     },
 

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();
+        });
+      });
     });
   }
 };