@kids-reporter/draft-editor 0.1.0

package/lib/draft-converter/index.js

@@ -0,0 +1,201 @@
+"use strict";
+
+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
+// 'use strict';
+let defaultBlockTagMap = {
+  atomic: `<div>%content%</div>`,
+  blockquote: `<blockquote>%content%</blockquote>`,
+  'code-block': `<code>%content%</code>`,
+  default: `<p>%content%</p>`,
+  'header-two': `<h2>%content%</h2>`,
+  'header-three': `<h3>%content%</h3>`,
+  'header-four': `<h4>%content%</h4>`,
+  'ordered-list-item': `<li>%content%</li>`,
+  paragraph: `<p>%content%</p>`,
+  'unordered-list-item': `<li>%content%</li>`,
+  unstyled: `<p>%content%</p>`
+};
+let inlineTagMap = {
+  BOLD: ['<strong>', '</strong>'],
+  CODE: ['<code>', '</code>'],
+  default: ['<span>', '</span>'],
+  ITALIC: ['<em>', '</em>'],
+  UNDERLINE: ['<u>', '</u>']
+};
+let defaultEntityTagMap = {
+  [_entities.default.DIVIDER.type]: ['<hr>', ''],
+  [_entities.default.ANNOTATION.type]: ['<abbr title="<%= data.body %>"><%= data.text %>', '</abbr>'],
+  [_entities.default.AUDIO.type]: ['<div class="audio-container center"><div class="audio-title"><%= data.name %></div><!-- <div class="audio-desc"><%= data.description %></div> --><audio src="<%= data.url %>" />', '</div>'],
+  [_entities.default.BLOCKQUOTE.type]: ['<blockquote class="center"><div><%= data.quote %></div><div><%= data.quotedBy %></div>', '<blockquote>'],
+  [_entities.default.EMBEDDEDCODE.type]: ['<div class="embedded <%= data.alignment %>" title="<%= data.caption %>"><%= data.code%>', '</div>'],
+  [_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>'],
+  [_entities.default.SLIDESHOW.type]: ['<!-- slideshow component start --> <ol class="slideshow-container"> <%  _.forEach(data, function(image) { %><li class="slideshow-slide"><img alt="<%- image.name %>" src="<%- image.url %>" srcset="<%= image.mobile.url %> 800w,  <%= image.tablet.url %> 1280w, <%= image.desktop.url %> 2400w" /></li><% }); %>', '</ol><!-- slideshow component end -->'],
+  [_entities.default.VIDEO.type]: ['<div controls class="video-container <%= data.alignment %>"><div class="video-name"><%= data.title %></div><div class="video-desc"><%= data.description %></div><video src="<%= data.url %>" />', '</div>'],
+  [_entities.default.YOUTUBE.type]: ['<iframe width="560" alt="<%= data.description %>" height="315" src="https://www.youtube.com/embed/<%= data.id %>" frameborder="0" allowfullscreen>', '</iframe>']
+};
+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
+
+
+    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
+
+  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 = [];
+  let nestLevel = [];
+  blocks.forEach(block => {
+    // block is not a list-item
+    if (!nestedTagMap[block.type]) {
+      // if previous block is a list-item
+      if (content.length > 0 && nestLevel.length > 0) {
+        apiDataArr = apiDataArr.push(new _apiDataInstance.default({
+          type: nestLevel[0],
+          content: [content]
+        }));
+        content = [];
+        nestLevel.shift();
+      }
+
+      if (block.type.startsWith('atomic') || block.type.startsWith('media')) {
+        try {
+          apiDataArr = apiDataArr.push(_atomicBlockProcessor.default.convertBlock(entityMap, block));
+        } catch (e) {
+          console.error(e);
+        }
+      } 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;
+        apiDataArr = apiDataArr.push(new _apiDataInstance.default({
+          id: block.key,
+          type,
+          content: [converted],
+          textAlign
+        }));
+      }
+    } else {
+      let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block); // previous block is not an item-list block
+
+      if (nestLevel.length === 0) {
+        nestLevel.unshift(block.type);
+        content.push(converted);
+      } else if (nestLevel[0] === block.type) {
+        // previous block is a item-list and current block is the same item-list
+        content.push(converted);
+      } else if (nestLevel[0] !== block.type) {
+        // previous block is a different item-list.
+        apiDataArr = apiDataArr.push(new _apiDataInstance.default({
+          id: block.key,
+          type: nestLevel[0],
+          content: [content]
+        }));
+        content = [converted];
+        nestLevel[0] = block.type;
+      }
+    }
+  }); // 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({
+      id: block.key,
+      type: block.type,
+      content: content
+    }));
+  }
+
+  return apiDataArr;
+}
+
+function convertRawToHtml(raw, blockTagMap, entityTagMap) {
+  blockTagMap = _lodash.default.merge({}, defaultBlockTagMap, blockTagMap);
+  entityTagMap = entityTagMap || defaultEntityTagMap;
+  let html = '';
+  raw = raw || {};
+  const blocks = Array.isArray(raw.blocks) ? raw.blocks : [];
+  const entityMap = typeof raw.entityMap === 'object' ? raw.entityMap : {};
+  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
+};
+exports.default = _default;

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

@@ -0,0 +1,236 @@
+"use strict";
+
+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
+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
+      // <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>
+      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({
+          index: j,
+          replace: [{
+            length: entityOffset + entityLength - inlineOffset,
+            offset: inlineOffset,
+            style: inlineStyle
+          }, {
+            length: nextEntityOffset - (entityOffset + entityLength),
+            offset: entityOffset + entityLength,
+            style: inlineStyle
+          }, {
+            length: inlineOffset + inlineLength - nextEntityOffset,
+            offset: nextEntityOffset,
+            style: inlineStyle
+          }]
+        });
+      } else if (entityOffset >= inlineOffset && entityOffset < inlineOffset + inlineLength && entityOffset + entityLength > inlineOffset + inlineLength) {
+        // situation: <strong><a></strong></a>
+        // should be: <strong></strong><a><strong></strong></a>
+        splitedISInline.push({
+          index: j,
+          replace: [{
+            length: entityOffset - inlineOffset,
+            offset: inlineOffset,
+            style: inlineStyle
+          }, {
+            length: inlineOffset + inlineLength - entityOffset,
+            offset: entityOffset,
+            style: inlineStyle
+          }]
+        });
+      } else if (entityOffset < inlineOffset && entityOffset + entityLength > inlineOffset && entityOffset + entityLength <= inlineOffset + inlineLength) {
+        // situation: <a><strong></a></strong>
+        // should be: <a><strong></strong></a><strong></strong>
+        splitedISInline.push({
+          index: j,
+          replace: [{
+            length: entityOffset + entityLength - inlineOffset,
+            offset: inlineOffset,
+            style: inlineStyle
+          }, {
+            length: inlineOffset + inlineLength - entityOffset - entityLength,
+            offset: entityOffset + entityLength,
+            style: inlineStyle
+          }]
+        });
+      }
+    }
+  }
+
+  _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'); // map all the tag insertions we're going to do
+
+
+  sortedRanges.forEach(function (range) {
+    let tag = inlineTagMap[range.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
+
+
+    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
+
+
+      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
+
+
+    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
+
+
+      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); // 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
+
+  let offset = 0;
+  orderedKeys.forEach(function (pos) {
+    let index = Number(pos);
+    tagInsertMap[pos].forEach(function (tag) {
+      html = html.substr(0, offset + index) + tag + html.substr(offset + index);
+      offset += tag.length;
+    });
+  });
+  return html;
+}