@atlaskit/editor-common 69.2.2 → 69.3.0

package/dist/esm/messages/index.js

@@ -1,4 +1,128 @@
+import { defineMessages } from 'react-intl-next';
 export { codeBidiWarningMessages } from './codeBidiWarning';
 export { linkMessages } from './link';
 export { unsupportedContentMessages } from './unsupportedContent';
-export { codeBlockCopyButtonMessages } from './codeBlockCopyButton';
+export { codeBlockCopyButtonMessages } from './codeBlockCopyButton';
+export { toolbarInsertBlockMessages } from './insert-block';
+export default defineMessages({
+  layoutFixedWidth: {
+    id: 'fabric.editor.layoutFixedWidth',
+    defaultMessage: 'Back to center',
+    description: 'Display your element (image, table, extension, etc) as standard width'
+  },
+  layoutWide: {
+    id: 'fabric.editor.layoutWide',
+    defaultMessage: 'Go wide',
+    description: 'Display your element (image, table, extension, etc) wider than normal'
+  },
+  layoutFullWidth: {
+    id: 'fabric.editor.layoutFullWidth',
+    defaultMessage: 'Go full width',
+    description: 'Display your element (image, table, extension, etc) as full width'
+  },
+  alignImageRight: {
+    id: 'fabric.editor.alignImageRight',
+    defaultMessage: 'Align right',
+    description: 'Aligns image to the right'
+  },
+  alignImageCenter: {
+    id: 'fabric.editor.alignImageCenter',
+    defaultMessage: 'Align center',
+    description: 'Aligns image to the center'
+  },
+  alignImageLeft: {
+    id: 'fabric.editor.alignImageLeft',
+    defaultMessage: 'Align left',
+    description: 'Aligns image to the left'
+  },
+  remove: {
+    id: 'fabric.editor.remove',
+    defaultMessage: 'Remove',
+    description: 'Delete the element (image, panel, table, etc.) from your document'
+  },
+  removeEmoji: {
+    id: 'fabric.editor.removeEmoji',
+    defaultMessage: 'Remove emoji',
+    description: 'Remove the emoji panel icon from custom panel'
+  },
+  visit: {
+    id: 'fabric.editor.visit',
+    defaultMessage: 'Open link in a new window',
+    description: 'Open the link in a new window'
+  },
+  inviteToEditButtonTitle: {
+    id: 'fabric.editor.editMode.inviteToEditButton.title',
+    defaultMessage: 'Invite to edit',
+    description: 'Invite another user to edit the current document'
+  },
+  saveButton: {
+    id: 'fabric.editor.saveButton',
+    defaultMessage: 'Save',
+    description: 'Submit and save a comment or document'
+  },
+  cancelButton: {
+    id: 'fabric.editor.cancelButton',
+    defaultMessage: 'Cancel',
+    description: 'Discard the current comment or document'
+  },
+  taskList: {
+    id: 'fabric.editor.tooltip.taskList',
+    defaultMessage: 'an action item',
+    description: 'an action item in the Editor'
+  },
+  bulletList: {
+    id: 'fabric.editor.tooltip.bulletList',
+    defaultMessage: 'a list',
+    description: 'a list item in the Editor'
+  },
+  nestedExpand: {
+    id: 'fabric.editor.tooltip.nestedExpand',
+    defaultMessage: 'a nested expand',
+    description: 'expand node which is nested'
+  },
+  decisionList: {
+    id: 'fabric.editor.tooltip.decisionList',
+    defaultMessage: 'a decision list',
+    description: 'a list of decisions'
+  },
+  defaultBlockNode: {
+    id: 'fabric.editor.tooltip.defaultBlockNode',
+    defaultMessage: 'a block node',
+    description: 'a block node element'
+  },
+  panel: {
+    id: 'fabric.editor.tooltip.blockPanel',
+    defaultMessage: 'a panel',
+    description: 'Panel node in the Editor'
+  },
+  blockquote: {
+    id: 'fabric.editor.blockquote',
+    defaultMessage: 'a quote',
+    description: 'a quote node'
+  },
+  timeUpdated: {
+    id: 'fabric.editor.time.updated',
+    defaultMessage: 'Updated',
+    description: 'Time last updated'
+  },
+  timeViewed: {
+    id: 'fabric.editor.time.viewed',
+    defaultMessage: 'Viewed',
+    description: 'Time last viewed'
+  },
+  timeAgo: {
+    id: 'fabric.editor.time.ago',
+    defaultMessage: 'ago',
+    description: 'Some time ago'
+  },
+  copyToClipboard: {
+    id: 'fabric.editor.copyToClipboard',
+    defaultMessage: 'Copy',
+    description: 'Copy the whole content of the element to your clipboard'
+  },
+  copiedToClipboard: {
+    id: 'fabric.editor.copiedToClipboard',
+    defaultMessage: 'Copied!',
+    description: 'Copied the whole content of the element to clipboard'
+  }
+});

package/dist/esm/messages/insert-block.js

@@ -0,0 +1,168 @@
+import { defineMessages } from 'react-intl-next';
+export var toolbarInsertBlockMessages = defineMessages({
+  action: {
+    id: 'fabric.editor.action',
+    defaultMessage: 'Action item',
+    description: 'Also known as a “task”, “to do item”, or a checklist'
+  },
+  actionDescription: {
+    id: 'fabric.editor.action.description',
+    defaultMessage: 'Create and assign action items',
+    description: ''
+  },
+  link: {
+    id: 'fabric.editor.link',
+    defaultMessage: 'Link',
+    description: 'Insert a hyperlink'
+  },
+  linkDescription: {
+    id: 'fabric.editor.link.description',
+    defaultMessage: 'Insert a link',
+    description: 'Insert a hyperlink'
+  },
+  filesAndImages: {
+    id: 'fabric.editor.filesAndImages',
+    defaultMessage: 'Files & images',
+    description: 'Insert one or more files or images'
+  },
+  filesAndImagesDescription: {
+    id: 'fabric.editor.filesAndImages.description',
+    defaultMessage: 'Add images and other files to your page',
+    description: 'Insert one or more files or images'
+  },
+  image: {
+    id: 'fabric.editor.image',
+    defaultMessage: 'Image',
+    description: 'Insert an image.'
+  },
+  mention: {
+    id: 'fabric.editor.mention',
+    defaultMessage: 'Mention',
+    description: 'Reference another person in your document'
+  },
+  mentionDescription: {
+    id: 'fabric.editor.mention.description',
+    defaultMessage: 'Mention someone to send them a notification',
+    description: 'Reference another person in your document'
+  },
+  emoji: {
+    id: 'fabric.editor.emoji',
+    defaultMessage: 'Emoji',
+    description: 'Insert an emoticon or smiley :-)'
+  },
+  emojiDescription: {
+    id: 'fabric.editor.emoji.description',
+    defaultMessage: 'Use emojis to express ideas 🎉 and emotions 😄',
+    description: 'Insert an emoticon or smiley :-)'
+  },
+  table: {
+    id: 'fabric.editor.table',
+    defaultMessage: 'Table',
+    description: 'Inserts a table in the document'
+  },
+  tableDescription: {
+    id: 'fabric.editor.table.description',
+    defaultMessage: 'Insert a table',
+    description: 'Inserts a table in the document'
+  },
+  expand: {
+    id: 'fabric.editor.expand',
+    defaultMessage: 'Expand',
+    description: 'Inserts an expand in the document'
+  },
+  expandDescription: {
+    id: 'fabric.editor.expand.description',
+    defaultMessage: 'Insert an expand',
+    description: 'Inserts an expand in the document'
+  },
+  decision: {
+    id: 'fabric.editor.decision',
+    defaultMessage: 'Decision',
+    description: 'Capture a decision you’ve made'
+  },
+  decisionDescription: {
+    id: 'fabric.editor.decision.description',
+    defaultMessage: 'Capture decisions so they’re easy to track',
+    description: 'Capture a decision you’ve made'
+  },
+  feedbackDialog: {
+    id: 'fabric.editor.feedbackDialog',
+    defaultMessage: 'Give feedback',
+    description: 'Open the feedback dialog from editor'
+  },
+  feedbackDialogDescription: {
+    id: 'fabric.editor.feedbackDialog.description',
+    defaultMessage: 'Tell us about your experience using the new editor',
+    description: 'Description for feedback option under quick insert dropdown'
+  },
+  horizontalRule: {
+    id: 'fabric.editor.horizontalRule',
+    defaultMessage: 'Divider',
+    description: 'A horizontal rule or divider'
+  },
+  horizontalRuleDescription: {
+    id: 'fabric.editor.horizontalRule.description',
+    defaultMessage: 'Separate content with a horizontal line',
+    description: 'A horizontal rule or divider'
+  },
+  date: {
+    id: 'fabric.editor.date',
+    defaultMessage: 'Date',
+    description: 'Opens a date picker that lets you select a date'
+  },
+  dateDescription: {
+    id: 'fabric.editor.date.description',
+    defaultMessage: 'Add a date using a calendar',
+    description: 'Opens a date picker that lets you select a date'
+  },
+  placeholderText: {
+    id: 'fabric.editor.placeholderText',
+    defaultMessage: 'Placeholder text',
+    description: 'Inserts a text placeholder into the page'
+  },
+  placeholderTextDescription: {
+    id: 'fabric.editor.placeholderText.description',
+    defaultMessage: 'Insert a text placeholder into the page',
+    description: 'Inserts a text placeholder into the page'
+  },
+  columns: {
+    id: 'fabric.editor.columns',
+    defaultMessage: 'Layouts',
+    description: 'Create a multi column section or layout'
+  },
+  columnsDescription: {
+    id: 'fabric.editor.columns.description',
+    defaultMessage: 'Structure your page using sections',
+    description: 'Create a multi column section or layout'
+  },
+  status: {
+    id: 'fabric.editor.status',
+    defaultMessage: 'Status',
+    description: 'Inserts an item representing the status of an activity to task.'
+  },
+  statusDescription: {
+    id: 'fabric.editor.status.description',
+    defaultMessage: 'Add a custom status label',
+    description: 'Inserts an item representing the status of an activity to task.'
+  },
+  viewMore: {
+    id: 'fabric.editor.viewMore',
+    defaultMessage: 'View more',
+    description: ''
+  },
+  insertMenu: {
+    id: 'fabric.editor.insertMenu',
+    defaultMessage: 'Insert',
+    description: 'Opens a menu of additional items that can be inserted into your document.'
+  },
+  help: {
+    id: 'fabric.editor.help',
+    defaultMessage: 'Help',
+    description: 'Opens up the help dialog'
+  },
+  helpDescription: {
+    id: 'fabric.editor.help.description',
+    defaultMessage: 'Browse all the keyboard shortcuts and markdown options',
+    description: 'Browse all the keyboard shortcuts and markdown options'
+  }
+});

package/dist/esm/node-width/index.js

@@ -0,0 +1,72 @@
+import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
+import { akEditorFullWidthLayoutWidth, akLayoutGutterOffset, gridMediumMaxWidth } from '@atlaskit/editor-shared-styles';
+import { BODIED_EXT_PADDING } from '../styles/shared/extension';
+import { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '../styles/shared/layout';
+import { absoluteBreakoutWidth } from '../utils/breakout';
+/**
+ * Calculates width of parent node of a nested node (inside layouts, extension)
+ * If current node selection is not nested will return undefined
+ */
+
+export var getParentNodeWidth = function getParentNodeWidth(pos, state, containerWidth, isFullWidthModeEnabled) {
+  if (!pos) {
+    return;
+  }
+
+  var node = getNestedParentNode(pos, state);
+
+  if (!node) {
+    return;
+  }
+
+  var layout = node.attrs.layout || 'default';
+  var schema = state.schema;
+  var breakoutMark = schema.marks.breakout && schema.marks.breakout.isInSet(node.marks);
+
+  if (breakoutMark && breakoutMark.attrs.mode) {
+    layout = breakoutMark.attrs.mode;
+  }
+
+  var parentWidth = calcBreakoutNodeWidth(layout, containerWidth, isFullWidthModeEnabled);
+
+  if (node.type === schema.nodes.layoutSection) {
+    parentWidth += akLayoutGutterOffset * 2; // extra width that gets added to layout
+
+    if (containerWidth.width > gridMediumMaxWidth) {
+      parentWidth -= (LAYOUT_SECTION_MARGIN + 2) * (node.childCount - 1); // margin between sections
+
+      var $pos = state.doc.resolve(pos);
+      var column = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.layoutColumn]);
+
+      if (column && column.node && !isNaN(column.node.attrs.width)) {
+        // get exact width of parent layout column using node attrs
+        parentWidth = Math.round(parentWidth * column.node.attrs.width * 0.01);
+      }
+    }
+  } // account for the padding of the parent node
+
+
+  if (node.type === schema.nodes.layoutSection) {
+    parentWidth -= LAYOUT_COLUMN_PADDING * 2;
+  } else if (node.type === schema.nodes.bodiedExtension) {
+    parentWidth -= BODIED_EXT_PADDING * 2;
+  }
+
+  parentWidth -= 2; // border
+
+  return parentWidth;
+};
+
+var getNestedParentNode = function getNestedParentNode(tablePos, state) {
+  if (tablePos === undefined) {
+    return null;
+  }
+
+  var $pos = state.doc.resolve(tablePos);
+  var parent = findParentNodeOfTypeClosestToPos($pos, [state.schema.nodes.bodiedExtension, state.schema.nodes.layoutSection, state.schema.nodes.expand]);
+  return parent ? parent.node : null;
+};
+
+var calcBreakoutNodeWidth = function calcBreakoutNodeWidth(layout, containerWidth, isFullWidthModeEnabled) {
+  return isFullWidthModeEnabled ? Math.min(containerWidth.lineLength, akEditorFullWidthLayoutWidth) : absoluteBreakoutWidth(layout, containerWidth.width);
+};

package/dist/esm/react-node-view/index.js

@@ -0,0 +1,244 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React from 'react';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
+import { createDispatch } from '../event-dispatcher';
+import { ErrorBoundary } from '../ui/ErrorBoundary';
+import { analyticsEventKey } from '../utils/analytics'; //import {
+//  getPerformanceOptions,
+//  startMeasureReactNodeViewRendered,
+//  stopMeasureReactNodeViewRendered,
+//} from './get-performance-options';
+
+var ReactNodeView = /*#__PURE__*/function () {
+  function ReactNodeView(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent) {
+    var _this = this;
+
+    var hasAnalyticsContext = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
+    var viewShouldUpdate = arguments.length > 8 ? arguments[8] : undefined;
+    var hasIntlContext = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
+
+    _classCallCheck(this, ReactNodeView);
+
+    _defineProperty(this, "handleRef", function (node) {
+      return _this._handleRef(node);
+    });
+
+    _defineProperty(this, "dispatchAnalyticsEvent", function (payload) {
+      if (_this.eventDispatcher) {
+        var dispatch = createDispatch(_this.eventDispatcher);
+        dispatch(analyticsEventKey, {
+          payload: payload
+        });
+      }
+    });
+
+    this.node = _node;
+    this.view = view;
+    this.getPos = getPos;
+    this.portalProviderAPI = portalProviderAPI;
+    this.reactComponentProps = reactComponentProps || {};
+    this.reactComponent = reactComponent;
+    this.hasAnalyticsContext = hasAnalyticsContext;
+    this._viewShouldUpdate = viewShouldUpdate;
+    this.eventDispatcher = eventDispatcher;
+    this.hasIntlContext = hasIntlContext;
+  }
+  /**
+   * This method exists to move initialization logic out of the constructor,
+   * so object can be initialized properly before calling render first time.
+   *
+   * Example:
+   * Instance properties get added to an object only after super call in
+   * constructor, which leads to some methods being undefined during the
+   * first render.
+   */
+
+
+  _createClass(ReactNodeView, [{
+    key: "init",
+    value: function init() {
+      var _this2 = this;
+
+      this.domRef = this.createDomRef();
+      this.setDomAttrs(this.node, this.domRef);
+
+      var _ref = this.getContentDOM() || {
+        dom: undefined,
+        contentDOM: undefined
+      },
+          contentDOMWrapper = _ref.dom,
+          contentDOM = _ref.contentDOM;
+
+      if (this.domRef && contentDOMWrapper) {
+        this.domRef.appendChild(contentDOMWrapper);
+        this.contentDOM = contentDOM ? contentDOM : contentDOMWrapper;
+        this.contentDOMWrapper = contentDOMWrapper || contentDOM;
+      } // @see ED-3790
+      // something gets messed up during mutation processing inside of a
+      // nodeView if DOM structure has nested plain "div"s, it doesn't see the
+      // difference between them and it kills the nodeView
+
+
+      this.domRef.classList.add("".concat(this.node.type.name, "View-content-wrap")); // TODO: ED-15580
+      //const {
+      //  samplingRate,
+      //  slowThreshold,
+      //  trackingEnabled,
+      //} = getPerformanceOptions(this.view);
+      //trackingEnabled &&
+      //  startMeasureReactNodeViewRendered({ nodeTypeName: this.node.type.name });
+
+      this.renderReactComponent(function () {
+        return _this2.render(_this2.reactComponentProps, _this2.handleRef);
+      }); //trackingEnabled &&
+      //  stopMeasureReactNodeViewRendered({
+      //    nodeTypeName: this.node.type.name,
+      //    dispatchAnalyticsEvent: this.dispatchAnalyticsEvent,
+      //    editorState: this.view.state,
+      //    samplingRate,
+      //    slowThreshold,
+      //  });
+
+      return this;
+    }
+  }, {
+    key: "renderReactComponent",
+    value: function renderReactComponent(component) {
+      var _this3 = this;
+
+      if (!this.domRef || !component) {
+        return;
+      }
+
+      var componentWithErrorBoundary = function componentWithErrorBoundary() {
+        var _this3$node$type$name, _this3$node, _this3$node$type;
+
+        return /*#__PURE__*/React.createElement(ErrorBoundary, {
+          component: ACTION_SUBJECT.REACT_NODE_VIEW,
+          componentId: (_this3$node$type$name = _this3 === null || _this3 === void 0 ? void 0 : (_this3$node = _this3.node) === null || _this3$node === void 0 ? void 0 : (_this3$node$type = _this3$node.type) === null || _this3$node$type === void 0 ? void 0 : _this3$node$type.name) !== null && _this3$node$type$name !== void 0 ? _this3$node$type$name : ACTION_SUBJECT_ID.UNKNOWN_NODE,
+          dispatchAnalyticsEvent: _this3.dispatchAnalyticsEvent
+        }, component());
+      };
+
+      this.portalProviderAPI.render(componentWithErrorBoundary, this.domRef, this.hasAnalyticsContext, this.hasIntlContext);
+    }
+  }, {
+    key: "createDomRef",
+    value: function createDomRef() {
+      if (!this.node.isInline) {
+        return document.createElement('div');
+      }
+
+      var htmlElement = document.createElement('span');
+      return htmlElement;
+    }
+  }, {
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      return undefined;
+    }
+  }, {
+    key: "_handleRef",
+    value: function _handleRef(node) {
+      var contentDOM = this.contentDOMWrapper || this.contentDOM; // move the contentDOM node inside the inner reference after rendering
+
+      if (node && contentDOM && !node.contains(contentDOM)) {
+        node.appendChild(contentDOM);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render(props, forwardRef) {
+      return this.reactComponent ? /*#__PURE__*/React.createElement(this.reactComponent, _extends({
+        view: this.view,
+        getPos: this.getPos,
+        node: this.node,
+        forwardRef: forwardRef
+      }, props)) : null;
+    }
+  }, {
+    key: "update",
+    value: function update(node, _decorations, _innerDecorations) {
+      var _this4 = this;
+
+      var validUpdate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {
+        return true;
+      };
+      // @see https://github.com/ProseMirror/prosemirror/issues/648
+      var isValidUpdate = this.node.type === node.type && validUpdate(this.node, node);
+
+      if (!isValidUpdate) {
+        return false;
+      }
+
+      if (this.domRef && !this.node.sameMarkup(node)) {
+        this.setDomAttrs(node, this.domRef);
+      } // View should not process a re-render if this is false.
+      // We dont want to destroy the view, so we return true.
+
+
+      if (!this.viewShouldUpdate(node)) {
+        this.node = node;
+        return true;
+      }
+
+      this.node = node;
+      this.renderReactComponent(function () {
+        return _this4.render(_this4.reactComponentProps, _this4.handleRef);
+      });
+      return true;
+    }
+  }, {
+    key: "viewShouldUpdate",
+    value: function viewShouldUpdate(nextNode) {
+      if (this._viewShouldUpdate) {
+        return this._viewShouldUpdate(nextNode);
+      }
+
+      return true;
+    }
+    /**
+     * Copies the attributes from a ProseMirror Node to a DOM node.
+     * @param node The Prosemirror Node from which to source the attributes
+     */
+
+  }, {
+    key: "setDomAttrs",
+    value: function setDomAttrs(node, element) {
+      Object.keys(node.attrs || {}).forEach(function (attr) {
+        element.setAttribute(attr, node.attrs[attr]);
+      });
+    }
+  }, {
+    key: "dom",
+    get: function get() {
+      return this.domRef;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      if (!this.domRef) {
+        return;
+      }
+
+      this.portalProviderAPI.remove(this.domRef);
+      this.domRef = undefined;
+      this.contentDOM = undefined;
+    }
+  }], [{
+    key: "fromComponent",
+    value: function fromComponent(component, portalProviderAPI, eventDispatcher, props, viewShouldUpdate) {
+      var hasIntlContext = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+      return function (node, view, getPos) {
+        return new ReactNodeView(node, view, getPos, portalProviderAPI, eventDispatcher, props, component, false, viewShouldUpdate, hasIntlContext).init();
+      };
+    }
+  }]);
+
+  return ReactNodeView;
+}();
+
+export { ReactNodeView as default };

package/dist/esm/react-node-view/types.js

@@ -0,0 +1 @@
+export {};