@atlaskit/editor-plugin-table 2.6.13 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 2.7.0
+
+### Minor Changes
+
+- [`960a2b478c8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/960a2b478c8) - [ux] [ED-19167] Add blue shadow to resizer handle on hover
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.6.13
 
 ### Patch Changes

package/dist/cjs/plugins/table/nodeviews/TableResizer.js

@@ -13,6 +13,7 @@ var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _resizer = require("@atlaskit/editor-common/resizer");
+var _styles = require("@atlaskit/editor-common/styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _utils2 = require("../pm-plugins/table-resizing/utils");
@@ -28,7 +29,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var handles = {
   right: true
 };
-var tableHandleMarginTop = 11;
+var tableHandleMarginTop = 12;
 var generateResizedPayload = function generateResizedPayload(props) {
   var _props$originalNode$a;
   var tableMap = _editorTables.TableMap.get(props.resizedNode);
@@ -161,6 +162,22 @@ var TableResizer = function TableResizer(_ref) {
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);
+  var handleComponent = (0, _react.useMemo)(function () {
+    return {
+      left: /*#__PURE__*/_react.default.createElement("div", {
+        className: _styles.resizerHandleShadowClassName,
+        style: {
+          height: 'calc(100% - 24px)'
+        }
+      }),
+      right: /*#__PURE__*/_react.default.createElement("div", {
+        className: _styles.resizerHandleShadowClassName,
+        style: {
+          height: 'calc(100% - 24px)'
+        }
+      })
+    };
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     enable: handles,
     width: width,
@@ -176,7 +193,8 @@ var TableResizer = function TableResizer(_ref) {
     snapGap: _consts.TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    isHandleVisible: ((_findTable = (0, _utils.findTable)((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
+    isHandleVisible: ((_findTable = (0, _utils.findTable)((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos(),
+    handleComponent: handleComponent
   }, children);
 };
 exports.TableResizer = TableResizer;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.13",
+	"version": "2.7.0",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -3,6 +3,7 @@ import rafSchd from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, hasTableBeenResized, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
@@ -14,7 +15,7 @@ import { findClosestSnap } from '../utils/snapping';
 const handles = {
   right: true
 };
-const tableHandleMarginTop = 11;
+const tableHandleMarginTop = 12;
 const generateResizedPayload = props => {
   var _props$originalNode$a;
   const tableMap = TableMap.get(props.resizedNode);
@@ -149,6 +150,20 @@ export const TableResizer = ({
     return newWidth;
   }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
+  const handleComponent = useMemo(() => ({
+    left: /*#__PURE__*/React.createElement("div", {
+      className: resizerHandleShadowClassName,
+      style: {
+        height: 'calc(100% - 24px)'
+      }
+    }),
+    right: /*#__PURE__*/React.createElement("div", {
+      className: resizerHandleShadowClassName,
+      style: {
+        height: 'calc(100% - 24px)'
+      }
+    })
+  }), []);
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
@@ -164,6 +179,7 @@ export const TableResizer = ({
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
+    isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos(),
+    handleComponent: handleComponent
   }, children);
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.13",
+	"version": "2.7.0",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -7,6 +7,7 @@ import rafSchd from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, hasTableBeenResized, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
@@ -18,7 +19,7 @@ import { findClosestSnap } from '../utils/snapping';
 var handles = {
   right: true
 };
-var tableHandleMarginTop = 11;
+var tableHandleMarginTop = 12;
 var generateResizedPayload = function generateResizedPayload(props) {
   var _props$originalNode$a;
   var tableMap = TableMap.get(props.resizedNode);
@@ -151,6 +152,22 @@ export var TableResizer = function TableResizer(_ref) {
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);
+  var handleComponent = useMemo(function () {
+    return {
+      left: /*#__PURE__*/React.createElement("div", {
+        className: resizerHandleShadowClassName,
+        style: {
+          height: 'calc(100% - 24px)'
+        }
+      }),
+      right: /*#__PURE__*/React.createElement("div", {
+        className: resizerHandleShadowClassName,
+        style: {
+          height: 'calc(100% - 24px)'
+        }
+      })
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
@@ -166,6 +183,7 @@ export var TableResizer = function TableResizer(_ref) {
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
+    isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos(),
+    handleComponent: handleComponent
   }, children);
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.13",
+	"version": "2.7.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.6.13",
+  "version": "2.7.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^28.0.0",
-    "@atlaskit/editor-common": "^74.38.0",
+    "@atlaskit/editor-common": "^74.40.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.7",

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -21,6 +21,7 @@ import {
   HandleResize,
   ResizerNext,
 } from '@atlaskit/editor-common/resizer';
+import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -54,7 +55,7 @@ interface TableResizerProps {
 }
 
 const handles = { right: true };
-const tableHandleMarginTop = 11;
+const tableHandleMarginTop = 12;
 
 const generateResizedPayload = (props: {
   originalNode: PMNode;
@@ -258,6 +259,24 @@ export const TableResizer = ({
 
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
 
+  const handleComponent = useMemo(
+    () => ({
+      left: (
+        <div
+          className={resizerHandleShadowClassName}
+          style={{ height: 'calc(100% - 24px)' }}
+        />
+      ),
+      right: (
+        <div
+          className={resizerHandleShadowClassName}
+          style={{ height: 'calc(100% - 24px)' }}
+        />
+      ),
+    }),
+    [],
+  );
+
   return (
     <ResizerNext
       enable={handles}
@@ -275,6 +294,7 @@ export const TableResizer = ({
       snap={guidelineSnaps}
       handlePositioning="adjacent"
       isHandleVisible={findTable(editorView.state?.selection)?.pos === getPos()}
+      handleComponent={handleComponent}
     >
       {children}
     </ResizerNext>