@atlaskit/editor-plugin-extension 0.4.2 → 0.5.1

package/dist/cjs/toolbar.js

@@ -0,0 +1,242 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = exports.getToolbarConfig = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _reactIntlNext = require("react-intl-next");
+var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
+var _utils = require("@atlaskit/editor-common/utils");
+var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _edit = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/edit"));
+var _mediaCenter = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-center"));
+var _mediaFullWidth = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-full-width"));
+var _mediaWide = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wide"));
+var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _actions = require("./actions");
+var _commands = require("./commands");
+var _pluginKey = require("./pm-plugins/macro/plugin-key");
+var _main = require("./pm-plugins/main");
+var _utils3 = require("./utils");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  edit: {
+    id: 'fabric.editor.edit',
+    defaultMessage: 'Edit',
+    description: 'Edit the properties for this extension.'
+  },
+  deleteElementTitle: {
+    id: 'fabric.editor.extension.deleteElementTitle',
+    defaultMessage: 'Delete element',
+    description: 'Title text for confirm modal when deleting an extension linked to a data consumer.'
+  },
+  unnamedSource: {
+    id: 'fabric.editor.extension.sourceNoTitledName',
+    defaultMessage: 'this element',
+    description: 'The current element without preset name been selected'
+  },
+  confirmDeleteLinkedModalOKButton: {
+    id: 'fabric.editor.extension.confirmDeleteLinkedModalOKButton',
+    defaultMessage: 'Delete',
+    description: 'Action button label for confirm modal when deleting an extension linked to a data consumer.'
+  },
+  confirmDeleteLinkedModalMessage: {
+    id: 'fabric.editor.extension.confirmDeleteLinkedModalMessage',
+    defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
+    description: 'Message for confirm modal when deleting a extension linked to an data consumer.'
+  },
+  confirmModalCheckboxLabel: {
+    id: 'fabric.editor.floatingToolbar.confirmModalCheckboxLabel',
+    defaultMessage: 'Also delete connected elements',
+    description: 'checkbox label text'
+  }
+});
+var isLayoutSupported = function isLayoutSupported(state, selectedExtNode) {
+  var _state$schema$nodes = state.schema.nodes,
+    bodiedExtension = _state$schema$nodes.bodiedExtension,
+    extension = _state$schema$nodes.extension,
+    layoutSection = _state$schema$nodes.layoutSection,
+    table = _state$schema$nodes.table,
+    expand = _state$schema$nodes.expand,
+    multiBodiedExtension = _state$schema$nodes.multiBodiedExtension,
+    selection = state.selection;
+  if (!selectedExtNode) {
+    return false;
+  }
+  return !!((selectedExtNode.node.type === bodiedExtension || selectedExtNode.node.type === multiBodiedExtension || selectedExtNode.node.type === extension && !(0, _utils2.hasParentNodeOfType)([bodiedExtension, table, expand].filter(Boolean))(selection)) && !(0, _utils2.hasParentNodeOfType)([layoutSection])(selection));
+};
+var breakoutOptions = function breakoutOptions(state, formatMessage, extensionState, breakoutEnabled) {
+  var nodeWithPos = (0, _utils3.getSelectedExtension)(state, true);
+
+  // we should only return breakout options when breakouts are enabled and the node supports them
+  if (nodeWithPos && breakoutEnabled && isLayoutSupported(state, nodeWithPos)) {
+    var layout = nodeWithPos.node.attrs.layout;
+    return [{
+      type: 'button',
+      icon: _mediaCenter.default,
+      onClick: (0, _commands.updateExtensionLayout)('default'),
+      selected: layout === 'default',
+      title: formatMessage(_messages.default.layoutFixedWidth),
+      tabIndex: null
+    }, {
+      type: 'button',
+      icon: _mediaWide.default,
+      onClick: (0, _commands.updateExtensionLayout)('wide'),
+      selected: layout === 'wide',
+      title: formatMessage(_messages.default.layoutWide),
+      tabIndex: null
+    }, {
+      type: 'button',
+      icon: _mediaFullWidth.default,
+      onClick: (0, _commands.updateExtensionLayout)('full-width'),
+      selected: layout === 'full-width',
+      title: formatMessage(_messages.default.layoutFullWidth),
+      tabIndex: null
+    }];
+  }
+  return [];
+};
+var editButton = function editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) {
+  if (!extensionState.showEditButton) {
+    return [];
+  }
+  return [{
+    id: 'editor.extension.edit',
+    type: 'button',
+    icon: _edit.default,
+    testId: 'extension-toolbar-edit-button',
+    // Taking the latest `updateExtension` from plugin state to avoid race condition @see ED-8501
+    onClick: function onClick(state, dispatch, view) {
+      var macroState = _pluginKey.pluginKey.getState(state);
+      var _getPluginState = (0, _main.getPluginState)(state),
+        updateExtension = _getPluginState.updateExtension;
+      (0, _actions.editExtension)(macroState && macroState.macroProvider, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(state, dispatch, view);
+      return true;
+    },
+    title: formatMessage(messages.edit),
+    tabIndex: null,
+    focusEditoronEnter: true
+  }];
+};
+var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref) {
+  var _ref$breakoutEnabled = _ref.breakoutEnabled,
+    breakoutEnabled = _ref$breakoutEnabled === void 0 ? true : _ref$breakoutEnabled,
+    hoverDecoration = _ref.hoverDecoration,
+    applyChangeToContextPanel = _ref.applyChangeToContextPanel,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
+  return function (state, intl) {
+    var formatMessage = intl.formatMessage;
+    var extensionState = (0, _main.getPluginState)(state);
+    if (extensionState && !extensionState.showContextPanel && extensionState.element) {
+      var nodeType = [state.schema.nodes.extension, state.schema.nodes.inlineExtension, state.schema.nodes.bodiedExtension, state.schema.nodes.multiBodiedExtension];
+      var editButtonArray = editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI);
+      var breakoutButtonArray = breakoutOptions(state, formatMessage, extensionState, breakoutEnabled);
+      var extensionObj = (0, _utils3.getSelectedExtension)(state, true);
+
+      // Check if we need to show confirm dialog for delete button
+      var confirmDialog;
+      if ((0, _utils.isReferencedSource)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node)) {
+        confirmDialog = function confirmDialog() {
+          var localSourceName = formatMessage(messages.unnamedSource);
+          return {
+            title: formatMessage(messages.deleteElementTitle),
+            okButtonLabel: formatMessage(messages.confirmDeleteLinkedModalOKButton),
+            message: formatMessage(messages.confirmDeleteLinkedModalMessage, {
+              nodeName: (0, _utils.getNodeName)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
+            }),
+            isReferentialityDialog: true,
+            getChildrenInfo: function getChildrenInfo() {
+              return (0, _utils.getChildrenInfo)(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
+            },
+            checkboxLabel: formatMessage(messages.confirmModalCheckboxLabel),
+            onConfirm: function onConfirm() {
+              var isChecked = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+              return clickWithCheckboxHandler(isChecked, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node);
+            }
+          };
+        };
+      }
+      return {
+        title: 'Extension floating controls',
+        getDomRef: function getDomRef() {
+          return extensionState.element.parentElement || undefined;
+        },
+        nodeType: nodeType,
+        onPositionCalculated: function onPositionCalculated(editorView, nextPos) {
+          var _editorView$state = editorView.state,
+            schema = _editorView$state.schema,
+            selection = _editorView$state.selection;
+          var mbeNode = (0, _utils3.getSelectedExtension)(state, true);
+          var mbeFrame = (0, _utils2.findParentNodeOfType)(schema.nodes.extensionFrame)(selection);
+          if (!mbeNode || !mbeFrame) {
+            return nextPos;
+          }
+          var mbeDomElement = editorView.nodeDOM(mbeNode.pos);
+          var mbeFrameElement = editorView.nodeDOM(mbeFrame.pos);
+          var mbeNodeRect = mbeDomElement === null || mbeDomElement === void 0 ? void 0 : mbeDomElement.getBoundingClientRect();
+          var mbeFrameRect = mbeFrameElement.getBoundingClientRect();
+          var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
+
+          /**
+           * MbeNodeRect height will include mbeFrameRect height and the navigation toolbar of the MBE
+           * excluding nav toolbar height from the floaing extention toolbar position calculated.
+           * In case of new tabs, MBE does not update the frame to the new tab so height comes as 0,
+           * so we add the min height (100px) + borders (2px) as the default minimum frame height for toolbar to appear
+           *
+           */
+          var frameheight = mbeFrameRect.height > 0 ? mbeFrameRect.height : 102;
+          return {
+            top: mbeNodeRect.top + frameheight + scrollWrapper.scrollTop,
+            left: nextPos.left
+          };
+        },
+        items: [].concat((0, _toConsumableArray2.default)(editButtonArray), (0, _toConsumableArray2.default)(breakoutButtonArray), [{
+          type: 'separator',
+          hidden: editButtonArray.length === 0 && breakoutButtonArray.length === 0
+        }, {
+          type: 'extensions-placeholder',
+          separator: 'end'
+        }, {
+          type: 'copy-button',
+          items: [{
+            state: state,
+            formatMessage: intl.formatMessage,
+            nodeType: nodeType
+          }, {
+            type: 'separator'
+          }]
+        }, {
+          id: 'editor.extension.delete',
+          type: 'button',
+          icon: _remove.default,
+          appearance: 'danger',
+          onClick: (0, _commands.removeExtension)(editorAnalyticsAPI),
+          onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
+          onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
+          onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true),
+          onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false),
+          focusEditoronEnter: true,
+          title: formatMessage(_messages.default.remove),
+          tabIndex: null,
+          confirmDialog: confirmDialog
+        }]),
+        scrollable: true
+      };
+    }
+    return;
+  };
+};
+var clickWithCheckboxHandler = function clickWithCheckboxHandler(isChecked, node) {
+  return function (state, dispatch) {
+    if (!node) {
+      return false;
+    }
+    if (!isChecked) {
+      (0, _commands.removeExtension)()(state, dispatch);
+    } else {
+      (0, _commands.removeDescendantNodes)(node)(state, dispatch);
+    }
+    return true;
+  };
+};