@atlaskit/editor-core 171.0.0 → 172.0.1

package/dist/es2019/plugins/analytics/plugin.js

@@ -37,9 +37,19 @@ function createPlugin(options) {
               // that has an analytics event.
               if (hasRequiredPerformanceAPIs && tr.docChanged && payload.action !== ACTION.INSERTED && payload.action !== ACTION.DELETED) {
                 const measureName = `${payload.actionSubject}:${payload.action}:${payload.actionSubjectId}`;
-                measureRender(measureName, duration => {
+                measureRender( // NOTE this name could be resulting in misleading data -- where if multiple payloads are
+                // received before a render completes -- the measurement value will be inaccurate (this is
+                // due to measureRender requiring unique measureNames)
+                measureName, ({
+                  duration,
+                  distortedDuration
+                }) => {
                   fireAnalyticsEvent(pluginState.createAnalyticsEvent)({
-                    payload: extendPayload(payload, duration),
+                    payload: extendPayload({
+                      payload,
+                      duration,
+                      distortedDuration
+                    }),
                     channel
                   });
                 });
@@ -103,10 +113,15 @@ const analyticsPlugin = options => ({
 
 });
 
-export function extendPayload(payload, duration) {
+export function extendPayload({
+  payload,
+  duration,
+  distortedDuration
+}) {
   return { ...payload,
     attributes: { ...payload.attributes,
-      duration
+      duration,
+      distortedDuration
     },
     eventType: EVENT_TYPE.OPERATIONAL
   };

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

@@ -5,7 +5,7 @@ import { doc, paragraph, text } from '@atlaskit/adf-schema';
 import filterStepsPlugin from './pm-plugins/filter-steps';
 import focusHandlerPlugin from './pm-plugins/focus-handler';
 import fixChrome88SelectionPlugin from './pm-plugins/fix-chrome-88-selection';
-import fixChromeSpellCheckingPlugin from './pm-plugins/fix-chrome-spell-checking';
+import disableSpellcheckingPlugin from './pm-plugins/disable-spell-checking';
 import contextIdentifierPlugin from './pm-plugins/context-identifier';
 import newlinePreserveMarksPlugin from './pm-plugins/newline-preserve-marks';
 import inlineCursorTargetPlugin from './pm-plugins/inline-cursor-target';
@@ -102,8 +102,8 @@ const basePlugin = options => ({
     }
 
     plugins.push({
-      name: 'fixChromeSpellCheckingPlugin',
-      plugin: () => fixChromeSpellCheckingPlugin()
+      name: 'disableSpellcheckingPlugin',
+      plugin: () => disableSpellcheckingPlugin()
     });
     return plugins;
   },

package/dist/es2019/plugins/base/pm-plugins/disable-spell-checking.js

@@ -0,0 +1,70 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { getFeatureFlags } from '../../feature-flags-context';
+import { browser as browserEnv } from '@atlaskit/editor-common/utils';
+
+function getCurrentBrowserAndVersion() {
+  switch (true) {
+    case browserEnv.chrome === true:
+      return {
+        browser: 'chrome',
+        version: browserEnv.chrome_version
+      };
+
+    case browserEnv.ie === true:
+      return {
+        browser: 'ie',
+        version: browserEnv.ie_version
+      };
+
+    case browserEnv.gecko === true:
+      return {
+        browser: 'gecko',
+        version: browserEnv.gecko_version
+      };
+
+    case browserEnv.safari === true:
+      return {
+        browser: 'safari',
+        version: browserEnv.safari_version
+      };
+  }
+
+  return undefined;
+}
+
+export default (() => new SafePlugin({
+  key: new PluginKey('disableSpellchecking'),
+  props: {
+    attributes: editorState => {
+      const featureFlags = getFeatureFlags(editorState) || undefined;
+
+      if (!featureFlags) {
+        return;
+      }
+
+      const browserConfigFeatureFlag = featureFlags.disableSpellcheckByBrowser;
+      const userCurrentBrowserAndVersion = getCurrentBrowserAndVersion();
+
+      if (!userCurrentBrowserAndVersion || !browserConfigFeatureFlag) {
+        return;
+      }
+
+      const browserVersionDisableRange = browserConfigFeatureFlag[userCurrentBrowserAndVersion.browser];
+
+      if (!browserVersionDisableRange || !browserEnv[userCurrentBrowserAndVersion.browser]) {
+        return;
+      }
+
+      const shouldDisableSpellcheck = !!browserVersionDisableRange.maximum ? userCurrentBrowserAndVersion.version >= browserVersionDisableRange.minimum && userCurrentBrowserAndVersion.version <= browserVersionDisableRange.maximum : browserEnv[userCurrentBrowserAndVersion.browser] && userCurrentBrowserAndVersion.version >= browserVersionDisableRange.minimum;
+
+      if (shouldDisableSpellcheck) {
+        return {
+          spellcheck: 'false'
+        };
+      }
+
+      return;
+    }
+  }
+}));

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

@@ -62,7 +62,7 @@ const cardPlugin = options => {
     },
 
     pluginsOptions: {
-      floatingToolbar: floatingToolbar(options, options.platform)
+      floatingToolbar: floatingToolbar(options, options.platform, options.linkPicker)
     }
   };
 };

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { Card as SmartCard } from '@atlaskit/smart-card';
+import { Card as SmartCard, EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import PropTypes from 'prop-types';
 import rafSchedule from 'raf-schd';
 import { Card } from './genericCard';
@@ -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 { EmbedResizeMessageListener } from '@atlaskit/smart-card';
 import { pluginKey as tableResizePluginKey } from '../../table/pm-plugins/table-resizing';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 export class EmbedCardComponent extends React.PureComponent {

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

@@ -19,6 +19,7 @@ import { messages } from './messages';
 import buildLayoutButtons from '../../ui/MediaAndEmbedsToolbar';
 import { buildVisitedLinkPayload } from '../../utils/linking-utils';
 import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME } from './styles';
+import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
 export const removeCard = (state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
@@ -95,6 +96,9 @@ const generateDeleteButton = (node, state, intl) => {
     title: intl.formatMessage(commonMessages.remove),
     onClick: removeCard
   };
+  const copyButton = [...(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, node.type), {
+    type: 'separator'
+  }] : [])];
 
   if (node.type === inlineCard) {
     const unlinkButtonWithSeparator = [{
@@ -106,13 +110,13 @@ const generateDeleteButton = (node, state, intl) => {
     }, {
       type: 'separator'
     }];
-    return [...unlinkButtonWithSeparator, removeButton];
+    return [...unlinkButtonWithSeparator, ...copyButton, removeButton];
   }
 
-  return [removeButton];
+  return [...copyButton, removeButton];
 };
 
-const generateToolbarItems = (state, intl, providerFactory, cardOptions, platform) => node => {
+const generateToolbarItems = (state, intl, providerFactory, cardOptions, platform, linkPicker) => node => {
   const {
     url
   } = titleUrlPairFromNode(node);
@@ -137,6 +141,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, platfor
   if (pluginState.showLinkingToolbar && platform !== 'mobile') {
     return [buildEditLinkToolbar({
       providerFactory,
+      linkPicker,
       node
     })];
   } else {
@@ -203,7 +208,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, platfor
   }
 };
 
-export const floatingToolbar = (cardOptions, platform) => {
+export const floatingToolbar = (cardOptions, platform, linkPickerOptions) => {
   return (state, intl, providerFactory) => {
     const {
       inlineCard,
@@ -249,7 +254,7 @@ export const floatingToolbar = (cardOptions, platform) => {
 
         return element;
       },
-      items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform),
+      items: generateToolbarItems(state, intl, providerFactory, cardOptions, platform, linkPickerOptions),
       ...(pluginState.showLinkingToolbar ? editLinkToolbarConfig : {})
     };
   };

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

@@ -27,6 +27,7 @@ export class EditLinkToolbar extends React.Component {
 
   render() {
     const {
+      linkPickerOptions,
       providerFactory,
       url,
       text,
@@ -35,6 +36,7 @@ export class EditLinkToolbar extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(HyperlinkToolbar, {
       view: view,
+      linkPickerOptions: linkPickerOptions,
       providerFactory: providerFactory,
       displayUrl: url,
       displayText: text,
@@ -65,7 +67,8 @@ export const editLink = (state, dispatch) => {
 };
 export const buildEditLinkToolbar = ({
   providerFactory,
-  node
+  node,
+  linkPicker
 }) => {
   return {
     type: 'custom',
@@ -79,6 +82,7 @@ export const buildEditLinkToolbar = ({
       return /*#__PURE__*/React.createElement(EditLinkToolbar, {
         key: idx,
         view: view,
+        linkPickerOptions: linkPicker,
         providerFactory: providerFactory,
         url: displayInfo.url,
         text: displayInfo.title || '',

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

@@ -37,8 +37,8 @@ export class LinkToolbarAppearance extends React.Component {
         }
       }
 
-      const isSmartLinkSupportedInParent = isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance);
-      const tooltip = isSmartLinkSupportedInParent ? undefined : parentNodeName(editorState, intl);
+      const isBlockCardLinkSupportedInParent = isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.blockCard.createChecked({})), currentAppearance);
+      const isEmbedCardLinkSupportedInParent = allowEmbeds ? isSupportedInParent(editorState, Fragment.from(editorState.schema.nodes.embedCard.createChecked({})), currentAppearance) : false;
       const embedOption = allowEmbeds && preview && {
         appearance: 'embed',
         title: intl.formatMessage(messages.embed),
@@ -46,8 +46,8 @@ export class LinkToolbarAppearance extends React.Component {
         selected: currentAppearance === 'embed',
         hidden: false,
         testId: 'embed-appearance',
-        disabled: !isSmartLinkSupportedInParent,
-        tooltip
+        disabled: !isEmbedCardLinkSupportedInParent,
+        tooltip: isEmbedCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
       };
       const options = [{
         title: intl.formatMessage(messages.url),
@@ -66,8 +66,8 @@ export class LinkToolbarAppearance extends React.Component {
         onClick: setSelectedCardAppearance('block'),
         selected: currentAppearance === 'block',
         testId: 'block-appearance',
-        disabled: !isSmartLinkSupportedInParent,
-        tooltip
+        disabled: !isBlockCardLinkSupportedInParent,
+        tooltip: isBlockCardLinkSupportedInParent ? undefined : getUnavailableMessage(editorState, intl)
       }];
 
       const dispatchCommand = fn => {
@@ -128,7 +128,7 @@ _defineProperty(LinkToolbarAppearance, "contextTypes", {
   contextAdapter: PropTypes.object
 });
 
-const parentNodeName = (state, intl) => {
+const getUnavailableMessage = (state, intl) => {
   try {
     const parentNode = state.selection.$from.node(1);
     const parentName = intl.formatMessage(nodeNames[parentNode.type.name]);

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

@@ -107,8 +107,7 @@ export const sendClipboardAnalytics = (view, dispatchAnalyticsEvent, action) =>
 
   return false;
 };
-
-const getAnalyticsPayload = (state, action) => {
+export const getAnalyticsPayload = (state, action) => {
   const {
     selection,
     doc

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

@@ -1,6 +1,7 @@
 import { findParentNodeOfType, findSelectedNodeOfType, removeSelectedNode, removeParentNodeOfType, isNodeSelection } from 'prosemirror-utils';
 import { NodeSelection } from 'prosemirror-state';
 import { pluginKey } from './plugin-key';
+import { copySelectionPluginKey } from './pm-plugins/codeBlockCopySelectionPlugin';
 import { ACTIONS } from './pm-plugins/actions';
 import { copyToClipboard } from '../../utils/clipboard';
 import { addAnalytics } from '../analytics/utils';
@@ -75,6 +76,7 @@ export const copyContentToClipboard = (state, dispatch) => {
       type: ACTIONS.SET_COPIED_TO_CLIPBOARD,
       data: true
     });
+    copyToClipboardTr.setMeta(copySelectionPluginKey, 'remove-selection');
 
     if (dispatch) {
       dispatch(copyToClipboardTr);
@@ -95,10 +97,20 @@ export const resetCopiedState = (state, dispatch) => {
       type: ACTIONS.SET_COPIED_TO_CLIPBOARD,
       data: false
     });
+    resetCopiedStateTr.setMeta(copySelectionPluginKey, 'remove-selection');
 
     if (dispatch) {
       dispatch(resetCopiedStateTr);
     }
+  } else {
+    const clearSelectionStateTransaction = state.tr;
+    clearSelectionStateTransaction.setMeta(copySelectionPluginKey, 'remove-selection'); // note: dispatch should always be defined when called from the
+    // floating toolbar. Howver the Command type which floating toolbar uses
+    // (and resetCopiedState) uses suggests it's optional.
+
+    if (dispatch) {
+      dispatch(clearSelectionStateTransaction);
+    }
   }
 
   return true;

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

@@ -4,6 +4,7 @@ import { createPlugin } from './pm-plugins/main';
 import { getToolbarConfig } from './toolbar';
 import keymap from './pm-plugins/keymaps';
 import ideUX from './pm-plugins/ide-ux';
+import { codeBlockCopySelectionPlugin } from './pm-plugins/codeBlockCopySelectionPlugin';
 import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD, EVENT_TYPE } from '../analytics';
 import { IconCode } from '../quick-insert/assets';
 import { messages } from '../block-type/messages';
@@ -36,6 +37,9 @@ const codeBlockPlugin = options => ({
       plugin: ({
         schema
       }) => keymap(schema)
+    }, {
+      name: 'codeBlockCopySelection',
+      plugin: () => codeBlockCopySelectionPlugin()
     }];
   },
 

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

@@ -134,4 +134,4 @@ export class CodeBlockView {
   }
 
 }
-export const codeBlockNodeView = () => (node, view, getPos) => new CodeBlockView(node, view, getPos);
+export const codeBlockNodeView = (node, view, getPos) => new CodeBlockView(node, view, getPos);

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

@@ -0,0 +1,112 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { getSelectedNodeOrNodeParentByNodeType } from '../../copy-button/utils';
+export const copySelectionPluginKey = new PluginKey('codeBlockCopySelectionPlugin');
+
+function getSelectionDecorationStartAndEnd({
+  state,
+  transaction
+}) {
+  const codeBlockNode = getSelectedNodeOrNodeParentByNodeType({
+    nodeType: state.schema.nodes.codeBlock,
+    selection: transaction.selection
+  });
+
+  if (!codeBlockNode) {
+    return {
+      decorationStartAndEnd: undefined
+    };
+  }
+
+  const decorationStartAndEnd = [codeBlockNode.start, codeBlockNode.start + codeBlockNode.node.nodeSize];
+  return {
+    decorationStartAndEnd
+  };
+}
+
+export function codeBlockCopySelectionPlugin() {
+  return new SafePlugin({
+    key: copySelectionPluginKey,
+    state: {
+      init() {
+        return {
+          decorationStartAndEnd: undefined
+        };
+      },
+
+      apply(transaction, currentCodeBlockCopySelectionPluginState, _oldState, newState) {
+        switch (transaction.getMeta(copySelectionPluginKey)) {
+          case 'show-selection':
+            {
+              return getSelectionDecorationStartAndEnd({
+                state: newState,
+                transaction
+              });
+            }
+
+          case 'remove-selection':
+            return {
+              decorationStartAndEnd: undefined
+            };
+
+          default:
+            // The contents of the code block can change while the selection is being shown
+            // (either from collab edits -- or from the user continuing to type while hovering
+            // the mouse over the copy button).
+            // This ensures the selection is updated in these cases.
+            if (currentCodeBlockCopySelectionPluginState.decorationStartAndEnd !== undefined) {
+              return getSelectionDecorationStartAndEnd({
+                state: newState,
+                transaction
+              });
+            }
+
+            return currentCodeBlockCopySelectionPluginState;
+        }
+      }
+
+    },
+    props: {
+      decorations(state) {
+        if (copySelectionPluginKey.getState(state).decorationStartAndEnd) {
+          const [start, end] = copySelectionPluginKey.getState(state).decorationStartAndEnd;
+          return DecorationSet.create(state.doc, [Decoration.inline(start, end, {
+            class: 'ProseMirror-fake-text-selection'
+          })]);
+        }
+
+        return DecorationSet.empty;
+      }
+
+    }
+  });
+}
+export function provideVisualFeedbackForCopyButton(state, dispatch) {
+  const tr = state.tr;
+  tr.setMeta(copySelectionPluginKey, 'show-selection'); // note: dispatch should always be defined when called from the
+  // floating toolbar. Howver the Command type which the floating toolbar
+  // uses suggests it's optional.
+  // Using the type here to protect against future refactors of the
+  // floating toolbar
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return false;
+}
+export function removeVisualFeedbackForCopyButton(state, dispatch) {
+  const tr = state.tr;
+  tr.setMeta(copySelectionPluginKey, 'remove-selection'); // note: dispatch should always be defined when called from the
+  // floating toolbar. Howver the Command type which the floating toolbar
+  // uses suggests it's optional.
+  // Using the type here to protect against future refactors of the
+  // floating toolbar
+
+  if (dispatch) {
+    dispatch(tr);
+  }
+
+  return false;
+}

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

@@ -1,24 +1,19 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { browser } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from 'prosemirror-state';
-import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { codeBlockNodeView } from '../nodeviews/code-block';
-import { highlightingCodeBlockNodeView } from '../nodeviews/highlighting-code-block';
 import { createSelectionClickHandler } from '../../selection/utils';
 import { pluginKey } from '../plugin-key';
 import { ACTIONS } from './actions';
 import { ignoreFollowingMutations, resetShouldIgnoreFollowingMutations } from '../actions';
 import { findCodeBlock } from '../utils';
 import { codeBlockClassNames } from '../ui/class-names';
-import { getFeatureFlags } from '../../feature-flags-context';
 export const createPlugin = ({
   useLongPressSelection = false,
   getIntl,
   appearance,
   allowCompositionInputOverride = false
 }) => {
-  const intl = getIntl();
-  const codeBidiWarningLabel = intl.formatMessage(codeBidiWarningMessages.label);
   const handleDOMEvents = {}; // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
   // incorrecly and lose content when pressing enter in the middle of a code block line.
 
@@ -102,22 +97,7 @@ export const createPlugin = ({
     key: pluginKey,
     props: {
       nodeViews: {
-        codeBlock(node, view, getPos) {
-          const featureFlags = getFeatureFlags(view.state); // The appearance being mobile indicates we are in an editor being
-          // rendered by mobile bridge in a web view.
-          // The tooltip is likely to have unexpected behaviour there, with being cut
-          // off, so we disable it. This is also to keep the behaviour consistent with
-          // the rendering in the mobile Native Renderer.
-
-          const codeBidiWarningTooltipEnabled = appearance !== 'mobile';
-          const createCodeBlockNodeView = featureFlags !== null && featureFlags !== void 0 && featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockNodeView({
-            codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
-            codeBidiWarningLabel,
-            codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
-          }) : codeBlockNodeView();
-          return createCodeBlockNodeView(node, view, getPos);
-        }
-
+        codeBlock: codeBlockNodeView
       },
       handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
         useLongPressSelection