@atlaskit/editor-plugin-breakout 2.5.3 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-breakout
 
+## 2.6.0
+
+### Minor Changes
+
+- [#166502](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/166502)
+  [`ea1ed63fc9615`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ea1ed63fc9615) -
+  ED-28032 add keyboard shortcuts for new resizing experience behind
+  platform_editor_breakout_resizing
+
 ## 2.5.3
 
 ### Patch Changes

package/dist/cjs/editor-commands/set-breakout-width.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.setBreakoutWidth = setBreakoutWidth;
 var _codeBlock = require("@atlaskit/editor-common/code-block");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _singlePlayerExpand = require("../pm-plugins/utils/single-player-expand");
 function setBreakoutWidth(width, mode, pos, isLivePage) {
@@ -34,6 +35,11 @@ function setBreakoutWidth(width, mode, pos, isLivePage) {
     if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
       tr.setMeta('scrollIntoView', false);
     }
+
+    // keep current selection, necessary to not remove NodeSelection for keyboard resizing
+    if (state.selection instanceof _state.NodeSelection && state.selection.node.eq(node) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+      tr.setSelection(_state.NodeSelection.create(tr.doc, pos));
+    }
     if (dispatch) {
       dispatch(tr);
     }

package/dist/cjs/pm-plugins/handle-key-down.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleKeyDown = void 0;
+var _browser = require("@atlaskit/editor-common/browser");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _setBreakoutWidth = require("../editor-commands/set-breakout-width");
+var KEYBOARD_RESIZE_STEP = 10;
+var getAncestorResizableNode = function getAncestorResizableNode(view, breakoutResizableNodes) {
+  var selection = view.state.selection;
+  if (selection instanceof _state.NodeSelection) {
+    var selectedNode = selection.node;
+    if (breakoutResizableNodes.has(selectedNode.type)) {
+      return {
+        node: selectedNode,
+        pos: selection.$from.pos
+      };
+    }
+  } else if (selection instanceof _state.TextSelection) {
+    var node = null;
+    var nodePos = null;
+
+    // only top level nodes are resizable
+    var resolvedPos = view.state.doc.resolve(selection.$from.pos);
+    var currentNode = resolvedPos.node(1);
+    if (breakoutResizableNodes.has(currentNode.type)) {
+      node = currentNode;
+      nodePos = resolvedPos.before(1);
+      return {
+        node: node,
+        pos: nodePos
+      };
+    }
+  }
+  return null;
+};
+var handleKeyDown = exports.handleKeyDown = function handleKeyDown(view, event) {
+  if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_hello_release')) {
+    var metaKey = _browser.browser.mac ? event.metaKey : event.ctrlKey;
+    var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
+    if (metaKey && event.altKey && isBracketKey) {
+      var _view$state$schema$no = view.state.schema.nodes,
+        expand = _view$state$schema$no.expand,
+        codeBlock = _view$state$schema$no.codeBlock,
+        layoutSection = _view$state$schema$no.layoutSection;
+      var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
+      var result = getAncestorResizableNode(view, breakoutResizableNodes);
+      if (result) {
+        var node = result.node,
+          pos = result.pos;
+        var breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(function (mark) {
+          return mark.type.name === 'breakout';
+        });
+        if (breakoutMark) {
+          var step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
+          var newWidth = breakoutMark.attrs.width + step;
+          if (newWidth < _editorSharedStyles.akEditorFullWidthLayoutWidth && newWidth > _editorSharedStyles.akEditorDefaultLayoutWidth) {
+            (0, _setBreakoutWidth.setBreakoutWidth)(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos)(view.state, view.dispatch);
+            view.focus();
+          }
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+};

package/dist/cjs/pm-plugins/resizing-plugin.js

@@ -9,6 +9,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _document = require("@atlaskit/editor-common/utils/document");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _handleKeyDown = require("./handle-key-down");
 var _resizingMarkView = require("./resizing-mark-view");
 var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
   var node = _ref.node,
@@ -56,7 +57,8 @@ var createResizingPlugin = exports.createResizingPlugin = function createResizin
         breakout: function breakout(mark, view) {
           return new _resizingMarkView.ResizingMarkView(mark, view, api);
         }
-      }
+      },
+      handleKeyDown: _handleKeyDown.handleKeyDown
     },
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
       var newTr = newState.tr;

package/dist/es2019/editor-commands/set-breakout-width.js

@@ -1,4 +1,5 @@
 import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { updateExpandedStateNew } from '../pm-plugins/utils/single-player-expand';
 export function setBreakoutWidth(width, mode, pos, isLivePage) {
@@ -28,6 +29,11 @@ export function setBreakoutWidth(width, mode, pos, isLivePage) {
     if (fg('platform_editor_breakout_resizing_hello_release')) {
       tr.setMeta('scrollIntoView', false);
     }
+
+    // keep current selection, necessary to not remove NodeSelection for keyboard resizing
+    if (state.selection instanceof NodeSelection && state.selection.node.eq(node) && fg('platform_editor_breakout_resizing_hello_release')) {
+      tr.setSelection(NodeSelection.create(tr.doc, pos));
+    }
     if (dispatch) {
       dispatch(tr);
     }

package/dist/es2019/pm-plugins/handle-key-down.js

@@ -0,0 +1,66 @@
+import { browser } from '@atlaskit/editor-common/browser';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
+const KEYBOARD_RESIZE_STEP = 10;
+const getAncestorResizableNode = (view, breakoutResizableNodes) => {
+  const selection = view.state.selection;
+  if (selection instanceof NodeSelection) {
+    const selectedNode = selection.node;
+    if (breakoutResizableNodes.has(selectedNode.type)) {
+      return {
+        node: selectedNode,
+        pos: selection.$from.pos
+      };
+    }
+  } else if (selection instanceof TextSelection) {
+    let node = null;
+    let nodePos = null;
+
+    // only top level nodes are resizable
+    const resolvedPos = view.state.doc.resolve(selection.$from.pos);
+    const currentNode = resolvedPos.node(1);
+    if (breakoutResizableNodes.has(currentNode.type)) {
+      node = currentNode;
+      nodePos = resolvedPos.before(1);
+      return {
+        node: node,
+        pos: nodePos
+      };
+    }
+  }
+  return null;
+};
+export const handleKeyDown = (view, event) => {
+  if (fg('platform_editor_breakout_resizing_hello_release')) {
+    const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+    const isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
+    if (metaKey && event.altKey && isBracketKey) {
+      const {
+        expand,
+        codeBlock,
+        layoutSection
+      } = view.state.schema.nodes;
+      const breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
+      const result = getAncestorResizableNode(view, breakoutResizableNodes);
+      if (result) {
+        const {
+          node,
+          pos
+        } = result;
+        const breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(mark => mark.type.name === 'breakout');
+        if (breakoutMark) {
+          const step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
+          const newWidth = breakoutMark.attrs.width + step;
+          if (newWidth < akEditorFullWidthLayoutWidth && newWidth > akEditorDefaultLayoutWidth) {
+            setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos)(view.state, view.dispatch);
+            view.focus();
+          }
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+};

package/dist/es2019/pm-plugins/resizing-plugin.js

@@ -3,6 +3,7 @@ import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
 import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { handleKeyDown } from './handle-key-down';
 import { ResizingMarkView } from './resizing-mark-view';
 const addBreakoutToResizableNode = ({
   node,
@@ -51,7 +52,8 @@ export const createResizingPlugin = (api, options) => {
         breakout: (mark, view) => {
           return new ResizingMarkView(mark, view, api);
         }
-      }
+      },
+      handleKeyDown
     },
     appendTransaction(transactions, oldState, newState) {
       let newTr = newState.tr;

package/dist/esm/editor-commands/set-breakout-width.js

@@ -1,4 +1,5 @@
 import { transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { updateExpandedStateNew } from '../pm-plugins/utils/single-player-expand';
 export function setBreakoutWidth(width, mode, pos, isLivePage) {
@@ -28,6 +29,11 @@ export function setBreakoutWidth(width, mode, pos, isLivePage) {
     if (fg('platform_editor_breakout_resizing_hello_release')) {
       tr.setMeta('scrollIntoView', false);
     }
+
+    // keep current selection, necessary to not remove NodeSelection for keyboard resizing
+    if (state.selection instanceof NodeSelection && state.selection.node.eq(node) && fg('platform_editor_breakout_resizing_hello_release')) {
+      tr.setSelection(NodeSelection.create(tr.doc, pos));
+    }
     if (dispatch) {
       dispatch(tr);
     }

package/dist/esm/pm-plugins/handle-key-down.js

@@ -0,0 +1,65 @@
+import { browser } from '@atlaskit/editor-common/browser';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
+var KEYBOARD_RESIZE_STEP = 10;
+var getAncestorResizableNode = function getAncestorResizableNode(view, breakoutResizableNodes) {
+  var selection = view.state.selection;
+  if (selection instanceof NodeSelection) {
+    var selectedNode = selection.node;
+    if (breakoutResizableNodes.has(selectedNode.type)) {
+      return {
+        node: selectedNode,
+        pos: selection.$from.pos
+      };
+    }
+  } else if (selection instanceof TextSelection) {
+    var node = null;
+    var nodePos = null;
+
+    // only top level nodes are resizable
+    var resolvedPos = view.state.doc.resolve(selection.$from.pos);
+    var currentNode = resolvedPos.node(1);
+    if (breakoutResizableNodes.has(currentNode.type)) {
+      node = currentNode;
+      nodePos = resolvedPos.before(1);
+      return {
+        node: node,
+        pos: nodePos
+      };
+    }
+  }
+  return null;
+};
+export var handleKeyDown = function handleKeyDown(view, event) {
+  if (fg('platform_editor_breakout_resizing_hello_release')) {
+    var metaKey = browser.mac ? event.metaKey : event.ctrlKey;
+    var isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
+    if (metaKey && event.altKey && isBracketKey) {
+      var _view$state$schema$no = view.state.schema.nodes,
+        expand = _view$state$schema$no.expand,
+        codeBlock = _view$state$schema$no.codeBlock,
+        layoutSection = _view$state$schema$no.layoutSection;
+      var breakoutResizableNodes = new Set([expand, codeBlock, layoutSection]);
+      var result = getAncestorResizableNode(view, breakoutResizableNodes);
+      if (result) {
+        var node = result.node,
+          pos = result.pos;
+        var breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(function (mark) {
+          return mark.type.name === 'breakout';
+        });
+        if (breakoutMark) {
+          var step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
+          var newWidth = breakoutMark.attrs.width + step;
+          if (newWidth < akEditorFullWidthLayoutWidth && newWidth > akEditorDefaultLayoutWidth) {
+            setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos)(view.state, view.dispatch);
+            view.focus();
+          }
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+};

package/dist/esm/pm-plugins/resizing-plugin.js

@@ -3,6 +3,7 @@ import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
 import { getChangedNodes, isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { handleKeyDown } from './handle-key-down';
 import { ResizingMarkView } from './resizing-mark-view';
 var addBreakoutToResizableNode = function addBreakoutToResizableNode(_ref) {
   var node = _ref.node,
@@ -50,7 +51,8 @@ export var createResizingPlugin = function createResizingPlugin(api, options) {
         breakout: function breakout(mark, view) {
           return new ResizingMarkView(mark, view, api);
         }
-      }
+      },
+      handleKeyDown: handleKeyDown
     },
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
       var newTr = newState.tr;

package/dist/types/pm-plugins/handle-key-down.d.ts

@@ -0,0 +1,2 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const handleKeyDown: (view: EditorView, event: KeyboardEvent) => boolean | undefined;

package/dist/types-ts4.5/pm-plugins/handle-key-down.d.ts

@@ -0,0 +1,2 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const handleKeyDown: (view: EditorView, event: KeyboardEvent) => boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-breakout",
-	"version": "2.5.3",
+	"version": "2.6.0",
 	"description": "Breakout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",