@atlaskit/editor-core 166.0.4 → 167.0.2

package/dist/es2019/utils/document.js

@@ -1,5 +1,5 @@
 import { Node } from 'prosemirror-model';
-import { transformMediaLinkMarks, transformTextLinkCodeMarks } from '@atlaskit/adf-utils';
+import { transformMediaLinkMarks, transformTextLinkCodeMarks, transformDedupeMarks, transformNodesMissingContent, transformIndentationMarks } from '@atlaskit/adf-utils/transforms';
 import { sanitizeNodeForPrivacy } from '../utils/filter/privacy-filter';
 import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaskit/editor-common/utils';
 import { getBreakoutMode } from './node-width';
@@ -75,6 +75,9 @@ export function isEmptyDocument(node) {
 export function hasDocAsParent($anchor) {
   return $anchor.depth === 1;
 }
+export function isProseMirrorSchemaCheckError(error) {
+  return error instanceof RangeError && (!!error.message.match(/^Invalid collection of marks for node/) || !!error.message.match(/^Invalid content for node/));
+}
 export function isInEmptyLine(state) {
   const {
     selection
@@ -192,9 +195,10 @@ export function processRawValue(schema, value, providerFactory, sanitizePrivateC
     // and preserving code marks during content changes.
 
 
-    const transformResult = transformTextLinkCodeMarks(node);
-    transformedAdf = transformResult.transformedAdf;
-    isTransformed = transformResult.isTransformed;
+    ({
+      transformedAdf,
+      isTransformed
+    } = transformTextLinkCodeMarks(transformedAdf));
 
     if (isTransformed && dispatchAnalyticsEvent) {
       dispatchAnalyticsEvent({
@@ -204,6 +208,50 @@ export function processRawValue(schema, value, providerFactory, sanitizePrivateC
       });
     }
 
+    let discardedMarks = [];
+    ({
+      transformedAdf,
+      isTransformed,
+      discardedMarks
+    } = transformDedupeMarks(transformedAdf));
+
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.DEDUPE_MARKS_TRANSFORMED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          discardedMarks
+        }
+      });
+    }
+
+    ({
+      transformedAdf,
+      isTransformed
+    } = transformNodesMissingContent(transformedAdf));
+
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.NODES_MISSING_CONTENT_TRANSFORMED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+
+    ({
+      transformedAdf,
+      isTransformed
+    } = transformIndentationMarks(transformedAdf));
+
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: ACTION.INDENTATION_MARKS_TRANSFORMED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    }
+
     const entity = validateADFEntity(schema, transformedAdf || node, dispatchAnalyticsEvent);
     let newEntity = maySanitizePrivateContent(entity, providerFactory, sanitizePrivateContent);
     const parsedDoc = Node.fromJSON(schema, newEntity); // throws an error if the document is invalid
@@ -222,7 +270,7 @@ export function processRawValue(schema, value, providerFactory, sanitizePrivateC
         });
       }
 
-      return;
+      throw err;
     }
 
     if (dispatchAnalyticsEvent) {
@@ -244,6 +292,11 @@ export function processRawValue(schema, value, providerFactory, sanitizePrivateC
 
 
     console.error(`Error processing document:\n${e.message}\n\n`, JSON.stringify(node));
+
+    if (isProseMirrorSchemaCheckError(e)) {
+      throw e;
+    }
+
     return;
   }
 }

package/dist/es2019/utils/filter/privacy-filter.js

@@ -1,4 +1,4 @@
-import { traverse } from '@atlaskit/adf-utils';
+import { traverse } from '@atlaskit/adf-utils/traverse';
 import { isResolvingMentionProvider } from '@atlaskit/mention/resource';
 
 /**

package/dist/es2019/utils/step.js

@@ -1,3 +1,4 @@
+import { ReplaceAroundStep, ReplaceStep } from 'prosemirror-transform';
 export const stepHasSlice = step => step && step.hasOwnProperty('slice');
 /**
  * Checks whether a given step is adding nodes of given nodeTypes
@@ -21,4 +22,14 @@ export function stepAddsOneOf(step, nodeTypes) {
     return !adds;
   });
   return adds;
-}
+}
+export const extractSliceFromStep = step => {
+  if (!(step instanceof ReplaceStep) && !(step instanceof ReplaceAroundStep)) {
+    return null;
+  } // @ts-ignore This is by design. Slice is a private property, but accesible, from ReplaceStep.
+  // However, we need to read it to found if the step was adding a newline
+
+
+  const slice = step.slice;
+  return slice;
+};

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "166.0.4";
+export const version = "167.0.2";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "166.0.4",
+	"version": "167.0.2",
 	"sideEffects": false
 }

package/dist/esm/actions/index.js

@@ -4,7 +4,8 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Node } from 'prosemirror-model';
-import { TextSelection } from 'prosemirror-state';
+import { TextSelection, NodeSelection } from 'prosemirror-state';
+import { findParentNode } from 'prosemirror-utils';
 import { toJSON } from '../utils';
 import { processRawValue, isEmptyDocument } from '../utils/document';
 import { getEditorValueWithMedia, __temporaryFixForConfigPanel as _temporaryFixForConfigPanel } from '../utils/action';
@@ -285,6 +286,30 @@ var EditorActions = /*#__PURE__*/function () {
         return (_findNodePosWithLocal = findNodePosWithLocalId((_this$editorView2 = this.editorView) === null || _this$editorView2 === void 0 ? void 0 : _this$editorView2.state, id)) === null || _findNodePosWithLocal === void 0 ? void 0 : _findNodePosWithLocal.node;
       }
     }
+    /**
+     * This method will return the currently selected `Node` if the selection is a `Node`.
+     * Otherwise, if the selection is textual or a non-selectable `Node` within another selectable `Node`, the closest selectable parent `Node` will be returned.
+     */
+
+  }, {
+    key: "getSelectedNode",
+    value: function getSelectedNode() {
+      var _this$editorView3, _this$editorView3$sta;
+
+      if ((_this$editorView3 = this.editorView) !== null && _this$editorView3 !== void 0 && (_this$editorView3$sta = _this$editorView3.state) !== null && _this$editorView3$sta !== void 0 && _this$editorView3$sta.selection) {
+        var _findParentNode;
+
+        var selection = this.editorView.state.selection;
+
+        if (selection instanceof NodeSelection) {
+          return selection.node;
+        }
+
+        return (_findParentNode = findParentNode(function (node) {
+          return Boolean(node.type.spec.selectable);
+        })(selection)) === null || _findParentNode === void 0 ? void 0 : _findParentNode.node;
+      }
+    }
   }, {
     key: "isDocumentEmpty",
     value: function isDocumentEmpty() {

package/dist/esm/create-editor/ReactEditorView.js

@@ -844,6 +844,8 @@ function getUAPrefix() {
     return 'ua-ie';
   } else if (browser.gecko) {
     return 'ua-firefox';
+  } else if (browser.safari) {
+    return 'ua-safari';
   }
 
   return '';

package/dist/esm/create-editor/create-plugins-list.js

@@ -210,8 +210,7 @@ export default function createPluginsList(props, prevProps, createAnalyticsEvent
       breakoutEnabled: props.appearance === 'full-page',
       allowContextualMenu: !isMobile,
       fullWidthEnabled: props.appearance === 'full-width',
-      wasFullWidthEnabled: prevProps && prevProps.appearance === 'full-width',
-      dynamicSizingEnabled: props.allowDynamicTextSizing
+      wasFullWidthEnabled: prevProps && prevProps.appearance === 'full-width'
     }]);
   }
 

package/dist/esm/editor.js

@@ -410,6 +410,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
         allowConfluenceInlineComment: {
           message: 'To integrate inline comments use experimental annotationProvider – <Editor annotationProviders={{ provider }} />',
           type: 'removed'
+        },
+        allowDynamicTextSizing: {
+          message: 'Dynamic text sizing has been unshipped since 2020. The prop is no longer needed.',
+          type: 'removed'
         }
       };
       Object.keys(deprecatedProperties).forEach(function (property) {
@@ -498,7 +502,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getBaseFontSize",
     value: function getBaseFontSize() {
-      return !this.props.allowDynamicTextSizing && !['comment', 'chromeless', 'mobile'].includes(this.props.appearance) ? akEditorFullPageDefaultFontSize : undefined;
+      return !['comment', 'chromeless', 'mobile'].includes(this.props.appearance) ? akEditorFullPageDefaultFontSize : undefined;
     }
   }, {
     key: "render",
@@ -581,7 +585,6 @@ var Editor = /*#__PURE__*/function (_React$Component) {
                       config = _ref3.config,
                       dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
                   return jsx(BaseTheme, {
-                    dynamicTextSizing: _this5.props.allowDynamicTextSizing && _this5.props.appearance !== 'full-width',
                     baseFontSize: _this5.getBaseFontSize()
                   }, jsx(Component, {
                     appearance: _this5.props.appearance,

package/dist/esm/keymaps/index.js

@@ -76,8 +76,12 @@ var arrowKeysMap = {
   ARROWRIGHT: "\u2192",
   ARROWUP: "\u2191",
   ARROWDOWN: "\u2193"
-};
+}; // TOOD: https://product-fabric.atlassian.net/browse/DSP-4460
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 var tooltipShortcutStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 2px;\n  background-color: ", ";\n  padding: 0 2px;\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n  /* stylelint-disable-next-line */\n  label: tooltip-shortcut;\n"])), N400);
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 function formatShortcut(keymap) {
   var shortcut;

package/dist/esm/labs/next/ContentComponents.js

@@ -3,7 +3,10 @@ import { pluginKey as disabledPluginKey } from '../../plugins/editor-disabled';
 import WithPluginState from '../../ui/WithPluginState';
 import PluginSlot from '../../ui/PluginSlot';
 import { useEditorSharedConfig } from './Editor';
-export function ContentComponents(disabled) {
+export function ContentComponents(_ref) {
+  var disabled = _ref.disabled,
+      wrapperElement = _ref.wrapperElement,
+      containerElement = _ref.containerElement;
   var config = useEditorSharedConfig();
 
   if (!config) {
@@ -14,10 +17,10 @@ export function ContentComponents(disabled) {
     plugins: {
       disabled: disabledPluginKey
     },
-    render: function render(_ref) {
+    render: function render(_ref2) {
       var _disabled$editorDisab;
 
-      var disabled = _ref.disabled;
+      var disabled = _ref2.disabled;
       return /*#__PURE__*/React.createElement(PluginSlot, {
         editorView: config.editorView,
         eventDispatcher: config.eventDispatcher,
@@ -26,8 +29,9 @@ export function ContentComponents(disabled) {
         popupsMountPoint: config.popupsMountPoint,
         popupsBoundariesElement: config.popupsBoundariesElement,
         popupsScrollableElement: config.popupsScrollableElement,
-        containerElement: null // TODO: Figure out how to pass containerElement here ED-8448
+        containerElement: containerElement // TODO: Figure out how to pass containerElement here ED-8448
         ,
+        wrapperElement: wrapperElement,
         disabled: (_disabled$editorDisab = disabled === null || disabled === void 0 ? void 0 : disabled.editorDisabled) !== null && _disabled$editorDisab !== void 0 ? _disabled$editorDisab : false
       });
     }

package/dist/esm/labs/next/full-page.js

@@ -9,6 +9,7 @@ import rafSchedule from 'raf-schd';
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { BaseTheme } from '@atlaskit/editor-common/ui';
 import { akEditorMenuZIndex, akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
@@ -35,8 +36,8 @@ var editorContentArea = function editorContentArea(theme) {
   return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  line-height: 24px;\n  height: 100%;\n  width: 100%;\n  max-width: ", "px;\n  padding-top: 50px;\n  margin: 0 auto;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  padding-bottom: 55px;\n\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  && .ProseMirror {\n    & > * {\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol,\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      clear: none;\n    }\n  }\n  ", ";\n"])), theme.layoutMaxWidth + GUTTER_PADDING * 2, tableFullPageEditorStyles);
 };
 
-var mainToolbar = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: 'none';\n\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n"])), akEditorMenuZIndex);
-var mainToolbarWithKeyline = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, akEditorToolbarKeylineHeight, N30);
+var mainToolbar = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: 'none';\n\n  transition: box-shadow 200ms;\n  z-index: ", ";\n  display: flex;\n  height: 80px;\n  flex-shrink: 0;\n  background-color: ", ";\n\n  & object {\n    height: 0 !important;\n  }\n"])), akEditorMenuZIndex, token('elevation.surface', 'white'));
+var mainToolbarWithKeyline = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  box-shadow: 0 ", "px 0 0 ", "\n"])), mainToolbar, akEditorToolbarKeylineHeight, token('color.border', N30));
 var mainToolbarCustomComponentsSlot = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  flex-grow: 1;\n"])));
 var sidebarArea = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  height: 100%;\n  box-sizing: border-box;\n"])));
 
@@ -79,7 +80,6 @@ function useKeyline() {
 function FullPage(props) {
   var primaryToolbarComponents = props.primaryToolbarComponents,
       contentComponents = props.contentComponents,
-      allowDynamicTextSizing = props.allowDynamicTextSizing,
       collabEdit = props.collabEdit,
       createAnalyticsEvent = props.createAnalyticsEvent,
       contextPanel = props.contextPanel;
@@ -91,13 +91,13 @@ function FullPage(props) {
       scrollContainerRef = _useKeyline2[1];
 
   var config = useEditorSharedConfig();
+  var wrapperElementRef = /*#__PURE__*/React.createRef();
   return jsx(ContextPanelWidthProvider, null, jsx(Editor, _extends({}, props, {
     onAnalyticsEvent: handleAnalyticsEvent
-  }), jsx(BaseTheme, {
-    dynamicTextSizing: allowDynamicTextSizing
-  }, jsx("div", {
+  }), jsx(BaseTheme, null, jsx("div", {
     css: fullPageEditorWrapper,
-    className: "akEditor"
+    className: "akEditor",
+    ref: wrapperElementRef
   }, jsx("div", {
     "data-testid": "ak-editor-main-toolbar",
     css: showKeyline ? mainToolbarWithKeyline : mainToolbar
@@ -123,7 +123,10 @@ function FullPage(props) {
   }, jsx("div", {
     style: GUTTER_STYLE,
     className: "ak-editor-content-area"
-  }, contentComponents, jsx(EditorContent, null), jsx(ContentComponents, null))))), contextPanel && jsx("div", {
+  }, contentComponents, jsx(EditorContent, null), jsx(ContentComponents, {
+    wrapperElement: wrapperElementRef.current,
+    containerElement: scrollContainerRef.current
+  }))))), contextPanel && jsx("div", {
     css: sidebarArea
   }, contextPanel), jsx(WidthEmitter, {
     editorView: config === null || config === void 0 ? void 0 : config.editorView

package/dist/esm/nodeviews/getInlineNodeViewProducer.js

@@ -5,6 +5,7 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../plugins/analytics';
 import { analyticsEventKey } from '../plugins/analytics/consts';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from './getPerformanceOptions';
+export var inlineNodeViewClassname = 'inlineNodeView';
 
 function createNodeView(_ref) {
   var nodeViewParams = _ref.nodeViewParams,
@@ -25,7 +26,7 @@ function createNodeView(_ref) {
   // nodeView if DOM structure has nested plain "div"s, it doesn't see the
   // difference between them and it kills the nodeView
 
-  domRef.classList.add("".concat(nodeViewParams.node.type.name, "View-content-wrap"), "inlineNodeView"); // This util is shared for tracking rendering, and the ErrorBoundary that
+  domRef.classList.add("".concat(nodeViewParams.node.type.name, "View-content-wrap"), "".concat(inlineNodeViewClassname)); // This util is shared for tracking rendering, and the ErrorBoundary that
   // is setup to wrap the Component when rendering
   // NOTE: This is not a prosemirror dispatch
 
@@ -162,13 +163,13 @@ function getPortalChildren(_ref2) {
       componentId: (_currentNode$type$nam = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.name) !== null && _currentNode$type$nam !== void 0 ? _currentNode$type$nam : ACTION_SUBJECT_ID.UNKNOWN_NODE,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent
     }, /*#__PURE__*/React.createElement("span", {
-      className: "inlineNodeViewAddZeroWidthSpace"
+      className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
     }), ZERO_WIDTH_SPACE, /*#__PURE__*/React.createElement(Component, _extends({
       view: nodeViewParams.view,
       getPos: nodeViewParams.getPos,
       node: currentNode
     }, extraComponentProps)), /*#__PURE__*/React.createElement("span", {
-      className: "inlineNodeViewAddZeroWidthSpace"
+      className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
     }));
   };
 } // https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews

package/dist/esm/nodeviews/getInlineNodeViewProducer.styles.js

@@ -3,7 +3,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from '@emotion/react';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils'; // For reasoning behind styles, see comments in:
+import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { inlineNodeViewClassname } from './getInlineNodeViewProducer'; // For reasoning behind styles, see comments in:
 // ./getInlineNodeViewProducer -> portalChildren()
 
-export var InlineNodeViewSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .inlineNodeView {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > * {\n      white-space: pre-wrap;\n    }\n  }\n\n  &.ua-chrome .inlineNodeView > span {\n    user-select: none;\n  }\n\n  .inlineNodeViewAddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), ZERO_WIDTH_SPACE);
+export var InlineNodeViewSharedStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    display: inline;\n    user-select: all;\n    /* Collapses zero width spaces inside the inline node view\n    to prevent the node from line breaking too early.\n    */\n    white-space: nowrap;\n    /* Then reset to the Editor default so we don't interfere\n    with any component styling. */\n    & > * {\n      white-space: pre-wrap;\n    }\n  }\n  /** Remove browser deafult selections style. This prevents\n    unexpected visual artefacts in Safari when navigating\n    with the keyboard or making range selections. */\n  &.ua-safari {\n    .", " {\n      ::selection,\n      *::selection {\n        background: transparent;\n      }\n    }\n  }\n\n  &.ua-chrome .", " > span {\n    user-select: none;\n  }\n\n  .", "AddZeroWidthSpace {\n    ::after {\n      content: '", "';\n    }\n  }\n"])), inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, inlineNodeViewClassname, ZERO_WIDTH_SPACE);

package/dist/esm/plugins/alignment/ui/ToolbarAlignment/styles.js

@@ -4,7 +4,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 export var triggerWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-export var separator = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), N30);
+export var separator = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), token('color.border', N30));
 export var wrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  div {\n    display: flex;\n  }\n"])));
 export var expandIconWrapper = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: -8px;\n"])));

package/dist/esm/plugins/analytics/types/enums.js

@@ -84,6 +84,9 @@ export var ACTION;
   ACTION["SYNCHRONY_ENTITY_ERROR"] = "synchronyEntityError";
   ACTION["SYNCHRONY_ERROR"] = "synchronyError";
   ACTION["TEXT_LINK_MARK_TRANSFORMED"] = "textLinkMarkTransformed";
+  ACTION["DEDUPE_MARKS_TRANSFORMED"] = "dedupeMarksTransformed";
+  ACTION["NODES_MISSING_CONTENT_TRANSFORMED"] = "nodesMissingContentTransformed";
+  ACTION["INDENTATION_MARKS_TRANSFORMED"] = "indentationMarksTransformed";
   ACTION["TOGGLE_EXPAND"] = "toggleExpand";
   ACTION["TRANSACTION_DISPATCHED"] = "transactionDispatched";
   ACTION["TRANSACTION_MUTATED_AFTER_DISPATCH"] = "transactionMutatedAfterDispatched";

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

@@ -39,25 +39,16 @@ var basePlugin = function basePlugin(options) {
       // In Firefox, when the selection is placed between adjacent nodes which are not contenteditatble
       // no cursor is presented to users.
       // In Safari, when the selection is placed between adjacent nodes which are not contenteditatble
-      // the cursor appears inside the adjacent nodes.
-      // This plugin workarounds the issues with chrome and firefox by inserting decorations between
+      // it is not possible to navigate with arrow keys.
+      // This plugin works around the issues by inserting decorations between
       // inline nodes which are set as contenteditable, and have a zero width space.
-      // At time of development, using this workaround in Safari caused additional issues;
-      // - visual artifacts when moving across inline nodes (ie. using the arrow key to traverse a
-      //   series of inline nodes)
-      // - blocking the right arrow key when at the start of a line from moving to the end of the
-      //   previous line.
-      // As such we only apply the workaround for firefox and chrome.
-
-      if (browser.chrome || browser.gecko) {
-        plugins.push({
-          name: 'inlineCursorTargetPlugin',
-          plugin: function plugin() {
-            return options && options.allowInlineCursorTarget ? inlineCursorTargetPlugin() : undefined;
-          }
-        });
-      }
 
+      plugins.push({
+        name: 'inlineCursorTargetPlugin',
+        plugin: function plugin() {
+          return options && options.allowInlineCursorTarget ? inlineCursorTargetPlugin() : undefined;
+        }
+      });
       plugins.push({
         name: 'focusHandlerPlugin',
         plugin: function plugin(_ref2) {

package/dist/esm/plugins/base/pm-plugins/better-type-history.js

@@ -4,6 +4,7 @@ import { Fragment } from 'prosemirror-model';
 import { closeHistory } from 'prosemirror-history';
 import { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';
 import { PluginKey } from 'prosemirror-state';
+import { extractSliceFromStep } from '../../../utils/step';
 
 var getEnterKeyboardActionStep = function getEnterKeyboardActionStep(trs) {
   var firstTr = trs.length === 1 && trs[0];
@@ -25,17 +26,6 @@ var getEnterKeyboardActionStep = function getEnterKeyboardActionStep(trs) {
   return replaceSteps[0];
 };
 
-var extractSliceFromStep = function extractSliceFromStep(step) {
-  if (!(step instanceof ReplaceStep) && !(step instanceof ReplaceAroundStep)) {
-    return null;
-  } // @ts-ignore This is by design. Slice is a private property, but accesible, from ReplaceStep.
-  // However, we need to read it to found if the step was adding a newline
-
-
-  var slice = step.slice;
-  return slice;
-};
-
 var isSliceSplittingBlockNode = function isSliceSplittingBlockNode(slice) {
   var hasOnlyTwoChildren = slice.size > 1 && slice.content.childCount === 2;
 

package/dist/esm/plugins/base/pm-plugins/inline-cursor-target.js

@@ -1,7 +1,7 @@
 import { DecorationSet, Decoration } from 'prosemirror-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
-import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/utils';
+import { ZERO_WIDTH_SPACE, browser } from '@atlaskit/editor-common/utils';
 import { isTextSelection } from '../../../utils';
 export var inlineCursorTargetStateKey = new PluginKey('inlineCursorTargetPlugin');
 export var isInlineNodeView = function isInlineNodeView(node) {
@@ -20,13 +20,35 @@ export default (function () {
         var selection = tr.selection,
             doc = tr.doc;
         var $from = selection.$from,
-            $to = selection.$to;
-
-        if (selection && isTextSelection(selection)) {
+            $to = selection.$to; // In Safari, if the cursor target is to the right of the cursor it will block selections
+        // made with shift + arrowRight and vice versa for shift + arrowLeft. This is due to a
+        // contenteditable bug in safari, where editable elements block the selection but we need
+        // the cursor target to be editable for the following:
+        // - Ability to navigate with down/up arrows when between inline nodes
+        // - Ability to navigate with down/up arrows when between the start of a paragraph & an inline node
+        // - Ability to click and drag to select an inline node if it is the first node
+        // To prevent blocking the selection, we check handleDOMEvents and add meta to
+        // the transaction to prevent the plugin from making cursor target decorations.
+
+        var safariShiftSelection = tr.getMeta(inlineCursorTargetStateKey);
+
+        if (selection && isTextSelection(selection) && !safariShiftSelection) {
           var hasInlineNodeViewAfter = isInlineNodeView($from.nodeAfter);
           var hasInlineNodeViewBefore = isInlineNodeView($from.nodeBefore);
-          var isAtStart = $from.parentOffset === 0 && isInlineNodeView($from.nodeAfter);
-          var isAtEnd = doc.resolve($from.pos).node().lastChild === $from.nodeBefore && isInlineNodeView($from.nodeBefore); // Create editable decoration widgets either side of the cursor to allow
+          var isAtStartAndInlineNodeViewAfter = $from.parentOffset === 0 && isInlineNodeView($from.nodeAfter);
+          var isAtEndAndInlineNodeViewBefore = doc.resolve($from.pos).node().lastChild === $from.nodeBefore && isInlineNodeView($from.nodeBefore);
+
+          var createWidget = function createWidget(side) {
+            var node = document.createElement('span');
+            node.contentEditable = 'true';
+            node.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
+            node.className = 'cursor-target';
+            return Decoration.widget(selection.from, node, {
+              raw: true,
+              side: side === 'left' ? -1 : 1,
+              key: 'inlineCursor'
+            });
+          }; // Create editable decoration widgets either side of the cursor to allow
           // text input.
           // We check beforeInput events below to prevent content
           // being added to the decorations.
@@ -37,18 +59,8 @@ export default (function () {
           // - positioned between the beginning of another node and an inline node (firefox)
           // - positioned between an inline node and the end of a node (chrome)
 
-          if ((hasInlineNodeViewAfter || isAtEnd) && (hasInlineNodeViewBefore || isAtStart)) {
-            var createWidget = function createWidget(side) {
-              var node = document.createElement('span');
-              node.contentEditable = 'true';
-              node.appendChild(document.createTextNode(ZERO_WIDTH_SPACE));
-              return Decoration.widget(selection.from, node, {
-                raw: true,
-                side: side === 'left' ? -1 : 1,
-                key: 'inlineCursor'
-              });
-            };
 
+          if (!browser.safari && (hasInlineNodeViewAfter || isAtEndAndInlineNodeViewBefore) && (hasInlineNodeViewBefore || isAtStartAndInlineNodeViewAfter)) {
             return {
               cursorTarget: {
                 decorations: [createWidget('left'), createWidget('right')],
@@ -58,6 +70,34 @@ export default (function () {
                 }
               }
             };
+          } // Only create one widget on the left or right of the cursor in Safari.
+          // This is to prevent the left key from being blocked when at the start of a paragraph,
+          // and the right key from being blocked when at the end of a paragraph. This also
+          // improves click and drag selections, making it easier to select the first node.
+
+
+          if (browser.safari) {
+            if (isAtEndAndInlineNodeViewBefore || hasInlineNodeViewBefore && hasInlineNodeViewAfter) {
+              return {
+                cursorTarget: {
+                  decorations: [createWidget('left')],
+                  positions: {
+                    from: $from.pos,
+                    to: $to.pos
+                  }
+                }
+              };
+            } else if (isAtStartAndInlineNodeViewAfter) {
+              return {
+                cursorTarget: {
+                  decorations: [createWidget('right')],
+                  positions: {
+                    from: $from.pos,
+                    to: $to.pos
+                  }
+                }
+              };
+            }
           }
         }
 
@@ -80,6 +120,21 @@ export default (function () {
         return null;
       },
       handleDOMEvents: {
+        // Workaround to prevent the decorations created by the plugin from
+        // blocking shift + arrow left/right selections in safari. When
+        // a shift + arrow left/right event is detected, send meta data to the
+        // plugin to prevent it from creating decorations.
+        // TODO We may be able to remove this when playing the following ticket:
+        // https://product-fabric.atlassian.net/browse/ED-14938
+        keydown: function keydown(view, event) {
+          if (browser.safari && event instanceof KeyboardEvent && event.shiftKey && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+            view.dispatch(view.state.tr.setMeta(inlineCursorTargetStateKey, {
+              cursorTarget: undefined
+            }));
+          }
+
+          return false;
+        },
         // Check the DOM to see if there are inline cursor targets
         // after a composition event ends. If so, manually insert the
         // event data in order to prevent contents ending up inside