@mirrormedia/lilith-draft-editor 1.1.0-alpha.3 → 1.1.0-alpha.5

package/lib/draft-js/draft-converter/atomic-block-processor.js

@@ -4,23 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _lodash = _interopRequireDefault(require("lodash"));
+
 var _apiDataInstance = _interopRequireDefault(require("./api-data-instance"));
+
 var _entities = _interopRequireDefault(require("./entities"));
+
 var _server = _interopRequireDefault(require("react-dom/server"));
+
 var _draftJs = require("draft-js");
+
 var _draftConvert = require("draft-convert");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/* eslint-disable @typescript-eslint/no-var-requires */
 
+/* eslint-disable @typescript-eslint/no-var-requires */
 // import sizeOf from 'image-size';
-
 // eslint-disable-line
-
 // import htmlparser2 from 'htmlparser2'
 // eslint-disable-next-line no-undef
 const htmlparser2 = require('htmlparser2');
-
 /**
  *  @typedef {Object} DraftEditor.TableEntity.TableStyles
  *  @property {Record<string, string>[]} rows
@@ -32,23 +36,26 @@ const htmlparser2 = require('htmlparser2');
  *  @typedef {RawDraftContentState[][]} DraftEditor.TableEntity.TableData
  */
 
+
 const processor = {
   convertBlock(entityMap, block) {
     let alignment = 'center';
     let content;
     let entityRange = block.entityRanges[0];
-    let styles = {};
-    // current block's entity data
+    let styles = {}; // current block's entity data
     // ex:
     // entity.type = IMAGE, entity.data={id,name,url...}
+
     const entity = entityMap[entityRange.key];
-    let type = _lodash.default.get(entity, 'type', '');
 
-    // backward compatible. Old entity type might be lower case
+    let type = _lodash.default.get(entity, 'type', ''); // backward compatible. Old entity type might be lower case
+
+
     switch (type && type.toUpperCase()) {
       case _entities.default.INFOBOX.type:
         {
           var _entity$data, _entity$data2;
+
           // About INFOBOX atomic block entity data structure,
           // see `../views/editor/info-box.tsx` for more information.
           content = [{
@@ -57,29 +64,37 @@ const processor = {
           }];
           break;
         }
+
       case _entities.default.COLORBOX.type:
         {
           var _entity$data3, _entity$data4;
+
           content = [{
             color: entity === null || entity === void 0 ? void 0 : (_entity$data3 = entity.data) === null || _entity$data3 === void 0 ? void 0 : _entity$data3.color,
             body: entity === null || entity === void 0 ? void 0 : (_entity$data4 = entity.data) === null || _entity$data4 === void 0 ? void 0 : _entity$data4.body
           }];
           break;
         }
+
       case _entities.default.TABLE.type:
         {
           var _content, _content2;
+
           // About TABLE atomic block entity data structure,
           // see `../views/editor/table.tsx` for more information.
           content = entity === null || entity === void 0 ? void 0 : entity.data;
           /** @type DraftEditor.TableEntity.TableStyles */
+
           const tableStyles = (_content = content) === null || _content === void 0 ? void 0 : _content.tableStyles;
           /** @type DraftEditor.TableEntity.TableData */
+
           const tableData = (_content2 = content) === null || _content2 === void 0 ? void 0 : _content2.tableData;
           const rowsJsx = tableData === null || tableData === void 0 ? void 0 : tableData.map((row, rIndex) => {
             var _tableStyles$rows;
+
             const colsJsx = row === null || row === void 0 ? void 0 : row.map((col, cIndex) => {
               var _tableStyles$columns, _tableStyles$cells, _tableStyles$cells$rI;
+
               const colStyle = tableStyles === null || tableStyles === void 0 ? void 0 : (_tableStyles$columns = tableStyles.columns) === null || _tableStyles$columns === void 0 ? void 0 : _tableStyles$columns[cIndex];
               const cellStyle = tableStyles === null || tableStyles === void 0 ? void 0 : (_tableStyles$cells = tableStyles.cells) === null || _tableStyles$cells === void 0 ? void 0 : (_tableStyles$cells$rI = _tableStyles$cells[rIndex]) === null || _tableStyles$cells$rI === void 0 ? void 0 : _tableStyles$cells$rI[cIndex];
               return /*#__PURE__*/React.createElement("td", {
@@ -94,17 +109,20 @@ const processor = {
               key: `row_${rIndex}`,
               style: tableStyles === null || tableStyles === void 0 ? void 0 : (_tableStyles$rows = tableStyles.rows) === null || _tableStyles$rows === void 0 ? void 0 : _tableStyles$rows[rIndex]
             }, colsJsx);
-          });
-          // Use `React.renderToStsaticMarkup` to generate plain HTML string
+          }); // Use `React.renderToStsaticMarkup` to generate plain HTML string
+
           const html = _server.default.renderToStaticMarkup( /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, rowsJsx)));
+
           content = [{
             html
           }];
           break;
         }
+
       case _entities.default.DIVIDER.type:
         content = ['<hr>'];
         break;
+
       case _entities.default.BLOCKQUOTE.type:
         // this is different from default blockquote of draftjs
         // so we name our specific blockquote as 'quoteby'
@@ -113,6 +131,7 @@ const processor = {
         content = _lodash.default.get(entity, 'data');
         content = Array.isArray(content) ? content : [content];
         break;
+
       case _entities.default.AUDIO.type:
       case _entities.default.IMAGE.type:
       case _entities.default.IMAGEDIFF.type:
@@ -128,13 +147,17 @@ const processor = {
         content = _lodash.default.get(entity, 'data');
         content = Array.isArray(content) ? content : [content];
         break;
+
       case _entities.default.IMAGELINK.type:
         {
           // use Embedded component to dangerouslySetInnerHTML
           type = _entities.default.EMBEDDEDCODE.type;
           alignment = entity.data && entity.data.alignment || alignment;
+
           let description = _lodash.default.get(entity, ['data', 'description'], '');
+
           let url = _lodash.default.get(entity, ['data', 'url'], '');
+
           content = [{
             caption: description,
             embeddedCodeWithoutScript: `<img alt="${description}" src="${url}" class="img-responsive"/>`,
@@ -142,11 +165,15 @@ const processor = {
           }];
           break;
         }
+
       case _entities.default.EMBEDDEDCODE.type:
         {
           alignment = entity.data && entity.data.alignment || alignment;
+
           let caption = _lodash.default.get(entity, ['data', 'caption'], '');
+
           let embeddedCode = _lodash.default.get(entity, ['data', 'embeddedCode'], '');
+
           let script = {};
           let scripts = [];
           let scriptTagStart = false;
@@ -186,11 +213,12 @@ const processor = {
           }];
           break;
         }
+
       default:
         return;
-    }
+    } // block type of api data should be lower case
+
 
-    // block type of api data should be lower case
     return new _apiDataInstance.default({
       id: block.key,
       alignment,
@@ -199,6 +227,7 @@ const processor = {
       styles
     });
   }
+
 };
 var _default = processor;
 exports.default = _default;

package/lib/draft-js/draft-converter/entities.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 // 'use strict';
-
 const ENTITY = {
   DIVIDER: {
     type: 'DIVIDER'

package/lib/draft-js/draft-converter/index.js

@@ -4,19 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+
 var _immutable = require("immutable");
+
 var _lodash = _interopRequireDefault(require("lodash"));
+
 var InlineStylesProcessor = _interopRequireWildcard(require("./inline-styles-processor"));
+
 var _apiDataInstance = _interopRequireDefault(require("./api-data-instance"));
+
 var _atomicBlockProcessor = _interopRequireDefault(require("./atomic-block-processor"));
+
 var _entities = _interopRequireDefault(require("./entities"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/draftRawToHtml.js
 
+// Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/draftRawToHtml.js
 // 'use strict';
-
 let defaultBlockTagMap = {
   atomic: `<div>%content%</div>`,
   blockquote: `<blockquote>%content%</blockquote>`,
@@ -46,6 +54,7 @@ let defaultEntityTagMap = {
   [_entities.default.INFOBOX.type]: ['<div class="info-box-container center"><div class="info-box-title"><%= data.title %></div><div class="info-box-body"><%= data.body %></div>', '</div>'],
   [_entities.default.STOREDIMAGE.type]: ['<img alt="<%= data.name %>" src="<%= data.url %>" srcset="<%= data.urlMobileSized %> 800w,  <%= data.urlTabletSized %> 1280w, <%= data.urlDesktopSized %> 2400w" class="center">', '</img>'],
   [_entities.default.IMAGE.type]: ['<img alt="<%=data.name%>" src="<%=data.url%>" srcset="<%= data.mobile.url %> 800w,  <%= data.tablet.url %> 1280w, <%= data.desktop.url %> 2400w" class="center">', '</img>'],
+
   /*[ENTITY.IMAGEDIFF.type]: ['<!-- imageDiff component start --> <ol class="image-diff-container"> <% _.forEach(data, function(image, index) { if (index > 1) { return; } %><li class="image-diff-item"><img src="<%- image.url %>" /></li><% }); %>', '</ol><!-- imageDiff component end-->'],
   [ENTITY.IMAGELINK.type]: ['<img alt="<%= data.description %>" src="<%= data.url %>" class="<%= data.alignment %>">', '</img>'],*/
   [_entities.default.LINK.type]: ['<a target="_blank" href="<%= data.url %>">', '</a>'],
@@ -57,35 +66,39 @@ let nestedTagMap = {
   'ordered-list-item': ['<ol>', '</ol>'],
   'unordered-list-item': ['<ul>', '</ul>']
 };
+
 function _convertInlineStyle(block, entityMap, blockTagMap, entityTagMap) {
   return blockTagMap[block.type] ? blockTagMap[block.type].replace('%content%', InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block)) : blockTagMap.default.replace('%content%', InlineStylesProcessor.convertToHtml(inlineTagMap, block));
 }
+
 function _convertBlocksToHtml(blocks, entityMap, blockTagMap, entityTagMap) {
   let html = '';
   let nestLevel = []; // store the list type of the previous item: null/ol/ul
+
   blocks.forEach(block => {
     // create tag for <ol> or <ul>: deal with ordered/unordered list item
     // if the block is a list-item && the previous block is not a list-item
     if (nestedTagMap[block.type] && nestLevel[0] !== block.type) {
       html += nestedTagMap[block.type][0]; // start with <ol> or <ul>
+
       nestLevel.unshift(block.type);
-    }
+    } // end tag with </ol> or </ul>: deal with ordered/unordered list item
+
 
-    // end tag with </ol> or </ul>: deal with ordered/unordered list item
     if (nestLevel.length > 0 && nestLevel[0] !== block.type) {
       html += nestedTagMap[nestLevel.shift()][1]; // close with </ol> or </ul>
     }
 
     html += _convertInlineStyle(block, entityMap, blockTagMap, entityTagMap);
-  });
+  }); // end tag with </ol> or </ul>: or if it is the last block
 
-  // end tag with </ol> or </ul>: or if it is the last block
   if (blocks.length > 0 && nestedTagMap[blocks[blocks.length - 1].type]) {
     html += nestedTagMap[nestLevel.shift()][1]; // close with </ol> or </ul>
   }
 
   return html;
 }
+
 function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
   let apiDataArr = (0, _immutable.List)();
   let content = [];
@@ -102,6 +115,7 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
         content = [];
         nestLevel.shift();
       }
+
       if (block.type.startsWith('atomic') || block.type.startsWith('media')) {
         try {
           apiDataArr = apiDataArr.push(_atomicBlockProcessor.default.convertBlock(entityMap, block));
@@ -110,6 +124,7 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
         }
       } else {
         var _block$data;
+
         let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block);
         const type = block.type;
         const textAlign = (_block$data = block.data) === null || _block$data === void 0 ? void 0 : _block$data.textAlign;
@@ -121,9 +136,8 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
         }));
       }
     } else {
-      let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block);
+      let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block); // previous block is not an item-list block
 
-      // previous block is not an item-list block
       if (nestLevel.length === 0) {
         nestLevel.unshift(block.type);
         content.push(converted);
@@ -141,9 +155,8 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
         nestLevel[0] = block.type;
       }
     }
-  });
+  }); // last block is a item-list
 
-  // last block is a item-list
   if (blocks.length > 0 && nestLevel.length > 0) {
     let block = blocks[blocks.length - 1];
     apiDataArr = apiDataArr.push(new _apiDataInstance.default({
@@ -152,8 +165,10 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
       content: content
     }));
   }
+
   return apiDataArr;
 }
+
 function convertRawToHtml(raw, blockTagMap, entityTagMap) {
   blockTagMap = _lodash.default.merge({}, defaultBlockTagMap, blockTagMap);
   entityTagMap = entityTagMap || defaultEntityTagMap;
@@ -164,17 +179,21 @@ function convertRawToHtml(raw, blockTagMap, entityTagMap) {
   html = _convertBlocksToHtml(blocks, entityMap, blockTagMap, entityTagMap);
   return html;
 }
+
 function convertRawToApiData(raw) {
   let apiData;
   raw = raw || {};
   const blocks = Array.isArray(raw.blocks) ? raw.blocks : [];
   const entityMap = typeof raw.entityMap === 'object' ? raw.entityMap : {};
+
   let entityTagMap = _lodash.default.merge({}, defaultEntityTagMap, {
     [_entities.default.ANNOTATION.type]: [`<span data-entity-type="annotation" data-annotation-body="<%= data.bodyEscapedHTML %>">`, '</span>']
   });
+
   apiData = convertBlocksToApiData(blocks, entityMap, entityTagMap);
   return apiData;
 }
+
 var _default = {
   convertToHtml: convertRawToHtml,
   convertToApiData: convertRawToApiData

package/lib/draft-js/draft-converter/inline-styles-processor.js

@@ -4,56 +4,72 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.convertToHtml = convertToHtml;
+
 var _lodash = _interopRequireDefault(require("lodash"));
+
 var _const = require("../const");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/processInlineStylesAndEntities.js
 
+// Modified from https://github.com/dburrows/draft-js-basic-html-editor/blob/master/src/utils/processInlineStylesAndEntities.js
 function tagForCustomInlineStyle(style) {
   const customInlineStylePrefixs = [_const.CUSTOM_STYLE_PREFIX_FONT_COLOR, _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR];
   const stylePrefix = customInlineStylePrefixs.find(prefix => style.startsWith(prefix));
   let tag, value;
+
   switch (stylePrefix) {
     case _const.CUSTOM_STYLE_PREFIX_FONT_COLOR:
       value = style.split(_const.CUSTOM_STYLE_PREFIX_FONT_COLOR)[1];
       tag = [`<span style="color: ${value}">`, '</span>'];
       break;
+
     case _const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR:
       value = style.split(_const.CUSTOM_STYLE_PREFIX_BACKGROUND_COLOR)[1];
       tag = [`<span style="background-color: ${value}">`, '</span>'];
       break;
+
     default:
       break;
   }
+
   return tag;
 }
+
 function _fullfilIntersection(block) {
   // SORT BEFORE PROCESSING
   let sortedISRanges = _lodash.default.sortBy(block.inlineStyleRanges, 'offset');
+
   let sortedEntityRanges = _lodash.default.sortBy(block.entityRanges, 'offset');
+
   let splitedISInline = [];
+
   for (let i = 0; i < sortedEntityRanges.length; i++) {
     let entityRange = sortedEntityRanges[i];
+
     for (let j = 0; j < sortedISRanges.length; j++) {
       let entityOffset = _lodash.default.get(entityRange, 'offset', 0);
+
       let entityLength = _lodash.default.get(entityRange, 'length', 0);
+
       let inlineLength = _lodash.default.get(sortedISRanges, [j, 'length'], 0);
+
       let inlineOffset = _lodash.default.get(sortedISRanges, [j, 'offset'], 0);
+
       let inlineStyle = _lodash.default.get(sortedISRanges, [j, 'style'], '');
+
       let nextEntityOffset = _lodash.default.get(sortedEntityRanges, [i + 1, 'offset'], 0);
-      let nextEntityLength = _lodash.default.get(sortedEntityRanges, [i + 1, 'length'], 0);
 
-      // handle intersections of inline style and entity
+      let nextEntityLength = _lodash.default.get(sortedEntityRanges, [i + 1, 'length'], 0); // handle intersections of inline style and entity
       // <a></a> is entity
       // <abbr></abbr> is next entity
       // <strong></strong>  is inline style
-      if (nextEntityOffset >= inlineOffset && nextEntityOffset < inlineOffset + inlineLength && nextEntityOffset + nextEntityLength > inlineOffset + inlineLength &&
-      // <a><strong></a></strong>
+
+
+      if (nextEntityOffset >= inlineOffset && nextEntityOffset < inlineOffset + inlineLength && nextEntityOffset + nextEntityLength > inlineOffset + inlineLength && // <a><strong></a></strong>
       entityOffset < inlineOffset && entityOffset + entityLength > inlineOffset && entityOffset + entityLength <= inlineOffset + inlineLength) {
         // <strong><abbr></strong></abbr>
         // situation: <a><strong></a><abbr></strong></abbr>
         // should be: <a><strong></strong></a><strong></strong><abbr><strong></strong></abbr>
-
         // skip next entity checking
         i = i + 1;
         splitedISInline.push({
@@ -105,92 +121,109 @@ function _fullfilIntersection(block) {
       }
     }
   }
+
   _lodash.default.forEachRight(splitedISInline, ele => {
     sortedISRanges.splice(ele.index, 1, ...ele.replace);
   });
+
   return sortedISRanges;
 }
+
 function _inlineTag(inlineTagMap, inlineStyleRanges, tagInsertMap = {}) {
   // SORT BEFORE PROCESSING
-  let sortedRanges = _lodash.default.sortBy(inlineStyleRanges, 'offset');
+  let sortedRanges = _lodash.default.sortBy(inlineStyleRanges, 'offset'); // map all the tag insertions we're going to do
+
 
-  // map all the tag insertions we're going to do
   sortedRanges.forEach(function (range) {
-    let tag = inlineTagMap[range.style];
+    let tag = inlineTagMap[range.style]; // handle dynamic inline style
 
-    // handle dynamic inline style
     if (!tag) {
       tag = tagForCustomInlineStyle(range.style);
     }
+
     if (!tagInsertMap[range.offset]) {
       tagInsertMap[range.offset] = [];
-    }
+    } // add starting tag to the end of the array to form the tag nesting
+
 
-    // add starting tag to the end of the array to form the tag nesting
     tagInsertMap[range.offset].push(tag[0]);
+
     if (tag[1]) {
       if (!tagInsertMap[range.offset + range.length]) {
         tagInsertMap[range.offset + range.length] = [];
-      }
-      // add closing tags to start of array, otherwise tag nesting will be invalid
+      } // add closing tags to start of array, otherwise tag nesting will be invalid
+
+
       tagInsertMap[range.offset + range.length].unshift(tag[1]);
     }
   });
   return tagInsertMap;
 }
+
 function _entityTag(entityTagMap, entityMap, entityRanges, tagInsertMap = {}) {
   _lodash.default.forEach(entityRanges, range => {
     let entity = entityMap[range.key];
     let type = entity.type && entity.type.toUpperCase();
     let tag = entityTagMap[type];
     let data = entity.data;
+
     let compiledTag0 = _lodash.default.template(tag[0], {
       variable: 'data'
     })(data);
+
     let compiledTag1 = _lodash.default.template(tag[1], {
       variable: 'data'
     })(data);
+
     if (!tagInsertMap[range.offset]) {
       tagInsertMap[range.offset] = [];
-    }
+    } // add starting tag
+
 
-    // add starting tag
     tagInsertMap[range.offset].push(compiledTag0);
+
     if (tag[1]) {
       if (!tagInsertMap[range.offset + range.length]) {
         tagInsertMap[range.offset + range.length] = [];
-      }
-      // add closing tags to start of array, otherwise tag nesting will be invalid
+      } // add closing tags to start of array, otherwise tag nesting will be invalid
+
+
       tagInsertMap[range.offset + range.length].unshift(compiledTag1);
     }
   });
+
   return tagInsertMap;
 }
+
 function convertToHtml(inlineTagMap, entityTagMap, entityMap, block) {
   //  exit if there is no inlineStyleRanges/entityRanges or length === 0 as well
   if (!block.inlineStyleRanges && !block.entityRanges || block.inlineStyleRanges.length === 0 && block.entityRanges.length === 0) {
     return block.text;
   }
+
   let html = block.text;
+
   let inlineStyleRanges = _fullfilIntersection(block);
+
   let tagInsertMap = {};
   tagInsertMap = _entityTag(entityTagMap, entityMap, block.entityRanges, tagInsertMap);
-  tagInsertMap = _inlineTag(inlineTagMap, inlineStyleRanges, tagInsertMap);
+  tagInsertMap = _inlineTag(inlineTagMap, inlineStyleRanges, tagInsertMap); // sort on position, as we'll need to keep track of offset
 
-  // sort on position, as we'll need to keep track of offset
   let orderedKeys = Object.keys(tagInsertMap).sort(function (a, b) {
     a = Number(a);
     b = Number(b);
+
     if (a > b) {
       return 1;
     }
+
     if (a < b) {
       return -1;
     }
+
     return 0;
-  });
+  }); // insert tags into string, keep track of offset caused by our text insertions
 
-  // insert tags into string, keep track of offset caused by our text insertions
   let offset = 0;
   orderedKeys.forEach(function (pos) {
     let index = Number(pos);

package/lib/draft-js/modifier.js

@@ -4,12 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Modifier = void 0;
+
 var _draftJs = require("draft-js");
+
 var _immutable = require("immutable");
-const Modifier = {
-  ..._draftJs.Modifier
-};
 
+const Modifier = { ..._draftJs.Modifier
+};
 /* 
     This method is specified for custom inline style such as 'FONT_COLOR_#ffffff'.
     For this kind of inline style there may be more than one style name 'FONT_COLOR_#ffffff', 'FONT_COLOR_#000000'.
@@ -21,18 +22,20 @@ const Modifier = {
 
     Reference: https://github.com/facebook/draft-js/blob/main/src/model/transaction/ContentStateInlineStyle.js#L39-L88
   */
+
 exports.Modifier = Modifier;
+
 Modifier.removeInlineStyleByPrefix = (contentState, selectionState, inlineStylePrefix) => {
   const blockMap = contentState.getBlockMap();
   const startKey = selectionState.getStartKey();
   const startOffset = selectionState.getStartOffset();
   const endKey = selectionState.getEndKey();
-  const endOffset = selectionState.getEndOffset();
+  const endOffset = selectionState.getEndOffset(); // loop through all selected blocks and every block chars to remove specific inline style
 
-  // loop through all selected blocks and every block chars to remove specific inline style
   const newBlocks = blockMap.skipUntil((_, k) => k === startKey).takeUntil((_, k) => k === endKey).concat((0, _immutable.Map)([[endKey, blockMap.get(endKey)]])).map((block, blockKey) => {
     let sliceStart;
     let sliceEnd;
+
     if (startKey === endKey) {
       sliceStart = startOffset;
       sliceEnd = endOffset;
@@ -40,16 +43,21 @@ Modifier.removeInlineStyleByPrefix = (contentState, selectionState, inlineStyleP
       sliceStart = blockKey === startKey ? startOffset : 0;
       sliceEnd = blockKey === endKey ? endOffset : block.getLength();
     }
+
     let chars = block.getCharacterList();
     let current;
+
     while (sliceStart < sliceEnd) {
       current = chars.get(sliceStart);
       const inlineStyle = current.getStyle().find(styleName => styleName.startsWith(inlineStylePrefix));
+
       if (inlineStyle) {
         chars = chars.set(sliceStart, _draftJs.CharacterMetadata.removeStyle(current, inlineStyle));
       }
+
       sliceStart++;
     }
+
     return block.set('characterList', chars);
   });
   return contentState.merge({

package/lib/index.js

@@ -21,7 +21,11 @@ Object.defineProperty(exports, "draftConverter", {
     return _draftConverter.default;
   }
 });
+
 var _draftConverter = _interopRequireDefault(require("./draft-js/draft-converter"));
+
 var _mirrormedia = _interopRequireDefault(require("./website/mirrormedia"));
+
 var _readr = _interopRequireDefault(require("./website/readr"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }