@atlaskit/editor-core 178.1.1 → 178.1.2

package/dist/es2019/plugins/media/utils/media-common.js

@@ -32,46 +32,37 @@ export const posOfPrecedingMediaGroup = state => {
   if (!atTheBeginningOfBlock(state)) {
     return;
   }
-
   return posOfMediaGroupAbove(state, state.selection.$from);
 };
-
 const posOfMediaGroupNextToGapCursor = state => {
   const {
     selection
   } = state;
-
   if (selection instanceof GapCursorSelection) {
     const $pos = state.selection.$from;
     const mediaGroupType = state.schema.nodes.mediaGroup;
     return posOfImmediatePrecedingMediaGroup($pos, mediaGroupType) || posOfImmediateFollowingMediaGroup($pos, mediaGroupType);
   }
 };
-
 const posOfImmediatePrecedingMediaGroup = ($pos, mediaGroupType) => {
   if ($pos.nodeBefore && $pos.nodeBefore.type === mediaGroupType) {
     return $pos.pos - $pos.nodeBefore.nodeSize + 1;
   }
 };
-
 const posOfImmediateFollowingMediaGroup = ($pos, mediaGroupType) => {
   if ($pos.nodeAfter && $pos.nodeAfter.type === mediaGroupType) {
     return $pos.pos + 1;
   }
 };
-
 const posOfFollowingMediaGroup = state => {
   if (!atTheEndOfBlock(state)) {
     return;
   }
-
   return posOfMediaGroupBelow(state, state.selection.$to);
 };
-
 const posOfMediaGroupAbove = (state, $pos) => {
   let adjacentPos;
   let adjacentNode;
-
   if (isSelectionNonMediaBlockNode(state)) {
     adjacentPos = $pos.pos;
     adjacentNode = $pos.nodeBefore;
@@ -79,19 +70,16 @@ const posOfMediaGroupAbove = (state, $pos) => {
     adjacentPos = startPositionOfParent($pos) - 1;
     adjacentNode = state.doc.resolve(adjacentPos).nodeBefore;
   }
-
   if (adjacentNode && adjacentNode.type === state.schema.nodes.mediaGroup) {
     return adjacentPos - adjacentNode.nodeSize + 1;
   }
-
   return;
 };
+
 /**
  * Determine whether the cursor is inside empty paragraph
  * or the selection is the entire paragraph
  */
-
-
 export const isInsidePotentialEmptyParagraph = state => {
   const {
     $from
@@ -101,7 +89,6 @@ export const isInsidePotentialEmptyParagraph = state => {
 export const posOfMediaGroupBelow = (state, $pos, prepend = true) => {
   let adjacentPos;
   let adjacentNode;
-
   if (isSelectionNonMediaBlockNode(state)) {
     adjacentPos = $pos.pos;
     adjacentNode = $pos.nodeAfter;
@@ -109,11 +96,9 @@ export const posOfMediaGroupBelow = (state, $pos, prepend = true) => {
     adjacentPos = endPositionOfParent($pos);
     adjacentNode = state.doc.nodeAt(adjacentPos);
   }
-
   if (adjacentNode && adjacentNode.type === state.schema.nodes.mediaGroup) {
     return prepend ? adjacentPos + 1 : adjacentPos + adjacentNode.nodeSize - 1;
   }
-
   return;
 };
 export const posOfParentMediaGroup = (state, $pos, prepend = false) => {
@@ -121,31 +106,26 @@ export const posOfParentMediaGroup = (state, $pos, prepend = false) => {
     $from
   } = state.selection;
   $pos = $pos || $from;
-
   if ($pos.parent.type === state.schema.nodes.mediaGroup) {
     return prepend ? startPositionOfParent($pos) : endPositionOfParent($pos) - 1;
   }
-
   return;
 };
+
 /**
  * The function will return the position after current selection where mediaGroup can be inserted.
  */
-
 export function endPositionForMedia(state, resolvedPos) {
   const {
     mediaGroup
   } = state.schema.nodes;
   let i = resolvedPos.depth;
-
   for (; i > 1; i--) {
     const nodeType = resolvedPos.node(i).type;
-
     if (nodeType.validContent(Fragment.from(mediaGroup.create()))) {
       break;
     }
   }
-
   return resolvedPos.end(i) + 1;
 }
 export const removeMediaNode = (view, node, getPos) => {
@@ -162,58 +142,50 @@ export const removeMediaNode = (view, node, getPos) => {
   } = state;
   const currentMediaNodePos = getPos();
   tr.deleteRange(currentMediaNodePos, currentMediaNodePos + node.nodeSize);
-
   if (isTemporary(id)) {
     tr.setMeta('addToHistory', false);
   }
-
   const $currentMediaNodePos = doc.resolve(currentMediaNodePos);
   const {
     nodeBefore,
     parent
   } = $currentMediaNodePos;
-  const isLastMediaNode = $currentMediaNodePos.index() === parent.childCount - 1; // If deleting a selected media node, we need to tell where the cursor to go next.
+  const isLastMediaNode = $currentMediaNodePos.index() === parent.childCount - 1;
+
+  // If deleting a selected media node, we need to tell where the cursor to go next.
   // Prosemirror didn't gave us the behaviour of moving left if the media node is not the last one.
   // So we handle it ourselves.
-
   if (selection.from === currentMediaNodePos && !isLastMediaNode && !atTheBeginningOfDoc(state) && nodeBefore && nodeBefore.type.name === 'media') {
     const nodeBefore = findPositionOfNodeBefore(tr.selection);
-
     if (nodeBefore) {
       tr.setSelection(NodeSelection.create(tr.doc, nodeBefore));
     }
   }
-
   view.dispatch(tr);
 };
 export const splitMediaGroup = view => {
   const {
     selection
-  } = view.state; // if selection is not a media node, do nothing.
+  } = view.state;
 
+  // if selection is not a media node, do nothing.
   if (!(selection instanceof NodeSelection) || selection.node.type !== view.state.schema.nodes.media) {
     return false;
   }
-
   deleteSelection(view.state, view.dispatch);
-
   if (selection.$to.nodeAfter) {
     splitBlock(view.state, view.dispatch);
     createParagraphNear(false)(view.state, view.dispatch);
   } else {
     createNewParagraphBelow(view.state, view.dispatch);
   }
-
   return true;
 };
-
 const isOptionalAttr = attr => attr.length > 1 && attr[0] === '_' && attr[1] === '_';
-
 export const copyOptionalAttrsFromMediaState = (mediaState, node) => {
   Object.keys(node.attrs).filter(isOptionalAttr).forEach(key => {
     const mediaStateKey = key.substring(2);
     const attrValue = mediaState[mediaStateKey];
-
     if (attrValue !== undefined) {
       node.attrs[key] = attrValue;
     }
@@ -233,114 +205,103 @@ export const transformSliceToCorrectMediaWrapper = (slice, schema) => {
         return mediaGroup.createChecked({}, [node]);
       }
     }
-
     return node;
   });
 };
+
 /**
  * Check base styles to see if an element will be invisible when rendered in a document.
  * @param element
  */
-
 const isElementInvisible = element => {
   return element.style.opacity === '0' || element.style.display === 'none' || element.style.visibility === 'hidden';
 };
-
 const VALID_TAGS_CONTAINER = ['DIV', 'TD'];
-
 function canContainImage(element) {
   if (!element) {
     return false;
   }
-
   return VALID_TAGS_CONTAINER.indexOf(element.tagName) !== -1;
 }
+
 /**
  * Given a html string, we attempt to hoist any nested `<img>` tags,
  * not directly wrapped by a `<div>` as ProseMirror no-op's
  * on those scenarios.
  * @param html
  */
-
-
 export const unwrapNestedMediaElements = html => {
   const parser = new DOMParser();
   let doc = parser.parseFromString(html, 'text/html');
-  const wrapper = doc.body; // Remove Google Doc's wrapper <b> el
+  const wrapper = doc.body;
 
+  // Remove Google Doc's wrapper <b> el
   const docsWrapper = wrapper.querySelector('b[id^="docs-internal-guid-"]');
-
   if (docsWrapper) {
     unwrap(wrapper, docsWrapper);
   }
-
   const imageTags = wrapper.querySelectorAll('img');
-
   if (!imageTags.length) {
     return html;
   }
-
   imageTags.forEach(imageTag => {
     // Capture the immediate parent, we may remove the media from here later.
     const mediaParent = imageTag.parentElement;
-
     if (!mediaParent) {
       return;
-    } // If either the parent or the image itself contains styles that would make
-    // them invisible on copy, dont paste them.
-
+    }
 
+    // If either the parent or the image itself contains styles that would make
+    // them invisible on copy, dont paste them.
     if (isElementInvisible(mediaParent) || isElementInvisible(imageTag)) {
       mediaParent.removeChild(imageTag);
       return;
-    } // If its wrapped by a valid container we assume its safe to bypass.
-    // ProseMirror should handle these cases properly.
-
+    }
 
+    // If its wrapped by a valid container we assume its safe to bypass.
+    // ProseMirror should handle these cases properly.
     if (canContainImage(mediaParent) || mediaParent instanceof HTMLSpanElement && mediaParent.closest('[class*="emoji-common"]')) {
       return;
-    } // Find the top most element that the parent has a valid container for the image.
-    // Stop just before found the wrapper
-
+    }
 
+    // Find the top most element that the parent has a valid container for the image.
+    // Stop just before found the wrapper
     const insertBeforeElement = walkUpTreeUntil(mediaParent, element => {
       // If is at the top just use this element as reference
       if (element.parentElement === wrapper) {
         return true;
       }
-
       return canContainImage(element.parentElement);
-    }); // Here we try to insert the media right after its top most valid parent element
-    // Unless its the last element in our structure then we will insert above it.
+    });
 
+    // Here we try to insert the media right after its top most valid parent element
+    // Unless its the last element in our structure then we will insert above it.
     if (insertBeforeElement && insertBeforeElement.parentElement) {
       // Insert as close as possible to the most closest valid element index in the tree.
-      insertBeforeElement.parentElement.insertBefore(imageTag, insertBeforeElement.nextElementSibling || insertBeforeElement); // Attempt to clean up lines left behind by the image
-
-      mediaParent.innerText = mediaParent.innerText.trim(); // Walk up and delete empty elements left over after removing the image tag
+      insertBeforeElement.parentElement.insertBefore(imageTag, insertBeforeElement.nextElementSibling || insertBeforeElement);
 
+      // Attempt to clean up lines left behind by the image
+      mediaParent.innerText = mediaParent.innerText.trim();
+      // Walk up and delete empty elements left over after removing the image tag
       removeNestedEmptyEls(mediaParent);
     }
-  }); // If last child is a hardbreak we don't want it
+  });
 
+  // If last child is a hardbreak we don't want it
   if (wrapper.lastElementChild && wrapper.lastElementChild.tagName === 'BR') {
     wrapper.removeChild(wrapper.lastElementChild);
   }
-
   return wrapper.innerHTML;
 };
 export const getMediaNodeFromSelection = state => {
   if (!isSelectionMediaSingleNode(state)) {
     return null;
   }
-
   const tr = state.tr;
   const pos = tr.selection.from + 1;
   const mediaNode = tr.doc.nodeAt(pos);
-
   if (mediaNode && mediaNode.type === state.schema.nodes.media) {
     return mediaNode;
   }
-
   return null;
 };

package/dist/es2019/plugins/media/utils/media-files.js

@@ -9,16 +9,13 @@ export const canInsertMediaInline = state => {
   const node = state.schema.nodes.mediaInline.create({});
   return canInsert(state.selection.$to, Fragment.from(node));
 };
-
 const getInsertMediaGroupAnalytics = (mediaState, inputMethod) => {
   let media = '';
-
   if (mediaState.length === 1) {
     media = mediaState[0].fileMimeType || 'unknown';
   } else if (mediaState.length > 1) {
     media = 'multiple';
   }
-
   return {
     action: ACTION.INSERTED,
     actionSubject: ACTION_SUBJECT.DOCUMENT,
@@ -31,7 +28,6 @@ const getInsertMediaGroupAnalytics = (mediaState, inputMethod) => {
     eventType: EVENT_TYPE.TRACK
   };
 };
-
 const getInsertMediaInlineAnalytics = (mediaState, inputMethod) => {
   const media = mediaState.fileMimeType || 'unknown';
   return {
@@ -46,12 +42,11 @@ const getInsertMediaInlineAnalytics = (mediaState, inputMethod) => {
     eventType: EVENT_TYPE.TRACK
   };
 };
+
 /**
  * Check if current editor selections is a media group or not.
  * @param state Editor state
  */
-
-
 function isSelectionMediaGroup(state) {
   const {
     schema
@@ -59,14 +54,13 @@ function isSelectionMediaGroup(state) {
   const selectionParent = state.selection.$anchor.node();
   return selectionParent && selectionParent.type === schema.nodes.mediaGroup;
 }
+
 /**
  * Insert a paragraph after if reach the end of doc
  * and there is no media group in the front or selection is a non media block node
  * @param node Node at insertion point
  * @param state Editor state
  */
-
-
 function shouldAppendParagraph(state, node) {
   const {
     schema: {
@@ -78,14 +72,13 @@ function shouldAppendParagraph(state, node) {
   const wasMediaNode = node && node.type === media;
   return (insideTableCell(state) || isInListItem(state) || isInLayoutColumn(state) || atTheEndOfDoc(state) && (!posOfPrecedingMediaGroup(state) || isSelectionNonMediaBlockNode(state))) && !wasMediaNode;
 }
+
 /**
  * Create a new media inline to insert the new media.
  * @param view Editor view
  * @param mediaState Media file to be added to the editor
  * @param collection Collection for the media to be added
  */
-
-
 export const insertMediaInlineNode = (view, mediaState, collection, inputMethod) => {
   const {
     state,
@@ -97,12 +90,12 @@ export const insertMediaInlineNode = (view, mediaState, collection, inputMethod)
   } = state;
   const {
     mediaInline
-  } = schema.nodes; // Do nothing if no media found
+  } = schema.nodes;
 
+  // Do nothing if no media found
   if (!mediaInline || !mediaState || collection === undefined) {
     return false;
   }
-
   const {
     id
   } = mediaState;
@@ -111,26 +104,26 @@ export const insertMediaInlineNode = (view, mediaState, collection, inputMethod)
     collection
   });
   const space = state.schema.text(' ');
-  let pos = state.selection.$to.pos; // If the selection is inside an empty list item set pos inside paragraph
+  let pos = state.selection.$to.pos;
 
+  // If the selection is inside an empty list item set pos inside paragraph
   if (isInListItem(state) && isInsidePotentialEmptyParagraph(state)) {
     pos = pos + 1;
   }
+  let content = Fragment.from([mediaInlineNode, space]);
 
-  let content = Fragment.from([mediaInlineNode, space]); // Delete the selection if a selection is made
-
+  // Delete the selection if a selection is made
   const deleteRange = findDeleteRange(state);
-
   if (!deleteRange) {
     tr.insert(pos, content);
   } else {
     tr.insert(pos, content).deleteRange(deleteRange.start, deleteRange.end);
   }
-
   addAnalytics(state, tr, getInsertMediaInlineAnalytics(mediaState, inputMethod));
   dispatch(tr);
   return true;
 };
+
 /**
  * Insert a media into an existing media group
  * or create a new media group to insert the new media.
@@ -138,7 +131,6 @@ export const insertMediaInlineNode = (view, mediaState, collection, inputMethod)
  * @param mediaStates Media files to be added to the editor
  * @param collection Collection for the media to be added
  */
-
 export const insertMediaGroupNode = (view, mediaStates, collection, inputMethod) => {
   const {
     state,
@@ -151,12 +143,12 @@ export const insertMediaGroupNode = (view, mediaStates, collection, inputMethod)
   const {
     media,
     paragraph
-  } = schema.nodes; // Do nothing if no media found
+  } = schema.nodes;
 
+  // Do nothing if no media found
   if (!media || !mediaStates.length) {
     return;
   }
-
   const mediaNodes = createMediaFileNodes(mediaStates, collection, media);
   const mediaInsertPos = findMediaInsertPos(state);
   const resolvedInsertPos = tr.doc.resolve(mediaInsertPos);
@@ -166,12 +158,10 @@ export const insertMediaGroupNode = (view, mediaStates, collection, inputMethod)
   const withParagraph = shouldAppendParagraph(state, nodeAtInsertionPoint);
   let content = parent.type === schema.nodes.mediaGroup ? mediaNodes // If parent is a mediaGroup do not wrap items again.
   : [schema.nodes.mediaGroup.createChecked({}, mediaNodes)];
-
   if (shouldSplit) {
-    content = withParagraph ? content.concat(paragraph.create()) : content; // delete the selection or empty paragraph
-
+    content = withParagraph ? content.concat(paragraph.create()) : content;
+    // delete the selection or empty paragraph
     const deleteRange = findDeleteRange(state);
-
     if (!deleteRange) {
       tr.insert(mediaInsertPos, content);
     } else if (mediaInsertPos <= deleteRange.start) {
@@ -179,22 +169,19 @@ export const insertMediaGroupNode = (view, mediaStates, collection, inputMethod)
     } else {
       tr.insert(mediaInsertPos, content).deleteRange(deleteRange.start, deleteRange.end);
     }
-
     addAnalytics(state, tr, getInsertMediaGroupAnalytics(mediaStates, inputMethod));
     dispatch(tr);
     setSelectionAfterMediaInsertion(view);
     return;
-  } // Don't append new paragraph when adding media to a existing mediaGroup
-
+  }
 
+  // Don't append new paragraph when adding media to a existing mediaGroup
   if (withParagraph && parent.type !== schema.nodes.mediaGroup) {
     content.push(paragraph.create());
   }
-
   addAnalytics(state, tr, getInsertMediaGroupAnalytics(mediaStates, inputMethod));
   dispatch(safeInsert(Fragment.fromArray(content), mediaInsertPos)(tr));
 };
-
 const createMediaFileNodes = (mediaStates, collection, media) => {
   const nodes = mediaStates.map(mediaState => {
     const {
@@ -210,12 +197,11 @@ const createMediaFileNodes = (mediaStates, collection, media) => {
   });
   return nodes;
 };
+
 /**
  * Find root list node if exist from current selection
  * @param state Editor state
  */
-
-
 const findRootListNode = state => {
   const {
     schema: {
@@ -227,13 +213,12 @@ const findRootListNode = state => {
   } = state;
   return findFarthestParentNode(node => node.type === bulletList || node.type === orderedList)(state.selection.$from);
 };
+
 /**
  * Return position of media to be inserted, if it is inside a list
  * @param content Content to be inserted
  * @param state Editor State
  */
-
-
 export const getPosInList = state => {
   const {
     schema: {
@@ -242,27 +227,25 @@ export const getPosInList = state => {
         listItem
       }
     }
-  } = state; // 1. Check if I am inside a list.
+  } = state;
 
+  // 1. Check if I am inside a list.
   if (hasParentNode(node => node.type === listItem)(state.selection)) {
     // 2. Get end position of root list
     const rootListNode = findRootListNode(state);
-
     if (rootListNode) {
-      const pos = rootListNode.pos + rootListNode.node.nodeSize; // 3. Fint the first location inside the media group
-
+      const pos = rootListNode.pos + rootListNode.node.nodeSize;
+      // 3. Fint the first location inside the media group
       const nextNode = state.doc.nodeAt(pos);
-
       if (nextNode && nextNode.type === mediaGroup) {
         return pos + 1;
       }
-
       return pos;
     }
   }
-
   return;
 };
+
 /**
  * Find insertion point,
  * If it is in a List it will return position to the next block,
@@ -271,65 +254,52 @@ export const getPosInList = state => {
  * @param content Content to be inserted
  * @param state Editor state
  */
-
 const findMediaInsertPos = state => {
   const {
     $from,
     $to
-  } = state.selection; // Check if selection is inside a list.
+  } = state.selection;
 
+  // Check if selection is inside a list.
   const posInList = getPosInList(state);
-
   if (posInList) {
     // If I have a position in lists, I should return, otherwise I am not inside a list
     return posInList;
   }
-
   const nearbyMediaGroupPos = posOfMediaGroupNearby(state);
-
   if (nearbyMediaGroupPos && (!isSelectionNonMediaBlockNode(state) || $from.pos < nearbyMediaGroupPos && $to.pos < nearbyMediaGroupPos)) {
     return nearbyMediaGroupPos;
   }
-
   if (isSelectionNonMediaBlockNode(state)) {
     return $to.pos;
   }
-
   if (atTheEndOfBlock(state)) {
     return $to.pos + 1;
   }
-
   if (atTheBeginningOfBlock(state)) {
     return $from.pos - 1;
   }
-
   return $to.pos;
 };
-
 const findDeleteRange = state => {
   const {
     $from,
     $to
   } = state.selection;
-
   if (posOfParentMediaGroup(state)) {
     return;
   }
-
   if (!isInsidePotentialEmptyParagraph(state) || posOfMediaGroupNearby(state)) {
     return range($from.pos, $to.pos);
   }
-
   return range(startPositionOfParent($from) - 1, endPositionOfParent($to));
 };
-
 const range = (start, end = start) => {
   return {
     start,
     end
   };
 };
-
 const setSelectionAfterMediaInsertion = view => {
   const {
     state
@@ -338,14 +308,11 @@ const setSelectionAfterMediaInsertion = view => {
     doc
   } = state;
   const mediaPos = posOfMediaGroupNearby(state);
-
   if (!mediaPos) {
     return;
   }
-
   const $mediaPos = doc.resolve(mediaPos);
   const endOfMediaGroup = endPositionOfParent($mediaPos);
-
   if (endOfMediaGroup + 1 >= doc.nodeSize - 1) {
     // if nothing after the media group, fallback to select the newest uploaded media item
     setNodeSelection(view, mediaPos);