@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/esm/ui/WithFlash/index.js

@@ -7,20 +7,20 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+/** @jsx jsx */
 import React from 'react';
-import styled, { keyframes } from 'styled-components';
+import { css, jsx, keyframes } from '@emotion/react';
 import { R100 } from '@atlaskit/theme/colors';
 var pulseBackground = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  50% {\n    background-color: ", ";\n  }\n"])), R100);
 var pulseBackgroundReverse = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    background-color: ", ";\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), R100, R100);
-var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &.-flash > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n\n  & > div {\n    animation: ", ";\n  }\n"])), pulseBackgroundReverse, function (props) {
-  return props.animate ? ".25s ease-in-out ".concat(pulseBackground) : 'none';
-});
+var flashWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  &.-flash > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n\n  & > div {\n    animation: 'none';\n  }\n"])), pulseBackgroundReverse);
+var flashWrapperAnimated = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n\n  & > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n"])), flashWrapper, pulseBackground);
 
 var WithFlash = /*#__PURE__*/function (_React$Component) {
   _inherits(WithFlash, _React$Component);
@@ -50,9 +50,9 @@ var WithFlash = /*#__PURE__*/function (_React$Component) {
           animate = _this$props.animate,
           children = _this$props.children;
       this.toggle = animate && !this.toggle;
-      return /*#__PURE__*/React.createElement(Wrapper, {
-        className: this.toggle ? '-flash' : '',
-        animate: animate
+      return jsx("div", {
+        css: animate ? flashWrapperAnimated : flashWrapper,
+        className: this.toggle ? '-flash' : ''
       }, children);
     }
   }]);

package/dist/esm/ui/styles.js

@@ -1,32 +1,26 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize, borderRadius } from '@atlaskit/theme/constants';
 import { N30, N100 } from '@atlaskit/theme/colors';
 import { akEditorMobileMaxWidth, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 var akGridSize = gridSize() + 'px';
-export var ButtonGroup = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
-export var Separator = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), N30);
-export var Wrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n  margin-left: ", "px;\n  min-width: ", ";\n"])), function (_ref) {
-  var isSmall = _ref.isSmall;
-  return isSmall ? 4 : 0;
-}, function (_ref2) {
-  var isSmall = _ref2.isSmall;
-  return isSmall ? '40px' : 'auto';
-});
-export var ExpandIconWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: -8px;\n"])));
-export var TriggerWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
-export var MenuWrapper = Wrapper;
-export var ButtonContent = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  flex-direction: column;\n  padding: 0 ", ";\n"])), function (props) {
-  return props.spacing === 'none' ? '8px' : '6px';
-}); // Taken from the style of inline dialog components
+export var buttonGroupStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n\n  & > div {\n    display: flex;\n  }\n"])));
+export var separatorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: ", ";\n  width: 1px;\n  height: 24px;\n  display: inline-block;\n  margin: 0 8px;\n"])), N30);
+export var wrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > div,\n  > span {\n    display: flex;\n  }\n\n  > div > div {\n    display: flex;\n  }\n\n  margin-left: 0;\n  min-width: auto;\n"])));
+export var wrapperSmallStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-left: 4px;\n  min-width: 40px;\n"])));
+export var expandIconWrapperStyle = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: -8px;\n"])));
+export var triggerWrapperStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+export var buttonContentStyle = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  min-width: 80px;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  flex-direction: column;\n  padding: 6px;\n"])));
+export var buttonContentReducedSpacingStyle = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 8px;\n"]))); // Taken from the style of inline dialog components
+
+export var dropShadow = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n"]))); // TODO change to use emotion css
 
-export var dropShadow = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),\n    0 4px 8px -2px rgba(9, 30, 66, 0.25);\n"])));
 export var scrollbarStyles = "\n  -ms-overflow-style: -ms-autohiding-scrollbar;\n\n  &::-webkit-scrollbar {\n    height: ".concat(akGridSize, ";\n    width: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-corner {\n    display: none;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-color: rgba(0, 0, 0, 0);\n  }\n\n  &:hover::-webkit-scrollbar-thumb {\n    background-color: rgba(0, 0, 0, 0.2);\n    border-radius: ").concat(akGridSize, ";\n  }\n\n  &::-webkit-scrollbar-thumb:hover {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n");
-export var Shortcut = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), N100, borderRadius(), relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);
-export var ClickSelectWrapper = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  user-select: all;\n"])));
-export var CellColourPreview = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), function (props) {
-  return props.selectedColor;
-});
+export var shortcutStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: rgba(223, 225, 229, 0.5); /* N60 at 50% */\n  color: ", ";\n  border-radius: ", "px;\n  padding: 4px;\n  line-height: 12px;\n  font-size: ", ";\n  align-self: flex-end;\n  @media (max-width: ", "px) {\n    display: none;\n  }\n"])), N100, borderRadius(), relativeFontSizeToBase16(11.67), akEditorMobileMaxWidth);
+export var clickSelectWrapperStyle = css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  user-select: all;\n"])));
+export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedColor) {
+  return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  &::before {\n    background: ", ";\n  }\n"])), selectedColor);
+};

package/dist/esm/utils/insert.js

@@ -50,6 +50,8 @@ var shouldSplit = function shouldSplit(nodeType, schemaNodes) {
 
 export var safeInsert = function safeInsert(content, position) {
   return function (tr) {
+    var _tr$selection$$from$n;
+
     var nodes = tr.doc.type.schema.nodes;
     var whitelist = [nodes.rule, nodes.mediaSingle]; // fallback if the node to insert is not in the whitelist, or if the insertion should happen within a list.
 
@@ -84,6 +86,14 @@ export var safeInsert = function safeInsert(content, position) {
       }
     }
 
+    var grandParentType = (_tr$selection$$from$n = tr.selection.$from.node(-1)) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type;
+    var parentType = tr.selection.$from.parent.type;
+
+    if (!lookDirection && !shouldSplitSelectedNodeOnNodeInsertion(parentType, grandParentType, content)) {
+      // node to be inserted is an invalid child of selection so insert below selected node
+      return pmSafeInsert(content, tr.selection.from)(tr);
+    }
+
     if (!lookDirection) {
       // fallback to consumer for now
       return null;
@@ -180,4 +190,14 @@ export var insertSelectedItem = function insertSelectedItem(maybeNode) {
 
     return tr;
   };
+}; // ED-14584: Util to check if the current node is a paragraph & the content being
+// inserted is a valid child of the grandparent node
+// In this case, the node being inserted to should split
+
+export var shouldSplitSelectedNodeOnNodeInsertion = function shouldSplitSelectedNodeOnNodeInsertion(parentNodeType, grandParentNodeType, content) {
+  if (parentNodeType.name === 'paragraph' && grandParentNodeType.validContent(Fragment.from(content))) {
+    return true;
+  }
+
+  return false;
 };

package/dist/esm/utils/performance/components/RenderTracking.js

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import debounce from 'lodash/debounce';
+import { useComponentRenderTracking } from '@atlaskit/editor-common/utils';
+import { EVENT_TYPE } from '../../../plugins/analytics';
+export function RenderTracking(props) {
+  var debouncedHandleAnalyticsEvent = useMemo(function () {
+    return debounce(props.handleAnalyticsEvent, 500);
+  }, [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: function onRender(_ref) {
+      var renderCount = _ref.renderCount,
+          propsDifference = _ref.propsDifference;
+
+      if (!renderCount) {
+        return;
+      }
+
+      debouncedHandleAnalyticsEvent({
+        payload: {
+          action: props.action,
+          actionSubject: props.actionSubject,
+          attributes: {
+            count: renderCount,
+            propsDifference: propsDifference
+          },
+          eventType: EVENT_TYPE.OPERATIONAL
+        }
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
+  return null;
+}

package/dist/esm/utils/prosemirror/autojoin.js

@@ -0,0 +1,76 @@
+import { canJoin } from 'prosemirror-transform';
+/**
+ * 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 or,
+ * if an array of strings was passed, if their node type name is in that array.
+ *
+ * Adapted from https://github.com/ProseMirror/prosemirror-commands/blob/master/src/commands.js#L597-L610
+ */
+
+export function autoJoinTr(tr, isJoinable) {
+  if (Array.isArray(isJoinable)) {
+    var types = isJoinable;
+
+    isJoinable = function isJoinable(node) {
+      return types.indexOf(node.type.name) > -1;
+    };
+  }
+
+  var ranges = [];
+
+  for (var i = 0; i < tr.mapping.maps.length; i++) {
+    var map = tr.mapping.maps[i];
+
+    for (var j = 0; j < ranges.length; j++) {
+      ranges[j] = map.map(ranges[j]);
+    }
+
+    map.forEach(function (_s, _e, from, to) {
+      return ranges.push(from, to);
+    });
+  } // Figure out which joinable points exist inside those ranges,
+  // by checking all node boundaries in their parent nodes.
+
+
+  var joinable = [];
+
+  for (var _i = 0; _i < ranges.length; _i += 2) {
+    var from = ranges[_i];
+    var to = ranges[_i + 1];
+    var $from = tr.doc.resolve(from);
+    var depth = $from.sharedDepth(to);
+    var parent = $from.node(depth);
+
+    for (var index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
+      var _after = parent.maybeChild(index);
+
+      if (!_after) {
+        break;
+      }
+
+      if (index && joinable.indexOf(pos) === -1) {
+        var _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(function (a, b) {
+    return a - b;
+  });
+
+  for (var _i2 = joinable.length - 1; _i2 >= 0; _i2--) {
+    if (canJoin(tr.doc, joinable[_i2])) {
+      tr.join(joinable[_i2]);
+    }
+  }
+}

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "162.0.2";
+export var version = "164.0.1";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

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

package/dist/types/commands/index.d.ts

@@ -1,6 +1,7 @@
 import { Node as PMNode, NodeType, MarkType, Schema } from 'prosemirror-model';
 import { EditorState, Transaction } from 'prosemirror-state';
 import { Command } from '../types';
+import { AlignmentState } from '../plugins/alignment/pm-plugins/types';
 export declare function preventDefault(): Command;
 export declare function insertNewLine(): Command;
 export declare const insertNewLineWithAnalytics: Command;
@@ -9,7 +10,7 @@ export declare const createNewParagraphBelow: Command;
 export declare function createParagraphNear(append?: boolean): Command;
 export declare function addParagraphAtEnd(tr: Transaction): void;
 export declare function createParagraphAtEnd(): Command;
-export declare const changeImageAlignment: (align?: "center" | "start" | "end" | undefined) => Command;
+export declare const changeImageAlignment: (align?: AlignmentState | undefined) => Command;
 export declare const createToggleBlockMarkOnRange: <T = object>(markType: MarkType, getAttrs: (prevAttrs?: T | undefined, node?: PMNode<any> | undefined) => false | T | undefined, allowedBlocks?: NodeType<any>[] | ((schema: Schema, node: PMNode, parent: PMNode) => boolean) | undefined) => (from: number, to: number, tr: Transaction, state: EditorState) => boolean;
 /**
  * Toggles block mark based on the return type of `getAttrs`.

package/dist/types/create-editor/ErrorBoundary.d.ts

@@ -38,5 +38,5 @@ export declare class ErrorBoundaryWithEditorView extends React.Component<ErrorBo
     componentDidMount(): Promise<void>;
     render(): JSX.Element;
 }
-declare const _default: React.ComponentType<Pick<ErrorBoundaryProps, "contextIdentifierProvider" | "children" | "createAnalyticsEvent" | "rethrow">>;
+declare const _default: React.ComponentType<Omit<ErrorBoundaryProps, "editorView">>;
 export default _default;

package/dist/types/create-editor/ReactEditorView.d.ts

@@ -59,7 +59,7 @@ export declare class ReactEditorView<T = {}> extends React.Component<EditorViewP
     validTransactionCount: number;
     experienceStore?: ExperienceStore;
     static contextTypes: {
-        getAtlaskitAnalyticsEventHandlers: PropTypes.Requireable<any>;
+        getAtlaskitAnalyticsEventHandlers: PropTypes.Requireable<(...args: any[]) => any>;
     };
     private canDispatchTransactions;
     private focusTimeoutId?;

package/dist/types/create-editor/WithEditorView.d.ts

@@ -3,4 +3,4 @@ import { EditorView } from 'prosemirror-view';
 export interface WithEditorViewInternalProps {
     editorView?: EditorView | undefined;
 }
-export declare const WithEditorView: <P extends WithEditorViewInternalProps>(WrappedComponent: React.ComponentType<P>) => React.ComponentType<Pick<P, Exclude<keyof P, "editorView">>>;
+export declare const WithEditorView: <P extends WithEditorViewInternalProps>(WrappedComponent: React.ComponentType<P>) => React.ComponentType<Omit<P, "editorView">>;

package/dist/types/editor.d.ts

@@ -1,14 +1,16 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import PropTypes from 'prop-types';
 import { EditorView } from 'prosemirror-view';
-import { IntlShape } from 'react-intl';
+import type { IntlShape } from 'react-intl-next';
 import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
 import { Transformer } from '@atlaskit/editor-common/types';
 import EditorActions from './actions';
-import { EditorProps } from './types/editor-props';
+import { EditorProps, ExtensionProvidersProp } from './types/editor-props';
 import { EventDispatcher } from './event-dispatcher';
 import { FireAnalyticsCallback } from './plugins/analytics';
-import { QuickInsertProvider } from './plugins/quick-insert/types';
+import { QuickInsertProvider, QuickInsertOptions } from './plugins/quick-insert/types';
 export type { AllowedBlockTypes, Command, CommandDispatch, DomAtPos, EditorAppearance, EditorAppearanceComponentProps, EditorConfig, EditorInstance, EditorPlugin, EditorProps, ExtensionProvidersProp, ExtensionConfig, FeedbackInfo, MarkConfig, MessageDescriptor, NodeConfig, NodeViewConfig, PMPlugin, PMPluginCreateConfig, PMPluginFactory, PMPluginFactoryParams, PluginsOptions, ReactComponents, ToolbarUIComponentFactory, ToolbarUiComponentFactoryParams, UIComponentFactory, UiComponentFactoryParams, } from './types';
 declare type Context = {
     editorActions?: EditorActions;
@@ -21,7 +23,7 @@ declare type State = {
 export default class Editor extends React.Component<EditorProps, State> {
     static defaultProps: EditorProps;
     static contextTypes: {
-        editorActions: PropTypes.Requireable<any>;
+        editorActions: PropTypes.Requireable<object>;
     };
     private providerFactory;
     private editorActions;
@@ -50,10 +52,8 @@ export default class Editor extends React.Component<EditorProps, State> {
             };
         } | undefined;
     };
-    prepareExtensionProvider: import("memoize-one").MemoizedFn<(extensionProviders?: (ExtensionProvider<any> | Promise<ExtensionProvider<any>>)[] | ((editorActions?: EditorActions<any> | undefined) => (ExtensionProvider<any> | Promise<ExtensionProvider<any>>)[]) | undefined) => ExtensionProvider<any> | undefined>;
-    prepareQuickInsertProvider: (extensionProvider?: ExtensionProvider<any> | undefined, quickInsert?: boolean | {
-        provider: Promise<QuickInsertProvider>;
-    } | undefined) => Promise<QuickInsertProvider> | undefined;
+    prepareExtensionProvider: import("memoize-one").MemoizedFn<(extensionProviders?: ExtensionProvidersProp | undefined) => ExtensionProvider<any> | undefined>;
+    prepareQuickInsertProvider: (extensionProvider?: ExtensionProvider<any> | undefined, quickInsert?: QuickInsertOptions | undefined) => Promise<QuickInsertProvider> | undefined;
     onEditorCreated(instance: {
         view: EditorView;
         eventDispatcher: EventDispatcher;
@@ -71,5 +71,5 @@ export default class Editor extends React.Component<EditorProps, State> {
     private getBaseFontSize;
     handleSave: (view: EditorView) => void;
     handleAnalyticsEvent: FireAnalyticsCallback;
-    render(): JSX.Element;
+    render(): jsx.JSX.Element;
 }