@kids-reporter/draft-editor 0.2.1 → 0.3.0

package/lib/block-renderer-fn.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.atomicBlockRenderer = atomicBlockRenderer;
+
+var _blockquote = require("./block-renderers/blockquote");
+
+var _draftRenderer = require("@kids-reporter/draft-renderer");
+
+const {
+  EmbeddedCodeInArticleBody,
+  ImageInArticleBody,
+  InfoBoxBlock,
+  SlideshowInArticleBody
+} = _draftRenderer.blockRenderers;
+
+const AtomicBlock = props => {
+  const entity = props.contentState.getEntity(props.block.getEntityAt(0));
+  const entityType = entity.getType();
+  const entityData = entity.getData();
+
+  switch (entityType) {
+    case 'BLOCKQUOTE':
+      {
+        return (0, _blockquote.EditableBlockquote)(props);
+      }
+
+    case 'IMAGE':
+      {
+        return ImageInArticleBody({
+          data: entityData
+        });
+      }
+
+    case 'SLIDESHOW':
+      {
+        return SlideshowInArticleBody({
+          data: entityData
+        });
+      }
+
+    case 'EMBEDDEDCODE':
+      {
+        return EmbeddedCodeInArticleBody({
+          data: entityData
+        });
+      }
+
+    case 'INFOBOX':
+      {
+        return InfoBoxBlock({
+          data: entityData
+        });
+      }
+  }
+
+  return null;
+};
+
+function atomicBlockRenderer(block) {
+  if (block.getType() === 'atomic') {
+    return {
+      component: AtomicBlock,
+      editable: false,
+      props: {}
+    };
+  }
+
+  return null;
+}

package/lib/block-renderers/atomic-block.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/block-renderers/blockquote.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditableBlockquote = EditableBlockquote;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _blockquote = require("../buttons/blockquote");
+
+var _draftRenderer = require("@kids-reporter/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 {
+  BlockquoteInArticleBody
+} = _draftRenderer.blockRenderers;
+const StyledBlockquote = (0, _styledComponents.default)(BlockquoteInArticleBody)``;
+const EditButton = _styledComponents.default.div`
+  cursor: pointer;
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+`;
+const EditableBlock = _styledComponents.default.div`
+  position: relative;
+
+  &:hover {
+    ${StyledBlockquote} {
+      background-color: #f0f0f0;
+      opacity: 0.3;
+    }
+
+    ${EditButton} {
+      opacity: 1;
+      display: block;
+    }
+  }
+`;
+
+function EditableBlockquote(props) {
+  const [isInputOpen, setIsInputOpen] = (0, _react.useState)(false);
+  const {
+    block,
+    blockProps,
+    contentState
+  } = props;
+  const {
+    onEditStart,
+    onEditFinish
+  } = blockProps;
+  const entityKey = block.getEntityAt(0);
+  const entity = contentState.getEntity(entityKey);
+  const data = entity.getData();
+
+  const onInputChange = inputValue => {
+    // close `BlockquoteInput`
+    setIsInputOpen(false);
+    onEditFinish({
+      entityKey,
+      entityData: inputValue
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blockquote.BlockquoteInput, {
+    isOpen: isInputOpen,
+    onCancel: () => {
+      setIsInputOpen(false);
+      onEditFinish();
+    },
+    onConfirm: onInputChange,
+    inputValue: data
+  }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledBlockquote, {
+    data: data
+  }), /*#__PURE__*/_react.default.createElement(EditButton, {
+    onClick: () => {
+      // call `onEditStart` prop as we are trying to update the blockquote entity
+      onEditStart(); // open `BlockquoteInput`
+
+      setIsInputOpen(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
+}

package/lib/buttons/blockquote.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockquoteButton = BlockquoteButton;
+exports.BlockquoteInput = BlockquoteInput;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _draftJs = require("draft-js");
+
+var _modals = require("@keystone-ui/modals");
+
+var _fields = require("@keystone-ui/fields");
+
+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;
+  margin: 10px 0;
+  font-weight: 600;
+`;
+var BlockquoteType;
+
+(function (BlockquoteType) {
+  BlockquoteType["borderLeft"] = "border_left";
+  BlockquoteType["quoteLeft"] = "quote_left";
+})(BlockquoteType || (BlockquoteType = {}));
+
+var BlockquoteLabel;
+
+(function (BlockquoteLabel) {
+  BlockquoteLabel["borderLeft"] = "\u5DE6\u908A\u6846";
+  BlockquoteLabel["quoteLeft"] = "\u5DE6\u5F15\u865F";
+})(BlockquoteLabel || (BlockquoteLabel = {}));
+
+const TypeSelectBlock = _styledComponents.default.div`
+  margin: 10px 0;
+`;
+
+function TypeSelect({
+  type,
+  options,
+  onChange
+}) {
+  return /*#__PURE__*/_react.default.createElement(TypeSelectBlock, null, /*#__PURE__*/_react.default.createElement(Label, {
+    htmlFor: "blockquoteType"
+  }, "\u7248\u578B"), /*#__PURE__*/_react.default.createElement(_fields.Select, {
+    value: options.find(option => option.value === type) || null,
+    options: options,
+    onChange: option => {
+      onChange(option.value);
+    }
+  }));
+}
+
+function BlockquoteInput({
+  isOpen,
+  onConfirm,
+  onCancel,
+  inputValue
+}) {
+  const [inputValueState, setInputValueState] = (0, _react.useState)(inputValue);
+
+  const confirmInput = () => {
+    onConfirm(inputValueState);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: `Insert Embedded Code` //isOpen={toShowInput}
+    ,
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: onCancel
+      },
+      confirm: {
+        label: 'Confirm',
+        action: confirmInput
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(TypeSelect, {
+    type: inputValueState.type,
+    options: [{
+      label: BlockquoteLabel.borderLeft,
+      value: BlockquoteType.borderLeft
+    }, {
+      label: BlockquoteLabel.quoteLeft,
+      value: BlockquoteType.quoteLeft
+    }],
+    onChange: blockquoteType => {
+      setInputValueState({
+        type: blockquoteType,
+        text: inputValueState.text
+      });
+    }
+  }), /*#__PURE__*/_react.default.createElement(_fields.TextArea, {
+    onChange: e => setInputValueState({
+      type: inputValueState.type,
+      text: e.target.value
+    }),
+    placeholder: "\u5F15\u8A00\u6587\u5B57",
+    type: "text",
+    value: inputValueState.text,
+    style: {
+      marginBottom: '30px'
+    }
+  })));
+}
+
+function BlockquoteButton(props) {
+  const {
+    editorState,
+    onChange,
+    className
+  } = props;
+  const [isInputOpen, setIsInputOpen] = (0, _react.useState)(false);
+
+  const promptForInput = () => {
+    setIsInputOpen(true);
+  };
+
+  const onInputChange = inputValue => {
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity('BLOCKQUOTE', 'IMMUTABLE', inputValue);
+    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, ' '));
+    setIsInputOpen(false);
+  };
+
+  const onInputCancel = () => {
+    setIsInputOpen(false);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isInputOpen && /*#__PURE__*/_react.default.createElement(BlockquoteInput, {
+    isOpen: isInputOpen,
+    onConfirm: onInputChange,
+    onCancel: onInputCancel,
+    inputValue: {
+      type: BlockquoteType.borderLeft,
+      text: ''
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => {
+      promptForInput();
+    },
+    className: className
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fas fa-quote-left"
+  })));
+}

package/lib/buttons/image.js

@@ -37,7 +37,7 @@ function ImageButton(props) {
     }
 
     const contentState = editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity('image', 'IMMUTABLE', { ...(selected === null || selected === void 0 ? void 0 : selected.image),
+    const contentStateWithEntity = contentState.createEntity('IMAGE', 'IMMUTABLE', { ...(selected === null || selected === void 0 ? void 0 : selected.image),
       desc: selected === null || selected === void 0 ? void 0 : selected.desc,
       alignment: align
     });

package/lib/buttons/selector/align-selector.js

@@ -59,7 +59,7 @@ function AlignSelector(props) {
   }, "\u5C0D\u9F4A"), /*#__PURE__*/_react.default.createElement(AlignSelect, {
     id: "alignment" // default align === undefined
     ,
-    value: options.find(option => option.value === align),
+    value: options.find(option => option.value === align) || null,
     options: options,
     onChange: option => {
       onChange(option.value);

package/lib/buttons/slideshow.js

@@ -35,7 +35,7 @@ function SlideshowButton(props) {
     }
 
     const contentState = editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity('slideshow', 'IMMUTABLE', {
+    const contentStateWithEntity = contentState.createEntity('SLIDESHOW', 'IMMUTABLE', {
       alignment: align,
       delay,
       images: selected.map(ele => {

package/lib/draft-editor.js

@@ -18,10 +18,14 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _draftJs = require("draft-js");
 
+var _blockRendererFn = require("./block-renderer-fn");
+
 var _draftRenderer = require("@kids-reporter/draft-renderer");
 
 var _annotation = require("./buttons/annotation");
 
+var _blockquote = require("./buttons/blockquote");
+
 var _embeddedCode = require("./buttons/embedded-code");
 
 var _enlarge = require("./buttons/enlarge");
@@ -131,6 +135,9 @@ const CustomButton = _styledComponents.default.div`
 const CustomAnnotationButton = (0, _styledComponents.default)(_annotation.AnnotationButton)`
   ${buttonStyle}
 `;
+const CustomBlockquoteButton = (0, _styledComponents.default)(_blockquote.BlockquoteButton)`
+  ${buttonStyle}
+`;
 const CustomLinkButton = (0, _styledComponents.default)(_link.LinkButton)`
   ${buttonStyle}
 `;
@@ -331,7 +338,7 @@ class RichTextEditor extends _react.default.Component {
     });
   };
   blockRendererFn = block => {
-    const atomicBlockObj = (0, _draftRenderer.atomicBlockRenderer)(block);
+    const atomicBlockObj = (0, _blockRendererFn.atomicBlockRenderer)(block);
 
     if (atomicBlockObj) {
       const onEditStart = () => {
@@ -352,8 +359,8 @@ class RichTextEditor extends _react.default.Component {
       const onEditFinish = ({
         entityKey,
         entityData
-      }) => {
-        if (entityKey) {
+      } = {}) => {
+        if (entityKey && entityData) {
           const oldContentState = this.props.editorState.getCurrentContent();
           const newContentState = oldContentState.replaceEntityData(entityKey, entityData);
           this.onChange(_draftJs.EditorState.set(this.props.editorState, {
@@ -422,10 +429,6 @@ class RichTextEditor extends _react.default.Component {
       href: "https://storage.googleapis.com/static-readr-tw-dev/cdn/draft-js/rich-editor.css",
       rel: "stylesheet",
       type: "text/css"
-    }), /*#__PURE__*/_react.default.createElement("link", {
-      href: "https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.11.7/Draft.css",
-      rel: "stylesheet",
-      type: "text/css"
     }), /*#__PURE__*/_react.default.createElement("link", {
       href: "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css",
       rel: "stylesheet",
@@ -449,6 +452,11 @@ class RichTextEditor extends _react.default.Component {
       editorState: editorState,
       onChange: this.onChange,
       readOnly: this.state.readOnly
+    }), /*#__PURE__*/_react.default.createElement(CustomBlockquoteButton, {
+      isDisabled: disabledButtons.includes(buttonNames.blockquote),
+      editorState: editorState,
+      onChange: this.onChange,
+      readOnly: this.state.readOnly
     }), /*#__PURE__*/_react.default.createElement(CustomAnnotationButton, {
       isDisabled: disabledButtons.includes(buttonNames.annotation),
       isActive: entityType === 'ANNOTATION',
@@ -540,10 +548,6 @@ const blockStyles = [{
   label: 'H4',
   style: 'header-four',
   icon: ''
-}, {
-  label: 'Blockquote',
-  style: 'blockquote',
-  icon: 'fas fa-quote-right'
 }, {
   label: 'UL',
   style: 'unordered-list-item',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@kids-reporter/draft-renderer": "0.2.1",
+    "@kids-reporter/draft-renderer": "0.3.0",
     "draft-js": "^0.11.7"
   },
   "peerDependencies": {