@kids-reporter/draft-editor 1.0.10 → 1.0.12

package/lib/block-renderer-fn.js

@@ -7,6 +7,7 @@ exports.atomicBlockRenderer = atomicBlockRenderer;
 var _blockquote = require("./block-renderers/blockquote");
 var _embeddedCode = require("./block-renderers/embedded-code");
 var _image = require("./block-renderers/image");
+var _imageLink = require("./block-renderers/image-link");
 var _infoBox = require("./block-renderers/info-box");
 var _slideshow = require("./block-renderers/slideshow");
 var _draftRenderer = require("@kids-reporter/draft-renderer");
@@ -25,6 +26,8 @@ const AtomicBlock = props => {
       return Divider();
     case 'IMAGE':
       return (0, _image.EditableImage)(props);
+    case 'IMAGE_LINK':
+      return (0, _imageLink.EditableImageLink)(props);
     case 'SLIDESHOW':
       return (0, _slideshow.EditableSlideshow)(props);
     case 'EMBEDDEDCODE':

package/lib/block-renderers/image-link.js

@@ -0,0 +1,152 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageLinkEditor = exports.EditableImageLink = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _modals = require("@keystone-ui/modals");
+var _fields = require("@keystone-ui/fields");
+var _draftJs = require("draft-js");
+var _draftRenderer = require("@kids-reporter/draft-renderer");
+var _imageSelector = require("../buttons/selector/image-selector");
+var _alignSelector = require("../buttons/selector/align-selector");
+var _styled = require("./styled");
+var _richTextEditor = require("../rich-text-editor");
+var _link = require("../entity-decorators/link");
+var _btNames = _interopRequireDefault(require("../buttons/bt-names"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const disabledButtons = [_btNames.default.bold, _btNames.default.italic, _btNames.default.underline, _btNames.default.fontColor, _btNames.default.backgroundColor, _btNames.default.ol, _btNames.default.ul, _btNames.default.divider, _btNames.default.h2, _btNames.default.h3, _btNames.default.h4, _btNames.default.h5, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.infoBox, _btNames.default.slideshow, _btNames.default.newsReading, _btNames.default.tocAnchor, _btNames.default.anchor, _btNames.default.embed, _btNames.default.annotation, _btNames.default.image, _btNames.default.imageLink];
+const {
+  ImageLinkInArticleBody
+} = _draftRenderer.blockRenderers;
+const StyledImage = (0, _styledComponents.default)(ImageLinkInArticleBody)``;
+const Label = _styledComponents.default.label`
+  display: block;
+  margin: 10px 0;
+  font-weight: 600;
+`;
+const EditableBlock = (0, _styledComponents.default)(_styled.EditableBlock)`
+  &:hover {
+    ${StyledImage} {
+      background-color: #f0f0f0;
+      opacity: 0.3;
+    }
+`;
+const ImageLinkEditor = props => {
+  const {
+    isOpen,
+    inputValue,
+    onConfirm,
+    onCancel
+  } = props;
+  const [url, setURL] = (0, _react.useState)(inputValue.url ?? '');
+  const [align, setAlign] = (0, _react.useState)(inputValue.alignment ?? _imageSelector.ImageAlignment.DEFAULT);
+  const contentState = (0, _draftJs.convertFromRaw)(inputValue.rawContentState);
+  const [description, setDescription] = (0, _react.useState)({
+    value: _draftJs.EditorState.createWithContent(contentState)
+  });
+  const contentWrapperRef = (0, _react.useRef)(null);
+  const onAlignSelectChange = align => {
+    setAlign(align);
+  };
+  const onAlignSelectOpen = () => {
+    var _contentWrapperRef$cu;
+    const scrollWrapper = (_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 ? void 0 : _contentWrapperRef$cu.parentElement;
+    if (scrollWrapper) {
+      scrollWrapper.scrollTop = scrollWrapper === null || scrollWrapper === void 0 ? void 0 : scrollWrapper.scrollHeight;
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_modals.DrawerController, {
+    isOpen: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_modals.Drawer, {
+    title: "Image Link",
+    actions: {
+      cancel: {
+        label: 'Cancel',
+        action: () => onCancel()
+      },
+      confirm: {
+        label: 'Confirm',
+        action: () => onConfirm({
+          url: url,
+          alignment: align,
+          rawContentState: (0, _draftJs.convertToRaw)(description.value.getCurrentContent())
+        })
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(Label, null, "\u9023\u7D50"), /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
+    placeholder: "\u5716\u7247\u9023\u7D50",
+    type: "text",
+    value: url,
+    onChange: e => setURL(e.target.value)
+  }), /*#__PURE__*/_react.default.createElement(_alignSelector.AlignSelector, {
+    align: align,
+    options: _imageSelector.ImageAlignOptions,
+    onChange: onAlignSelectChange,
+    onOpen: onAlignSelectOpen
+  }), /*#__PURE__*/_react.default.createElement(Label, null, "\u5716\u8AAA"), /*#__PURE__*/_react.default.createElement(_richTextEditor.RichTextEditor, {
+    decorators: [_link.editableLinkDecorator],
+    disabledButtons: disabledButtons,
+    editorState: description.value,
+    onChange: editorState => {
+      setDescription({
+        value: editorState
+      });
+    }
+  })));
+};
+exports.ImageLinkEditor = ImageLinkEditor;
+const EditableImageLink = props => {
+  const [isEditorOpen, setIsEditorOpen] = (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 {
+    url,
+    alignment,
+    rawContentState
+  } = data; // eslint-disable-line
+
+  const onChange = inputValue => {
+    setIsEditorOpen(false);
+    onEditFinish({
+      entityKey,
+      entityData: inputValue
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isEditorOpen && /*#__PURE__*/_react.default.createElement(ImageLinkEditor, {
+    isOpen: isEditorOpen,
+    inputValue: {
+      url: url,
+      alignment: alignment,
+      rawContentState: rawContentState
+    },
+    onConfirm: onChange,
+    onCancel: () => {
+      setIsEditorOpen(false);
+      onEditFinish();
+    }
+  }), /*#__PURE__*/_react.default.createElement(EditableBlock, {
+    component: /*#__PURE__*/_react.default.createElement(StyledImage, {
+      data: data
+    }),
+    onClick: () => {
+      onEditStart();
+      setIsEditorOpen(true);
+    }
+  }));
+};
+exports.EditableImageLink = EditableImageLink;

package/lib/buttons/bt-names.js

@@ -26,6 +26,7 @@ var _default = exports.default = {
   annotation: 'annotation',
   embed: 'embed',
   image: 'image',
+  imageLink: 'image-link',
   infoBox: 'info-box',
   link: 'link',
   slideshow: 'slideshow',

package/lib/buttons/image-link.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageLinkButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _draftJs = require("draft-js");
+var _imageLink = require("../block-renderers/image-link");
+var _imageSelector = require("../buttons/selector/image-selector");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ImageLinkButton = props => {
+  const {
+    editorState,
+    onChange: onEditorStateChange,
+    className
+  } = props;
+  const [isEditorOpen, setIsEditorOpen] = (0, _react.useState)(false);
+  const promptForImageLinkEditor = () => {
+    setIsEditorOpen(true);
+  };
+  const onChange = ({
+    url,
+    alignment,
+    rawContentState
+  }) => {
+    const contentState = editorState.getCurrentContent();
+    const contentStateWithEntity = contentState.createEntity('IMAGE_LINK', 'IMMUTABLE', {
+      url,
+      alignment,
+      rawContentState
+    });
+    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, ' '));
+    setIsEditorOpen(false);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isEditorOpen && /*#__PURE__*/_react.default.createElement(_imageLink.ImageLinkEditor, {
+    isOpen: isEditorOpen,
+    inputValue: {
+      url: '',
+      alignment: _imageSelector.ImageAlignment.DEFAULT,
+      rawContentState: {
+        blocks: [],
+        entityMap: {}
+      }
+    },
+    onConfirm: onChange,
+    onCancel: () => {
+      setIsEditorOpen(false);
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: className,
+    onClick: promptForImageLinkEditor
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "far fa-image"
+  }), /*#__PURE__*/_react.default.createElement("span", null, " ImageLink")));
+};
+exports.ImageLinkButton = ImageLinkButton;

package/lib/buttons/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withStyle = exports.InlineStyleControls = exports.CustomTOCAnchorButton = exports.CustomSlideshowButton = exports.CustomNewsReadingButton = exports.CustomLinkButton = exports.CustomInfoBoxButton = exports.CustomImageButton = exports.CustomFontColorButton = exports.CustomEnlargeButton = exports.CustomEmbeddedCodeButton = exports.CustomDividerButton = exports.CustomBlockquoteButton = exports.CustomBackgroundColorButton = exports.CustomAnnotationButton = exports.CustomAnchorButton = exports.BlockStyleControls = void 0;
+exports.withStyle = exports.InlineStyleControls = exports.CustomTOCAnchorButton = exports.CustomSlideshowButton = exports.CustomNewsReadingButton = exports.CustomLinkButton = exports.CustomInfoBoxButton = exports.CustomImageLinkButton = exports.CustomImageButton = exports.CustomFontColorButton = exports.CustomEnlargeButton = exports.CustomEmbeddedCodeButton = exports.CustomDividerButton = exports.CustomBlockquoteButton = exports.CustomBackgroundColorButton = exports.CustomAnnotationButton = exports.CustomAnchorButton = exports.BlockStyleControls = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _controlButtons = require("./control-buttons");
 var _bgColor = require("./bg-color");
@@ -13,6 +13,7 @@ var _embeddedCode = require("./embedded-code");
 var _enlarge = require("./enlarge");
 var _fontColor = require("./font-color");
 var _image = require("./image");
+var _imageLink = require("./image-link");
 var _tocAnchor = require("./toc-anchor");
 var _anchor = require("./anchor");
 var _link = require("./link");
@@ -38,6 +39,7 @@ const CustomEnlargeButton = exports.CustomEnlargeButton = (0, _styledComponents.
   color: #999;
 `;
 const CustomImageButton = exports.CustomImageButton = withStyle(_image.ImageButton);
+const CustomImageLinkButton = exports.CustomImageLinkButton = withStyle(_imageLink.ImageLinkButton);
 const CustomSlideshowButton = exports.CustomSlideshowButton = withStyle(_slideshow.SlideshowButton);
 const CustomEmbeddedCodeButton = exports.CustomEmbeddedCodeButton = withStyle(_embeddedCode.EmbeddedCodeButton);
 const CustomNewsReadingButton = exports.CustomNewsReadingButton = withStyle(_newsReading.NewsReadingButton);

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ImageAlignment = exports.ImageAlignOptions = void 0;
 exports.ImageSelector = ImageSelector;
 var _react = _interopRequireWildcard(require("react"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
@@ -15,6 +16,30 @@ var _pagination = require("./pagination");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+let ImageAlignment = exports.ImageAlignment = /*#__PURE__*/function (ImageAlignment) {
+  ImageAlignment["DEFAULT"] = "default";
+  ImageAlignment["PARAGRAPH"] = "paragraph-width";
+  ImageAlignment["LEFT"] = "left";
+  ImageAlignment["RIGHT"] = "right";
+  return ImageAlignment;
+}({});
+const ImageAlignOptions = exports.ImageAlignOptions = [{
+  value: ImageAlignment.DEFAULT,
+  label: '預設',
+  isDisabled: false
+}, {
+  value: ImageAlignment.PARAGRAPH,
+  label: '與文章段落等寬',
+  isDisabled: false
+}, {
+  value: ImageAlignment.LEFT,
+  label: '靠左',
+  isDisabled: false
+}, {
+  value: ImageAlignment.RIGHT,
+  label: '靠右',
+  isDisabled: false
+}];
 const _ = {
   debounce: _debounce.default
 };
@@ -135,7 +160,7 @@ const imagesQuery = (0, _apollo.gql)`
   }
 `;
 function ImageSelector(props) {
-  const alignment = props.alignment || 'default';
+  const alignment = props.alignment || ImageAlignment.DEFAULT;
   const [queryImages, {
     loading,
     error,
@@ -152,23 +177,6 @@ function ImageSelector(props) {
   const [align, setAlign] = (0, _react.useState)(alignment);
   const contentWrapperRef = (0, _react.useRef)(null);
   const pageSize = 6;
-  const options = [{
-    value: 'default',
-    label: 'default',
-    isDisabled: false
-  }, {
-    value: 'paragraph-width',
-    label: '與文章段落等寬',
-    isDisabled: false
-  }, {
-    value: 'left',
-    label: 'left',
-    isDisabled: false
-  }, {
-    value: 'right',
-    label: 'right',
-    isDisabled: false
-  }];
   const {
     enableMultiSelect = false,
     enableCaption = false,
@@ -280,7 +288,7 @@ function ImageSelector(props) {
     enableDelete: enableMultiSelect
   })), enableAlignment && /*#__PURE__*/_react.default.createElement(_alignSelector.AlignSelector, {
     align: align,
-    options: options,
+    options: ImageAlignOptions,
     onChange: onAlignSelectChange,
     onOpen: onAlignSelectOpen
   }))));

package/lib/rich-text-editor.js

@@ -215,6 +215,8 @@ class RichTextEditor extends _react.default.Component {
     }, commonProps, this.commonEditProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomImageButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.image),
       ImageSelector: _imageSelector.ImageSelector
+    }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomImageLinkButton, _extends({
+      isDisabled: disabledButtons.includes(_btNames.default.imageLink)
     }, commonProps)), /*#__PURE__*/_react.default.createElement(_buttons.CustomSlideshowButton, _extends({
       isDisabled: disabledButtons.includes(_btNames.default.slideshow),
       ImageSelector: _imageSelector.ImageSelector

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@kids-reporter/draft-renderer": "1.0.8",
+    "@kids-reporter/draft-renderer": "1.0.10",
     "@twreporter/errors": "^1.1.2",
     "draft-js": "^0.11.7"
   },