@atlaskit/editor-core 205.2.0 → 205.2.2
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 +18 -0
- package/dist/cjs/ui/ContentStyles/index.js +17 -3
- package/dist/cjs/ui/ContentStyles/tasks-and-decisions.js +122 -2
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/ContentStyles/index.js +20 -1
- package/dist/es2019/ui/ContentStyles/tasks-and-decisions.js +121 -1
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/ContentStyles/index.js +18 -4
- package/dist/esm/ui/ContentStyles/tasks-and-decisions.js +121 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/ContentStyles/tasks-and-decisions.d.ts +3 -0
- package/dist/types-ts4.5/ui/ContentStyles/tasks-and-decisions.d.ts +3 -0
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 205.2.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#135686](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135686)
|
|
8
|
+
[`fad3e236fffd3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fad3e236fffd3) -
|
|
9
|
+
migrate decision item node to vanillajs
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 205.2.1
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#137753](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/137753)
|
|
17
|
+
[`fe189a7e249e9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fe189a7e249e9) -
|
|
18
|
+
EDITOR-317 Cleans up feature gate `platform_editor_nested_tables_resizing`
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 205.2.0
|
|
4
22
|
|
|
5
23
|
### Minor Changes
|
|
@@ -127,6 +127,14 @@ var placeholderOverflowStyles = (0, _react2.css)({
|
|
|
127
127
|
textOverflow: 'ellipsis'
|
|
128
128
|
}
|
|
129
129
|
});
|
|
130
|
+
var placeholderWrapStyles = (0, _react2.css)({
|
|
131
|
+
// As part of controls work, we add placeholder `Search` to quick insert command
|
|
132
|
+
// This style is to prevent `/Search` being wrapped if it's triggered at the end of the line
|
|
133
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
134
|
+
'.ProseMirror mark[data-type-ahead-query="true"]:has(.placeholder-decoration-wrap)': {
|
|
135
|
+
whiteSpace: 'nowrap'
|
|
136
|
+
}
|
|
137
|
+
});
|
|
130
138
|
var firstBlockNodeStyles = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
|
|
131
139
|
var firstBlockNodeStylesNew = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
|
|
132
140
|
|
|
@@ -146,15 +154,21 @@ var fixBlockControlStylesSSR = exports.fixBlockControlStylesSSR = function fixBl
|
|
|
146
154
|
// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
|
|
147
155
|
var akEditorBreakpointForSmallDevice = "1266px";
|
|
148
156
|
var contentStyles = function contentStyles(props) {
|
|
149
|
-
return (0, _react2.css)(_templateObject10 || (_templateObject10 = (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: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\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.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
|
|
157
|
+
return (0, _react2.css)(_templateObject10 || (_templateObject10 = (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: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .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.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
|
|
150
158
|
theme: props.theme
|
|
151
|
-
}), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject11 || (_templateObject11 = (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)(_templateObject12 || (_templateObject12 = (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)(_templateObject13 || (_templateObject13 = (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, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
159
|
+
}), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject11 || (_templateObject11 = (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)(_templateObject12 || (_templateObject12 = (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)(_templateObject13 || (_templateObject13 = (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_controls_patch_3') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
152
160
|
exposure: false
|
|
153
161
|
}) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
154
162
|
exposure: false
|
|
155
163
|
}) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
156
164
|
exposure: false
|
|
157
|
-
}) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles,
|
|
165
|
+
}) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
166
|
+
exposure: false
|
|
167
|
+
}) && _tasksAndDecisions.vanillaTaskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
168
|
+
exposure: false
|
|
169
|
+
}) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
170
|
+
exposure: false
|
|
171
|
+
}) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _status.vanillaStatusStyles : null, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), fixBlockControlStylesSSR(), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject14 || (_templateObject14 = (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);
|
|
158
172
|
};
|
|
159
173
|
var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
|
|
160
174
|
return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
@@ -4,11 +4,131 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.taskDecisionStyles = void 0;
|
|
7
|
+
exports.vanillaTaskDecisionStyles = exports.vanillaTaskDecisionIconWithoutVisualRefresh = exports.vanillaTaskDecisionIconWithVisualRefresh = exports.taskDecisionStyles = void 0;
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
11
11
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
12
|
var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
13
13
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
14
|
-
var taskDecisionStyles = exports.taskDecisionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t[data-decision-wrapper] {\n\t\tcursor: pointer;\n\t}\n\n\t.", " > [data-decision-wrapper],\n\tol[data-node-type='decisionList'].", " {\n\t\tborder-radius: 4px;\n\t\t", "\n\t}\n\n\t.danger {\n\t\t.", ".", " > div {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\tcontent: none; /* reset the Blanket selection style */\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _styles.TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"));
|
|
14
|
+
var taskDecisionStyles = exports.taskDecisionStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t[data-decision-wrapper] {\n\t\tcursor: pointer;\n\t}\n\n\t.", " > [data-decision-wrapper],\n\tol[data-node-type='decisionList'].", " {\n\t\tborder-radius: 4px;\n\t\t", "\n\t}\n\n\t.danger {\n\t\t.", ".", " > div {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\tcontent: none; /* reset the Blanket selection style */\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), _styles.TaskDecisionSharedCssClassName.DECISION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"));
|
|
15
|
+
|
|
16
|
+
// Combine this with taskDecisionStyles (above) when cleaning up the platform_editor_vanilla_dom experiment.
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
18
|
+
var vanillaTaskDecisionStyles = exports.vanillaTaskDecisionStyles = (0, _react.css)({
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
20
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]': {
|
|
21
|
+
listStyleType: 'none'
|
|
22
|
+
},
|
|
23
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
24
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper]': {
|
|
25
|
+
display: 'flex',
|
|
26
|
+
flexDirection: 'row',
|
|
27
|
+
margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
|
|
28
|
+
padding: "var(--ds-space-100, 8px)",
|
|
29
|
+
paddingLeft: "var(--ds-space-150, 12px)",
|
|
30
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
31
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
32
|
+
position: 'relative'
|
|
33
|
+
},
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
35
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"]': {
|
|
36
|
+
flex: '0 0 16px',
|
|
37
|
+
height: '16px',
|
|
38
|
+
width: '16px',
|
|
39
|
+
margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
|
|
40
|
+
color: "var(--ds-icon-subtle, #626F86)",
|
|
41
|
+
display: 'flex',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
justifyContent: 'center'
|
|
44
|
+
},
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
|
|
46
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="icon"]': {
|
|
47
|
+
color: "var(--ds-icon-success, #22A06B)"
|
|
48
|
+
},
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
50
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
|
|
51
|
+
display: 'inline-block',
|
|
52
|
+
flexShrink: 0,
|
|
53
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography -- Mirroring icon styles
|
|
54
|
+
lineHeight: 1
|
|
55
|
+
},
|
|
56
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
57
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
|
|
58
|
+
overflow: 'hidden',
|
|
59
|
+
pointerEvents: 'none',
|
|
60
|
+
color: 'currentColor',
|
|
61
|
+
verticalAlign: 'bottom'
|
|
62
|
+
},
|
|
63
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
64
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="placeholder"]': {
|
|
65
|
+
margin: "0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3.5)"),
|
|
66
|
+
position: 'absolute',
|
|
67
|
+
color: "var(--ds-text-subtlest, #626F86)",
|
|
68
|
+
pointerEvents: 'none',
|
|
69
|
+
textOverflow: 'ellipsis',
|
|
70
|
+
overflow: 'hidden',
|
|
71
|
+
whiteSpace: 'nowrap',
|
|
72
|
+
maxWidth: 'calc(100% - 50px)'
|
|
73
|
+
},
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
|
|
75
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="placeholder"]': {
|
|
76
|
+
display: 'none'
|
|
77
|
+
},
|
|
78
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
79
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="content"]': {
|
|
80
|
+
margin: 0,
|
|
81
|
+
wordWrap: 'break-word',
|
|
82
|
+
minWidth: 0,
|
|
83
|
+
flex: '1 1 auto'
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
88
|
+
var vanillaTaskDecisionIconWithVisualRefresh = exports.vanillaTaskDecisionIconWithVisualRefresh = (0, _react.css)({
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
90
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg[data-icon-source="legacy"]': {
|
|
91
|
+
display: 'none'
|
|
92
|
+
},
|
|
93
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
94
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
|
|
95
|
+
boxSizing: 'border-box',
|
|
96
|
+
paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
|
|
97
|
+
paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)',
|
|
98
|
+
'@media screen and (forced-colors: active)': {
|
|
99
|
+
color: 'canvastext',
|
|
100
|
+
filter: 'grayscale(1)'
|
|
101
|
+
}
|
|
102
|
+
},
|
|
103
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
104
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
|
|
105
|
+
width: "var(--ds-space-300, 24px)",
|
|
106
|
+
height: "var(--ds-space-300, 24px)"
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
111
|
+
var vanillaTaskDecisionIconWithoutVisualRefresh = exports.vanillaTaskDecisionIconWithoutVisualRefresh = (0, _react.css)({
|
|
112
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
113
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg[data-icon-source="refreshed"]': {
|
|
114
|
+
display: 'none'
|
|
115
|
+
},
|
|
116
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
117
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
|
|
118
|
+
width: '32px',
|
|
119
|
+
height: '32px',
|
|
120
|
+
'@media screen and (forced-colors: active)': {
|
|
121
|
+
filter: 'grayscale(1)',
|
|
122
|
+
color: 'canvastext',
|
|
123
|
+
fill: 'canvas'
|
|
124
|
+
}
|
|
125
|
+
},
|
|
126
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
127
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
|
|
128
|
+
maxWidth: '100%',
|
|
129
|
+
maxHeight: '100%',
|
|
130
|
+
fill: "var(--ds-surface, #FFFFFF)",
|
|
131
|
+
width: '32px',
|
|
132
|
+
height: '32px'
|
|
133
|
+
}
|
|
134
|
+
});
|
|
@@ -36,7 +36,7 @@ import { layoutStyles } from './layout';
|
|
|
36
36
|
import { mediaStyles } from './media';
|
|
37
37
|
import { panelStyles } from './panel';
|
|
38
38
|
import { statusStyles, vanillaStatusStyles } from './status';
|
|
39
|
-
import { taskDecisionStyles } from './tasks-and-decisions';
|
|
39
|
+
import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh, vanillaTaskDecisionIconWithVisualRefresh, vanillaTaskDecisionStyles } from './tasks-and-decisions';
|
|
40
40
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
41
41
|
export const linkStyles = css`
|
|
42
42
|
.ProseMirror {
|
|
@@ -241,6 +241,14 @@ const placeholderOverflowStyles = css({
|
|
|
241
241
|
textOverflow: 'ellipsis'
|
|
242
242
|
}
|
|
243
243
|
});
|
|
244
|
+
const placeholderWrapStyles = css({
|
|
245
|
+
// As part of controls work, we add placeholder `Search` to quick insert command
|
|
246
|
+
// This style is to prevent `/Search` being wrapped if it's triggered at the end of the line
|
|
247
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
248
|
+
'.ProseMirror mark[data-type-ahead-query="true"]:has(.placeholder-decoration-wrap)': {
|
|
249
|
+
whiteSpace: 'nowrap'
|
|
250
|
+
}
|
|
251
|
+
});
|
|
244
252
|
const firstBlockNodeStyles = css`
|
|
245
253
|
.ProseMirror {
|
|
246
254
|
> .${PanelSharedCssClassName.prefix},
|
|
@@ -399,6 +407,7 @@ const contentStyles = props => css`
|
|
|
399
407
|
${placeholderTextStyles}
|
|
400
408
|
${placeholderStyles}
|
|
401
409
|
${editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null}
|
|
410
|
+
${editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_3') ? placeholderWrapStyles : null}
|
|
402
411
|
|
|
403
412
|
${codeBlockStyles()}
|
|
404
413
|
|
|
@@ -434,6 +443,16 @@ const contentStyles = props => css`
|
|
|
434
443
|
${findReplaceStyles}
|
|
435
444
|
${textHighlightStyle}
|
|
436
445
|
${taskDecisionStyles}
|
|
446
|
+
${editorExperiment('platform_editor_vanilla_dom', true, {
|
|
447
|
+
exposure: false
|
|
448
|
+
}) && vanillaTaskDecisionStyles}
|
|
449
|
+
// Switch between the two icons based on the visual refresh feature gate
|
|
450
|
+
${editorExperiment('platform_editor_vanilla_dom', true, {
|
|
451
|
+
exposure: false
|
|
452
|
+
}) && fg('platform-visual-refresh-icons') && vanillaTaskDecisionIconWithVisualRefresh}
|
|
453
|
+
${editorExperiment('platform_editor_vanilla_dom', true, {
|
|
454
|
+
exposure: false
|
|
455
|
+
}) && !fg('platform-visual-refresh-icons') && vanillaTaskDecisionIconWithoutVisualRefresh}
|
|
437
456
|
${statusStyles}
|
|
438
457
|
${editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles : null}
|
|
439
458
|
${annotationSharedStyles()}
|
|
@@ -24,4 +24,124 @@ export const taskDecisionStyles = css`
|
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
|
-
`;
|
|
27
|
+
`;
|
|
28
|
+
|
|
29
|
+
// Combine this with taskDecisionStyles (above) when cleaning up the platform_editor_vanilla_dom experiment.
|
|
30
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
31
|
+
export const vanillaTaskDecisionStyles = css({
|
|
32
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
33
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]': {
|
|
34
|
+
listStyleType: 'none'
|
|
35
|
+
},
|
|
36
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
37
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper]': {
|
|
38
|
+
display: 'flex',
|
|
39
|
+
flexDirection: 'row',
|
|
40
|
+
margin: `${"var(--ds-space-100, 8px)"} 0 0 0`,
|
|
41
|
+
padding: "var(--ds-space-100, 8px)",
|
|
42
|
+
paddingLeft: "var(--ds-space-150, 12px)",
|
|
43
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
44
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
45
|
+
position: 'relative'
|
|
46
|
+
},
|
|
47
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
48
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"]': {
|
|
49
|
+
flex: '0 0 16px',
|
|
50
|
+
height: '16px',
|
|
51
|
+
width: '16px',
|
|
52
|
+
margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-150, 12px)"} 0 0`,
|
|
53
|
+
color: "var(--ds-icon-subtle, #626F86)",
|
|
54
|
+
display: 'flex',
|
|
55
|
+
alignItems: 'center',
|
|
56
|
+
justifyContent: 'center'
|
|
57
|
+
},
|
|
58
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
|
|
59
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="icon"]': {
|
|
60
|
+
color: "var(--ds-icon-success, #22A06B)"
|
|
61
|
+
},
|
|
62
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
63
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
|
|
64
|
+
display: 'inline-block',
|
|
65
|
+
flexShrink: 0,
|
|
66
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography -- Mirroring icon styles
|
|
67
|
+
lineHeight: 1
|
|
68
|
+
},
|
|
69
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
70
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
|
|
71
|
+
overflow: 'hidden',
|
|
72
|
+
pointerEvents: 'none',
|
|
73
|
+
color: 'currentColor',
|
|
74
|
+
verticalAlign: 'bottom'
|
|
75
|
+
},
|
|
76
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
77
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="placeholder"]': {
|
|
78
|
+
margin: `0 0 0 calc(${"var(--ds-space-100, 8px)"} * 3.5)`,
|
|
79
|
+
position: 'absolute',
|
|
80
|
+
color: "var(--ds-text-subtlest, #626F86)",
|
|
81
|
+
pointerEvents: 'none',
|
|
82
|
+
textOverflow: 'ellipsis',
|
|
83
|
+
overflow: 'hidden',
|
|
84
|
+
whiteSpace: 'nowrap',
|
|
85
|
+
maxWidth: 'calc(100% - 50px)'
|
|
86
|
+
},
|
|
87
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
|
|
88
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="placeholder"]': {
|
|
89
|
+
display: 'none'
|
|
90
|
+
},
|
|
91
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
92
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="content"]': {
|
|
93
|
+
margin: 0,
|
|
94
|
+
wordWrap: 'break-word',
|
|
95
|
+
minWidth: 0,
|
|
96
|
+
flex: '1 1 auto'
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
101
|
+
export const vanillaTaskDecisionIconWithVisualRefresh = css({
|
|
102
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
103
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg[data-icon-source="legacy"]': {
|
|
104
|
+
display: 'none'
|
|
105
|
+
},
|
|
106
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
107
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
|
|
108
|
+
boxSizing: 'border-box',
|
|
109
|
+
paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
|
|
110
|
+
paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)',
|
|
111
|
+
'@media screen and (forced-colors: active)': {
|
|
112
|
+
color: 'canvastext',
|
|
113
|
+
filter: 'grayscale(1)'
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
117
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
|
|
118
|
+
width: "var(--ds-space-300, 24px)",
|
|
119
|
+
height: "var(--ds-space-300, 24px)"
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
124
|
+
export const vanillaTaskDecisionIconWithoutVisualRefresh = css({
|
|
125
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
126
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg[data-icon-source="refreshed"]': {
|
|
127
|
+
display: 'none'
|
|
128
|
+
},
|
|
129
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
130
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
|
|
131
|
+
width: '32px',
|
|
132
|
+
height: '32px',
|
|
133
|
+
'@media screen and (forced-colors: active)': {
|
|
134
|
+
filter: 'grayscale(1)',
|
|
135
|
+
color: 'canvastext',
|
|
136
|
+
fill: 'canvas'
|
|
137
|
+
}
|
|
138
|
+
},
|
|
139
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
140
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
|
|
141
|
+
maxWidth: '100%',
|
|
142
|
+
maxHeight: '100%',
|
|
143
|
+
fill: "var(--ds-surface, #FFFFFF)",
|
|
144
|
+
width: '32px',
|
|
145
|
+
height: '32px'
|
|
146
|
+
}
|
|
147
|
+
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "205.2.
|
|
2
|
+
export const version = "205.2.2";
|
|
@@ -38,7 +38,7 @@ import { layoutStyles } from './layout';
|
|
|
38
38
|
import { mediaStyles } from './media';
|
|
39
39
|
import { panelStyles } from './panel';
|
|
40
40
|
import { statusStyles, vanillaStatusStyles } from './status';
|
|
41
|
-
import { taskDecisionStyles } from './tasks-and-decisions';
|
|
41
|
+
import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh, vanillaTaskDecisionIconWithVisualRefresh, vanillaTaskDecisionStyles } from './tasks-and-decisions';
|
|
42
42
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
43
43
|
export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t}\n"])), linkSharedStyle);
|
|
44
44
|
var ruleStyles = function ruleStyles() {
|
|
@@ -119,6 +119,14 @@ var placeholderOverflowStyles = css({
|
|
|
119
119
|
textOverflow: 'ellipsis'
|
|
120
120
|
}
|
|
121
121
|
});
|
|
122
|
+
var placeholderWrapStyles = css({
|
|
123
|
+
// As part of controls work, we add placeholder `Search` to quick insert command
|
|
124
|
+
// This style is to prevent `/Search` being wrapped if it's triggered at the end of the line
|
|
125
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
126
|
+
'.ProseMirror mark[data-type-ahead-query="true"]:has(.placeholder-decoration-wrap)': {
|
|
127
|
+
whiteSpace: 'nowrap'
|
|
128
|
+
}
|
|
129
|
+
});
|
|
122
130
|
var firstBlockNodeStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), PanelSharedCssClassName.prefix, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, expandClassNames.prefix);
|
|
123
131
|
var firstBlockNodeStylesNew = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), PanelSharedCssClassName.prefix, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, expandClassNames.prefix);
|
|
124
132
|
|
|
@@ -138,15 +146,21 @@ export var fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
|
|
|
138
146
|
// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
|
|
139
147
|
var akEditorBreakpointForSmallDevice = "1266px";
|
|
140
148
|
var contentStyles = function contentStyles(props) {
|
|
141
|
-
return css(_templateObject10 || (_templateObject10 = _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: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\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.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
|
|
149
|
+
return css(_templateObject10 || (_templateObject10 = _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: 52px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .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.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, editorFontSize({
|
|
142
150
|
theme: props.theme
|
|
143
|
-
}), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject11 || (_templateObject11 = _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(_templateObject12 || (_templateObject12 = _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(_templateObject13 || (_templateObject13 = _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, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
151
|
+
}), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject11 || (_templateObject11 = _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(_templateObject12 || (_templateObject12 = _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(_templateObject13 || (_templateObject13 = _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_controls_patch_3') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), telepointerStyle, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
144
152
|
exposure: false
|
|
145
153
|
}) && vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
146
154
|
exposure: false
|
|
147
155
|
}) && vanillaSelectionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
148
156
|
exposure: false
|
|
149
|
-
}) ? emojiStyles : reactEmojiStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles,
|
|
157
|
+
}) ? emojiStyles : reactEmojiStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), findReplaceStyles, textHighlightStyle, taskDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
158
|
+
exposure: false
|
|
159
|
+
}) && vanillaTaskDecisionStyles, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
160
|
+
exposure: false
|
|
161
|
+
}) && fg('platform-visual-refresh-icons') && vanillaTaskDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
|
|
162
|
+
exposure: false
|
|
163
|
+
}) && !fg('platform-visual-refresh-icons') && vanillaTaskDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles : null, annotationSharedStyles(), smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles(), unsupportedStyles, resizerStyles, aiPanelStyles(props.colorMode), fixBlockControlStylesSSR(), MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
|
|
150
164
|
};
|
|
151
165
|
export var createEditorContentStyle = function createEditorContentStyle(styles) {
|
|
152
166
|
return /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -5,4 +5,124 @@ import { css } from '@emotion/react';
|
|
|
5
5
|
import { TaskDecisionSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
6
6
|
import { akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
7
7
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
8
|
-
export var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t[data-decision-wrapper] {\n\t\tcursor: pointer;\n\t}\n\n\t.", " > [data-decision-wrapper],\n\tol[data-node-type='decisionList'].", " {\n\t\tborder-radius: 4px;\n\t\t", "\n\t}\n\n\t.danger {\n\t\t.", ".", " > div {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\tcontent: none; /* reset the Blanket selection style */\n\t\t\t}\n\t\t}\n\t}\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"));
|
|
8
|
+
export var taskDecisionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t[data-decision-wrapper] {\n\t\tcursor: pointer;\n\t}\n\n\t.", " > [data-decision-wrapper],\n\tol[data-node-type='decisionList'].", " {\n\t\tborder-radius: 4px;\n\t\t", "\n\t}\n\n\t.danger {\n\t\t.", ".", " > div {\n\t\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t\t", ";\n\t\t\tbackground-color: ", ";\n\t\t\t&::after {\n\t\t\t\tcontent: none; /* reset the Blanket selection style */\n\t\t\t}\n\t\t}\n\t}\n"])), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), TaskDecisionSharedCssClassName.DECISION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"));
|
|
9
|
+
|
|
10
|
+
// Combine this with taskDecisionStyles (above) when cleaning up the platform_editor_vanilla_dom experiment.
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
12
|
+
export var vanillaTaskDecisionStyles = css({
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
14
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]': {
|
|
15
|
+
listStyleType: 'none'
|
|
16
|
+
},
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
18
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper]': {
|
|
19
|
+
display: 'flex',
|
|
20
|
+
flexDirection: 'row',
|
|
21
|
+
margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
|
|
22
|
+
padding: "var(--ds-space-100, 8px)",
|
|
23
|
+
paddingLeft: "var(--ds-space-150, 12px)",
|
|
24
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
25
|
+
backgroundColor: "var(--ds-background-neutral, #091E420F)",
|
|
26
|
+
position: 'relative'
|
|
27
|
+
},
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
29
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"]': {
|
|
30
|
+
flex: '0 0 16px',
|
|
31
|
+
height: '16px',
|
|
32
|
+
width: '16px',
|
|
33
|
+
margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-150, 12px)", " 0 0"),
|
|
34
|
+
color: "var(--ds-icon-subtle, #626F86)",
|
|
35
|
+
display: 'flex',
|
|
36
|
+
alignItems: 'center',
|
|
37
|
+
justifyContent: 'center'
|
|
38
|
+
},
|
|
39
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
|
|
40
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="icon"]': {
|
|
41
|
+
color: "var(--ds-icon-success, #22A06B)"
|
|
42
|
+
},
|
|
43
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
44
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
|
|
45
|
+
display: 'inline-block',
|
|
46
|
+
flexShrink: 0,
|
|
47
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography -- Mirroring icon styles
|
|
48
|
+
lineHeight: 1
|
|
49
|
+
},
|
|
50
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
51
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
|
|
52
|
+
overflow: 'hidden',
|
|
53
|
+
pointerEvents: 'none',
|
|
54
|
+
color: 'currentColor',
|
|
55
|
+
verticalAlign: 'bottom'
|
|
56
|
+
},
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
58
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="placeholder"]': {
|
|
59
|
+
margin: "0 0 0 calc(".concat("var(--ds-space-100, 8px)", " * 3.5)"),
|
|
60
|
+
position: 'absolute',
|
|
61
|
+
color: "var(--ds-text-subtlest, #626F86)",
|
|
62
|
+
pointerEvents: 'none',
|
|
63
|
+
textOverflow: 'ellipsis',
|
|
64
|
+
overflow: 'hidden',
|
|
65
|
+
whiteSpace: 'nowrap',
|
|
66
|
+
maxWidth: 'calc(100% - 50px)'
|
|
67
|
+
},
|
|
68
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
|
|
69
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"]:not(:has([data-empty]):not(:has([data-type-ahead]))) > [data-decision-wrapper] > [data-component="placeholder"]': {
|
|
70
|
+
display: 'none'
|
|
71
|
+
},
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
73
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="content"]': {
|
|
74
|
+
margin: 0,
|
|
75
|
+
wordWrap: 'break-word',
|
|
76
|
+
minWidth: 0,
|
|
77
|
+
flex: '1 1 auto'
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
82
|
+
export var vanillaTaskDecisionIconWithVisualRefresh = css({
|
|
83
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
84
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg[data-icon-source="legacy"]': {
|
|
85
|
+
display: 'none'
|
|
86
|
+
},
|
|
87
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
88
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
|
|
89
|
+
boxSizing: 'border-box',
|
|
90
|
+
paddingInlineEnd: 'var(--ds--button--new-icon-padding-end, 0)',
|
|
91
|
+
paddingInlineStart: 'var(--ds--button--new-icon-padding-start, 0)',
|
|
92
|
+
'@media screen and (forced-colors: active)': {
|
|
93
|
+
color: 'canvastext',
|
|
94
|
+
filter: 'grayscale(1)'
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
98
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
|
|
99
|
+
width: "var(--ds-space-300, 24px)",
|
|
100
|
+
height: "var(--ds-space-300, 24px)"
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
105
|
+
export var vanillaTaskDecisionIconWithoutVisualRefresh = css({
|
|
106
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
107
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg[data-icon-source="refreshed"]': {
|
|
108
|
+
display: 'none'
|
|
109
|
+
},
|
|
110
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
111
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span': {
|
|
112
|
+
width: '32px',
|
|
113
|
+
height: '32px',
|
|
114
|
+
'@media screen and (forced-colors: active)': {
|
|
115
|
+
filter: 'grayscale(1)',
|
|
116
|
+
color: 'canvastext',
|
|
117
|
+
fill: 'canvas'
|
|
118
|
+
}
|
|
119
|
+
},
|
|
120
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
121
|
+
'[data-prosemirror-node-view-type="vanilla"][data-prosemirror-node-name="decisionItem"] > [data-decision-wrapper] > [data-component="icon"] > span > svg': {
|
|
122
|
+
maxWidth: '100%',
|
|
123
|
+
maxHeight: '100%',
|
|
124
|
+
fill: "var(--ds-surface, #FFFFFF)",
|
|
125
|
+
width: '32px',
|
|
126
|
+
height: '32px'
|
|
127
|
+
}
|
|
128
|
+
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "205.2.
|
|
2
|
+
export var version = "205.2.2";
|
|
@@ -1 +1,4 @@
|
|
|
1
1
|
export declare const taskDecisionStyles: import("@emotion/react").SerializedStyles;
|
|
2
|
+
export declare const vanillaTaskDecisionStyles: import("@emotion/react").SerializedStyles;
|
|
3
|
+
export declare const vanillaTaskDecisionIconWithVisualRefresh: import("@emotion/react").SerializedStyles;
|
|
4
|
+
export declare const vanillaTaskDecisionIconWithoutVisualRefresh: import("@emotion/react").SerializedStyles;
|
|
@@ -1 +1,4 @@
|
|
|
1
1
|
export declare const taskDecisionStyles: import("@emotion/react").SerializedStyles;
|
|
2
|
+
export declare const vanillaTaskDecisionStyles: import("@emotion/react").SerializedStyles;
|
|
3
|
+
export declare const vanillaTaskDecisionIconWithVisualRefresh: import("@emotion/react").SerializedStyles;
|
|
4
|
+
export declare const vanillaTaskDecisionIconWithoutVisualRefresh: import("@emotion/react").SerializedStyles;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "205.2.
|
|
3
|
+
"version": "205.2.2",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"uuid": "^3.1.0"
|
|
79
79
|
},
|
|
80
80
|
"peerDependencies": {
|
|
81
|
-
"@atlaskit/link-provider": "^2.
|
|
81
|
+
"@atlaskit/link-provider": "^2.1.0",
|
|
82
82
|
"@atlaskit/media-core": "^35.0.0",
|
|
83
83
|
"react": "^18.2.0",
|
|
84
84
|
"react-dom": "^18.2.0",
|
|
@@ -94,15 +94,15 @@
|
|
|
94
94
|
"@atlaskit/editor-plugin-card": "^5.4.0",
|
|
95
95
|
"@atlaskit/editor-plugin-list": "^4.2.0",
|
|
96
96
|
"@atlaskit/editor-plugin-paste": "^3.1.0",
|
|
97
|
-
"@atlaskit/link-provider": "^2.
|
|
97
|
+
"@atlaskit/link-provider": "^2.1.0",
|
|
98
98
|
"@atlaskit/logo": "^16.0.0",
|
|
99
99
|
"@atlaskit/media-core": "^35.0.0",
|
|
100
100
|
"@atlaskit/media-integration-test-helpers": "^4.0.0",
|
|
101
101
|
"@atlaskit/media-test-helpers": "^35.0.0",
|
|
102
102
|
"@atlaskit/modal-dialog": "^14.1.0",
|
|
103
|
-
"@atlaskit/primitives": "^14.
|
|
103
|
+
"@atlaskit/primitives": "^14.4.0",
|
|
104
104
|
"@atlaskit/renderer": "^114.7.0",
|
|
105
|
-
"@atlaskit/smart-card": "^36.
|
|
105
|
+
"@atlaskit/smart-card": "^36.4.0",
|
|
106
106
|
"@atlaskit/synchrony-test-helpers": "^3.1.0",
|
|
107
107
|
"@atlaskit/toggle": "^15.0.0",
|
|
108
108
|
"@atlaskit/util-data-test": "^18.0.0",
|
|
@@ -428,10 +428,6 @@
|
|
|
428
428
|
"type": "boolean",
|
|
429
429
|
"referenceOnly": true
|
|
430
430
|
},
|
|
431
|
-
"platform_editor_nested_tables_resizing": {
|
|
432
|
-
"type": "boolean",
|
|
433
|
-
"referenceOnly": true
|
|
434
|
-
},
|
|
435
431
|
"platform_editor_disable_drag_handle_nested_tables": {
|
|
436
432
|
"type": "boolean",
|
|
437
433
|
"referenceOnly": true
|
|
@@ -612,6 +608,10 @@
|
|
|
612
608
|
"type": "boolean",
|
|
613
609
|
"referenceOnly": true
|
|
614
610
|
},
|
|
611
|
+
"editor_a11y_announce_date_picker_open": {
|
|
612
|
+
"type": "boolean",
|
|
613
|
+
"referenceOnly": true
|
|
614
|
+
},
|
|
615
615
|
"platform_editor_controls_sticky_controls": {
|
|
616
616
|
"type": "boolean",
|
|
617
617
|
"referenceOnly": true
|