@atlaskit/editor-core 207.4.0 → 207.6.0
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 +29 -0
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +11 -1
- package/dist/cjs/ui/ContentStyles/layout.js +1 -1
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +7 -3
- package/dist/cjs/ui/EditorContentContainer/styles/codeMarkStyles.js +31 -0
- package/dist/cjs/ui/EditorContentContainer/styles/resizerStyles.js +211 -0
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +11 -1
- package/dist/es2019/ui/ContentStyles/layout.js +1 -2
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +7 -5
- package/dist/es2019/ui/EditorContentContainer/styles/ai-panel.js +1 -1
- package/dist/es2019/ui/EditorContentContainer/styles/codeMarkStyles.js +24 -0
- package/dist/es2019/ui/EditorContentContainer/styles/layout.js +7 -7
- package/dist/es2019/ui/EditorContentContainer/styles/link.js +1 -1
- package/dist/es2019/ui/EditorContentContainer/styles/resizerStyles.js +256 -0
- package/dist/es2019/ui/EditorContentContainer/styles/rule.js +2 -2
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +11 -1
- package/dist/esm/ui/ContentStyles/layout.js +1 -1
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +8 -4
- package/dist/esm/ui/EditorContentContainer/styles/ai-panel.js +1 -1
- package/dist/esm/ui/EditorContentContainer/styles/codeMarkStyles.js +24 -0
- package/dist/esm/ui/EditorContentContainer/styles/layout.js +7 -7
- package/dist/esm/ui/EditorContentContainer/styles/link.js +1 -1
- package/dist/esm/ui/EditorContentContainer/styles/resizerStyles.js +203 -0
- package/dist/esm/ui/EditorContentContainer/styles/rule.js +2 -2
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/EditorContentContainer/styles/codeMarkStyles.d.ts +1 -0
- package/dist/types/ui/EditorContentContainer/styles/resizerStyles.d.ts +10 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/codeMarkStyles.d.ts +1 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/resizerStyles.d.ts +10 -0
- package/package.json +11 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,34 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 207.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#159258](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159258)
|
|
8
|
+
[`875b7fcf43475`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/875b7fcf43475) -
|
|
9
|
+
[https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor code mark CSS in
|
|
10
|
+
static emotion
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
16
|
+
## 207.5.0
|
|
17
|
+
|
|
18
|
+
### Minor Changes
|
|
19
|
+
|
|
20
|
+
- [#159938](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159938)
|
|
21
|
+
[`b89d348f570a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b89d348f570a5) -
|
|
22
|
+
[https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor resizer CSS in
|
|
23
|
+
static emotion
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- [#159418](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/159418)
|
|
28
|
+
[`5f1c8497e044e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f1c8497e044e) -
|
|
29
|
+
[ux] ED-27103 improved method for applying the correct offline banner toolbar position when editor
|
|
30
|
+
toolbar is either docked to top or contextual
|
|
31
|
+
|
|
3
32
|
## 207.4.0
|
|
4
33
|
|
|
5
34
|
### Minor Changes
|
|
@@ -81,6 +81,16 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
81
81
|
if (props.hasHadInteraction && (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init')) {
|
|
82
82
|
interactionClassName = props.hasHadInteraction ? 'ak-editor-has-interaction' : 'ak-editor-no-interaction';
|
|
83
83
|
}
|
|
84
|
+
var shouldSetHiddenDataAttribute = function shouldSetHiddenDataAttribute() {
|
|
85
|
+
// When platform_editor_offline_banner_toolbar_position is enabled we use a different method to
|
|
86
|
+
// determine if the toolbar is hidden from outside of the editor, which doesn't require setting
|
|
87
|
+
// data-editor-primary-toolbar-hidden on the content area
|
|
88
|
+
// NOTE: When tidying, this function and the data attribute can be removed
|
|
89
|
+
if (!props.isEditorToolbarHidden || (0, _platformFeatureFlags.fg)('platform_editor_offline_banner_toolbar_position')) {
|
|
90
|
+
return false;
|
|
91
|
+
}
|
|
92
|
+
return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
|
|
93
|
+
};
|
|
84
94
|
return (0, _react2.jsx)("div", {
|
|
85
95
|
css: [
|
|
86
96
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
@@ -122,7 +132,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
122
132
|
,
|
|
123
133
|
className: "ak-editor-content-area-region",
|
|
124
134
|
"data-editor-editable-content": true,
|
|
125
|
-
"data-editor-primary-toolbar-hidden":
|
|
135
|
+
"data-editor-primary-toolbar-hidden": shouldSetHiddenDataAttribute() ? 'true' : undefined,
|
|
126
136
|
role: "region",
|
|
127
137
|
"aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
|
|
128
138
|
ref: contentAreaRef
|
|
@@ -77,5 +77,5 @@ var layoutResponsiveStyles = function layoutResponsiveStyles(viewMode) {
|
|
|
77
77
|
|
|
78
78
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
79
79
|
var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
|
|
80
|
-
return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px
|
|
80
|
+
return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0), _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' || (0, _experiments.editorExperiment)('advanced_layouts', true) ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), (0, _experiments.editorExperiment)('advanced_layouts', true) && layoutResponsiveStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode, (0, _experiments.editorExperiment)('advanced_layouts', false) && (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", _editorSharedStyles.akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
|
|
81
81
|
};
|
|
@@ -36,10 +36,12 @@ var _tasksAndDecisions = require("../ContentStyles/tasks-and-decisions");
|
|
|
36
36
|
var _aiPanel = require("./styles/ai-panel");
|
|
37
37
|
var _annotationStyles = require("./styles/annotationStyles");
|
|
38
38
|
var _backgroundColorStyles = require("./styles/backgroundColorStyles");
|
|
39
|
+
var _codeMarkStyles = require("./styles/codeMarkStyles");
|
|
39
40
|
var _embedCardStyles = require("./styles/embedCardStyles");
|
|
40
41
|
var _layout = require("./styles/layout");
|
|
41
42
|
var _link = require("./styles/link");
|
|
42
43
|
var _mediaStyles = require("./styles/mediaStyles");
|
|
44
|
+
var _resizerStyles = require("./styles/resizerStyles");
|
|
43
45
|
var _rule = require("./styles/rule");
|
|
44
46
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
45
47
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
@@ -147,7 +149,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
147
149
|
|
|
148
150
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
149
151
|
var contentStyles = function contentStyles() {
|
|
150
|
-
return (0, _react2.css)(_templateObject8 || (_templateObject8 = (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\n\t\t", ";\n\n\t\t", ";\n\t}\n\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 ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\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 ", "\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\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n
|
|
152
|
+
return (0, _react2.css)(_templateObject8 || (_templateObject8 = (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\n\t\t", ";\n\n\t\t", ";\n\t}\n\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 ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\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 ", "\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\t", "\n\n ", "\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\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, _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (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)(_templateObject11 || (_templateObject11 = (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)(), _codeMarkStyles.codeMarkStyles, _styles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, listsStyles, _rule.ruleStyles, _mediaStyles.mediaStyles, (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, {
|
|
151
153
|
exposure: false
|
|
152
154
|
}) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
153
155
|
exposure: false
|
|
@@ -161,7 +163,7 @@ var contentStyles = function contentStyles() {
|
|
|
161
163
|
exposure: false
|
|
162
164
|
}) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
163
165
|
exposure: false
|
|
164
|
-
}) && !(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, (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, _embedCardStyles.embedCardStyles, _styles.unsupportedStyles,
|
|
166
|
+
}) && !(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, (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, _embedCardStyles.embedCardStyles, _styles.unsupportedStyles, _resizerStyles.resizerStyles, fixBlockControlStylesSSR(), !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject12 || (_templateObject12 = (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);
|
|
165
167
|
};
|
|
166
168
|
var CommentEditorMargin = 14;
|
|
167
169
|
|
|
@@ -233,7 +235,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
233
235
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
234
236
|
(0, _layout.layoutBaseStyles)(),
|
|
235
237
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
236
|
-
(0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld,
|
|
238
|
+
(0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld, (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) &&
|
|
239
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
240
|
+
_resizerStyles.pragmaticResizerStyles,
|
|
237
241
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
238
242
|
_aiPanel.aiPanelBaseStyles,
|
|
239
243
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.codeMarkStyles = void 0;
|
|
7
|
+
var _react = require("@emotion/react");
|
|
8
|
+
// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
9
|
+
|
|
10
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
11
|
+
var codeMarkStyles = exports.codeMarkStyles = (0, _react.css)({
|
|
12
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
13
|
+
'.code': {
|
|
14
|
+
'--ds--code--bg-color': "var(--ds-background-neutral, #091E420F)",
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
16
|
+
display: 'inline',
|
|
17
|
+
padding: '2px 0.5ch',
|
|
18
|
+
backgroundColor: "var(--ds--code--bg-color,".concat("var(--ds-background-neutral, #091E420F)", ")"),
|
|
19
|
+
borderRadius: "var(--ds-border-radius, 3px)",
|
|
20
|
+
borderStyle: 'none',
|
|
21
|
+
boxDecorationBreak: 'clone',
|
|
22
|
+
color: "var(--ds-text, #172B4D)",
|
|
23
|
+
fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
24
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
25
|
+
fontSize: '0.875em',
|
|
26
|
+
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
27
|
+
overflow: 'auto',
|
|
28
|
+
overflowWrap: 'break-word',
|
|
29
|
+
whiteSpace: 'pre-wrap'
|
|
30
|
+
}
|
|
31
|
+
});
|
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.resizerStyles = exports.resizerItemClassName = exports.resizerHoverZoneClassName = exports.resizerHandleTrackClassName = exports.resizerHandleThumbClassName = exports.resizerHandleClassName = exports.resizerExtendedZone = exports.resizerDangerClassName = exports.pragmaticResizerStyles = exports.handleWrapperClass = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
// eslint-disable-line
|
|
11
|
+
|
|
12
|
+
var resizerItemClassName = exports.resizerItemClassName = 'resizer-item';
|
|
13
|
+
var resizerHoverZoneClassName = exports.resizerHoverZoneClassName = 'resizer-hover-zone';
|
|
14
|
+
var resizerExtendedZone = exports.resizerExtendedZone = 'resizer-is-extended';
|
|
15
|
+
var resizerHandleClassName = exports.resizerHandleClassName = 'resizer-handle';
|
|
16
|
+
var resizerHandleTrackClassName = exports.resizerHandleTrackClassName = "".concat(resizerHandleClassName, "-track");
|
|
17
|
+
var resizerHandleThumbClassName = exports.resizerHandleThumbClassName = "".concat(resizerHandleClassName, "-thumb");
|
|
18
|
+
var resizerDangerClassName = exports.resizerDangerClassName = "".concat(resizerHandleClassName, "-danger");
|
|
19
|
+
var handleWrapperClass = exports.handleWrapperClass = 'resizer-handle-wrapper';
|
|
20
|
+
|
|
21
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766, Seems perfectly safe to autofix, but comments would be lost…
|
|
22
|
+
var resizerStyles = exports.resizerStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(resizerItemClassName), (0, _defineProperty2.default)({
|
|
23
|
+
willChange: 'width',
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
25
|
+
'&:hover, &.display-handle': (0, _defineProperty2.default)({}, "& > .".concat(handleWrapperClass, " > .").concat(resizerHandleClassName), {
|
|
26
|
+
visibility: 'visible',
|
|
27
|
+
opacity: 1
|
|
28
|
+
}),
|
|
29
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
30
|
+
'&.is-resizing': (0, _defineProperty2.default)({}, "& .".concat(resizerHandleThumbClassName), {
|
|
31
|
+
background: "var(--ds-border-focused, #388BFF)"
|
|
32
|
+
})
|
|
33
|
+
}, "&.".concat(resizerDangerClassName), (0, _defineProperty2.default)({}, "& .".concat(resizerHandleThumbClassName), {
|
|
34
|
+
transition: 'none',
|
|
35
|
+
background: "var(--ds-icon-danger, #C9372C)"
|
|
36
|
+
}))), ".".concat(resizerHandleClassName), {
|
|
37
|
+
display: 'flex',
|
|
38
|
+
visibility: 'hidden',
|
|
39
|
+
opacity: 0,
|
|
40
|
+
flexDirection: 'column',
|
|
41
|
+
justifyContent: 'center',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
width: 7,
|
|
44
|
+
transition: 'visibility 0.2s, opacity 0.2s',
|
|
45
|
+
// NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles
|
|
46
|
+
// into the tooltip
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
48
|
+
"& div[role='presentation']": {
|
|
49
|
+
width: '100%',
|
|
50
|
+
height: '100%',
|
|
51
|
+
display: 'flex',
|
|
52
|
+
flexDirection: 'column',
|
|
53
|
+
justifyContent: 'center',
|
|
54
|
+
alignItems: 'center',
|
|
55
|
+
marginTop: "var(--ds-space-negative-200, -16px)",
|
|
56
|
+
whiteSpace: 'normal'
|
|
57
|
+
},
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
59
|
+
'&.left': {
|
|
60
|
+
alignItems: 'flex-start'
|
|
61
|
+
},
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
63
|
+
'&.right': {
|
|
64
|
+
alignItems: 'flex-end'
|
|
65
|
+
},
|
|
66
|
+
// Handle Sizing
|
|
67
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
68
|
+
'&.small': (0, _defineProperty2.default)({}, "& .".concat(resizerHandleThumbClassName), {
|
|
69
|
+
height: 43
|
|
70
|
+
}),
|
|
71
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
72
|
+
'&.medium': (0, _defineProperty2.default)({}, "& .".concat(resizerHandleThumbClassName), {
|
|
73
|
+
height: 64
|
|
74
|
+
}),
|
|
75
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
76
|
+
'&.large': (0, _defineProperty2.default)({}, "& .".concat(resizerHandleThumbClassName), {
|
|
77
|
+
height: 96
|
|
78
|
+
}),
|
|
79
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
80
|
+
'&.clamped': (0, _defineProperty2.default)({}, "& .".concat(resizerHandleThumbClassName), {
|
|
81
|
+
height: 'clamp(43px, calc(100% - 32px), 96px)'
|
|
82
|
+
}),
|
|
83
|
+
// Handle Alignment
|
|
84
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
85
|
+
'&.sticky': (0, _defineProperty2.default)({}, "& .".concat(resizerHandleThumbClassName), {
|
|
86
|
+
position: 'sticky',
|
|
87
|
+
top: "var(--ds-space-150, 12px)",
|
|
88
|
+
bottom: "var(--ds-space-150, 12px)"
|
|
89
|
+
}),
|
|
90
|
+
'&:hover': (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "& .".concat(resizerHandleThumbClassName), {
|
|
91
|
+
background: "var(--ds-border-focused, #388BFF)"
|
|
92
|
+
}), "& .".concat(resizerHandleTrackClassName), {
|
|
93
|
+
visibility: 'visible',
|
|
94
|
+
opacity: 0.5
|
|
95
|
+
})
|
|
96
|
+
}), ".".concat(resizerHandleThumbClassName), {
|
|
97
|
+
content: "' '",
|
|
98
|
+
display: 'flex',
|
|
99
|
+
width: 3,
|
|
100
|
+
margin: "0 ".concat("var(--ds-space-025, 2px)"),
|
|
101
|
+
height: 64,
|
|
102
|
+
transition: 'background-color 0.2s',
|
|
103
|
+
borderRadius: 6,
|
|
104
|
+
border: 0,
|
|
105
|
+
padding: 0,
|
|
106
|
+
zIndex: 2,
|
|
107
|
+
outline: 'none',
|
|
108
|
+
minHeight: 24,
|
|
109
|
+
background: "var(--ds-border, #091E4224)",
|
|
110
|
+
'&:hover': {
|
|
111
|
+
cursor: 'col-resize'
|
|
112
|
+
},
|
|
113
|
+
'&:focus': {
|
|
114
|
+
background: "var(--ds-border-selected, #0C66E4)",
|
|
115
|
+
'&::after': {
|
|
116
|
+
content: "''",
|
|
117
|
+
position: 'absolute',
|
|
118
|
+
top: "var(--ds-space-negative-050, -4px)",
|
|
119
|
+
right: "var(--ds-space-negative-050, -4px)",
|
|
120
|
+
bottom: "var(--ds-space-negative-050, -4px)",
|
|
121
|
+
left: "var(--ds-space-negative-050, -4px)",
|
|
122
|
+
border: "2px solid ".concat("var(--ds-border-focused, #388BFF)"),
|
|
123
|
+
borderRadius: 'inherit',
|
|
124
|
+
zIndex: -1
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}), ".".concat(resizerHandleTrackClassName), {
|
|
128
|
+
visibility: 'hidden',
|
|
129
|
+
position: 'absolute',
|
|
130
|
+
width: 7,
|
|
131
|
+
height: 'calc(100% - 40px)',
|
|
132
|
+
borderRadius: 4,
|
|
133
|
+
opacity: 0,
|
|
134
|
+
transition: 'background-color 0.2s, visibility 0.2s, opacity 0.2s',
|
|
135
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
136
|
+
'&.none': {
|
|
137
|
+
background: 'none'
|
|
138
|
+
},
|
|
139
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
140
|
+
'&.shadow': {
|
|
141
|
+
background: "var(--ds-background-selected, #E9F2FF)"
|
|
142
|
+
},
|
|
143
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
144
|
+
'&.full-height': {
|
|
145
|
+
background: "var(--ds-background-selected, #E9F2FF)",
|
|
146
|
+
height: '100%',
|
|
147
|
+
minHeight: 36
|
|
148
|
+
}
|
|
149
|
+
}), '.ak-editor-selected-node', (0, _defineProperty2.default)({}, "& .".concat(resizerHandleThumbClassName), {
|
|
150
|
+
background: "var(--ds-border-focused, #388BFF)"
|
|
151
|
+
})), ".ak-editor-no-interaction .ak-editor-selected-node .".concat(resizerHandleClassName, ":not(:hover) .").concat(resizerHandleThumbClassName), {
|
|
152
|
+
background: "var(--ds-border, #091E4224)"
|
|
153
|
+
}), ".".concat(resizerHoverZoneClassName), (0, _defineProperty2.default)({
|
|
154
|
+
position: 'relative',
|
|
155
|
+
display: 'inline-block',
|
|
156
|
+
width: '100%'
|
|
157
|
+
}, "&.".concat(resizerExtendedZone), {
|
|
158
|
+
padding: "0 ".concat("var(--ds-space-150, 12px)"),
|
|
159
|
+
left: "var(--ds-space-negative-150, -12px)"
|
|
160
|
+
})), "table .".concat(resizerHoverZoneClassName, ", table .").concat(resizerHoverZoneClassName, ".").concat(resizerExtendedZone), {
|
|
161
|
+
padding: 'unset',
|
|
162
|
+
left: 'unset'
|
|
163
|
+
}));
|
|
164
|
+
|
|
165
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
166
|
+
var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
|
|
167
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
168
|
+
'.pm-breakout-resize-handle': {
|
|
169
|
+
position: 'relative',
|
|
170
|
+
display: 'flex',
|
|
171
|
+
alignItems: 'center',
|
|
172
|
+
justifyContent: 'center',
|
|
173
|
+
height: '100%',
|
|
174
|
+
width: 7,
|
|
175
|
+
alignSelf: 'center',
|
|
176
|
+
gridRow: 1,
|
|
177
|
+
gridColumn: 1,
|
|
178
|
+
cursor: 'col-resize',
|
|
179
|
+
borderRadius: 4,
|
|
180
|
+
transition: 'background-color 0.2s, visibility 0.2s, opacity 0.2s',
|
|
181
|
+
'&:hover': {
|
|
182
|
+
background: "var(--ds-background-selected, #E9F2FF)",
|
|
183
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
184
|
+
'.pm-breakout-resize-handle-inner': {
|
|
185
|
+
background: "var(--ds-border-focused, #388BFF)"
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
190
|
+
'.pm-breakout-resize-handle-left': {
|
|
191
|
+
justifySelf: 'start',
|
|
192
|
+
left: -20
|
|
193
|
+
},
|
|
194
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
195
|
+
'.pm-breakout-resize-handle-right': {
|
|
196
|
+
justifySelf: 'end',
|
|
197
|
+
right: -20
|
|
198
|
+
},
|
|
199
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
200
|
+
'.pm-breakout-resize-handle-inner': {
|
|
201
|
+
minWidth: 3,
|
|
202
|
+
// copied from resizeStyles.clamped
|
|
203
|
+
height: 'clamp(27px, calc(100% - 32px), 96px)',
|
|
204
|
+
background: "var(--ds-border, #091E4224)",
|
|
205
|
+
borderRadius: 6,
|
|
206
|
+
// sticky styles
|
|
207
|
+
position: 'sticky',
|
|
208
|
+
top: "var(--ds-space-150, 12px)",
|
|
209
|
+
bottom: "var(--ds-space-150, 12px)"
|
|
210
|
+
}
|
|
211
|
+
});
|
|
@@ -65,6 +65,16 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
65
65
|
if (props.hasHadInteraction && fg('platform_editor_no_cursor_on_live_doc_init')) {
|
|
66
66
|
interactionClassName = props.hasHadInteraction ? 'ak-editor-has-interaction' : 'ak-editor-no-interaction';
|
|
67
67
|
}
|
|
68
|
+
const shouldSetHiddenDataAttribute = () => {
|
|
69
|
+
// When platform_editor_offline_banner_toolbar_position is enabled we use a different method to
|
|
70
|
+
// determine if the toolbar is hidden from outside of the editor, which doesn't require setting
|
|
71
|
+
// data-editor-primary-toolbar-hidden on the content area
|
|
72
|
+
// NOTE: When tidying, this function and the data attribute can be removed
|
|
73
|
+
if (!props.isEditorToolbarHidden || fg('platform_editor_offline_banner_toolbar_position')) {
|
|
74
|
+
return false;
|
|
75
|
+
}
|
|
76
|
+
return editorExperiment('platform_editor_controls', 'variant1');
|
|
77
|
+
};
|
|
68
78
|
return jsx("div", {
|
|
69
79
|
css: [
|
|
70
80
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
@@ -108,7 +118,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
108
118
|
,
|
|
109
119
|
className: "ak-editor-content-area-region",
|
|
110
120
|
"data-editor-editable-content": true,
|
|
111
|
-
"data-editor-primary-toolbar-hidden":
|
|
121
|
+
"data-editor-primary-toolbar-hidden": shouldSetHiddenDataAttribute() ? 'true' : undefined,
|
|
112
122
|
role: "region",
|
|
113
123
|
"aria-label": props.intl.formatMessage(messages.editableContentLabel),
|
|
114
124
|
ref: contentAreaRef
|
|
@@ -283,8 +283,7 @@ export const layoutStyles = viewMode => css`
|
|
|
283
283
|
/* Ignored via go/ees007
|
|
284
284
|
TODO: Migrate away from gridSize
|
|
285
285
|
Recommendation: Replace directly with 7px */
|
|
286
|
-
margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)}px
|
|
287
|
-
0;
|
|
286
|
+
margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + (fg('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)}px 0;
|
|
288
287
|
transition: border-color 0.3s ${akEditorSwoopCubicBezier};
|
|
289
288
|
cursor: ${viewMode === 'view' ? 'default' : 'pointer'};
|
|
290
289
|
|
|
@@ -15,7 +15,7 @@ import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-co
|
|
|
15
15
|
import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
|
|
16
16
|
import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
|
|
17
17
|
import { gapCursorStyles } from '@atlaskit/editor-common/selection';
|
|
18
|
-
import { CodeBlockSharedCssClassName, GRID_GUTTER, SmartCardSharedCssClassName, blockMarksSharedStyles, codeBlockInListSafariFix,
|
|
18
|
+
import { CodeBlockSharedCssClassName, GRID_GUTTER, SmartCardSharedCssClassName, blockMarksSharedStyles, codeBlockInListSafariFix, dateSharedStyle, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles, paragraphSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
|
|
19
19
|
import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
|
|
20
20
|
import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
|
|
21
21
|
import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
|
|
@@ -37,10 +37,12 @@ import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh as vani
|
|
|
37
37
|
import { aiPanelBaseStyles, aiPanelDarkStyles } from './styles/ai-panel';
|
|
38
38
|
import { annotationStyles } from './styles/annotationStyles';
|
|
39
39
|
import { backgroundColorStyles } from './styles/backgroundColorStyles';
|
|
40
|
+
import { codeMarkStyles } from './styles/codeMarkStyles';
|
|
40
41
|
import { embedCardStyles } from './styles/embedCardStyles';
|
|
41
42
|
import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
|
|
42
43
|
import { linkStyles, linkStylesOld } from './styles/link';
|
|
43
44
|
import { mediaStyles } from './styles/mediaStyles';
|
|
45
|
+
import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
|
|
44
46
|
import { ruleStyles } from './styles/rule';
|
|
45
47
|
const vanillaMentionsStyles = css({
|
|
46
48
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
@@ -397,7 +399,7 @@ const contentStyles = () => css`
|
|
|
397
399
|
|
|
398
400
|
${blocktypeStyles()}
|
|
399
401
|
|
|
400
|
-
${
|
|
402
|
+
${codeMarkStyles}
|
|
401
403
|
|
|
402
404
|
${textColorStyles}
|
|
403
405
|
|
|
@@ -485,8 +487,6 @@ const contentStyles = () => css`
|
|
|
485
487
|
|
|
486
488
|
${resizerStyles}
|
|
487
489
|
|
|
488
|
-
${pragmaticResizerStyles()}
|
|
489
|
-
|
|
490
490
|
${fixBlockControlStylesSSR()}
|
|
491
491
|
|
|
492
492
|
.panelView-content-wrap {
|
|
@@ -628,7 +628,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
628
628
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
629
629
|
layoutBaseStyles(),
|
|
630
630
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
631
|
-
fg('platform_editor_hyperlink_underline') ? linkStyles : linkStylesOld,
|
|
631
|
+
fg('platform_editor_hyperlink_underline') ? linkStyles : linkStylesOld, editorExperiment('platform_editor_breakout_resizing', true) &&
|
|
632
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
633
|
+
pragmaticResizerStyles,
|
|
632
634
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
633
635
|
aiPanelBaseStyles,
|
|
634
636
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
2
|
-
import { css, keyframes } from
|
|
2
|
+
import { css, keyframes } from '@emotion/react';
|
|
3
3
|
/**
|
|
4
4
|
* aiPanelStyles
|
|
5
5
|
* was imported from packages/editor/editor-core/src/ui/ContentStyles/ai-panels.ts
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
2
|
+
|
|
3
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
4
|
+
export const codeMarkStyles = css({
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
6
|
+
'.code': {
|
|
7
|
+
'--ds--code--bg-color': "var(--ds-background-neutral, #091E420F)",
|
|
8
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
9
|
+
display: 'inline',
|
|
10
|
+
padding: '2px 0.5ch',
|
|
11
|
+
backgroundColor: `var(--ds--code--bg-color,${"var(--ds-background-neutral, #091E420F)"})`,
|
|
12
|
+
borderRadius: "var(--ds-border-radius, 3px)",
|
|
13
|
+
borderStyle: 'none',
|
|
14
|
+
boxDecorationBreak: 'clone',
|
|
15
|
+
color: "var(--ds-text, #172B4D)",
|
|
16
|
+
fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
17
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
18
|
+
fontSize: '0.875em',
|
|
19
|
+
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
20
|
+
overflow: 'auto',
|
|
21
|
+
overflowWrap: 'break-word',
|
|
22
|
+
whiteSpace: 'pre-wrap'
|
|
23
|
+
}
|
|
24
|
+
});
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
2
|
-
import { css } from
|
|
3
|
-
import { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from
|
|
4
|
-
import { TableCssClassName } from
|
|
5
|
-
import { tableMarginFullWidthMode } from
|
|
6
|
-
import { gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle, akEditorSelectedBorderSize, akEditorDeleteBackground, akEditorDeleteBorder, akLayoutGutterOffset, akEditorSwoopCubicBezier } from
|
|
7
|
-
import { fg } from
|
|
8
|
-
import { editorExperiment } from
|
|
2
|
+
import { css } from '@emotion/react';
|
|
3
|
+
import { LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
|
|
4
|
+
import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
|
|
5
|
+
import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
|
|
6
|
+
import { gridMediumMaxWidth, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle, akEditorSelectedBorderSize, akEditorDeleteBackground, akEditorDeleteBorder, akLayoutGutterOffset, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
9
9
|
const columnLayoutSharedStyle = css({
|
|
10
10
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
11
11
|
'[data-layout-section]': {
|