@kids-reporter/draft-editor 1.0.2 → 1.0.3

package/lib/block-renderer-fn.js

@@ -20,35 +20,21 @@ const AtomicBlock = props => {
   const entityData = entity.getData();
   switch (entityType) {
     case 'BLOCKQUOTE':
-      {
-        return (0, _blockquote.EditableBlockquote)(props);
-      }
+      return (0, _blockquote.EditableBlockquote)(props);
     case 'DIVIDER':
-      {
-        return Divider();
-      }
+      return Divider();
     case 'IMAGE':
-      {
-        return (0, _image.EditableImage)(props);
-      }
+      return (0, _image.EditableImage)(props);
     case 'SLIDESHOW':
-      {
-        return (0, _slideshow.EditableSlideshow)(props);
-      }
+      return (0, _slideshow.EditableSlideshow)(props);
     case 'EMBEDDEDCODE':
-      {
-        return (0, _embeddedCode.EditableEmbeddedCode)(props);
-      }
+      return (0, _embeddedCode.EditableEmbeddedCode)(props);
     case 'INFOBOX':
-      {
-        return (0, _infoBox.EditableInfoBox)(props);
-      }
+      return (0, _infoBox.EditableInfoBox)(props);
     case 'NEWS_READING':
-      {
-        return NewsReading({
-          data: entityData
-        });
-      }
+      return NewsReading({
+        data: entityData
+      });
   }
   return null;
 };

package/lib/block-renderers/blockquote.js

@@ -53,16 +53,13 @@ function EditableBlockquote(props) {
     },
     onConfirm: onInputChange,
     inputValue: data
-  }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledBlockquote, {
-    data: data
-  }), /*#__PURE__*/_react.default.createElement(_styled.EditButton, {
+  }), /*#__PURE__*/_react.default.createElement(EditableBlock, {
+    component: /*#__PURE__*/_react.default.createElement(StyledBlockquote, {
+      data: data
+    }),
     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/block-renderers/embedded-code.js

@@ -66,16 +66,13 @@ function EditableEmbeddedCode(props) {
     },
     onConfirm: onInputChange,
     inputValue: data
-  }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledEmbeddedCode, {
-    embeddedCode: data === null || data === void 0 ? void 0 : data.embeddedCode
-  }), /*#__PURE__*/_react.default.createElement(_styled.EditButton, {
+  }), /*#__PURE__*/_react.default.createElement(EditableBlock, {
+    component: /*#__PURE__*/_react.default.createElement(StyledEmbeddedCode, {
+      embeddedCode: data === null || data === void 0 ? void 0 : data.embeddedCode
+    }),
     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/block-renderers/image.js

@@ -63,16 +63,13 @@ function EditableImage(props) {
     enableAlignment: true,
     alignment: data.alignment,
     selected: [imageWithMeta]
-  }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledImage, {
-    data: data
-  }), /*#__PURE__*/_react.default.createElement(_styled.EditButton, {
+  }), /*#__PURE__*/_react.default.createElement(EditableBlock, {
+    component: /*#__PURE__*/_react.default.createElement(StyledImage, {
+      data: data
+    }),
     onClick: () => {
-      // call `onEditStart` prop as we are trying to update the blockquote entity
       onEditStart();
-      // open `BlockquoteInput`
       setIsSelectorOpen(true);
     }
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "fa-solid fa-pen"
-  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
+  }));
 }

package/lib/block-renderers/info-box.js

@@ -57,16 +57,13 @@ function EditableInfoBox(props) {
     inputValue: data,
     Editor: Editor,
     decorator: decorator
-  }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledInfoBox, {
-    data: data
-  }), /*#__PURE__*/_react.default.createElement(_styled.EditButton, {
+  }), /*#__PURE__*/_react.default.createElement(EditableBlock, {
+    component: /*#__PURE__*/_react.default.createElement(StyledInfoBox, {
+      data: data
+    }),
     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/block-renderers/slideshow.js

@@ -60,16 +60,13 @@ function EditableSlideshow(props) {
     enableMultiSelect: true,
     alignment: data.alignment,
     selected: data.images
-  }), /*#__PURE__*/_react.default.createElement(EditableBlock, null, /*#__PURE__*/_react.default.createElement(StyledSlideshow, {
-    data: data
-  }), /*#__PURE__*/_react.default.createElement(_styled.EditButton, {
+  }), /*#__PURE__*/_react.default.createElement(EditableBlock, {
+    component: /*#__PURE__*/_react.default.createElement(StyledSlideshow, {
+      data: data
+    }),
     onClick: () => {
-      // call `onEditStart` prop as we are trying to update the blockquote entity
       onEditStart();
-      // open `BlockquoteInput`
       setIsSelectorOpen(true);
     }
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "fa-solid fa-pen"
-  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify"))));
+  }));
 }

package/lib/block-renderers/styled.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EditableBlock = exports.EditButton = void 0;
+exports.EditableBlock = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const EditButton = _styledComponents.default.div`
@@ -14,8 +15,7 @@ const EditButton = _styledComponents.default.div`
   left: 50%;
   transform: translate(-50%, -50%);
 `;
-exports.EditButton = EditButton;
-const EditableBlock = _styledComponents.default.div`
+const _EditableBlock = _styledComponents.default.div`
   position: relative;
 
   &:hover {
@@ -25,4 +25,11 @@ const EditableBlock = _styledComponents.default.div`
     }
   }
 `;
+const EditableBlock = props => {
+  return /*#__PURE__*/_react.default.createElement(_EditableBlock, null, props.component, /*#__PURE__*/_react.default.createElement(EditButton, {
+    onClick: props.onClick
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "fa-solid fa-pen"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Modify")));
+};
 exports.EditableBlock = EditableBlock;

package/lib/buttons/anchor.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnchorButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _draftJs = require("draft-js");
+var _draftRenderer = require("@kids-reporter/draft-renderer");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const AnchorButton = props => {
+  const toggleEntity = _draftJs.RichUtils.toggleLink;
+  const {
+    isActive,
+    editorState,
+    onChange
+  } = props;
+  const promptForAnchor = e => {
+    e.preventDefault();
+    const selection = editorState.getSelection();
+    if (!selection.isCollapsed()) {
+      const contentState = editorState.getCurrentContent();
+      const startKey = selection.getStartKey();
+      const block = contentState.getBlockForKey(startKey);
+      const start = selection.getStartOffset();
+      const end = selection.getEndOffset();
+      const selectedText = block.getText().slice(start, end);
+      const contentStateWithEntity = contentState.createEntity(_draftRenderer.ANCHOR_ENTITY_TYPE, 'IMMUTABLE', {
+        anchorKey: `createdAt-${Date.now()}`,
+        anchorLabel: selectedText
+      });
+      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+      const newEditorState = _draftJs.EditorState.set(editorState, {
+        currentContent: contentStateWithEntity
+      });
+      onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
+    }
+  };
+  const removeAnchor = () => {
+    const selection = editorState.getSelection();
+    if (!selection.isCollapsed()) {
+      onChange(toggleEntity(editorState, selection, null));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className,
+    onMouseDown: isActive ? removeAnchor : promptForAnchor,
+    title: "\u7D22\u5F15"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "\u7D22"));
+};
+exports.AnchorButton = AnchorButton;

package/lib/buttons/annotation.js

@@ -11,7 +11,7 @@ var _modals = require("@keystone-ui/modals");
 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 disabledButtons = [_btNames.default.h2, _btNames.default.h3, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.annotation, _btNames.default.embed, _btNames.default.image, _btNames.default.infoBox, _btNames.default.slideshow, _btNames.default.newsReading];
+const disabledButtons = [_btNames.default.h2, _btNames.default.h3, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.annotation, _btNames.default.embed, _btNames.default.image, _btNames.default.infoBox, _btNames.default.slideshow, _btNames.default.newsReading, _btNames.default.anchor];
 function createAnnotationButton({
   InnerEditor,
   decorator

package/lib/buttons/bt-names.js

@@ -30,6 +30,7 @@ var _default = {
   link: 'link',
   slideshow: 'slideshow',
   newsReading: 'news-reading',
-  divider: 'divider'
+  divider: 'divider',
+  anchor: 'anchor'
 };
 exports.default = _default;

package/lib/buttons/control-buttons.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buttonStyle = exports.InlineStyleControls = exports.BlockStyleControls = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const buttonStyle = (0, _styledComponents.css)`
+  cursor: pointer;
+  border-radius: 6px;
+  text-align: center;
+  font-size: 1rem;
+  padding: 0 12px;
+  margin: ${props => props.isDisabled ? '0' : '0 0 10px 0'};
+  background-color: #fff;
+  border: solid 1px rgb(193, 199, 208);
+  align-items: center;
+  height: 40px;
+
+  cursor: ${props => props.readOnly ? 'not-allowed' : 'pointer'};
+  color: ${props => {
+  if (props.readOnly) {
+    return '#c1c7d0';
+  }
+  if (props.isActive) {
+    return '#3b82f6';
+  }
+  return '#6b7280';
+}};
+  border: solid 1px
+    ${props => {
+  if (props.readOnly) {
+    return '#c1c7d0';
+  }
+  if (props.isActive) {
+    return '#3b82f6';
+  }
+  return '#6b7280';
+}};
+  box-shadow: ${props => {
+  if (props.readOnly) {
+    return 'unset';
+  }
+  if (props.isActive) {
+    return 'rgba(38, 132, 255, 20%)  0px 1px 4px ';
+  }
+  return 'unset';
+}};
+  transition: box-shadow 100ms linear;
+
+  display: ${props => {
+  if (props.isDisabled) {
+    return 'none';
+  }
+  return 'inline-flex';
+}};
+`;
+exports.buttonStyle = buttonStyle;
+const CustomButton = _styledComponents.default.div`
+  ${buttonStyle}
+`;
+class StyleButton extends _react.default.Component {
+  onToggle = e => {
+    e.preventDefault();
+    this.props.onToggle(this.props.style);
+  };
+  render() {
+    return /*#__PURE__*/_react.default.createElement(CustomButton, {
+      isDisabled: this.props.isDisabled,
+      isActive: this.props.active,
+      onMouseDown: this.onToggle,
+      readOnly: this.props.readOnly
+    }, this.props.icon && /*#__PURE__*/_react.default.createElement("i", {
+      className: this.props.icon
+    }), /*#__PURE__*/_react.default.createElement("span", null, !this.props.icon ? this.props.label : ''));
+  }
+}
+const blockStyles = [{
+  label: 'H2',
+  style: 'header-two',
+  icon: ''
+}, {
+  label: 'H3',
+  style: 'header-three',
+  icon: ''
+}, {
+  label: 'H4',
+  style: 'header-four',
+  icon: ''
+}, {
+  label: 'H5',
+  style: 'header-five',
+  icon: ''
+}, {
+  label: 'UL',
+  style: 'unordered-list-item',
+  icon: 'fas fa-list-ul'
+}, {
+  label: 'OL',
+  style: 'ordered-list-item',
+  icon: 'fas fa-list-ol'
+}, {
+  label: 'Code Block',
+  style: 'code-block',
+  icon: 'fas fa-code'
+}];
+const BlockStyleControls = props => {
+  const {
+    editorState,
+    disabledButtons
+  } = props;
+  const selection = editorState.getSelection();
+  const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, blockStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
+    isDisabled: disabledButtons.includes(type.style),
+    key: type.label,
+    active: type.style === blockType,
+    label: type.label,
+    onToggle: props.onToggle,
+    style: type.style,
+    icon: type.icon,
+    readOnly: props.readOnly
+  })));
+};
+exports.BlockStyleControls = BlockStyleControls;
+const inlineStyles = [{
+  label: 'Bold',
+  style: 'BOLD',
+  icon: 'fas fa-bold'
+}, {
+  label: 'Italic',
+  style: 'ITALIC',
+  icon: 'fas fa-italic'
+}, {
+  label: 'Underline',
+  style: 'UNDERLINE',
+  icon: 'fas fa-underline'
+}, {
+  label: 'Monospace',
+  style: 'CODE',
+  icon: 'fas fa-terminal'
+}];
+const InlineStyleControls = props => {
+  const currentStyle = props.editorState.getCurrentInlineStyle();
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, inlineStyles.map(type => /*#__PURE__*/_react.default.createElement(StyleButton, {
+    isDisabled: props.disabledButtons.includes(type.style.toLowerCase()),
+    key: type.label,
+    active: currentStyle.has(type.style),
+    label: type.label,
+    onToggle: props.onToggle,
+    style: type.style,
+    icon: type.icon,
+    readOnly: props.readOnly
+  })));
+};
+exports.InlineStyleControls = InlineStyleControls;

package/lib/buttons/index.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withStyle = exports.InlineStyleControls = exports.CustomSlideshowButton = exports.CustomNewsReadingButton = exports.CustomLinkButton = exports.CustomImageButton = exports.CustomFontColorButton = exports.CustomEnlargeButton = exports.CustomEmbeddedCodeButton = exports.CustomDividerButton = exports.CustomBlockquoteButton = exports.CustomBackgroundColorButton = exports.CustomAnchorButton = exports.BlockStyleControls = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _controlButtons = require("./control-buttons");
+var _bgColor = require("./bg-color");
+var _blockquote = require("./blockquote");
+var _divider = require("./divider");
+var _embeddedCode = require("./embedded-code");
+var _enlarge = require("./enlarge");
+var _fontColor = require("./font-color");
+var _image = require("./image");
+var _anchor = require("./anchor");
+var _link = require("./link");
+var _slideshow = require("./slideshow");
+var _newsReading = require("./news-reading");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const withStyle = Button => {
+  return (0, _styledComponents.default)(Button)`
+    ${_controlButtons.buttonStyle}
+  `;
+};
+exports.withStyle = withStyle;
+const BlockStyleControls = _controlButtons.BlockStyleControls;
+exports.BlockStyleControls = BlockStyleControls;
+const InlineStyleControls = _controlButtons.InlineStyleControls;
+exports.InlineStyleControls = InlineStyleControls;
+const CustomBlockquoteButton = withStyle(_blockquote.BlockquoteButton);
+exports.CustomBlockquoteButton = CustomBlockquoteButton;
+const CustomAnchorButton = withStyle(_anchor.AnchorButton);
+exports.CustomAnchorButton = CustomAnchorButton;
+const CustomLinkButton = withStyle(_link.LinkButton);
+exports.CustomLinkButton = CustomLinkButton;
+const CustomEnlargeButton = (0, _styledComponents.default)(withStyle(_enlarge.EnlargeButton))`
+  color: #999;
+`;
+exports.CustomEnlargeButton = CustomEnlargeButton;
+const CustomImageButton = withStyle(_image.ImageButton);
+exports.CustomImageButton = CustomImageButton;
+const CustomSlideshowButton = withStyle(_slideshow.SlideshowButton);
+exports.CustomSlideshowButton = CustomSlideshowButton;
+const CustomEmbeddedCodeButton = withStyle(_embeddedCode.EmbeddedCodeButton);
+exports.CustomEmbeddedCodeButton = CustomEmbeddedCodeButton;
+const CustomNewsReadingButton = withStyle(_newsReading.NewsReadingButton);
+exports.CustomNewsReadingButton = CustomNewsReadingButton;
+const CustomBackgroundColorButton = withStyle(_bgColor.BackgroundColorButton);
+exports.CustomBackgroundColorButton = CustomBackgroundColorButton;
+const CustomFontColorButton = withStyle(_fontColor.FontColorButton);
+exports.CustomFontColorButton = CustomFontColorButton;
+const CustomDividerButton = withStyle(_divider.DividerButton);
+exports.CustomDividerButton = CustomDividerButton;

package/lib/buttons/info-box.js

@@ -13,7 +13,7 @@ var _select = require("./form/select");
 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 disabledButtons = [_btNames.default.h2, _btNames.default.h3, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.infoBox, _btNames.default.slideshow, _btNames.default.newsReading];
+const disabledButtons = [_btNames.default.h2, _btNames.default.h3, _btNames.default.code, _btNames.default.codeBlock, _btNames.default.blockquote, _btNames.default.infoBox, _btNames.default.slideshow, _btNames.default.newsReading, _btNames.default.anchor];
 var InfoBoxTypeEnum = /*#__PURE__*/function (InfoBoxTypeEnum) {
   InfoBoxTypeEnum["newsChargeStation"] = "news-charge-station";
   InfoBoxTypeEnum["headerBorder"] = "header-border";

package/lib/buttons/inner-anchor.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InnerAnchorButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _draftJs = require("draft-js");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import { ANCHOR_ENTITY_TYPE } from '@kids-reporter/draft-renderer'
+
+const InnerAnchorButton = props => {
+  const toggleEntity = _draftJs.RichUtils.toggleLink;
+  const {
+    isActive,
+    editorState,
+    onChange
+  } = props;
+  const promptForAnchor = e => {
+    e.preventDefault();
+    const selection = editorState.getSelection();
+    if (!selection.isCollapsed()) {
+      const contentState = editorState.getCurrentContent();
+      const startKey = selection.getStartKey();
+      const block = contentState.getBlockForKey(startKey);
+      const start = selection.getStartOffset();
+      const end = selection.getEndOffset();
+      const selectedText = block.getText().slice(start, end);
+      const contentStateWithEntity = contentState.createEntity('ANCHOR',
+      // TODO: ANCHOR_ENTITY_TYPE
+      'MUTABLE', {
+        anchorID: selectedText
+      });
+      const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
+      const newEditorState = _draftJs.EditorState.set(editorState, {
+        currentContent: contentStateWithEntity
+      });
+      onChange(toggleEntity(newEditorState, newEditorState.getSelection(), entityKey));
+    }
+  };
+  const removeAnchor = () => {
+    const selection = editorState.getSelection();
+    if (!selection.isCollapsed()) {
+      onChange(toggleEntity(editorState, selection, null));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: props.className,
+    onMouseDown: isActive ? removeAnchor : promptForAnchor,
+    title: "\u9328\u9EDE"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "\u9328"));
+};
+exports.InnerAnchorButton = InnerAnchorButton;