@atlaskit/editor-plugin-block-controls 1.3.5 → 1.3.6

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 (12) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/consts.js +4 -2
  3. package/dist/cjs/ui/drop-target.js +38 -13
  4. package/dist/es2019/ui/consts.js +3 -1
  5. package/dist/es2019/ui/drop-target.js +37 -10
  6. package/dist/esm/ui/consts.js +3 -1
  7. package/dist/esm/ui/drop-target.js +37 -10
  8. package/dist/types/ui/consts.d.ts +2 -0
  9. package/dist/types/ui/drop-target.d.ts +2 -2
  10. package/dist/types-ts4.5/ui/consts.d.ts +2 -0
  11. package/dist/types-ts4.5/ui/drop-target.d.ts +2 -2
  12. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.3.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#100030](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100030)
8
+ [`f246ee5d3b7f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f246ee5d3b7f) -
9
+ [ux] Change drop target design, refactor styles
10
+ - Updated dependencies
11
+
3
12
  ## 1.3.5
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/consts.js CHANGED
@@ -3,7 +3,9 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
6
+ exports.DROP_TARGET_LINE_WIDTH = exports.DROP_TARGET_CIRCLE_DIAMETER = exports.DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_BORDER_RADIUS = void 0;
7
7
  var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
8
8
  var DRAG_HANDLE_WIDTH = exports.DRAG_HANDLE_WIDTH = 12;
9
- var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
9
+ var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
10
+ var DROP_TARGET_LINE_WIDTH = exports.DROP_TARGET_LINE_WIDTH = 2;
11
+ var DROP_TARGET_CIRCLE_DIAMETER = exports.DROP_TARGET_CIRCLE_DIAMETER = 4;
package/dist/cjs/ui/drop-target.js CHANGED
@@ -1,16 +1,48 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.DropTarget = void 0;
9
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
- var _react = _interopRequireWildcard(require("react"));
9
+ var _react = require("react");
10
+ var _react2 = require("@emotion/react");
11
11
  var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
12
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
13
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
+ var _colors = require("@atlaskit/theme/colors");
13
+ var _consts = require("./consts");
14
+ /** @jsx jsx */
15
+
16
+ var styleHighlighted = (0, _react2.css)({
17
+ height: "var(--ds-space-100, 8px)",
18
+ marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", _consts.DROP_TARGET_LINE_WIDTH, "px)"),
19
+ marginLeft: "var(--ds-space-negative-100, -8px)",
20
+ top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 2.5px)"),
21
+ //2.5px to help clear expand node margin
22
+ position: 'relative',
23
+ borderBottom: "solid ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), " ", _consts.DROP_TARGET_LINE_WIDTH, "px"),
24
+ "&:before": {
25
+ content: '""',
26
+ width: "".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, "px"),
27
+ height: "".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, "px"),
28
+ marginTop: "calc(".concat(_consts.DROP_TARGET_CIRCLE_DIAMETER, " + ").concat(_consts.DROP_TARGET_LINE_WIDTH, " * 2)px"),
29
+ borderRadius: '50%',
30
+ border: "solid ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), " ", _consts.DROP_TARGET_LINE_WIDTH, "px"),
31
+ backgroundColor: "var(--ds-background-input, white)",
32
+ display: 'block',
33
+ position: 'absolute',
34
+ bottom: '-5px'
35
+ }
36
+ });
37
+ var styleDisabled = (0, _react2.css)({
38
+ height: "var(--ds-space-100, 8px)",
39
+ marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", _consts.DROP_TARGET_LINE_WIDTH, "px)"),
40
+ position: 'relative',
41
+ borderBottom: "solid transparent ".concat(_consts.DROP_TARGET_LINE_WIDTH, "px"),
42
+ "&:before": {
43
+ border: "solid transparent ".concat(_consts.DROP_TARGET_LINE_WIDTH, "px")
44
+ }
45
+ });
14
46
  var DropTarget = exports.DropTarget = function DropTarget(_ref) {
15
47
  var api = _ref.api,
16
48
  index = _ref.index;
@@ -56,16 +88,9 @@ var DropTarget = exports.DropTarget = function DropTarget(_ref) {
56
88
  });
57
89
  }, [index, api]);
58
90
  return (
59
- /*#__PURE__*/
60
91
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
61
- _react.default.createElement("div", {
62
- style: {
63
- height: '20px',
64
- marginTop: '-22px',
65
- top: '10px',
66
- position: 'relative',
67
- borderBottom: "solid ".concat(isDraggedOver ? 'blue' : 'transparent', " 2px")
68
- },
92
+ (0, _react2.jsx)("div", {
93
+ css: isDraggedOver ? styleHighlighted : styleDisabled,
69
94
  ref: ref
70
95
  })
71
96
  );
package/dist/es2019/ui/consts.js CHANGED
@@ -1,3 +1,5 @@
1
1
  export const DRAG_HANDLE_HEIGHT = 24;
2
2
  export const DRAG_HANDLE_WIDTH = 12;
3
- export const DRAG_HANDLE_BORDER_RADIUS = 4;
3
+ export const DRAG_HANDLE_BORDER_RADIUS = 4;
4
+ export const DROP_TARGET_LINE_WIDTH = 2;
5
+ export const DROP_TARGET_CIRCLE_DIAMETER = 4;
package/dist/es2019/ui/drop-target.js CHANGED
@@ -1,5 +1,39 @@
1
- import React, { useEffect, useRef, useState } from 'react';
1
+ /** @jsx jsx */
2
+ import { useEffect, useRef, useState } from 'react';
3
+ import { css, jsx } from '@emotion/react';
2
4
  import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
5
+ import { B300 } from '@atlaskit/theme/colors';
6
+ import { DROP_TARGET_CIRCLE_DIAMETER, DROP_TARGET_LINE_WIDTH } from './consts';
7
+ const styleHighlighted = css({
8
+ height: "var(--ds-space-100, 8px)",
9
+ marginTop: `calc(${"var(--ds-space-negative-100, -8px)"} - ${DROP_TARGET_LINE_WIDTH}px)`,
10
+ marginLeft: "var(--ds-space-negative-100, -8px)",
11
+ top: `calc(${"var(--ds-space-100, 8px)"} / 2 - 2.5px)`,
12
+ //2.5px to help clear expand node margin
13
+ position: 'relative',
14
+ borderBottom: `solid ${`var(--ds-border-selected, ${B300})`} ${DROP_TARGET_LINE_WIDTH}px`,
15
+ "&:before": {
16
+ content: '""',
17
+ width: `${DROP_TARGET_CIRCLE_DIAMETER}px`,
18
+ height: `${DROP_TARGET_CIRCLE_DIAMETER}px`,
19
+ marginTop: `calc(${DROP_TARGET_CIRCLE_DIAMETER} + ${DROP_TARGET_LINE_WIDTH} * 2)px`,
20
+ borderRadius: '50%',
21
+ border: `solid ${`var(--ds-border-selected, ${B300})`} ${DROP_TARGET_LINE_WIDTH}px`,
22
+ backgroundColor: "var(--ds-background-input, white)",
23
+ display: 'block',
24
+ position: 'absolute',
25
+ bottom: '-5px'
26
+ }
27
+ });
28
+ const styleDisabled = css({
29
+ height: "var(--ds-space-100, 8px)",
30
+ marginTop: `calc(${"var(--ds-space-negative-100, -8px)"} - ${DROP_TARGET_LINE_WIDTH}px)`,
31
+ position: 'relative',
32
+ borderBottom: `solid transparent ${DROP_TARGET_LINE_WIDTH}px`,
33
+ "&:before": {
34
+ border: `solid transparent ${DROP_TARGET_LINE_WIDTH}px`
35
+ }
36
+ });
3
37
  export const DropTarget = ({
4
38
  api,
5
39
  index
@@ -39,16 +73,9 @@ export const DropTarget = ({
39
73
  });
40
74
  }, [index, api]);
41
75
  return (
42
- /*#__PURE__*/
43
76
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
44
- React.createElement("div", {
45
- style: {
46
- height: '20px',
47
- marginTop: '-22px',
48
- top: '10px',
49
- position: 'relative',
50
- borderBottom: `solid ${isDraggedOver ? 'blue' : 'transparent'} 2px`
51
- },
77
+ jsx("div", {
78
+ css: isDraggedOver ? styleHighlighted : styleDisabled,
52
79
  ref: ref
53
80
  })
54
81
  );
package/dist/esm/ui/consts.js CHANGED
@@ -1,3 +1,5 @@
1
1
  export var DRAG_HANDLE_HEIGHT = 24;
2
2
  export var DRAG_HANDLE_WIDTH = 12;
3
- export var DRAG_HANDLE_BORDER_RADIUS = 4;
3
+ export var DRAG_HANDLE_BORDER_RADIUS = 4;
4
+ export var DROP_TARGET_LINE_WIDTH = 2;
5
+ export var DROP_TARGET_CIRCLE_DIAMETER = 4;
package/dist/esm/ui/drop-target.js CHANGED
@@ -1,6 +1,40 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- import React, { useEffect, useRef, useState } from 'react';
2
+ /** @jsx jsx */
3
+ import { useEffect, useRef, useState } from 'react';
4
+ import { css, jsx } from '@emotion/react';
3
5
  import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
6
+ import { B300 } from '@atlaskit/theme/colors';
7
+ import { DROP_TARGET_CIRCLE_DIAMETER, DROP_TARGET_LINE_WIDTH } from './consts';
8
+ var styleHighlighted = css({
9
+ height: "var(--ds-space-100, 8px)",
10
+ marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", DROP_TARGET_LINE_WIDTH, "px)"),
11
+ marginLeft: "var(--ds-space-negative-100, -8px)",
12
+ top: "calc(".concat("var(--ds-space-100, 8px)", " / 2 - 2.5px)"),
13
+ //2.5px to help clear expand node margin
14
+ position: 'relative',
15
+ borderBottom: "solid ".concat("var(--ds-border-selected, ".concat(B300, ")"), " ", DROP_TARGET_LINE_WIDTH, "px"),
16
+ "&:before": {
17
+ content: '""',
18
+ width: "".concat(DROP_TARGET_CIRCLE_DIAMETER, "px"),
19
+ height: "".concat(DROP_TARGET_CIRCLE_DIAMETER, "px"),
20
+ marginTop: "calc(".concat(DROP_TARGET_CIRCLE_DIAMETER, " + ").concat(DROP_TARGET_LINE_WIDTH, " * 2)px"),
21
+ borderRadius: '50%',
22
+ border: "solid ".concat("var(--ds-border-selected, ".concat(B300, ")"), " ", DROP_TARGET_LINE_WIDTH, "px"),
23
+ backgroundColor: "var(--ds-background-input, white)",
24
+ display: 'block',
25
+ position: 'absolute',
26
+ bottom: '-5px'
27
+ }
28
+ });
29
+ var styleDisabled = css({
30
+ height: "var(--ds-space-100, 8px)",
31
+ marginTop: "calc(".concat("var(--ds-space-negative-100, -8px)", " - ", DROP_TARGET_LINE_WIDTH, "px)"),
32
+ position: 'relative',
33
+ borderBottom: "solid transparent ".concat(DROP_TARGET_LINE_WIDTH, "px"),
34
+ "&:before": {
35
+ border: "solid transparent ".concat(DROP_TARGET_LINE_WIDTH, "px")
36
+ }
37
+ });
4
38
  export var DropTarget = function DropTarget(_ref) {
5
39
  var api = _ref.api,
6
40
  index = _ref.index;
@@ -46,16 +80,9 @@ export var DropTarget = function DropTarget(_ref) {
46
80
  });
47
81
  }, [index, api]);
48
82
  return (
49
- /*#__PURE__*/
50
83
  // Note: Firefox has trouble with using a button element as the handle for drag and drop
51
- React.createElement("div", {
52
- style: {
53
- height: '20px',
54
- marginTop: '-22px',
55
- top: '10px',
56
- position: 'relative',
57
- borderBottom: "solid ".concat(isDraggedOver ? 'blue' : 'transparent', " 2px")
58
- },
84
+ jsx("div", {
85
+ css: isDraggedOver ? styleHighlighted : styleDisabled,
59
86
  ref: ref
60
87
  })
61
88
  );
package/dist/types/ui/consts.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  export declare const DRAG_HANDLE_HEIGHT = 24;
2
2
  export declare const DRAG_HANDLE_WIDTH = 12;
3
3
  export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
4
+ export declare const DROP_TARGET_LINE_WIDTH = 2;
5
+ export declare const DROP_TARGET_CIRCLE_DIAMETER = 4;
package/dist/types/ui/drop-target.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- /// <reference types="react" />
1
+ import { jsx } from '@emotion/react';
2
2
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
3
  import type { BlockControlsPlugin } from '../types';
4
4
  export declare const DropTarget: ({ api, index, }: {
5
5
  api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
6
6
  index: number;
7
- }) => JSX.Element;
7
+ }) => jsx.JSX.Element;
package/dist/types-ts4.5/ui/consts.d.ts CHANGED
@@ -1,3 +1,5 @@
1
1
  export declare const DRAG_HANDLE_HEIGHT = 24;
2
2
  export declare const DRAG_HANDLE_WIDTH = 12;
3
3
  export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
4
+ export declare const DROP_TARGET_LINE_WIDTH = 2;
5
+ export declare const DROP_TARGET_CIRCLE_DIAMETER = 4;
package/dist/types-ts4.5/ui/drop-target.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- /// <reference types="react" />
1
+ import { jsx } from '@emotion/react';
2
2
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
3
  import type { BlockControlsPlugin } from '../types';
4
4
  export declare const DropTarget: ({ api, index, }: {
5
5
  api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
6
6
  index: number;
7
- }) => JSX.Element;
7
+ }) => jsx.JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.3.5",
3
+ "version": "1.3.6",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -33,8 +33,9 @@
33
33
  "dependencies": {
34
34
  "@atlaskit/editor-common": "^80.0.0",
35
35
  "@atlaskit/editor-prosemirror": "4.0.1",
36
- "@atlaskit/icon": "^22.1.0",
36
+ "@atlaskit/icon": "^22.2.0",
37
37
  "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
38
+ "@atlaskit/theme": "^12.8.0",
38
39
  "@atlaskit/tokens": "^1.48.0",
39
40
  "@babel/runtime": "^7.0.0",
40
41
  "@emotion/react": "^11.7.1"