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

package/lib/website/readr/block-renderer/info-box-block.js

@@ -4,20 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InfoBoxEditorBlock = InfoBoxEditorBlock;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _draftConverter = _interopRequireDefault(require("../../../draft-js/draft-converter"));
+
 var _infoBox = require("../../../draft-js/buttons/info-box");
+
 var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
+
 const {
   InfoBoxBlock
 } = _readr.default.blockRenderers;
 const InfoBoxRenderButton = _styledComponents.default.div`
   cursor: pointer;
 `;
+
 function InfoBoxEditorBlock(props) {
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
   const {
@@ -36,6 +46,7 @@ function InfoBoxEditorBlock(props) {
     title,
     rawContentState
   } = entity.getData();
+
   const onChange = ({
     title: newTitle,
     rawContentState: newRawContentState
@@ -51,6 +62,7 @@ function InfoBoxEditorBlock(props) {
       }
     });
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_infoBox.InfoBoxInput, {
     renderBasicEditor: renderBasicEditor,
     title: title,
@@ -64,8 +76,8 @@ function InfoBoxEditorBlock(props) {
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(InfoBoxBlock, props), /*#__PURE__*/_react.default.createElement(InfoBoxRenderButton, {
     onClick: () => {
       // call `onEditStart` prop as we are trying to update the InfoBox entity
-      onEditStart();
-      // open `InfoBoxInput`
+      onEditStart(); // open `InfoBoxInput`
+
       setToShowInput(true);
     }
   }, /*#__PURE__*/_react.default.createElement("i", {

package/lib/website/readr/block-renderer/side-index-block.js

@@ -4,13 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SideIndexEditorBlock = SideIndexEditorBlock;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _sideIndex = require("../../../draft-js/buttons/side-index");
+
 var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
+
 const {
   SideIndexBlock
 } = _readr.default.blockRenderers;
@@ -18,6 +26,7 @@ const SideIndexBlockButton = _styledComponents.default.div`
   cursor: pointer;
   margin-left: 20px;
 `;
+
 function SideIndexEditorBlock(props) {
   const [toShowInput, setToShowInput] = (0, _react.useState)(false);
   const {
@@ -37,6 +46,7 @@ function SideIndexEditorBlock(props) {
     sideIndexUrl,
     sideIndexImage
   } = entity.getData();
+
   const onChange = ({
     h2Text,
     sideIndexText,
@@ -55,6 +65,7 @@ function SideIndexEditorBlock(props) {
       }
     });
   };
+
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_sideIndex.SideIndexInput, {
     h2Text: h2Text,
     sideIndexText: sideIndexText,
@@ -69,8 +80,8 @@ function SideIndexEditorBlock(props) {
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(SideIndexBlock, props), /*#__PURE__*/_react.default.createElement(SideIndexBlockButton, {
     onClick: () => {
       // call `onEditStart` prop as we are trying to update the SideIndex entity
-      onEditStart();
-      // open `SideIndexInput`
+      onEditStart(); // open `SideIndexInput`
+
       setToShowInput(true);
     }
   }, /*#__PURE__*/_react.default.createElement("i", {

package/lib/website/readr/block-renderer/table-block.js

@@ -4,34 +4,49 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TableEditorBlock = void 0;
+
 var _react = _interopRequireWildcard(require("react"));
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _draftJs = require("draft-js");
+
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
+
 const _ = {
   cloneDeep: _cloneDeep.default
 };
-var ActionType = /*#__PURE__*/function (ActionType) {
+var ActionType;
+
+(function (ActionType) {
   ActionType["Insert"] = "insert";
   ActionType["Delete"] = "delete";
   ActionType["Update"] = "update";
-  return ActionType;
-}(ActionType || {});
-var TableEnum = /*#__PURE__*/function (TableEnum) {
+})(ActionType || (ActionType = {}));
+
+var TableEnum;
+
+(function (TableEnum) {
   TableEnum["Row"] = "row";
   TableEnum["Column"] = "column";
-  return TableEnum;
-}(TableEnum || {});
+})(TableEnum || (TableEnum = {}));
+
 function createEmptyRow(colLen = 0, emptyValue) {
   const rtn = [];
+
   for (let i = 0; i < colLen; i++) {
     rtn.push(emptyValue);
   }
+
   return rtn;
 }
+
 function resolveTableStyles(action, tableStyles) {
   switch (action === null || action === void 0 ? void 0 : action.type) {
     case ActionType.Insert:
@@ -41,10 +56,12 @@ function resolveTableStyles(action, tableStyles) {
           return Object.assign({}, tableStyles, {
             rows
           });
-        }
-        // TODO: handle target === TableEnum.Column if needed
+        } // TODO: handle target === TableEnum.Column if needed
+
+
         return tableStyles;
       }
+
     case ActionType.Delete:
       {
         if (action.target === TableEnum.Row) {
@@ -52,61 +69,75 @@ function resolveTableStyles(action, tableStyles) {
           return Object.assign({}, tableStyles, {
             rows
           });
-        }
-        // TODO: handle target === TableEnum.Column if needed
+        } // TODO: handle target === TableEnum.Column if needed
+
+
         return tableStyles;
       }
     // TODO: handle action.type === ActionType.Update if needed
+
     default:
       {
         return tableStyles;
       }
   }
 }
+
 function resolveTableData(action, tableData) {
   switch (action === null || action === void 0 ? void 0 : action.type) {
     case ActionType.Insert:
       {
         var _tableData$;
+
         if (typeof (action === null || action === void 0 ? void 0 : action.index) !== 'number') {
           return tableData;
         }
+
         if ((action === null || action === void 0 ? void 0 : action.target) === TableEnum.Column) {
           // add the new column at specific position in each row
           return tableData.map(r => [...r.slice(0, action === null || action === void 0 ? void 0 : action.index), _draftJs.EditorState.createEmpty(), ...r.slice(action === null || action === void 0 ? void 0 : action.index)]);
-        }
-        // add the new row
+        } // add the new row
+
+
         return [...tableData.slice(0, action === null || action === void 0 ? void 0 : action.index), createEmptyRow(tableData === null || tableData === void 0 ? void 0 : (_tableData$ = tableData[0]) === null || _tableData$ === void 0 ? void 0 : _tableData$.length, _draftJs.EditorState.createEmpty()), ...tableData.slice(action === null || action === void 0 ? void 0 : action.index)];
       }
+
     case ActionType.Delete:
       {
         if (typeof (action === null || action === void 0 ? void 0 : action.index) !== 'number') {
           return tableData;
         }
+
         if ((action === null || action === void 0 ? void 0 : action.target) === 'column') {
           // delete the column at specific position in each row
           return tableData.map(r => [...r.slice(0, action.index), ...r.slice(action.index + 1)]);
-        }
-        // delete the column
+        } // delete the column
+
+
         return [...tableData.slice(0, action.index), ...tableData.slice(action.index + 1)];
       }
+
     case ActionType.Update:
       {
         // The reason we copy the array is to make sure
         // that React component re-renders.
         const copiedData = [...tableData];
+
         if (typeof (action === null || action === void 0 ? void 0 : action.rIndex) !== 'number' || typeof (action === null || action === void 0 ? void 0 : action.cIndex) !== 'number') {
           return copiedData;
         }
+
         copiedData[action.rIndex][action.cIndex] = action === null || action === void 0 ? void 0 : action.value;
         return copiedData;
       }
+
     default:
       {
         return tableData;
       }
   }
 }
+
 function convertTableDataFromRaw(rawTableData) {
   return rawTableData.map(rowData => {
     return rowData.map(colData => {
@@ -115,6 +146,7 @@ function convertTableDataFromRaw(rawTableData) {
     });
   });
 }
+
 function convertTableDataToRaw(tableData) {
   return tableData.map(rowData => {
     return rowData.map(colData => {
@@ -122,6 +154,7 @@ function convertTableDataToRaw(tableData) {
     });
   });
 }
+
 const Table = _styledComponents.default.div`
   display: table;
   width: 95%;
@@ -222,8 +255,10 @@ const TableBlockContainer = _styledComponents.default.div`
   overflow: scroll;
   padding: 15px;
 `;
+
 const TableEditorBlock = props => {
   var _tableData$2;
+
   const {
     block,
     blockProps,
@@ -240,26 +275,24 @@ const TableEditorBlock = props => {
     tableData: rawTableData,
     tableStyles: _tableStyles
   } = entity.getData();
-  const [tableData, setTableData] = (0, _react.useState)(convertTableDataFromRaw(rawTableData));
-  // deep clone `_tableStyles` to prevent updating the entity data directly
-  const [tableStyles, setTableStyles] = (0, _react.useState)(_.cloneDeep(_tableStyles));
-  const tableRef = (0, _react.useRef)(null);
+  const [tableData, setTableData] = (0, _react.useState)(convertTableDataFromRaw(rawTableData)); // deep clone `_tableStyles` to prevent updating the entity data directly
 
-  // `TableBlock` will render other inner/nested DraftJS Editors inside the main Editor.
+  const [tableStyles, setTableStyles] = (0, _react.useState)(_.cloneDeep(_tableStyles));
+  const tableRef = (0, _react.useRef)(null); // `TableBlock` will render other inner/nested DraftJS Editors inside the main Editor.
   // However, main Editor's `readOnly` needs to be mutually exclusive with nested Editors' `readOnly`.
   // If the main Editor and nested Editor are editable (`readOnly={false}`) at the same time,
   // there will be a DraftJS Edtior Selection bug.
-  const [cellEditorReadOnly, setCellEditorReadOnly] = (0, _react.useState)(!getMainEditorReadOnly());
 
-  // The user clicks the table for editing
+  const [cellEditorReadOnly, setCellEditorReadOnly] = (0, _react.useState)(!getMainEditorReadOnly()); // The user clicks the table for editing
+
   const onTableClick = () => {
     // call `onEditStart` function to tell the main DraftJS Editor
     // that we are going to interact with the custom atomic block.
-    onEditStart();
+    onEditStart(); // make nested DraftJS Editors editable
 
-    // make nested DraftJS Editors editable
     setCellEditorReadOnly(false);
   };
+
   (0, _react.useEffect)(() => {
     // The user clicks other places except the table,
     // so we think he/she doesn't want to edit the table anymore.
@@ -271,10 +304,9 @@ const TableEditorBlock = props => {
       //  this `handleClickOutside` will only handle the just updated one.
       if (tableRef.current && !tableRef.current.contains(event.target) && !cellEditorReadOnly) {
         // make inner DraftJS Editors NOT editable
-        setCellEditorReadOnly(true);
-
-        // call `onEditFinish` function tell the main DraftJS Editor
+        setCellEditorReadOnly(true); // call `onEditFinish` function tell the main DraftJS Editor
         // that we are finishing interacting with the custom atomic block.
+
         onEditFinish({
           entityKey,
           entityData: {
@@ -284,6 +316,7 @@ const TableEditorBlock = props => {
         });
       }
     }
+
     console.debug('(rich-text-editor/table): add click outside event listener');
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
@@ -291,8 +324,7 @@ const TableEditorBlock = props => {
       console.debug('(rich-text-editor/table): remove click outside event listener');
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  },
-  // Skip running effect if `tableData` and `cellEditorReadOnly` are not changed.
+  }, // Skip running effect if `tableData` and `cellEditorReadOnly` are not changed.
   [tableData, cellEditorReadOnly]);
   return /*#__PURE__*/_react.default.createElement(TableBlockContainer, null, /*#__PURE__*/_react.default.createElement(Table, {
     key: entityKey,
@@ -324,6 +356,7 @@ const TableEditorBlock = props => {
     }));
   })), tableData.map((rowData, rIndex) => {
     var _tableStyles$rows;
+
     const colsJsx = rowData.map((colData, cIndex) => {
       return /*#__PURE__*/_react.default.createElement(Td, {
         key: `col_${cIndex}`
@@ -371,4 +404,5 @@ const TableEditorBlock = props => {
     })), colsJsx));
   })));
 };
+
 exports.TableEditorBlock = TableEditorBlock;

package/lib/website/readr/block-renderer-fn.js

@@ -4,18 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.atomicBlockRenderer = atomicBlockRenderer;
+
 var _infoBoxBlock = require("./block-renderer/info-box-block");
+
 var _tableBlock = require("./block-renderer/table-block");
+
 var _colorBoxBlock = require("./block-renderer/color-box-block");
+
 var _backgroundImageBlock = require("./block-renderer/background-image-block");
+
 var _backgroundVideoBlock = require("./block-renderer/background-video-block");
+
 var _sideIndexBlock = require("./block-renderer/side-index-block");
+
+var _imageBlock = require("./block-renderer/image-block");
+
 var _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 const {
   EmbeddedCodeBlock,
   MediaBlock,
-  ImageBlock,
   SlideshowBlock,
   SlideshowBlockV2,
   DividerBlock,
@@ -23,9 +33,11 @@ const {
   VideoBlock,
   AudioBlock
 } = _readr.default.blockRenderers;
+
 const AtomicBlock = props => {
   const entity = props.contentState.getEntity(props.block.getEntityAt(0));
   const entityType = entity.getType();
+
   switch (entityType) {
     case 'audioLink':
     case 'imageLink':
@@ -33,65 +45,81 @@ const AtomicBlock = props => {
       {
         return MediaBlock(entity);
       }
+
     case 'image':
       {
-        return ImageBlock(entity);
+        return (0, _imageBlock.ImageEditorBlock)(props);
       }
+
     case 'slideshow':
       {
         return SlideshowBlock(entity);
       }
+
     case 'slideshow-v2':
       {
         return SlideshowBlockV2(entity);
       }
+
     case 'EMBEDDEDCODE':
       {
         return EmbeddedCodeBlock(entity);
       }
+
     case 'INFOBOX':
       {
         return (0, _infoBoxBlock.InfoBoxEditorBlock)(props);
       }
+
     case 'DIVIDER':
       {
         return DividerBlock();
       }
+
     case 'TABLE':
       {
         return (0, _tableBlock.TableEditorBlock)(props);
       }
+
     case 'COLORBOX':
       {
         return (0, _colorBoxBlock.ColorBoxEditorBlock)(props);
       }
+
     case 'BACKGROUNDIMAGE':
       {
         return (0, _backgroundImageBlock.BGImageEditorBlock)(props);
       }
+
     case 'BACKGROUNDVIDEO':
       {
         return (0, _backgroundVideoBlock.BGVideoEditorBlock)(props);
       }
+
     case 'RELATEDPOST':
       {
         return RelatedPostBlock(entity);
       }
+
     case 'SIDEINDEX':
       {
         return (0, _sideIndexBlock.SideIndexEditorBlock)(props);
       }
+
     case 'VIDEO':
       {
         return VideoBlock(entity);
       }
-    case 'AudioBlock':
+
+    case 'AUDIO':
       {
         return AudioBlock(entity);
       }
   }
+
   return null;
 };
+
 function atomicBlockRenderer(block) {
   if (block.getType() === 'atomic') {
     return {
@@ -99,5 +127,6 @@ function atomicBlockRenderer(block) {
       editable: false
     };
   }
+
   return null;
 }