@atlaskit/editor-core 197.8.4 → 197.9.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/.eslintrc.js +0 -20
- package/CHANGELOG.md +13 -0
- package/afm-jira/tsconfig.json +3 -0
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +2 -2
- package/dist/cjs/ui/ContentStyles/expand.js +2 -2
- package/dist/cjs/ui/ContentStyles/layout.js +1 -1
- package/dist/cjs/ui/ContentStyles/panel.js +2 -1
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +2 -2
- package/dist/es2019/ui/ContentStyles/expand.js +10 -2
- package/dist/es2019/ui/ContentStyles/layout.js +5 -1
- package/dist/es2019/ui/ContentStyles/panel.js +10 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +2 -2
- package/dist/esm/ui/ContentStyles/expand.js +2 -2
- package/dist/esm/ui/ContentStyles/layout.js +1 -1
- package/dist/esm/ui/ContentStyles/panel.js +2 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/package.json +8 -8
package/.eslintrc.js
CHANGED
|
@@ -5,25 +5,6 @@ module.exports = {
|
|
|
5
5
|
'error',
|
|
6
6
|
{ domains: ['spacing'], shouldEnforceFallbacks: false },
|
|
7
7
|
],
|
|
8
|
-
'import/no-restricted-paths': [
|
|
9
|
-
'warn',
|
|
10
|
-
{
|
|
11
|
-
zones: [
|
|
12
|
-
{
|
|
13
|
-
target: 'packages/editor/editor-core/src/**/*',
|
|
14
|
-
from: `packages/editor/editor-core/src/plugins/*/!(types)*`,
|
|
15
|
-
message:
|
|
16
|
-
'[ELR101] Avoid importing dependencies from editor plugins. Type-only imports are an exception. Move shared code to a common location. go/elr101',
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
target: 'packages/editor/editor-core/src/**/*',
|
|
20
|
-
from: `packages/editor/editor-core/src/plugins/*/!(types)**/*`,
|
|
21
|
-
message:
|
|
22
|
-
'[ELR101] Avoid importing dependencies from editor plugins. Type-only imports are an exception. Move shared code to a common location. go/elr101',
|
|
23
|
-
},
|
|
24
|
-
],
|
|
25
|
-
},
|
|
26
|
-
],
|
|
27
8
|
},
|
|
28
9
|
overrides: [
|
|
29
10
|
{
|
|
@@ -33,7 +14,6 @@ module.exports = {
|
|
|
33
14
|
'**/*.{test,spec}.{js,ts,tsx}',
|
|
34
15
|
],
|
|
35
16
|
rules: {
|
|
36
|
-
'import/no-restricted-paths': ['off'],
|
|
37
17
|
'@typescript-eslint/no-explicit-any': ['off'],
|
|
38
18
|
},
|
|
39
19
|
},
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 197.9.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#142806](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142806)
|
|
8
|
+
[`f73667130fb7d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f73667130fb7d) -
|
|
9
|
+
[ux] Update styles for nested dnd to only apply to full page editor. Removed
|
|
10
|
+
blockquoteSharedStylesNew export.
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 197.8.4
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
package/afm-jira/tsconfig.json
CHANGED
|
@@ -76,7 +76,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
76
76
|
css: (0, _StyledComponents.editorContentGutterStyle)()
|
|
77
77
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
78
78
|
,
|
|
79
|
-
className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
79
|
+
className: ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
80
80
|
ref: contentAreaRef
|
|
81
81
|
}, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
|
|
82
82
|
editorView: props.editorView,
|
|
@@ -117,7 +117,7 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
117
117
|
css: (0, _StyledComponents.editorContentGutterStyle)()
|
|
118
118
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
119
119
|
,
|
|
120
|
-
className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
120
|
+
className: ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
121
121
|
ref: contentAreaRef
|
|
122
122
|
}, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, (0, _react2.jsx)(_PluginSlot.default, {
|
|
123
123
|
editorView: props.editorView,
|
|
@@ -28,10 +28,10 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
|
|
|
28
28
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
29
29
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
30
30
|
var expandStyles = exports.expandStyles = function expandStyles() {
|
|
31
|
-
return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.expandClassNames.icon, _styles.expandClassNames.prefix, _styles.sharedExpandStyles.containerStyles({
|
|
31
|
+
return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t", "\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.expandClassNames.icon, _styles.expandClassNames.prefix, _styles.sharedExpandStyles.containerStyles({
|
|
32
32
|
expanded: false,
|
|
33
33
|
focused: false
|
|
34
|
-
})(), _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _experiments.editorExperiment)('nested-dnd', true) ? (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]) + "border: ".concat(_editorSharedStyles.akEditorSelectedBorder, ";") : (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, _styles.expandClassNames.type('expand'), _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, _styles.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset
|
|
34
|
+
})(), _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _experiments.editorExperiment)('nested-dnd', true) ? (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]) + "border: ".concat(_editorSharedStyles.akEditorSelectedBorder, ";") : (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, _styles.expandClassNames.type('expand'), _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, _styles.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, (0, _experiments.editorExperiment)('nested-dnd', true) && ".ak-editor-content-area.appearance-full-page .ProseMirror\n\t\t> .".concat(_styles.expandClassNames.type('expand'), ",\n\t\t.").concat(_styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, "\n\t\t> .").concat(_styles.expandClassNames.type('expand'), " {\n\t\tmargin-left: -").concat(_editorSharedStyles.akLayoutGutterOffset + 8, "px;\n\t\tmargin-right: -").concat(_editorSharedStyles.akLayoutGutterOffset + 8, "px;\n\t}"), _styles.expandClassNames.content, _styles.sharedExpandStyles.contentStyles({
|
|
35
35
|
expanded: false,
|
|
36
36
|
focused: false
|
|
37
37
|
})(), (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_expand_style_fix') && "overflow-x: clip;", _styles.expandClassNames.titleInput, _styles.sharedExpandStyles.titleInputStyles(), _styles.expandClassNames.titleContainer, _styles.sharedExpandStyles.titleContainerStyles(), _styles.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, #091E4224)", _styles.expandClassNames.content, "var(--ds-space-100, 8px)", firstNodeWithNotMarginTop(), _styles.expandClassNames.inputContainer, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, #091E4224)", EXPAND_SELECTED_BACKGROUND);
|
|
@@ -33,5 +33,5 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
|
|
|
33
33
|
|
|
34
34
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
35
35
|
var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
|
|
36
|
-
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset
|
|
36
|
+
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode, (0, _experiments.editorExperiment)('nested-dnd', true) && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", _editorSharedStyles.akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
|
|
37
37
|
};
|
|
@@ -9,8 +9,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
|
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _panel = require("@atlaskit/editor-common/panel");
|
|
11
11
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
12
13
|
var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
13
14
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation due to mixin usage
|
|
14
15
|
var panelStyles = exports.panelStyles = function panelStyles() {
|
|
15
|
-
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t/* Danger when top level node */\n\t\t\t&.danger {\n\t\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\t\tbackground-color: ", " !important;\n\n\t\t\t\t.", " {\n\t\t\t\t\tcolor: ", " !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t/* Danger when nested node */\n\t\t.danger .", " {\n\t\t\t&[data-panel-type] {\n\t\t\t\tbackground-color: ", ";\n\n\t\t\t\t.", " {\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t", ";\n\t}\n\n\t.", ".", ":not(.danger) {\n\t\t", "\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _panel.PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _panel.PanelSharedCssClassName.content, _panel.PanelSharedCssClassName.prefix, "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _panel.PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), (0, _panel.panelSharedStyles)(), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
|
|
16
|
+
return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t/* Danger when top level node */\n\t\t\t&.danger {\n\t\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\t\tbackground-color: ", " !important;\n\n\t\t\t\t.", " {\n\t\t\t\t\tcolor: ", " !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t/* Danger when nested node */\n\t\t.danger .", " {\n\t\t\t&[data-panel-type] {\n\t\t\t\tbackground-color: ", ";\n\n\t\t\t\t.", " {\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t", ";\n\t}\n\n\t.", ".", ":not(.danger) {\n\t\t", "\n\t}\n\n\t", ";\n\n\t/* Don't want extra padding for inline editor (nested) */\n\t", ";\n"])), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _panel.PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), _panel.PanelSharedCssClassName.content, _panel.PanelSharedCssClassName.prefix, "var(--ds-blanket-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _panel.PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), (0, _panel.panelSharedStyles)(), _panel.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]), (0, _experiments.editorExperiment)('nested-dnd', true) && ".ak-editor-content-area.appearance-full-page .ProseMirror .ak-editor-panel .".concat(_panel.PanelSharedCssClassName.icon, " {\n\t\t\tpadding-right: ", "var(--ds-space-150, 12px)", ";\n\t\t}"), (0, _experiments.editorExperiment)('nested-dnd', true) && ".ak-editor-content-area .ak-editor-content-area .ProseMirror .ak-editor-panel .".concat(_panel.PanelSharedCssClassName.icon, " {\n\t\tpadding-right: ", "var(--ds-space-100, 8px)", ";\n\t}"));
|
|
16
17
|
};
|
|
@@ -64,7 +64,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
64
64
|
css: editorContentGutterStyle()
|
|
65
65
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
66
66
|
,
|
|
67
|
-
className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
67
|
+
className: ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
68
68
|
ref: contentAreaRef
|
|
69
69
|
}, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {
|
|
70
70
|
editorView: props.editorView,
|
|
@@ -105,7 +105,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
105
105
|
css: editorContentGutterStyle()
|
|
106
106
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
107
107
|
,
|
|
108
|
-
className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
108
|
+
className: ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
109
109
|
ref: contentAreaRef
|
|
110
110
|
}, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {
|
|
111
111
|
editorView: props.editorView,
|
|
@@ -61,10 +61,18 @@ export const expandStyles = () => css`
|
|
|
61
61
|
> .${expandClassNames.type('expand')},
|
|
62
62
|
.${BreakoutCssClassName.BREAKOUT_MARK_DOM}
|
|
63
63
|
> .${expandClassNames.type('expand')} {
|
|
64
|
-
margin-left: -${akLayoutGutterOffset
|
|
65
|
-
margin-right: -${akLayoutGutterOffset
|
|
64
|
+
margin-left: -${akLayoutGutterOffset}px;
|
|
65
|
+
margin-right: -${akLayoutGutterOffset}px;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
+
${editorExperiment('nested-dnd', true) && `.ak-editor-content-area.appearance-full-page .ProseMirror
|
|
69
|
+
> .${expandClassNames.type('expand')},
|
|
70
|
+
.${BreakoutCssClassName.BREAKOUT_MARK_DOM}
|
|
71
|
+
> .${expandClassNames.type('expand')} {
|
|
72
|
+
margin-left: -${akLayoutGutterOffset + 8}px;
|
|
73
|
+
margin-right: -${akLayoutGutterOffset + 8}px;
|
|
74
|
+
}`}
|
|
75
|
+
|
|
68
76
|
.${expandClassNames.content} {
|
|
69
77
|
${sharedExpandStyles.contentStyles({
|
|
70
78
|
expanded: false,
|
|
@@ -36,7 +36,7 @@ export const layoutStyles = viewMode => css`
|
|
|
36
36
|
${columnLayoutSharedStyle} [data-layout-section] {
|
|
37
37
|
// TODO: Migrate away from gridSize
|
|
38
38
|
// Recommendation: Replace directly with 7px
|
|
39
|
-
margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset
|
|
39
|
+
margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset}px 0;
|
|
40
40
|
transition: border-color 0.3s ${akEditorSwoopCubicBezier};
|
|
41
41
|
cursor: ${viewMode === 'view' ? 'default' : 'pointer'};
|
|
42
42
|
|
|
@@ -147,4 +147,8 @@ export const layoutStyles = viewMode => css`
|
|
|
147
147
|
}
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
|
+
|
|
151
|
+
${editorExperiment('nested-dnd', true) && `.ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {
|
|
152
|
+
margin: ${"var(--ds-space-100, 8px)"} -${akLayoutGutterOffset + 8}px 0;
|
|
153
|
+
}`}
|
|
150
154
|
`;
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { css } from '@emotion/react';
|
|
3
3
|
import { PanelSharedCssClassName, panelSharedStyles } from '@atlaskit/editor-common/panel';
|
|
4
4
|
import { akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
5
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
6
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation due to mixin usage
|
|
6
7
|
export const panelStyles = () => css`
|
|
7
8
|
.ProseMirror {
|
|
@@ -40,4 +41,13 @@ export const panelStyles = () => css`
|
|
|
40
41
|
.${PanelSharedCssClassName.prefix}.${akEditorSelectedNodeClassName}:not(.danger) {
|
|
41
42
|
${getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket])}
|
|
42
43
|
}
|
|
44
|
+
|
|
45
|
+
${editorExperiment('nested-dnd', true) && `.ak-editor-content-area.appearance-full-page .ProseMirror .ak-editor-panel .${PanelSharedCssClassName.icon} {
|
|
46
|
+
padding-right: ${"var(--ds-space-150, 12px)"};
|
|
47
|
+
}`};
|
|
48
|
+
|
|
49
|
+
/* Don't want extra padding for inline editor (nested) */
|
|
50
|
+
${editorExperiment('nested-dnd', true) && `.ak-editor-content-area .ak-editor-content-area .ProseMirror .ak-editor-panel .${PanelSharedCssClassName.icon} {
|
|
51
|
+
padding-right: ${"var(--ds-space-100, 8px)"};
|
|
52
|
+
}`};
|
|
43
53
|
`;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "197.
|
|
2
|
+
export const version = "197.9.0";
|
|
@@ -66,7 +66,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
66
66
|
css: editorContentGutterStyle()
|
|
67
67
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
68
68
|
,
|
|
69
|
-
className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
69
|
+
className: ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
70
70
|
ref: contentAreaRef
|
|
71
71
|
}, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {
|
|
72
72
|
editorView: props.editorView,
|
|
@@ -107,7 +107,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
107
107
|
css: editorContentGutterStyle()
|
|
108
108
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
109
109
|
,
|
|
110
|
-
className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
110
|
+
className: ['ak-editor-content-area', 'appearance-full-page', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' '),
|
|
111
111
|
ref: contentAreaRef
|
|
112
112
|
}, !!props.customContentComponents && 'before' in props.customContentComponents ? props.customContentComponents.before : props.customContentComponents, jsx(PluginSlot, {
|
|
113
113
|
editorView: props.editorView,
|
|
@@ -22,10 +22,10 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
|
|
|
22
22
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
23
23
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
24
24
|
export var expandStyles = function expandStyles() {
|
|
25
|
-
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), expandClassNames.icon, expandClassNames.prefix, sharedExpandStyles.containerStyles({
|
|
25
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t", "\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), expandClassNames.icon, expandClassNames.prefix, sharedExpandStyles.containerStyles({
|
|
26
26
|
expanded: false,
|
|
27
27
|
focused: false
|
|
28
|
-
})(), expandClassNames.iconContainer, EXPAND_ICON_COLOR(), akEditorSelectedNodeClassName, editorExperiment('nested-dnd', true) ? getSelectionStyles([SelectionStyle.Blanket]) + "border: ".concat(akEditorSelectedBorder, ";") : getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, expandClassNames.type('expand'), BreakoutCssClassName.BREAKOUT_MARK_DOM, expandClassNames.type('expand'), akLayoutGutterOffset
|
|
28
|
+
})(), expandClassNames.iconContainer, EXPAND_ICON_COLOR(), akEditorSelectedNodeClassName, editorExperiment('nested-dnd', true) ? getSelectionStyles([SelectionStyle.Blanket]) + "border: ".concat(akEditorSelectedBorder, ";") : getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, expandClassNames.type('expand'), BreakoutCssClassName.BREAKOUT_MARK_DOM, expandClassNames.type('expand'), akLayoutGutterOffset, akLayoutGutterOffset, editorExperiment('nested-dnd', true) && ".ak-editor-content-area.appearance-full-page .ProseMirror\n\t\t> .".concat(expandClassNames.type('expand'), ",\n\t\t.").concat(BreakoutCssClassName.BREAKOUT_MARK_DOM, "\n\t\t> .").concat(expandClassNames.type('expand'), " {\n\t\tmargin-left: -").concat(akLayoutGutterOffset + 8, "px;\n\t\tmargin-right: -").concat(akLayoutGutterOffset + 8, "px;\n\t}"), expandClassNames.content, sharedExpandStyles.contentStyles({
|
|
29
29
|
expanded: false,
|
|
30
30
|
focused: false
|
|
31
31
|
})(), fg('platform_editor_drag_and_drop_expand_style_fix') && "overflow-x: clip;", expandClassNames.titleInput, sharedExpandStyles.titleInputStyles(), expandClassNames.titleContainer, sharedExpandStyles.titleContainerStyles(), expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, #091E4224)", expandClassNames.content, "var(--ds-space-100, 8px)", firstNodeWithNotMarginTop(), expandClassNames.inputContainer, expandClassNames.prefix, expandClassNames.expanded, expandClassNames.prefix, expandClassNames.expanded, expandClassNames.iconContainer, EXPAND_ICON_COLOR(), akEditorSelectedNodeClassName, "var(--ds-border, #091E4224)", EXPAND_SELECTED_BACKGROUND);
|
|
@@ -16,5 +16,5 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
|
|
|
16
16
|
|
|
17
17
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
18
18
|
export var layoutStyles = function layoutStyles(viewMode) {
|
|
19
|
-
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n"])), columnLayoutSharedStyle, "var(--ds-space-100, 8px)", akLayoutGutterOffset
|
|
19
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), columnLayoutSharedStyle, "var(--ds-space-100, 8px)", akLayoutGutterOffset, akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (editorExperiment('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('nested-dnd', true) && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
|
|
20
20
|
};
|
|
@@ -4,7 +4,8 @@ var _templateObject;
|
|
|
4
4
|
import { css } from '@emotion/react';
|
|
5
5
|
import { PanelSharedCssClassName, panelSharedStyles } from '@atlaskit/editor-common/panel';
|
|
6
6
|
import { akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
7
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
7
8
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation due to mixin usage
|
|
8
9
|
export var panelStyles = function panelStyles() {
|
|
9
|
-
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t/* Danger when top level node */\n\t\t\t&.danger {\n\t\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\t\tbackground-color: ", " !important;\n\n\t\t\t\t.", " {\n\t\t\t\t\tcolor: ", " !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t/* Danger when nested node */\n\t\t.danger .", " {\n\t\t\t&[data-panel-type] {\n\t\t\t\tbackground-color: ", ";\n\n\t\t\t\t.", " {\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t", ";\n\t}\n\n\t.", ".", ":not(.danger) {\n\t\t", "\n\t}\n"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), panelSharedStyles(), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));
|
|
10
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t/* Danger when top level node */\n\t\t\t&.danger {\n\t\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\t\tbackground-color: ", " !important;\n\n\t\t\t\t.", " {\n\t\t\t\t\tcolor: ", " !important;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t/* Danger when nested node */\n\t\t.danger .", " {\n\t\t\t&[data-panel-type] {\n\t\t\t\tbackground-color: ", ";\n\n\t\t\t\t.", " {\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t", ";\n\t}\n\n\t.", ".", ":not(.danger) {\n\t\t", "\n\t}\n\n\t", ";\n\n\t/* Don't want extra padding for inline editor (nested) */\n\t", ";\n"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, "var(--ds-blanket-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), PanelSharedCssClassName.icon, "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), panelSharedStyles(), PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]), editorExperiment('nested-dnd', true) && ".ak-editor-content-area.appearance-full-page .ProseMirror .ak-editor-panel .".concat(PanelSharedCssClassName.icon, " {\n\t\t\tpadding-right: ", "var(--ds-space-150, 12px)", ";\n\t\t}"), editorExperiment('nested-dnd', true) && ".ak-editor-content-area .ak-editor-content-area .ProseMirror .ak-editor-panel .".concat(PanelSharedCssClassName.icon, " {\n\t\tpadding-right: ", "var(--ds-space-100, 8px)", ";\n\t}"));
|
|
10
11
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "197.
|
|
2
|
+
export var version = "197.9.0";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "197.
|
|
3
|
+
"version": "197.9.0",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -43,9 +43,9 @@
|
|
|
43
43
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
44
44
|
"@atlaskit/analytics-next-stable-react-context": "1.0.1",
|
|
45
45
|
"@atlaskit/button": "^20.1.0",
|
|
46
|
-
"@atlaskit/editor-common": "^
|
|
46
|
+
"@atlaskit/editor-common": "^90.0.0",
|
|
47
47
|
"@atlaskit/editor-json-transformer": "^8.18.0",
|
|
48
|
-
"@atlaskit/editor-plugin-quick-insert": "1.4.
|
|
48
|
+
"@atlaskit/editor-plugin-quick-insert": "1.4.1",
|
|
49
49
|
"@atlaskit/editor-plugins": "^5.3.0",
|
|
50
50
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
51
51
|
"@atlaskit/editor-shared-styles": "^2.13.0",
|
|
@@ -79,13 +79,13 @@
|
|
|
79
79
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
80
80
|
},
|
|
81
81
|
"devDependencies": {
|
|
82
|
-
"@af/editor-examples-helpers": "0.3.
|
|
82
|
+
"@af/editor-examples-helpers": "0.3.11",
|
|
83
83
|
"@af/editor-libra": "*",
|
|
84
84
|
"@af/visual-regression": "*",
|
|
85
85
|
"@atlaskit/adf-utils": "^19.8.0",
|
|
86
86
|
"@atlaskit/analytics-listeners": "^8.11.0",
|
|
87
|
-
"@atlaskit/collab-provider": "9.40.
|
|
88
|
-
"@atlaskit/editor-plugin-annotation": "1.19.
|
|
87
|
+
"@atlaskit/collab-provider": "9.40.4",
|
|
88
|
+
"@atlaskit/editor-plugin-annotation": "1.19.7",
|
|
89
89
|
"@atlaskit/editor-plugin-card": "^3.0.0",
|
|
90
90
|
"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
|
|
91
91
|
"@atlaskit/editor-plugin-list": "^3.8.0",
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
"@atlaskit/media-test-helpers": "^34.4.0",
|
|
99
99
|
"@atlaskit/modal-dialog": "^12.16.0",
|
|
100
100
|
"@atlaskit/primitives": "^12.1.0",
|
|
101
|
-
"@atlaskit/renderer": "^110.
|
|
101
|
+
"@atlaskit/renderer": "^110.3.0",
|
|
102
102
|
"@atlaskit/smart-card": "^28.1.0",
|
|
103
103
|
"@atlaskit/synchrony-test-helpers": "^2.5.0",
|
|
104
104
|
"@atlaskit/toggle": "^13.4.0",
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
"@atlaskit/visual-regression": "*",
|
|
107
107
|
"@atlassian/adf-schema-json": "^1.22.0",
|
|
108
108
|
"@atlassian/feature-flags-test-utils": "*",
|
|
109
|
-
"@atlassian/search-provider": "2.4.
|
|
109
|
+
"@atlassian/search-provider": "2.4.136",
|
|
110
110
|
"@emotion/jest": "^11.8.0",
|
|
111
111
|
"@storybook/addon-knobs": "^5.3.18",
|
|
112
112
|
"@testing-library/react": "^12.1.5",
|