@atlaskit/editor-core 187.4.0 → 187.4.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-core
 
+## 187.4.5
+
+### Patch Changes
+
+- [`eba71a21f88`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eba71a21f88) - [ED-19204] Let ProseMirror handle selections targeting empty paragraphs on root
+
+## 187.4.2
+
+### Patch Changes
+
+- [`e64541c6fda`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e64541c6fda) - [ux] [ED-18759] Updated table border, handlebar controls, blanket, icon, icon background and table cell options button colour tokens on light and dark theme for table selection and table deletion. Borders for Table Floating Contextual Button & Floating toolbar color palette button on dark & light theme are also updated.
+
 ## 187.4.0
 
 ### Minor Changes

package/dist/cjs/plugins/selection/pm-plugins/events/create-selection-between.js

@@ -14,6 +14,17 @@ function findEmptySelectableParentNodePosition($pos, isValidPosition) {
     if (isValidPosition($pos)) {
       return $pos;
     }
+
+    // We can not use `$pos.before()` because ProseMirror throws an error when depth is zero.
+    var currentPosIndex = $pos.index();
+    if (currentPosIndex === 0) {
+      return null;
+    }
+    var previousIndex = currentPosIndex - 1;
+    var $previousPos = $pos.doc.resolve($pos.posAtIndex(previousIndex));
+    if (isValidPosition($previousPos)) {
+      return $previousPos;
+    }
     return null;
   }
   if (isValidPosition($pos)) {
@@ -49,9 +60,18 @@ function findNextSelectionPosition(_ref) {
   return null;
 }
 var onCreateSelectionBetween = function onCreateSelectionBetween(view, $anchor, $head) {
+  var _$head$parent;
   if ($anchor.pos === $head.pos) {
     return null;
   }
+  if ($anchor.depth === $head.depth && $anchor.sameParent($head)) {
+    return null;
+  }
+
+  // If the head is targeting a paragraph on root, then let ProseMirror handle the text selection
+  if ($head.depth === 1 && ((_$head$parent = $head.parent) === null || _$head$parent === void 0 ? void 0 : _$head$parent.type.name) === 'paragraph') {
+    return null;
+  }
   var $nextHeadPosition = findNextSelectionPosition({
     $targetHead: $head,
     $anchor: $anchor,

package/dist/cjs/ui/ColorPickerButton/index.js

@@ -41,7 +41,6 @@ var colorPickerWrapper = function colorPickerWrapper(theme) {
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 var ColorPickerButton = function ColorPickerButton(props) {
-  var _props$size, _props$size2, _props$size3;
   var buttonRef = _react.default.useRef(null);
   var _React$useState = _react.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -168,8 +167,14 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
   var title = props.title || '';
   var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  var buttonStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 0 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px 2px;\n    }\n  "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
-  !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", _common.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px');
+  var buttonStyle = function buttonStyle(theme) {
+    var _props$size, _props$size2, _props$size3;
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    padding: 0 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px 2px;\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), "var(--ds-background-neutral-subtle, transparent)", /* If custom props size height, override the button base height property */
+    !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", _common.DEFAULT_BORDER_COLOR, (0, _constants.borderRadius)(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px', (0, _components.themed)({
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N30A, ")")
+    })(theme));
+  };
   return (0, _react2.jsx)("div", {
     css: colorPickerButtonWrapper
   }, (0, _react2.jsx)(_tooltip.default, {

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.4.0";
+var version = "187.4.5";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.4.0",
+	"version": "187.4.5",
 	"sideEffects": false
 }

package/dist/es2019/plugins/selection/pm-plugins/events/create-selection-between.js

@@ -10,6 +10,17 @@ function findEmptySelectableParentNodePosition($pos, isValidPosition) {
     if (isValidPosition($pos)) {
       return $pos;
     }
+
+    // We can not use `$pos.before()` because ProseMirror throws an error when depth is zero.
+    const currentPosIndex = $pos.index();
+    if (currentPosIndex === 0) {
+      return null;
+    }
+    const previousIndex = currentPosIndex - 1;
+    const $previousPos = $pos.doc.resolve($pos.posAtIndex(previousIndex));
+    if (isValidPosition($previousPos)) {
+      return $previousPos;
+    }
     return null;
   }
   if (isValidPosition($pos)) {
@@ -46,9 +57,18 @@ function findNextSelectionPosition({
   return null;
 }
 export const onCreateSelectionBetween = (view, $anchor, $head) => {
+  var _$head$parent;
   if ($anchor.pos === $head.pos) {
     return null;
   }
+  if ($anchor.depth === $head.depth && $anchor.sameParent($head)) {
+    return null;
+  }
+
+  // If the head is targeting a paragraph on root, then let ProseMirror handle the text selection
+  if ($head.depth === 1 && ((_$head$parent = $head.parent) === null || _$head$parent === void 0 ? void 0 : _$head$parent.type.name) === 'paragraph') {
+    return null;
+  }
   const $nextHeadPosition = findNextSelectionPosition({
     $targetHead: $head,
     $anchor,

package/dist/es2019/ui/ColorPickerButton/index.js

@@ -6,7 +6,7 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/ed
 import { getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
 import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
-import { DN50, N0, N60A } from '@atlaskit/theme/colors';
+import { DN50, N0, N60A, N30A } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import ColorPalette from '../ColorPalette';
@@ -39,7 +39,6 @@ const colorPickerWrapper = theme => css`
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 const ColorPickerButton = props => {
-  var _props$size, _props$size2, _props$size3;
   const buttonRef = React.useRef(null);
   const [isPopupOpen, setIsPopupOpen] = React.useState(false);
   const [isPopupPositioned, setIsPopupPositioned] = React.useState(false);
@@ -156,11 +155,13 @@ const ColorPickerButton = props => {
   };
   const title = props.title || '';
   const currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  const buttonStyle = css`
+  const buttonStyle = theme => {
+    var _props$size, _props$size2, _props$size3;
+    return css`
     padding: 0 10px;
-    background-color: ${"var(--ds-background-neutral, transparent)"};
+    background-color: ${"var(--ds-background-neutral-subtle, transparent)"};
     ${
-  /* If custom props size height, override the button base height property */!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && `height: inherit;`}
+    /* If custom props size height, override the button base height property */!!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && `height: inherit;`}
     &:before {
       display: flex;
       justify-content: center;
@@ -175,7 +176,14 @@ const ColorPickerButton = props => {
       padding: 0;
       margin: 0px 2px;
     }
+    &:hover {
+      background: ${themed({
+      light: `var(--ds-background-neutral-subtle-hovered, ${N30A})`,
+      dark: `var(--ds-background-neutral-subtle-hovered, ${N30A})`
+    })(theme)};
+    }
   `;
+  };
   return jsx("div", {
     css: colorPickerButtonWrapper
   }, jsx(Tooltip, {

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.4.0";
+export const version = "187.4.5";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.4.0",
+	"version": "187.4.5",
 	"sideEffects": false
 }

package/dist/esm/plugins/selection/pm-plugins/events/create-selection-between.js

@@ -8,6 +8,17 @@ function findEmptySelectableParentNodePosition($pos, isValidPosition) {
     if (isValidPosition($pos)) {
       return $pos;
     }
+
+    // We can not use `$pos.before()` because ProseMirror throws an error when depth is zero.
+    var currentPosIndex = $pos.index();
+    if (currentPosIndex === 0) {
+      return null;
+    }
+    var previousIndex = currentPosIndex - 1;
+    var $previousPos = $pos.doc.resolve($pos.posAtIndex(previousIndex));
+    if (isValidPosition($previousPos)) {
+      return $previousPos;
+    }
     return null;
   }
   if (isValidPosition($pos)) {
@@ -43,9 +54,18 @@ function findNextSelectionPosition(_ref) {
   return null;
 }
 export var onCreateSelectionBetween = function onCreateSelectionBetween(view, $anchor, $head) {
+  var _$head$parent;
   if ($anchor.pos === $head.pos) {
     return null;
   }
+  if ($anchor.depth === $head.depth && $anchor.sameParent($head)) {
+    return null;
+  }
+
+  // If the head is targeting a paragraph on root, then let ProseMirror handle the text selection
+  if ($head.depth === 1 && ((_$head$parent = $head.parent) === null || _$head$parent === void 0 ? void 0 : _$head$parent.type.name) === 'paragraph') {
+    return null;
+  }
   var $nextHeadPosition = findNextSelectionPosition({
     $targetHead: $head,
     $anchor: $anchor,

package/dist/esm/ui/ColorPickerButton/index.js

@@ -9,7 +9,7 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/ed
 import { getSelectedRowAndColumnFromPalette } from '@atlaskit/editor-common/ui-color';
 import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
-import { DN50, N0, N60A } from '@atlaskit/theme/colors';
+import { DN50, N0, N60A, N30A } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import ColorPalette from '../ColorPalette';
@@ -35,7 +35,6 @@ var colorPickerWrapper = function colorPickerWrapper(theme) {
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 var ColorPickerButton = function ColorPickerButton(props) {
-  var _props$size, _props$size2, _props$size3;
   var buttonRef = React.useRef(null);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -162,8 +161,14 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
   var title = props.title || '';
   var currentColor = props.currentColor && props.hexToPaletteColor ? props.hexToPaletteColor(props.currentColor) : props.currentColor;
-  var buttonStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 0 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px 2px;\n    }\n  "])), "var(--ds-background-neutral, transparent)", /* If custom props size height, override the button base height property */
-  !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", DEFAULT_BORDER_COLOR, borderRadius(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px');
+  var buttonStyle = function buttonStyle(theme) {
+    var _props$size, _props$size2, _props$size3;
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 0 10px;\n    background-color: ", ";\n    ", "\n    &:before {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      align-self: center;\n      content: '';\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      padding: 0;\n      margin: 0px 2px;\n    }\n    &:hover {\n      background: ", ";\n    }\n  "])), "var(--ds-background-neutral-subtle, transparent)", /* If custom props size height, override the button base height property */
+    !!((_props$size = props.size) !== null && _props$size !== void 0 && _props$size.height) && "height: inherit;", DEFAULT_BORDER_COLOR, borderRadius(), currentColor || 'transparent', ((_props$size2 = props.size) === null || _props$size2 === void 0 ? void 0 : _props$size2.width) || '14px', ((_props$size3 = props.size) === null || _props$size3 === void 0 ? void 0 : _props$size3.height) || '14px', themed({
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
+    })(theme));
+  };
   return jsx("div", {
     css: colorPickerButtonWrapper
   }, jsx(Tooltip, {

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.4.0";
+export var version = "187.4.5";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.4.0",
+	"version": "187.4.5",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.4.0",
+  "version": "187.4.5",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/date": "^0.10.0",
     "@atlaskit/datetime-picker": "^12.7.0",
-    "@atlaskit/editor-common": "^74.25.0",
+    "@atlaskit/editor-common": "^74.26.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-markdown-transformer": "^5.2.5",
     "@atlaskit/editor-palette": "1.5.1",
@@ -147,7 +147,7 @@
     "@af/integration-testing": "*",
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/collab-provider": "9.7.3",
-    "@atlaskit/dropdown-menu": "^11.10.0",
+    "@atlaskit/dropdown-menu": "^11.11.0",
     "@atlaskit/editor-extension-dropbox": "^0.4.0",
     "@atlaskit/editor-plugin-table": "^2.5.0",
     "@atlaskit/editor-test-helpers": "^18.10.0",