@atlaskit/editor-plugin-block-menu 1.0.5 → 1.0.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 1.0.6
+
+### Patch Changes
+
+- [`40e6bcca6edd4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/40e6bcca6edd4) -
+  [ux] ED-29146: unwrap container to block nodes
+- Updated dependencies
+
 ## 1.0.5
 
 ### Patch Changes

package/dist/cjs/editor-commands/transforms/block-transforms.js

@@ -33,7 +33,8 @@ var transformBlockNode = exports.transformBlockNode = function transformBlockNod
 var transformToBlockNode = function transformToBlockNode(context) {
   var tr = context.tr,
     targetNodeType = context.targetNodeType,
-    targetAttrs = context.targetAttrs;
+    targetAttrs = context.targetAttrs,
+    sourceNode = context.sourceNode;
   var selection = tr.selection,
     doc = tr.doc;
   var $from = selection.$from,
@@ -44,6 +45,11 @@ var transformToBlockNode = function transformToBlockNode(context) {
     var node = schema.nodes.codeBlock.createChecked(undefined, textContent);
     return tr.replaceRangeWith(selection.from, selection.to, node);
   }
+
+  // code block acts like a container, we need to unwrap it
+  if (sourceNode.type === schema.nodes.codeBlock) {
+    return (0, _containerTransforms.unwrapAndConvertToBlockType)(context);
+  }
   tr.setBlockType($from.pos, $to.pos, targetNodeType, targetAttrs);
   return tr;
 };

package/dist/cjs/editor-commands/transforms/container-transforms.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.unwrapAndConvertToList = exports.unwrapAndConvertToBlockType = exports.transformToContainer = exports.transformContainerNode = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils = require("./utils");
 var convertInvalidNodeToValidNodeType = function convertInvalidNodeToValidNodeType(sourceContent, sourceNodeType, validNodeType, withMarks) {
@@ -60,7 +62,13 @@ var transformContainerNode = exports.transformContainerNode = function transform
 
   // Transform container to block type - unwrap and convert content
   if ((0, _utils.isBlockNodeType)(targetNodeType)) {
-    return unwrapAndConvertToBlockType();
+    return unwrapAndConvertToBlockType({
+      tr: tr,
+      sourceNode: sourceNode,
+      sourcePos: sourcePos,
+      targetNodeType: targetNodeType,
+      targetAttrs: targetAttrs
+    });
   }
 
   // Transform container to list type
@@ -85,9 +93,73 @@ var transformContainerNode = exports.transformContainerNode = function transform
 /**
  * Unwrap container node and convert content to block type
  */
-var unwrapAndConvertToBlockType = exports.unwrapAndConvertToBlockType = function unwrapAndConvertToBlockType() {
-  // Convert to block type directly
-  return null;
+var unwrapAndConvertToBlockType = exports.unwrapAndConvertToBlockType = function unwrapAndConvertToBlockType(context) {
+  var tr = context.tr,
+    targetNodeType = context.targetNodeType,
+    targetAttrs = context.targetAttrs,
+    sourceNode = context.sourceNode,
+    sourcePos = context.sourcePos;
+  var selection = tr.selection;
+  var schema = selection.$from.doc.type.schema;
+  var _schema$nodes = schema.nodes,
+    paragraph = _schema$nodes.paragraph,
+    heading = _schema$nodes.heading,
+    codeBlock = _schema$nodes.codeBlock,
+    expand = _schema$nodes.expand;
+  var rangeStart = sourcePos !== null ? sourcePos : selection.from;
+  var sourceChildren = (0, _toConsumableArray2.default)(sourceNode.children);
+  var transformedContent = [];
+
+  // If the container is expand, we need to extract the title and convert it to a paragraph
+  // and add it to the beginning of the content
+  if (sourceNode.type === expand) {
+    var _sourceNode$attrs;
+    var title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    if (title) {
+      var titleContent = schema.text(title);
+      sourceChildren.unshift(paragraph.createChecked({}, titleContent));
+    }
+  }
+
+  // if the container is a code block, convert text content to multiple paragraphs
+  if (sourceNode.type === codeBlock) {
+    var codeText = sourceNode.textContent;
+    var lines = codeText.split('\n');
+    var paragraphNodes = lines.map(function (line) {
+      return paragraph.create(null, line ? schema.text(line) : null);
+    });
+    sourceChildren = paragraphNodes;
+  }
+
+  // if target node is a paragraph, just do unwrap
+  if (targetNodeType === paragraph) {
+    transformedContent = sourceChildren;
+  }
+
+  // if target node is a headings, do unwrap and convert to heading
+  if (targetNodeType === heading && targetAttrs) {
+    var targetHeadingLevel = targetAttrs.level;
+    sourceChildren.forEach(function (node, index) {
+      if (node.isTextblock) {
+        var headingNode = heading.create({
+          level: targetHeadingLevel
+        }, node.content);
+        sourceChildren[index] = headingNode;
+      }
+    });
+    transformedContent = sourceChildren;
+  }
+
+  // if target node is code block, do unwrap and convert to code block
+  if (targetNodeType === codeBlock) {
+    var codeBlockContent = sourceChildren.map(function (node) {
+      return node.content.textBetween(0, node.content.size, '\n');
+    }).join('\n');
+    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent))];
+  }
+  var slice = new _model.Slice(_model.Fragment.fromArray(transformedContent), 0, 0);
+  tr.replaceRange(rangeStart, rangeStart + sourceNode.nodeSize, slice);
+  return tr;
 };
 
 /**
@@ -103,11 +175,11 @@ var unwrapAndConvertToList = exports.unwrapAndConvertToList = function unwrapAnd
     return tr;
   }
   var schema = tr.doc.type.schema;
-  var _schema$nodes = schema.nodes,
-    listItem = _schema$nodes.listItem,
-    paragraph = _schema$nodes.paragraph,
-    taskList = _schema$nodes.taskList,
-    taskItem = _schema$nodes.taskItem;
+  var _schema$nodes2 = schema.nodes,
+    listItem = _schema$nodes2.listItem,
+    paragraph = _schema$nodes2.paragraph,
+    taskList = _schema$nodes2.taskList,
+    taskItem = _schema$nodes2.taskItem;
   var isTargetTaskList = targetNodeType === taskList;
   var createListItemFromInline = function createListItemFromInline(inlineFrag) {
     return isTargetTaskList ? taskItem.create(null, inlineFrag) : listItem.create(null, paragraph.create(null, inlineFrag));
@@ -123,8 +195,8 @@ var unwrapAndConvertToList = exports.unwrapAndConvertToList = function unwrapAnd
 
   // Expand's title should become the first item of the list
   if (sourceNode.type.name === 'expand') {
-    var _sourceNode$attrs;
-    var title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    var _sourceNode$attrs2;
+    var title = (_sourceNode$attrs2 = sourceNode.attrs) === null || _sourceNode$attrs2 === void 0 ? void 0 : _sourceNode$attrs2.title;
     if (title) {
       var titleContent = schema.text(title);
       items.push(isTargetTaskList ? taskItem.create(null, titleContent) : listItem.create(null, paragraph.create(null, titleContent)));

package/dist/es2019/editor-commands/transforms/block-transforms.js

@@ -1,4 +1,4 @@
-import { transformToContainer } from './container-transforms';
+import { transformToContainer, unwrapAndConvertToBlockType } from './container-transforms';
 import { getInlineNodeTextContent } from './inline-node-transforms';
 import { transformBlockToList } from './list-transforms';
 import { isListNodeType, isContainerNodeType, isBlockNodeType } from './utils';
@@ -31,7 +31,8 @@ const transformToBlockNode = context => {
   const {
     tr,
     targetNodeType,
-    targetAttrs
+    targetAttrs,
+    sourceNode
   } = context;
   const {
     selection,
@@ -47,6 +48,11 @@ const transformToBlockNode = context => {
     const node = schema.nodes.codeBlock.createChecked(undefined, textContent);
     return tr.replaceRangeWith(selection.from, selection.to, node);
   }
+
+  // code block acts like a container, we need to unwrap it
+  if (sourceNode.type === schema.nodes.codeBlock) {
+    return unwrapAndConvertToBlockType(context);
+  }
   tr.setBlockType($from.pos, $to.pos, targetNodeType, targetAttrs);
   return tr;
 };

package/dist/es2019/editor-commands/transforms/container-transforms.js

@@ -1,4 +1,4 @@
-import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { isBlockNodeType, isListNodeType, isContainerNodeType } from './utils';
 const convertInvalidNodeToValidNodeType = (sourceContent, sourceNodeType, validNodeType, withMarks) => {
   const validTransformedContent = [];
@@ -56,7 +56,13 @@ export const transformContainerNode = ({
 
   // Transform container to block type - unwrap and convert content
   if (isBlockNodeType(targetNodeType)) {
-    return unwrapAndConvertToBlockType();
+    return unwrapAndConvertToBlockType({
+      tr,
+      sourceNode,
+      sourcePos,
+      targetNodeType,
+      targetAttrs
+    });
   }
 
   // Transform container to list type
@@ -81,9 +87,74 @@ export const transformContainerNode = ({
 /**
  * Unwrap container node and convert content to block type
  */
-export const unwrapAndConvertToBlockType = () => {
-  // Convert to block type directly
-  return null;
+export const unwrapAndConvertToBlockType = context => {
+  const {
+    tr,
+    targetNodeType,
+    targetAttrs,
+    sourceNode,
+    sourcePos
+  } = context;
+  const {
+    selection
+  } = tr;
+  const schema = selection.$from.doc.type.schema;
+  const {
+    paragraph,
+    heading,
+    codeBlock,
+    expand
+  } = schema.nodes;
+  const rangeStart = sourcePos !== null ? sourcePos : selection.from;
+  let sourceChildren = [...sourceNode.children];
+  let transformedContent = [];
+
+  // If the container is expand, we need to extract the title and convert it to a paragraph
+  // and add it to the beginning of the content
+  if (sourceNode.type === expand) {
+    var _sourceNode$attrs;
+    const title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    if (title) {
+      const titleContent = schema.text(title);
+      sourceChildren.unshift(paragraph.createChecked({}, titleContent));
+    }
+  }
+
+  // if the container is a code block, convert text content to multiple paragraphs
+  if (sourceNode.type === codeBlock) {
+    const codeText = sourceNode.textContent;
+    const lines = codeText.split('\n');
+    const paragraphNodes = lines.map(line => paragraph.create(null, line ? schema.text(line) : null));
+    sourceChildren = paragraphNodes;
+  }
+
+  // if target node is a paragraph, just do unwrap
+  if (targetNodeType === paragraph) {
+    transformedContent = sourceChildren;
+  }
+
+  // if target node is a headings, do unwrap and convert to heading
+  if (targetNodeType === heading && targetAttrs) {
+    const targetHeadingLevel = targetAttrs.level;
+    sourceChildren.forEach((node, index) => {
+      if (node.isTextblock) {
+        const headingNode = heading.create({
+          level: targetHeadingLevel
+        }, node.content);
+        sourceChildren[index] = headingNode;
+      }
+    });
+    transformedContent = sourceChildren;
+  }
+
+  // if target node is code block, do unwrap and convert to code block
+  if (targetNodeType === codeBlock) {
+    const codeBlockContent = sourceChildren.map(node => node.content.textBetween(0, node.content.size, '\n')).join('\n');
+    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent))];
+  }
+  const slice = new Slice(Fragment.fromArray(transformedContent), 0, 0);
+  tr.replaceRange(rangeStart, rangeStart + sourceNode.nodeSize, slice);
+  return tr;
 };
 
 /**
@@ -123,8 +194,8 @@ export const unwrapAndConvertToList = ({
 
   // Expand's title should become the first item of the list
   if (sourceNode.type.name === 'expand') {
-    var _sourceNode$attrs;
-    const title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    var _sourceNode$attrs2;
+    const title = (_sourceNode$attrs2 = sourceNode.attrs) === null || _sourceNode$attrs2 === void 0 ? void 0 : _sourceNode$attrs2.title;
     if (title) {
       const titleContent = schema.text(title);
       items.push(isTargetTaskList ? taskItem.create(null, titleContent) : listItem.create(null, paragraph.create(null, titleContent)));

package/dist/esm/editor-commands/transforms/block-transforms.js

@@ -1,4 +1,4 @@
-import { transformToContainer } from './container-transforms';
+import { transformToContainer, unwrapAndConvertToBlockType } from './container-transforms';
 import { getInlineNodeTextContent } from './inline-node-transforms';
 import { transformBlockToList } from './list-transforms';
 import { isListNodeType, isContainerNodeType, isBlockNodeType } from './utils';
@@ -28,7 +28,8 @@ export var transformBlockNode = function transformBlockNode(context) {
 var transformToBlockNode = function transformToBlockNode(context) {
   var tr = context.tr,
     targetNodeType = context.targetNodeType,
-    targetAttrs = context.targetAttrs;
+    targetAttrs = context.targetAttrs,
+    sourceNode = context.sourceNode;
   var selection = tr.selection,
     doc = tr.doc;
   var $from = selection.$from,
@@ -39,6 +40,11 @@ var transformToBlockNode = function transformToBlockNode(context) {
     var node = schema.nodes.codeBlock.createChecked(undefined, textContent);
     return tr.replaceRangeWith(selection.from, selection.to, node);
   }
+
+  // code block acts like a container, we need to unwrap it
+  if (sourceNode.type === schema.nodes.codeBlock) {
+    return unwrapAndConvertToBlockType(context);
+  }
   tr.setBlockType($from.pos, $to.pos, targetNodeType, targetAttrs);
   return tr;
 };

package/dist/esm/editor-commands/transforms/container-transforms.js

@@ -1,4 +1,5 @@
-import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { isBlockNodeType, isListNodeType, isContainerNodeType } from './utils';
 var convertInvalidNodeToValidNodeType = function convertInvalidNodeToValidNodeType(sourceContent, sourceNodeType, validNodeType, withMarks) {
   var validTransformedContent = [];
@@ -54,7 +55,13 @@ export var transformContainerNode = function transformContainerNode(_ref2) {
 
   // Transform container to block type - unwrap and convert content
   if (isBlockNodeType(targetNodeType)) {
-    return unwrapAndConvertToBlockType();
+    return unwrapAndConvertToBlockType({
+      tr: tr,
+      sourceNode: sourceNode,
+      sourcePos: sourcePos,
+      targetNodeType: targetNodeType,
+      targetAttrs: targetAttrs
+    });
   }
 
   // Transform container to list type
@@ -79,9 +86,73 @@ export var transformContainerNode = function transformContainerNode(_ref2) {
 /**
  * Unwrap container node and convert content to block type
  */
-export var unwrapAndConvertToBlockType = function unwrapAndConvertToBlockType() {
-  // Convert to block type directly
-  return null;
+export var unwrapAndConvertToBlockType = function unwrapAndConvertToBlockType(context) {
+  var tr = context.tr,
+    targetNodeType = context.targetNodeType,
+    targetAttrs = context.targetAttrs,
+    sourceNode = context.sourceNode,
+    sourcePos = context.sourcePos;
+  var selection = tr.selection;
+  var schema = selection.$from.doc.type.schema;
+  var _schema$nodes = schema.nodes,
+    paragraph = _schema$nodes.paragraph,
+    heading = _schema$nodes.heading,
+    codeBlock = _schema$nodes.codeBlock,
+    expand = _schema$nodes.expand;
+  var rangeStart = sourcePos !== null ? sourcePos : selection.from;
+  var sourceChildren = _toConsumableArray(sourceNode.children);
+  var transformedContent = [];
+
+  // If the container is expand, we need to extract the title and convert it to a paragraph
+  // and add it to the beginning of the content
+  if (sourceNode.type === expand) {
+    var _sourceNode$attrs;
+    var title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    if (title) {
+      var titleContent = schema.text(title);
+      sourceChildren.unshift(paragraph.createChecked({}, titleContent));
+    }
+  }
+
+  // if the container is a code block, convert text content to multiple paragraphs
+  if (sourceNode.type === codeBlock) {
+    var codeText = sourceNode.textContent;
+    var lines = codeText.split('\n');
+    var paragraphNodes = lines.map(function (line) {
+      return paragraph.create(null, line ? schema.text(line) : null);
+    });
+    sourceChildren = paragraphNodes;
+  }
+
+  // if target node is a paragraph, just do unwrap
+  if (targetNodeType === paragraph) {
+    transformedContent = sourceChildren;
+  }
+
+  // if target node is a headings, do unwrap and convert to heading
+  if (targetNodeType === heading && targetAttrs) {
+    var targetHeadingLevel = targetAttrs.level;
+    sourceChildren.forEach(function (node, index) {
+      if (node.isTextblock) {
+        var headingNode = heading.create({
+          level: targetHeadingLevel
+        }, node.content);
+        sourceChildren[index] = headingNode;
+      }
+    });
+    transformedContent = sourceChildren;
+  }
+
+  // if target node is code block, do unwrap and convert to code block
+  if (targetNodeType === codeBlock) {
+    var codeBlockContent = sourceChildren.map(function (node) {
+      return node.content.textBetween(0, node.content.size, '\n');
+    }).join('\n');
+    transformedContent = [codeBlock.createChecked({}, schema.text(codeBlockContent))];
+  }
+  var slice = new Slice(Fragment.fromArray(transformedContent), 0, 0);
+  tr.replaceRange(rangeStart, rangeStart + sourceNode.nodeSize, slice);
+  return tr;
 };
 
 /**
@@ -97,11 +168,11 @@ export var unwrapAndConvertToList = function unwrapAndConvertToList(_ref3) {
     return tr;
   }
   var schema = tr.doc.type.schema;
-  var _schema$nodes = schema.nodes,
-    listItem = _schema$nodes.listItem,
-    paragraph = _schema$nodes.paragraph,
-    taskList = _schema$nodes.taskList,
-    taskItem = _schema$nodes.taskItem;
+  var _schema$nodes2 = schema.nodes,
+    listItem = _schema$nodes2.listItem,
+    paragraph = _schema$nodes2.paragraph,
+    taskList = _schema$nodes2.taskList,
+    taskItem = _schema$nodes2.taskItem;
   var isTargetTaskList = targetNodeType === taskList;
   var createListItemFromInline = function createListItemFromInline(inlineFrag) {
     return isTargetTaskList ? taskItem.create(null, inlineFrag) : listItem.create(null, paragraph.create(null, inlineFrag));
@@ -117,8 +188,8 @@ export var unwrapAndConvertToList = function unwrapAndConvertToList(_ref3) {
 
   // Expand's title should become the first item of the list
   if (sourceNode.type.name === 'expand') {
-    var _sourceNode$attrs;
-    var title = (_sourceNode$attrs = sourceNode.attrs) === null || _sourceNode$attrs === void 0 ? void 0 : _sourceNode$attrs.title;
+    var _sourceNode$attrs2;
+    var title = (_sourceNode$attrs2 = sourceNode.attrs) === null || _sourceNode$attrs2 === void 0 ? void 0 : _sourceNode$attrs2.title;
     if (title) {
       var titleContent = schema.text(title);
       items.push(isTargetTaskList ? taskItem.create(null, titleContent) : listItem.create(null, paragraph.create(null, titleContent)));

package/dist/types/editor-commands/transforms/container-transforms.d.ts

@@ -10,7 +10,7 @@ export declare const transformContainerNode: TransformFunction;
 /**
  * Unwrap container node and convert content to block type
  */
-export declare const unwrapAndConvertToBlockType: () => null;
+export declare const unwrapAndConvertToBlockType: (context: TransformContext) => import("prosemirror-state").Transaction;
 /**
  * Unwrap container node and convert content to list
  */

package/dist/types-ts4.5/editor-commands/transforms/container-transforms.d.ts

@@ -10,7 +10,7 @@ export declare const transformContainerNode: TransformFunction;
 /**
  * Unwrap container node and convert content to block type
  */
-export declare const unwrapAndConvertToBlockType: () => null;
+export declare const unwrapAndConvertToBlockType: (context: TransformContext) => import("prosemirror-state").Transaction;
 /**
  * Unwrap container node and convert content to list
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "1.0.5",
+	"version": "1.0.6",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^108.3.0",
+		"@atlaskit/editor-common": "^108.5.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},