@atlaskit/editor-plugin-block-controls 1.13.5 → 1.13.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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 1.13.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#139441](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139441)
|
|
8
|
+
[`b215909b0f7ab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b215909b0f7ab) -
|
|
9
|
+
[ux] [ED-24882] Add additional CSS overrides to emtpy block experiment to handle drag handle edge
|
|
10
|
+
cases
|
|
11
|
+
|
|
3
12
|
## 1.13.5
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -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)({}, ".
|
|
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, "
|
|
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() {
|
|
@@ -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
|
-
[
|
|
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},
|
|
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
|
});
|
|
@@ -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({}, ".
|
|
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, "
|
|
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() {
|