@atlaskit/editor-core 150.0.0 → 151.0.0

package/dist/cjs/profiler/render-count.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RenderCountProfiler = exports.ProfiledComponentIds = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _uuid = _interopRequireDefault(require("uuid"));
+
+var _useComponentRendererTracking = require("../utils/react-hooks/use-component-renderer-tracking");
+
+var _editorCommon = require("@atlaskit/editor-common");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var ProfiledComponentIds;
+exports.ProfiledComponentIds = ProfiledComponentIds;
+
+(function (ProfiledComponentIds) {
+  ProfiledComponentIds["editor"] = "Editor";
+  ProfiledComponentIds["appearance"] = "FullPageEditor";
+  ProfiledComponentIds["reactEditorView"] = "ReactEditorView";
+  ProfiledComponentIds["contentArea"] = "FullPageContentArea";
+  ProfiledComponentIds["toolbar"] = "FullPageToolbar";
+  ProfiledComponentIds["mention"] = "MentionNodeView";
+})(ProfiledComponentIds || (exports.ProfiledComponentIds = ProfiledComponentIds = {}));
+
+var CoreRenderCountProfiler = function CoreRenderCountProfiler(_ref) {
+  var componentId = _ref.componentId;
+
+  var _useRef = (0, _react.useRef)((0, _uuid.default)()),
+      instanceId = _useRef.current;
+
+  var onRender = function onRender(_ref2) {
+    var renderCount = _ref2.renderCount;
+
+    var profiler = _editorCommon.RenderCountProfiler.getInstance({
+      store: window
+    });
+
+    profiler.setRenderCount({
+      componentId: componentId,
+      instanceId: instanceId,
+      renderCount: renderCount
+    });
+  };
+
+  (0, _useComponentRendererTracking.useComponentRenderTracking)({
+    onRender: onRender,
+    propsDiffingOptions: {
+      enabled: false
+    },
+    zeroBasedCount: false
+  });
+  return null;
+};
+
+var RenderCountProfiler = function RenderCountProfiler(_ref3) {
+  var componentId = _ref3.componentId;
+
+  var profiler = _editorCommon.RenderCountProfiler.getInstance({
+    store: window
+  });
+
+  if (profiler.isEnabled()) {
+    return /*#__PURE__*/_react.default.createElement(CoreRenderCountProfiler, {
+      componentId: componentId
+    });
+  }
+
+  return null;
+};
+
+exports.RenderCountProfiler = RenderCountProfiler;

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -78,12 +78,12 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var CommentEditorMargin = 14;
 var CommentEditorSmallerMargin = 8;
 
-var CommentEditor = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n  min-height: 150px;\n  height: auto;\n  ", " background-color: white;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, function (props) {
-  return props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : '';
-}, _colors.N40, (0, _constants.borderRadius)());
+var CommentEditor = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  .less-margin .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  min-width: 272px;\n  /* Border + Toolbar + Footer + (Paragraph + ((Parahraph + Margin) * (DefaultLines - 1)) */\n  /* calc(2px + 40px + 24px + ( 20px + (32px * 2))) */\n  min-height: 150px;\n  height: auto;\n  background-color: white;\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: ", "px;\n\n  max-width: inherit;\n  word-wrap: break-word;\n"])), CommentEditorSmallerMargin, CommentEditorSmallerMargin, _colors.N40, (0, _constants.borderRadius)());
 
 CommentEditor.displayName = 'CommentEditor';
-var ContentArea = (0, _styledComponents.default)(_ContentStyles.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.tableCommentEditorStyles);
+var ContentArea = (0, _styledComponents.default)(_ContentStyles.default)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  overflow-x: hidden;\n  overflow-y: auto;\n  line-height: 24px;\n  ", ";\n\n  /** Hack for Bitbucket to ensure entire editorView gets drop event; see ED-3294 **/\n  /** Hack for tables controlls. Otherwise marging collapse and controlls are misplaced. **/\n  .ProseMirror {\n    margin: 12px ", "px ", "px;\n  }\n\n  .gridParent {\n    margin-left: ", "px;\n    margin-right: ", "px;\n    width: calc(100% + ", "px);\n  }\n\n  padding: ", "px;\n\n  ", ";\n"])), function (props) {
+  return props.maxHeight ? 'max-height: ' + props.maxHeight + 'px;' : '';
+}, CommentEditorMargin, CommentEditorMargin, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, CommentEditorMargin - _grid.GRID_GUTTER, _Toolbar2.TableControlsPadding, _commonStyles.tableCommentEditorStyles);
 ContentArea.displayName = 'ContentArea';
 
 var SecondaryToolbar = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  display: flex;\n  padding: 12px 1px;\n"])));
@@ -173,7 +173,8 @@ var Editor = /*#__PURE__*/function (_React$Component) {
           },
           className: (0, _classnames.default)('ak-editor-content-area', {
             'less-margin': width < _editorSharedStyles.akEditorMobileBreakoutPoint
-          })
+          }),
+          maxHeight: maxHeight
         }, customContentComponents, /*#__PURE__*/_react.default.createElement(_PluginSlot.default, {
           editorView: editorView,
           editorActions: editorActions,

package/dist/cjs/utils/react-hooks/use-component-renderer-tracking/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,40 +10,74 @@ exports.RenderTracking = RenderTracking;
 
 var _react = require("react");
 
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
 var _compare = require("../../compare");
 
 var _analytics = require("../../../plugins/analytics");
 
-function useComponentRenderTracking(props, action, actionSubject, handleAnalyticsEvent) {
-  var propsToIgnore = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : [];
-  var useShallow = arguments.length > 5 ? arguments[5] : undefined;
+function useComponentRenderTracking(_ref) {
+  var onRender = _ref.onRender,
+      propsDiffingOptions = _ref.propsDiffingOptions,
+      _ref$zeroBasedCount = _ref.zeroBasedCount,
+      zeroBasedCount = _ref$zeroBasedCount === void 0 ? true : _ref$zeroBasedCount;
   var propsRef = (0, _react.useRef)();
-  var renderCountRef = (0, _react.useRef)(0);
+  var renderCountRef = (0, _react.useRef)(zeroBasedCount ? 0 : 1);
   (0, _react.useEffect)(function () {
     var lastProps = propsRef.current;
     var renderCount = renderCountRef.current;
+    var propsDifference;
 
-    if (lastProps) {
-      var difference = useShallow ? (0, _compare.getShallowPropsDifference)(lastProps, props) : (0, _compare.getPropsDifference)(lastProps, props, 0, 2, propsToIgnore);
-      handleAnalyticsEvent({
-        payload: {
-          action: action,
-          actionSubject: actionSubject,
-          attributes: {
-            propsDifference: difference,
-            count: renderCount
-          },
-          eventType: _analytics.EVENT_TYPE.OPERATIONAL
-        }
-      });
+    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled && lastProps) {
+      propsDifference = propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.useShallow ? (0, _compare.getShallowPropsDifference)(lastProps, propsDiffingOptions.props) : (0, _compare.getPropsDifference)(lastProps, propsDiffingOptions.props, 0, 2, propsDiffingOptions === null || propsDiffingOptions === void 0 ? void 0 : propsDiffingOptions.propsToIgnore);
+    }
+
+    var result = {
+      renderCount: renderCount,
+      propsDifference: propsDifference
+    };
+    onRender(result);
+
+    if (propsDiffingOptions !== null && propsDiffingOptions !== void 0 && propsDiffingOptions.enabled) {
+      propsRef.current = propsDiffingOptions.props;
     }
 
-    propsRef.current = props;
     renderCountRef.current = renderCountRef.current + 1;
   }); // No dependencies run on each render
 }
 
 function RenderTracking(props) {
-  useComponentRenderTracking(props.componentProps, props.action, props.actionSubject, props.handleAnalyticsEvent, props.propsToIgnore, props.useShallow);
+  var debouncedHandleAnalyticsEvent = (0, _react.useMemo)(function () {
+    return (0, _debounce.default)(props.handleAnalyticsEvent, 500);
+  }, [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: function onRender(_ref2) {
+      var renderCount = _ref2.renderCount,
+          propsDifference = _ref2.propsDifference;
+
+      if (!renderCount) {
+        return;
+      }
+
+      debouncedHandleAnalyticsEvent({
+        payload: {
+          action: props.action,
+          actionSubject: props.actionSubject,
+          attributes: {
+            count: renderCount,
+            propsDifference: propsDifference
+          },
+          eventType: _analytics.EVENT_TYPE.OPERATIONAL
+        }
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
   return null;
 }

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.nextMajorVersion = exports.version = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "150.0.0";
+var version = "151.0.0";
 exports.version = version;
 
 var nextMajorVersion = function nextMajorVersion() {

package/dist/cjs/version.json

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

package/dist/es2019/actions/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { Node } from 'prosemirror-model';
-import { TextSelection, Selection } from 'prosemirror-state';
+import { TextSelection } from 'prosemirror-state';
 import { toJSON } from '../utils';
 import { processRawValue, isEmptyDocument } from '../utils/document';
 import { getEditorValueWithMedia, __temporaryFixForConfigPanel } from '../utils/action';
@@ -171,35 +171,13 @@ export default class EditorActions {
       return false;
     }
 
-    const {
-      state
-    } = this.editorView;
-    const {
-      schema
-    } = state;
-    const content = processRawValue(schema, rawValue, undefined, undefined, this.contentTransformer, this.dispatchAnalyticsEvent);
-
-    if (!content) {
-      return false;
-    } // In case of replacing a whole document, we only need a content of a top level node e.g. document.
-
-
-    let tr = state.tr.replaceWith(0, state.doc.nodeSize - 2, content.content);
-
-    if (!shouldScrollToBottom && !tr.selectionSet) {
-      // Restore selection at start of document instead of the end.
-      tr.setSelection(Selection.atStart(tr.doc));
-    }
-
-    if (shouldScrollToBottom) {
-      tr = tr.scrollIntoView();
-    }
-
-    if (!shouldAddToHistory) {
-      tr.setMeta('addToHistory', false);
+    if (this.eventDispatcher) {
+      this.eventDispatcher.emit('resetEditorState', {
+        doc: rawValue,
+        shouldScrollToBottom
+      });
     }
 
-    this.editorView.dispatch(tr);
     return true;
   }
 

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

@@ -3,14 +3,20 @@ import React from 'react';
 import uuid from 'uuid';
 import memoizeOne from 'memoize-one';
 import { sniffUserBrowserExtensions } from '@atlaskit/editor-common';
+import { ExperienceStore } from '@atlaskit/editor-common/ufo';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../plugins/analytics';
 import { editorAnalyticsChannel } from '../plugins/analytics/consts';
 import { getFeatureFlags } from '../plugins/feature-flags-context';
 import { getDocStructure } from '../utils/document-logger';
 import { WithEditorView } from './WithEditorView';
 export class ErrorBoundaryWithEditorView extends React.Component {
-  constructor(...args) {
-    super(...args);
+  // Memoizing this as react alternative suggestion of https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops
+  get featureFlags() {
+    return this.getFeatureFlags(this.props.editorView);
+  }
+
+  constructor(props) {
+    super(props);
 
     _defineProperty(this, "browserExtensions", undefined);
 
@@ -26,60 +32,48 @@ export class ErrorBoundaryWithEditorView extends React.Component {
       return getFeatureFlags(editorView.state);
     }));
 
-    _defineProperty(this, "fireAnalytics", analyticsErrorPayload => {
+    _defineProperty(this, "sendErrorData", async analyticsErrorPayload => {
+      const product = await this.getProductName();
       const {
-        createAnalyticsEvent
-      } = this.props;
-      this.getProductName().then(product => {
-        if (createAnalyticsEvent) {
-          const {
-            error,
-            errorInfo,
-            errorStack
-          } = analyticsErrorPayload;
-          const sharedId = uuid();
-          const event = {
-            action: ACTION.EDITOR_CRASHED,
-            actionSubject: ACTION_SUBJECT.EDITOR,
-            eventType: EVENT_TYPE.OPERATIONAL,
-            attributes: {
-              product,
-              browserInfo: window && window.navigator && window.navigator.userAgent ? window.navigator.userAgent : 'unknown',
-              error: error,
-              errorInfo,
-              errorId: sharedId,
-              browserExtensions: this.browserExtensions
-            }
-          }; // Add doc structure if the feature flag is on
-
-          if (this.featureFlags.errorBoundaryDocStructure && this.props.editorView) {
-            event.attributes.docStructure = getDocStructure(this.props.editorView.state.doc, {
-              compact: true
-            });
-          }
-
-          createAnalyticsEvent(event).fire(editorAnalyticsChannel);
-          createAnalyticsEvent({
-            action: ACTION.EDITOR_CRASHED_ADDITIONAL_INFORMATION,
-            actionSubject: ACTION_SUBJECT.EDITOR,
-            eventType: EVENT_TYPE.OPERATIONAL,
-            attributes: {
-              errorStack,
-              errorId: sharedId
-            }
-          }).fire(editorAnalyticsChannel);
-        } else {
-          // eslint-disable-next-line no-console
-          console.error('Editor Error Boundary: Missing `createAnalyticsEvent` prop.', {
-            channel: editorAnalyticsChannel,
-            product,
-            error: analyticsErrorPayload
-          });
+        error,
+        errorInfo,
+        errorStack
+      } = analyticsErrorPayload;
+      const sharedId = uuid();
+      const attributes = {
+        product,
+        browserInfo: window && window.navigator && window.navigator.userAgent ? window.navigator.userAgent : 'unknown',
+        error: error,
+        errorInfo,
+        errorId: sharedId,
+        browserExtensions: this.browserExtensions,
+        docStructure: this.featureFlags.errorBoundaryDocStructure && this.props.editorView ? getDocStructure(this.props.editorView.state.doc, {
+          compact: true
+        }) : undefined
+      };
+      this.fireAnalyticsEvent({
+        action: ACTION.EDITOR_CRASHED,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes
+      });
+      this.fireAnalyticsEvent({
+        action: ACTION.EDITOR_CRASHED_ADDITIONAL_INFORMATION,
+        actionSubject: ACTION_SUBJECT.EDITOR,
+        eventType: EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          errorStack,
+          errorId: sharedId
         }
-      }).catch(e => {
-        // eslint-disable-next-line no-console
-        console.error('Failed to resolve product name from contextIdentifierProvider.', e);
       });
+
+      if (this.featureFlags.ufo && this.props.editorView) {
+        var _this$experienceStore;
+
+        (_this$experienceStore = this.experienceStore) === null || _this$experienceStore === void 0 ? void 0 : _this$experienceStore.failAll({ ...this.getExperienceMetadata(attributes),
+          errorStack
+        });
+      }
     });
 
     _defineProperty(this, "getProductName", async () => {
@@ -97,20 +91,39 @@ export class ErrorBoundaryWithEditorView extends React.Component {
 
       return 'atlaskit';
     });
-  }
 
-  get featureFlags() {
-    return this.getFeatureFlags(this.props.editorView);
+    _defineProperty(this, "fireAnalyticsEvent", event => {
+      var _this$props$createAna, _this$props;
+
+      (_this$props$createAna = (_this$props = this.props).createAnalyticsEvent) === null || _this$props$createAna === void 0 ? void 0 : _this$props$createAna.call(_this$props, event).fire(editorAnalyticsChannel);
+    });
+
+    _defineProperty(this, "getExperienceMetadata", attributes => {
+      var _attributes$browserEx;
+
+      return {
+        browserInfo: attributes.browserInfo,
+        error: attributes.error.toString(),
+        errorInfo: {
+          componentStack: attributes.errorInfo.componentStack
+        },
+        errorId: attributes.errorId,
+        browserExtensions: (_attributes$browserEx = attributes.browserExtensions) === null || _attributes$browserEx === void 0 ? void 0 : _attributes$browserEx.toString(),
+        docStructure: attributes.docStructure
+      };
+    });
+
+    if (props.editorView) {
+      this.experienceStore = ExperienceStore.getInstance(props.editorView);
+    }
   }
 
   componentDidCatch(error, errorInfo) {
-    // Log the error
-    this.fireAnalytics({
+    this.sendErrorData({
       error: error.toString(),
       errorInfo,
       errorStack: error.stack
-    }); //
-    // // Update state to allow a re-render to attempt graceful recovery (in the event that
+    }); // // Update state to allow a re-render to attempt graceful recovery (in the event that
     // // the error was caused by a race condition or is intermittent)
 
     this.setState({