@kids-reporter/draft-editor 0.1.0

package/lib/buttons/text-align.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M11.4286 2.28571H4.57143C3.93929 2.28571 3.42857 1.77393 3.42857 1.14286C3.42857 0.511786 3.93929 0 4.57143 0H11.4286C12.0607 0 12.5714 0.511786 12.5714 1.14286C12.5714 1.77393 12.0607 2.28571 11.4286 2.28571ZM14.8571 6.85714H1.14286C0.511786 6.85714 0 6.34643 0 5.71429C0 5.08214 0.511786 4.57143 1.14286 4.57143H14.8571C15.4893 4.57143 16 5.08214 16 5.71429C16 6.34643 15.4893 6.85714 14.8571 6.85714ZM0 14.8571C0 14.225 0.511786 13.7143 1.14286 13.7143H14.8571C15.4893 13.7143 16 14.225 16 14.8571C16 15.4893 15.4893 16 14.8571 16H1.14286C0.511786 16 0 15.4893 0 14.8571ZM11.4286 11.4286H4.57143C3.93929 11.4286 3.42857 10.9179 3.42857 10.2857C3.42857 9.65357 3.93929 9.14286 4.57143 9.14286H11.4286C12.0607 9.14286 12.5714 9.65357 12.5714 10.2857C12.5714 10.9179 12.0607 11.4286 11.4286 11.4286Z",
+    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
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M9.14286 2.28571H1.14286C0.511786 2.28571 0 1.77393 0 1.14286C0 0.511786 0.511786 0 1.14286 0H9.14286C9.775 0 10.2857 0.511786 10.2857 1.14286C10.2857 1.77393 9.775 2.28571 9.14286 2.28571ZM9.14286 11.4286H1.14286C0.511786 11.4286 0 10.9179 0 10.2857C0 9.65357 0.511786 9.14286 1.14286 9.14286H9.14286C9.775 9.14286 10.2857 9.65357 10.2857 10.2857C10.2857 10.9179 9.775 11.4286 9.14286 11.4286ZM0 5.71429C0 5.08214 0.511786 4.57143 1.14286 4.57143H14.8571C15.4893 4.57143 16 5.08214 16 5.71429C16 6.34643 15.4893 6.85714 14.8571 6.85714H1.14286C0.511786 6.85714 0 6.34643 0 5.71429ZM14.8571 16H1.14286C0.511786 16 0 15.4893 0 14.8571C0 14.225 0.511786 13.7143 1.14286 13.7143H14.8571C15.4893 13.7143 16 14.225 16 14.8571C16 15.4893 15.4893 16 14.8571 16Z",
+    fill: isActive ? '#ED8B00' : '#6b7280'
+  }))));
+}

package/lib/buttons/video.js

@@ -0,0 +1,65 @@
+"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/buttons/youtube.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.YoutubeButton = YoutubeButton;
+exports.YoutubeInput = YoutubeInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _draftJs = require("draft-js");
+
+var _modals = require("@keystone-ui/modals");
+
+var _fields = require("@keystone-ui/fields");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+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 Label = _styledComponents.default.label`
+  display: block;
+  font-weight: 600;
+  margin: 10px 0;
+`;
+
+function YoutubeInput(props) {
+  const {
+    isOpen,
+    onChange,
+    onCancel
+  } = props;
+  const initialInputValue = {
+    description: '',
+    youtubeId: ''
+  };
+  const [inputValue, setInputValue] = (0, _react.useState)(initialInputValue);
+
+  const clearInputValue = () => {
+    setInputValue(initialInputValue);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: `Insert Youtube video`,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => {
+          clearInputValue();
+          onCancel();
+        }
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => {
+          onChange({
+            description: inputValue.description,
+            youtubeId: inputValue.youtubeId
+          });
+          clearInputValue();
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: "description"
+  }, "Youtube Description"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => setInputValue({
+      description: e.target.value,
+      youtubeId: inputValue.youtubeId
+    }),
+    type: "text",
+    placeholder: "description",
+    id: "description",
+    value: inputValue.description
+  }), /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: "youtubeId"
+  }, "Youtube Videi Id"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    onChange: e => setInputValue({
+      description: inputValue.description,
+      youtubeId: e.target.value
+    }),
+    type: "text",
+    placeholder: "youtubeId",
+    id: "youtubeId",
+    value: inputValue.youtubeId
+  })));
+}
+
+function YoutubeButton(props) {
+  const [toShowInput, setToShowInput] = (0, _react.useState)(false);
+  const {
+    className,
+    editorState,
+    onChange: onEditorStateChange
+  } = props;
+
+  const onChange = ({
+    description,
+    youtubeId
+  }) => {
+    const contentState = editorState.getCurrentContent(); // create an InfoBox entity
+
+    const contentStateWithEntity = contentState.createEntity('YOUTUBE', 'IMMUTABLE', {
+      description,
+      youtubeId
+    });
+    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
+
+
+    onEditorStateChange(_draftJs.AtomicBlockUtils.insertAtomicBlock(newEditorState, entityKey, ' '));
+    setToShowInput(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(YoutubeInput, {
+    onChange: onChange,
+    onCancel: () => {
+      setToShowInput(false);
+    },
+    isOpen: toShowInput
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: () => {
+      setToShowInput(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    height: "16px",
+    width: "14px",
+    version: "1.1",
+    id: "Layer_1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 461.001 461.001"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fill: "#6b7280",
+    d: "M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728 c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137 C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607 c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
+  })), /*#__PURE__*/_react.default.createElement("span", null, "Youtube")));
+}

package/lib/const.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _const = require("@kids-reporter/draft-renderer/lib/const");
+
+Object.keys(_const).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _const[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _const[key];
+    }
+  });
+});

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

@@ -0,0 +1,58 @@
+"use strict";
+
+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',
+  alignment: 'center',
+  content: [],
+  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-converter/atomic-block-processor.js

@@ -0,0 +1,233 @@
+"use strict";
+
+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
+ *  @property {Record<string, string>[]} columns
+ *  @property {Record<string, string>[][]} cells
+ */
+
+/**
+ *  @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
+    // ex:
+    // entity.type = IMAGE, entity.data={id,name,url...}
+
+    const entity = entityMap[entityRange.key];
+
+    let type = _lodash.default.get(entity, 'type', ''); // 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 = [{
+            title: entity === null || entity === void 0 ? void 0 : (_entity$data = entity.data) === null || _entity$data === void 0 ? void 0 : _entity$data.title,
+            body: entity === null || entity === void 0 ? void 0 : (_entity$data2 = entity.data) === null || _entity$data2 === void 0 ? void 0 : _entity$data2.body
+          }];
+          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", {
+                key: `col_${cIndex}`,
+                style: Object.assign({}, colStyle, cellStyle),
+                dangerouslySetInnerHTML: {
+                  __html: (0, _draftConvert.convertToHTML)((0, _draftJs.convertFromRaw)(col))
+                }
+              });
+            });
+            return /*#__PURE__*/React.createElement("tr", {
+              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
+
+          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'
+        type = 'quoteby';
+        alignment = entity.data && entity.data.alignment || alignment;
+        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:
+      case _entities.default.SLIDESHOW.type:
+      case _entities.default['SLIDESHOW-V2'].type:
+      case _entities.default.VIDEO.type:
+      case _entities.default.YOUTUBE.type:
+      case _entities.default.BACKGROUNDIMAGE.type:
+      case _entities.default.BACKGROUNDVIDEO.type:
+      case _entities.default.RELATEDPOST.type:
+      case _entities.default.SIDEINDEX.type:
+        alignment = entity.data && entity.data.alignment || alignment;
+        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"/>`,
+            url: url
+          }];
+          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;
+          let height;
+          let width;
+          let parser = new htmlparser2.Parser({
+            onopentag: (name, attribs) => {
+              if (name === 'script') {
+                scriptTagStart = true;
+                script.attribs = attribs;
+              } else if (name === 'iframe') {
+                height = _lodash.default.get(attribs, 'height', 0);
+                width = _lodash.default.get(attribs, 'width', 0);
+              }
+            },
+            ontext: text => {
+              if (scriptTagStart) {
+                script.text = text;
+              }
+            },
+            onclosetag: tagname => {
+              if (tagname === 'script' && scriptTagStart) {
+                scriptTagStart = false;
+                scripts.push(script);
+              }
+            }
+          });
+          parser.write(embeddedCode);
+          parser.end();
+          content = [{
+            caption,
+            embeddedCode,
+            embeddedCodeWithoutScript: embeddedCode.replace(/<script(.+?)\/script>/g, ''),
+            height,
+            scripts,
+            width
+          }];
+          break;
+        }
+
+      default:
+        return;
+    } // block type of api data should be lower case
+
+
+    return new _apiDataInstance.default({
+      id: block.key,
+      alignment,
+      type: type && type.toLowerCase(),
+      content,
+      styles
+    });
+  }
+
+};
+var _default = processor;
+exports.default = _default;

package/lib/draft-converter/entities.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// 'use strict';
+const ENTITY = {
+  DIVIDER: {
+    type: 'DIVIDER'
+  },
+  ANNOTATION: {
+    type: 'ANNOTATION'
+  },
+  BLOCKQUOTE: {
+    type: 'BLOCKQUOTE'
+  },
+  LINK: {
+    type: 'LINK'
+  },
+  INFOBOX: {
+    type: 'INFOBOX'
+  },
+  COLORBOX: {
+    type: 'COLORBOX'
+  },
+  EMBEDDEDCODE: {
+    type: 'EMBEDDEDCODE'
+  },
+  AUDIO: {
+    type: 'AUDIO'
+  },
+  VIDEO: {
+    type: 'VIDEO'
+  },
+  IMAGE: {
+    type: 'IMAGE'
+  },
+  STOREDIMAGE: {
+    type: 'STOREDIMAGE'
+  },
+  IMAGEDIFF: {
+    type: 'IMAGEDIFF'
+  },
+  IMAGELINK: {
+    type: 'IMAGELINK'
+  },
+  SLIDESHOW: {
+    type: 'SLIDESHOW',
+    slideshowSelectionLimit: 30
+  },
+  ['SLIDESHOW-V2']: {
+    type: 'SLIDESHOW-V2',
+    slideshowSelectionLimit: 30
+  },
+  YOUTUBE: {
+    type: 'YOUTUBE'
+  },
+  TABLE: {
+    type: 'TABLE'
+  },
+  BACKGROUNDIMAGE: {
+    type: 'BACKGROUNDIMAGE'
+  },
+  BACKGROUNDVIDEO: {
+    type: 'BACKGROUNDVIDEO'
+  },
+  RELATEDPOST: {
+    type: 'RELATEDPOST'
+  },
+  SIDEINDEX: {
+    type: 'SIDEINDEX'
+  }
+};
+var _default = ENTITY;
+exports.default = _default;