@atlaskit/editor-plugin-breakout 0.1.0

package/dist/esm/ui/LayoutButton.js

@@ -0,0 +1,106 @@
+/** @jsx jsx */
+import { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+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 CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
+import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
+import { B300, N20A, N300 } from '@atlaskit/theme/colors';
+import { layers } from '@atlaskit/theme/constants';
+import { removeBreakout } from '../commands/remove-breakout';
+import { setBreakoutMode } from '../commands/set-breakout-mode';
+import { getPluginState } from '../plugin-key';
+import { getBreakoutMode } from '../utils/get-breakout-mode';
+import { isBreakoutMarkAllowed } from '../utils/is-breakout-mark-allowed';
+import { isSupportedNodeForBreakout } from '../utils/is-supported-node';
+var toolbarButtonWrapperStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '&& button': {
+    background: "var(--ds-background-neutral, ".concat(N20A, ")"),
+    color: "var(--ds-icon, ".concat(N300, ")"),
+    ':hover': {
+      background: "var(--ds-background-neutral-hovered, ".concat(B300, ")"),
+      color: "var(--ds-icon, white)".concat(" !important")
+    }
+  }
+});
+function getBreakoutNodeElement(pluginState, selection, editorView) {
+  if (!pluginState.breakoutNode) {
+    return undefined;
+  }
+  if (selection instanceof NodeSelection && isSupportedNodeForBreakout(selection.node)) {
+    return findDomRefAtPos(selection.from, editorView.domAtPos.bind(editorView));
+  }
+  return findParentDomRefOfType(pluginState.breakoutNode.node.type, editorView.domAtPos.bind(editorView))(selection);
+}
+var LayoutButton = function LayoutButton(_ref) {
+  var formatMessage = _ref.intl.formatMessage,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement,
+    editorView = _ref.editorView,
+    node = _ref.node;
+  var handleClick = useCallback(function (breakoutMode) {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    if (['wide', 'full-width'].indexOf(breakoutMode) !== -1) {
+      setBreakoutMode(breakoutMode)(state, dispatch);
+    } else {
+      removeBreakout()(state, dispatch);
+    }
+  }, [editorView]);
+  var state = editorView.state;
+  if (!node || !isBreakoutMarkAllowed(state)) {
+    return null;
+  }
+  var breakoutMode = getBreakoutMode(editorView.state);
+  var titleMessage = getTitle(breakoutMode);
+  var title = formatMessage(titleMessage);
+  var nextBreakoutMode = getNextBreakoutMode(breakoutMode);
+  var belowOtherPopupsZIndex = layers.layer() - 1;
+  var pluginState = getPluginState(state);
+  if (!pluginState) {
+    return null;
+  }
+  var element = getBreakoutNodeElement(pluginState, state.selection, editorView);
+  if (!element) {
+    return null;
+  }
+  var closestEl = element.querySelector(".".concat(BreakoutCssClassName.BREAKOUT_MARK_DOM));
+  if (closestEl && closestEl.firstChild) {
+    element = closestEl.firstChild;
+  }
+  return jsx(Popup, {
+    ariaLabel: title,
+    target: element,
+    offset: [5, 0],
+    alignY: "start",
+    alignX: "end",
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    stick: true,
+    forcePlacement: true,
+    zIndex: belowOtherPopupsZIndex
+  }, jsx("div", {
+    css: toolbarButtonWrapperStyles
+  }, jsx(ToolbarButton, {
+    title: title,
+    testId: titleMessage.id,
+    onClick: function onClick() {
+      return handleClick(nextBreakoutMode);
+    },
+    iconBefore: breakoutMode === 'full-width' ? jsx(CollapseIcon, {
+      label: title
+    }) : jsx(ExpandIcon, {
+      label: title
+    })
+  })));
+};
+LayoutButton.displayName = 'LayoutButton';
+export default injectIntl(LayoutButton);

package/dist/esm/utils/find-breakout-node.js

@@ -0,0 +1,37 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
+import { isSupportedNodeForBreakout } from './is-supported-node';
+
+/**
+ * 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 function findSupportedNodeForBreakout(selection) {
+  if (selection instanceof NodeSelection) {
+    var supportsBreakout = isSupportedNodeForBreakout(selection.node);
+    if (supportsBreakout) {
+      return {
+        pos: selection.from,
+        start: selection.from,
+        node: selection.node,
+        // If a selected expand is in a doc, the depth of that expand is 0. Therefore
+        // we don't need to subtract 1 or instantly return false if the depth is 0
+        depth: selection.$anchor.depth
+      };
+    }
+  }
+  var breakoutNode = findParentNode(isSupportedNodeForBreakout)(selection);
+  if (!breakoutNode || breakoutNode.depth === 0) {
+    // If this node doesn't exist or the only supporting node is the document
+    // (with depth 0), then we're not inside a node that supports breakout
+    return undefined;
+  }
+  return {
+    node: breakoutNode.node,
+    start: breakoutNode.start,
+    pos: breakoutNode.pos,
+    depth: breakoutNode.depth - 1
+  };
+}

package/dist/esm/utils/get-breakout-mode.js

@@ -0,0 +1,19 @@
+import { findSupportedNodeForBreakout } from './find-breakout-node';
+
+/**
+ * Get the current mode of the breakout at the selection
+ * @param state Current EditorState
+ */
+export function getBreakoutMode(state) {
+  var node = findSupportedNodeForBreakout(state.selection);
+  if (!node) {
+    return;
+  }
+  var breakoutMark = node.node.marks.find(function (m) {
+    return m.type.name === 'breakout';
+  });
+  if (!breakoutMark) {
+    return;
+  }
+  return breakoutMark.attrs.mode;
+}

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

@@ -0,0 +1,22 @@
+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/utils/is-supported-node.js

@@ -0,0 +1,9 @@
+var supportedNodesForBreakout = ['codeBlock', 'layoutSection', 'expand'];
+
+/**
+ * Check if breakout can be applied to a node
+ * @param node Node to check
+ */
+export function isSupportedNodeForBreakout(node) {
+  return supportedNodesForBreakout.indexOf(node.type.name) !== -1;
+}

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

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

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

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

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { breakoutPlugin } from './plugin';
+export type { BreakoutPlugin } from './plugin';

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

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

package/dist/types/plugin.d.ts

@@ -0,0 +1,13 @@
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
+import type { BreakoutPluginState } from './types';
+interface BreakoutPluginOptions {
+    allowBreakoutButton?: boolean;
+}
+export type BreakoutPlugin = NextEditorPlugin<'breakout', {
+    pluginConfiguration: BreakoutPluginOptions | undefined;
+    dependencies: [WidthPlugin];
+    sharedState: Partial<BreakoutPluginState>;
+}>;
+export declare const breakoutPlugin: BreakoutPlugin;
+export {};

package/dist/types/types.d.ts

@@ -0,0 +1,4 @@
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+export interface BreakoutPluginState {
+    breakoutNode: ContentNodeWithPos | undefined;
+}

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export interface Props {
+    editorView: EditorView;
+    mountPoint?: HTMLElement;
+    node: PMNode | null;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    handleClick?: Function;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
+};
+export default _default;

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

@@ -0,0 +1,9 @@
+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/utils/get-breakout-mode.d.ts

@@ -0,0 +1,7 @@
+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/utils/is-breakout-mark-allowed.d.ts

@@ -0,0 +1,9 @@
+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/utils/is-supported-node.d.ts

@@ -0,0 +1,6 @@
+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-ts4.5/commands/remove-breakout.d.ts

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

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

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

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,2 @@
+export { breakoutPlugin } from './plugin';
+export type { BreakoutPlugin } from './plugin';

package/dist/types-ts4.5/plugin-key.d.ts

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

package/dist/types-ts4.5/plugin.d.ts

@@ -0,0 +1,15 @@
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
+import type { BreakoutPluginState } from './types';
+interface BreakoutPluginOptions {
+    allowBreakoutButton?: boolean;
+}
+export type BreakoutPlugin = NextEditorPlugin<'breakout', {
+    pluginConfiguration: BreakoutPluginOptions | undefined;
+    dependencies: [
+        WidthPlugin
+    ];
+    sharedState: Partial<BreakoutPluginState>;
+}>;
+export declare const breakoutPlugin: BreakoutPlugin;
+export {};

package/dist/types-ts4.5/types.d.ts

@@ -0,0 +1,4 @@
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+export interface BreakoutPluginState {
+    breakoutNode: ContentNodeWithPos | undefined;
+}

package/dist/types-ts4.5/ui/LayoutButton.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export interface Props {
+    editorView: EditorView;
+    mountPoint?: HTMLElement;
+    node: PMNode | null;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    handleClick?: Function;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<Props & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types-ts4.5/utils/find-breakout-node.d.ts

@@ -0,0 +1,9 @@
+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-ts4.5/utils/get-breakout-mode.d.ts

@@ -0,0 +1,7 @@
+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-ts4.5/utils/is-breakout-mark-allowed.d.ts

@@ -0,0 +1,9 @@
+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-ts4.5/utils/is-supported-node.d.ts

@@ -0,0 +1,6 @@
+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/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@atlaskit/editor-plugin-breakout",
+  "version": "0.1.0",
+  "description": "Breakout plugin for @atlaskit/editor-core",
+  "author": "Atlassian Pty Ltd",
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "atlassian": {
+    "team": "Editor: Media Experience Porygon",
+    "singleton": true,
+    "releaseModel": "continuous"
+  },
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "module:es2019": "dist/es2019/index.js",
+  "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "sideEffects": false,
+  "atlaskit:src": "src/index.ts",
+  "af:exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@atlaskit/adf-schema": "^35.2.0",
+    "@atlaskit/editor-common": "^76.28.0",
+    "@atlaskit/editor-plugin-width": "^0.2.0",
+    "@atlaskit/editor-prosemirror": "1.1.0",
+    "@atlaskit/editor-shared-styles": "^2.8.0",
+    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/theme": "^12.6.0",
+    "@atlaskit/tokens": "^1.31.0",
+    "@babel/runtime": "^7.0.0",
+    "@emotion/react": "^11.7.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-intl-next": "npm:react-intl@^5.18.1"
+  },
+  "devDependencies": {
+    "@af/integration-testing": "*",
+    "@af/visual-regression": "*",
+    "@atlaskit/editor-plugin-code-block": "^0.1.0",
+    "@atlaskit/editor-plugin-composition": "^0.1.0",
+    "@atlaskit/editor-plugin-decorations": "^0.2.0",
+    "@atlaskit/ssr": "*",
+    "@atlaskit/visual-regression": "*",
+    "@atlaskit/webdriver-runner": "*",
+    "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
+    "@testing-library/react": "^12.1.5",
+    "react-dom": "^16.8.0",
+    "typescript": "~4.9.5",
+    "wait-for-expect": "^1.2.0"
+  },
+  "techstack": {
+    "@atlassian/frontend": {
+      "import-structure": [
+        "atlassian-conventions"
+      ],
+      "circular-dependencies": [
+        "file-and-folder-level"
+      ]
+    },
+    "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "analytics": [
+        "analytics-next"
+      ],
+      "design-tokens": [
+        "color"
+      ],
+      "theming": [
+        "react-context"
+      ],
+      "ui-components": [
+        "lite-mode"
+      ],
+      "deprecation": [
+        "no-deprecated-imports"
+      ],
+      "styling": [
+        "static",
+        "emotion"
+      ],
+      "imports": [
+        "import-no-extraneous-disable-for-examples-and-docs"
+      ]
+    }
+  },
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+}