@atlaskit/editor-core 173.0.1 → 175.0.0

package/dist/es2019/plugins/block-type/commands/block-type.js

@@ -1,4 +1,3 @@
-import { Selection } from 'prosemirror-state';
 import { findWrapping } from 'prosemirror-transform';
 import { safeInsert } from 'prosemirror-utils';
 import { CODE_BLOCK, BLOCK_QUOTE, PANEL, HEADINGS_BY_NAME, NORMAL_TEXT } from '../types';
@@ -8,6 +7,7 @@ import { withAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE }
 import { filterChildrenBetween } from '../../../utils';
 import { PanelType } from '@atlaskit/adf-schema';
 import { CellSelection } from '@atlaskit/editor-tables';
+import { transformToCodeBlockAction } from './transform-to-code-block';
 export function setBlockType(name) {
   return (state, dispatch) => {
     const {
@@ -223,7 +223,7 @@ export const insertBlockTypesWithAnalytics = (name, inputMethod) => {
 };
 /**
  * Function will add wrapping node.
- * 1. If currently selected blocks can be wrapped in the warpper type it will wrap them.
+ * 1. If currently selected blocks can be wrapped in the wrapper type it will wrap them.
  * 2. If current block can not be wrapped inside wrapping block it will create a new block below selection,
  *  and set selection on it.
  */
@@ -271,25 +271,31 @@ function insertCodeBlock() {
   return function (state, dispatch) {
     var _state$selection$$fro;
 
-    const {
+    let {
       tr
     } = state;
     const {
-      $to,
-      $from
+      from
     } = state.selection;
     const {
       codeBlock
     } = state.schema.nodes;
-    const grandParentType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
-    const parentType = state.selection.$from.parent.type;
-    /** We always want to append a block type unless we're inserting into a paragraph
-     * AND it's a valid child of the grandparent node
+    const grandParentNodeType = (_state$selection$$fro = state.selection.$from.node(-1)) === null || _state$selection$$fro === void 0 ? void 0 : _state$selection$$fro.type;
+    const parentNodeType = state.selection.$from.parent.type;
+    /** We always want to append a codeBlock unless we're inserting into a paragraph
+     * AND it's a valid child of the grandparent node.
+     * Insert the current selection as codeBlock content unless it contains nodes other
+     * than paragraphs and inline.
      */
 
-    if (shouldSplitSelectedNodeOnNodeInsertion(parentType, grandParentType, codeBlock.createAndFill())) {
-      tr.replaceRangeWith($from.pos, $to.pos, codeBlock.createAndFill());
-      tr.setSelection(Selection.near(tr.doc.resolve(state.selection.to)));
+    const canInsertCodeBlock = shouldSplitSelectedNodeOnNodeInsertion({
+      parentNodeType,
+      grandParentNodeType,
+      content: codeBlock.createAndFill()
+    }) && contentAllowedInCodeBlock(state);
+
+    if (canInsertCodeBlock) {
+      tr = transformToCodeBlockAction(state, from);
     } else {
       safeInsert(codeBlock.createAndFill())(tr).scrollIntoView();
     }
@@ -301,6 +307,28 @@ function insertCodeBlock() {
     return true;
   };
 }
+/**
+ * Check if the current selection contains any nodes that are not permitted
+ * as codeBlock child nodes. Note that this allows paragraphs and inline nodes
+ * as we extract their text content.
+ */
+
+
+function contentAllowedInCodeBlock(state) {
+  const {
+    $from,
+    $to
+  } = state.selection;
+  let isAllowedChild = true;
+  state.doc.nodesBetween($from.pos, $to.pos, node => {
+    if (!isAllowedChild) {
+      return false;
+    }
+
+    return isAllowedChild = node.type === state.schema.nodes.listItem || node.type === state.schema.nodes.bulletList || node.type === state.schema.nodes.orderedList || node.type === state.schema.nodes.paragraph || node.isInline || node.isText;
+  });
+  return isAllowedChild;
+}
 
 export const cleanUpAtTheStartOfDocument = (state, dispatch) => {
   const {

package/dist/es2019/plugins/block-type/commands/transform-to-code-block.js

@@ -1,34 +1,59 @@
 import { TextSelection } from 'prosemirror-state';
 import { mapSlice } from '../../../utils/slice';
-export function transformToCodeBlockAction(state, start, end, attrs) {
-  if (!state.selection.empty) {
-    // Don't do anything, if there is something selected
-    return state.tr;
-  }
-
+import { Fragment } from 'prosemirror-model';
+import { timestampToString } from '@atlaskit/editor-common/utils';
+export function transformToCodeBlockAction(state, start, attrs) {
   const startOfCodeBlockText = state.selection.$from;
-  const endLinePosition = startOfCodeBlockText.end();
-  const startLinePosition = startOfCodeBlockText.start();
-  const parentStartPosition = startOfCodeBlockText.before();
-  const codeBlockSlice = mapSlice(state.doc.slice(startOfCodeBlockText.pos, endLinePosition), node => {
+  const endPosition = state.selection.empty ? startOfCodeBlockText.end() : state.selection.$to.pos;
+  const startLinePosition = startOfCodeBlockText.start(); //when cmd+A is used to select the content. start position should be 0.
+
+  const parentStartPosition = startOfCodeBlockText.depth === 0 ? 0 : startOfCodeBlockText.before();
+  const contentSlice = state.doc.slice(startOfCodeBlockText.pos, endPosition);
+  const codeBlockSlice = mapSlice(contentSlice, (node, parent, index) => {
     if (node.type === state.schema.nodes.hardBreak) {
       return state.schema.text('\n');
     }
 
     if (node.isText) {
       return node.mark([]);
-    } else if (node.isInline) {
+    }
+
+    if (node.isInline) {
+      // Convert dates
+      if (node.attrs.timestamp) {
+        return state.schema.text(timestampToString(node.attrs.timestamp, null));
+      } // Convert links
+
+
+      if (node.attrs.url) {
+        return state.schema.text(node.attrs.url);
+      }
+
       return node.attrs.text ? state.schema.text(node.attrs.text) : null;
-    } else {
-      return node.content.childCount ? node.content : null;
+    } // if the current node is the last child of the Slice exit early to prevent
+    // adding additional line breaks
+
+
+    if (contentSlice.content.childCount - 1 === index) {
+      return node.content;
+    } //useful to decide whether to append line breaks when the content has list items.
+
+
+    const isParentLastChild = parent && contentSlice.content.childCount - 1 === index; // add line breaks at the end of each paragraph to mimic layout of selected content
+    // do not add line breaks when the 'paragraph' parent is last child.
+
+    if (node.content.childCount && node.type === state.schema.nodes.paragraph && !isParentLastChild) {
+      return node.content.append(Fragment.from(state.schema.text('\n\n')));
     }
+
+    return node.content.childCount ? node.content : null;
   });
   const tr = state.tr; // Replace current block node
 
   const startMapped = startLinePosition === start ? parentStartPosition : start;
   const codeBlock = state.schema.nodes.codeBlock;
   const codeBlockNode = codeBlock.createChecked(attrs, codeBlockSlice.content);
-  tr.replaceWith(startMapped, Math.min(endLinePosition, tr.doc.content.size), codeBlockNode); // Reposition cursor when inserting into layouts or table headers
+  tr.replaceWith(startMapped, Math.min(endPosition, tr.doc.content.size), codeBlockNode); // Reposition cursor when inserting into layouts or table headers
 
   const mapped = tr.doc.resolve(tr.mapping.map(startMapped) + 1);
   const selection = TextSelection.findFrom(mapped, 1, true);

package/dist/es2019/plugins/block-type/pm-plugins/input-rule.js

@@ -101,7 +101,14 @@ function getCodeBlockRules(schema) {
     },
     eventType: EVENT_TYPE.TRACK
   });
+
+  const validMatchLength = match => match.length > 0 && match[0].length === 3;
+
   const threeTildeRule = createRule(/(?!\s)(`{3,})$/, (state, match, start, end) => {
+    if (!validMatchLength(match)) {
+      return null;
+    }
+
     const attributes = {};
 
     if (match[4]) {
@@ -109,7 +116,7 @@ function getCodeBlockRules(schema) {
     }
 
     if (isConvertableToCodeBlock(state)) {
-      return transformToCodeBlockAction(state, start, end, attributes);
+      return transformToCodeBlockAction(state, start, attributes);
     }
 
     const tr = state.tr;
@@ -119,6 +126,10 @@ function getCodeBlockRules(schema) {
     return tr;
   });
   const leftNodeReplacementThreeTildeRule = createRule(new RegExp(`((${leafNodeReplacementCharacter}\`{3,})|^\\s(\`{3,}))(\\S*)$`), (state, match, start, end) => {
+    if (!validMatchLength(match)) {
+      return null;
+    }
+
     const attributes = {};
 
     if (match[4]) {
@@ -148,8 +159,7 @@ export function inputRulePlugin(schema, featureFlags) {
 
   if (rules.length !== 0) {
     return createPlugin('block-type', rules, {
-      isBlockNodeRule: true,
-      useUnpredictableInputRule: featureFlags.useUnpredictableInputRule
+      isBlockNodeRule: true
     });
   }
 

package/dist/es2019/plugins/block-type/pm-plugins/keymap.js

@@ -1,21 +1,22 @@
-import { chainCommands } from 'prosemirror-commands';
-import { undoInputRule } from 'prosemirror-inputrules';
 import { redo, undo } from 'prosemirror-history';
 import * as keymaps from '../../../keymaps';
 import * as commands from '../../../commands';
 import * as blockTypes from '../types';
 import { keymap } from '../../../utils/keymap';
-import { cleanUpAtTheStartOfDocument, insertBlockTypesWithAnalytics } from '../../block-type/commands';
+import { cleanUpAtTheStartOfDocument, insertBlockTypesWithAnalytics } from '../commands';
+import { deleteEmptyParagraphAndMoveBlockUp } from '../../../utils/commands';
 import { INPUT_METHOD } from '../../analytics';
-const tryUndoInputRuleElseUndoHistory = chainCommands(undoInputRule, undo);
+import { isNodeAWrappingBlockNode } from '../utils';
 export default function keymapPlugin(schema, featureFlags) {
   const list = {};
   keymaps.bindKeymapWithCommand(keymaps.insertNewLine.common, commands.insertNewLineWithAnalytics, list);
   keymaps.bindKeymapWithCommand(keymaps.moveUp.common, commands.createNewParagraphAbove, list);
   keymaps.bindKeymapWithCommand(keymaps.moveDown.common, commands.createNewParagraphBelow, list);
   keymaps.bindKeymapWithCommand(keymaps.findKeyMapForBrowser(keymaps.redo), redo, list);
-  keymaps.bindKeymapWithCommand(keymaps.undo.common, featureFlags.useUnpredictableInputRule ? tryUndoInputRuleElseUndoHistory : undo, list);
+  keymaps.bindKeymapWithCommand(keymaps.undo.common, undo, list);
   keymaps.bindKeymapWithCommand(keymaps.backspace.common, cleanUpAtTheStartOfDocument, list);
+  keymaps.bindKeymapWithCommand(keymaps.deleteKey.common, deleteEmptyParagraphAndMoveBlockUp(isNodeAWrappingBlockNode), list);
+  keymaps.bindKeymapWithCommand(keymaps.forwardDelete.mac, deleteEmptyParagraphAndMoveBlockUp(isNodeAWrappingBlockNode), list);
 
   if (schema.nodes[blockTypes.BLOCK_QUOTE.nodeName]) {
     keymaps.bindKeymapWithCommand(keymaps.findShortcutByKeymap(keymaps.toggleBlockQuote), insertBlockTypesWithAnalytics(blockTypes.BLOCK_QUOTE.name, INPUT_METHOD.KEYBOARD), list);

package/dist/es2019/plugins/block-type/utils.js

@@ -0,0 +1,8 @@
+import { WRAPPER_BLOCK_TYPES } from './types';
+export const isNodeAWrappingBlockNode = node => {
+  if (!node) {
+    return false;
+  }
+
+  return WRAPPER_BLOCK_TYPES.some(blockNode => blockNode.name === node.type.name);
+};

package/dist/es2019/plugins/breakout/index.js

@@ -2,17 +2,23 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { breakout } from '@atlaskit/adf-schema';
-import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
+import { calcBreakoutWidthPx } from '@atlaskit/editor-common/utils';
 import WithPluginState from '../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../width';
 import LayoutButton from './ui/LayoutButton';
 import { BreakoutCssClassName } from './constants';
 import { pluginKey } from './plugin-key';
-import { parsePx } from '../../utils/dom';
 import { findSupportedNodeForBreakout } from './utils/find-breakout-node';
+import { akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 
 class BreakoutView {
-  constructor(node, view, eventDispatcher) {
+  constructor(
+  /**
+   * Note: this is actually a PMMark -- however our version
+   * of the prosemirror and prosemirror types mean using PMNode
+   * is not problematic.
+   */
+  mark, view, eventDispatcher) {
     _defineProperty(this, "updateWidth", widthState => {
       // we skip updating the width of breakout nodes if the editorView dom
       // element was hidden (to avoid breakout width and button thrashing
@@ -21,21 +27,34 @@ class BreakoutView {
         return;
       }
 
-      const width = calcBreakoutWidth(this.node.attrs.mode, widthState.width);
-      let newStyle = `width: ${width}; `;
-      const lineLength = widthState.lineLength;
-      const widthPx = parsePx(width);
+      let containerStyle = ``;
+      let contentStyle = ``;
+      let breakoutWidthPx = calcBreakoutWidthPx(this.mark.attrs.mode, widthState.width);
 
-      if (lineLength && widthPx) {
-        const marginLeftPx = -(widthPx - lineLength) / 2;
-        newStyle += `transform: none; margin-left: ${marginLeftPx}px;`;
+      if (widthState.lineLength) {
+        if (breakoutWidthPx < widthState.lineLength) {
+          breakoutWidthPx = widthState.lineLength;
+        }
+
+        containerStyle += `
+        transform: none;
+        display: flex;
+        justify-content: center;
+        `; // There is a delay in the animation because widthState is delayed.
+        // When the editor goes full width the animation for the editor
+        // begins and finishes before widthState can update the new dimensions.
+
+        contentStyle += `
+        min-width: ${breakoutWidthPx}px;
+        transition: min-width 0.5s ${akEditorSwoopCubicBezier};
+      `;
       } else {
         // fallback method
         // (lineLength is not normally undefined, but might be in e.g. SSR or initial render)
         //
         // this approach doesn't work well with position: fixed, so
         // it breaks things like sticky headers
-        newStyle += `transform: translateX(-50%); margin-left: 50%;`;
+        containerStyle += `width: ${breakoutWidthPx}px; transform: translateX(-50%); margin-left: 50%;`;
       } // NOTE: This is a hack to ignore mutation since mark NodeView doesn't support
       // `ignoreMutation` life-cycle event. @see ED-9947
 
@@ -50,9 +69,11 @@ class BreakoutView {
       }
 
       if (typeof this.dom.style.cssText !== 'undefined') {
-        this.dom.style.cssText = newStyle;
+        this.dom.style.cssText = containerStyle;
+        this.contentDOM.style.cssText = contentStyle;
       } else {
-        this.dom.setAttribute('style', newStyle);
+        this.dom.setAttribute('style', containerStyle);
+        this.contentDOM.setAttribute('style', contentStyle);
       }
     });
 
@@ -60,10 +81,10 @@ class BreakoutView {
     contentDOM.className = BreakoutCssClassName.BREAKOUT_MARK_DOM;
     const dom = document.createElement('div');
     dom.className = BreakoutCssClassName.BREAKOUT_MARK;
-    dom.setAttribute('data-layout', node.attrs.mode);
+    dom.setAttribute('data-layout', mark.attrs.mode);
     dom.appendChild(contentDOM);
     this.dom = dom;
-    this.node = node;
+    this.mark = mark;
     this.view = view;
     this.contentDOM = contentDOM;
     this.eventDispatcher = eventDispatcher;
@@ -118,8 +139,12 @@ function createPlugin({
     key: pluginKey,
     props: {
       nodeViews: {
-        breakout: (node, view) => {
-          return new BreakoutView(node, view, eventDispatcher);
+        // Note: When we upgrade to prosemirror 1.27.2 -- we should
+        // move this to markViews.
+        // See the following link for more details:
+        // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews.
+        breakout: (mark, view) => {
+          return new BreakoutView(mark, view, eventDispatcher);
         }
       }
     }

package/dist/es2019/plugins/card/nodeviews/embedCard.js

@@ -15,7 +15,6 @@ import { createDisplayGrid } from '../../../plugins/grid';
 import WithPluginState from '../../../ui/WithPluginState';
 import { pluginKey as widthPluginKey } from '../../width';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '../../../utils/rich-media-utils';
-import { pluginKey as tableResizePluginKey } from '../../table/pm-plugins/table-resizing';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 export class EmbedCardComponent extends React.PureComponent {
   constructor(...args) {
@@ -137,15 +136,24 @@ export class EmbedCardComponent extends React.PureComponent {
     _defineProperty(this, "saveOriginalDimensionsAttributes", (height, width) => {
       const {
         view
-      } = this.props;
-      const tableResizeState = tableResizePluginKey.getState(view.state); // We are not updating ADF when this function fired while table is resizing.
+      } = this.props; // TODO: ED-15663
+      // Please, do not copy or use this kind of code below
+      // @ts-ignore
+
+      const fakeTableResizePluginKey = {
+        key: 'tableFlexiColumnResizing$',
+        getState: state => {
+          return state['tableFlexiColumnResizing$'];
+        }
+      };
+      const fakeTableResizeState = fakeTableResizePluginKey.getState(view.state); // We are not updating ADF when this function fired while table is resizing.
       // Changing ADF in the middle of resize will break table resize plugin logic
       // (tables will be considered different at the end of the drag and cell size won't be stored)
       // But this is not a big problem, editor user will be seeing latest height anyway (via updated state)
       // And even if page to be saved with slightly outdated height, renderer is capable of reading latest height value
       // when embed loads, and so it won't be a problem.
 
-      if (tableResizeState !== null && tableResizeState !== void 0 && tableResizeState.dragging) {
+      if (fakeTableResizeState !== null && fakeTableResizeState !== void 0 && fakeTableResizeState.dragging) {
         return;
       }
 

package/dist/es2019/plugins/card/toolbar.js

@@ -20,7 +20,6 @@ import { messages } from './messages';
 import buildLayoutButtons from '../../ui/MediaAndEmbedsToolbar';
 import { buildOpenedSettingsPayload, buildVisitedLinkPayload } from '../../utils/linking-utils';
 import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME } from './styles';
-import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
 import { getFeatureFlags } from '../feature-flags-context';
 export const removeCard = (state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
@@ -129,7 +128,8 @@ export const floatingToolbar = (cardOptions, platform, linkPickerOptions) => {
         return element;
       },
       items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPickerOptions),
-      ...(pluginState.showLinkingToolbar ? editLinkToolbarConfig : {})
+      ...(pluginState.showLinkingToolbar ? editLinkToolbarConfig : {}),
+      scrollable: pluginState.showLinkingToolbar ? false : true
     };
   };
 };
@@ -202,7 +202,16 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, platfor
       onClick: visitCardLink
     }, {
       type: 'separator'
-    }, ...getUnlinkButtonGroup(state, intl, node, inlineCard), ...getCopyButtonGroup(state, intl, node), ...getSettingsButtonGroup(state, intl), {
+    }, ...getUnlinkButtonGroup(state, intl, node, inlineCard), {
+      type: 'copy-button',
+      items: [{
+        state,
+        formatMessage: intl.formatMessage,
+        nodeType: node.type
+      }, {
+        type: 'separator'
+      }]
+    }, ...getSettingsButtonGroup(state, intl), {
       id: 'editor.link.delete',
       type: 'button',
       appearance: 'danger',
@@ -280,10 +289,4 @@ const getSettingsButtonGroup = (state, intl) => {
   }, {
     type: 'separator'
   }] : [];
-};
-
-const getCopyButtonGroup = (state, intl, node) => {
-  return state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, node.type), {
-    type: 'separator'
-  }] : [];
 };

package/dist/es2019/plugins/card/ui/LinkToolbarIconDropdown.js

@@ -89,7 +89,8 @@ const Option = ({
       width: 38,
       height: 38,
       label: title
-    })),
+    })) // @ts-ignore Overriding Menu styles is not supported
+    ,
     css: getCustomStyles(selected, disabled),
     description: description,
     testId: testId,

package/dist/es2019/plugins/code-block/pm-plugins/codeBlockCopySelectionPlugin.js

@@ -94,7 +94,7 @@ export function provideVisualFeedbackForCopyButton(state, dispatch) {
     dispatch(tr);
   }
 
-  return false;
+  return true;
 }
 export function removeVisualFeedbackForCopyButton(state, dispatch) {
   const tr = state.tr;
@@ -108,5 +108,5 @@ export function removeVisualFeedbackForCopyButton(state, dispatch) {
     dispatch(tr);
   }
 
-  return false;
+  return true;
 }

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { R75 } from '@atlaskit/theme/colors';
-import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { token } from '@atlaskit/tokens';
 import { codeBlockClassNames } from './ui/class-names';
 import { codeBlockSharedStyles } from '@atlaskit/editor-common/styles';
@@ -9,8 +9,19 @@ export const codeBlockStyles = props => css`
     ${codeBlockSharedStyles(props)}
   }
 
-  .ProseMirror li > .code-block {
-    margin: 0;
+  .ProseMirror li {
+    /* if same list item has multiple code blocks we need top margin for all but first */
+    > .code-block {
+      margin: ${blockNodesVerticalMargin} 0 0 0;
+    }
+    > .code-block:first-child,
+    > .ProseMirror-gapcursor:first-child + .code-block {
+      margin-top: 0;
+    }
+
+    > div:last-of-type.code-block {
+      margin-bottom: ${blockNodesVerticalMargin};
+    }
   }
 
   .ProseMirror .code-block.${akEditorSelectedNodeClassName}:not(.danger) {

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

@@ -93,7 +93,8 @@ export const getToolbarConfig = (allowCopyToClipboard = false) => (state, {
     title: 'CodeBlock floating controls',
     getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
     nodeType,
-    items: [languageSelect, separator, ...copyToClipboardItems, deleteButton]
+    items: [languageSelect, separator, ...copyToClipboardItems, deleteButton],
+    scrollable: true
   };
 };
 /**