@mirrormedia/lilith-draft-editor 1.0.0-beta

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

@@ -0,0 +1,233 @@
+"use strict";
+
+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 */
+// 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
+ *  @property {Record<string, string>[]} columns
+ *  @property {Record<string, string>[][]} cells
+ */
+
+/**
+ *  @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
+    // 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
+
+
+    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 = [{
+            title: entity === null || entity === void 0 ? void 0 : (_entity$data = entity.data) === null || _entity$data === void 0 ? void 0 : _entity$data.title,
+            body: entity === null || entity === void 0 ? void 0 : (_entity$data2 = entity.data) === null || _entity$data2 === void 0 ? void 0 : _entity$data2.body
+          }];
+          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", {
+                key: `col_${cIndex}`,
+                style: Object.assign({}, colStyle, cellStyle),
+                dangerouslySetInnerHTML: {
+                  __html: (0, _draftConvert.convertToHTML)((0, _draftJs.convertFromRaw)(col))
+                }
+              });
+            });
+            return /*#__PURE__*/React.createElement("tr", {
+              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
+
+          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'
+        type = 'quoteby';
+        alignment = entity.data && entity.data.alignment || alignment;
+        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:
+      case _entities.default.SLIDESHOW.type:
+      case _entities.default['SLIDESHOW-V2'].type:
+      case _entities.default.VIDEO.type:
+      case _entities.default.YOUTUBE.type:
+      case _entities.default.BACKGROUNDIMAGE.type:
+      case _entities.default.BACKGROUNDVIDEO.type:
+      case _entities.default.RELATEDPOST.type:
+      case _entities.default.SIDEINDEX.type:
+        alignment = entity.data && entity.data.alignment || alignment;
+        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"/>`,
+            url: url
+          }];
+          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;
+          let height;
+          let width;
+          let parser = new htmlparser2.Parser({
+            onopentag: (name, attribs) => {
+              if (name === 'script') {
+                scriptTagStart = true;
+                script.attribs = attribs;
+              } else if (name === 'iframe') {
+                height = _lodash.default.get(attribs, 'height', 0);
+                width = _lodash.default.get(attribs, 'width', 0);
+              }
+            },
+            ontext: text => {
+              if (scriptTagStart) {
+                script.text = text;
+              }
+            },
+            onclosetag: tagname => {
+              if (tagname === 'script' && scriptTagStart) {
+                scriptTagStart = false;
+                scripts.push(script);
+              }
+            }
+          });
+          parser.write(embeddedCode);
+          parser.end();
+          content = [{
+            caption,
+            embeddedCode,
+            embeddedCodeWithoutScript: embeddedCode.replace(/<script(.+?)\/script>/g, ''),
+            height,
+            scripts,
+            width
+          }];
+          break;
+        }
+
+      default:
+        return;
+    } // block type of api data should be lower case
+
+
+    return new _apiDataInstance.default({
+      id: block.key,
+      alignment,
+      type: type && type.toLowerCase(),
+      content,
+      styles
+    });
+  }
+
+};
+var _default = processor;
+exports.default = _default;

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// 'use strict';
+const ENTITY = {
+  DIVIDER: {
+    type: 'DIVIDER'
+  },
+  ANNOTATION: {
+    type: 'ANNOTATION'
+  },
+  BLOCKQUOTE: {
+    type: 'BLOCKQUOTE'
+  },
+  LINK: {
+    type: 'LINK'
+  },
+  INFOBOX: {
+    type: 'INFOBOX'
+  },
+  COLORBOX: {
+    type: 'COLORBOX'
+  },
+  EMBEDDEDCODE: {
+    type: 'EMBEDDEDCODE'
+  },
+  AUDIO: {
+    type: 'AUDIO'
+  },
+  VIDEO: {
+    type: 'VIDEO'
+  },
+  IMAGE: {
+    type: 'IMAGE'
+  },
+  STOREDIMAGE: {
+    type: 'STOREDIMAGE'
+  },
+  IMAGEDIFF: {
+    type: 'IMAGEDIFF'
+  },
+  IMAGELINK: {
+    type: 'IMAGELINK'
+  },
+  SLIDESHOW: {
+    type: 'SLIDESHOW',
+    slideshowSelectionLimit: 30
+  },
+  ['SLIDESHOW-V2']: {
+    type: 'SLIDESHOW-V2',
+    slideshowSelectionLimit: 30
+  },
+  YOUTUBE: {
+    type: 'YOUTUBE'
+  },
+  TABLE: {
+    type: 'TABLE'
+  },
+  BACKGROUNDIMAGE: {
+    type: 'BACKGROUNDIMAGE'
+  },
+  BACKGROUNDVIDEO: {
+    type: 'BACKGROUNDVIDEO'
+  },
+  RELATEDPOST: {
+    type: 'RELATEDPOST'
+  },
+  SIDEINDEX: {
+    type: 'SIDEINDEX'
+  }
+};
+var _default = ENTITY;
+exports.default = _default;

package/lib/draft-js/editor/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;