@mirrormedia/lilith-draft-editor 1.1.0-alpha.25 → 1.1.0-alpha.26

package/lib/draft-js/buttons/link.js

@@ -7,32 +7,40 @@ exports.LinkButton = LinkButton;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
 var _modals = require("@keystone-ui/modals");
 
 var _draftJs = require("draft-js");
 
 var _fields = require("@keystone-ui/fields");
 
+var _util = require("../util");
+
+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 styles = {
-  urlInput: {
-    fontFamily: "'Georgia', serif",
-    marginRight: 10,
-    padding: 10
-  }
-};
+const StyledTextInput = (0, _styledComponents.default)(_fields.TextInput)`
+  fontfamily: Georgia, serif;
+  marginright: 10;
+  padding: 10;
+`;
 
 function LinkButton(props) {
   const {
-    isActive,
     editorState,
     onChange
   } = props;
+  const entityData = (0, _util.getSelectionEntityData)(editorState);
+  const url = (entityData === null || entityData === void 0 ? void 0 : entityData.url) || '';
+  (0, _react.useEffect)(() => {
+    setLinkUrl(url);
+  }, [url]);
   const [toShowUrlInput, setToShowUrlInput] = (0, _react.useState)(false);
-  const [urlValue, setUrlValue] = (0, _react.useState)('');
+  const [linkUrl, setLinkUrl] = (0, _react.useState)(url || '');
 
   const promptForLink = e => {
     e.preventDefault();
@@ -46,7 +54,7 @@ function LinkButton(props) {
   const confirmLink = () => {
     const contentState = editorState.getCurrentContent();
     const contentStateWithEntity = contentState.createEntity('LINK', 'MUTABLE', {
-      url: urlValue
+      url: linkUrl
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
 
@@ -54,9 +62,11 @@ function LinkButton(props) {
       currentContent: contentStateWithEntity
     });
 
-    onChange(_draftJs.RichUtils.toggleLink(newEditorState, newEditorState.getSelection(), entityKey));
+    const selection = newEditorState.getSelection(); // RichUtils.toggleLink will reset selection back to first block and cause
+    // the editor scroll to top. Use `forceSelection` to hold the selection.
+
+    onChange(_draftJs.EditorState.forceSelection(_draftJs.RichUtils.toggleLink(newEditorState, selection, entityKey), selection));
     setToShowUrlInput(false);
-    setUrlValue('');
   };
 
   const onLinkInputKeyDown = e => {
@@ -70,16 +80,28 @@ function LinkButton(props) {
     const selection = editorState.getSelection();
 
     if (!selection.isCollapsed()) {
-      onChange(_draftJs.RichUtils.toggleLink(editorState, selection, null));
+      // RichUtils.toggleLink will reset selection back to first block and cause
+      // the editor scroll to top. Use `forceSelection` to hold the selection.
+      onChange(_draftJs.EditorState.forceSelection(_draftJs.RichUtils.toggleLink(editorState, selection, null), selection));
     }
 
     setToShowUrlInput(false);
-    setUrlValue('');
   };
 
-  const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
-    title: "Insert LINK",
-    isOpen: toShowUrlInput,
+  const alertProps = linkUrl ? {
+    title: 'Update Link',
+    actions: {
+      cancel: {
+        label: 'Remove',
+        action: removeLink
+      },
+      confirm: {
+        label: 'Update',
+        action: confirmLink
+      }
+    }
+  } : {
+    title: 'Insert Link',
     actions: {
       cancel: {
         label: 'Cancel',
@@ -90,17 +112,22 @@ function LinkButton(props) {
         action: confirmLink
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_fields.TextInput, {
-    onChange: e => setUrlValue(e.target.value),
-    style: styles.urlInput,
+  };
+
+  const urlInput = /*#__PURE__*/_react.default.createElement(_modals.AlertDialog, {
+    title: alertProps.title,
+    isOpen: toShowUrlInput,
+    actions: alertProps.actions
+  }, /*#__PURE__*/_react.default.createElement(StyledTextInput, {
+    onChange: e => setLinkUrl(e.target.value),
+    value: linkUrl,
     type: "text",
-    value: urlValue,
     onKeyDown: onLinkInputKeyDown
   }));
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, urlInput, /*#__PURE__*/_react.default.createElement("div", {
     className: props.className,
-    onMouseDown: isActive ? removeLink : promptForLink
+    onMouseDown: promptForLink
   }, /*#__PURE__*/_react.default.createElement("i", {
     className: "fas fa-link"
   })));

package/lib/draft-js/util.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSelectionEntityData = void 0;
+
+const getSelectionEntityData = editorState => {
+  const selection = editorState.getSelection();
+  const startOffset = selection.getStartOffset();
+  const startBlock = editorState.getCurrentContent().getBlockForKey(selection.getStartKey());
+  let data;
+  let entityInstance;
+  let entityKey;
+
+  if (!selection.isCollapsed()) {
+    entityKey = startBlock.getEntityAt(startOffset);
+  } else {
+    entityKey = startBlock.getEntityAt(0);
+  }
+
+  const contentState = editorState.getCurrentContent();
+
+  if (entityKey !== null) {
+    entityInstance = contentState.getEntity(entityKey);
+    data = entityInstance.getData();
+  }
+
+  return data;
+};
+
+exports.getSelectionEntityData = getSelectionEntityData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirrormedia/lilith-draft-editor",
-  "version": "1.1.0-alpha.25",
+  "version": "1.1.0-alpha.26",
   "description": "",
   "main": "lib/index.js",
   "scripts": {