@atlaskit/editor-core 207.14.2 → 207.14.4
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 +22 -0
- package/dist/cjs/create-editor/ReactEditorView/useDispatchTransaction.js +4 -12
- package/dist/cjs/presets/universal.js +3 -1
- package/dist/cjs/ui/ContentStyles/index.js +4 -4
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +7 -7
- package/dist/cjs/ui/EditorContentContainer/styles/findReplaceStyles.js +22 -0
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/create-editor/ReactEditorView/useDispatchTransaction.js +2 -7
- package/dist/es2019/presets/universal.js +3 -1
- package/dist/es2019/ui/ContentStyles/index.js +0 -7
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +1 -8
- package/dist/es2019/ui/EditorContentContainer/styles/findReplaceStyles.js +15 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/create-editor/ReactEditorView/useDispatchTransaction.js +4 -11
- package/dist/esm/presets/universal.js +3 -1
- package/dist/esm/ui/ContentStyles/index.js +4 -4
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +4 -4
- package/dist/esm/ui/EditorContentContainer/styles/findReplaceStyles.js +15 -0
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/EditorContentContainer/styles/findReplaceStyles.d.ts +1 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/findReplaceStyles.d.ts +1 -0
- package/package.json +2 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 207.14.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#163360](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163360)
|
|
8
|
+
[`5166e50d3a4d8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5166e50d3a4d8) -
|
|
9
|
+
EDITOR-367 cleans up feature gate `platform_editor_transaction_skip_validation`
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 207.14.3
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#163976](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163976)
|
|
17
|
+
[`e1f24a28eb731`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e1f24a28eb731) -
|
|
18
|
+
[ED-28113] add integration test for resizing to the fullwidth guideline in the
|
|
19
|
+
platform_editor_breakout_resizing resizing experience
|
|
20
|
+
- [#163378](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/163378)
|
|
21
|
+
[`8d7ed16b4071a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8d7ed16b4071a) -
|
|
22
|
+
Cleanup of FG editor_request_to_edit_task
|
|
23
|
+
- Updated dependencies
|
|
24
|
+
|
|
3
25
|
## 207.14.2
|
|
4
26
|
|
|
5
27
|
### Patch Changes
|
|
@@ -1,22 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
6
|
exports.useDispatchTransaction = void 0;
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
7
|
var _react = require("react");
|
|
10
8
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
9
|
var _coreUtils = require("@atlaskit/editor-common/core-utils");
|
|
12
10
|
var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
|
|
13
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
11
|
var _findChangedNodesFromTransaction = require("../../utils/findChangedNodesFromTransaction");
|
|
15
12
|
var _saferTransactions = require("../../utils/performance/safer-transactions");
|
|
16
13
|
var _trackTransactions = require("../../utils/performance/track-transactions");
|
|
17
14
|
var _validateNodes = require("../../utils/validateNodes");
|
|
18
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
15
|
var useDispatchTransaction = exports.useDispatchTransaction = function useDispatchTransaction(_ref) {
|
|
21
16
|
var onChange = _ref.onChange,
|
|
22
17
|
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
|
|
@@ -42,9 +37,7 @@ var useDispatchTransaction = exports.useDispatchTransaction = function useDispat
|
|
|
42
37
|
// Remote replaceDocument transactions are fired when the document is replaced by initialization of editor-plugin-collab-edit
|
|
43
38
|
// If there is a discrepancy in the ProseMirror schema at initialization, it results in the editor being loaded with no content,
|
|
44
39
|
// giving the user the impression that content has been lost
|
|
45
|
-
var isRemoteReplace = isRemoteReplaceDocumentTransaction ?
|
|
46
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
47
|
-
(0, _platformFeatureFlags.fg)('platform_editor_transaction_skip_validation') && isRemoteReplaceDocumentTransaction(transaction) : false;
|
|
40
|
+
var isRemoteReplace = isRemoteReplaceDocumentTransaction ? isRemoteReplaceDocumentTransaction(transaction) : false;
|
|
48
41
|
if (changedNodesValid || isRemoteReplace) {
|
|
49
42
|
var oldEditorState = view.state;
|
|
50
43
|
|
|
@@ -83,12 +76,11 @@ var useDispatchTransaction = exports.useDispatchTransaction = function useDispat
|
|
|
83
76
|
action: _analytics.ACTION.DISPATCHED_INVALID_TRANSACTION,
|
|
84
77
|
actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
|
|
85
78
|
eventType: _analytics.EVENT_TYPE.OPERATIONAL,
|
|
86
|
-
attributes:
|
|
79
|
+
attributes: {
|
|
87
80
|
analyticsEventPayloads: (0, _analytics.getAnalyticsEventsFromTransaction)(transaction),
|
|
88
|
-
invalidNodes: invalidNodes
|
|
89
|
-
}, (0, _platformFeatureFlags.fg)('platform_editor_transaction_skip_validation') ? {
|
|
81
|
+
invalidNodes: invalidNodes,
|
|
90
82
|
isRemoteReplaceDocumentTransaction: isRemoteReplace
|
|
91
|
-
}
|
|
83
|
+
}
|
|
92
84
|
});
|
|
93
85
|
}
|
|
94
86
|
}, [dispatchAnalyticsEvent, onEditorViewUpdated, isRemoteReplaceDocumentTransaction]);
|
|
@@ -118,7 +118,9 @@ function createUniversalPresetInternal(_ref) {
|
|
|
118
118
|
appearance: appearance,
|
|
119
119
|
allowInteractiveExpand: typeof props.allowExpand === 'boolean' ? props.allowExpand : Boolean(props.allowExpand && props.allowExpand.allowInteractiveExpand !== false),
|
|
120
120
|
__livePage: props.__livePage
|
|
121
|
-
}], Boolean(props.allowExpand)).maybeAdd(_guideline.guidelinePlugin, Boolean(!isComment && !isChromeless && (props.media || props.allowTables))
|
|
121
|
+
}], Boolean(props.allowExpand)).maybeAdd(_guideline.guidelinePlugin, Boolean(!isComment && !isChromeless && (props.media || props.allowTables) || (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true, {
|
|
122
|
+
exposure: true
|
|
123
|
+
}) && (props.allowExpand || props.allowLayouts || props.codeBlock))).maybeAdd([_grid.gridPlugin, {
|
|
122
124
|
shouldCalcBreakoutGridLines: isFullPage
|
|
123
125
|
}], Boolean(props.media)).maybeAdd([_annotation.annotationPlugin, props.annotationProviders], Boolean(props.annotationProviders)).maybeAdd([_media.mediaPlugin, _objectSpread(_objectSpread({}, props.media), {}, {
|
|
124
126
|
allowLazyLoading: true,
|
|
@@ -35,7 +35,7 @@ var _media = require("./media");
|
|
|
35
35
|
var _panel2 = require("./panel");
|
|
36
36
|
var _status = require("./status");
|
|
37
37
|
var _tasksAndDecisions = require("./tasks-and-decisions");
|
|
38
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10
|
|
38
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10;
|
|
39
39
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
40
40
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
41
41
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
@@ -144,9 +144,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
144
144
|
// Under editor experiment platform_editor_core_static_emotion
|
|
145
145
|
// If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
|
|
146
146
|
var legacyContentStyles = function legacyContentStyles(props) {
|
|
147
|
-
return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t
|
|
147
|
+
return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n /* Switch between the two icons based on the visual refresh feature gate */\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
|
|
148
148
|
theme: props.theme
|
|
149
|
-
}), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('
|
|
149
|
+
}), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
150
150
|
exposure: false
|
|
151
151
|
}) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
152
152
|
exposure: false
|
|
@@ -160,7 +160,7 @@ var legacyContentStyles = function legacyContentStyles(props) {
|
|
|
160
160
|
exposure: false
|
|
161
161
|
}) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
162
162
|
exposure: false
|
|
163
|
-
}) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(
|
|
163
|
+
}) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
|
|
164
164
|
};
|
|
165
165
|
var listLayoutShiftFix = (0, _react2.css)({
|
|
166
166
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -11,9 +11,8 @@ var _react2 = require("@emotion/react");
|
|
|
11
11
|
var _browser = require("@atlaskit/editor-common/browser");
|
|
12
12
|
var _selection = require("@atlaskit/editor-common/selection");
|
|
13
13
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
14
|
-
var _styles2 = require("@atlaskit/editor-plugins/
|
|
15
|
-
var _styles3 = require("@atlaskit/editor-plugins/
|
|
16
|
-
var _styles4 = require("@atlaskit/editor-plugins/placeholder-text/styles");
|
|
14
|
+
var _styles2 = require("@atlaskit/editor-plugins/paste-options-toolbar/styles");
|
|
15
|
+
var _styles3 = require("@atlaskit/editor-plugins/placeholder-text/styles");
|
|
17
16
|
var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
|
|
18
17
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
19
18
|
var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
|
|
@@ -37,6 +36,7 @@ var _dateStyles = require("./styles/dateStyles");
|
|
|
37
36
|
var _editorUGCTokenStyles = require("./styles/editorUGCTokenStyles");
|
|
38
37
|
var _embedCardStyles = require("./styles/embedCardStyles");
|
|
39
38
|
var _emoji = require("./styles/emoji");
|
|
39
|
+
var _findReplaceStyles = require("./styles/findReplaceStyles");
|
|
40
40
|
var _firstBlockNodeStyles = require("./styles/firstBlockNodeStyles");
|
|
41
41
|
var _gridStyles = require("./styles/gridStyles");
|
|
42
42
|
var _indentationStyles = require("./styles/indentationStyles");
|
|
@@ -55,7 +55,7 @@ var _telepointerStyles = require("./styles/telepointerStyles");
|
|
|
55
55
|
var _textColorStyles = require("./styles/textColorStyles");
|
|
56
56
|
var _unsupportedStyles = require("./styles/unsupportedStyles");
|
|
57
57
|
var _whitespaceStyles = require("./styles/whitespaceStyles");
|
|
58
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4
|
|
58
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
59
59
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
60
60
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
61
61
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
@@ -105,7 +105,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
105
105
|
|
|
106
106
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
107
107
|
var contentStyles = function contentStyles() {
|
|
108
|
-
return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t
|
|
108
|
+
return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\t", "\n \t", "\n\n\n \t", "\n\n\t", "\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n ", "\n\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\t.panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _whitespaceStyles.whitespaceStyles, _indentationStyles.indentationStyles, _shadowStyles.shadowStyles, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles3.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, _codeBlockStyles.codeBlockStyles, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _editorUGCTokenStyles.editorUGCTokensDefault,
|
|
109
109
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
110
110
|
(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && ( /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
111
111
|
(0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && _editorUGCTokenStyles.editorUGCTokensRefreshed
|
|
@@ -113,7 +113,7 @@ var contentStyles = function contentStyles() {
|
|
|
113
113
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
114
114
|
(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
115
115
|
!((0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed')) && _editorUGCTokenStyles.editorUGCTokensModernized
|
|
116
|
-
/* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */, _blockTypeStyles.blocktypeStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_typography_ugc, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_without_fg_platform_editor_typography_ugc, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _telepointerStyles.telepointerStyle : _telepointerStyles.telepointerStyleWithInitialOnly, _telepointerStyles.telepointerColorAndCommonStyle, _selection.gapCursorStyles, (0, _panel.panelStyles)(), _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(),
|
|
116
|
+
/* eslint-enable @atlaskit/platform/ensure-feature-flag-prefix */, _blockTypeStyles.blocktypeStyles, (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_typography_ugc, !(0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') && _blockTypeStyles.blocktypeStyles_without_fg_platform_editor_typography_ugc, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && _blockTypeStyles.blocktypeStyles_fg_platform_editor_nested_dnd_styles_changes, _codeMarkStyles.codeMarkStyles, _textColorStyles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, _list.listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _telepointerStyles.telepointerStyle : _telepointerStyles.telepointerStyleWithInitialOnly, _telepointerStyles.telepointerColorAndCommonStyle, _selection.gapCursorStyles, (0, _panel.panelStyles)(), _mentions.mentionsStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _gridStyles.gridStyles, _blockMarksStyles.blockMarksStyles, _dateStyles.dateStyles, _extension.extensionStyles, (0, _expand.expandStyles)(), _findReplaceStyles.findReplaceStyles, _styles2.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
117
117
|
exposure: false
|
|
118
118
|
}) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
119
119
|
exposure: false
|
|
@@ -121,7 +121,7 @@ var contentStyles = function contentStyles() {
|
|
|
121
121
|
exposure: false
|
|
122
122
|
}) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
123
123
|
exposure: false
|
|
124
|
-
}) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles, _smartCardStyles.smartCardStyles, _embedCardStyles.embedCardStyles, _unsupportedStyles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(
|
|
124
|
+
}) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles, _smartCardStyles.smartCardStyles, _embedCardStyles.embedCardStyles, _unsupportedStyles.unsupportedStyles, _resizerStyles.resizerStyles, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
|
|
125
125
|
};
|
|
126
126
|
var CommentEditorMargin = 14;
|
|
127
127
|
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.findReplaceStyles = void 0;
|
|
7
|
+
var _react = require("@emotion/react");
|
|
8
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
9
|
+
|
|
10
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
11
|
+
var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)({
|
|
12
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
13
|
+
'.search-match': {
|
|
14
|
+
borderRadius: '3px',
|
|
15
|
+
backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
|
|
16
|
+
boxShadow: "var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))".concat(", inset 0 0 0 1px ", "var(--ds-border-input, #8590A2)")
|
|
17
|
+
},
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
19
|
+
'.selected-search-match': {
|
|
20
|
+
backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
|
|
21
|
+
}
|
|
22
|
+
});
|
|
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef } from 'react';
|
|
|
2
2
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, getAnalyticsEventsFromTransaction } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import { getDocStructure } from '@atlaskit/editor-common/core-utils';
|
|
4
4
|
import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
import { findChangedNodesFromTransaction } from '../../utils/findChangedNodesFromTransaction';
|
|
7
6
|
import { freezeUnsafeTransactionProperties } from '../../utils/performance/safer-transactions';
|
|
8
7
|
import { EVENT_NAME_ON_CHANGE } from '../../utils/performance/track-transactions';
|
|
@@ -33,9 +32,7 @@ export const useDispatchTransaction = ({
|
|
|
33
32
|
// Remote replaceDocument transactions are fired when the document is replaced by initialization of editor-plugin-collab-edit
|
|
34
33
|
// If there is a discrepancy in the ProseMirror schema at initialization, it results in the editor being loaded with no content,
|
|
35
34
|
// giving the user the impression that content has been lost
|
|
36
|
-
const isRemoteReplace = isRemoteReplaceDocumentTransaction ?
|
|
37
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
38
|
-
fg('platform_editor_transaction_skip_validation') && isRemoteReplaceDocumentTransaction(transaction) : false;
|
|
35
|
+
const isRemoteReplace = isRemoteReplaceDocumentTransaction ? isRemoteReplaceDocumentTransaction(transaction) : false;
|
|
39
36
|
if (changedNodesValid || isRemoteReplace) {
|
|
40
37
|
const oldEditorState = view.state;
|
|
41
38
|
|
|
@@ -74,9 +71,7 @@ export const useDispatchTransaction = ({
|
|
|
74
71
|
attributes: {
|
|
75
72
|
analyticsEventPayloads: getAnalyticsEventsFromTransaction(transaction),
|
|
76
73
|
invalidNodes,
|
|
77
|
-
|
|
78
|
-
isRemoteReplaceDocumentTransaction: isRemoteReplace
|
|
79
|
-
} : {})
|
|
74
|
+
isRemoteReplaceDocumentTransaction: isRemoteReplace
|
|
80
75
|
}
|
|
81
76
|
});
|
|
82
77
|
}
|
|
@@ -108,7 +108,9 @@ export default function createUniversalPresetInternal({
|
|
|
108
108
|
appearance: appearance,
|
|
109
109
|
allowInteractiveExpand: typeof props.allowExpand === 'boolean' ? props.allowExpand : Boolean(props.allowExpand && props.allowExpand.allowInteractiveExpand !== false),
|
|
110
110
|
__livePage: props.__livePage
|
|
111
|
-
}], Boolean(props.allowExpand)).maybeAdd(guidelinePlugin, Boolean(!isComment && !isChromeless && (props.media || props.allowTables)
|
|
111
|
+
}], Boolean(props.allowExpand)).maybeAdd(guidelinePlugin, Boolean(!isComment && !isChromeless && (props.media || props.allowTables) || editorExperiment('platform_editor_breakout_resizing', true, {
|
|
112
|
+
exposure: true
|
|
113
|
+
}) && (props.allowExpand || props.allowLayouts || props.codeBlock))).maybeAdd([gridPlugin, {
|
|
112
114
|
shouldCalcBreakoutGridLines: isFullPage
|
|
113
115
|
}], Boolean(props.media)).maybeAdd([annotationPlugin, props.annotationProviders], Boolean(props.annotationProviders)).maybeAdd([mediaPlugin, {
|
|
114
116
|
...props.media,
|
|
@@ -328,13 +328,6 @@ const legacyContentStyles = props => css`
|
|
|
328
328
|
${InlineNodeViewSharedStyles};
|
|
329
329
|
}
|
|
330
330
|
|
|
331
|
-
${fg('editor_request_to_edit_task') ? null : css`
|
|
332
|
-
.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {
|
|
333
|
-
pointer-events: none;
|
|
334
|
-
opacity: 0.7;
|
|
335
|
-
}
|
|
336
|
-
`}
|
|
337
|
-
|
|
338
331
|
.ProseMirror-hideselection *::selection {
|
|
339
332
|
background: transparent;
|
|
340
333
|
}
|
|
@@ -12,7 +12,6 @@ import { css, jsx, useTheme } from '@emotion/react';
|
|
|
12
12
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
13
13
|
import { gapCursorStyles } from '@atlaskit/editor-common/selection';
|
|
14
14
|
import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
|
|
15
|
-
import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
|
|
16
15
|
import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
|
|
17
16
|
import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
|
|
18
17
|
import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
|
|
@@ -38,6 +37,7 @@ import { dateStyles, dateVanillaStyles } from './styles/dateStyles';
|
|
|
38
37
|
import { editorUGCTokensDefault, editorUGCTokensModernized, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
|
|
39
38
|
import { embedCardStyles } from './styles/embedCardStyles';
|
|
40
39
|
import { reactEmojiStyles, vanillaEmojiStyles } from './styles/emoji';
|
|
40
|
+
import { findReplaceStyles } from './styles/findReplaceStyles';
|
|
41
41
|
import { firstBlockNodeStyles } from './styles/firstBlockNodeStyles';
|
|
42
42
|
import { gridStyles } from './styles/gridStyles';
|
|
43
43
|
import { indentationStyles } from './styles/indentationStyles';
|
|
@@ -148,13 +148,6 @@ const contentStyles = () => css`
|
|
|
148
148
|
${InlineNodeViewSharedStyles};
|
|
149
149
|
}
|
|
150
150
|
|
|
151
|
-
${fg('editor_request_to_edit_task') ? null : css`
|
|
152
|
-
.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {
|
|
153
|
-
pointer-events: none;
|
|
154
|
-
opacity: 0.7;
|
|
155
|
-
}
|
|
156
|
-
`}
|
|
157
|
-
|
|
158
151
|
.ProseMirror-hideselection *::selection {
|
|
159
152
|
background: transparent;
|
|
160
153
|
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
2
|
+
import { css } from '@emotion/react';
|
|
3
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
4
|
+
export const findReplaceStyles = css({
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
6
|
+
'.search-match': {
|
|
7
|
+
borderRadius: '3px',
|
|
8
|
+
backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
|
|
9
|
+
boxShadow: `${"var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))"}, inset 0 0 0 1px ${"var(--ds-border-input, #8590A2)"}`
|
|
10
|
+
},
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
12
|
+
'.selected-search-match': {
|
|
13
|
+
backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
|
|
14
|
+
}
|
|
15
|
+
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "207.14.
|
|
2
|
+
export const version = "207.14.4";
|
|
@@ -1,11 +1,7 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
1
|
import { useCallback, useEffect, useRef } from 'react';
|
|
5
2
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, getAnalyticsEventsFromTransaction } from '@atlaskit/editor-common/analytics';
|
|
6
3
|
import { getDocStructure } from '@atlaskit/editor-common/core-utils';
|
|
7
4
|
import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
5
|
import { findChangedNodesFromTransaction } from '../../utils/findChangedNodesFromTransaction';
|
|
10
6
|
import { freezeUnsafeTransactionProperties } from '../../utils/performance/safer-transactions';
|
|
11
7
|
import { EVENT_NAME_ON_CHANGE } from '../../utils/performance/track-transactions';
|
|
@@ -35,9 +31,7 @@ export var useDispatchTransaction = function useDispatchTransaction(_ref) {
|
|
|
35
31
|
// Remote replaceDocument transactions are fired when the document is replaced by initialization of editor-plugin-collab-edit
|
|
36
32
|
// If there is a discrepancy in the ProseMirror schema at initialization, it results in the editor being loaded with no content,
|
|
37
33
|
// giving the user the impression that content has been lost
|
|
38
|
-
var isRemoteReplace = isRemoteReplaceDocumentTransaction ?
|
|
39
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
40
|
-
fg('platform_editor_transaction_skip_validation') && isRemoteReplaceDocumentTransaction(transaction) : false;
|
|
34
|
+
var isRemoteReplace = isRemoteReplaceDocumentTransaction ? isRemoteReplaceDocumentTransaction(transaction) : false;
|
|
41
35
|
if (changedNodesValid || isRemoteReplace) {
|
|
42
36
|
var oldEditorState = view.state;
|
|
43
37
|
|
|
@@ -76,12 +70,11 @@ export var useDispatchTransaction = function useDispatchTransaction(_ref) {
|
|
|
76
70
|
action: ACTION.DISPATCHED_INVALID_TRANSACTION,
|
|
77
71
|
actionSubject: ACTION_SUBJECT.EDITOR,
|
|
78
72
|
eventType: EVENT_TYPE.OPERATIONAL,
|
|
79
|
-
attributes:
|
|
73
|
+
attributes: {
|
|
80
74
|
analyticsEventPayloads: getAnalyticsEventsFromTransaction(transaction),
|
|
81
|
-
invalidNodes: invalidNodes
|
|
82
|
-
}, fg('platform_editor_transaction_skip_validation') ? {
|
|
75
|
+
invalidNodes: invalidNodes,
|
|
83
76
|
isRemoteReplaceDocumentTransaction: isRemoteReplace
|
|
84
|
-
}
|
|
77
|
+
}
|
|
85
78
|
});
|
|
86
79
|
}
|
|
87
80
|
}, [dispatchAnalyticsEvent, onEditorViewUpdated, isRemoteReplaceDocumentTransaction]);
|
|
@@ -111,7 +111,9 @@ export default function createUniversalPresetInternal(_ref) {
|
|
|
111
111
|
appearance: appearance,
|
|
112
112
|
allowInteractiveExpand: typeof props.allowExpand === 'boolean' ? props.allowExpand : Boolean(props.allowExpand && props.allowExpand.allowInteractiveExpand !== false),
|
|
113
113
|
__livePage: props.__livePage
|
|
114
|
-
}], Boolean(props.allowExpand)).maybeAdd(guidelinePlugin, Boolean(!isComment && !isChromeless && (props.media || props.allowTables)
|
|
114
|
+
}], Boolean(props.allowExpand)).maybeAdd(guidelinePlugin, Boolean(!isComment && !isChromeless && (props.media || props.allowTables) || editorExperiment('platform_editor_breakout_resizing', true, {
|
|
115
|
+
exposure: true
|
|
116
|
+
}) && (props.allowExpand || props.allowLayouts || props.codeBlock))).maybeAdd([gridPlugin, {
|
|
115
117
|
shouldCalcBreakoutGridLines: isFullPage
|
|
116
118
|
}], Boolean(props.media)).maybeAdd([annotationPlugin, props.annotationProviders], Boolean(props.annotationProviders)).maybeAdd([mediaPlugin, _objectSpread(_objectSpread({}, props.media), {}, {
|
|
117
119
|
allowLazyLoading: true,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10;
|
|
3
3
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
4
4
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
5
5
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
@@ -137,9 +137,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
137
137
|
// Under editor experiment platform_editor_core_static_emotion
|
|
138
138
|
// If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
|
|
139
139
|
var legacyContentStyles = function legacyContentStyles(props) {
|
|
140
|
-
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t
|
|
140
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n /* Switch between the two icons based on the visual refresh feature gate */\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
|
|
141
141
|
theme: props.theme
|
|
142
|
-
}), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('
|
|
142
|
+
}), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
143
143
|
exposure: false
|
|
144
144
|
}) && vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
145
145
|
exposure: false
|
|
@@ -153,7 +153,7 @@ var legacyContentStyles = function legacyContentStyles(props) {
|
|
|
153
153
|
exposure: false
|
|
154
154
|
}) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
155
155
|
exposure: false
|
|
156
|
-
}) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), aiPanelStyles(props.colorMode), firstBlockNodeStylesNew, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(
|
|
156
|
+
}) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), aiPanelStyles(props.colorMode), firstBlockNodeStylesNew, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
|
|
157
157
|
};
|
|
158
158
|
var listLayoutShiftFix = css({
|
|
159
159
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
3
3
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
4
4
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
5
5
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
@@ -14,7 +14,6 @@ import { css, jsx, useTheme } from '@emotion/react';
|
|
|
14
14
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
15
15
|
import { gapCursorStyles } from '@atlaskit/editor-common/selection';
|
|
16
16
|
import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
|
|
17
|
-
import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
|
|
18
17
|
import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
|
|
19
18
|
import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
|
|
20
19
|
import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
|
|
@@ -40,6 +39,7 @@ import { dateStyles, dateVanillaStyles } from './styles/dateStyles';
|
|
|
40
39
|
import { editorUGCTokensDefault, editorUGCTokensModernized, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
|
|
41
40
|
import { embedCardStyles } from './styles/embedCardStyles';
|
|
42
41
|
import { reactEmojiStyles, vanillaEmojiStyles } from './styles/emoji';
|
|
42
|
+
import { findReplaceStyles } from './styles/findReplaceStyles';
|
|
43
43
|
import { firstBlockNodeStyles } from './styles/firstBlockNodeStyles';
|
|
44
44
|
import { gridStyles } from './styles/gridStyles';
|
|
45
45
|
import { indentationStyles } from './styles/indentationStyles';
|
|
@@ -99,7 +99,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
99
99
|
|
|
100
100
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
101
101
|
var contentStyles = function contentStyles() {
|
|
102
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t
|
|
102
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\t", "\n \t", "\n\n\n \t", "\n\n\t", "\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n /* This needs to be after telepointer styles as some overlapping rules have equal specificity, and so the order is significant */\n ", "\n\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\t.panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceStyles, indentationStyles, shadowStyles, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles, !fg('platform_editor_typography_ugc') && editorUGCTokensDefault,
|
|
103
103
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
104
104
|
fg('platform_editor_typography_ugc') && ( /* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
105
105
|
fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed')) && editorUGCTokensRefreshed
|
|
@@ -115,7 +115,7 @@ var contentStyles = function contentStyles() {
|
|
|
115
115
|
exposure: false
|
|
116
116
|
}) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
117
117
|
exposure: false
|
|
118
|
-
}) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationStyles, smartCardStyles, embedCardStyles, unsupportedStyles, resizerStyles, !fg('platform-visual-refresh-icons') ? css(
|
|
118
|
+
}) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationStyles, smartCardStyles, embedCardStyles, unsupportedStyles, resizerStyles, !fg('platform-visual-refresh-icons') ? css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
|
|
119
119
|
};
|
|
120
120
|
var CommentEditorMargin = 14;
|
|
121
121
|
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
2
|
+
import { css } from '@emotion/react';
|
|
3
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
4
|
+
export var findReplaceStyles = css({
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
6
|
+
'.search-match': {
|
|
7
|
+
borderRadius: '3px',
|
|
8
|
+
backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
|
|
9
|
+
boxShadow: "var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))".concat(", inset 0 0 0 1px ", "var(--ds-border-input, #8590A2)")
|
|
10
|
+
},
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
12
|
+
'.selected-search-match': {
|
|
13
|
+
backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
|
|
14
|
+
}
|
|
15
|
+
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "207.14.
|
|
2
|
+
export var version = "207.14.4";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const findReplaceStyles: import("@emotion/react").SerializedStyles;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const findReplaceStyles: import("@emotion/react").SerializedStyles;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "207.14.
|
|
3
|
+
"version": "207.14.4",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@atlaskit/platform-feature-flags-react": "^0.2.0",
|
|
63
63
|
"@atlaskit/react-ufo": "^3.13.0",
|
|
64
64
|
"@atlaskit/task-decision": "^19.2.0",
|
|
65
|
-
"@atlaskit/tmp-editor-statsig": "^5.
|
|
65
|
+
"@atlaskit/tmp-editor-statsig": "^5.8.0",
|
|
66
66
|
"@atlaskit/tokens": "^5.0.0",
|
|
67
67
|
"@atlaskit/tooltip": "^20.2.0",
|
|
68
68
|
"@atlaskit/width-detector": "^5.0.0",
|
|
@@ -218,9 +218,6 @@
|
|
|
218
218
|
"type": "boolean",
|
|
219
219
|
"referenceOnly": true
|
|
220
220
|
},
|
|
221
|
-
"editor_request_to_edit_task": {
|
|
222
|
-
"type": "boolean"
|
|
223
|
-
},
|
|
224
221
|
"editor_load_conf_collab_docs_without_checks": {
|
|
225
222
|
"type": "boolean"
|
|
226
223
|
},
|
|
@@ -414,10 +411,6 @@
|
|
|
414
411
|
"type": "boolean",
|
|
415
412
|
"referenceOnly": true
|
|
416
413
|
},
|
|
417
|
-
"platform_editor_non_macros_copy_and_paste_fix": {
|
|
418
|
-
"type": "boolean",
|
|
419
|
-
"referenceOnly": true
|
|
420
|
-
},
|
|
421
414
|
"platform_editor_nbm_backspace_fixes": {
|
|
422
415
|
"type": "boolean",
|
|
423
416
|
"referenceOnly": true
|
|
@@ -447,9 +440,6 @@
|
|
|
447
440
|
"platform_editor_add_media_from_url_rollout": {
|
|
448
441
|
"type": "boolean"
|
|
449
442
|
},
|
|
450
|
-
"platform_editor_transaction_skip_validation": {
|
|
451
|
-
"type": "boolean"
|
|
452
|
-
},
|
|
453
443
|
"platform_editor_elements_dnd_multi_select_patch_2": {
|
|
454
444
|
"type": "boolean",
|
|
455
445
|
"referenceOnly": true
|