@atlaskit/editor-core 161.0.0 → 162.0.0

package/dist/es2019/plugins/clipboard/pm-plugins/main.js

@@ -3,17 +3,99 @@ import { TextSelection } from 'prosemirror-state';
 import { clipboardPluginKey } from '../plugin-key';
 import { getNodeSelectionAnalyticsPayload, getAllSelectionAnalyticsPayload, getRangeSelectionAnalyticsPayload, getCellSelectionAnalyticsPayload } from '../../selection/utils';
 import { EVENT_TYPE, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../../analytics/types/enums';
+import { DOMSerializer } from 'prosemirror-model';
+import { findParentNodeOfType } from 'prosemirror-utils';
+import { Fragment } from 'prosemirror-model';
 export const createPlugin = ({
-  dispatchAnalyticsEvent
-}) => new SafePlugin({
-  key: clipboardPluginKey,
-  props: {
-    handleDOMEvents: {
-      cut: view => sendClipboardAnalytics(view, dispatchAnalyticsEvent, ACTION.CUT),
-      copy: view => sendClipboardAnalytics(view, dispatchAnalyticsEvent, ACTION.COPIED)
+  dispatchAnalyticsEvent,
+  schema
+}) => {
+  let editorView;
+
+  const getEditorView = () => editorView;
+
+  return new SafePlugin({
+    key: clipboardPluginKey,
+    view: view => {
+      editorView = view;
+      return {
+        update: view => {
+          editorView = view;
+        }
+      };
+    },
+    props: {
+      handleDOMEvents: {
+        cut: view => sendClipboardAnalytics(view, dispatchAnalyticsEvent, ACTION.CUT),
+        copy: view => sendClipboardAnalytics(view, dispatchAnalyticsEvent, ACTION.COPIED)
+      },
+      clipboardSerializer: createClipboardSerializer(schema, getEditorView)
     }
-  }
-});
+  });
+};
+/**
+ * Overrides Prosemirror's default clipboardSerializer, in order to fix table row copy/paste bug raised in ED-13003.
+ * This allows us to store the original table’s attributes on the new table that the row is wrapped with when it is being copied.
+ * e.g. keeping the layout on a row that is copied.
+ * We store the default serializer in order to call it after we handle the table row case.
+ */
+
+export const createClipboardSerializer = (schema, getEditorView) => {
+  const oldSerializer = DOMSerializer.fromSchema(schema);
+  const newSerializer = new DOMSerializer(oldSerializer.nodes, oldSerializer.marks);
+  const originalSerializeFragment = newSerializer.serializeFragment.bind(newSerializer);
+
+  newSerializer.serializeFragment = (content, options = {}, target) => {
+    var _content$firstChild;
+
+    const editorView = getEditorView();
+    const selection = editorView.state.selection; // We do not need to handle when a user copies a tableRow + other content.
+    // In that scenario it already wraps the Row with correct Table and attributes.
+
+    if (!options.tableWrapperExists) {
+      let i = 0;
+
+      while (i < content.childCount) {
+        var _content$maybeChild;
+
+        if (((_content$maybeChild = content.maybeChild(i)) === null || _content$maybeChild === void 0 ? void 0 : _content$maybeChild.type.name) === 'table') {
+          options.tableWrapperExists = true;
+          break;
+        }
+
+        i++;
+      }
+    } // When the content being copied includes a tableRow that is not already wrapped with a table,
+    // We will wrap it with one ourselves, while preserving the parent table's attributes.
+
+
+    if (((_content$firstChild = content.firstChild) === null || _content$firstChild === void 0 ? void 0 : _content$firstChild.type.name) === 'tableRow' && !options.tableWrapperExists) {
+      // We only want 1 table wrapping the rows.
+      // tableWrapperExist is a custom prop added solely for the purposes of this recursive algorithm.
+      // The function is recursively called for each node in the tree captured in the fragment.
+      // For recursive logic see the bind call above and the prosemirror-model (https://github.com/ProseMirror/prosemirror-model/blob/master/src/to_dom.js#L44
+      // and https://github.com/ProseMirror/prosemirror-model/blob/master/src/to_dom.js#L87)
+      options.tableWrapperExists = true;
+      const parentTable = findParentNodeOfType(schema.nodes.table)(selection);
+      const attributes = parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs;
+      const newTable = schema.nodes.table;
+      const newTableNode = newTable.createChecked({ ...attributes
+      }, content);
+      const newContent = Fragment.from(newTableNode); // Pass updated content into original ProseMirror serializeFragment function.
+      // Currently incorrectly typed in @Types. See this GitHub thread: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57668
+      //@ts-ignore
+
+      return originalSerializeFragment(newContent, options, target);
+    } // If we're not copying any rows, just run default serializeFragment function.
+    // Currently incorrectly typed in @Types. See this GitHub thread: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/57668
+    //@ts-ignore
+
+
+    return originalSerializeFragment(content, options, target);
+  };
+
+  return newSerializer;
+};
 export const sendClipboardAnalytics = (view, dispatchAnalyticsEvent, action) => {
   const clipboardAnalyticsPayload = getAnalyticsPayload(view.state, action);
 

package/dist/es2019/plugins/code-block/styles.js

@@ -1,24 +1,24 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius, fontSize, gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { blockNodesVerticalMargin, akEditorTableCellMinWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorCodeFontFamily, akEditorSelectedNodeClassName, overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { codeBlockClassNames } from './ui/class-names';
-export const highlightingCodeBlockStyles = css`
+export const highlightingCodeBlockStyles = props => css`
   .ProseMirror .code-block {
     position: relative;
     background-image: ${overflowShadow({
   background: themed({
     light: colors.N20,
     dark: colors.DN50
-  }),
+  })(props),
   width: '8px'
 })};
     background-repeat: no-repeat;
     background-color: ${themed({
   light: colors.N20,
   dark: colors.DN50
-})};
+})(props)};
     --ds--code--bg-color: transparent;
     background-attachment: local, scroll, scroll;
     background-size: 8px 100%, 8px 100%, 8px 100%;
@@ -39,12 +39,12 @@ export const highlightingCodeBlockStyles = css`
       background-color: ${themed({
   light: colors.N30,
   dark: colors.DN20
-})};
+})(props)};
       padding: ${gridSize()}px;
       color: ${themed({
   light: colors.N90,
   dark: colors.DN90
-})};
+})(props)};
 
       span {
         display: block;
@@ -60,7 +60,7 @@ export const highlightingCodeBlockStyles = css`
           color: ${themed({
   light: colors.N400,
   dark: colors.DN400
-})};
+})(props)};
         }
       }
     }
@@ -114,7 +114,7 @@ export const highlightingCodeBlockStyles = css`
           caret-color: ${themed({
   light: colors.N800,
   dark: colors.DN500
-})};
+})(props)};
         }
       }
     }
@@ -154,14 +154,14 @@ export const highlightingCodeBlockStyles = css`
     }
   }
 `;
-export const codeBlockStyles = css`
+export const codeBlockStyles = props => css`
   .ProseMirror .code-block {
     position: relative;
     background-image: ${overflowShadow({
   background: themed({
     light: colors.N20,
     dark: colors.DN50
-  }),
+  })(props),
   width: '8px'
 })};
     --ds--code--bg-color: transparent;
@@ -169,7 +169,7 @@ export const codeBlockStyles = css`
     background-color: ${themed({
   light: colors.N20,
   dark: colors.DN50
-})};
+})(props)};
     background-attachment: local, scroll, scroll;
     background-size: 8px 100%, 8px 100%, 8px 100%;
     background-position: 100% 0, 100% 0, 0 0;
@@ -189,7 +189,7 @@ export const codeBlockStyles = css`
       background-color: ${themed({
   light: colors.N30,
   dark: colors.DN20
-})};
+})(props)};
       padding: ${gridSize()}px;
 
       span {
@@ -206,7 +206,7 @@ export const codeBlockStyles = css`
           color: ${themed({
   light: colors.N400,
   dark: colors.DN400
-})};
+})(props)};
         }
       }
     }
@@ -225,7 +225,7 @@ export const codeBlockStyles = css`
         color: ${themed({
   light: colors.N800,
   dark: colors.DN800
-})};
+})(props)};
         border-radius: ${borderRadius()}px;
         margin: ${gridSize()}px;
         white-space: pre;

package/dist/es2019/plugins/extension/plugin-factory.js

@@ -1,6 +1,7 @@
 import { pluginFactory } from '../../utils/plugin-state-factory';
 import reducer from './reducer';
 import { pluginKey } from './plugin-key';
+import { onSelectionChanged } from './utils';
 const factory = pluginFactory(pluginKey, reducer, {
   mapping(tr, state) {
     const {
@@ -21,8 +22,9 @@ const factory = pluginFactory(pluginKey, reducer, {
     return { ...state,
       positions
     };
-  }
+  },
 
+  onSelectionChanged: onSelectionChanged
 });
 export const createPluginState = factory.createPluginState;
 export const createCommand = factory.createCommand;

package/dist/es2019/plugins/extension/pm-plugins/main.js

@@ -97,6 +97,7 @@ export const createContextIdentifierProviderHandler = view => async (name, provi
 
 const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProviderAPI, eventDispatcher, useLongPressSelection = false, options = {}) => {
   const state = createPluginState(dispatch, {
+    shouldRefreshEditButton: false,
     showEditButton: false,
     showContextPanel: false
   });
@@ -121,27 +122,48 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
             element,
             localId,
             extensionProvider,
-            showContextPanel
-          } = getPluginState(state); // This fetches the selected extension node, either by keyboard selection or click for all types of extensions
+            showContextPanel,
+            shouldRefreshEditButton
+          } = getPluginState(state);
 
-          const selectedExtension = getSelectedExtension(state, true);
+          if (!shouldRefreshEditButton) {
+            return false;
+          } // This fetches the selected extension node, either by keyboard selection or click for all types of extensions
+
+
+          const selectedExtension = getSelectedExtension(state, true); // If our selection isn't on an extension node, clear some state and hide the config panel
 
           if (!selectedExtension) {
             if (showContextPanel) {
               clearEditingContext(state, dispatch);
             }
 
+            updateState({
+              shouldRefreshEditButton: false,
+              localId: undefined,
+              element: undefined,
+              showEditButton: false,
+              updateExtension: undefined
+            })(state, dispatch);
             return;
-          }
+          } // By this point we're certain we've selected an extension node.
+          // But we need to determine if the selection has changed to another
+          // extension node or remained on the same node.
+
 
           const {
             node
           } = selectedExtension;
           const newElement = getSelectedDomElement(state.schema, domAtPos, selectedExtension); // New node is selection
 
-          if (node.attrs.localId ? localId !== node.attrs.localId : // This is the current assumption and it's wrong but we are keeping it
+          const hasSelectedNodeChanged = node.attrs.localId ? localId !== node.attrs.localId : // This is the current assumption and it's wrong but we are keeping it
           // as fallback in case we need to turn off `allowLocalIdGeneration`
-          element !== newElement) {
+          element !== newElement;
+          const nextState = {
+            shouldRefreshEditButton: false
+          };
+
+          if (hasSelectedNodeChanged) {
             if (showContextPanel) {
               clearEditingContext(state, dispatch);
             }
@@ -154,20 +176,20 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
             const showEditButton = shouldShowEditButton(extensionHandler, extensionProvider);
             const updateExtension = getUpdateExtensionPromise(view, extensionHandler, extensionProvider).catch(() => {// do nothing;
             });
-            updateState({
+            Object.assign(nextState, {
               localId: node.attrs.localId,
-              showContextPanel: false,
               element: newElement,
               showEditButton,
               updateExtension
-            })(state, dispatch);
+            });
           } // New DOM element doesn't necessarily mean it's a new Node
           else if (element !== newElement) {
-            updateState({
+            Object.assign(nextState, {
               element: newElement
-            })(state, dispatch);
+            });
           }
 
+          updateState(nextState)(state, dispatch);
           return true;
         },
         destroy: () => {
@@ -183,7 +205,11 @@ const createPlugin = (dispatch, providerFactory, extensionHandlers, portalProvid
         bodiedExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions),
         inlineExtension: ExtensionNodeView(portalProviderAPI, eventDispatcher, providerFactory, extensionHandlers, extensionNodeViewOptions)
       },
-      handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension'], target => !target.closest('.extension-content'), {
+      handleClickOn: createSelectionClickHandler(['extension', 'bodiedExtension'], target => {
+        // Clicked on anything around the extension content
+        // or specifically on the content border of a bodied extension
+        return !target.closest('.extension-content') || target.classList.contains('extension-content');
+      }, {
         useLongPressSelection
       })
     }

package/dist/es2019/plugins/extension/utils.js

@@ -1,15 +1,25 @@
 import { findParentNodeOfType, findSelectedNodeOfType, findDomRefAtPos } from 'prosemirror-utils';
 import { closestElement } from '../../utils/dom';
 import { findNodePosByLocalIds } from '../../utils/nodes-by-localIds';
+
+const getSelectedExtensionByTransaction = (transaction, searchParent = true) => {
+  return _getSelectedExtension(transaction.doc.type.schema, transaction.selection, searchParent);
+};
+
 export const getSelectedExtension = (state, searchParent = false) => {
+  return _getSelectedExtension(state.schema, state.selection, searchParent);
+};
+
+const _getSelectedExtension = (schema, selection, searchParent) => {
   const {
     inlineExtension,
     extension,
     bodiedExtension
-  } = state.schema.nodes;
+  } = schema.nodes;
   const nodeTypes = [extension, bodiedExtension, inlineExtension];
-  return findSelectedNodeOfType(nodeTypes)(state.selection) || searchParent && findParentNodeOfType(nodeTypes)(state.selection) || undefined;
+  return findSelectedNodeOfType(nodeTypes)(selection) || searchParent && findParentNodeOfType(nodeTypes)(selection) || undefined;
 };
+
 export const findExtensionWithLocalId = (state, localId) => {
   const selectedExtension = getSelectedExtension(state, true);
 
@@ -62,4 +72,29 @@ export const getNodeTypesReferenced = (ids, state) => {
 export const findNodePosWithLocalId = (state, localId) => {
   const nodes = findNodePosByLocalIds(state, [localId]);
   return nodes.length >= 1 ? nodes[0] : undefined;
+};
+export const onSelectionChanged = (tr, state) => {
+  const selectedExtension = getSelectedExtensionByTransaction(tr, true);
+  const hasUnselectedExtension = !!state.element && !selectedExtension;
+  /*
+   * We use this to indicate to our plugin that the selection has changed.
+   *
+   * - ignore if shouldRefreshEditButton already set
+   * - restrict to scenarios when an extension is
+   * - a) actually selected
+   * - b) or un-selected (not accounting for selection extensionA -> extensionB)
+   *
+   * The rest of the logic will be handled in Extension main plugin view update().
+   *
+   * Known issue: typing inside of a bodiedExtension will trigger state changes each keystroke
+   * as the toolbar always being open while it is focused.
+   */
+
+  if (!state.shouldRefreshEditButton && (selectedExtension || hasUnselectedExtension)) {
+    return { ...state,
+      shouldRefreshEditButton: true
+    };
+  }
+
+  return state;
 };

package/dist/es2019/plugins/find-replace/ui/Find.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';

package/dist/es2019/plugins/find-replace/ui/FindReplace.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Find from './Find';
 import Replace from './Replace';
 import { ruleStyles, wrapperStyles } from './styles';

package/dist/es2019/plugins/find-replace/ui/Replace.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import { defineMessages, injectIntl } from 'react-intl-next';
 import Textfield from '@atlaskit/textfield';

package/dist/es2019/plugins/find-replace/ui/styles.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { N60, N30A } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 export const replaceSectionButtonStyles = css({
@@ -20,15 +20,20 @@ export const wrapperStyles = css({
     margin: '0px 4px'
   }
 });
-export const sectionWrapperStyles = css({
-  display: 'flex',
-  alignItems: 'column',
-  '> *': {
-    display: 'inline-flex',
-    height: '32px',
-    flex: '0 0 auto'
+export const sectionWrapperStyles = css`
+  display: flex;
+
+  & > * {
+    display: inline-flex;
+    height: 32px;
+    flex: 0 0 auto;
   }
-});
+
+  & > [data-ds--text-field--container] {
+    display: flex;
+    flex: 1 1 auto;
+  }
+`;
 export const countStyles = css({
   color: `${N60}`,
   fontSize: `${relativeFontSizeToBase16(12)}`,

package/dist/es2019/plugins/layout/styles.js

@@ -1,4 +1,4 @@
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A, N50A } from '@atlaskit/theme/colors';
 import { columnLayoutSharedStyle } from '@atlaskit/editor-common/styles';
@@ -36,6 +36,10 @@ export const layoutStyles = css`
             margin-top: 0;
           }
 
+          .rich-media-item {
+            margin-top: 0;
+          }
+
           > .mediaSingleView-content-wrap:first-child .rich-media-item {
             margin-top: 0;
           }

package/dist/es2019/plugins/list/actions/wrap-and-join-lists.js

@@ -0,0 +1,163 @@
+import { Fragment, Slice, NodeRange } from 'prosemirror-model';
+import { ReplaceAroundStep, findWrapping, canSplit, canJoin } from 'prosemirror-transform';
+/**
+ * Wraps the selection in a list with the given type. If this results in
+ * two adjacent lists of the same type, those will be joined together.
+ */
+
+export function wrapInListAndJoin(nodeType, tr) {
+  wrapInList(nodeType)(tr);
+  autoJoin(tr, (before, after) => before.type === after.type && before.type === nodeType);
+}
+/**
+ * Wraps the selection in a list with the given type and attributes.
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.js#L64-L89
+ */
+
+export function wrapInList(listType, attrs) {
+  return function (tr) {
+    const {
+      $from,
+      $to
+    } = tr.selection;
+    let range = $from.blockRange($to);
+    let doJoin = false;
+    let outerRange = range;
+
+    if (!range) {
+      return false;
+    } // This is at the top of an existing list item
+
+
+    if (range.depth >= 2 && // @ts-ignore - missing type for compatibleContent
+    $from.node(range.depth - 1).type.compatibleContent(listType) && range.startIndex === 0) {
+      // Don't do anything if this is the top of the list
+      if ($from.index(range.depth - 1) === 0) {
+        return false;
+      }
+
+      let $insert = tr.doc.resolve(range.start - 2);
+      outerRange = new NodeRange($insert, $insert, range.depth);
+
+      if (range.endIndex < range.parent.childCount) {
+        range = new NodeRange($from, tr.doc.resolve($to.end(range.depth)), range.depth);
+      }
+
+      doJoin = true;
+    }
+
+    let wrap = findWrapping(outerRange, listType, attrs, range);
+
+    if (!wrap) {
+      return false;
+    }
+
+    tr = doWrapInList(tr, range, wrap, doJoin, listType);
+    return true;
+  };
+}
+/**
+ * Internal function used by wrapInList
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-schema-list/blob/master/src/schema-list.js#L91-L112
+ */
+
+function doWrapInList(tr, range, wrappers, joinBefore, listType) {
+  let content = Fragment.empty;
+
+  for (let i = wrappers.length - 1; i >= 0; i--) {
+    content = Fragment.from(wrappers[i].type.create(wrappers[i].attrs, content));
+  }
+
+  tr.step(new ReplaceAroundStep(range.start - (joinBefore ? 2 : 0), range.end, range.start, range.end, new Slice(content, 0, 0), wrappers.length, true));
+  let found = 0;
+
+  for (let i = 0; i < wrappers.length; i++) {
+    if (wrappers[i].type === listType) {
+      found = i + 1;
+    }
+  }
+
+  const splitDepth = wrappers.length - found;
+  let splitPos = range.start + wrappers.length - (joinBefore ? 2 : 0);
+  const parent = range.parent;
+
+  for (let i = range.startIndex, e = range.endIndex, first = true; i < e; i++, first = false) {
+    if (!first && canSplit(tr.doc, splitPos, splitDepth)) {
+      tr.split(splitPos, splitDepth);
+      splitPos += 2 * splitDepth;
+    }
+
+    splitPos += parent.child(i).nodeSize;
+  }
+
+  return tr;
+}
+/**
+ * Checks whether two adjacent nodes can be joined. If so, the document
+ * will be updated to join those nodes. If not, the original transaction
+ * remains untouched.
+ *
+ * Nodes are considered joinable if the `isJoinable` predicate returns true.
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.js#L597-L610
+ */
+
+
+export function autoJoin(tr, isJoinable) {
+  if (!tr.isGeneric) {
+    return;
+  }
+
+  const ranges = [];
+
+  for (let i = 0; i < tr.mapping.maps.length; i++) {
+    const map = tr.mapping.maps[i];
+
+    for (let j = 0; j < ranges.length; j++) {
+      ranges[j] = map.map(ranges[j]);
+    }
+
+    map.forEach((_s, _e, from, to) => ranges.push(from, to));
+  } // Figure out which joinable points exist inside those ranges,
+  // by checking all node boundaries in their parent nodes.
+
+
+  const joinable = [];
+
+  for (let i = 0; i < ranges.length; i += 2) {
+    const from = ranges[i];
+    const to = ranges[i + 1];
+    const $from = tr.doc.resolve(from);
+    const depth = $from.sharedDepth(to);
+    const parent = $from.node(depth);
+
+    for (let index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
+      const after = parent.maybeChild(index);
+
+      if (!after) {
+        break;
+      }
+
+      if (index && joinable.indexOf(pos) === -1) {
+        const before = parent.child(index - 1);
+
+        if (before.type === after.type && isJoinable(before, after)) {
+          joinable.push(pos);
+        }
+      }
+
+      pos += after.nodeSize;
+    }
+  } // Join the joinable points
+
+
+  joinable.sort((a, b) => a - b);
+
+  for (let i = joinable.length - 1; i >= 0; i--) {
+    if (canJoin(tr.doc, joinable[i])) {
+      tr.join(joinable[i]);
+    }
+  }
+}