@atlaskit/editor-plugin-list 4.1.5 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-list
 
+## 4.2.0
+
+### Minor Changes
+
+- [#130794](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130794)
+  [`6271b4a0cda38`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6271b4a0cda38) -
+  [ux] ED-26943 Create new list item when hit Enter at the end of a block element in list
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.1.5
 
 ### Patch Changes

package/dist/cjs/pm-plugins/commands/index.js

@@ -37,7 +37,11 @@ var enterKeyCommand = exports.enterKeyCommand = function enterKeyCommand(editorA
         var _state$schema$nodes = state.schema.nodes,
           listItem = _state$schema$nodes.listItem,
           codeBlock = _state$schema$nodes.codeBlock;
-        var wrapper = $from.node($from.depth - 1);
+
+        // the list item is the parent of the gap cursor
+        // while for text, list item is the grant parent of the text node
+        var isGapCursorSelection = selection instanceof _selection.GapCursorSelection;
+        var wrapper = isGapCursorSelection && (0, _platformFeatureFlags.fg)('platform_editor_split_list_item_for_gap_cursor') ? $from.parent : $from.node($from.depth - 1);
         if (wrapper && wrapper.type === listItem) {
           /** Check if the wrapper has any visible content */
           var wrapperHasContent = (0, _utils.hasVisibleContent)(wrapper);
@@ -203,7 +207,11 @@ function splitListItem(itemType) {
     if (node && node.isBlock || $from.depth < 2 || !$from.sameParent($to)) {
       return false;
     }
-    var grandParent = $from.node(-1);
+
+    // list item is the parent of the gap cursor instead of grant parent;
+    // rename grantParent to WrapperlistItem once we clean up platform_editor_split_list_item_for_gap_cursor
+    var isGapCursorSelection = ref instanceof _selection.GapCursorSelection;
+    var grandParent = isGapCursorSelection && (0, _platformFeatureFlags.fg)('platform_editor_split_list_item_for_gap_cursor') ? $from.parent : $from.node(-1);
     if (grandParent.type !== itemType) {
       return false;
     }
@@ -242,10 +250,33 @@ function splitListItem(itemType) {
     var types = nextType && [null, {
       type: nextType
     }];
-    if (dispatch) {
-      dispatch(tr.split($from.pos, 2, types !== null && types !== void 0 ? types : undefined).scrollIntoView());
+    if ((0, _platformFeatureFlags.fg)('platform_editor_split_list_item_for_gap_cursor')) {
+      if (dispatch) {
+        var _$from$nodeBefore;
+        if (ref instanceof _state.TextSelection) {
+          dispatch(tr.split($from.pos, 2, types !== null && types !== void 0 ? types : undefined).scrollIntoView());
+          return true;
+        }
+
+        // create new list item with empty paragraph when user click enter on gap cursor
+        if (isGapCursorSelection && (_$from$nodeBefore = $from.nodeBefore) !== null && _$from$nodeBefore !== void 0 && _$from$nodeBefore.isBlock) {
+          // For gap cursor selection , we can not split the list item directly
+          // We need to insert a new list item after the current list item to simulate the split behaviour
+          var _state$schema$nodes2 = state.schema.nodes,
+            listItem = _state$schema$nodes2.listItem,
+            paragraph = _state$schema$nodes2.paragraph;
+          var newListItem = listItem.createChecked({}, paragraph.createChecked());
+          dispatch(tr.insert($from.pos, newListItem).setSelection(_state.Selection.near(tr.doc.resolve($to.pos + 1))).scrollIntoView());
+          return true;
+        }
+      }
+      return false;
+    } else {
+      if (dispatch) {
+        dispatch(tr.split($from.pos, 2, types !== null && types !== void 0 ? types : undefined).scrollIntoView());
+      }
+      return true;
     }
-    return true;
   };
 }
 var deletePreviousEmptyListItem = function deletePreviousEmptyListItem(state, dispatch) {
@@ -272,12 +303,12 @@ var deletePreviousEmptyListItem = function deletePreviousEmptyListItem(state, di
 };
 var joinToPreviousListItem = function joinToPreviousListItem(state, dispatch) {
   var $from = state.selection.$from;
-  var _state$schema$nodes2 = state.schema.nodes,
-    paragraph = _state$schema$nodes2.paragraph,
-    listItem = _state$schema$nodes2.listItem,
-    codeBlock = _state$schema$nodes2.codeBlock,
-    bulletList = _state$schema$nodes2.bulletList,
-    orderedList = _state$schema$nodes2.orderedList;
+  var _state$schema$nodes3 = state.schema.nodes,
+    paragraph = _state$schema$nodes3.paragraph,
+    listItem = _state$schema$nodes3.listItem,
+    codeBlock = _state$schema$nodes3.codeBlock,
+    bulletList = _state$schema$nodes3.bulletList,
+    orderedList = _state$schema$nodes3.orderedList;
   var isGapCursorShown = state.selection instanceof _selection.GapCursorSelection;
   var $cutPos = isGapCursorShown ? state.doc.resolve($from.pos + 1) : $from;
   var $cut = (0, _commands.findCutBefore)($cutPos);

package/dist/es2019/pm-plugins/commands/index.js

@@ -6,7 +6,7 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { filterCommand as filter, hasVisibleContent, isEmptySelectionAtStart } from '@atlaskit/editor-common/utils';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
-import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findPositionOfNodeBefore, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { convertListType } from '../actions/conversions';
@@ -30,7 +30,11 @@ export const enterKeyCommand = editorAnalyticsAPI => () => (state, dispatch) =>
       listItem,
       codeBlock
     } = state.schema.nodes;
-    const wrapper = $from.node($from.depth - 1);
+
+    // the list item is the parent of the gap cursor
+    // while for text, list item is the grant parent of the text node
+    const isGapCursorSelection = selection instanceof GapCursorSelection;
+    const wrapper = isGapCursorSelection && fg('platform_editor_split_list_item_for_gap_cursor') ? $from.parent : $from.node($from.depth - 1);
     if (wrapper && wrapper.type === listItem) {
       /** Check if the wrapper has any visible content */
       const wrapperHasContent = hasVisibleContent(wrapper);
@@ -186,7 +190,11 @@ function splitListItem(itemType) {
     if (node && node.isBlock || $from.depth < 2 || !$from.sameParent($to)) {
       return false;
     }
-    const grandParent = $from.node(-1);
+
+    // list item is the parent of the gap cursor instead of grant parent;
+    // rename grantParent to WrapperlistItem once we clean up platform_editor_split_list_item_for_gap_cursor
+    const isGapCursorSelection = ref instanceof GapCursorSelection;
+    const grandParent = isGapCursorSelection && fg('platform_editor_split_list_item_for_gap_cursor') ? $from.parent : $from.node(-1);
     if (grandParent.type !== itemType) {
       return false;
     }
@@ -225,10 +233,34 @@ function splitListItem(itemType) {
     const types = nextType && [null, {
       type: nextType
     }];
-    if (dispatch) {
-      dispatch(tr.split($from.pos, 2, types !== null && types !== void 0 ? types : undefined).scrollIntoView());
+    if (fg('platform_editor_split_list_item_for_gap_cursor')) {
+      if (dispatch) {
+        var _$from$nodeBefore;
+        if (ref instanceof TextSelection) {
+          dispatch(tr.split($from.pos, 2, types !== null && types !== void 0 ? types : undefined).scrollIntoView());
+          return true;
+        }
+
+        // create new list item with empty paragraph when user click enter on gap cursor
+        if (isGapCursorSelection && (_$from$nodeBefore = $from.nodeBefore) !== null && _$from$nodeBefore !== void 0 && _$from$nodeBefore.isBlock) {
+          // For gap cursor selection , we can not split the list item directly
+          // We need to insert a new list item after the current list item to simulate the split behaviour
+          const {
+            listItem,
+            paragraph
+          } = state.schema.nodes;
+          const newListItem = listItem.createChecked({}, paragraph.createChecked());
+          dispatch(tr.insert($from.pos, newListItem).setSelection(Selection.near(tr.doc.resolve($to.pos + 1))).scrollIntoView());
+          return true;
+        }
+      }
+      return false;
+    } else {
+      if (dispatch) {
+        dispatch(tr.split($from.pos, 2, types !== null && types !== void 0 ? types : undefined).scrollIntoView());
+      }
+      return true;
     }
-    return true;
   };
 }
 const deletePreviousEmptyListItem = (state, dispatch) => {

package/dist/esm/pm-plugins/commands/index.js

@@ -9,7 +9,7 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { filterCommand as filter, hasVisibleContent, isEmptySelectionAtStart } from '@atlaskit/editor-common/utils';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
-import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findPositionOfNodeBefore, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { convertListType } from '../actions/conversions';
@@ -30,7 +30,11 @@ export var enterKeyCommand = function enterKeyCommand(editorAnalyticsAPI) {
         var _state$schema$nodes = state.schema.nodes,
           listItem = _state$schema$nodes.listItem,
           codeBlock = _state$schema$nodes.codeBlock;
-        var wrapper = $from.node($from.depth - 1);
+
+        // the list item is the parent of the gap cursor
+        // while for text, list item is the grant parent of the text node
+        var isGapCursorSelection = selection instanceof GapCursorSelection;
+        var wrapper = isGapCursorSelection && fg('platform_editor_split_list_item_for_gap_cursor') ? $from.parent : $from.node($from.depth - 1);
         if (wrapper && wrapper.type === listItem) {
           /** Check if the wrapper has any visible content */
           var wrapperHasContent = hasVisibleContent(wrapper);
@@ -196,7 +200,11 @@ function splitListItem(itemType) {
     if (node && node.isBlock || $from.depth < 2 || !$from.sameParent($to)) {
       return false;
     }
-    var grandParent = $from.node(-1);
+
+    // list item is the parent of the gap cursor instead of grant parent;
+    // rename grantParent to WrapperlistItem once we clean up platform_editor_split_list_item_for_gap_cursor
+    var isGapCursorSelection = ref instanceof GapCursorSelection;
+    var grandParent = isGapCursorSelection && fg('platform_editor_split_list_item_for_gap_cursor') ? $from.parent : $from.node(-1);
     if (grandParent.type !== itemType) {
       return false;
     }
@@ -235,10 +243,33 @@ function splitListItem(itemType) {
     var types = nextType && [null, {
       type: nextType
     }];
-    if (dispatch) {
-      dispatch(tr.split($from.pos, 2, types !== null && types !== void 0 ? types : undefined).scrollIntoView());
+    if (fg('platform_editor_split_list_item_for_gap_cursor')) {
+      if (dispatch) {
+        var _$from$nodeBefore;
+        if (ref instanceof TextSelection) {
+          dispatch(tr.split($from.pos, 2, types !== null && types !== void 0 ? types : undefined).scrollIntoView());
+          return true;
+        }
+
+        // create new list item with empty paragraph when user click enter on gap cursor
+        if (isGapCursorSelection && (_$from$nodeBefore = $from.nodeBefore) !== null && _$from$nodeBefore !== void 0 && _$from$nodeBefore.isBlock) {
+          // For gap cursor selection , we can not split the list item directly
+          // We need to insert a new list item after the current list item to simulate the split behaviour
+          var _state$schema$nodes2 = state.schema.nodes,
+            listItem = _state$schema$nodes2.listItem,
+            paragraph = _state$schema$nodes2.paragraph;
+          var newListItem = listItem.createChecked({}, paragraph.createChecked());
+          dispatch(tr.insert($from.pos, newListItem).setSelection(Selection.near(tr.doc.resolve($to.pos + 1))).scrollIntoView());
+          return true;
+        }
+      }
+      return false;
+    } else {
+      if (dispatch) {
+        dispatch(tr.split($from.pos, 2, types !== null && types !== void 0 ? types : undefined).scrollIntoView());
+      }
+      return true;
     }
-    return true;
   };
 }
 var deletePreviousEmptyListItem = function deletePreviousEmptyListItem(state, dispatch) {
@@ -265,12 +296,12 @@ var deletePreviousEmptyListItem = function deletePreviousEmptyListItem(state, di
 };
 var joinToPreviousListItem = function joinToPreviousListItem(state, dispatch) {
   var $from = state.selection.$from;
-  var _state$schema$nodes2 = state.schema.nodes,
-    paragraph = _state$schema$nodes2.paragraph,
-    listItem = _state$schema$nodes2.listItem,
-    codeBlock = _state$schema$nodes2.codeBlock,
-    bulletList = _state$schema$nodes2.bulletList,
-    orderedList = _state$schema$nodes2.orderedList;
+  var _state$schema$nodes3 = state.schema.nodes,
+    paragraph = _state$schema$nodes3.paragraph,
+    listItem = _state$schema$nodes3.listItem,
+    codeBlock = _state$schema$nodes3.codeBlock,
+    bulletList = _state$schema$nodes3.bulletList,
+    orderedList = _state$schema$nodes3.orderedList;
   var isGapCursorShown = state.selection instanceof GapCursorSelection;
   var $cutPos = isGapCursorShown ? state.doc.resolve($from.pos + 1) : $from;
   var $cut = findCutBefore($cutPos);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-list",
-	"version": "4.1.5",
+	"version": "4.2.0",
 	"description": "List plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,13 +32,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.8.0",
+		"@atlaskit/editor-common": "^102.13.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
-		"@atlaskit/tmp-editor-statsig": "^4.0.0",
+		"@atlaskit/tmp-editor-statsig": "^4.3.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
@@ -89,6 +89,9 @@
 		},
 		"platform_editor_non_macros_list_indent_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_split_list_item_for_gap_cursor": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {