@atlaskit/editor-core 193.11.11 → 193.11.12
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 +7 -0
- package/dist/cjs/composable-editor/editor.js +3 -1
- package/dist/cjs/ui/Addon/click-area-helper.js +10 -6
- package/dist/cjs/ui/ContentStyles/extension.js +3 -6
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/composable-editor/editor.js +2 -1
- package/dist/es2019/ui/Addon/click-area-helper.js +11 -6
- package/dist/es2019/ui/ContentStyles/extension.js +2 -14
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/composable-editor/editor.js +2 -1
- package/dist/esm/ui/Addon/click-area-helper.js +11 -6
- package/dist/esm/ui/ContentStyles/extension.js +3 -6
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/composable-editor/editor.d.ts +1 -0
- package/dist/types/ui/Addon/click-area-helper.d.ts +1 -1
- package/dist/types-ts4.5/composable-editor/editor.d.ts +1 -0
- package/dist/types-ts4.5/ui/Addon/click-area-helper.d.ts +1 -1
- package/docs/0-intro.tsx +1 -1
- package/package.json +6 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 193.11.12
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#94715](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94715) [`6606b85603b4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6606b85603b4) - [ux] Fixes issue where label hides behind smart link
|
|
8
|
+
- [#92552](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92552) [`7cd874b858c8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7cd874b858c8) - Check target elements are actually HTMLElement rather than typecasting.
|
|
9
|
+
|
|
3
10
|
## 193.11.11
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.ComposableEditor = ComposableEditor;
|
|
8
|
+
exports.default = void 0;
|
|
8
9
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
10
|
var _react = require("react");
|
|
10
11
|
var _react2 = require("@emotion/react");
|
|
@@ -147,4 +148,5 @@ ComposableEditor.propTypes = {
|
|
|
147
148
|
}
|
|
148
149
|
return null;
|
|
149
150
|
}
|
|
150
|
-
};
|
|
151
|
+
};
|
|
152
|
+
var _default = exports.default = ComposableEditor;
|
|
@@ -8,6 +8,7 @@ var _collab = require("@atlaskit/editor-common/collab");
|
|
|
8
8
|
var _commands = require("@atlaskit/editor-common/commands");
|
|
9
9
|
var _selection = require("@atlaskit/editor-common/selection");
|
|
10
10
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
11
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
12
|
// we ignore all of the clicks made inside <div class="ak-editor-content-area" /> (but not clicks on the node itself)
|
|
12
13
|
var insideContentArea = function insideContentArea(ref) {
|
|
13
14
|
while (ref) {
|
|
@@ -32,7 +33,7 @@ var insideProseMirrorEditableArea = function insideProseMirrorEditableArea(ref)
|
|
|
32
33
|
* 2. if another modal is open (e.g. delete confirmation modal for confluence table) then ignore clicks as they shouldn't influence editor state
|
|
33
34
|
*/
|
|
34
35
|
var checkForModal = exports.checkForModal = function checkForModal(target) {
|
|
35
|
-
var modalDialog = target.closest('[role=dialog]');
|
|
36
|
+
var modalDialog = target === null || target === void 0 ? void 0 : target.closest('[role=dialog]');
|
|
36
37
|
if (modalDialog) {
|
|
37
38
|
// return false if not an editor inside modal, otherwise return true
|
|
38
39
|
return !!(modalDialog !== null && modalDialog !== void 0 && modalDialog.querySelector('.akEditor'));
|
|
@@ -44,9 +45,12 @@ var checkForModal = exports.checkForModal = function checkForModal(target) {
|
|
|
44
45
|
var clickAreaClickHandler = exports.clickAreaClickHandler = function clickAreaClickHandler(view, event) {
|
|
45
46
|
var _view$hasFocus, _event$currentTarget;
|
|
46
47
|
var isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus = view.hasFocus) !== null && _view$hasFocus !== void 0 && _view$hasFocus.call(view));
|
|
48
|
+
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.explicit-html-element-check') && !(event.target instanceof HTMLElement)) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
47
51
|
var target = event.target;
|
|
48
|
-
var isTargetContentArea = target.classList.contains('ak-editor-content-area');
|
|
49
|
-
var isTargetChildOfContentArea = insideContentArea(target.parentNode);
|
|
52
|
+
var isTargetContentArea = target === null || target === void 0 ? void 0 : target.classList.contains('ak-editor-content-area');
|
|
53
|
+
var isTargetChildOfContentArea = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.explicit-html-element-check') ? insideContentArea((target === null || target === void 0 ? void 0 : target.parentNode) instanceof HTMLElement ? target === null || target === void 0 ? void 0 : target.parentNode : null) : insideContentArea(target === null || target === void 0 ? void 0 : target.parentNode);
|
|
50
54
|
var isTargetInsideEditableArea = insideProseMirrorEditableArea(target);
|
|
51
55
|
|
|
52
56
|
// Any click inside ProseMirror should be managed by ProseMirror
|
|
@@ -59,11 +63,11 @@ var clickAreaClickHandler = exports.clickAreaClickHandler = function clickAreaCl
|
|
|
59
63
|
// click event gets triggered twice on a checkbox (on <label> first and then on <input>)
|
|
60
64
|
// by the time it gets triggered on input, PM already re-renders nodeView and detaches it from DOM
|
|
61
65
|
// which doesn't pass the check !contentArea.contains(event.target)
|
|
62
|
-
var isInputClicked = target.nodeName === 'INPUT';
|
|
66
|
+
var isInputClicked = (target === null || target === void 0 ? void 0 : target.nodeName) === 'INPUT';
|
|
63
67
|
// @see ED-5126
|
|
64
68
|
var isPopupClicked = !!(0, _utils.closestElement)(target, '[data-editor-popup]');
|
|
65
69
|
// Fixes issue when using a textarea for editor title in full page editor doesn't let user focus it.
|
|
66
|
-
var isTextAreaClicked = target.nodeName === 'TEXTAREA';
|
|
70
|
+
var isTextAreaClicked = (target === null || target === void 0 ? void 0 : target.nodeName) === 'TEXTAREA';
|
|
67
71
|
var isBreadcrumbClicked = !!(0, _utils.closestElement)(target, 'nav[aria-label="Breadcrumbs"]');
|
|
68
72
|
var selection = window.getSelection();
|
|
69
73
|
var isEditorPopupTextSelected = (selection === null || selection === void 0 ? void 0 : selection.type) === 'Range' && (0, _utils.closestElement)(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
|
|
@@ -71,7 +75,7 @@ var clickAreaClickHandler = exports.clickAreaClickHandler = function clickAreaCl
|
|
|
71
75
|
// This is a super workaround to find when events are coming from Confluence InlineComment modal
|
|
72
76
|
// We don't own those components, so we can't change them
|
|
73
77
|
var isEventComingFromInlineCommentPopup = Boolean((0, _utils.closestElement)(event.currentTarget, 'div[offset]')) || Boolean((0, _utils.closestElement)(target, 'div[offset]'));
|
|
74
|
-
var isButtonClicked = Boolean((0, _utils.closestElement)(event.currentTarget, 'button')) || Boolean((0, _utils.closestElement)(target, 'button')) || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.nodeName) === 'BUTTON' || target.nodeName === 'BUTTON';
|
|
78
|
+
var isButtonClicked = Boolean((0, _utils.closestElement)(event.currentTarget, 'button')) || Boolean((0, _utils.closestElement)(target, 'button')) || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.nodeName) === 'BUTTON' || (target === null || target === void 0 ? void 0 : target.nodeName) === 'BUTTON';
|
|
75
79
|
var isTargetInsideContentArea = Boolean(isTargetChildOfContentArea);
|
|
76
80
|
var isBetweenContentAreaAndEditableContent = isTargetInsideContentArea && !isTargetInsideEditableArea;
|
|
77
81
|
|
|
@@ -9,16 +9,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
11
11
|
var _colors = require("@atlaskit/theme/colors");
|
|
12
|
-
var _templateObject, _templateObject2
|
|
12
|
+
var _templateObject, _templateObject2;
|
|
13
13
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
14
|
-
var
|
|
15
|
-
|
|
16
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
17
|
-
var extensionLabelStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n &.danger > span > div > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n }\n\n &:not(.danger).", "\n > span\n > div\n > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n }\n\n ", "\n"])), "var(--ds-background-accent-red-subtler, ".concat(_colors.R50, ")"), "var(--ds-text-danger, ".concat(_colors.R400, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-background-selected, ".concat(_colors.B50, ")"), "var(--ds-text-selected, ".concat(_colors.B400, ")"), bodiedExtensionLabelStyles);
|
|
14
|
+
var extensionLabelStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n &.danger > span > div > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n border: none;\n }\n\n &:not(.danger).", "\n > span\n > div\n > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n border: none;\n }\n"])), "var(--ds-background-accent-red-subtler, ".concat(_colors.R50, ")"), "var(--ds-text-danger, ".concat(_colors.R400, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-background-selected, ".concat(_colors.B50, ")"), "var(--ds-text-selected, ".concat(_colors.B400, ")"));
|
|
18
15
|
var dangerOverlayStyles = (0, _react.css)({
|
|
19
16
|
opacity: 0.3,
|
|
20
17
|
backgroundColor: "var(--ds-background-danger-hovered, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")")
|
|
21
18
|
});
|
|
22
19
|
|
|
23
20
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css -- Needs manual remediation
|
|
24
|
-
var extensionStyles = exports.extensionStyles = (0, _react.css)(
|
|
21
|
+
var extensionStyles = exports.extensionStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n .multiBodiedExtensionView-content-wrap {\n &.danger > span > .multiBodiedExtension--container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n ", "\n\n &.danger > span > .with-danger-overlay {\n background-color: transparent;\n .multiBodiedExtension--overlay {\n ", "\n }\n }\n\n &:not(.danger).", " {\n & > span > .multiBodiedExtension--container {\n ", "\n }\n }\n .multiBodiedExtension--container {\n width: 100%;\n max-width: 100%; // ensure width can't go over 100%;\n }\n }\n\n .inlineExtensionView-content-wrap {\n &.danger > span > .extension-container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n &.danger > span > .with-danger-overlay {\n // If the macro turned used to turn red before, not setting the background to be transparent will cause the\n // danger state to have two layers of red which we don't want.\n background-color: transparent;\n .extension-overlay {\n ", "\n }\n }\n\n &:not(.danger).", " {\n & > span > .extension-container {\n ", "\n }\n }\n\n ", "\n }\n\n .extensionView-content-wrap,\n .multiBodiedExtensionView-content-wrap,\n .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n\n &:first-of-type {\n margin-top: 0;\n }\n\n &:last-of-type {\n margin-bottom: 0;\n }\n\n &:not(.danger).", " {\n & > span > .extension-container {\n ", "\n }\n }\n\n &.danger > span > .extension-container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n ", "\n\n &.danger > span > .with-danger-overlay {\n background-color: transparent;\n .extension-overlay {\n ", "\n }\n }\n\n &.inline {\n word-wrap: break-all;\n }\n }\n\n .extensionView-content-wrap .extension-container {\n overflow: hidden;\n }\n\n .bodiedExtensionView-content-wrap\n .extensionView-content-wrap\n .extension-container {\n width: 100%;\n max-width: 100%; // ensure width can't go over 100%;\n }\n\n [data-mark-type='fragment'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n }\n }\n\n &:first-child {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-top: 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-top: 0;\n }\n }\n }\n\n &:nth-last-of-type(-n + 2):not(:first-of-type) {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-bottom: 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-bottom: 0;\n }\n }\n }\n }\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), dangerOverlayStyles, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), extensionLabelStyles, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin);
|
|
@@ -2,6 +2,8 @@ import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
|
|
|
2
2
|
import { addParagraphAtEnd } from '@atlaskit/editor-common/commands';
|
|
3
3
|
import { setSelectionTopLevelBlocks } from '@atlaskit/editor-common/selection';
|
|
4
4
|
import { closestElement } from '@atlaskit/editor-common/utils';
|
|
5
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
|
|
5
7
|
// we ignore all of the clicks made inside <div class="ak-editor-content-area" /> (but not clicks on the node itself)
|
|
6
8
|
const insideContentArea = ref => {
|
|
7
9
|
while (ref) {
|
|
@@ -26,7 +28,7 @@ const insideProseMirrorEditableArea = ref => {
|
|
|
26
28
|
* 2. if another modal is open (e.g. delete confirmation modal for confluence table) then ignore clicks as they shouldn't influence editor state
|
|
27
29
|
*/
|
|
28
30
|
export const checkForModal = target => {
|
|
29
|
-
const modalDialog = target.closest('[role=dialog]');
|
|
31
|
+
const modalDialog = target === null || target === void 0 ? void 0 : target.closest('[role=dialog]');
|
|
30
32
|
if (modalDialog) {
|
|
31
33
|
// return false if not an editor inside modal, otherwise return true
|
|
32
34
|
return !!(modalDialog !== null && modalDialog !== void 0 && modalDialog.querySelector('.akEditor'));
|
|
@@ -38,9 +40,12 @@ export const checkForModal = target => {
|
|
|
38
40
|
const clickAreaClickHandler = (view, event) => {
|
|
39
41
|
var _view$hasFocus, _event$currentTarget;
|
|
40
42
|
const isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus = view.hasFocus) !== null && _view$hasFocus !== void 0 && _view$hasFocus.call(view));
|
|
43
|
+
if (getBooleanFF('platform.editor.explicit-html-element-check') && !(event.target instanceof HTMLElement)) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
41
46
|
const target = event.target;
|
|
42
|
-
const isTargetContentArea = target.classList.contains('ak-editor-content-area');
|
|
43
|
-
const isTargetChildOfContentArea = insideContentArea(target.parentNode);
|
|
47
|
+
const isTargetContentArea = target === null || target === void 0 ? void 0 : target.classList.contains('ak-editor-content-area');
|
|
48
|
+
const isTargetChildOfContentArea = getBooleanFF('platform.editor.explicit-html-element-check') ? insideContentArea((target === null || target === void 0 ? void 0 : target.parentNode) instanceof HTMLElement ? target === null || target === void 0 ? void 0 : target.parentNode : null) : insideContentArea(target === null || target === void 0 ? void 0 : target.parentNode);
|
|
44
49
|
const isTargetInsideEditableArea = insideProseMirrorEditableArea(target);
|
|
45
50
|
|
|
46
51
|
// Any click inside ProseMirror should be managed by ProseMirror
|
|
@@ -53,11 +58,11 @@ const clickAreaClickHandler = (view, event) => {
|
|
|
53
58
|
// click event gets triggered twice on a checkbox (on <label> first and then on <input>)
|
|
54
59
|
// by the time it gets triggered on input, PM already re-renders nodeView and detaches it from DOM
|
|
55
60
|
// which doesn't pass the check !contentArea.contains(event.target)
|
|
56
|
-
const isInputClicked = target.nodeName === 'INPUT';
|
|
61
|
+
const isInputClicked = (target === null || target === void 0 ? void 0 : target.nodeName) === 'INPUT';
|
|
57
62
|
// @see ED-5126
|
|
58
63
|
const isPopupClicked = !!closestElement(target, '[data-editor-popup]');
|
|
59
64
|
// Fixes issue when using a textarea for editor title in full page editor doesn't let user focus it.
|
|
60
|
-
const isTextAreaClicked = target.nodeName === 'TEXTAREA';
|
|
65
|
+
const isTextAreaClicked = (target === null || target === void 0 ? void 0 : target.nodeName) === 'TEXTAREA';
|
|
61
66
|
const isBreadcrumbClicked = !!closestElement(target, 'nav[aria-label="Breadcrumbs"]');
|
|
62
67
|
const selection = window.getSelection();
|
|
63
68
|
const isEditorPopupTextSelected = (selection === null || selection === void 0 ? void 0 : selection.type) === 'Range' && closestElement(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
|
|
@@ -65,7 +70,7 @@ const clickAreaClickHandler = (view, event) => {
|
|
|
65
70
|
// This is a super workaround to find when events are coming from Confluence InlineComment modal
|
|
66
71
|
// We don't own those components, so we can't change them
|
|
67
72
|
const isEventComingFromInlineCommentPopup = Boolean(closestElement(event.currentTarget, 'div[offset]')) || Boolean(closestElement(target, 'div[offset]'));
|
|
68
|
-
const isButtonClicked = Boolean(closestElement(event.currentTarget, 'button')) || Boolean(closestElement(target, 'button')) || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.nodeName) === 'BUTTON' || target.nodeName === 'BUTTON';
|
|
73
|
+
const isButtonClicked = Boolean(closestElement(event.currentTarget, 'button')) || Boolean(closestElement(target, 'button')) || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.nodeName) === 'BUTTON' || (target === null || target === void 0 ? void 0 : target.nodeName) === 'BUTTON';
|
|
69
74
|
const isTargetInsideContentArea = Boolean(isTargetChildOfContentArea);
|
|
70
75
|
const isBetweenContentAreaAndEditableContent = isTargetInsideContentArea && !isTargetInsideEditableArea;
|
|
71
76
|
|
|
@@ -1,24 +1,13 @@
|
|
|
1
1
|
import { css } from '@emotion/react';
|
|
2
2
|
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
3
3
|
import { B400, B50, R400, R50 } from '@atlaskit/theme/colors';
|
|
4
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
5
|
-
const bodiedExtensionLabelStyles = css`
|
|
6
|
-
// Bodied extensions have labels that need to be styled differently on danger/select due to initially having a border
|
|
7
|
-
&.danger > span > div > .bodied.extension-label,
|
|
8
|
-
&:not(.danger).${akEditorSelectedNodeClassName}
|
|
9
|
-
> span
|
|
10
|
-
> div
|
|
11
|
-
> .bodied.extension-label {
|
|
12
|
-
border: none;
|
|
13
|
-
}
|
|
14
|
-
`;
|
|
15
|
-
|
|
16
4
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
17
5
|
const extensionLabelStyles = css`
|
|
18
6
|
&.danger > span > div > .extension-label {
|
|
19
7
|
background-color: ${`var(--ds-background-accent-red-subtler, ${R50})`};
|
|
20
8
|
color: ${`var(--ds-text-danger, ${R400})`};
|
|
21
9
|
opacity: 1;
|
|
10
|
+
border: none;
|
|
22
11
|
}
|
|
23
12
|
|
|
24
13
|
&:not(.danger).${akEditorSelectedNodeClassName}
|
|
@@ -28,9 +17,8 @@ const extensionLabelStyles = css`
|
|
|
28
17
|
background-color: ${`var(--ds-background-selected, ${B50})`};
|
|
29
18
|
color: ${`var(--ds-text-selected, ${B400})`};
|
|
30
19
|
opacity: 1;
|
|
20
|
+
border: none;
|
|
31
21
|
}
|
|
32
|
-
|
|
33
|
-
${bodiedExtensionLabelStyles}
|
|
34
22
|
`;
|
|
35
23
|
const dangerOverlayStyles = css({
|
|
36
24
|
opacity: 0.3,
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "193.11.
|
|
2
|
+
export const version = "193.11.12";
|
|
@@ -2,6 +2,8 @@ import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
|
|
|
2
2
|
import { addParagraphAtEnd } from '@atlaskit/editor-common/commands';
|
|
3
3
|
import { setSelectionTopLevelBlocks } from '@atlaskit/editor-common/selection';
|
|
4
4
|
import { closestElement } from '@atlaskit/editor-common/utils';
|
|
5
|
+
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
|
+
|
|
5
7
|
// we ignore all of the clicks made inside <div class="ak-editor-content-area" /> (but not clicks on the node itself)
|
|
6
8
|
var insideContentArea = function insideContentArea(ref) {
|
|
7
9
|
while (ref) {
|
|
@@ -26,7 +28,7 @@ var insideProseMirrorEditableArea = function insideProseMirrorEditableArea(ref)
|
|
|
26
28
|
* 2. if another modal is open (e.g. delete confirmation modal for confluence table) then ignore clicks as they shouldn't influence editor state
|
|
27
29
|
*/
|
|
28
30
|
export var checkForModal = function checkForModal(target) {
|
|
29
|
-
var modalDialog = target.closest('[role=dialog]');
|
|
31
|
+
var modalDialog = target === null || target === void 0 ? void 0 : target.closest('[role=dialog]');
|
|
30
32
|
if (modalDialog) {
|
|
31
33
|
// return false if not an editor inside modal, otherwise return true
|
|
32
34
|
return !!(modalDialog !== null && modalDialog !== void 0 && modalDialog.querySelector('.akEditor'));
|
|
@@ -38,9 +40,12 @@ export var checkForModal = function checkForModal(target) {
|
|
|
38
40
|
var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
|
|
39
41
|
var _view$hasFocus, _event$currentTarget;
|
|
40
42
|
var isEditorFocused = !!(view !== null && view !== void 0 && (_view$hasFocus = view.hasFocus) !== null && _view$hasFocus !== void 0 && _view$hasFocus.call(view));
|
|
43
|
+
if (getBooleanFF('platform.editor.explicit-html-element-check') && !(event.target instanceof HTMLElement)) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
41
46
|
var target = event.target;
|
|
42
|
-
var isTargetContentArea = target.classList.contains('ak-editor-content-area');
|
|
43
|
-
var isTargetChildOfContentArea = insideContentArea(target.parentNode);
|
|
47
|
+
var isTargetContentArea = target === null || target === void 0 ? void 0 : target.classList.contains('ak-editor-content-area');
|
|
48
|
+
var isTargetChildOfContentArea = getBooleanFF('platform.editor.explicit-html-element-check') ? insideContentArea((target === null || target === void 0 ? void 0 : target.parentNode) instanceof HTMLElement ? target === null || target === void 0 ? void 0 : target.parentNode : null) : insideContentArea(target === null || target === void 0 ? void 0 : target.parentNode);
|
|
44
49
|
var isTargetInsideEditableArea = insideProseMirrorEditableArea(target);
|
|
45
50
|
|
|
46
51
|
// Any click inside ProseMirror should be managed by ProseMirror
|
|
@@ -53,11 +58,11 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
|
|
|
53
58
|
// click event gets triggered twice on a checkbox (on <label> first and then on <input>)
|
|
54
59
|
// by the time it gets triggered on input, PM already re-renders nodeView and detaches it from DOM
|
|
55
60
|
// which doesn't pass the check !contentArea.contains(event.target)
|
|
56
|
-
var isInputClicked = target.nodeName === 'INPUT';
|
|
61
|
+
var isInputClicked = (target === null || target === void 0 ? void 0 : target.nodeName) === 'INPUT';
|
|
57
62
|
// @see ED-5126
|
|
58
63
|
var isPopupClicked = !!closestElement(target, '[data-editor-popup]');
|
|
59
64
|
// Fixes issue when using a textarea for editor title in full page editor doesn't let user focus it.
|
|
60
|
-
var isTextAreaClicked = target.nodeName === 'TEXTAREA';
|
|
65
|
+
var isTextAreaClicked = (target === null || target === void 0 ? void 0 : target.nodeName) === 'TEXTAREA';
|
|
61
66
|
var isBreadcrumbClicked = !!closestElement(target, 'nav[aria-label="Breadcrumbs"]');
|
|
62
67
|
var selection = window.getSelection();
|
|
63
68
|
var isEditorPopupTextSelected = (selection === null || selection === void 0 ? void 0 : selection.type) === 'Range' && closestElement(selection === null || selection === void 0 ? void 0 : selection.anchorNode, '[data-editor-popup]');
|
|
@@ -65,7 +70,7 @@ var clickAreaClickHandler = function clickAreaClickHandler(view, event) {
|
|
|
65
70
|
// This is a super workaround to find when events are coming from Confluence InlineComment modal
|
|
66
71
|
// We don't own those components, so we can't change them
|
|
67
72
|
var isEventComingFromInlineCommentPopup = Boolean(closestElement(event.currentTarget, 'div[offset]')) || Boolean(closestElement(target, 'div[offset]'));
|
|
68
|
-
var isButtonClicked = Boolean(closestElement(event.currentTarget, 'button')) || Boolean(closestElement(target, 'button')) || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.nodeName) === 'BUTTON' || target.nodeName === 'BUTTON';
|
|
73
|
+
var isButtonClicked = Boolean(closestElement(event.currentTarget, 'button')) || Boolean(closestElement(target, 'button')) || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : _event$currentTarget.nodeName) === 'BUTTON' || (target === null || target === void 0 ? void 0 : target.nodeName) === 'BUTTON';
|
|
69
74
|
var isTargetInsideContentArea = Boolean(isTargetChildOfContentArea);
|
|
70
75
|
var isBetweenContentAreaAndEditableContent = isTargetInsideContentArea && !isTargetInsideEditableArea;
|
|
71
76
|
|
|
@@ -1,17 +1,14 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2
|
|
2
|
+
var _templateObject, _templateObject2;
|
|
3
3
|
import { css } from '@emotion/react';
|
|
4
4
|
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
5
5
|
import { B400, B50, R400, R50 } from '@atlaskit/theme/colors';
|
|
6
6
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
10
|
-
var extensionLabelStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n &.danger > span > div > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n }\n\n &:not(.danger).", "\n > span\n > div\n > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n }\n\n ", "\n"])), "var(--ds-background-accent-red-subtler, ".concat(R50, ")"), "var(--ds-text-danger, ".concat(R400, ")"), akEditorSelectedNodeClassName, "var(--ds-background-selected, ".concat(B50, ")"), "var(--ds-text-selected, ".concat(B400, ")"), bodiedExtensionLabelStyles);
|
|
7
|
+
var extensionLabelStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &.danger > span > div > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n border: none;\n }\n\n &:not(.danger).", "\n > span\n > div\n > .extension-label {\n background-color: ", ";\n color: ", ";\n opacity: 1;\n border: none;\n }\n"])), "var(--ds-background-accent-red-subtler, ".concat(R50, ")"), "var(--ds-text-danger, ".concat(R400, ")"), akEditorSelectedNodeClassName, "var(--ds-background-selected, ".concat(B50, ")"), "var(--ds-text-selected, ".concat(B400, ")"));
|
|
11
8
|
var dangerOverlayStyles = css({
|
|
12
9
|
opacity: 0.3,
|
|
13
10
|
backgroundColor: "var(--ds-background-danger-hovered, ".concat(akEditorDeleteBackground, ")")
|
|
14
11
|
});
|
|
15
12
|
|
|
16
13
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/design-system/no-exported-css -- Needs manual remediation
|
|
17
|
-
export var extensionStyles = css(
|
|
14
|
+
export var extensionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .multiBodiedExtensionView-content-wrap {\n &.danger > span > .multiBodiedExtension--container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n ", "\n\n &.danger > span > .with-danger-overlay {\n background-color: transparent;\n .multiBodiedExtension--overlay {\n ", "\n }\n }\n\n &:not(.danger).", " {\n & > span > .multiBodiedExtension--container {\n ", "\n }\n }\n .multiBodiedExtension--container {\n width: 100%;\n max-width: 100%; // ensure width can't go over 100%;\n }\n }\n\n .inlineExtensionView-content-wrap {\n &.danger > span > .extension-container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n &.danger > span > .with-danger-overlay {\n // If the macro turned used to turn red before, not setting the background to be transparent will cause the\n // danger state to have two layers of red which we don't want.\n background-color: transparent;\n .extension-overlay {\n ", "\n }\n }\n\n &:not(.danger).", " {\n & > span > .extension-container {\n ", "\n }\n }\n\n ", "\n }\n\n .extensionView-content-wrap,\n .multiBodiedExtensionView-content-wrap,\n .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n\n &:first-of-type {\n margin-top: 0;\n }\n\n &:last-of-type {\n margin-bottom: 0;\n }\n\n &:not(.danger).", " {\n & > span > .extension-container {\n ", "\n }\n }\n\n &.danger > span > .extension-container {\n box-shadow: 0 0 0 ", "px\n ", ";\n background-color: ", ";\n }\n\n ", "\n\n &.danger > span > .with-danger-overlay {\n background-color: transparent;\n .extension-overlay {\n ", "\n }\n }\n\n &.inline {\n word-wrap: break-all;\n }\n }\n\n .extensionView-content-wrap .extension-container {\n overflow: hidden;\n }\n\n .bodiedExtensionView-content-wrap\n .extensionView-content-wrap\n .extension-container {\n width: 100%;\n max-width: 100%; // ensure width can't go over 100%;\n }\n\n [data-mark-type='fragment'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin: ", " 0;\n }\n }\n\n &:first-child {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-top: 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-top: 0;\n }\n }\n }\n\n &:nth-last-of-type(-n + 2):not(:first-of-type) {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-bottom: 0;\n }\n\n & > [data-mark-type='dataConsumer'] {\n & > .extensionView-content-wrap,\n & > .bodiedExtensionView-content-wrap {\n margin-bottom: 0;\n }\n }\n }\n }\n"])), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), dangerOverlayStyles, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), extensionLabelStyles, blockNodesVerticalMargin, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow]), akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), extensionLabelStyles, dangerOverlayStyles, blockNodesVerticalMargin, blockNodesVerticalMargin);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "193.11.
|
|
2
|
+
export var version = "193.11.12";
|
|
@@ -8,6 +8,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
8
8
|
* 1. if editor (e.g. comment inside of Jira ticket view) is inside modal then ensure focus and cursor is brought to the input
|
|
9
9
|
* 2. if another modal is open (e.g. delete confirmation modal for confluence table) then ignore clicks as they shouldn't influence editor state
|
|
10
10
|
*/
|
|
11
|
-
export declare const checkForModal: (target: HTMLElement) => boolean;
|
|
11
|
+
export declare const checkForModal: (target: HTMLElement | null) => boolean;
|
|
12
12
|
declare const clickAreaClickHandler: (view: EditorView, event: React.MouseEvent<any>) => false | undefined;
|
|
13
13
|
export { clickAreaClickHandler };
|
|
@@ -8,6 +8,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
8
8
|
* 1. if editor (e.g. comment inside of Jira ticket view) is inside modal then ensure focus and cursor is brought to the input
|
|
9
9
|
* 2. if another modal is open (e.g. delete confirmation modal for confluence table) then ignore clicks as they shouldn't influence editor state
|
|
10
10
|
*/
|
|
11
|
-
export declare const checkForModal: (target: HTMLElement) => boolean;
|
|
11
|
+
export declare const checkForModal: (target: HTMLElement | null) => boolean;
|
|
12
12
|
declare const clickAreaClickHandler: (view: EditorView, event: React.MouseEvent<any>) => false | undefined;
|
|
13
13
|
export { clickAreaClickHandler };
|
package/docs/0-intro.tsx
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "193.11.
|
|
3
|
+
"version": "193.11.12",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -106,14 +106,14 @@
|
|
|
106
106
|
"@atlaskit/primitives": "^5.6.0",
|
|
107
107
|
"@atlaskit/renderer": "^109.20.0",
|
|
108
108
|
"@atlaskit/select": "^17.6.0",
|
|
109
|
-
"@atlaskit/smart-card": "^26.
|
|
109
|
+
"@atlaskit/smart-card": "^26.58.0",
|
|
110
110
|
"@atlaskit/synchrony-test-helpers": "^2.4.0",
|
|
111
111
|
"@atlaskit/util-data-test": "^17.9.0",
|
|
112
112
|
"@atlaskit/visual-regression": "*",
|
|
113
113
|
"@atlassian/adf-schema-json": "^1.0.7",
|
|
114
114
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|
|
115
115
|
"@atlassian/link-picker-plugins": "^24.0.0",
|
|
116
|
-
"@atlassian/search-provider": "2.4.
|
|
116
|
+
"@atlassian/search-provider": "2.4.60",
|
|
117
117
|
"@atlassian/ufo": "^0.2.0",
|
|
118
118
|
"@emotion/jest": "^11.8.0",
|
|
119
119
|
"@storybook/addon-knobs": "^5.3.18",
|
|
@@ -343,6 +343,9 @@
|
|
|
343
343
|
"platform.editor.live-view.disable-editing-in-view-mode_fi1rx": {
|
|
344
344
|
"type": "boolean",
|
|
345
345
|
"referenceOnly": "true"
|
|
346
|
+
},
|
|
347
|
+
"platform.editor.explicit-html-element-check": {
|
|
348
|
+
"type": "boolean"
|
|
346
349
|
}
|
|
347
350
|
},
|
|
348
351
|
"stricter": {
|