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

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

@@ -4,49 +4,34 @@ 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;
-
-(function (ActionType) {
+var ActionType = /*#__PURE__*/function (ActionType) {
   ActionType["Insert"] = "insert";
   ActionType["Delete"] = "delete";
   ActionType["Update"] = "update";
-})(ActionType || (ActionType = {}));
-
-var TableEnum;
-
-(function (TableEnum) {
+  return ActionType;
+}(ActionType || {});
+var TableEnum = /*#__PURE__*/function (TableEnum) {
   TableEnum["Row"] = "row";
   TableEnum["Column"] = "column";
-})(TableEnum || (TableEnum = {}));
-
+  return 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:
@@ -56,12 +41,10 @@ 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) {
@@ -69,75 +52,61 @@ 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 => {
@@ -146,7 +115,6 @@ function convertTableDataFromRaw(rawTableData) {
     });
   });
 }
-
 function convertTableDataToRaw(tableData) {
   return tableData.map(rowData => {
     return rowData.map(colData => {
@@ -154,7 +122,6 @@ function convertTableDataToRaw(tableData) {
     });
   });
 }
-
 const Table = _styledComponents.default.div`
   display: table;
   width: 95%;
@@ -255,10 +222,8 @@ const TableBlockContainer = _styledComponents.default.div`
   overflow: scroll;
   padding: 15px;
 `;
-
 const TableEditorBlock = props => {
   var _tableData$2;
-
   const {
     block,
     blockProps,
@@ -275,24 +240,26 @@ 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 [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); // `TableBlock` will render other inner/nested DraftJS Editors inside the main Editor.
+  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());
 
-  const [cellEditorReadOnly, setCellEditorReadOnly] = (0, _react.useState)(!getMainEditorReadOnly()); // The user clicks the table for editing
-
+  // 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(); // make nested DraftJS Editors editable
+    onEditStart();
 
+    // 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.
@@ -304,9 +271,10 @@ 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
-        // that we are finishing interacting with the custom atomic block.
+        setCellEditorReadOnly(true);
 
+        // call `onEditFinish` function tell the main DraftJS Editor
+        // that we are finishing interacting with the custom atomic block.
         onEditFinish({
           entityKey,
           entityData: {
@@ -316,7 +284,6 @@ const TableEditorBlock = props => {
         });
       }
     }
-
     console.debug('(rich-text-editor/table): add click outside event listener');
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
@@ -324,7 +291,8 @@ 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,
@@ -356,7 +324,6 @@ 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}`
@@ -404,5 +371,4 @@ const TableEditorBlock = props => {
     })), colsJsx));
   })));
 };
-
 exports.TableEditorBlock = TableEditorBlock;

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

@@ -4,23 +4,14 @@ 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 _readr = _interopRequireDefault(require("@mirrormedia/lilith-draft-renderer/lib/website/readr"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const {
   EmbeddedCodeBlock,
   MediaBlock,
@@ -28,13 +19,13 @@ const {
   SlideshowBlock,
   SlideshowBlockV2,
   DividerBlock,
-  RelatedPostBlock
+  RelatedPostBlock,
+  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':
@@ -42,71 +33,65 @@ const AtomicBlock = props => {
       {
         return MediaBlock(entity);
       }
-
     case 'image':
       {
         return ImageBlock(entity);
       }
-
     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':
+      {
+        return AudioBlock(entity);
+      }
   }
-
   return null;
 };
-
 function atomicBlockRenderer(block) {
   if (block.getType() === 'atomic') {
     return {
@@ -114,6 +99,5 @@ function atomicBlockRenderer(block) {
       editable: false
     };
   }
-
   return null;
 }