@atlaskit/editor-plugin-extension 0.4.2 → 0.5.0

package/dist/esm/toolbar.js

@@ -0,0 +1,235 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { defineMessages } from 'react-intl-next';
+import commonMessages from '@atlaskit/editor-common/messages';
+import { getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
+import { findParentNodeOfType, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import EditIcon from '@atlaskit/icon/glyph/editor/edit';
+import CenterIcon from '@atlaskit/icon/glyph/editor/media-center';
+import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
+import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { editExtension } from './actions';
+import { removeDescendantNodes, removeExtension, updateExtensionLayout } from './commands';
+import { pluginKey as macroPluginKey } from './pm-plugins/macro/plugin-key';
+import { getPluginState } from './pm-plugins/main';
+import { getSelectedExtension } from './utils';
+export var messages = 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 && !hasParentNodeOfType([bodiedExtension, table, expand].filter(Boolean))(selection)) && !hasParentNodeOfType([layoutSection])(selection));
+};
+var breakoutOptions = function breakoutOptions(state, formatMessage, extensionState, breakoutEnabled) {
+  var nodeWithPos = 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: CenterIcon,
+      onClick: updateExtensionLayout('default'),
+      selected: layout === 'default',
+      title: formatMessage(commonMessages.layoutFixedWidth),
+      tabIndex: null
+    }, {
+      type: 'button',
+      icon: WideIcon,
+      onClick: updateExtensionLayout('wide'),
+      selected: layout === 'wide',
+      title: formatMessage(commonMessages.layoutWide),
+      tabIndex: null
+    }, {
+      type: 'button',
+      icon: FullWidthIcon,
+      onClick: updateExtensionLayout('full-width'),
+      selected: layout === 'full-width',
+      title: formatMessage(commonMessages.layoutFullWidth),
+      tabIndex: null
+    }];
+  }
+  return [];
+};
+var editButton = function editButton(formatMessage, extensionState, applyChangeToContextPanel, editorAnalyticsAPI) {
+  if (!extensionState.showEditButton) {
+    return [];
+  }
+  return [{
+    id: 'editor.extension.edit',
+    type: 'button',
+    icon: EditIcon,
+    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 = macroPluginKey.getState(state);
+      var _getPluginState = getPluginState(state),
+        updateExtension = _getPluginState.updateExtension;
+      editExtension(macroState && macroState.macroProvider, applyChangeToContextPanel, editorAnalyticsAPI, updateExtension)(state, dispatch, view);
+      return true;
+    },
+    title: formatMessage(messages.edit),
+    tabIndex: null,
+    focusEditoronEnter: true
+  }];
+};
+export var 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 = 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 = getSelectedExtension(state, true);
+
+      // Check if we need to show confirm dialog for delete button
+      var confirmDialog;
+      if (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: getNodeName(state, extensionObj === null || extensionObj === void 0 ? void 0 : extensionObj.node) || localSourceName
+            }),
+            isReferentialityDialog: true,
+            getChildrenInfo: function getChildrenInfo() {
+              return _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 = getSelectedExtension(state, true);
+          var mbeFrame = 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(_toConsumableArray(editButtonArray), _toConsumableArray(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: RemoveIcon,
+          appearance: 'danger',
+          onClick: 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(commonMessages.remove),
+          tabIndex: null,
+          confirmDialog: confirmDialog
+        }]),
+        scrollable: true
+      };
+    }
+    return;
+  };
+};
+var clickWithCheckboxHandler = function clickWithCheckboxHandler(isChecked, node) {
+  return function (state, dispatch) {
+    if (!node) {
+      return false;
+    }
+    if (!isChecked) {
+      removeExtension()(state, dispatch);
+    } else {
+      removeDescendantNodes(node)(state, dispatch);
+    }
+    return true;
+  };
+};