@atlaskit/editor-core 207.7.0 → 207.8.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 +17 -0
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +11 -3
- package/dist/cjs/ui/EditorContentContainer/styles/paragraphStyles.js +54 -0
- package/dist/cjs/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js +73 -0
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +10 -4
- package/dist/es2019/ui/EditorContentContainer/styles/paragraphStyles.js +47 -0
- package/dist/es2019/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js +73 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +11 -3
- package/dist/esm/ui/EditorContentContainer/styles/paragraphStyles.js +47 -0
- package/dist/esm/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js +65 -0
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/EditorContentContainer/styles/paragraphStyles.d.ts +3 -0
- package/dist/types/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.d.ts +7 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/paragraphStyles.d.ts +3 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.d.ts +7 -0
- package/package.json +10 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 207.8.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#160606](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160606)
|
|
8
|
+
[`cd15d7ce813fb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cd15d7ce813fb) -
|
|
9
|
+
[https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor paragraph CSS in
|
|
10
|
+
static emotion
|
|
11
|
+
- [#160652](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160652)
|
|
12
|
+
[`907e9afb86169`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/907e9afb86169) -
|
|
13
|
+
[https://product-fabric.atlassian.net/browse/ED-27746](ED-27746) - rewrite editor tasks and
|
|
14
|
+
decisions CSS in static emotion
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 207.7.0
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
|
@@ -40,8 +40,10 @@ var _firstBlockNodeStyles = require("./styles/firstBlockNodeStyles");
|
|
|
40
40
|
var _layout = require("./styles/layout");
|
|
41
41
|
var _link = require("./styles/link");
|
|
42
42
|
var _mediaStyles = require("./styles/mediaStyles");
|
|
43
|
+
var _paragraphStyles = require("./styles/paragraphStyles");
|
|
43
44
|
var _resizerStyles = require("./styles/resizerStyles");
|
|
44
45
|
var _rule = require("./styles/rule");
|
|
46
|
+
var _tasksAndDecisionsStyles = require("./styles/tasksAndDecisionsStyles");
|
|
45
47
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
46
48
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
47
49
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
@@ -140,13 +142,13 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
140
142
|
|
|
141
143
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
142
144
|
var contentStyles = function contentStyles() {
|
|
143
|
-
return (0, _react2.css)(_templateObject6 || (_templateObject6 = (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\
|
|
145
|
+
return (0, _react2.css)(_templateObject6 || (_templateObject6 = (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\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 .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, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject7 || (_templateObject7 = (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)(_templateObject8 || (_templateObject8 = (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)(_templateObject9 || (_templateObject9 = (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, _codeBlockStyles.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, _panel.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
144
146
|
exposure: false
|
|
145
147
|
}) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
146
148
|
exposure: false
|
|
147
149
|
}) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
148
150
|
exposure: false
|
|
149
|
-
}) ? emojiStyles : reactEmojiStyles, emojiStyles,
|
|
151
|
+
}) ? emojiStyles : reactEmojiStyles, emojiStyles, _tasksAndDecisionsStyles.tasksAndDecisionsStyles, _styles.gridStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
150
152
|
exposure: false
|
|
151
153
|
}) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
152
154
|
exposure: false
|
|
@@ -224,7 +226,13 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
224
226
|
ref: ref,
|
|
225
227
|
css: [contentStyles(),
|
|
226
228
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
227
|
-
(0, _layout.layoutBaseStyles)(),
|
|
229
|
+
(0, _layout.layoutBaseStyles)(), (0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _platformFeatureFlags.fg)('platform-dst-jira-web-fonts') || (0, _platformFeatureFlags.fg)('confluence_typography_refreshed') || (0, _platformFeatureFlags.fg)('atlas_editor_typography_refreshed') ?
|
|
230
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
231
|
+
_paragraphStyles.paragraphStylesUGCRefreshed :
|
|
232
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
233
|
+
_paragraphStyles.paragraphStylesUGCModernized :
|
|
234
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
235
|
+
_paragraphStyles.paragraphStylesOld,
|
|
228
236
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
229
237
|
(0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld, (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) &&
|
|
230
238
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.paragraphStylesUGCRefreshed = exports.paragraphStylesUGCModernized = exports.paragraphStylesOld = void 0;
|
|
7
|
+
var _react = require("@emotion/react");
|
|
8
|
+
// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
9
|
+
|
|
10
|
+
var blockNodesVerticalMargin = '0.75rem';
|
|
11
|
+
|
|
12
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
13
|
+
var paragraphStylesUGCRefreshed = exports.paragraphStylesUGCRefreshed = (0, _react.css)({
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
15
|
+
'.ProseMirror p': {
|
|
16
|
+
// The `editor.font.body` token is used for the UGC typography theme.
|
|
17
|
+
// We don't use `editorUGCToken('editor.font.body')` here because we want to build this styles statically.
|
|
18
|
+
// See platform/packages/editor/editor-common/src/ugc-tokens/get-editor-ugc-token.tsx
|
|
19
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
20
|
+
font: 'normal 400 1em/1.714 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
21
|
+
marginTop: blockNodesVerticalMargin,
|
|
22
|
+
marginBottom: 0
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
27
|
+
var paragraphStylesUGCModernized = exports.paragraphStylesUGCModernized = (0, _react.css)({
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
29
|
+
'.ProseMirror p': {
|
|
30
|
+
// The `editor.font.body` token is used for the UGC typography theme.
|
|
31
|
+
// We don't use `editorUGCToken('editor.font.body')` here because we want to build this styles statically.
|
|
32
|
+
// See platform/packages/editor/editor-common/src/ugc-tokens/get-editor-ugc-token.tsx
|
|
33
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
34
|
+
font: 'normal 400 1em/1.714 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
35
|
+
marginTop: blockNodesVerticalMargin,
|
|
36
|
+
marginBottom: 0
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
41
|
+
var paragraphStylesOld = exports.paragraphStylesOld = (0, _react.css)({
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
43
|
+
'.ProseMirror p': {
|
|
44
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
45
|
+
fontSize: '1em',
|
|
46
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
47
|
+
lineHeight: 1.714,
|
|
48
|
+
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
49
|
+
marginTop: blockNodesVerticalMargin,
|
|
50
|
+
marginBottom: 0,
|
|
51
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
52
|
+
letterSpacing: '-0.005em'
|
|
53
|
+
}
|
|
54
|
+
});
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.tasksAndDecisionsStyles = exports.TaskDecisionSharedCssClassName = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
11
|
+
|
|
12
|
+
var akEditorLineHeight = 1.714;
|
|
13
|
+
var TaskDecisionSharedCssClassName = exports.TaskDecisionSharedCssClassName = {
|
|
14
|
+
DECISION_CONTAINER: 'decisionItemView-content-wrap',
|
|
15
|
+
TASK_CONTAINER: 'taskItemView-content-wrap',
|
|
16
|
+
TASK_ITEM: 'task-item',
|
|
17
|
+
TASK_CHECKBOX_CONTAINER: 'task-item-checkbox-wrap'
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
21
|
+
var tasksAndDecisionsStyles = exports.tasksAndDecisionsStyles = (0, _react.css)({
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
23
|
+
'.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".taskItemView-content-wrap, .".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
|
|
24
|
+
position: 'relative',
|
|
25
|
+
minWidth: 48
|
|
26
|
+
}), ".".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
|
|
27
|
+
marginTop: 0
|
|
28
|
+
}), ".".concat(TaskDecisionSharedCssClassName.TASK_CONTAINER), {
|
|
29
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
30
|
+
"span[contenteditable='false']": {
|
|
31
|
+
height: "".concat(akEditorLineHeight, "em")
|
|
32
|
+
}
|
|
33
|
+
}), ".".concat(TaskDecisionSharedCssClassName.TASK_ITEM), {
|
|
34
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
35
|
+
lineHeight: akEditorLineHeight
|
|
36
|
+
}),
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
38
|
+
'div[data-task-local-id]': {
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
40
|
+
"span[contenteditable='false']": {
|
|
41
|
+
height: "".concat(akEditorLineHeight, "em")
|
|
42
|
+
},
|
|
43
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
44
|
+
"span[contenteditable='false'] + div": {
|
|
45
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
46
|
+
lineHeight: "".concat(akEditorLineHeight, "em")
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
50
|
+
'div[data-task-list-local-id]': {
|
|
51
|
+
margin: "var(--ds-space-150, 12px)".concat(" 0 0 0"),
|
|
52
|
+
// If task item is not first in the list then set margin top to 4px.
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
54
|
+
'div + div': {
|
|
55
|
+
marginTop: "var(--ds-space-050, 4px)"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
// If task list is not first in the document then set margin top to 4px.
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
60
|
+
'div[data-task-list-local-id] div[data-task-list-local-id]': {
|
|
61
|
+
marginTop: "var(--ds-space-050, 4px)",
|
|
62
|
+
marginLeft: "var(--ds-space-300, 24px)"
|
|
63
|
+
},
|
|
64
|
+
// When action list is inside panel
|
|
65
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
66
|
+
'.ak-editor-panel__content': {
|
|
67
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
68
|
+
'> div[data-task-list-local-id]:first-child': {
|
|
69
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
70
|
+
margin: '0 !important'
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
});
|
|
@@ -13,7 +13,7 @@ import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/edi
|
|
|
13
13
|
import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
|
|
14
14
|
import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
|
|
15
15
|
import { gapCursorStyles } from '@atlaskit/editor-common/selection';
|
|
16
|
-
import { GRID_GUTTER, blockMarksSharedStyles, dateSharedStyle, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles,
|
|
16
|
+
import { GRID_GUTTER, blockMarksSharedStyles, dateSharedStyle, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
|
|
17
17
|
import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
|
|
18
18
|
import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
|
|
19
19
|
import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
|
|
@@ -41,8 +41,10 @@ import { firstBlockNodeStyles, firstBlockNodeStylesOld } from './styles/firstBlo
|
|
|
41
41
|
import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
|
|
42
42
|
import { linkStyles, linkStylesOld } from './styles/link';
|
|
43
43
|
import { mediaStyles } from './styles/mediaStyles';
|
|
44
|
+
import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
|
|
44
45
|
import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
|
|
45
46
|
import { ruleStyles } from './styles/rule';
|
|
47
|
+
import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
|
|
46
48
|
const vanillaMentionsStyles = css({
|
|
47
49
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
48
50
|
'.editor-mention-primitive': {
|
|
@@ -276,8 +278,6 @@ const contentStyles = () => css`
|
|
|
276
278
|
|
|
277
279
|
${whitespaceSharedStyles};
|
|
278
280
|
|
|
279
|
-
${paragraphSharedStyles()};
|
|
280
|
-
|
|
281
281
|
${listsSharedStyles};
|
|
282
282
|
|
|
283
283
|
${indentationSharedStyles};
|
|
@@ -574,7 +574,13 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
574
574
|
ref: ref,
|
|
575
575
|
css: [contentStyles(),
|
|
576
576
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
577
|
-
layoutBaseStyles(),
|
|
577
|
+
layoutBaseStyles(), fg('platform_editor_typography_ugc') ? fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed') ?
|
|
578
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
579
|
+
paragraphStylesUGCRefreshed :
|
|
580
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
581
|
+
paragraphStylesUGCModernized :
|
|
582
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
583
|
+
paragraphStylesOld,
|
|
578
584
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
579
585
|
fg('platform_editor_hyperlink_underline') ? linkStyles : linkStylesOld, editorExperiment('platform_editor_breakout_resizing', true) &&
|
|
580
586
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
2
|
+
|
|
3
|
+
const blockNodesVerticalMargin = '0.75rem';
|
|
4
|
+
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
6
|
+
export const paragraphStylesUGCRefreshed = css({
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
8
|
+
'.ProseMirror p': {
|
|
9
|
+
// The `editor.font.body` token is used for the UGC typography theme.
|
|
10
|
+
// We don't use `editorUGCToken('editor.font.body')` here because we want to build this styles statically.
|
|
11
|
+
// See platform/packages/editor/editor-common/src/ugc-tokens/get-editor-ugc-token.tsx
|
|
12
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
13
|
+
font: 'normal 400 1em/1.714 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
14
|
+
marginTop: blockNodesVerticalMargin,
|
|
15
|
+
marginBottom: 0
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
20
|
+
export const paragraphStylesUGCModernized = css({
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
22
|
+
'.ProseMirror p': {
|
|
23
|
+
// The `editor.font.body` token is used for the UGC typography theme.
|
|
24
|
+
// We don't use `editorUGCToken('editor.font.body')` here because we want to build this styles statically.
|
|
25
|
+
// See platform/packages/editor/editor-common/src/ugc-tokens/get-editor-ugc-token.tsx
|
|
26
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
27
|
+
font: 'normal 400 1em/1.714 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
28
|
+
marginTop: blockNodesVerticalMargin,
|
|
29
|
+
marginBottom: 0
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
34
|
+
export const paragraphStylesOld = css({
|
|
35
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
36
|
+
'.ProseMirror p': {
|
|
37
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
38
|
+
fontSize: '1em',
|
|
39
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
40
|
+
lineHeight: 1.714,
|
|
41
|
+
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
42
|
+
marginTop: blockNodesVerticalMargin,
|
|
43
|
+
marginBottom: 0,
|
|
44
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
45
|
+
letterSpacing: '-0.005em'
|
|
46
|
+
}
|
|
47
|
+
});
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
2
|
+
|
|
3
|
+
const akEditorLineHeight = 1.714;
|
|
4
|
+
export const TaskDecisionSharedCssClassName = {
|
|
5
|
+
DECISION_CONTAINER: 'decisionItemView-content-wrap',
|
|
6
|
+
TASK_CONTAINER: 'taskItemView-content-wrap',
|
|
7
|
+
TASK_ITEM: 'task-item',
|
|
8
|
+
TASK_CHECKBOX_CONTAINER: 'task-item-checkbox-wrap'
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
12
|
+
export const tasksAndDecisionsStyles = css({
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
14
|
+
'.ProseMirror': {
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
16
|
+
[`.taskItemView-content-wrap, .${TaskDecisionSharedCssClassName.DECISION_CONTAINER}`]: {
|
|
17
|
+
position: 'relative',
|
|
18
|
+
minWidth: 48
|
|
19
|
+
},
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
21
|
+
[`.${TaskDecisionSharedCssClassName.DECISION_CONTAINER}`]: {
|
|
22
|
+
marginTop: 0
|
|
23
|
+
},
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
25
|
+
[`.${TaskDecisionSharedCssClassName.TASK_CONTAINER}`]: {
|
|
26
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
27
|
+
"span[contenteditable='false']": {
|
|
28
|
+
height: `${akEditorLineHeight}em`
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
32
|
+
[`.${TaskDecisionSharedCssClassName.TASK_ITEM}`]: {
|
|
33
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
34
|
+
lineHeight: akEditorLineHeight
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
38
|
+
'div[data-task-local-id]': {
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
40
|
+
"span[contenteditable='false']": {
|
|
41
|
+
height: `${akEditorLineHeight}em`
|
|
42
|
+
},
|
|
43
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
44
|
+
"span[contenteditable='false'] + div": {
|
|
45
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
46
|
+
lineHeight: `${akEditorLineHeight}em`
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
50
|
+
'div[data-task-list-local-id]': {
|
|
51
|
+
margin: `${"var(--ds-space-150, 12px)"} 0 0 0`,
|
|
52
|
+
// If task item is not first in the list then set margin top to 4px.
|
|
53
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
54
|
+
'div + div': {
|
|
55
|
+
marginTop: "var(--ds-space-050, 4px)"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
// If task list is not first in the document then set margin top to 4px.
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
60
|
+
'div[data-task-list-local-id] div[data-task-list-local-id]': {
|
|
61
|
+
marginTop: "var(--ds-space-050, 4px)",
|
|
62
|
+
marginLeft: "var(--ds-space-300, 24px)"
|
|
63
|
+
},
|
|
64
|
+
// When action list is inside panel
|
|
65
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
66
|
+
'.ak-editor-panel__content': {
|
|
67
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
68
|
+
'> div[data-task-list-local-id]:first-child': {
|
|
69
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
70
|
+
margin: '0 !important'
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "207.
|
|
2
|
+
export const version = "207.8.0";
|
|
@@ -15,7 +15,7 @@ import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/edi
|
|
|
15
15
|
import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
|
|
16
16
|
import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
|
|
17
17
|
import { gapCursorStyles } from '@atlaskit/editor-common/selection';
|
|
18
|
-
import { GRID_GUTTER, blockMarksSharedStyles, dateSharedStyle, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles,
|
|
18
|
+
import { GRID_GUTTER, blockMarksSharedStyles, dateSharedStyle, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, 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';
|
|
@@ -43,8 +43,10 @@ import { firstBlockNodeStyles, firstBlockNodeStylesOld } from './styles/firstBlo
|
|
|
43
43
|
import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
|
|
44
44
|
import { linkStyles, linkStylesOld } from './styles/link';
|
|
45
45
|
import { mediaStyles } from './styles/mediaStyles';
|
|
46
|
+
import { paragraphStylesOld, paragraphStylesUGCModernized, paragraphStylesUGCRefreshed } from './styles/paragraphStyles';
|
|
46
47
|
import { resizerStyles, pragmaticResizerStyles } from './styles/resizerStyles';
|
|
47
48
|
import { ruleStyles } from './styles/rule';
|
|
49
|
+
import { tasksAndDecisionsStyles } from './styles/tasksAndDecisionsStyles';
|
|
48
50
|
var vanillaMentionsStyles = css({
|
|
49
51
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
50
52
|
'.editor-mention-primitive': {
|
|
@@ -134,7 +136,7 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
134
136
|
|
|
135
137
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
136
138
|
var contentStyles = function contentStyles() {
|
|
137
|
-
return css(_templateObject6 || (_templateObject6 = _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\n\t\t", ";\n\
|
|
139
|
+
return css(_templateObject6 || (_templateObject6 = _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\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 .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, whitespaceSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject8 || (_templateObject8 = _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(_templateObject9 || (_templateObject9 = _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(), codeMarkStyles, textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
138
140
|
exposure: false
|
|
139
141
|
}) && vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
140
142
|
exposure: false
|
|
@@ -218,7 +220,13 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
|
|
|
218
220
|
ref: ref,
|
|
219
221
|
css: [contentStyles(),
|
|
220
222
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
221
|
-
layoutBaseStyles(),
|
|
223
|
+
layoutBaseStyles(), fg('platform_editor_typography_ugc') ? fg('platform-dst-jira-web-fonts') || fg('confluence_typography_refreshed') || fg('atlas_editor_typography_refreshed') ?
|
|
224
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
225
|
+
paragraphStylesUGCRefreshed :
|
|
226
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
227
|
+
paragraphStylesUGCModernized :
|
|
228
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
229
|
+
paragraphStylesOld,
|
|
222
230
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
223
231
|
fg('platform_editor_hyperlink_underline') ? linkStyles : linkStylesOld, editorExperiment('platform_editor_breakout_resizing', true) &&
|
|
224
232
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
2
|
+
|
|
3
|
+
var blockNodesVerticalMargin = '0.75rem';
|
|
4
|
+
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
6
|
+
export var paragraphStylesUGCRefreshed = css({
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
8
|
+
'.ProseMirror p': {
|
|
9
|
+
// The `editor.font.body` token is used for the UGC typography theme.
|
|
10
|
+
// We don't use `editorUGCToken('editor.font.body')` here because we want to build this styles statically.
|
|
11
|
+
// See platform/packages/editor/editor-common/src/ugc-tokens/get-editor-ugc-token.tsx
|
|
12
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
13
|
+
font: 'normal 400 1em/1.714 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
14
|
+
marginTop: blockNodesVerticalMargin,
|
|
15
|
+
marginBottom: 0
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
20
|
+
export var paragraphStylesUGCModernized = css({
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
22
|
+
'.ProseMirror p': {
|
|
23
|
+
// The `editor.font.body` token is used for the UGC typography theme.
|
|
24
|
+
// We don't use `editorUGCToken('editor.font.body')` here because we want to build this styles statically.
|
|
25
|
+
// See platform/packages/editor/editor-common/src/ugc-tokens/get-editor-ugc-token.tsx
|
|
26
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
27
|
+
font: 'normal 400 1em/1.714 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
28
|
+
marginTop: blockNodesVerticalMargin,
|
|
29
|
+
marginBottom: 0
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
34
|
+
export var paragraphStylesOld = css({
|
|
35
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
36
|
+
'.ProseMirror p': {
|
|
37
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
38
|
+
fontSize: '1em',
|
|
39
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
40
|
+
lineHeight: 1.714,
|
|
41
|
+
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
42
|
+
marginTop: blockNodesVerticalMargin,
|
|
43
|
+
marginBottom: 0,
|
|
44
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
45
|
+
letterSpacing: '-0.005em'
|
|
46
|
+
}
|
|
47
|
+
});
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
3
|
+
|
|
4
|
+
var akEditorLineHeight = 1.714;
|
|
5
|
+
export var TaskDecisionSharedCssClassName = {
|
|
6
|
+
DECISION_CONTAINER: 'decisionItemView-content-wrap',
|
|
7
|
+
TASK_CONTAINER: 'taskItemView-content-wrap',
|
|
8
|
+
TASK_ITEM: 'task-item',
|
|
9
|
+
TASK_CHECKBOX_CONTAINER: 'task-item-checkbox-wrap'
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
13
|
+
export var tasksAndDecisionsStyles = css({
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
15
|
+
'.ProseMirror': _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".taskItemView-content-wrap, .".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
|
|
16
|
+
position: 'relative',
|
|
17
|
+
minWidth: 48
|
|
18
|
+
}), ".".concat(TaskDecisionSharedCssClassName.DECISION_CONTAINER), {
|
|
19
|
+
marginTop: 0
|
|
20
|
+
}), ".".concat(TaskDecisionSharedCssClassName.TASK_CONTAINER), {
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
22
|
+
"span[contenteditable='false']": {
|
|
23
|
+
height: "".concat(akEditorLineHeight, "em")
|
|
24
|
+
}
|
|
25
|
+
}), ".".concat(TaskDecisionSharedCssClassName.TASK_ITEM), {
|
|
26
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
27
|
+
lineHeight: akEditorLineHeight
|
|
28
|
+
}),
|
|
29
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
30
|
+
'div[data-task-local-id]': {
|
|
31
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
32
|
+
"span[contenteditable='false']": {
|
|
33
|
+
height: "".concat(akEditorLineHeight, "em")
|
|
34
|
+
},
|
|
35
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
36
|
+
"span[contenteditable='false'] + div": {
|
|
37
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
38
|
+
lineHeight: "".concat(akEditorLineHeight, "em")
|
|
39
|
+
}
|
|
40
|
+
},
|
|
41
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
42
|
+
'div[data-task-list-local-id]': {
|
|
43
|
+
margin: "var(--ds-space-150, 12px)".concat(" 0 0 0"),
|
|
44
|
+
// If task item is not first in the list then set margin top to 4px.
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
46
|
+
'div + div': {
|
|
47
|
+
marginTop: "var(--ds-space-050, 4px)"
|
|
48
|
+
}
|
|
49
|
+
},
|
|
50
|
+
// If task list is not first in the document then set margin top to 4px.
|
|
51
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
52
|
+
'div[data-task-list-local-id] div[data-task-list-local-id]': {
|
|
53
|
+
marginTop: "var(--ds-space-050, 4px)",
|
|
54
|
+
marginLeft: "var(--ds-space-300, 24px)"
|
|
55
|
+
},
|
|
56
|
+
// When action list is inside panel
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
58
|
+
'.ak-editor-panel__content': {
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
60
|
+
'> div[data-task-list-local-id]:first-child': {
|
|
61
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
62
|
+
margin: '0 !important'
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "207.
|
|
2
|
+
export var version = "207.8.0";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "207.
|
|
3
|
+
"version": "207.8.0",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -664,6 +664,15 @@
|
|
|
664
664
|
},
|
|
665
665
|
"dst-a11y__replace-anchor-with-link__editor": {
|
|
666
666
|
"type": "boolean"
|
|
667
|
+
},
|
|
668
|
+
"platform-dst-jira-web-fonts": {
|
|
669
|
+
"type": "boolean"
|
|
670
|
+
},
|
|
671
|
+
"confluence_typography_refreshed": {
|
|
672
|
+
"type": "boolean"
|
|
673
|
+
},
|
|
674
|
+
"atlas_editor_typography_refreshed": {
|
|
675
|
+
"type": "boolean"
|
|
667
676
|
}
|
|
668
677
|
},
|
|
669
678
|
"stricter": {
|