@mirrormedia/lilith-draft-editor 1.0.0-beta → 1.0.0-beta4

package/lib/website/mirrormedia/index.js

@@ -7,13 +7,10 @@ exports.default = void 0;
 
 var _draftEditor = _interopRequireDefault(require("./draft-editor"));
 
-var _draftRenderer = _interopRequireDefault(require("./draft-renderer"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const MirrorMedia = {
-  DraftEditor: _draftEditor.default,
-  DraftRenderer: _draftRenderer.default
+  DraftEditor: _draftEditor.default
 };
 var _default = MirrorMedia;
 exports.default = _default;

package/lib/website/readr/custom/block-renderer/background-image-block.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BGImageEditorBlock = BGImageEditorBlock;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _draftConverter = _interopRequireDefault(require("../../../../draft-js/editor/draft-converter"));
+
+var _backgroundImage = require("../../../../draft-js/buttons/background-image");
+
+var _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+
+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 {
+  BGImageBlock
+} = _lilithDraftRenderer.MirrorMedia.blockRenderer;
+const BGImageRenderButton = _styledComponents.default.span`
+  cursor: pointer;
+  background-color: white;
+  padding: 6px;
+  border-radius: 6px;
+`;
+
+function BGImageEditorBlock(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    textBlockAlign,
+    image,
+    rawContentState
+  } = entity.getData();
+
+  const onChange = ({
+    textBlockAlign: newTextBlockAlign,
+    image: newImage,
+    rawContentState: newRawContentState
+  }) => {
+    // close `BGImageInput`
+    setToShowInput(false);
+    onEditFinish({
+      entityKey,
+      entityData: {
+        textBlockAlign: newTextBlockAlign,
+        image: newImage,
+        body: _draftConverter.default.convertToHtml(newRawContentState),
+        rawContentState: newRawContentState
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_backgroundImage.BGImageInput, {
+    textBlockAlign: textBlockAlign,
+    image: image,
+    rawContentStateForBGImageEditor: rawContentState,
+    onChange: onChange,
+    onCancel: () => {
+      onEditFinish({});
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BGImageBlock, props), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BGImageRenderButton, {
+    onClick: () => {
+      // call `onEditStart` prop as we are trying to update the BGImage entity
+      onEditStart(); // open `BGImageInput`
+
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify")))));
+}

package/lib/website/readr/custom/block-renderer/background-video-block.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BGVideoEditorBlock = BGVideoEditorBlock;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _draftConverter = _interopRequireDefault(require("../../../../draft-js/editor/draft-converter"));
+
+var _backgroundVideo = require("../../../../draft-js/buttons/background-video");
+
+var _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+
+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 {
+  BGVideoBlock
+} = _lilithDraftRenderer.MirrorMedia.blockRenderer;
+const BGVideoRenderButton = _styledComponents.default.span`
+  cursor: pointer;
+  background-color: white;
+  padding: 6px;
+  border-radius: 6px;
+`;
+
+function BGVideoEditorBlock(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    textBlockAlign,
+    video,
+    rawContentState
+  } = entity.getData();
+
+  const onChange = ({
+    textBlockAlign: newTextBlockAlign,
+    video: newVideo,
+    rawContentState: newRawContentState
+  }) => {
+    // close `BGVideoInput`
+    setToShowInput(false);
+    onEditFinish({
+      entityKey,
+      entityData: {
+        textBlockAlign: newTextBlockAlign,
+        video: newVideo,
+        body: _draftConverter.default.convertToHtml(newRawContentState),
+        rawContentState: newRawContentState
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_backgroundVideo.BGVideoInput, {
+    textBlockAlign: textBlockAlign,
+    video: video,
+    rawContentStateForBGVideoEditor: rawContentState,
+    onChange: onChange,
+    onCancel: () => {
+      onEditFinish({});
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BGVideoBlock, props), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BGVideoRenderButton, {
+    onClick: () => {
+      // call `onEditStart` prop as we are trying to update the BGVideo entity
+      onEditStart(); // open `BGVideoInput`
+
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify")))));
+}

package/lib/website/readr/custom/block-renderer/color-box-block.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColorBoxEditorBlock = ColorBoxEditorBlock;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _draftConverter = _interopRequireDefault(require("../../../../draft-js/editor/draft-converter"));
+
+var _colorBox = require("../../../../draft-js/buttons/color-box");
+
+var _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+
+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 {
+  ColorBoxBlock
+} = _lilithDraftRenderer.MirrorMedia.blockRenderer;
+const ColorBoxRenderButton = _styledComponents.default.div`
+  cursor: pointer;
+`;
+
+function ColorBoxEditorBlock(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    color,
+    rawContentState
+  } = entity.getData();
+
+  const onChange = ({
+    color: newColor,
+    rawContentState: newRawContentState
+  }) => {
+    // close `ColorBoxInput`
+    setToShowInput(false);
+    onEditFinish({
+      entityKey,
+      entityData: {
+        color: newColor,
+        body: _draftConverter.default.convertToHtml(newRawContentState),
+        rawContentState: newRawContentState
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_colorBox.ColorBoxInput, {
+    color: color,
+    rawContentStateForColorBoxEditor: rawContentState,
+    onChange: onChange,
+    onCancel: () => {
+      onEditFinish({});
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ColorBoxBlock, props), /*#__PURE__*/_react.default.createElement(ColorBoxRenderButton, {
+    onClick: () => {
+      // call `onEditStart` prop as we are trying to update the ColorBox entity
+      onEditStart(); // open `ColorBoxInput`
+
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
+}

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

@@ -0,0 +1,84 @@
+"use strict";
+
+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/editor/draft-converter"));
+
+var _infoBox = require("../../../../draft-js/buttons/info-box");
+
+var _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+
+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
+} = _lilithDraftRenderer.MirrorMedia.blockRenderer;
+const InfoBoxRenderButton = _styledComponents.default.div`
+  cursor: pointer;
+`;
+
+function InfoBoxEditorBlock(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    title,
+    rawContentState
+  } = entity.getData();
+
+  const onChange = ({
+    title: newTitle,
+    rawContentState: newRawContentState
+  }) => {
+    // close `InfoBoxInput`
+    setToShowInput(false);
+    onEditFinish({
+      entityKey,
+      entityData: {
+        title: newTitle,
+        body: _draftConverter.default.convertToHtml(newRawContentState),
+        rawContentState: newRawContentState
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_infoBox.InfoBoxInput, {
+    title: title,
+    rawContentStateForInfoBoxEditor: rawContentState,
+    onChange: onChange,
+    onCancel: () => {
+      onEditFinish({});
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__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`
+
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
+}

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

@@ -0,0 +1,90 @@
+"use strict";
+
+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 _lilithDraftRenderer = require("@mirrormedia/lilith-draft-renderer");
+
+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
+} = _lilithDraftRenderer.MirrorMedia.blockRenderer;
+const SideIndexBlockButton = _styledComponents.default.div`
+  cursor: pointer;
+  margin-left: 20px;
+`;
+
+function SideIndexEditorBlock(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    h2Text,
+    sideIndexText,
+    sideIndexUrl,
+    sideIndexImage
+  } = entity.getData();
+
+  const onChange = ({
+    h2Text,
+    sideIndexText,
+    sideIndexUrl,
+    sideIndexImage
+  }) => {
+    // close `SideIndexInput`
+    setToShowInput(false);
+    onEditFinish({
+      entityKey,
+      entityData: {
+        h2Text,
+        sideIndexText,
+        sideIndexUrl,
+        sideIndexImage
+      }
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_sideIndex.SideIndexInput, {
+    h2Text: h2Text,
+    sideIndexText: sideIndexText,
+    sideIndexUrl: sideIndexUrl,
+    sideIndexImage: sideIndexImage,
+    onChange: onChange,
+    onCancel: () => {
+      onEditFinish({});
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__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`
+
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
+}