@atlaskit/editor-plugin-block-controls 3.3.7 → 3.3.8

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.3.8
+
+### Patch Changes
+
+- [#124180](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124180)
+  [`f3f332175bf17`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f3f332175bf17) -
+  add case for quick insert button to handle block nodes which are leaf nodes, and handle media
+- Updated dependencies
+
 ## 3.3.7
 
 ### Patch Changes

package/dist/cjs/ui/quick-insert-button.js

@@ -19,6 +19,8 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _widgetPositions = require("../pm-plugins/utils/widget-positions");
 var _consts = require("./consts");
+var _documentChecks = require("./utils/document-checks");
+var _editorCommands = require("./utils/editor-commands");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var buttonStyles = (0, _primitives.xcss)({
@@ -52,18 +54,6 @@ var containerStaticStyles = (0, _primitives.xcss)({
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
-var isSelectionInNode = function isSelectionInNode(start, view) {
-  var node = view.state.doc.nodeAt(start);
-  if (node === null) {
-    return false;
-  }
-  var endPos = start + node.nodeSize;
-  var startPos = start;
-  var _view$state$selection = view.state.selection,
-    $from = _view$state$selection.$from,
-    $to = _view$state$selection.$to;
-  return $from.pos >= startPos && endPos >= $to.pos;
-};
 var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref) {
   var view = _ref.view,
     api = _ref.api,
@@ -143,6 +133,38 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
   }, [calculatePosition, view.dom, rootAnchorName, rootNodeType]);
+  var handleQuickInsert = (0, _react.useCallback)(function () {
+    var _api$quickInsert;
+    // if the selection is not within the node this decoration is rendered at
+    // then insert a newline and trigger quick insert
+    var start = getPos();
+    if (start !== undefined) {
+      // if the selection is not within the node this decoration is rendered at
+      // or the node is non-editable, then insert a newline and trigger quick insert
+      if (!(0, _documentChecks.isSelectionInNode)(start, view) || (0, _documentChecks.isNonEditableBlock)(start, view)) {
+        api.core.actions.execute((0, _editorCommands.createNewLine)(start));
+      }
+      if ((0, _documentChecks.isSelectionInNode)(start, view) && (0, _documentChecks.isNestedNodeSelected)(view)) {
+        // if the nested selected node is non-editable, then insert a newline below the selected node
+        if ((0, _documentChecks.isNonEditableBlock)(view.state.selection.from, view)) {
+          api.core.actions.execute((0, _editorCommands.createNewLine)(view.state.selection.from));
+        } else {
+          // otherwise need to force the selection to be at the start of the node, because
+          // prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
+          // consistent NodeSelection for root level nodes.
+          api.core.actions.execute(function (_ref2) {
+            var tr = _ref2.tr;
+            (0, _editorCommands.createNewLine)(view.state.selection.from)({
+              tr: tr
+            });
+            tr.setSelection(_state.TextSelection.create(tr.doc, view.state.selection.from));
+            return tr;
+          });
+        }
+      }
+    }
+    api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
+  }, [api, getPos, view]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -157,26 +179,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       type: "button",
       "aria-label": formatMessage(_messages.blockControlsMessages.insert),
       xcss: [buttonStyles],
-      onClick: function onClick() {
-        var _api$quickInsert;
-        // if the selection is not within the node this decoration is rendered at
-        // then insert a newline and trigger quick insert
-        var start = getPos();
-        if (start !== undefined && !isSelectionInNode(start, view)) {
-          api.core.actions.execute(function (_ref2) {
-            var _tr$doc$nodeAt;
-            var tr = _ref2.tr;
-            var nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
-            if (nodeSize === undefined) {
-              return tr;
-            }
-            var position = start + nodeSize;
-            tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
-            return tr.setSelection(_state.TextSelection.create(tr.doc, position));
-          });
-        }
-        api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
-      }
+      onClick: handleQuickInsert
     }, /*#__PURE__*/_react.default.createElement(_add.default, {
       label: "add"
     }))))

package/dist/cjs/ui/utils/document-checks.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSelectionInNode = exports.isNonEditableBlock = exports.isNestedNodeSelected = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var isNestedNodeSelected = exports.isNestedNodeSelected = function isNestedNodeSelected(view) {
+  var selection = view.state.selection;
+  return selection instanceof _state.NodeSelection && selection.$from.depth > 1;
+};
+var isSelectionInNode = exports.isSelectionInNode = function isSelectionInNode(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+  var endPos = start + node.nodeSize;
+  var startPos = start;
+  var _view$state$selection = view.state.selection,
+    $from = _view$state$selection.$from,
+    $to = _view$state$selection.$to;
+  return $from.pos >= startPos && endPos >= $to.pos;
+};
+var isNonEditableBlock = exports.isNonEditableBlock = function isNonEditableBlock(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+
+  // We want to treat some elements as if they are non-editable blocks for
+  // the purposes of quick insert.
+  switch (node.type.name) {
+    // mediaSingle and mediaGroup always contain a media child node, which is
+    // both a block and an atom. mediaSingle can also have a caption child node
+    // which is an editable block.
+    case 'mediaGroup':
+    case 'mediaSingle':
+      return true;
+  }
+  return node.isBlock && (node.isAtom || node.isLeaf);
+};

package/dist/cjs/ui/utils/editor-commands.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createNewLine = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var createNewLine = exports.createNewLine = function createNewLine(start) {
+  return function (_ref) {
+    var _tr$doc$nodeAt;
+    var tr = _ref.tr;
+    var nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
+    if (nodeSize === undefined) {
+      return tr;
+    }
+    var position = start + nodeSize;
+    tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
+    return tr.setSelection(_state.TextSelection.create(tr.doc, position));
+  };
+};

package/dist/es2019/ui/quick-insert-button.js

@@ -10,6 +10,8 @@ import Tooltip from '@atlaskit/tooltip';
 import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
 import { QUICK_INSERT_DIMENSIONS, rootElementGap, topPositionAdjustment } from './consts';
+import { isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
+import { createNewLine } from './utils/editor-commands';
 const buttonStyles = xcss({
   boxSizing: 'border-box',
   display: 'flex',
@@ -41,19 +43,6 @@ const containerStaticStyles = xcss({
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
-const isSelectionInNode = (start, view) => {
-  const node = view.state.doc.nodeAt(start);
-  if (node === null) {
-    return false;
-  }
-  const endPos = start + node.nodeSize;
-  const startPos = start;
-  const {
-    $from,
-    $to
-  } = view.state.selection;
-  return $from.pos >= startPos && endPos >= $to.pos;
-};
 export const TypeAheadControl = ({
   view,
   api,
@@ -131,6 +120,39 @@ export const TypeAheadControl = ({
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 ? void 0 : _cleanUpTransitionLis();
     };
   }, [calculatePosition, view.dom, rootAnchorName, rootNodeType]);
+  const handleQuickInsert = useCallback(() => {
+    var _api$quickInsert;
+    // if the selection is not within the node this decoration is rendered at
+    // then insert a newline and trigger quick insert
+    const start = getPos();
+    if (start !== undefined) {
+      // if the selection is not within the node this decoration is rendered at
+      // or the node is non-editable, then insert a newline and trigger quick insert
+      if (!isSelectionInNode(start, view) || isNonEditableBlock(start, view)) {
+        api.core.actions.execute(createNewLine(start));
+      }
+      if (isSelectionInNode(start, view) && isNestedNodeSelected(view)) {
+        // if the nested selected node is non-editable, then insert a newline below the selected node
+        if (isNonEditableBlock(view.state.selection.from, view)) {
+          api.core.actions.execute(createNewLine(view.state.selection.from));
+        } else {
+          // otherwise need to force the selection to be at the start of the node, because
+          // prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
+          // consistent NodeSelection for root level nodes.
+          api.core.actions.execute(({
+            tr
+          }) => {
+            createNewLine(view.state.selection.from)({
+              tr
+            });
+            tr.setSelection(TextSelection.create(tr.doc, view.state.selection.from));
+            return tr;
+          });
+        }
+      }
+    }
+    api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl');
+  }, [api, getPos, view]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -145,27 +167,7 @@ export const TypeAheadControl = ({
       type: "button",
       "aria-label": formatMessage(messages.insert),
       xcss: [buttonStyles],
-      onClick: () => {
-        var _api$quickInsert;
-        // if the selection is not within the node this decoration is rendered at
-        // then insert a newline and trigger quick insert
-        const start = getPos();
-        if (start !== undefined && !isSelectionInNode(start, view)) {
-          api.core.actions.execute(({
-            tr
-          }) => {
-            var _tr$doc$nodeAt;
-            const nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
-            if (nodeSize === undefined) {
-              return tr;
-            }
-            const position = start + nodeSize;
-            tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
-            return tr.setSelection(TextSelection.create(tr.doc, position));
-          });
-        }
-        api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl');
-      }
+      onClick: handleQuickInsert
     }, /*#__PURE__*/React.createElement(AddIcon, {
       label: "add"
     }))))

package/dist/es2019/ui/utils/document-checks.js

@@ -0,0 +1,36 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export const isNestedNodeSelected = view => {
+  const selection = view.state.selection;
+  return selection instanceof NodeSelection && selection.$from.depth > 1;
+};
+export const isSelectionInNode = (start, view) => {
+  const node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+  const endPos = start + node.nodeSize;
+  const startPos = start;
+  const {
+    $from,
+    $to
+  } = view.state.selection;
+  return $from.pos >= startPos && endPos >= $to.pos;
+};
+export const isNonEditableBlock = (start, view) => {
+  const node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+
+  // We want to treat some elements as if they are non-editable blocks for
+  // the purposes of quick insert.
+  switch (node.type.name) {
+    // mediaSingle and mediaGroup always contain a media child node, which is
+    // both a block and an atom. mediaSingle can also have a caption child node
+    // which is an editable block.
+    case 'mediaGroup':
+    case 'mediaSingle':
+      return true;
+  }
+  return node.isBlock && (node.isAtom || node.isLeaf);
+};

package/dist/es2019/ui/utils/editor-commands.js

@@ -0,0 +1,13 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export const createNewLine = start => ({
+  tr
+}) => {
+  var _tr$doc$nodeAt;
+  const nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
+  if (nodeSize === undefined) {
+    return tr;
+  }
+  const position = start + nodeSize;
+  tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
+  return tr.setSelection(TextSelection.create(tr.doc, position));
+};

package/dist/esm/ui/quick-insert-button.js

@@ -11,6 +11,8 @@ import Tooltip from '@atlaskit/tooltip';
 import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
 import { QUICK_INSERT_DIMENSIONS, rootElementGap, topPositionAdjustment } from './consts';
+import { isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
+import { createNewLine } from './utils/editor-commands';
 var buttonStyles = xcss({
   boxSizing: 'border-box',
   display: 'flex',
@@ -42,18 +44,6 @@ var containerStaticStyles = xcss({
 
 // TODO: ED-26959 - Share prop types between DragHandle - generic enough to create a type for block control decoration
 
-var isSelectionInNode = function isSelectionInNode(start, view) {
-  var node = view.state.doc.nodeAt(start);
-  if (node === null) {
-    return false;
-  }
-  var endPos = start + node.nodeSize;
-  var startPos = start;
-  var _view$state$selection = view.state.selection,
-    $from = _view$state$selection.$from,
-    $to = _view$state$selection.$to;
-  return $from.pos >= startPos && endPos >= $to.pos;
-};
 export var TypeAheadControl = function TypeAheadControl(_ref) {
   var view = _ref.view,
     api = _ref.api,
@@ -133,6 +123,38 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       (_cleanUpTransitionLis = cleanUpTransitionListener) === null || _cleanUpTransitionLis === void 0 || _cleanUpTransitionLis();
     };
   }, [calculatePosition, view.dom, rootAnchorName, rootNodeType]);
+  var handleQuickInsert = useCallback(function () {
+    var _api$quickInsert;
+    // if the selection is not within the node this decoration is rendered at
+    // then insert a newline and trigger quick insert
+    var start = getPos();
+    if (start !== undefined) {
+      // if the selection is not within the node this decoration is rendered at
+      // or the node is non-editable, then insert a newline and trigger quick insert
+      if (!isSelectionInNode(start, view) || isNonEditableBlock(start, view)) {
+        api.core.actions.execute(createNewLine(start));
+      }
+      if (isSelectionInNode(start, view) && isNestedNodeSelected(view)) {
+        // if the nested selected node is non-editable, then insert a newline below the selected node
+        if (isNonEditableBlock(view.state.selection.from, view)) {
+          api.core.actions.execute(createNewLine(view.state.selection.from));
+        } else {
+          // otherwise need to force the selection to be at the start of the node, because
+          // prosemirror is keeping it as NodeSelection for nested nodes. Do this to keep it
+          // consistent NodeSelection for root level nodes.
+          api.core.actions.execute(function (_ref2) {
+            var tr = _ref2.tr;
+            createNewLine(view.state.selection.from)({
+              tr: tr
+            });
+            tr.setSelection(TextSelection.create(tr.doc, view.state.selection.from));
+            return tr;
+          });
+        }
+      }
+    }
+    api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
+  }, [api, getPos, view]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
@@ -147,26 +169,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       type: "button",
       "aria-label": formatMessage(messages.insert),
       xcss: [buttonStyles],
-      onClick: function onClick() {
-        var _api$quickInsert;
-        // if the selection is not within the node this decoration is rendered at
-        // then insert a newline and trigger quick insert
-        var start = getPos();
-        if (start !== undefined && !isSelectionInNode(start, view)) {
-          api.core.actions.execute(function (_ref2) {
-            var _tr$doc$nodeAt;
-            var tr = _ref2.tr;
-            var nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
-            if (nodeSize === undefined) {
-              return tr;
-            }
-            var position = start + nodeSize;
-            tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
-            return tr.setSelection(TextSelection.create(tr.doc, position));
-          });
-        }
-        api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
-      }
+      onClick: handleQuickInsert
     }, /*#__PURE__*/React.createElement(AddIcon, {
       label: "add"
     }))))

package/dist/esm/ui/utils/document-checks.js

@@ -0,0 +1,35 @@
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+export var isNestedNodeSelected = function isNestedNodeSelected(view) {
+  var selection = view.state.selection;
+  return selection instanceof NodeSelection && selection.$from.depth > 1;
+};
+export var isSelectionInNode = function isSelectionInNode(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+  var endPos = start + node.nodeSize;
+  var startPos = start;
+  var _view$state$selection = view.state.selection,
+    $from = _view$state$selection.$from,
+    $to = _view$state$selection.$to;
+  return $from.pos >= startPos && endPos >= $to.pos;
+};
+export var isNonEditableBlock = function isNonEditableBlock(start, view) {
+  var node = view.state.doc.nodeAt(start);
+  if (node === null) {
+    return false;
+  }
+
+  // We want to treat some elements as if they are non-editable blocks for
+  // the purposes of quick insert.
+  switch (node.type.name) {
+    // mediaSingle and mediaGroup always contain a media child node, which is
+    // both a block and an atom. mediaSingle can also have a caption child node
+    // which is an editable block.
+    case 'mediaGroup':
+    case 'mediaSingle':
+      return true;
+  }
+  return node.isBlock && (node.isAtom || node.isLeaf);
+};

package/dist/esm/ui/utils/editor-commands.js

@@ -0,0 +1,14 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export var createNewLine = function createNewLine(start) {
+  return function (_ref) {
+    var _tr$doc$nodeAt;
+    var tr = _ref.tr;
+    var nodeSize = (_tr$doc$nodeAt = tr.doc.nodeAt(start)) === null || _tr$doc$nodeAt === void 0 ? void 0 : _tr$doc$nodeAt.nodeSize;
+    if (nodeSize === undefined) {
+      return tr;
+    }
+    var position = start + nodeSize;
+    tr.insert(position, tr.doc.type.schema.nodes.paragraph.create());
+    return tr.setSelection(TextSelection.create(tr.doc, position));
+  };
+};

package/dist/types/ui/utils/document-checks.d.ts

@@ -0,0 +1,4 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const isNestedNodeSelected: (view: EditorView) => boolean;
+export declare const isSelectionInNode: (start: number, view: EditorView) => boolean;
+export declare const isNonEditableBlock: (start: number, view: EditorView) => boolean;

package/dist/types/ui/utils/editor-commands.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const createNewLine: (start: number) => EditorCommand;

package/dist/types-ts4.5/ui/utils/document-checks.d.ts

@@ -0,0 +1,4 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const isNestedNodeSelected: (view: EditorView) => boolean;
+export declare const isSelectionInNode: (start: number, view: EditorView) => boolean;
+export declare const isNonEditableBlock: (start: number, view: EditorView) => boolean;

package/dist/types-ts4.5/ui/utils/editor-commands.d.ts

@@ -0,0 +1,2 @@
+import type { EditorCommand } from '@atlaskit/editor-common/types';
+export declare const createNewLine: (start: number) => EditorCommand;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.3.7",
+	"version": "3.3.8",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^3.5.0",
-		"@atlaskit/tokens": "^4.3.0",
+		"@atlaskit/tokens": "^4.4.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",