@atlaskit/editor-plugin-block-controls 1.13.5 → 1.13.7

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 (6) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/ui/empty-block-experiment/global-styles.js +7 -2
  3. package/dist/cjs/ui/empty-block-experiment/widget.js +1 -1
  4. package/dist/es2019/ui/empty-block-experiment/global-styles.js +17 -2
  5. package/dist/esm/ui/empty-block-experiment/global-styles.js +7 -2
  6. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 1.13.7
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 1.13.6
10
+
11
+ ### Patch Changes
12
+
13
+ - [#139441](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139441)
14
+ [`b215909b0f7ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b215909b0f7ab) -
15
+ [ux] [ED-24882] Add additional CSS overrides to emtpy block experiment to handle drag handle edge
16
+ cases
17
+
3
18
  ## 1.13.5
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/ui/empty-block-experiment/global-styles.js CHANGED
@@ -17,6 +17,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
17
  var emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experiment="true"]';
18
18
  var quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
19
19
  var formattingElement = 'div.fabric-editor-block-mark';
20
+ var markFragment = 'div[data-mark-type="fragment"]';
20
21
  var elementWithEmptyBlockExperiment = "+ p > ".concat(emptyBlockExperimentWidget, ", + h1 > ").concat(emptyBlockExperimentWidget, ", + h2 > ").concat(emptyBlockExperimentWidget, ", + h3 > ").concat(emptyBlockExperimentWidget, ", + h4 > ").concat(emptyBlockExperimentWidget, ", + h5 > ").concat(emptyBlockExperimentWidget, ", + h6 > ").concat(emptyBlockExperimentWidget);
21
22
  // Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
22
23
  var elementWithEmptyBlockExperimentFormatted = "+ ".concat(formattingElement, " > p > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h1 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h2 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h3 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h4 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h5 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h6 > ").concat(emptyBlockExperimentWidget);
@@ -25,7 +26,9 @@ var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
25
26
 
26
27
  // Hides the drag handle when the block contains the empty block experiment
27
28
  // Override is consistent with how the drag handle is hidden when the block contains a placeholder
28
- var dragHandleWithInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(elementWithEmptyBlockExperiment, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(elementWithEmptyBlockExperimentFormatted, ")"), {
29
+ var dragHandleWithInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, "),\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, "),") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
30
+ // is nested in the previous div. These selectors are to handle those cases.
31
+ "".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child"), {
29
32
  display: 'none !important'
30
33
  }));
31
34
 
@@ -36,7 +39,9 @@ var dragHandleWithInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default
36
39
  * Otherwise it might break composition input for Chrome
37
40
  * https://product-fabric.atlassian.net/browse/ED-24136
38
41
  */
39
- var dragHandleWithInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, ") ").concat(dragHandleSelector, ", ").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector), {
42
+ var dragHandleWithInlineNodeStyleWithChromeFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, ") ").concat(dragHandleSelector, ",\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector, ",") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
43
+ // is nested in the previous div. These selectors are to handle those cases.
44
+ "".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector), {
40
45
  transform: 'scale(0)'
41
46
  }));
42
47
  var getDragHandleOverrides = function getDragHandleOverrides() {
package/dist/cjs/ui/empty-block-experiment/widget.js CHANGED
@@ -18,7 +18,7 @@ var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
18
18
  var _primitives = require("@atlaskit/primitives");
19
19
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
20
20
  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); }
21
- 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; }
21
+ 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 && {}.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; }
22
22
  var wrapperStyles = (0, _primitives.xcss)({
23
23
  position: 'absolute',
24
24
  top: "calc('50%' - ".concat("var(--ds-space-150, 12px)", ")"),
package/dist/es2019/ui/empty-block-experiment/global-styles.js CHANGED
@@ -8,6 +8,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
8
8
  const emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experiment="true"]';
9
9
  const quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
10
10
  const formattingElement = 'div.fabric-editor-block-mark';
11
+ const markFragment = 'div[data-mark-type="fragment"]';
11
12
  const elementWithEmptyBlockExperiment = `+ p > ${emptyBlockExperimentWidget}, + h1 > ${emptyBlockExperimentWidget}, + h2 > ${emptyBlockExperimentWidget}, + h3 > ${emptyBlockExperimentWidget}, + h4 > ${emptyBlockExperimentWidget}, + h5 > ${emptyBlockExperimentWidget}, + h6 > ${emptyBlockExperimentWidget}`;
12
13
  // Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
13
14
  const elementWithEmptyBlockExperimentFormatted = `+ ${formattingElement} > p > ${emptyBlockExperimentWidget}, + ${formattingElement} > h1 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h2 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h3 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h4 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h5 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h6 > ${emptyBlockExperimentWidget}`;
@@ -17,7 +18,14 @@ const dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
17
18
  // Hides the drag handle when the block contains the empty block experiment
18
19
  // Override is consistent with how the drag handle is hidden when the block contains a placeholder
19
20
  const dragHandleWithInlineNodeStyle = css({
20
- [`.ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${elementWithEmptyBlockExperiment}), .ProseMirror-widget[data-blocks-drag-handle-container="true"]:has(${elementWithEmptyBlockExperimentFormatted})`]: {
21
+ [`${dragHandleContainer}:has(${elementWithEmptyBlockExperiment}),
22
+ ${dragHandleContainer}:has(${elementWithEmptyBlockExperimentFormatted}),` +
23
+ // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
24
+ // is nested in the previous div. These selectors are to handle those cases.
25
+ `${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child,
26
+ ${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child,
27
+ ${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child,
28
+ ${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child`]: {
21
29
  display: 'none !important'
22
30
  }
23
31
  });
@@ -30,7 +38,14 @@ const dragHandleWithInlineNodeStyle = css({
30
38
  * https://product-fabric.atlassian.net/browse/ED-24136
31
39
  */
32
40
  const dragHandleWithInlineNodeStyleWithChromeFix = css({
33
- [`${dragHandleContainer}:has(${elementWithEmptyBlockExperiment}) ${dragHandleSelector}, ${dragHandleContainer}:has(${elementWithEmptyBlockExperimentFormatted}) ${dragHandleSelector}`]: {
41
+ [`${dragHandleContainer}:has(${elementWithEmptyBlockExperiment}) ${dragHandleSelector},
42
+ ${dragHandleContainer}:has(${elementWithEmptyBlockExperimentFormatted}) ${dragHandleSelector},` +
43
+ // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
44
+ // is nested in the previous div. These selectors are to handle those cases.
45
+ `${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child ${dragHandleSelector},
46
+ ${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child ${dragHandleSelector},
47
+ ${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child ${dragHandleSelector},
48
+ ${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child ${dragHandleSelector}`]: {
34
49
  transform: 'scale(0)'
35
50
  }
36
51
  });
package/dist/esm/ui/empty-block-experiment/global-styles.js CHANGED
@@ -9,6 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
9
9
  var emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experiment="true"]';
10
10
  var quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
11
11
  var formattingElement = 'div.fabric-editor-block-mark';
12
+ var markFragment = 'div[data-mark-type="fragment"]';
12
13
  var elementWithEmptyBlockExperiment = "+ p > ".concat(emptyBlockExperimentWidget, ", + h1 > ").concat(emptyBlockExperimentWidget, ", + h2 > ").concat(emptyBlockExperimentWidget, ", + h3 > ").concat(emptyBlockExperimentWidget, ", + h4 > ").concat(emptyBlockExperimentWidget, ", + h5 > ").concat(emptyBlockExperimentWidget, ", + h6 > ").concat(emptyBlockExperimentWidget);
13
14
  // Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
14
15
  var elementWithEmptyBlockExperimentFormatted = "+ ".concat(formattingElement, " > p > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h1 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h2 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h3 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h4 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h5 > ").concat(emptyBlockExperimentWidget, ", + ").concat(formattingElement, " > h6 > ").concat(emptyBlockExperimentWidget);
@@ -17,7 +18,9 @@ var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
17
18
 
18
19
  // Hides the drag handle when the block contains the empty block experiment
19
20
  // Override is consistent with how the drag handle is hidden when the block contains a placeholder
20
- var dragHandleWithInlineNodeStyle = css(_defineProperty({}, ".ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(".concat(elementWithEmptyBlockExperiment, "), .ProseMirror-widget[data-blocks-drag-handle-container=\"true\"]:has(").concat(elementWithEmptyBlockExperimentFormatted, ")"), {
21
+ var dragHandleWithInlineNodeStyle = css(_defineProperty({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, "),\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, "),") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
22
+ // is nested in the previous div. These selectors are to handle those cases.
23
+ "".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child"), {
21
24
  display: 'none !important'
22
25
  }));
23
26
 
@@ -28,7 +31,9 @@ var dragHandleWithInlineNodeStyle = css(_defineProperty({}, ".ProseMirror-widget
28
31
  * Otherwise it might break composition input for Chrome
29
32
  * https://product-fabric.atlassian.net/browse/ED-24136
30
33
  */
31
- var dragHandleWithInlineNodeStyleWithChromeFix = css(_defineProperty({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, ") ").concat(dragHandleSelector, ", ").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector), {
34
+ var dragHandleWithInlineNodeStyleWithChromeFix = css(_defineProperty({}, "".concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperiment, ") ").concat(dragHandleSelector, ",\n\t\t").concat(dragHandleContainer, ":has(").concat(elementWithEmptyBlockExperimentFormatted, ") ").concat(dragHandleSelector, ",") + // In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
35
+ // is nested in the previous div. These selectors are to handle those cases.
36
+ "".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector), {
32
37
  transform: 'scale(0)'
33
38
  }));
34
39
  var getDragHandleOverrides = function getDragHandleOverrides() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "1.13.5",
3
+ "version": "1.13.7",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -30,7 +30,7 @@
30
30
  ".": "./src/index.ts"
31
31
  },
32
32
  "dependencies": {
33
- "@atlaskit/editor-common": "^88.13.0",
33
+ "@atlaskit/editor-common": "^89.0.0",
34
34
  "@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
35
35
  "@atlaskit/editor-plugin-analytics": "^1.8.0",
36
36
  "@atlaskit/editor-plugin-editor-disabled": "^1.3.0",