@mirrormedia/lilith-draft-editor 1.1.0-alpha.24 → 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/buttons/video.js

@@ -38,8 +38,9 @@ function VideoButton(props) {
       return;
     }
 
-    const contentState = editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity('VIDEO', 'IMMUTABLE', {
+    const contentState = editorState.getCurrentContent(); // since 202310, only VIDEO-V2 will be created
+
+    const contentStateWithEntity = contentState.createEntity('VIDEO-V2', 'IMMUTABLE', {
       video
     });
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();

package/lib/draft-js/draft-converter/atomic-block-processor.js

@@ -138,6 +138,7 @@ const processor = {
       case _entities.default.SLIDESHOW.type:
       case _entities.default['SLIDESHOW-V2'].type:
       case _entities.default.VIDEO.type:
+      case _entities.default['VIDEO-V2'].type:
       case _entities.default.YOUTUBE.type:
       case _entities.default.BACKGROUNDIMAGE.type:
       case _entities.default.BACKGROUNDVIDEO.type:

package/lib/draft-js/draft-converter/entities.js

@@ -33,6 +33,9 @@ const ENTITY = {
   VIDEO: {
     type: 'VIDEO'
   },
+  ['VIDEO-V2']: {
+    type: 'VIDEO-V2'
+  },
   IMAGE: {
     type: 'IMAGE'
   },

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/lib/website/mirrormedia/block-renderer-fn.js

@@ -32,6 +32,7 @@ const {
   DividerBlock,
   RelatedPostBlock,
   VideoBlock,
+  VideoBlockV2,
   AudioBlock,
   YoutubeBlock
 } = _mirrormedia.default.blockRenderers;
@@ -113,6 +114,11 @@ const AtomicBlock = props => {
         return VideoBlock(entity);
       }
 
+    case 'VIDEO-V2':
+      {
+        return VideoBlockV2(entity);
+      }
+
     case 'AUDIO':
       {
         return AudioBlock(entity);

package/lib/website/mirrormedia/selector/video-selector.js

@@ -34,7 +34,7 @@ const videosQuery = (0, _apollo.gql)`
     ) {
       id
       name
-      urlOriginal
+      videoSrc
       file {
         filename
         filesize
@@ -136,7 +136,7 @@ function VideoGrid(props) {
     muted: true,
     loop: true
   }, /*#__PURE__*/_react.default.createElement("source", {
-    src: video === null || video === void 0 ? void 0 : video.urlOriginal
+    src: video === null || video === void 0 ? void 0 : video.videoSrc
   }), /*#__PURE__*/_react.default.createElement("source", {
     src: video === null || video === void 0 ? void 0 : (_video$file = video.file) === null || _video$file === void 0 ? void 0 : _video$file.url
   })));
@@ -170,7 +170,7 @@ function VideoMetaGrid(props) {
     autoPlay: true,
     loop: true
   }, /*#__PURE__*/_react.default.createElement("source", {
-    src: video === null || video === void 0 ? void 0 : video.urlOriginal
+    src: video === null || video === void 0 ? void 0 : video.videoSrc
   }), /*#__PURE__*/_react.default.createElement("source", {
     src: video === null || video === void 0 ? void 0 : (_video$file2 = video.file) === null || _video$file2 === void 0 ? void 0 : _video$file2.url
   })), /*#__PURE__*/_react.default.createElement(VideoName, null, video === null || video === void 0 ? void 0 : video.name));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirrormedia/lilith-draft-editor",
-  "version": "1.1.0-alpha.24",
+  "version": "1.1.0-alpha.26",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -23,7 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "draft-js": "^0.11.7",
-    "@mirrormedia/lilith-draft-renderer": "1.3.0-alpha.5"
+    "@mirrormedia/lilith-draft-renderer": "1.3.0-alpha.7"
   },
   "peerDependencies": {
     "react": "18.2.0",