@kids-reporter/draft-editor 1.0.32 → 1.0.34

package/lib/buttons/link.js

@@ -8,6 +8,7 @@ var _draftRenderer = require("@kids-reporter/draft-renderer");
 var _draftJs = require("draft-js");
 var _react = require("react");
 var _link = require("../entity-decorators/link");
+var _linkTrailingBuffer = require("../utils/link-trailing-buffer");
 var _jsxRuntime = require("react/jsx-runtime");
 const LinkButton = props => {
   const {
@@ -33,7 +34,9 @@ const LinkButton = props => {
     const newEditorState = _draftJs.EditorState.set(editorState, {
       currentContent: contentStateWithEntity
     });
-    onChange(_draftJs.RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey));
+    let next = _draftJs.RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey);
+    next = (0, _linkTrailingBuffer.appendLinkCreateTrailingBuffer)(next);
+    onChange(next);
     setToShowUrlInput(false);
     props.onEditFinish();
   };

package/lib/entity-decorators/wrapper.js

@@ -9,20 +9,29 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Wrapper = _styledComponents.default.span`
   display: inline;
+  padding-right: 1.25em;
   color: #8e8e8e;
 `;
-const EditButton = _styledComponents.default.div`
-  display: inline;
+const EditButton = _styledComponents.default.span`
+  position: absolute;
+  right: -20px;
   cursor: pointer;
-  padding-left: 2px;
-  padding-right: 2px;
+  user-select: none;
+`;
+const IconAnchor = _styledComponents.default.span`
+  display: inline;
+  position: relative;
 `;
 const EditableWrapper = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
-    children: [props.component, /*#__PURE__*/(0, _jsxRuntime.jsx)(EditButton, {
-      onClick: props.onClick,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: "fas fa-pen"
+    children: [props.component, /*#__PURE__*/(0, _jsxRuntime.jsx)(IconAnchor, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(EditButton, {
+        contentEditable: false,
+        onMouseDown: e => e.preventDefault(),
+        onClick: props.onClick,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "fas fa-pen"
+        })
       })
     })]
   });

package/lib/utils/link-trailing-buffer.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.appendLinkCreateTrailingBuffer = appendLinkCreateTrailingBuffer;
+var _draftJs = require("draft-js");
+/** Draft has no zero-length entity; ZWSP gives a neutral tail after a new link. */
+const LINK_TRAILING_BUFFER = '\u200b';
+
+/**
+ * After toggleLink, collapse to range end and insert a zero-width buffer
+ * without link entity so IME / typing can continue outside the link span.
+ */
+function appendLinkCreateTrailingBuffer(editorState) {
+  const sel = editorState.getSelection();
+  const collapsed = sel.merge({
+    anchorKey: sel.getEndKey(),
+    anchorOffset: sel.getEndOffset(),
+    focusKey: sel.getEndKey(),
+    focusOffset: sel.getEndOffset(),
+    isBackward: false
+  });
+  const withSelection = _draftJs.EditorState.acceptSelection(editorState, collapsed);
+  const content = _draftJs.Modifier.insertText(withSelection.getCurrentContent(), withSelection.getSelection(), LINK_TRAILING_BUFFER, withSelection.getCurrentInlineStyle(), undefined);
+  return _draftJs.EditorState.push(withSelection, content, 'insert-characters');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kids-reporter/draft-editor",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "description": "",
   "main": "lib/index.js",
   "scripts": {