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

package/lib/draft-js/buttons/text-align.js

@@ -6,45 +6,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.AlignCenterButton = AlignCenterButton;
 exports.AlignLeftButton = AlignLeftButton;
 exports.getSelectionBlockData = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _draftJs = require("draft-js");
-
 var _modifier = require("../modifier");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const toggleSelectionTextAlign = (editorState, textAlign) => {
   return setSelectionBlockData(editorState, {
     textAlign: getSelectionBlockData(editorState, 'textAlign') !== textAlign ? textAlign : undefined
   });
 };
-
 const setSelectionBlockData = (editorState, blockData) => {
   return _modifier.Modifier.setBlockData(editorState.getCurrentContent(), editorState.getSelection(), blockData);
 };
-
 const getSelectionBlockData = (editorState, name) => {
   const block = editorState.getCurrentContent().getBlockForKey(editorState.getSelection().getAnchorKey());
   const blockData = block.getData();
   return blockData.get(name);
 };
-
 exports.getSelectionBlockData = getSelectionBlockData;
-
 function AlignCenterButton(props) {
   const {
     isActive,
     editorState,
     onChange
   } = props;
-
   const toggleTextAlign = () => {
     const newContentState = toggleSelectionTextAlign(editorState, 'center');
     onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-block-style'));
   };
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,
     onMouseDown: toggleTextAlign
@@ -59,19 +48,16 @@ function AlignCenterButton(props) {
     fill: isActive ? '#ED8B00' : '#6b7280'
   }))));
 }
-
 function AlignLeftButton(props) {
   const {
     isActive,
     editorState,
     onChange
   } = props;
-
   const toggleTextAlign = () => {
     const newContentState = toggleSelectionTextAlign(editorState, 'left');
     onChange(_draftJs.EditorState.push(editorState, newContentState, 'change-block-style'));
   };
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,
     onMouseDown: toggleTextAlign

package/lib/draft-js/buttons/video.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VideoButton = VideoButton;
+var _react = _interopRequireWildcard(require("react"));
+var _draftJs = require("draft-js");
+var _videoSelector = require("./selector/video-selector");
+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 VideoButton(props) {
+  const {
+    editorState,
+    onChange,
+    className,
+    VideoSelector = _videoSelector.VideoSelector
+  } = props;
+  const [toShowVideoSelector, setToShowVideoSelector] = (0, _react.useState)(false);
+  const promptForVideoSelector = () => {
+    setToShowVideoSelector(true);
+  };
+  const onVideoSelectorChange = selectedVideosWithMeta => {
+    var _selectedVideosWithMe;
+    const video = selectedVideosWithMeta === null || selectedVideosWithMeta === void 0 ? void 0 : (_selectedVideosWithMe = selectedVideosWithMeta[0]) === null || _selectedVideosWithMe === void 0 ? void 0 : _selectedVideosWithMe.video;
+    if (!video) {
+      setToShowVideoSelector(false);
+      return;
+    }
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity('VIDEO', 'IMMUTABLE', {
+      video
+    });
+    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+    const newEditorState = _draftJs.EditorState.set(editorState, {
+      currentContent: contentStateWithEntity
+    });
+
+    // The third parameter here is a space string, not an empty string
+    // If you set an empty string, you will get an error: Unknown DraftEntity key: null
+    onChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+    setToShowVideoSelector(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toShowVideoSelector && /*#__PURE__*/_react.default.createElement(VideoSelector, {
+    onChange: onVideoSelectorChange
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: promptForVideoSelector
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa fa-video-camera"
+  }), /*#__PURE__*/_react.default.createElement("span", null, " Video")));
+}

package/lib/draft-js/const.js

@@ -3,9 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 var _const = require("@mirrormedia/lilith-draft-renderer/lib/draft-js/const");
-
 Object.keys(_const).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _const[key]) return;

package/lib/draft-js/draft-converter/api-data-instance.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _immutable = require("immutable");
-
 var _shortid = _interopRequireDefault(require("shortid"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const ApiDataInstanceRecord = (0, _immutable.Record)({
   id: _shortid.default.generate(),
   type: 'paragraph',
@@ -19,40 +15,30 @@ const ApiDataInstanceRecord = (0, _immutable.Record)({
   styles: {},
   textAlign: undefined
 });
-
 class ApiDataInstance extends ApiDataInstanceRecord {
   constructor(props) {
     let id = props && props.id || _shortid.default.generate();
-
     props.id = id;
     super(props);
   }
-
   getId() {
     return this.get('id');
   }
-
   getType() {
     return this.get('type');
   }
-
   getAlignment() {
     return this.get('alignment');
   }
-
   getContent() {
     return this.get('content');
   }
-
   getStyles() {
     return this.get('styles');
   }
-
   getTextAlign() {
     return this.get('textAlign');
   }
-
 }
-
 var _default = ApiDataInstance;
 exports.default = _default;

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

@@ -4,27 +4,23 @@ 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
@@ -36,26 +32,23 @@ 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', '');
 
-    let type = _lodash.default.get(entity, 'type', ''); // backward compatible. Old entity type might be lower case
-
-
+    // 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 = [{
@@ -64,37 +57,29 @@ 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", {
@@ -109,20 +94,17 @@ 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'
@@ -131,7 +113,6 @@ 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:
@@ -147,17 +128,13 @@ 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"/>`,
@@ -165,15 +142,11 @@ 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;
@@ -213,12 +186,11 @@ 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,
@@ -227,7 +199,6 @@ const processor = {
       styles
     });
   }
-
 };
 var _default = processor;
 exports.default = _default;

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

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

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

@@ -4,27 +4,19 @@ 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>`,
@@ -54,7 +46,6 @@ 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>'],
@@ -66,39 +57,35 @@ 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 = [];
@@ -115,7 +102,6 @@ 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));
@@ -124,7 +110,6 @@ 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;
@@ -136,8 +121,9 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
         }));
       }
     } else {
-      let converted = InlineStylesProcessor.convertToHtml(inlineTagMap, entityTagMap, entityMap, block); // previous block is not an item-list block
+      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);
@@ -155,8 +141,9 @@ 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({
@@ -165,10 +152,8 @@ function convertBlocksToApiData(blocks, entityMap, entityTagMap) {
       content: content
     }));
   }
-
   return apiDataArr;
 }
-
 function convertRawToHtml(raw, blockTagMap, entityTagMap) {
   blockTagMap = _lodash.default.merge({}, defaultBlockTagMap, blockTagMap);
   entityTagMap = entityTagMap || defaultEntityTagMap;
@@ -179,21 +164,17 @@ 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