@atlaskit/editor-plugin-block-menu 5.1.4 → 5.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/editor-commands/transform-node-utils/flattenStep.js +21 -0
  3. package/dist/cjs/editor-commands/transform-node-utils/transform.js +30 -4
  4. package/dist/cjs/editor-commands/transform-node-utils/types.js +1 -1
  5. package/dist/cjs/editor-commands/transform-node-utils/unwrapExpandStep.js +44 -0
  6. package/dist/cjs/editor-commands/transform-node-utils/unwrapStep.js +20 -0
  7. package/dist/cjs/editor-commands/transform-node-utils/utils.js +7 -1
  8. package/dist/cjs/editor-commands/transform-node-utils/wrapIntoLayoutStep.js +23 -0
  9. package/dist/cjs/editor-commands/transform-node-utils/wrapStep.js +16 -0
  10. package/dist/cjs/editor-commands/transformNode.js +4 -1
  11. package/dist/es2019/editor-commands/transform-node-utils/flattenStep.js +15 -0
  12. package/dist/es2019/editor-commands/transform-node-utils/transform.js +31 -5
  13. package/dist/es2019/editor-commands/transform-node-utils/types.js +1 -1
  14. package/dist/es2019/editor-commands/transform-node-utils/unwrapExpandStep.js +38 -0
  15. package/dist/es2019/editor-commands/transform-node-utils/unwrapStep.js +12 -0
  16. package/dist/es2019/editor-commands/transform-node-utils/utils.js +6 -0
  17. package/dist/es2019/editor-commands/transform-node-utils/wrapIntoLayoutStep.js +20 -0
  18. package/dist/es2019/editor-commands/transform-node-utils/wrapStep.js +12 -0
  19. package/dist/es2019/editor-commands/transformNode.js +4 -1
  20. package/dist/esm/editor-commands/transform-node-utils/flattenStep.js +15 -0
  21. package/dist/esm/editor-commands/transform-node-utils/transform.js +30 -4
  22. package/dist/esm/editor-commands/transform-node-utils/types.js +1 -1
  23. package/dist/esm/editor-commands/transform-node-utils/unwrapExpandStep.js +37 -0
  24. package/dist/esm/editor-commands/transform-node-utils/unwrapStep.js +13 -0
  25. package/dist/esm/editor-commands/transform-node-utils/utils.js +6 -0
  26. package/dist/esm/editor-commands/transform-node-utils/wrapIntoLayoutStep.js +17 -0
  27. package/dist/esm/editor-commands/transform-node-utils/wrapStep.js +10 -0
  28. package/dist/esm/editor-commands/transformNode.js +4 -1
  29. package/dist/types/editor-commands/transform-node-utils/flattenStep.d.ts +2 -0
  30. package/dist/types/editor-commands/transform-node-utils/transform.d.ts +2 -1
  31. package/dist/types/editor-commands/transform-node-utils/types.d.ts +1 -1
  32. package/dist/types/editor-commands/transform-node-utils/unwrapExpandStep.d.ts +8 -0
  33. package/dist/types/editor-commands/transform-node-utils/unwrapStep.d.ts +2 -0
  34. package/dist/types/editor-commands/transform-node-utils/utils.d.ts +2 -0
  35. package/dist/types/editor-commands/transform-node-utils/wrapIntoLayoutStep.d.ts +2 -0
  36. package/dist/types/editor-commands/transform-node-utils/wrapStep.d.ts +2 -0
  37. package/dist/types-ts4.5/editor-commands/transform-node-utils/flattenStep.d.ts +2 -0
  38. package/dist/types-ts4.5/editor-commands/transform-node-utils/transform.d.ts +2 -1
  39. package/dist/types-ts4.5/editor-commands/transform-node-utils/types.d.ts +1 -1
  40. package/dist/types-ts4.5/editor-commands/transform-node-utils/unwrapExpandStep.d.ts +8 -0
  41. package/dist/types-ts4.5/editor-commands/transform-node-utils/unwrapStep.d.ts +2 -0
  42. package/dist/types-ts4.5/editor-commands/transform-node-utils/utils.d.ts +2 -0
  43. package/dist/types-ts4.5/editor-commands/transform-node-utils/wrapIntoLayoutStep.d.ts +2 -0
  44. package/dist/types-ts4.5/editor-commands/transform-node-utils/wrapStep.d.ts +2 -0
  45. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-block-menu
2
2
 
3
+ ## 5.1.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`f6905b2543ef1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f6905b2543ef1) -
8
+ [ux] Implements base steps for from container to other node categories transfroms.
9
+ - Updated dependencies
10
+
3
11
  ## 5.1.4
4
12
 
5
13
  ### Patch Changes
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.flattenStep = void 0;
7
+ var flattenStep = exports.flattenStep = function flattenStep(nodes, context) {
8
+ var schema = context.schema,
9
+ targetNodeTypeName = context.targetNodeTypeName;
10
+
11
+ // TODO: EDITOR-2920 - Implement flattening logic.
12
+ // This is a simplified preliminary approach. We might want to use prosemirror-markdown functions.
13
+ var codeBlockContent = nodes.map(function (node) {
14
+ return node.content.textBetween(0, node.content.size, '\n');
15
+ }).join('\n');
16
+ var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, schema.text(codeBlockContent));
17
+ if (!outputNode) {
18
+ return nodes;
19
+ }
20
+ return [outputNode];
21
+ };
@@ -4,10 +4,16 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.getOutputNodes = void 0;
7
+ var _utils = require("../transform-node-utils/utils");
7
8
  var _flattenListStep = require("./flattenListStep");
9
+ var _flattenStep = require("./flattenStep");
8
10
  var _stubStep = require("./stubStep");
9
11
  var _types = require("./types");
12
+ var _unwrapExpandStep = require("./unwrapExpandStep");
10
13
  var _unwrapListStep = require("./unwrapListStep");
14
+ var _unwrapStep = require("./unwrapStep");
15
+ var _wrapIntoLayoutStep = require("./wrapIntoLayoutStep");
16
+ var _wrapStep = require("./wrapStep");
11
17
  // Exampled step for overrides:
12
18
  // - open Block menu on a paragraph, click 'Panel' in the Turn into'
13
19
  // - expected to put paragraph into a panel
@@ -26,9 +32,9 @@ var TRANSFORM_STEPS = {
26
32
  },
27
33
  container: {
28
34
  atomic: undefined,
29
- container: [_stubStep.stubStep],
35
+ container: [_unwrapStep.unwrapStep, _wrapStep.wrapStep],
30
36
  list: undefined,
31
- text: undefined
37
+ text: [_unwrapStep.unwrapStep]
32
38
  },
33
39
  list: {
34
40
  atomic: undefined,
@@ -49,6 +55,23 @@ var TRANSFORM_STEPS = {
49
55
  var TRANSFORM_STEPS_OVERRIDE = {
50
56
  paragraph: {
51
57
  panel: [wrapIntoPanelStep]
58
+ },
59
+ panel: {
60
+ layoutSection: [_unwrapStep.unwrapStep, _wrapIntoLayoutStep.wrapIntoLayoutStep],
61
+ codeBlock: [_unwrapStep.unwrapStep, _flattenStep.flattenStep, _wrapStep.wrapStep]
62
+ },
63
+ expand: {
64
+ panel: [_unwrapExpandStep.unwrapExpandStep, _wrapStep.wrapStep],
65
+ blockquote: [_unwrapExpandStep.unwrapExpandStep, _wrapStep.wrapStep],
66
+ layoutSection: [_unwrapExpandStep.unwrapExpandStep, _wrapIntoLayoutStep.wrapIntoLayoutStep],
67
+ paragraph: [_unwrapExpandStep.unwrapExpandStep],
68
+ codeBlock: [_unwrapExpandStep.unwrapExpandStep, _flattenStep.flattenStep, _wrapStep.wrapStep]
69
+ },
70
+ nestedExpand: {
71
+ panel: [_unwrapExpandStep.unwrapExpandStep, _wrapStep.wrapStep],
72
+ blockquote: [_unwrapExpandStep.unwrapExpandStep, _wrapStep.wrapStep],
73
+ paragraph: [_unwrapExpandStep.unwrapExpandStep],
74
+ codeBlock: [_unwrapExpandStep.unwrapExpandStep, _flattenStep.flattenStep, _wrapStep.wrapStep]
52
75
  }
53
76
  };
54
77
  var getTransformStepsForNodeTypes = function getTransformStepsForNodeTypes(selectedNodeTypeName, targetNodeTypeName) {
@@ -62,10 +85,12 @@ var getTransformStepsForNodeTypes = function getTransformStepsForNodeTypes(selec
62
85
  var getOutputNodes = exports.getOutputNodes = function getOutputNodes(_ref) {
63
86
  var sourceNode = _ref.sourceNode,
64
87
  targetNodeType = _ref.targetNodeType,
65
- schema = _ref.schema;
88
+ schema = _ref.schema,
89
+ isNested = _ref.isNested;
66
90
  var nodesToReplace = [sourceNode];
67
91
  var selectedNodeTypeName = (0, _types.toNodeTypeValue)(sourceNode.type.name);
68
92
  var targetNodeTypeName = (0, _types.toNodeTypeValue)(targetNodeType.name);
93
+ targetNodeTypeName = (0, _utils.getTargetNodeTypeNameInContext)(targetNodeTypeName, isNested);
69
94
  if (!selectedNodeTypeName || !targetNodeTypeName) {
70
95
  // We may decide to return an empty array or undefined here
71
96
  return;
@@ -80,6 +105,7 @@ var getOutputNodes = exports.getOutputNodes = function getOutputNodes(_ref) {
80
105
  return;
81
106
  }
82
107
  return steps.reduce(function (nodes, step) {
83
- return step(nodes, context);
108
+ var result = step(nodes, context);
109
+ return result;
84
110
  }, nodesToReplace);
85
111
  };
@@ -15,7 +15,7 @@ var NODE_CATEGORY_BY_TYPE = exports.NODE_CATEGORY_BY_TYPE = {
15
15
  expand: 'container',
16
16
  extension: 'atomic',
17
17
  heading: 'text',
18
- layout: 'container',
18
+ layoutSection: 'container',
19
19
  media: 'atomic',
20
20
  mediaGroup: 'atomic',
21
21
  mediaSingle: 'atomic',
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.unwrapExpandStep = void 0;
8
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
+ /**
10
+ * Unwraps an expand/nestedExpand node, converting its title attribute to a paragraph
11
+ * and prepending it to the children.
12
+ *
13
+ * Example: expand({ title: 'title' })(p('b')) → [p('title'), p('b')]
14
+ */
15
+ var unwrapExpandStep = exports.unwrapExpandStep = function unwrapExpandStep(nodes, context) {
16
+ var schema = context.schema;
17
+ var outputNodes = [];
18
+ nodes.forEach(function (node) {
19
+ var isExpand = node.type.name === 'expand' || node.type.name === 'nestedExpand';
20
+ if (isExpand) {
21
+ var _node$attrs;
22
+ var title = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.title;
23
+
24
+ // Create a paragraph from the title if it exists
25
+ if (title) {
26
+ var titleParagraph = schema.nodes.paragraph.createAndFill({}, schema.text(title));
27
+ if (titleParagraph) {
28
+ outputNodes.push(titleParagraph);
29
+ }
30
+ }
31
+
32
+ // Add the children
33
+ outputNodes.push.apply(outputNodes, (0, _toConsumableArray2.default)(node.children));
34
+ } else {
35
+ // Fallback: behave like unwrapStep for non-expand nodes
36
+ if (node.children.length === 0) {
37
+ outputNodes.push(node);
38
+ } else {
39
+ outputNodes.push.apply(outputNodes, (0, _toConsumableArray2.default)(node.children));
40
+ }
41
+ }
42
+ });
43
+ return outputNodes;
44
+ };
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.unwrapStep = void 0;
8
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
9
+ var unwrapStep = exports.unwrapStep = function unwrapStep(nodes) {
10
+ var outputNodes = [];
11
+ nodes.forEach(function (node) {
12
+ // we may want to just skip the original instead of using it
13
+ if (node.children.length === 0) {
14
+ outputNodes.push(node);
15
+ } else {
16
+ outputNodes.push.apply(outputNodes, (0, _toConsumableArray2.default)(node.children));
17
+ }
18
+ });
19
+ return outputNodes;
20
+ };
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.getSelectedNode = void 0;
6
+ exports.getTargetNodeTypeNameInContext = exports.getSelectedNode = void 0;
7
7
  var _state = require("@atlaskit/editor-prosemirror/state");
8
8
  var _utils = require("@atlaskit/editor-prosemirror/utils");
9
9
  var _editorTables = require("@atlaskit/editor-tables");
@@ -48,4 +48,10 @@ var getSelectedNode = exports.getSelectedNode = function getSelectedNode(selecti
48
48
  }
49
49
  }
50
50
  return undefined;
51
+ };
52
+ var getTargetNodeTypeNameInContext = exports.getTargetNodeTypeNameInContext = function getTargetNodeTypeNameInContext(nodeTypeName, isNested) {
53
+ if (nodeTypeName === 'expand' && isNested) {
54
+ return 'nestedExpand';
55
+ }
56
+ return nodeTypeName;
51
57
  };
@@ -0,0 +1,23 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.wrapIntoLayoutStep = void 0;
7
+ var _model = require("@atlaskit/editor-prosemirror/model");
8
+ var wrapIntoLayoutStep = exports.wrapIntoLayoutStep = function wrapIntoLayoutStep(nodes, context) {
9
+ var schema = context.schema;
10
+ var _ref = schema.nodes || {},
11
+ layoutSection = _ref.layoutSection,
12
+ layoutColumn = _ref.layoutColumn;
13
+ var columnOne = layoutColumn.createAndFill({}, _model.Fragment.fromArray(nodes));
14
+ var columnTwo = layoutColumn.createAndFill();
15
+ if (!columnOne || !columnTwo) {
16
+ return nodes;
17
+ }
18
+ var layout = layoutSection.createAndFill({}, _model.Fragment.fromArray([columnOne, columnTwo]));
19
+ if (!layout) {
20
+ return nodes;
21
+ }
22
+ return [layout];
23
+ };
@@ -0,0 +1,16 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.wrapStep = void 0;
7
+ var wrapStep = exports.wrapStep = function wrapStep(nodes, context) {
8
+ var schema = context.schema,
9
+ targetNodeTypeName = context.targetNodeTypeName;
10
+ // edge case: nestedExpand
11
+ var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, nodes);
12
+ if (outputNode) {
13
+ return [outputNode];
14
+ }
15
+ return nodes;
16
+ };
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.transformNode = void 0;
7
7
  var _selection = require("@atlaskit/editor-common/selection");
8
8
  var _model = require("@atlaskit/editor-prosemirror/model");
9
+ var _isNestedNode = require("../ui/utils/isNestedNode");
9
10
  var _transform = require("./transform-node-utils/transform");
10
11
  var _utils = require("./transforms/utils");
11
12
  var transformNode = exports.transformNode = function transformNode(api) {
@@ -22,6 +23,7 @@ var transformNode = exports.transformNode = function transformNode(api) {
22
23
  var _expandToBlockRange = (0, _selection.expandToBlockRange)(preservedSelection.$from, preservedSelection.$to),
23
24
  $from = _expandToBlockRange.$from,
24
25
  $to = _expandToBlockRange.$to;
26
+ var isNested = (0, _isNestedNode.isNestedNode)(preservedSelection, '');
25
27
  var selectedParent = $from.parent;
26
28
  var fragment = _model.Fragment.empty;
27
29
  var isList = (0, _utils.isListNode)(selectedParent);
@@ -30,7 +32,8 @@ var transformNode = exports.transformNode = function transformNode(api) {
30
32
  var outputNode = (0, _transform.getOutputNodes)({
31
33
  sourceNode: node,
32
34
  targetNodeType: targetType,
33
- schema: tr.doc.type.schema
35
+ schema: tr.doc.type.schema,
36
+ isNested: isNested
34
37
  });
35
38
  if (outputNode) {
36
39
  fragment = fragment.append(_model.Fragment.fromArray(outputNode));
@@ -0,0 +1,15 @@
1
+ export const flattenStep = (nodes, context) => {
2
+ const {
3
+ schema,
4
+ targetNodeTypeName
5
+ } = context;
6
+
7
+ // TODO: EDITOR-2920 - Implement flattening logic.
8
+ // This is a simplified preliminary approach. We might want to use prosemirror-markdown functions.
9
+ const codeBlockContent = nodes.map(node => node.content.textBetween(0, node.content.size, '\n')).join('\n');
10
+ const outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, schema.text(codeBlockContent));
11
+ if (!outputNode) {
12
+ return nodes;
13
+ }
14
+ return [outputNode];
15
+ };
@@ -1,7 +1,13 @@
1
+ import { getTargetNodeTypeNameInContext } from '../transform-node-utils/utils';
1
2
  import { flattenListStep } from './flattenListStep';
3
+ import { flattenStep } from './flattenStep';
2
4
  import { stubStep } from './stubStep';
3
5
  import { NODE_CATEGORY_BY_TYPE, toNodeTypeValue } from './types';
6
+ import { unwrapExpandStep } from './unwrapExpandStep';
4
7
  import { unwrapListStep } from './unwrapListStep';
8
+ import { unwrapStep } from './unwrapStep';
9
+ import { wrapIntoLayoutStep } from './wrapIntoLayoutStep';
10
+ import { wrapStep } from './wrapStep';
5
11
 
6
12
  // Exampled step for overrides:
7
13
  // - open Block menu on a paragraph, click 'Panel' in the Turn into'
@@ -21,9 +27,9 @@ const TRANSFORM_STEPS = {
21
27
  },
22
28
  container: {
23
29
  atomic: undefined,
24
- container: [stubStep],
30
+ container: [unwrapStep, wrapStep],
25
31
  list: undefined,
26
- text: undefined
32
+ text: [unwrapStep]
27
33
  },
28
34
  list: {
29
35
  atomic: undefined,
@@ -44,6 +50,23 @@ const TRANSFORM_STEPS = {
44
50
  const TRANSFORM_STEPS_OVERRIDE = {
45
51
  paragraph: {
46
52
  panel: [wrapIntoPanelStep]
53
+ },
54
+ panel: {
55
+ layoutSection: [unwrapStep, wrapIntoLayoutStep],
56
+ codeBlock: [unwrapStep, flattenStep, wrapStep]
57
+ },
58
+ expand: {
59
+ panel: [unwrapExpandStep, wrapStep],
60
+ blockquote: [unwrapExpandStep, wrapStep],
61
+ layoutSection: [unwrapExpandStep, wrapIntoLayoutStep],
62
+ paragraph: [unwrapExpandStep],
63
+ codeBlock: [unwrapExpandStep, flattenStep, wrapStep]
64
+ },
65
+ nestedExpand: {
66
+ panel: [unwrapExpandStep, wrapStep],
67
+ blockquote: [unwrapExpandStep, wrapStep],
68
+ paragraph: [unwrapExpandStep],
69
+ codeBlock: [unwrapExpandStep, flattenStep, wrapStep]
47
70
  }
48
71
  };
49
72
  const getTransformStepsForNodeTypes = (selectedNodeTypeName, targetNodeTypeName) => {
@@ -57,11 +80,13 @@ const getTransformStepsForNodeTypes = (selectedNodeTypeName, targetNodeTypeName)
57
80
  export const getOutputNodes = ({
58
81
  sourceNode,
59
82
  targetNodeType,
60
- schema
83
+ schema,
84
+ isNested
61
85
  }) => {
62
86
  const nodesToReplace = [sourceNode];
63
87
  const selectedNodeTypeName = toNodeTypeValue(sourceNode.type.name);
64
- const targetNodeTypeName = toNodeTypeValue(targetNodeType.name);
88
+ let targetNodeTypeName = toNodeTypeValue(targetNodeType.name);
89
+ targetNodeTypeName = getTargetNodeTypeNameInContext(targetNodeTypeName, isNested);
65
90
  if (!selectedNodeTypeName || !targetNodeTypeName) {
66
91
  // We may decide to return an empty array or undefined here
67
92
  return;
@@ -76,6 +101,7 @@ export const getOutputNodes = ({
76
101
  return;
77
102
  }
78
103
  return steps.reduce((nodes, step) => {
79
- return step(nodes, context);
104
+ const result = step(nodes, context);
105
+ return result;
80
106
  }, nodesToReplace);
81
107
  };
@@ -9,7 +9,7 @@ export const NODE_CATEGORY_BY_TYPE = {
9
9
  expand: 'container',
10
10
  extension: 'atomic',
11
11
  heading: 'text',
12
- layout: 'container',
12
+ layoutSection: 'container',
13
13
  media: 'atomic',
14
14
  mediaGroup: 'atomic',
15
15
  mediaSingle: 'atomic',
@@ -0,0 +1,38 @@
1
+ /**
2
+ * Unwraps an expand/nestedExpand node, converting its title attribute to a paragraph
3
+ * and prepending it to the children.
4
+ *
5
+ * Example: expand({ title: 'title' })(p('b')) → [p('title'), p('b')]
6
+ */
7
+ export const unwrapExpandStep = (nodes, context) => {
8
+ const {
9
+ schema
10
+ } = context;
11
+ const outputNodes = [];
12
+ nodes.forEach(node => {
13
+ const isExpand = node.type.name === 'expand' || node.type.name === 'nestedExpand';
14
+ if (isExpand) {
15
+ var _node$attrs;
16
+ const title = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.title;
17
+
18
+ // Create a paragraph from the title if it exists
19
+ if (title) {
20
+ const titleParagraph = schema.nodes.paragraph.createAndFill({}, schema.text(title));
21
+ if (titleParagraph) {
22
+ outputNodes.push(titleParagraph);
23
+ }
24
+ }
25
+
26
+ // Add the children
27
+ outputNodes.push(...node.children);
28
+ } else {
29
+ // Fallback: behave like unwrapStep for non-expand nodes
30
+ if (node.children.length === 0) {
31
+ outputNodes.push(node);
32
+ } else {
33
+ outputNodes.push(...node.children);
34
+ }
35
+ }
36
+ });
37
+ return outputNodes;
38
+ };
@@ -0,0 +1,12 @@
1
+ export const unwrapStep = nodes => {
2
+ const outputNodes = [];
3
+ nodes.forEach(node => {
4
+ // we may want to just skip the original instead of using it
5
+ if (node.children.length === 0) {
6
+ outputNodes.push(node);
7
+ } else {
8
+ outputNodes.push(...node.children);
9
+ }
10
+ });
11
+ return outputNodes;
12
+ };
@@ -43,4 +43,10 @@ export const getSelectedNode = selection => {
43
43
  }
44
44
  }
45
45
  return undefined;
46
+ };
47
+ export const getTargetNodeTypeNameInContext = (nodeTypeName, isNested) => {
48
+ if (nodeTypeName === 'expand' && isNested) {
49
+ return 'nestedExpand';
50
+ }
51
+ return nodeTypeName;
46
52
  };
@@ -0,0 +1,20 @@
1
+ import { Fragment } from '@atlaskit/editor-prosemirror/model';
2
+ export const wrapIntoLayoutStep = (nodes, context) => {
3
+ const {
4
+ schema
5
+ } = context;
6
+ const {
7
+ layoutSection,
8
+ layoutColumn
9
+ } = schema.nodes || {};
10
+ const columnOne = layoutColumn.createAndFill({}, Fragment.fromArray(nodes));
11
+ const columnTwo = layoutColumn.createAndFill();
12
+ if (!columnOne || !columnTwo) {
13
+ return nodes;
14
+ }
15
+ const layout = layoutSection.createAndFill({}, Fragment.fromArray([columnOne, columnTwo]));
16
+ if (!layout) {
17
+ return nodes;
18
+ }
19
+ return [layout];
20
+ };
@@ -0,0 +1,12 @@
1
+ export const wrapStep = (nodes, context) => {
2
+ const {
3
+ schema,
4
+ targetNodeTypeName
5
+ } = context;
6
+ // edge case: nestedExpand
7
+ const outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, nodes);
8
+ if (outputNode) {
9
+ return [outputNode];
10
+ }
11
+ return nodes;
12
+ };
@@ -1,5 +1,6 @@
1
1
  import { expandToBlockRange } from '@atlaskit/editor-common/selection';
2
2
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
3
+ import { isNestedNode } from '../ui/utils/isNestedNode';
3
4
  import { getOutputNodes } from './transform-node-utils/transform';
4
5
  import { isListNode } from './transforms/utils';
5
6
  export const transformNode = api =>
@@ -17,6 +18,7 @@ export const transformNode = api =>
17
18
  $from,
18
19
  $to
19
20
  } = expandToBlockRange(preservedSelection.$from, preservedSelection.$to);
21
+ const isNested = isNestedNode(preservedSelection, '');
20
22
  const selectedParent = $from.parent;
21
23
  let fragment = Fragment.empty;
22
24
  const isList = isListNode(selectedParent);
@@ -25,7 +27,8 @@ export const transformNode = api =>
25
27
  const outputNode = getOutputNodes({
26
28
  sourceNode: node,
27
29
  targetNodeType: targetType,
28
- schema: tr.doc.type.schema
30
+ schema: tr.doc.type.schema,
31
+ isNested
29
32
  });
30
33
  if (outputNode) {
31
34
  fragment = fragment.append(Fragment.fromArray(outputNode));
@@ -0,0 +1,15 @@
1
+ export var flattenStep = function flattenStep(nodes, context) {
2
+ var schema = context.schema,
3
+ targetNodeTypeName = context.targetNodeTypeName;
4
+
5
+ // TODO: EDITOR-2920 - Implement flattening logic.
6
+ // This is a simplified preliminary approach. We might want to use prosemirror-markdown functions.
7
+ var codeBlockContent = nodes.map(function (node) {
8
+ return node.content.textBetween(0, node.content.size, '\n');
9
+ }).join('\n');
10
+ var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, schema.text(codeBlockContent));
11
+ if (!outputNode) {
12
+ return nodes;
13
+ }
14
+ return [outputNode];
15
+ };
@@ -1,7 +1,13 @@
1
+ import { getTargetNodeTypeNameInContext } from '../transform-node-utils/utils';
1
2
  import { flattenListStep } from './flattenListStep';
3
+ import { flattenStep } from './flattenStep';
2
4
  import { stubStep } from './stubStep';
3
5
  import { NODE_CATEGORY_BY_TYPE, toNodeTypeValue } from './types';
6
+ import { unwrapExpandStep } from './unwrapExpandStep';
4
7
  import { unwrapListStep } from './unwrapListStep';
8
+ import { unwrapStep } from './unwrapStep';
9
+ import { wrapIntoLayoutStep } from './wrapIntoLayoutStep';
10
+ import { wrapStep } from './wrapStep';
5
11
 
6
12
  // Exampled step for overrides:
7
13
  // - open Block menu on a paragraph, click 'Panel' in the Turn into'
@@ -21,9 +27,9 @@ var TRANSFORM_STEPS = {
21
27
  },
22
28
  container: {
23
29
  atomic: undefined,
24
- container: [stubStep],
30
+ container: [unwrapStep, wrapStep],
25
31
  list: undefined,
26
- text: undefined
32
+ text: [unwrapStep]
27
33
  },
28
34
  list: {
29
35
  atomic: undefined,
@@ -44,6 +50,23 @@ var TRANSFORM_STEPS = {
44
50
  var TRANSFORM_STEPS_OVERRIDE = {
45
51
  paragraph: {
46
52
  panel: [wrapIntoPanelStep]
53
+ },
54
+ panel: {
55
+ layoutSection: [unwrapStep, wrapIntoLayoutStep],
56
+ codeBlock: [unwrapStep, flattenStep, wrapStep]
57
+ },
58
+ expand: {
59
+ panel: [unwrapExpandStep, wrapStep],
60
+ blockquote: [unwrapExpandStep, wrapStep],
61
+ layoutSection: [unwrapExpandStep, wrapIntoLayoutStep],
62
+ paragraph: [unwrapExpandStep],
63
+ codeBlock: [unwrapExpandStep, flattenStep, wrapStep]
64
+ },
65
+ nestedExpand: {
66
+ panel: [unwrapExpandStep, wrapStep],
67
+ blockquote: [unwrapExpandStep, wrapStep],
68
+ paragraph: [unwrapExpandStep],
69
+ codeBlock: [unwrapExpandStep, flattenStep, wrapStep]
47
70
  }
48
71
  };
49
72
  var getTransformStepsForNodeTypes = function getTransformStepsForNodeTypes(selectedNodeTypeName, targetNodeTypeName) {
@@ -57,10 +80,12 @@ var getTransformStepsForNodeTypes = function getTransformStepsForNodeTypes(selec
57
80
  export var getOutputNodes = function getOutputNodes(_ref) {
58
81
  var sourceNode = _ref.sourceNode,
59
82
  targetNodeType = _ref.targetNodeType,
60
- schema = _ref.schema;
83
+ schema = _ref.schema,
84
+ isNested = _ref.isNested;
61
85
  var nodesToReplace = [sourceNode];
62
86
  var selectedNodeTypeName = toNodeTypeValue(sourceNode.type.name);
63
87
  var targetNodeTypeName = toNodeTypeValue(targetNodeType.name);
88
+ targetNodeTypeName = getTargetNodeTypeNameInContext(targetNodeTypeName, isNested);
64
89
  if (!selectedNodeTypeName || !targetNodeTypeName) {
65
90
  // We may decide to return an empty array or undefined here
66
91
  return;
@@ -75,6 +100,7 @@ export var getOutputNodes = function getOutputNodes(_ref) {
75
100
  return;
76
101
  }
77
102
  return steps.reduce(function (nodes, step) {
78
- return step(nodes, context);
103
+ var result = step(nodes, context);
104
+ return result;
79
105
  }, nodesToReplace);
80
106
  };
@@ -9,7 +9,7 @@ export var NODE_CATEGORY_BY_TYPE = {
9
9
  expand: 'container',
10
10
  extension: 'atomic',
11
11
  heading: 'text',
12
- layout: 'container',
12
+ layoutSection: 'container',
13
13
  media: 'atomic',
14
14
  mediaGroup: 'atomic',
15
15
  mediaSingle: 'atomic',
@@ -0,0 +1,37 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
+ /**
3
+ * Unwraps an expand/nestedExpand node, converting its title attribute to a paragraph
4
+ * and prepending it to the children.
5
+ *
6
+ * Example: expand({ title: 'title' })(p('b')) → [p('title'), p('b')]
7
+ */
8
+ export var unwrapExpandStep = function unwrapExpandStep(nodes, context) {
9
+ var schema = context.schema;
10
+ var outputNodes = [];
11
+ nodes.forEach(function (node) {
12
+ var isExpand = node.type.name === 'expand' || node.type.name === 'nestedExpand';
13
+ if (isExpand) {
14
+ var _node$attrs;
15
+ var title = (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.title;
16
+
17
+ // Create a paragraph from the title if it exists
18
+ if (title) {
19
+ var titleParagraph = schema.nodes.paragraph.createAndFill({}, schema.text(title));
20
+ if (titleParagraph) {
21
+ outputNodes.push(titleParagraph);
22
+ }
23
+ }
24
+
25
+ // Add the children
26
+ outputNodes.push.apply(outputNodes, _toConsumableArray(node.children));
27
+ } else {
28
+ // Fallback: behave like unwrapStep for non-expand nodes
29
+ if (node.children.length === 0) {
30
+ outputNodes.push(node);
31
+ } else {
32
+ outputNodes.push.apply(outputNodes, _toConsumableArray(node.children));
33
+ }
34
+ }
35
+ });
36
+ return outputNodes;
37
+ };
@@ -0,0 +1,13 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
2
+ export var unwrapStep = function unwrapStep(nodes) {
3
+ var outputNodes = [];
4
+ nodes.forEach(function (node) {
5
+ // we may want to just skip the original instead of using it
6
+ if (node.children.length === 0) {
7
+ outputNodes.push(node);
8
+ } else {
9
+ outputNodes.push.apply(outputNodes, _toConsumableArray(node.children));
10
+ }
11
+ });
12
+ return outputNodes;
13
+ };
@@ -42,4 +42,10 @@ export var getSelectedNode = function getSelectedNode(selection) {
42
42
  }
43
43
  }
44
44
  return undefined;
45
+ };
46
+ export var getTargetNodeTypeNameInContext = function getTargetNodeTypeNameInContext(nodeTypeName, isNested) {
47
+ if (nodeTypeName === 'expand' && isNested) {
48
+ return 'nestedExpand';
49
+ }
50
+ return nodeTypeName;
45
51
  };
@@ -0,0 +1,17 @@
1
+ import { Fragment } from '@atlaskit/editor-prosemirror/model';
2
+ export var wrapIntoLayoutStep = function wrapIntoLayoutStep(nodes, context) {
3
+ var schema = context.schema;
4
+ var _ref = schema.nodes || {},
5
+ layoutSection = _ref.layoutSection,
6
+ layoutColumn = _ref.layoutColumn;
7
+ var columnOne = layoutColumn.createAndFill({}, Fragment.fromArray(nodes));
8
+ var columnTwo = layoutColumn.createAndFill();
9
+ if (!columnOne || !columnTwo) {
10
+ return nodes;
11
+ }
12
+ var layout = layoutSection.createAndFill({}, Fragment.fromArray([columnOne, columnTwo]));
13
+ if (!layout) {
14
+ return nodes;
15
+ }
16
+ return [layout];
17
+ };
@@ -0,0 +1,10 @@
1
+ export var wrapStep = function wrapStep(nodes, context) {
2
+ var schema = context.schema,
3
+ targetNodeTypeName = context.targetNodeTypeName;
4
+ // edge case: nestedExpand
5
+ var outputNode = schema.nodes[targetNodeTypeName].createAndFill({}, nodes);
6
+ if (outputNode) {
7
+ return [outputNode];
8
+ }
9
+ return nodes;
10
+ };
@@ -1,5 +1,6 @@
1
1
  import { expandToBlockRange } from '@atlaskit/editor-common/selection';
2
2
  import { Fragment } from '@atlaskit/editor-prosemirror/model';
3
+ import { isNestedNode } from '../ui/utils/isNestedNode';
3
4
  import { getOutputNodes } from './transform-node-utils/transform';
4
5
  import { isListNode } from './transforms/utils';
5
6
  export var transformNode = function transformNode(api) {
@@ -16,6 +17,7 @@ export var transformNode = function transformNode(api) {
16
17
  var _expandToBlockRange = expandToBlockRange(preservedSelection.$from, preservedSelection.$to),
17
18
  $from = _expandToBlockRange.$from,
18
19
  $to = _expandToBlockRange.$to;
20
+ var isNested = isNestedNode(preservedSelection, '');
19
21
  var selectedParent = $from.parent;
20
22
  var fragment = Fragment.empty;
21
23
  var isList = isListNode(selectedParent);
@@ -24,7 +26,8 @@ export var transformNode = function transformNode(api) {
24
26
  var outputNode = getOutputNodes({
25
27
  sourceNode: node,
26
28
  targetNodeType: targetType,
27
- schema: tr.doc.type.schema
29
+ schema: tr.doc.type.schema,
30
+ isNested: isNested
28
31
  });
29
32
  if (outputNode) {
30
33
  fragment = fragment.append(Fragment.fromArray(outputNode));
@@ -0,0 +1,2 @@
1
+ import type { TransformStep } from './types';
2
+ export declare const flattenStep: TransformStep;
@@ -1,8 +1,9 @@
1
1
  import { type Node as PMNode, type NodeType, type Schema } from '@atlaskit/editor-prosemirror/model';
2
2
  interface GetOutputNodesArgs {
3
+ isNested: boolean;
3
4
  schema: Schema;
4
5
  sourceNode: PMNode;
5
6
  targetNodeType: NodeType;
6
7
  }
7
- export declare const getOutputNodes: ({ sourceNode, targetNodeType, schema, }: GetOutputNodesArgs) => PMNode[] | undefined;
8
+ export declare const getOutputNodes: ({ sourceNode, targetNodeType, schema, isNested, }: GetOutputNodesArgs) => PMNode[] | undefined;
8
9
  export {};
@@ -1,5 +1,5 @@
1
1
  import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
2
- export type NodeTypeName = 'blockquote' | 'blockCard' | 'bodiedExtension' | 'bulletList' | 'codeBlock' | 'decisionList' | 'embedCard' | 'expand' | 'extension' | 'heading' | 'layout' | 'media' | 'mediaGroup' | 'mediaSingle' | 'multiBodiedExtension' | 'orderedList' | 'panel' | 'paragraph' | 'nestedExpand' | 'taskList' | 'table';
2
+ export type NodeTypeName = 'blockquote' | 'blockCard' | 'bodiedExtension' | 'bulletList' | 'codeBlock' | 'decisionList' | 'embedCard' | 'expand' | 'extension' | 'heading' | 'layoutSection' | 'media' | 'mediaGroup' | 'mediaSingle' | 'multiBodiedExtension' | 'orderedList' | 'panel' | 'paragraph' | 'nestedExpand' | 'taskList' | 'table';
3
3
  export type NodeCategory = 'atomic' | 'container' | 'list' | 'text';
4
4
  export declare const NODE_CATEGORY_BY_TYPE: Record<NodeTypeName, NodeCategory>;
5
5
  export declare const isNodeTypeName: (value: string) => value is NodeTypeName;
@@ -0,0 +1,8 @@
1
+ import type { TransformStep } from './types';
2
+ /**
3
+ * Unwraps an expand/nestedExpand node, converting its title attribute to a paragraph
4
+ * and prepending it to the children.
5
+ *
6
+ * Example: expand({ title: 'title' })(p('b')) → [p('title'), p('b')]
7
+ */
8
+ export declare const unwrapExpandStep: TransformStep;
@@ -0,0 +1,2 @@
1
+ import type { TransformStep } from './types';
2
+ export declare const unwrapStep: TransformStep;
@@ -1,3 +1,5 @@
1
1
  import type { Selection } from '@atlaskit/editor-prosemirror/state';
2
2
  import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
3
+ import type { NodeTypeName } from './types';
3
4
  export declare const getSelectedNode: (selection: Selection) => ContentNodeWithPos | undefined;
5
+ export declare const getTargetNodeTypeNameInContext: (nodeTypeName: NodeTypeName | null, isNested?: boolean) => NodeTypeName | null;
@@ -0,0 +1,2 @@
1
+ import type { TransformStep } from './types';
2
+ export declare const wrapIntoLayoutStep: TransformStep;
@@ -0,0 +1,2 @@
1
+ import type { TransformStep } from './types';
2
+ export declare const wrapStep: TransformStep;
@@ -0,0 +1,2 @@
1
+ import type { TransformStep } from './types';
2
+ export declare const flattenStep: TransformStep;
@@ -1,8 +1,9 @@
1
1
  import { type Node as PMNode, type NodeType, type Schema } from '@atlaskit/editor-prosemirror/model';
2
2
  interface GetOutputNodesArgs {
3
+ isNested: boolean;
3
4
  schema: Schema;
4
5
  sourceNode: PMNode;
5
6
  targetNodeType: NodeType;
6
7
  }
7
- export declare const getOutputNodes: ({ sourceNode, targetNodeType, schema, }: GetOutputNodesArgs) => PMNode[] | undefined;
8
+ export declare const getOutputNodes: ({ sourceNode, targetNodeType, schema, isNested, }: GetOutputNodesArgs) => PMNode[] | undefined;
8
9
  export {};
@@ -1,5 +1,5 @@
1
1
  import type { Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
2
- export type NodeTypeName = 'blockquote' | 'blockCard' | 'bodiedExtension' | 'bulletList' | 'codeBlock' | 'decisionList' | 'embedCard' | 'expand' | 'extension' | 'heading' | 'layout' | 'media' | 'mediaGroup' | 'mediaSingle' | 'multiBodiedExtension' | 'orderedList' | 'panel' | 'paragraph' | 'nestedExpand' | 'taskList' | 'table';
2
+ export type NodeTypeName = 'blockquote' | 'blockCard' | 'bodiedExtension' | 'bulletList' | 'codeBlock' | 'decisionList' | 'embedCard' | 'expand' | 'extension' | 'heading' | 'layoutSection' | 'media' | 'mediaGroup' | 'mediaSingle' | 'multiBodiedExtension' | 'orderedList' | 'panel' | 'paragraph' | 'nestedExpand' | 'taskList' | 'table';
3
3
  export type NodeCategory = 'atomic' | 'container' | 'list' | 'text';
4
4
  export declare const NODE_CATEGORY_BY_TYPE: Record<NodeTypeName, NodeCategory>;
5
5
  export declare const isNodeTypeName: (value: string) => value is NodeTypeName;
@@ -0,0 +1,8 @@
1
+ import type { TransformStep } from './types';
2
+ /**
3
+ * Unwraps an expand/nestedExpand node, converting its title attribute to a paragraph
4
+ * and prepending it to the children.
5
+ *
6
+ * Example: expand({ title: 'title' })(p('b')) → [p('title'), p('b')]
7
+ */
8
+ export declare const unwrapExpandStep: TransformStep;
@@ -0,0 +1,2 @@
1
+ import type { TransformStep } from './types';
2
+ export declare const unwrapStep: TransformStep;
@@ -1,3 +1,5 @@
1
1
  import type { Selection } from '@atlaskit/editor-prosemirror/state';
2
2
  import { type ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
3
+ import type { NodeTypeName } from './types';
3
4
  export declare const getSelectedNode: (selection: Selection) => ContentNodeWithPos | undefined;
5
+ export declare const getTargetNodeTypeNameInContext: (nodeTypeName: NodeTypeName | null, isNested?: boolean) => NodeTypeName | null;
@@ -0,0 +1,2 @@
1
+ import type { TransformStep } from './types';
2
+ export declare const wrapIntoLayoutStep: TransformStep;
@@ -0,0 +1,2 @@
1
+ import type { TransformStep } from './types';
2
+ export declare const wrapStep: TransformStep;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-menu",
3
- "version": "5.1.4",
3
+ "version": "5.1.5",
4
4
  "description": "BlockMenu plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/platform-feature-flags": "^1.1.0",
45
45
  "@atlaskit/platform-feature-flags-react": "^0.4.0",
46
46
  "@atlaskit/primitives": "^16.4.0",
47
- "@atlaskit/tmp-editor-statsig": "^14.5.0",
47
+ "@atlaskit/tmp-editor-statsig": "^14.6.0",
48
48
  "@atlaskit/tokens": "^8.4.0",
49
49
  "@babel/runtime": "^7.0.0"
50
50
  },