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

package/lib/website/mirrormedia/custom/block-renderer/media-block.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MediaBlock = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const styles = {
+  media: {
+    width: '100%'
+  }
+};
+
+const Audio = props => {
+  return /*#__PURE__*/_react.default.createElement("audio", {
+    controls: true,
+    src: props.src,
+    style: styles.media
+  });
+};
+
+const Image = props => {
+  return /*#__PURE__*/_react.default.createElement("img", {
+    src: props.src,
+    style: styles.media
+  });
+};
+
+const Video = props => {
+  return /*#__PURE__*/_react.default.createElement("video", {
+    controls: true,
+    src: props.src,
+    style: styles.media
+  });
+};
+
+const MediaBlock = entity => {
+  const {
+    src
+  } = entity.getData();
+  const type = entity.getType();
+  let media;
+
+  if (type === 'audioLink') {
+    media = /*#__PURE__*/_react.default.createElement(Audio, {
+      src: src
+    });
+  } else if (type === 'imageLink') {
+    media = /*#__PURE__*/_react.default.createElement(Image, {
+      src: src
+    });
+  } else if (type === 'videoLink') {
+    media = /*#__PURE__*/_react.default.createElement(Video, {
+      src: src
+    });
+  }
+
+  return media;
+};
+
+exports.MediaBlock = MediaBlock;

package/lib/website/mirrormedia/custom/block-renderer/related-post-block.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RelatedPostBlock = RelatedPostBlock;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const RelatedPostRenderWrapper = _styledComponents.default.div`
+  display: flex;
+  width: 100%;
+`;
+const RelatedPostItem = _styledComponents.default.div`
+  flex: 0 0 33.3333%;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+`;
+const RelatedPostImage = _styledComponents.default.img`
+  display: block;
+  width: 100%;
+  aspect-ratio: 2;
+  object-fit: cover;
+`;
+const RelatedPostTitle = _styledComponents.default.p`
+  margin: 0;
+  padding: 12px;
+`;
+
+function RelatedPostBlock(entity) {
+  const {
+    posts
+  } = entity.getData();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(RelatedPostRenderWrapper, null, posts.map(post => {
+    var _post$heroImage, _post$heroImage$resiz;
+
+    return /*#__PURE__*/_react.default.createElement(RelatedPostItem, {
+      key: post.id
+    }, /*#__PURE__*/_react.default.createElement(RelatedPostImage, {
+      src: (_post$heroImage = post.heroImage) === null || _post$heroImage === void 0 ? void 0 : (_post$heroImage$resiz = _post$heroImage.resized) === null || _post$heroImage$resiz === void 0 ? void 0 : _post$heroImage$resiz.original,
+      onError: e => {
+        var _post$heroImage2, _post$heroImage2$imag;
+
+        return e.currentTarget.src = (_post$heroImage2 = post.heroImage) === null || _post$heroImage2 === void 0 ? void 0 : (_post$heroImage2$imag = _post$heroImage2.imageFile) === null || _post$heroImage2$imag === void 0 ? void 0 : _post$heroImage2$imag.url;
+      }
+    }), /*#__PURE__*/_react.default.createElement(RelatedPostTitle, null, post.title));
+  })));
+}

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

@@ -0,0 +1,119 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideIndexBlock = SideIndexBlock;
+exports.SideIndexEditorBlock = SideIndexEditorBlock;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _sideIndex = require("../../../../draft-js/buttons/side-index");
+
+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 SideIndexBlockWrapper = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+`;
+const SideIndexBlockButton = _styledComponents.default.div`
+  cursor: pointer;
+  margin-left: 20px;
+`;
+const SideIndex = _styledComponents.default.span`
+  font-size: 16px;
+  margin-left: 20px;
+`;
+
+function SideIndexBlock(props) {
+  const {
+    block,
+    contentState
+  } = props;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const {
+    h2Text,
+    sideIndexText,
+    sideIndexUrl
+  } = entity.getData();
+  let sideIndexBlock;
+
+  if (sideIndexUrl) {
+    sideIndexBlock = /*#__PURE__*/_react.default.createElement("a", {
+      href: sideIndexUrl
+    }, /*#__PURE__*/_react.default.createElement(SideIndex, null, "\u5074\u6B04\uFF1A ", sideIndexText ? sideIndexText : h2Text));
+  } else {
+    sideIndexBlock = /*#__PURE__*/_react.default.createElement("h2", null, h2Text, /*#__PURE__*/_react.default.createElement(SideIndex, null, "\u5074\u6B04\uFF1A ", sideIndexText ? sideIndexText : h2Text));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(SideIndexBlockWrapper, null, sideIndexBlock);
+}
+
+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"))));
+}

package/lib/website/mirrormedia/custom/block-renderer/slideshow-block.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SlideshowBlock = SlideshowBlock;
+exports.SlideshowBlockV2 = SlideshowBlockV2;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Image = _styledComponents.default.img`
+  width: 100%;
+`;
+const SlideshowCount = _styledComponents.default.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 100%;
+  border: black 1px solid;
+  transform: translate(-50%, -50%);
+  background-color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  aspect-ratio: 1;
+  min-height: 66px;
+  padding: 10px;
+`;
+const Figure = _styledComponents.default.figure`
+  position: relative;
+  margin-block: unset;
+  margin-inline: unset;
+  margin: 0 10px;
+`; // support old version of slideshow without delay propertiy
+
+function SlideshowBlock(entity) {
+  var _images$, _images$$resized;
+
+  const images = entity.getData();
+  return /*#__PURE__*/_react.default.createElement(Figure, null, /*#__PURE__*/_react.default.createElement(Image, {
+    src: images === null || images === void 0 ? void 0 : (_images$ = images[0]) === null || _images$ === void 0 ? void 0 : (_images$$resized = _images$.resized) === null || _images$$resized === void 0 ? void 0 : _images$$resized.w800,
+    onError: e => {
+      var _images$2, _images$2$imageFile;
+
+      return e.currentTarget.src = images === null || images === void 0 ? void 0 : (_images$2 = images[0]) === null || _images$2 === void 0 ? void 0 : (_images$2$imageFile = _images$2.imageFile) === null || _images$2$imageFile === void 0 ? void 0 : _images$2$imageFile.url;
+    }
+  }), /*#__PURE__*/_react.default.createElement(SlideshowCount, null, "+", images.length));
+} // 202206 latest version of slideshow, support delay property
+
+
+function SlideshowBlockV2(entity) {
+  var _images$3, _images$3$resized;
+
+  const {
+    images,
+    delay
+  } = entity.getData();
+  return /*#__PURE__*/_react.default.createElement(Figure, null, /*#__PURE__*/_react.default.createElement(Image, {
+    src: images === null || images === void 0 ? void 0 : (_images$3 = images[0]) === null || _images$3 === void 0 ? void 0 : (_images$3$resized = _images$3.resized) === null || _images$3$resized === void 0 ? void 0 : _images$3$resized.w800,
+    onError: e => {
+      var _images$4, _images$4$imageFile;
+
+      return e.currentTarget.src = images === null || images === void 0 ? void 0 : (_images$4 = images[0]) === null || _images$4 === void 0 ? void 0 : (_images$4$imageFile = _images$4.imageFile) === null || _images$4$imageFile === void 0 ? void 0 : _images$4$imageFile.url;
+    }
+  }), /*#__PURE__*/_react.default.createElement(SlideshowCount, null, /*#__PURE__*/_react.default.createElement("div", null, "+", images.length), delay && /*#__PURE__*/_react.default.createElement("div", null, `${delay}s`)));
+}