@kids-reporter/draft-editor 0.1.1 → 0.2.0

package/lib/buttons/video.js

@@ -1,65 +0,0 @@
-"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

@@ -1,147 +0,0 @@
-"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

@@ -1,18 +0,0 @@
-"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

@@ -1,58 +0,0 @@
-"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

@@ -1,233 +0,0 @@
-"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

@@ -1,76 +0,0 @@
-"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;