@atlaskit/editor-plugin-panel 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-panel
 
+## 1.0.3
+
+### Patch Changes
+
+- [#75775](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75775) [`d0cee3285a1a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d0cee3285a1a) - ED-22287: Adding 16px right padding to panel for all elements. Also using 12px for the no-icon usecase.
+- Updated dependencies
+
+## 1.0.2
+
+### Patch Changes
+
+- [#70470](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70470) [`7d1629af0072`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7d1629af0072) - ED-21607 Fix issue with cutting nodes leading to panel deletion
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/main.js

@@ -7,13 +7,25 @@ exports.createPlugin = void 0;
 var _panel = require("@atlaskit/editor-common/panel");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _panel2 = require("../nodeviews/panel");
 var _types = require("../types");
+var _utils = require("../utils");
 var createPlugin = exports.createPlugin = function createPlugin(dispatch, providerFactory, pluginOptions) {
   var _pluginOptions$useLon = pluginOptions.useLongPressSelection,
     useLongPressSelection = _pluginOptions$useLon === void 0 ? false : _pluginOptions$useLon;
   return new _safePlugin.SafePlugin({
     key: _types.pluginKey,
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-custom-cut-for-panel')) {
+        var tr = transactions.find(function (tr) {
+          return tr.getMeta('uiEvent') === 'cut';
+        });
+        if (tr) {
+          return (0, _utils.handleCut)(newState, oldState);
+        }
+      }
+    },
     props: {
       nodeViews: {
         panel: (0, _panel2.getPanelNodeView)(pluginOptions, providerFactory)

package/dist/cjs/utils.js

@@ -4,11 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.panelAttrsToDom = exports.findPanel = void 0;
+exports.panelContentCheck = exports.panelAttrsToDom = exports.handleCut = exports.findPanel = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _panel = require("@atlaskit/editor-common/panel");
 var _editorPalette = require("@atlaskit/editor-palette");
+var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -26,7 +27,7 @@ var panelAttrsToDom = exports.panelAttrsToDom = function panelAttrsToDom(attrs,
   var hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
   var tokenColor = panelColor && (0, _editorPalette.hexToEditorBackgroundPaletteColor)(panelColor);
   var panelBackgroundColor = tokenColor || panelColor;
-  var style = ["".concat(panelColor && isCustomPanel ? "background-color: ".concat(panelBackgroundColor, ";") : ''), "".concat(hasIcon ? '' : 'padding-left: 12px;')].join('');
+  var style = ["".concat(panelColor && isCustomPanel ? "background-color: ".concat(panelBackgroundColor, ";") : ''), "".concat(hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;')].join('');
   var panelAttrs = {
     class: _panel.PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || _adfSchema.PanelType.INFO,
@@ -50,4 +51,35 @@ var panelAttrsToDom = exports.panelAttrsToDom = function panelAttrsToDom(attrs,
   } else {
     return ['div', panelAttrs, contentDiv];
   }
+};
+var handleCut = exports.handleCut = function handleCut(newState, oldState) {
+  var newTr = newState.tr;
+  var schema = newState.doc.type.schema;
+  if (panelContentCheck(newState, oldState)) {
+    // Create a panel using oldState with an empty paragraph node
+    // and insert it in the same location when panel previously existed
+    var emptyParagraph = schema.nodes.paragraph.create();
+    var oldPanelNode = (0, _utils.findParentNode)(function (node) {
+      return node.type.name === 'panel';
+    })(oldState.tr.selection);
+    var clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
+    var newPanelNode = schema.nodes.panel.create(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), emptyParagraph);
+    var endPos = oldState.tr.selection.$from.pos;
+    if (oldPanelNode) {
+      newTr.insert(oldPanelNode.pos, newPanelNode).setSelection(new _state.TextSelection(newTr.doc.resolve(endPos)));
+      return newTr;
+    }
+  }
+};
+var panelContentCheck = exports.panelContentCheck = function panelContentCheck(newState, oldState) {
+  // The following fuctions checks if *
+  //  a. old selection is a NodeSelection.
+  //  b. parent element a panel and does it have only one child
+  //  c. parent node has a decision list and that decision list only has one decision item
+  //     OR old selection is a codeblock OR old selection is a rule
+  var isNodeSelection = oldState.tr.selection instanceof _state.NodeSelection;
+  var isNodeTypeRuleOrCodeBlock = isNodeSelection && ['codeBlock', 'rule'].includes(oldState.tr.selection.node.type.name);
+  var isParentTypePanel = (0, _utils.findParentNodeOfType)(newState.schema.nodes.panel)(oldState.tr.selection);
+  var isparentTypeDecision = (0, _utils.findParentNodeOfType)(newState.schema.nodes.decisionList)(oldState.tr.selection);
+  return Boolean(isNodeSelection && (isParentTypePanel === null || isParentTypePanel === void 0 ? void 0 : isParentTypePanel.node.childCount) === 1 && ((isparentTypeDecision === null || isparentTypeDecision === void 0 ? void 0 : isparentTypeDecision.node.childCount) === 1 || isNodeTypeRuleOrCodeBlock));
 };

package/dist/es2019/pm-plugins/main.js

@@ -1,14 +1,24 @@
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPanelNodeView } from '../nodeviews/panel';
 import { pluginKey } from '../types';
+import { handleCut } from '../utils';
 export const createPlugin = (dispatch, providerFactory, pluginOptions) => {
   const {
     useLongPressSelection = false
   } = pluginOptions;
   return new SafePlugin({
     key: pluginKey,
+    appendTransaction: (transactions, oldState, newState) => {
+      if (getBooleanFF('platform.editor.allow-custom-cut-for-panel')) {
+        const tr = transactions.find(tr => tr.getMeta('uiEvent') === 'cut');
+        if (tr) {
+          return handleCut(newState, oldState);
+        }
+      }
+    },
     props: {
       nodeViews: {
         panel: getPanelNodeView(pluginOptions, providerFactory)

package/dist/es2019/utils.js

@@ -1,7 +1,8 @@
 import { PanelType } from '@atlaskit/adf-schema';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
-import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNode, findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 export const findPanel = (state, selection) => {
   const {
     panel
@@ -20,7 +21,7 @@ export const panelAttrsToDom = (attrs, allowCustomPanel) => {
   const hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
   const tokenColor = panelColor && hexToEditorBackgroundPaletteColor(panelColor);
   const panelBackgroundColor = tokenColor || panelColor;
-  const style = [`${panelColor && isCustomPanel ? `background-color: ${panelBackgroundColor};` : ''}`, `${hasIcon ? '' : 'padding-left: 12px;'}`].join('');
+  const style = [`${panelColor && isCustomPanel ? `background-color: ${panelBackgroundColor};` : ''}`, `${hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;'}`].join('');
   let panelAttrs = {
     class: PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || PanelType.INFO,
@@ -45,4 +46,37 @@ export const panelAttrsToDom = (attrs, allowCustomPanel) => {
   } else {
     return ['div', panelAttrs, contentDiv];
   }
+};
+export const handleCut = (newState, oldState) => {
+  const newTr = newState.tr;
+  const {
+    schema
+  } = newState.doc.type;
+  if (panelContentCheck(newState, oldState)) {
+    // Create a panel using oldState with an empty paragraph node
+    // and insert it in the same location when panel previously existed
+    const emptyParagraph = schema.nodes.paragraph.create();
+    const oldPanelNode = findParentNode(node => node.type.name === 'panel')(oldState.tr.selection);
+    const clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
+    const newPanelNode = schema.nodes.panel.create({
+      ...(clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs)
+    }, emptyParagraph);
+    const endPos = oldState.tr.selection.$from.pos;
+    if (oldPanelNode) {
+      newTr.insert(oldPanelNode.pos, newPanelNode).setSelection(new TextSelection(newTr.doc.resolve(endPos)));
+      return newTr;
+    }
+  }
+};
+export const panelContentCheck = (newState, oldState) => {
+  // The following fuctions checks if *
+  //  a. old selection is a NodeSelection.
+  //  b. parent element a panel and does it have only one child
+  //  c. parent node has a decision list and that decision list only has one decision item
+  //     OR old selection is a codeblock OR old selection is a rule
+  const isNodeSelection = oldState.tr.selection instanceof NodeSelection;
+  const isNodeTypeRuleOrCodeBlock = isNodeSelection && ['codeBlock', 'rule'].includes(oldState.tr.selection.node.type.name);
+  const isParentTypePanel = findParentNodeOfType(newState.schema.nodes.panel)(oldState.tr.selection);
+  const isparentTypeDecision = findParentNodeOfType(newState.schema.nodes.decisionList)(oldState.tr.selection);
+  return Boolean(isNodeSelection && (isParentTypePanel === null || isParentTypePanel === void 0 ? void 0 : isParentTypePanel.node.childCount) === 1 && ((isparentTypeDecision === null || isparentTypeDecision === void 0 ? void 0 : isparentTypeDecision.node.childCount) === 1 || isNodeTypeRuleOrCodeBlock));
 };

package/dist/esm/pm-plugins/main.js

@@ -1,13 +1,25 @@
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPanelNodeView } from '../nodeviews/panel';
 import { pluginKey } from '../types';
+import { handleCut } from '../utils';
 export var createPlugin = function createPlugin(dispatch, providerFactory, pluginOptions) {
   var _pluginOptions$useLon = pluginOptions.useLongPressSelection,
     useLongPressSelection = _pluginOptions$useLon === void 0 ? false : _pluginOptions$useLon;
   return new SafePlugin({
     key: pluginKey,
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      if (getBooleanFF('platform.editor.allow-custom-cut-for-panel')) {
+        var tr = transactions.find(function (tr) {
+          return tr.getMeta('uiEvent') === 'cut';
+        });
+        if (tr) {
+          return handleCut(newState, oldState);
+        }
+      }
+    },
     props: {
       nodeViews: {
         panel: getPanelNodeView(pluginOptions, providerFactory)

package/dist/esm/utils.js

@@ -4,7 +4,8 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { PanelType } from '@atlaskit/adf-schema';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
-import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNode, findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 export var findPanel = function findPanel(state, selection) {
   var panel = state.schema.nodes.panel;
   return findSelectedNodeOfType(panel)(selection || state.selection) || findParentNodeOfType(panel)(selection || state.selection);
@@ -19,7 +20,7 @@ export var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
   var hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
   var tokenColor = panelColor && hexToEditorBackgroundPaletteColor(panelColor);
   var panelBackgroundColor = tokenColor || panelColor;
-  var style = ["".concat(panelColor && isCustomPanel ? "background-color: ".concat(panelBackgroundColor, ";") : ''), "".concat(hasIcon ? '' : 'padding-left: 12px;')].join('');
+  var style = ["".concat(panelColor && isCustomPanel ? "background-color: ".concat(panelBackgroundColor, ";") : ''), "".concat(hasIcon ? '' : 'padding-left: 12px;padding-right: 12px;')].join('');
   var panelAttrs = {
     class: PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || PanelType.INFO,
@@ -43,4 +44,35 @@ export var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
   } else {
     return ['div', panelAttrs, contentDiv];
   }
+};
+export var handleCut = function handleCut(newState, oldState) {
+  var newTr = newState.tr;
+  var schema = newState.doc.type.schema;
+  if (panelContentCheck(newState, oldState)) {
+    // Create a panel using oldState with an empty paragraph node
+    // and insert it in the same location when panel previously existed
+    var emptyParagraph = schema.nodes.paragraph.create();
+    var oldPanelNode = findParentNode(function (node) {
+      return node.type.name === 'panel';
+    })(oldState.tr.selection);
+    var clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
+    var newPanelNode = schema.nodes.panel.create(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), emptyParagraph);
+    var endPos = oldState.tr.selection.$from.pos;
+    if (oldPanelNode) {
+      newTr.insert(oldPanelNode.pos, newPanelNode).setSelection(new TextSelection(newTr.doc.resolve(endPos)));
+      return newTr;
+    }
+  }
+};
+export var panelContentCheck = function panelContentCheck(newState, oldState) {
+  // The following fuctions checks if *
+  //  a. old selection is a NodeSelection.
+  //  b. parent element a panel and does it have only one child
+  //  c. parent node has a decision list and that decision list only has one decision item
+  //     OR old selection is a codeblock OR old selection is a rule
+  var isNodeSelection = oldState.tr.selection instanceof NodeSelection;
+  var isNodeTypeRuleOrCodeBlock = isNodeSelection && ['codeBlock', 'rule'].includes(oldState.tr.selection.node.type.name);
+  var isParentTypePanel = findParentNodeOfType(newState.schema.nodes.panel)(oldState.tr.selection);
+  var isparentTypeDecision = findParentNodeOfType(newState.schema.nodes.decisionList)(oldState.tr.selection);
+  return Boolean(isNodeSelection && (isParentTypePanel === null || isParentTypePanel === void 0 ? void 0 : isParentTypePanel.node.childCount) === 1 && ((isparentTypeDecision === null || isparentTypeDecision === void 0 ? void 0 : isparentTypeDecision.node.childCount) === 1 || isNodeTypeRuleOrCodeBlock));
 };

package/dist/types/utils.d.ts

@@ -3,3 +3,5 @@ import type { DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 export declare const findPanel: (state: EditorState, selection?: Selection | null) => import("prosemirror-utils/dist/types").FindResult;
 export declare const panelAttrsToDom: (attrs: PanelAttributes, allowCustomPanel: boolean) => DOMOutputSpec;
+export declare const handleCut: (newState: EditorState, oldState: EditorState) => import("prosemirror-state").Transaction | undefined;
+export declare const panelContentCheck: (newState: EditorState, oldState: EditorState) => boolean;

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

@@ -3,3 +3,5 @@ import type { DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 export declare const findPanel: (state: EditorState, selection?: Selection | null) => import("prosemirror-utils/dist/types").FindResult;
 export declare const panelAttrsToDom: (attrs: PanelAttributes, allowCustomPanel: boolean) => DOMOutputSpec;
+export declare const handleCut: (newState: EditorState, oldState: EditorState) => import("prosemirror-state").Transaction | undefined;
+export declare const panelContentCheck: (newState: EditorState, oldState: EditorState) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-panel",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Panel plugin for @atlaskit/editor-core.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -34,14 +34,14 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^35.5.1",
-    "@atlaskit/editor-common": "^78.0.0",
+    "@atlaskit/editor-common": "^78.5.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-decorations": "^1.0.0",
     "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/emoji": "^67.6.0",
-    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/icon": "^22.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.6.0",
     "@babel/runtime": "^7.0.0"
@@ -100,6 +100,9 @@
     },
     "platform.editor.allow-extended-panel": {
       "type": "boolean"
+    },
+    "platform.editor.allow-custom-cut-for-panel": {
+      "type": "boolean"
     }
   },
   "stricter": {