@atlaskit/editor-plugin-block-controls 2.0.0 → 2.0.1
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
|
+
## 2.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#141656](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141656)
|
|
8
|
+
[`3d7bc0bff5bea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3d7bc0bff5bea) -
|
|
9
|
+
[ux] ED-24969 Add CSS override to prevent drag handle overlap with empty line prompt button when
|
|
10
|
+
under an expanded code block
|
|
11
|
+
|
|
3
12
|
## 2.0.0
|
|
4
13
|
|
|
5
14
|
### Major Changes
|
|
@@ -18,6 +18,8 @@ var emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experimen
|
|
|
18
18
|
var quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
|
|
19
19
|
var formattingElement = 'div.fabric-editor-block-mark';
|
|
20
20
|
var markFragment = 'div[data-mark-type="fragment"]';
|
|
21
|
+
var breakoutMark = 'div.fabric-editor-breakout-mark';
|
|
22
|
+
var breakoutMarkDom = 'div.fabric-editor-breakout-mark-dom';
|
|
21
23
|
var elementWithEmptyBlockExperiment = "+ p > ".concat(emptyBlockExperimentWidget, ", + h1 > ").concat(emptyBlockExperimentWidget, ", + h2 > ").concat(emptyBlockExperimentWidget, ", + h3 > ").concat(emptyBlockExperimentWidget, ", + h4 > ").concat(emptyBlockExperimentWidget, ", + h5 > ").concat(emptyBlockExperimentWidget, ", + h6 > ").concat(emptyBlockExperimentWidget);
|
|
22
24
|
// Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
|
|
23
25
|
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);
|
|
@@ -28,7 +30,11 @@ var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
|
|
|
28
30
|
// Override is consistent with how the drag handle is hidden when the block contains a placeholder
|
|
29
31
|
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
32
|
// is nested in the previous div. These selectors are to handle those cases.
|
|
31
|
-
|
|
33
|
+
// -------------------
|
|
34
|
+
// Empty block in new paragraph after indent
|
|
35
|
+
"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,") + // Empty block in new paragraph after table
|
|
36
|
+
"".concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,") + // Empty block in new paragraph after breakout mark
|
|
37
|
+
"".concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child,\n\t").concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child"), {
|
|
32
38
|
display: 'none !important'
|
|
33
39
|
}));
|
|
34
40
|
|
|
@@ -41,7 +47,11 @@ var dragHandleWithInlineNodeStyle = (0, _react.css)((0, _defineProperty2.default
|
|
|
41
47
|
*/
|
|
42
48
|
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
49
|
// is nested in the previous div. These selectors are to handle those cases.
|
|
44
|
-
|
|
50
|
+
// -------------------
|
|
51
|
+
// Empty block in new paragraph after indent
|
|
52
|
+
"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",") + // Empty block in new paragraph after table
|
|
53
|
+
"".concat(markFragment, ":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(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",") + // Empty block in new paragraph after breakout mark
|
|
54
|
+
"".concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector), {
|
|
45
55
|
transform: 'scale(0)'
|
|
46
56
|
}));
|
|
47
57
|
var getDragHandleOverrides = function getDragHandleOverrides() {
|
|
@@ -9,6 +9,8 @@ const emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experim
|
|
|
9
9
|
const quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
|
|
10
10
|
const formattingElement = 'div.fabric-editor-block-mark';
|
|
11
11
|
const markFragment = 'div[data-mark-type="fragment"]';
|
|
12
|
+
const breakoutMark = 'div.fabric-editor-breakout-mark';
|
|
13
|
+
const breakoutMarkDom = 'div.fabric-editor-breakout-mark-dom';
|
|
12
14
|
const elementWithEmptyBlockExperiment = `+ p > ${emptyBlockExperimentWidget}, + h1 > ${emptyBlockExperimentWidget}, + h2 > ${emptyBlockExperimentWidget}, + h3 > ${emptyBlockExperimentWidget}, + h4 > ${emptyBlockExperimentWidget}, + h5 > ${emptyBlockExperimentWidget}, + h6 > ${emptyBlockExperimentWidget}`;
|
|
13
15
|
// Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
|
|
14
16
|
const elementWithEmptyBlockExperimentFormatted = `+ ${formattingElement} > p > ${emptyBlockExperimentWidget}, + ${formattingElement} > h1 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h2 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h3 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h4 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h5 > ${emptyBlockExperimentWidget}, + ${formattingElement} > h6 > ${emptyBlockExperimentWidget}`;
|
|
@@ -22,10 +24,16 @@ const dragHandleWithInlineNodeStyle = css({
|
|
|
22
24
|
${dragHandleContainer}:has(${elementWithEmptyBlockExperimentFormatted}),` +
|
|
23
25
|
// In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
|
|
24
26
|
// is nested in the previous div. These selectors are to handle those cases.
|
|
27
|
+
// -------------------
|
|
28
|
+
// Empty block in new paragraph after indent
|
|
25
29
|
`${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
30
|
+
${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child,` +
|
|
31
|
+
// Empty block in new paragraph after table
|
|
32
|
+
`${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child,
|
|
33
|
+
${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child,` +
|
|
34
|
+
// Empty block in new paragraph after breakout mark
|
|
35
|
+
`${breakoutMark}:has(> ${breakoutMarkDom} > ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${breakoutMarkDom} > ${dragHandleContainer}:last-child,
|
|
36
|
+
${breakoutMark}:has(> ${breakoutMarkDom} > ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${breakoutMarkDom} > ${dragHandleContainer}:last-child`]: {
|
|
29
37
|
display: 'none !important'
|
|
30
38
|
}
|
|
31
39
|
});
|
|
@@ -42,10 +50,16 @@ const dragHandleWithInlineNodeStyleWithChromeFix = css({
|
|
|
42
50
|
${dragHandleContainer}:has(${elementWithEmptyBlockExperimentFormatted}) ${dragHandleSelector},` +
|
|
43
51
|
// In certain circumstances - eg. a paragraph after an indent, or after a table fragment, the dragHandleContainer
|
|
44
52
|
// is nested in the previous div. These selectors are to handle those cases.
|
|
53
|
+
// -------------------
|
|
54
|
+
// Empty block in new paragraph after indent
|
|
45
55
|
`${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child ${dragHandleSelector},
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
56
|
+
${formattingElement}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child ${dragHandleSelector},` +
|
|
57
|
+
// Empty block in new paragraph after table
|
|
58
|
+
`${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${dragHandleContainer}:last-child ${dragHandleSelector},
|
|
59
|
+
${markFragment}:has(> ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${dragHandleContainer}:last-child ${dragHandleSelector},` +
|
|
60
|
+
// Empty block in new paragraph after breakout mark
|
|
61
|
+
`${breakoutMark}:has(> ${breakoutMarkDom} > ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperiment}) > ${breakoutMarkDom} > ${dragHandleContainer}:last-child ${dragHandleSelector},
|
|
62
|
+
${breakoutMark}:has(> ${breakoutMarkDom} > ${dragHandleContainer}:last-child):has(${elementWithEmptyBlockExperimentFormatted}) > ${breakoutMarkDom} > ${dragHandleContainer}:last-child ${dragHandleSelector}`]: {
|
|
49
63
|
transform: 'scale(0)'
|
|
50
64
|
}
|
|
51
65
|
});
|
|
@@ -10,6 +10,8 @@ var emptyBlockExperimentWidget = '.ProseMirror-widget[data-empty-block-experimen
|
|
|
10
10
|
var quickInsertWidget = '.ProseMirror-widget[data-type-ahead="typeaheadDecoration"]';
|
|
11
11
|
var formattingElement = 'div.fabric-editor-block-mark';
|
|
12
12
|
var markFragment = 'div[data-mark-type="fragment"]';
|
|
13
|
+
var breakoutMark = 'div.fabric-editor-breakout-mark';
|
|
14
|
+
var breakoutMarkDom = 'div.fabric-editor-breakout-mark-dom';
|
|
13
15
|
var elementWithEmptyBlockExperiment = "+ p > ".concat(emptyBlockExperimentWidget, ", + h1 > ").concat(emptyBlockExperimentWidget, ", + h2 > ").concat(emptyBlockExperimentWidget, ", + h3 > ").concat(emptyBlockExperimentWidget, ", + h4 > ").concat(emptyBlockExperimentWidget, ", + h5 > ").concat(emptyBlockExperimentWidget, ", + h6 > ").concat(emptyBlockExperimentWidget);
|
|
14
16
|
// Selectors for when contained withing a formatting container mark (eg. indent, centering, right-align)
|
|
15
17
|
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);
|
|
@@ -20,7 +22,11 @@ var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
|
|
|
20
22
|
// Override is consistent with how the drag handle is hidden when the block contains a placeholder
|
|
21
23
|
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
24
|
// is nested in the previous div. These selectors are to handle those cases.
|
|
23
|
-
|
|
25
|
+
// -------------------
|
|
26
|
+
// Empty block in new paragraph after indent
|
|
27
|
+
"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,") + // Empty block in new paragraph after table
|
|
28
|
+
"".concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child,\n\t\t").concat(markFragment, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child,") + // Empty block in new paragraph after breakout mark
|
|
29
|
+
"".concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child,\n\t").concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child"), {
|
|
24
30
|
display: 'none !important'
|
|
25
31
|
}));
|
|
26
32
|
|
|
@@ -33,7 +39,11 @@ var dragHandleWithInlineNodeStyle = css(_defineProperty({}, "".concat(dragHandle
|
|
|
33
39
|
*/
|
|
34
40
|
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
41
|
// is nested in the previous div. These selectors are to handle those cases.
|
|
36
|
-
|
|
42
|
+
// -------------------
|
|
43
|
+
// Empty block in new paragraph after indent
|
|
44
|
+
"".concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t").concat(formattingElement, ":has(> ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",") + // Empty block in new paragraph after table
|
|
45
|
+
"".concat(markFragment, ":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(elementWithEmptyBlockExperimentFormatted, ") > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",") + // Empty block in new paragraph after breakout mark
|
|
46
|
+
"".concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperiment, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector, ",\n\t\t").concat(breakoutMark, ":has(> ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child):has(").concat(elementWithEmptyBlockExperimentFormatted, ") > ").concat(breakoutMarkDom, " > ").concat(dragHandleContainer, ":last-child ").concat(dragHandleSelector), {
|
|
37
47
|
transform: 'scale(0)'
|
|
38
48
|
}));
|
|
39
49
|
var getDragHandleOverrides = function getDragHandleOverrides() {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
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": "^89.
|
|
33
|
+
"@atlaskit/editor-common": "^89.2.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",
|