@atlaskit/editor-core 162.0.0 → 164.0.0

package/dist/es2019/ui/styles.js

@@ -1,9 +1,9 @@
-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';
 const akGridSize = gridSize() + 'px';
-export const ButtonGroup = styled.span`
+export const buttonGroupStyle = css`
   display: inline-flex;
   align-items: center;
 
@@ -11,14 +11,14 @@ export const ButtonGroup = styled.span`
     display: flex;
   }
 `;
-export const Separator = styled.span`
+export const separatorStyles = css`
   background: ${N30};
   width: 1px;
   height: 24px;
   display: inline-block;
   margin: 0 8px;
 `;
-export const Wrapper = styled.span`
+export const wrapperStyle = css`
   display: flex;
   align-items: center;
 
@@ -30,34 +30,38 @@ export const Wrapper = styled.span`
   > div > div {
     display: flex;
   }
-  margin-left: ${({
-  isSmall
-}) => isSmall ? 4 : 0}px;
-  min-width: ${({
-  isSmall
-}) => isSmall ? '40px' : 'auto'};
+
+  margin-left: 0;
+  min-width: auto;
+`;
+export const wrapperSmallStyle = css`
+  margin-left: 4px;
+  min-width: 40px;
 `;
-export const ExpandIconWrapper = styled.span`
+export const expandIconWrapperStyle = css`
   margin-left: -8px;
 `;
-export const TriggerWrapper = styled.div`
+export const triggerWrapperStyles = css`
   display: flex;
 `;
-export const MenuWrapper = Wrapper;
-export const ButtonContent = styled.span`
+export const buttonContentStyle = css`
   display: flex;
   min-width: 80px;
   align-items: center;
   overflow: hidden;
   justify-content: center;
   flex-direction: column;
-  padding: 0 ${props => props.spacing === 'none' ? '8px' : '6px'};
+  padding: 6px;
+`;
+export const buttonContentReducedSpacingStyle = css`
+  padding: 8px;
 `; // Taken from the style of inline dialog components
 
 export const dropShadow = css`
   box-shadow: 0 0 1px rgba(9, 30, 66, 0.31),
     0 4px 8px -2px rgba(9, 30, 66, 0.25);
-`;
+`; // TODO change to use emotion css
+
 export const scrollbarStyles = `
   -ms-overflow-style: -ms-autohiding-scrollbar;
 
@@ -83,7 +87,7 @@ export const scrollbarStyles = `
     background-color: rgba(0, 0, 0, 0.4);
   }
 `;
-export const Shortcut = styled.div`
+export const shortcutStyle = css`
   background-color: rgba(223, 225, 229, 0.5); /* N60 at 50% */
   color: ${N100};
   border-radius: ${borderRadius()}px;
@@ -95,11 +99,11 @@ export const Shortcut = styled.div`
     display: none;
   }
 `;
-export const ClickSelectWrapper = styled.span`
+export const clickSelectWrapperStyle = css`
   user-select: all;
 `;
-export const CellColourPreview = styled.div`
+export const cellColourPreviewStyles = selectedColor => css`
   &::before {
-    background: ${props => props.selectedColor};
+    background: ${selectedColor};
   }
 `;

package/dist/es2019/utils/insert.js

@@ -47,6 +47,8 @@ const shouldSplit = (nodeType, schemaNodes) => {
 };
 
 export const safeInsert = (content, position) => tr => {
+  var _tr$selection$$from$n;
+
   const {
     nodes
   } = tr.doc.type.schema;
@@ -85,6 +87,14 @@ export const safeInsert = (content, position) => tr => {
     }
   }
 
+  const grandParentType = (_tr$selection$$from$n = tr.selection.$from.node(-1)) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type;
+  const 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;
@@ -177,4 +187,14 @@ export const insertSelectedItem = (maybeNode, opts = {}) => (state, tr, start) =
   }
 
   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 const shouldSplitSelectedNodeOnNodeInsertion = (parentNodeType, grandParentNodeType, content) => {
+  if (parentNodeType.name === 'paragraph' && grandParentNodeType.validContent(Fragment.from(content))) {
+    return true;
+  }
+
+  return false;
 };

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

@@ -0,0 +1,37 @@
+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) {
+  const debouncedHandleAnalyticsEvent = useMemo(() => debounce(props.handleAnalyticsEvent, 500), [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: ({
+      renderCount,
+      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/es2019/utils/prosemirror/autojoin.js

@@ -0,0 +1,70 @@
+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)) {
+    let types = isJoinable;
+
+    isJoinable = node => types.indexOf(node.type.name) > -1;
+  }
+
+  const ranges = [];
+
+  for (let i = 0; i < tr.mapping.maps.length; i++) {
+    const map = tr.mapping.maps[i];
+
+    for (let j = 0; j < ranges.length; j++) {
+      ranges[j] = map.map(ranges[j]);
+    }
+
+    map.forEach((_s, _e, from, to) => ranges.push(from, to));
+  } // Figure out which joinable points exist inside those ranges,
+  // by checking all node boundaries in their parent nodes.
+
+
+  const joinable = [];
+
+  for (let i = 0; i < ranges.length; i += 2) {
+    const from = ranges[i];
+    const to = ranges[i + 1];
+    const $from = tr.doc.resolve(from);
+    const depth = $from.sharedDepth(to);
+    const parent = $from.node(depth);
+
+    for (let index = $from.indexAfter(depth), pos = $from.after(depth + 1); pos <= to; ++index) {
+      const after = parent.maybeChild(index);
+
+      if (!after) {
+        break;
+      }
+
+      if (index && joinable.indexOf(pos) === -1) {
+        const before = parent.child(index - 1);
+
+        if (before.type === after.type && isJoinable(before, after)) {
+          joinable.push(pos);
+        }
+      }
+
+      pos += after.nodeSize;
+    }
+  } // Join the joinable points
+
+
+  joinable.sort((a, b) => a - b);
+
+  for (let i = joinable.length - 1; i >= 0; i--) {
+    if (canJoin(tr.doc, joinable[i])) {
+      tr.join(joinable[i]);
+    }
+  }
+}

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "162.0.0";
+export const version = "164.0.0";
 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": "162.0.0",
+	"version": "164.0.0",
 	"sideEffects": false
 }

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

@@ -21,7 +21,7 @@ import uuid from 'uuid';
 import memoizeOne from 'memoize-one';
 import { sniffUserBrowserExtensions } from '@atlaskit/editor-common/utils';
 import { ExperienceStore } from '@atlaskit/editor-common/ufo';
-import { IntlNextErrorBoundary } from '@atlaskit/editor-common/ui';
+import { IntlErrorBoundary } from '@atlaskit/editor-common/ui';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../plugins/analytics';
 import { editorAnalyticsChannel } from '../plugins/analytics/consts';
 import { getFeatureFlags } from '../plugins/feature-flags-context';
@@ -248,7 +248,7 @@ export var ErrorBoundaryWithEditorView = /*#__PURE__*/function (_React$Component
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(IntlNextErrorBoundary, null, this.props.children);
+      return /*#__PURE__*/React.createElement(IntlErrorBoundary, null, this.props.children);
     }
   }]);
 

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

@@ -26,7 +26,7 @@ import { ExperienceStore, EditorExperience, RELIABILITY_INTERVAL } from '@atlask
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
 import { processRawValue } from '../utils';
 import { freezeUnsafeTransactionProperties } from '../utils/performance/safer-transactions';
-import { RenderTracking } from '../utils/react-hooks/use-component-renderer-tracking';
+import { RenderTracking } from '../utils/performance/components/RenderTracking';
 import { findChangedNodesFromTransaction, validateNodes, validNode } from '../utils/nodes';
 import createPluginList from './create-plugins-list';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, FULL_WIDTH_MODE, getAnalyticsEventsFromTransaction, PLATFORMS } from '../plugins/analytics';

package/dist/esm/editor.js

@@ -19,15 +19,16 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-import React from 'react';
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import memoizeOne from 'memoize-one';
 import uuid from 'uuid/v4';
 import { name, version } from './version-wrapper';
 import { combineExtensionProviders } from '@atlaskit/editor-common/extensions';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { BaseTheme, WithCreateAnalyticsEvent, WidthProvider, LegacyToNextIntlProvider, IntlLegacyFallbackProvider } from '@atlaskit/editor-common/ui';
+import { BaseTheme, WithCreateAnalyticsEvent, WidthProvider } from '@atlaskit/editor-common/ui';
 import { getAnalyticsAppearance, startMeasure, stopMeasure, clearMeasure, measureTTI, getTTISeverity } from '@atlaskit/editor-common/utils';
 import { EditorExperience, ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { akEditorFullPageDefaultFontSize } from '@atlaskit/editor-shared-styles';
@@ -44,8 +45,8 @@ import { combineQuickInsertProviders, extensionProviderToQuickInsertProvider } f
 import { fireAnalyticsEvent, EVENT_TYPE, ACTION_SUBJECT, ACTION } from './plugins/analytics';
 import ErrorBoundary from './create-editor/ErrorBoundary';
 import { createFeatureFlagsFromProps } from './plugins/feature-flags-context/feature-flags-from-props';
-import { RenderTracking } from './utils/react-hooks/use-component-renderer-tracking';
-var WidthProviderFullHeight = styled(WidthProvider)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n"])));
+import { RenderTracking } from './utils/performance/components/RenderTracking';
+var fullHeight = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 100%;\n"])));
 
 var Editor = /*#__PURE__*/function (_React$Component) {
   _inherits(Editor, _React$Component);
@@ -517,7 +518,7 @@ var Editor = /*#__PURE__*/function (_React$Component) {
       var renderTracking = (_this$props$performan = this.props.performanceTracking) === null || _this$props$performan === void 0 ? void 0 : (_this$props$performan2 = _this$props$performan.renderTracking) === null || _this$props$performan2 === void 0 ? void 0 : _this$props$performan2.editor;
       var renderTrackingEnabled = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.enabled;
       var useShallow = renderTracking === null || renderTracking === void 0 ? void 0 : renderTracking.useShallow;
-      var editor = /*#__PURE__*/React.createElement(FabricEditorAnalyticsContext, {
+      return jsx(FabricEditorAnalyticsContext, {
         data: {
           packageName: name,
           packageVersion: version,
@@ -525,25 +526,27 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           appearance: getAnalyticsAppearance(this.props.appearance),
           editorSessionId: this.editorSessionId
         }
-      }, /*#__PURE__*/React.createElement(WithCreateAnalyticsEvent, {
+      }, jsx(WithCreateAnalyticsEvent, {
         render: function render(createAnalyticsEvent) {
-          return (_this5.createAnalyticsEvent = createAnalyticsEvent) && /*#__PURE__*/React.createElement(React.Fragment, null, renderTrackingEnabled && /*#__PURE__*/React.createElement(RenderTracking, {
+          return (_this5.createAnalyticsEvent = createAnalyticsEvent) && jsx(Fragment, null, renderTrackingEnabled && jsx(RenderTracking, {
             componentProps: _this5.props,
             action: ACTION.RE_RENDERED,
             actionSubject: ACTION_SUBJECT.EDITOR,
             handleAnalyticsEvent: _this5.handleAnalyticsEvent,
             propsToIgnore: ['defaultValue'],
             useShallow: useShallow
-          }), /*#__PURE__*/React.createElement(ErrorBoundary, {
+          }), jsx(ErrorBoundary, {
             createAnalyticsEvent: createAnalyticsEvent,
             contextIdentifierProvider: _this5.props.contextIdentifierProvider
-          }, /*#__PURE__*/React.createElement(WidthProviderFullHeight, null, /*#__PURE__*/React.createElement(EditorContext, {
+          }, jsx(WidthProvider, {
+            css: fullHeight
+          }, jsx(EditorContext, {
             editorActions: _this5.editorActions
-          }, /*#__PURE__*/React.createElement(ContextAdapter, null, /*#__PURE__*/React.createElement(PortalProvider, {
+          }, jsx(ContextAdapter, null, jsx(PortalProvider, {
             onAnalyticsEvent: _this5.handleAnalyticsEvent,
             useAnalyticsContext: _this5.props.UNSAFE_useAnalyticsContext,
             render: function render(portalProviderAPI) {
-              return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactEditorView, {
+              return jsx(Fragment, null, jsx(ReactEditorView, {
                 editorProps: overriddenEditorProps,
                 createAnalyticsEvent: createAnalyticsEvent,
                 portalProviderAPI: portalProviderAPI,
@@ -560,10 +563,10 @@ var Editor = /*#__PURE__*/function (_React$Component) {
                       eventDispatcher = _ref3.eventDispatcher,
                       config = _ref3.config,
                       dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
-                  return /*#__PURE__*/React.createElement(BaseTheme, {
+                  return jsx(BaseTheme, {
                     dynamicTextSizing: _this5.props.allowDynamicTextSizing && _this5.props.appearance !== 'full-width',
                     baseFontSize: _this5.getBaseFontSize()
-                  }, /*#__PURE__*/React.createElement(Component, {
+                  }, jsx(Component, {
                     appearance: _this5.props.appearance,
                     disabled: _this5.props.disabled,
                     editorActions: _this5.editorActions,
@@ -588,21 +591,19 @@ var Editor = /*#__PURE__*/function (_React$Component) {
                     customSecondaryToolbarComponents: _this5.props.secondaryToolbarComponents,
                     contextPanel: _this5.props.contextPanel,
                     collabEdit: _this5.props.collabEdit,
-                    allowAnnotation: !!_this5.props.annotationProviders,
                     persistScrollGutter: _this5.props.persistScrollGutter,
                     enableToolbarMinWidth: ((_this5$props$featureF = _this5.props.featureFlags) === null || _this5$props$featureF === void 0 ? void 0 : _this5$props$featureF.toolbarMinWidthOverflow) != null ? !!((_this5$props$featureF2 = _this5.props.featureFlags) !== null && _this5$props$featureF2 !== void 0 && _this5$props$featureF2.toolbarMinWidthOverflow) : _this5.props.UNSAFE_allowUndoRedoButtons,
                     useStickyToolbar: _this5.props.useStickyToolbar,
                     featureFlags: featureFlags
                   }));
                 }
-              }), /*#__PURE__*/React.createElement(PortalRenderer, {
+              }), jsx(PortalRenderer, {
                 portalProviderAPI: portalProviderAPI
               }));
             }
           }))))));
         }
       }));
-      return /*#__PURE__*/React.createElement(LegacyToNextIntlProvider, null, /*#__PURE__*/React.createElement(IntlLegacyFallbackProvider, null, editor));
     }
   }]);
 

package/dist/esm/i18n/cs.js

@@ -209,7 +209,7 @@ export default {
   'fabric.editor.notePanel': 'Panel poznámek',
   'fabric.editor.notePanel.description': 'Přidat poznámku do barevného panelu',
   'fabric.editor.numberedColumn': 'Číslovaný sloupec',
-  'fabric.editor.off': '{formattingType} vypnuto',
+  'fabric.editor.off': 'Formátování {formattingType} vypnuto',
   'fabric.editor.on': '{formattingType} zapnuto',
   'fabric.editor.orderedList': 'Číslovaný seznam',
   'fabric.editor.orderedList.description': 'Vytvořit seřazený seznam',

package/dist/esm/i18n/de.js

@@ -9,12 +9,12 @@ export default {
   'fabric.editor.action': 'Aufgabe',
   'fabric.editor.action.description': 'Aufgaben erstellen und zuweisen',
   'fabric.editor.addAltText': 'Alternativtext',
-  'fabric.editor.alignCenter': 'None',
+  'fabric.editor.alignCenter': 'Mittig ausrichten',
   'fabric.editor.alignImageCenter': 'Mittig ausrichten',
   'fabric.editor.alignImageLeft': 'Links ausrichten',
   'fabric.editor.alignImageRight': 'Rechts ausrichten',
   'fabric.editor.alignLeft': 'Links ausrichten',
-  'fabric.editor.alignRight': 'None',
+  'fabric.editor.alignRight': 'Rechts ausrichten',
   'fabric.editor.alignment': 'Textausrichtung',
   'fabric.editor.altText': 'Alternativer Text',
   'fabric.editor.alttext.validation': 'Bitte entfernen Sie jegliche Sonderzeichen in alternativem Text.',
@@ -277,7 +277,7 @@ export default {
   'fabric.editor.tooltip.nestedExpand': 'eine verschachtelte Erweiterung',
   'fabric.editor.tooltip.taskList': 'eine Aufgabe',
   'fabric.editor.twoColumns': 'Zwei Spalten',
-  'fabric.editor.typeAheadResultLabel': 'TypeAhead-Ergebnisse',
+  'fabric.editor.typeAheadResultLabel': 'Vorschlagsfunktion-Ergebnisse',
   'fabric.editor.unableToOpenLink': 'Dieser Link konnte nicht geöffnet werden.',
   'fabric.editor.underline': 'Unterstrichen',
   'fabric.editor.undo': 'Rückgängig',