@atlaskit/editor-plugin-breakout 24.0.3 → 24.0.4

package/dist/esm/pm-plugins/utils/is-breakout-mark-allowed.js

@@ -1,22 +0,0 @@
-import { findSupportedNodeForBreakout } from './find-breakout-node';
-
-/**
- * Check if breakout should be allowed for the current selection. If a node is selected,
- * can this node be broken out, if text, can the enclosing parent node be broken out.
- *
- * Currently breakout of a node is not possible if it's nested in anything but the document, however
- * this logic supports this changing.
- */
-export function isBreakoutMarkAllowed(state) {
-  if (!state.schema.marks.breakout) {
-    return false;
-  }
-  var supportedNodeParent = findSupportedNodeForBreakout(state.selection);
-  if (!supportedNodeParent) {
-    return false;
-  }
-  // At the moment we can only breakout when the depth is 0, ie. doc is the only node
-  // that supports breakout. This *could* change though.
-  var parent = state.selection.$from.node(supportedNodeParent.depth);
-  return parent.type.allowsMarkType(state.schema.marks.breakout);
-}

package/dist/esm/pm-plugins/utils/is-supported-node.js

@@ -1,14 +0,0 @@
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
-var supportedNodesForBreakout = ['codeBlock', 'layoutSection', 'expand'];
-var supportedNodesForBreakoutAdvancedLayouts = ['codeBlock', 'expand'];
-
-/**
- * Check if breakout can be applied to a node
- * @param node Node to check
- */
-export function isSupportedNodeForBreakout(node) {
-  if (editorExperiment('advanced_layouts', true)) {
-    return supportedNodesForBreakoutAdvancedLayouts.indexOf(node.type.name) !== -1;
-  }
-  return supportedNodesForBreakout.indexOf(node.type.name) !== -1;
-}

package/dist/esm/ui/LayoutButton.js

@@ -1,166 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { useCallback } from 'react';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { injectIntl } from 'react-intl';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { BreakoutCssClassName } from '@atlaskit/editor-common/styles';
-import { Popup } from '@atlaskit/editor-common/ui';
-import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findDomRefAtPos, findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
-import GrowHorizontalIcon from '@atlaskit/icon/core/grow-horizontal';
-import ShrinkHorizontalIcon from '@atlaskit/icon/core/shrink-horizontal';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-atlaskit-theme
-import { layers } from '@atlaskit/theme/constants';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/editor-experiment';
-import { removeBreakout } from '../editor-commands/remove-breakout';
-import { setBreakoutMode } from '../editor-commands/set-breakout-mode';
-import { getPluginState } from '../pm-plugins/plugin-key';
-import { isBreakoutMarkAllowed } from '../pm-plugins/utils/is-breakout-mark-allowed';
-import { isSupportedNodeForBreakout } from '../pm-plugins/utils/is-supported-node';
-var toolbarButtonWrapperStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&& button': {
-    background: "var(--ds-background-neutral, #0515240F)",
-    color: "var(--ds-icon, #292A2E)",
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-    ':hover': {
-      background: "var(--ds-background-neutral-hovered, #0B120E24)",
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      color: "var(--ds-icon, #292A2E)".concat(" !important")
-    }
-  }
-});
-var toolbarButtonNarrowScreenStyles = css(_defineProperty({}, "@container editor-area (max-width: ".concat(akEditorFullPageNarrowBreakout, "px)"), {
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&& button': {
-    visibility: 'hidden',
-    opacity: 0
-  }
-}));
-function getBreakoutNodeElement(pluginState, selection, editorView) {
-  if (!pluginState.breakoutNode) {
-    return undefined;
-  }
-  if (selection instanceof NodeSelection && isSupportedNodeForBreakout(selection.node)) {
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    return findDomRefAtPos(selection.from, editorView.domAtPos.bind(editorView));
-  }
-  // Ignored via go/ees005
-  // eslint-disable-next-line @atlaskit/editor/no-as-casting
-  return findParentDomRefOfType(pluginState.breakoutNode.node.type, editorView.domAtPos.bind(editorView))(selection);
-}
-var LayoutButton = function LayoutButton(_ref) {
-  var _api$analytics3;
-  var formatMessage = _ref.intl.formatMessage,
-    mountPoint = _ref.mountPoint,
-    boundariesElement = _ref.boundariesElement,
-    scrollableElement = _ref.scrollableElement,
-    editorView = _ref.editorView,
-    isLivePage = _ref.isLivePage,
-    isBreakoutNodePresent = _ref.isBreakoutNodePresent,
-    breakoutModeProp = _ref.breakoutMode,
-    api = _ref.api;
-  var handleClick = useCallback(function (breakoutMode) {
-    var _getPluginState;
-    if (!editorView) {
-      return;
-    }
-    var state = editorView.state,
-      dispatch = editorView.dispatch;
-    var breakoutNode = (_getPluginState = getPluginState(state)) === null || _getPluginState === void 0 ? void 0 : _getPluginState.breakoutNode;
-    if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
-      var _api$analytics;
-      setBreakoutMode(breakoutMode, isLivePage)(state, dispatch);
-      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
-        action: ACTION.CHANGED_BREAKOUT_MODE,
-        actionSubject: ACTION_SUBJECT.ELEMENT,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          mode: breakoutMode,
-          nodeType: breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node.type.name
-        }
-      });
-    } else {
-      var _api$analytics2;
-      removeBreakout(isLivePage)(state, dispatch);
-      api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.fireAnalyticsEvent({
-        action: ACTION.CHANGED_BREAKOUT_MODE,
-        actionSubject: ACTION_SUBJECT.ELEMENT,
-        eventType: EVENT_TYPE.TRACK,
-        attributes: {
-          mode: 'center',
-          nodeType: breakoutNode === null || breakoutNode === void 0 ? void 0 : breakoutNode.node.type.name
-        }
-      });
-    }
-  }, [api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, editorView, isLivePage]);
-  if (!editorView) {
-    return null;
-  }
-  if (!isBreakoutNodePresent || !isBreakoutMarkAllowed(editorView.state)) {
-    return null;
-  }
-  var breakoutMode = breakoutModeProp;
-  var titleMessage = getTitle(breakoutMode);
-  var title = formatMessage(titleMessage);
-  var nextBreakoutMode = getNextBreakoutMode(breakoutMode);
-  var belowOtherPopupsZIndex = layers.layer() - 1;
-  var pluginState = getPluginState(editorView.state);
-  if (!pluginState) {
-    return null;
-  }
-  var element = getBreakoutNodeElement(pluginState, editorView.state.selection, editorView);
-  if (!element) {
-    return null;
-  }
-  var closestEl = element.querySelector(".".concat(BreakoutCssClassName.BREAKOUT_MARK_DOM));
-  if (closestEl && closestEl.firstChild) {
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    element = closestEl.firstChild;
-  }
-  return jsx(Popup, {
-    ariaLabel: title,
-    target: element
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    offset: [5, 0],
-    alignY: "start",
-    alignX: "end",
-    mountTo: mountPoint,
-    boundariesElement: boundariesElement,
-    scrollableElement: scrollableElement,
-    stick: true,
-    forcePlacement: true,
-    zIndex: belowOtherPopupsZIndex
-  }, jsx("div", {
-    css: [toolbarButtonWrapperStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && toolbarButtonNarrowScreenStyles]
-  }, jsx(ToolbarButton, {
-    title: title,
-    testId: titleMessage.id
-    // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
-    ,
-    onClick: function onClick() {
-      return handleClick(nextBreakoutMode);
-    },
-    iconBefore: breakoutMode === 'full-width' ? jsx(ShrinkHorizontalIcon, {
-      label: title,
-      spacing: "spacious"
-    }) : jsx(GrowHorizontalIcon, {
-      label: title,
-      spacing: "spacious"
-    })
-  })));
-};
-LayoutButton.displayName = 'LayoutButton';
-var _default_1 = injectIntl(LayoutButton);
-export default _default_1;

package/dist/types/editor-commands/remove-breakout.d.ts

@@ -1,2 +0,0 @@
-import type { Command } from '@atlaskit/editor-common/types';
-export declare function removeBreakout(isLivePage?: boolean): Command;

package/dist/types/editor-commands/set-breakout-mode.d.ts

@@ -1,2 +0,0 @@
-import type { BreakoutMode, Command } from '@atlaskit/editor-common/types';
-export declare function setBreakoutMode(mode: BreakoutMode, isLivePage?: boolean): Command;

package/dist/types/pm-plugins/plugin-key.d.ts

@@ -1,5 +0,0 @@
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { BreakoutPluginState } from '../breakoutPluginType';
-export declare const pluginKey: PluginKey<BreakoutPluginState>;
-export declare const getPluginState: (state: EditorState) => BreakoutPluginState | undefined;

package/dist/types/pm-plugins/utils/find-breakout-node.d.ts

@@ -1,9 +0,0 @@
-import type { Selection } from '@atlaskit/editor-prosemirror/state';
-import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-/**
- * Find the nearest parent node to the selection that supports breakout, or if the nearest
- * matching parent node is the doc, return undefined.
- * For depth, if a node is selected and supports breakout, return the depth of the node.
- * @param selection Current editor selection
- */
-export declare function findSupportedNodeForBreakout(selection: Selection): ContentNodeWithPos | undefined;

package/dist/types/pm-plugins/utils/get-breakout-mode.d.ts

@@ -1,7 +0,0 @@
-import type { BreakoutMode } from '@atlaskit/editor-common/types';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-/**
- * Get the current mode of the breakout at the selection
- * @param state Current EditorState
- */
-export declare function getBreakoutMode(state: EditorState): BreakoutMode | undefined;

package/dist/types/pm-plugins/utils/is-breakout-mark-allowed.d.ts

@@ -1,9 +0,0 @@
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-/**
- * Check if breakout should be allowed for the current selection. If a node is selected,
- * can this node be broken out, if text, can the enclosing parent node be broken out.
- *
- * Currently breakout of a node is not possible if it's nested in anything but the document, however
- * this logic supports this changing.
- */
-export declare function isBreakoutMarkAllowed(state: EditorState): boolean;

package/dist/types/pm-plugins/utils/is-supported-node.d.ts

@@ -1,6 +0,0 @@
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-/**
- * Check if breakout can be applied to a node
- * @param node Node to check
- */
-export declare function isSupportedNodeForBreakout(node: PMNode): boolean;

package/dist/types/ui/LayoutButton.d.ts

@@ -1,20 +0,0 @@
-import type { ComponentType, FC } from 'react';
-import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
-import type { BreakoutMode, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { BreakoutPlugin } from '../breakoutPluginType';
-export interface Props {
-    api: ExtractInjectionAPI<BreakoutPlugin> | undefined;
-    boundariesElement?: HTMLElement;
-    breakoutMode: BreakoutMode | undefined;
-    editorView: EditorView | undefined;
-    handleClick?: Function;
-    isBreakoutNodePresent: boolean;
-    isLivePage?: boolean;
-    mountPoint?: HTMLElement;
-    scrollableElement?: HTMLElement;
-}
-declare const _default_1: FC<WithIntlProps<Props & WrappedComponentProps>> & {
-    WrappedComponent: ComponentType<Props & WrappedComponentProps>;
-};
-export default _default_1;