@atlaskit/editor-core 197.7.0 → 197.7.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.
Files changed (62) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/afm-cc/tsconfig.json +0 -3
  3. package/afm-jira/tsconfig.json +0 -3
  4. package/dist/cjs/create-editor/ReactEditorView.js +11 -2
  5. package/dist/cjs/editor.js +7 -0
  6. package/dist/cjs/ui/Addon/Dropdown/styles.js +2 -4
  7. package/dist/cjs/ui/Appearance/Comment/Comment.js +2 -4
  8. package/dist/cjs/ui/ChromeCollapsed/styles.js +3 -5
  9. package/dist/cjs/ui/ContentStyles/ai-panels.js +2 -3
  10. package/dist/cjs/ui/ContentStyles/code-block.js +1 -2
  11. package/dist/cjs/ui/ContentStyles/expand.js +5 -6
  12. package/dist/cjs/ui/ContentStyles/extension.js +1 -2
  13. package/dist/cjs/ui/ContentStyles/index.js +2 -3
  14. package/dist/cjs/ui/ContentStyles/layout.js +1 -2
  15. package/dist/cjs/ui/ContentStyles/media.js +1 -2
  16. package/dist/cjs/ui/ContextPanel/index.js +1 -2
  17. package/dist/cjs/ui/ToolbarFeedback/styles.js +5 -7
  18. package/dist/cjs/ui/WithFlash/index.js +3 -4
  19. package/dist/cjs/version-wrapper.js +1 -1
  20. package/dist/es2019/create-editor/ReactEditorView.js +12 -3
  21. package/dist/es2019/editor.js +7 -0
  22. package/dist/es2019/ui/Addon/Dropdown/styles.js +2 -4
  23. package/dist/es2019/ui/Appearance/Comment/Comment.js +2 -4
  24. package/dist/es2019/ui/ChromeCollapsed/styles.js +3 -5
  25. package/dist/es2019/ui/ContentStyles/ai-panels.js +4 -5
  26. package/dist/es2019/ui/ContentStyles/code-block.js +1 -2
  27. package/dist/es2019/ui/ContentStyles/expand.js +7 -8
  28. package/dist/es2019/ui/ContentStyles/extension.js +4 -5
  29. package/dist/es2019/ui/ContentStyles/index.js +4 -5
  30. package/dist/es2019/ui/ContentStyles/layout.js +2 -3
  31. package/dist/es2019/ui/ContentStyles/media.js +6 -7
  32. package/dist/es2019/ui/ContextPanel/index.js +1 -2
  33. package/dist/es2019/ui/ToolbarFeedback/styles.js +5 -7
  34. package/dist/es2019/ui/WithFlash/index.js +3 -4
  35. package/dist/es2019/version-wrapper.js +1 -1
  36. package/dist/esm/create-editor/ReactEditorView.js +12 -3
  37. package/dist/esm/editor.js +7 -0
  38. package/dist/esm/ui/Addon/Dropdown/styles.js +2 -4
  39. package/dist/esm/ui/Appearance/Comment/Comment.js +2 -4
  40. package/dist/esm/ui/ChromeCollapsed/styles.js +3 -5
  41. package/dist/esm/ui/ContentStyles/ai-panels.js +2 -3
  42. package/dist/esm/ui/ContentStyles/code-block.js +1 -2
  43. package/dist/esm/ui/ContentStyles/expand.js +6 -7
  44. package/dist/esm/ui/ContentStyles/extension.js +1 -2
  45. package/dist/esm/ui/ContentStyles/index.js +2 -3
  46. package/dist/esm/ui/ContentStyles/layout.js +1 -2
  47. package/dist/esm/ui/ContentStyles/media.js +1 -2
  48. package/dist/esm/ui/ContextPanel/index.js +1 -2
  49. package/dist/esm/ui/ToolbarFeedback/styles.js +5 -7
  50. package/dist/esm/ui/WithFlash/index.js +3 -4
  51. package/dist/esm/version-wrapper.js +1 -1
  52. package/dist/types/create-editor/create-universal-preset.d.ts +11 -11
  53. package/dist/types/editor.d.ts +7 -0
  54. package/dist/types/presets/default.d.ts +10 -10
  55. package/dist/types/presets/universal.d.ts +11 -11
  56. package/dist/types/presets/useUniversalPreset.d.ts +11 -11
  57. package/dist/types-ts4.5/create-editor/create-universal-preset.d.ts +11 -11
  58. package/dist/types-ts4.5/editor.d.ts +7 -0
  59. package/dist/types-ts4.5/presets/default.d.ts +10 -10
  60. package/dist/types-ts4.5/presets/universal.d.ts +11 -11
  61. package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +11 -11
  62. package/package.json +17 -10
package/dist/esm/ui/ContentStyles/expand.js CHANGED
@@ -3,18 +3,17 @@ var _templateObject, _templateObject2;
3
3
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
4
  import { css } from '@emotion/react';
5
5
  import { BreakoutCssClassName, expandClassNames, sharedExpandStyles } from '@atlaskit/editor-common/styles';
6
- import { akEditorSelectedNodeClassName, akLayoutGutterOffset, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
6
+ import { akEditorSelectedBorder, akEditorSelectedNodeClassName, akLayoutGutterOffset, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
7
7
  import { fg } from '@atlaskit/platform-feature-flags';
8
- import { N100A, N40A, N50A, R300, R50 } from '@atlaskit/theme/colors';
9
8
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
10
9
  var EXPAND_SELECTED_BACKGROUND = "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))";
11
10
  var EXPAND_ICON_COLOR = function EXPAND_ICON_COLOR() {
12
11
  return css({
13
- color: "var(--ds-icon-subtle, ".concat(N100A, ")")
12
+ color: "var(--ds-icon-subtle, #626F86)"
14
13
  });
15
14
  };
16
- var DANGER_STATE_BACKGROUND_COLOR = "var(--ds-background-danger, ".concat(R50, ")");
17
- var DANGER_STATE_BORDER_COLOR = "var(--ds-border-danger, ".concat(R300, ")");
15
+ var DANGER_STATE_BACKGROUND_COLOR = "var(--ds-background-danger, #FFECEB)";
16
+ var DANGER_STATE_BORDER_COLOR = "var(--ds-border-danger, #E2483D)";
18
17
  var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
19
18
  return editorExperiment('nested-dnd', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
20
19
  css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> div.ak-editor-expand[data-node-type='nestedExpand'] {\n\t\t\t\t\tmargin-top: ", ";\n\t\t\t\t}\n\t\t\t"])), "var(--ds-space-050, 0.25rem)") : '';
@@ -26,8 +25,8 @@ export var expandStyles = function expandStyles() {
26
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({
27
26
  expanded: false,
28
27
  focused: false
29
- })(), expandClassNames.iconContainer, EXPAND_ICON_COLOR(), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, expandClassNames.type('expand'), BreakoutCssClassName.BREAKOUT_MARK_DOM, expandClassNames.type('expand'), akLayoutGutterOffset + (editorExperiment('nested-dnd', true) ? 8 : 0), akLayoutGutterOffset + (editorExperiment('nested-dnd', true) ? 8 : 0), expandClassNames.content, sharedExpandStyles.contentStyles({
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 + (editorExperiment('nested-dnd', true) ? 8 : 0), akLayoutGutterOffset + (editorExperiment('nested-dnd', true) ? 8 : 0), expandClassNames.content, sharedExpandStyles.contentStyles({
30
29
  expanded: false,
31
30
  focused: false
32
- })(), 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, ".concat(N40A, ")"), 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, ".concat(N50A, ")"), EXPAND_SELECTED_BACKGROUND);
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);
33
32
  };
package/dist/esm/ui/ContentStyles/extension.js CHANGED
@@ -3,9 +3,8 @@ var _templateObject, _templateObject2;
3
3
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
4
4
  import { css } from '@emotion/react';
5
5
  import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
6
- import { B400, B50, R400, R50 } from '@atlaskit/theme/colors';
7
6
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
8
- var extensionLabelStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t&.danger > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t&:not(.danger).", " > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t// Targets the icon for bodied macro styling in button label\n\t&.danger > span > div > .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t&:not(.danger).", " > span > div .extension-label > span {\n\t\tdisplay: inline;\n\t}\n"])), "var(--ds-background-accent-red-subtler, ".concat(R50, ")"), "var(--ds-text-danger, ".concat(R400, ")"), akEditorSelectedNodeClassName, "var(--ds-background-selected, ".concat(B50, ")"), "var(--ds-text-selected, ".concat(B400, ")"), akEditorSelectedNodeClassName);
7
+ var extensionLabelStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t&.danger > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t&:not(.danger).", " > span > div > .extension-label {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\topacity: 1;\n\t\tbox-shadow: none;\n\t}\n\n\t// Targets the icon for bodied macro styling in button label\n\t&.danger > span > div > .extension-label > span {\n\t\tdisplay: inline;\n\t}\n\n\t&:not(.danger).", " > span > div .extension-label > span {\n\t\tdisplay: inline;\n\t}\n"])), "var(--ds-background-accent-red-subtler, #FFD5D2)", "var(--ds-text-danger, #AE2E24)", akEditorSelectedNodeClassName, "var(--ds-background-selected, #E9F2FF)", "var(--ds-text-selected, #0C66E4)", akEditorSelectedNodeClassName);
9
8
  var dangerOverlayStyles = css({
10
9
  opacity: 0.3,
11
10
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
package/dist/esm/ui/ContentStyles/index.js CHANGED
@@ -26,7 +26,6 @@ import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolb
26
26
  import { placeholderTextStyles } from '@atlaskit/editor-plugins/placeholder-text/styles';
27
27
  import { akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorDefaultLayoutWidth, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSelectedBorderColor, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
28
28
  import { fg } from '@atlaskit/platform-feature-flags';
29
- import { N200, N30A, N500 } from '@atlaskit/theme/colors';
30
29
  import { useThemeObserver } from '@atlaskit/tokens';
31
30
  import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
32
31
  import { usePresetContext } from '../../presets/context';
@@ -45,7 +44,7 @@ export var linkStyles = css(_templateObject || (_templateObject = _taggedTemplat
45
44
  var ruleStyles = function ruleStyles() {
46
45
  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", ";\n\n\t\thr {\n\t\t\tcursor: pointer;\n\t\t\tpadding: ", " 0;\n\t\t\tmargin: ", " 0;\n\t\t\tbackground-clip: content-box;\n\n\t\t\t&.", " {\n\t\t\t\toutline: none;\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), ruleSharedStyles(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(akEditorSelectedBorderColor, ")"));
47
46
  };
48
- var mentionsStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n (in dark blue) have white text by default */\n color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, ".concat(N500, ")"), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, ".concat(N30A, ")"), "var(--ds-text-subtle, ".concat(N500, ")"));
47
+ var mentionsStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n (in dark blue) have white text by default */\n color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
49
48
  var listsStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t// In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\t// The following rule resets the first p tag back to its original margin\n\t\t\t// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n // This prevents https://product-fabric.atlassian.net/browse/ED-20924\n &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
50
49
  var emojiStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t.", " {\n\t\tdisplay: inline-block;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t&.", " > span {\n\t\t\t\t/** needed for selection style to cover custom emoji image properly */\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_NODE, EmojiSharedCssClassName.EMOJI_IMAGE, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
51
50
 
@@ -53,7 +52,7 @@ var emojiStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLit
53
52
  export var placeholderStyles = css({
54
53
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
55
54
  '.ProseMirror .placeholder-decoration': {
56
- color: "var(--ds-text-subtlest, ".concat(N200, ")"),
55
+ color: "var(--ds-text-subtlest, #626F86)",
57
56
  width: '100%',
58
57
  pointerEvents: 'none',
59
58
  userSelect: 'none',
package/dist/esm/ui/ContentStyles/layout.js CHANGED
@@ -6,7 +6,6 @@ import { columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN }
6
6
  import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
7
7
  import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
8
8
  import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
9
- import { N40A, N50A } from '@atlaskit/theme/colors';
10
9
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
10
  export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
12
11
  var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
@@ -17,5 +16,5 @@ var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
17
16
 
18
17
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
19
18
  export var layoutStyles = function layoutStyles(viewMode) {
20
- 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 + (editorExperiment('nested-dnd', true) ? 8 : 0), akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, ".concat(N40A, ")"), LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (editorExperiment('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), LAYOUT_SECTION_MARGIN, gridMediumMaxWidth, viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, ".concat(N50A, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.Border, SelectionStyle.Blanket]), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode);
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 + (editorExperiment('nested-dnd', true) ? 8 : 0), 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);
21
20
  };
package/dist/esm/ui/ContentStyles/media.js CHANGED
@@ -6,9 +6,8 @@ import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
6
6
  import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
7
7
  import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorSelectedBorderBoldSize, akEditorSelectedBoxShadow, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
8
8
  import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
9
- import { B200, N60, Y500 } from '@atlaskit/theme/colors';
10
9
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
11
- export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", " & [layout='full-width'] .", ",\n & [layout='wide'] .", " {\n\t\t\tmargin-left: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\n\t\t.media-extended-resize-experience[layout^='wrap-'] {\n\t\t\t// override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n\t\t\t// to prevent scroll bar\n\t\t\toverflow: visible !important;\n\t\t}\n\n\t\t& [layout^='wrap-'] + [layout^='wrap-'] {\n\t\t\tclear: none;\n\t\t\t& + p,\n\t\t\t& + div[class^='fabric-editor-align'],\n\t\t\t& + ul,\n\t\t\t& + ol,\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tclear: both !important;\n\t\t\t}\n\t\t\t& .", " {\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.mediaSingleView-content-wrap[layout^='wrap-'] {\n\t\t\tmax-width: 100%;\n\t\t\t// overwrite default Prosemirror setting making it clear: both\n\t\t\tclear: inherit;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-left'] {\n\t\t\tfloat: left;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-right'] {\n\t\t\tfloat: right;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-right']\n\t\t\t+ .mediaSingleView-content-wrap[layout='wrap-left'] {\n\t\t\tclear: both;\n\t\t}\n\n\t\t/* Larger margins for resize handlers when at depth 0 of the document */\n\t\t& > .mediaSingleView-content-wrap {\n\t\t\t.richMedia-resize-handle-right {\n\t\t\t\tmargin-right: -", "px;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-left {\n\t\t\t\tmargin-left: -", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.richMedia-resize-handle-right,\n\t.richMedia-resize-handle-left {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\t/* vertical align */\n\t\tjustify-content: center;\n\t}\n\n\t.richMedia-resize-handle-right {\n\t\talign-items: flex-end;\n\t\tpadding-right: ", ";\n\t\tmargin-right: -", "px;\n\t}\n\n\t.richMedia-resize-handle-left {\n\t\talign-items: flex-start;\n\t\tpadding-left: ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.richMedia-resize-handle-right::after,\n\t.richMedia-resize-handle-left::after {\n\t\tcontent: ' ';\n\t\tdisplay: flex;\n\t\twidth: 3px;\n\t\theight: 64px;\n\n\t\tborder-radius: 6px;\n\t}\n\n\t.", ":hover .richMedia-resize-handle-left::after,\n\t.", ":hover .richMedia-resize-handle-right::after {\n\t\tbackground: ", ";\n\t}\n\n\t.", " .richMedia-resize-handle-right::after,\n\t.", " .richMedia-resize-handle-left::after,\n\t.", " .richMedia-resize-handle-right:hover::after,\n\t.", " .richMedia-resize-handle-left:hover::after,\n\t.", ".is-resizing .richMedia-resize-handle-right::after,\n\t.", ".is-resizing .richMedia-resize-handle-left::after {\n\t\tbackground: ", ";\n\t}\n\n\t.__resizable_base__ {\n\t\tleft: unset !important;\n\t\twidth: auto !important;\n\t\theight: auto !important;\n\t}\n\n\t/* Danger when top level node for smart cards / inline links */\n\t.danger > div > div > .media-card-frame,\n\t.danger > span > a {\n\t\tbackground-color: ", ";\n\t\tbox-shadow: 0px 0px 0px ", "px\n\t\t\t", ";\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tbox-shadow 0s;\n\t}\n\t/* Danger when nested node or common */\n\t.danger {\n\t\t/* Media single */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t/* Media single video player */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t/* New file experience */\n\t\t.", " .", " {\n\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t}\n\t\t/* Media resize legacy handlers */\n\t\t.richMedia-resize-handle-right::after,\n\t\t.richMedia-resize-handle-left::after {\n\t\t\tbackground: ", " !important;\n\t\t}\n\t\t/* Media resize new handlers */\n\t\t.resizer-handle-thumb {\n\t\t\tbackground: ", " !important;\n\t\t}\n\n\t\t/* Smart cards */\n\t\tdiv div .media-card-frame,\n\t\t.inlineCardView-content-wrap > span > a {\n\t\t\tbackground-color: ", "; /* R75 with 50% opactiy */\n\t\t\ttransition: background-color 0s;\n\t\t}\n\n\t\tdiv div .media-card-frame::after {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t.warning {\n\t\t/* Media single */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t.", " .", " {\n\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t}\n\n\t\t.resizer-handle-thumb {\n\t\t\tbackground: ", " !important;\n\t\t}\n\t}\n\n\t/* When clicking drag handle, mediaGroup node will be selected. Hence we need to apply selected style to each media node */\n\t.mediaGroupView-content-wrap.", " #newFileExperienceWrapper {\n\t\tbox-shadow: ", ";\n\t}\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, mediaInlineImageStyles, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, ".concat(N60, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, ".concat(B200, ")"), "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, ".concat(Y500, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, ".concat(Y500, ")"), "var(--ds-icon-warning, ".concat(Y500, ")"), akEditorSelectedNodeClassName, akEditorSelectedBoxShadow);
10
+ export var mediaStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", " & [layout='full-width'] .", ",\n & [layout='wide'] .", " {\n\t\t\tmargin-left: 50%;\n\t\t\ttransform: translateX(-50%);\n\t\t}\n\n\t\t.media-extended-resize-experience[layout^='wrap-'] {\n\t\t\t// override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle\n\t\t\t// to prevent scroll bar\n\t\t\toverflow: visible !important;\n\t\t}\n\n\t\t& [layout^='wrap-'] + [layout^='wrap-'] {\n\t\t\tclear: none;\n\t\t\t& + p,\n\t\t\t& + div[class^='fabric-editor-align'],\n\t\t\t& + ul,\n\t\t\t& + ol,\n\t\t\t& + h1,\n\t\t\t& + h2,\n\t\t\t& + h3,\n\t\t\t& + h4,\n\t\t\t& + h5,\n\t\t\t& + h6 {\n\t\t\t\tclear: both !important;\n\t\t\t}\n\t\t\t& .", " {\n\t\t\t\tmargin-left: 0;\n\t\t\t\tmargin-right: 0;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\n\t\t.mediaSingleView-content-wrap[layout^='wrap-'] {\n\t\t\tmax-width: 100%;\n\t\t\t// overwrite default Prosemirror setting making it clear: both\n\t\t\tclear: inherit;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-left'] {\n\t\t\tfloat: left;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-right'] {\n\t\t\tfloat: right;\n\t\t}\n\n\t\t.mediaSingleView-content-wrap[layout='wrap-right']\n\t\t\t+ .mediaSingleView-content-wrap[layout='wrap-left'] {\n\t\t\tclear: both;\n\t\t}\n\n\t\t/* Larger margins for resize handlers when at depth 0 of the document */\n\t\t& > .mediaSingleView-content-wrap {\n\t\t\t.richMedia-resize-handle-right {\n\t\t\t\tmargin-right: -", "px;\n\t\t\t}\n\t\t\t.richMedia-resize-handle-left {\n\t\t\t\tmargin-left: -", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t.richMedia-resize-handle-right,\n\t.richMedia-resize-handle-left {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\t/* vertical align */\n\t\tjustify-content: center;\n\t}\n\n\t.richMedia-resize-handle-right {\n\t\talign-items: flex-end;\n\t\tpadding-right: ", ";\n\t\tmargin-right: -", "px;\n\t}\n\n\t.richMedia-resize-handle-left {\n\t\talign-items: flex-start;\n\t\tpadding-left: ", ";\n\t\tmargin-left: -", "px;\n\t}\n\n\t.richMedia-resize-handle-right::after,\n\t.richMedia-resize-handle-left::after {\n\t\tcontent: ' ';\n\t\tdisplay: flex;\n\t\twidth: 3px;\n\t\theight: 64px;\n\n\t\tborder-radius: 6px;\n\t}\n\n\t.", ":hover .richMedia-resize-handle-left::after,\n\t.", ":hover .richMedia-resize-handle-right::after {\n\t\tbackground: ", ";\n\t}\n\n\t.", " .richMedia-resize-handle-right::after,\n\t.", " .richMedia-resize-handle-left::after,\n\t.", " .richMedia-resize-handle-right:hover::after,\n\t.", " .richMedia-resize-handle-left:hover::after,\n\t.", ".is-resizing .richMedia-resize-handle-right::after,\n\t.", ".is-resizing .richMedia-resize-handle-left::after {\n\t\tbackground: ", ";\n\t}\n\n\t.__resizable_base__ {\n\t\tleft: unset !important;\n\t\twidth: auto !important;\n\t\theight: auto !important;\n\t}\n\n\t/* Danger when top level node for smart cards / inline links */\n\t.danger > div > div > .media-card-frame,\n\t.danger > span > a {\n\t\tbackground-color: ", ";\n\t\tbox-shadow: 0px 0px 0px ", "px\n\t\t\t", ";\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tbox-shadow 0s;\n\t}\n\t/* Danger when nested node or common */\n\t.danger {\n\t\t/* Media single */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t/* Media single video player */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\t\t/* New file experience */\n\t\t.", " .", " {\n\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t}\n\t\t/* Media resize legacy handlers */\n\t\t.richMedia-resize-handle-right::after,\n\t\t.richMedia-resize-handle-left::after {\n\t\t\tbackground: ", " !important;\n\t\t}\n\t\t/* Media resize new handlers */\n\t\t.resizer-handle-thumb {\n\t\t\tbackground: ", " !important;\n\t\t}\n\n\t\t/* Smart cards */\n\t\tdiv div .media-card-frame,\n\t\t.inlineCardView-content-wrap > span > a {\n\t\t\tbackground-color: ", "; /* R75 with 50% opactiy */\n\t\t\ttransition: background-color 0s;\n\t\t}\n\n\t\tdiv div .media-card-frame::after {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\t.warning {\n\t\t/* Media single */\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t.", " .", "::after {\n\t\t\tborder: 1px solid ", ";\n\t\t}\n\n\t\t.", " .", " {\n\t\t\tbox-shadow: 0 0 0 1px ", " !important;\n\t\t}\n\n\t\t.resizer-handle-thumb {\n\t\t\tbackground: ", " !important;\n\t\t}\n\t}\n\n\t/* When clicking drag handle, mediaGroup node will be selected. Hence we need to apply selected style to each media node */\n\t.mediaGroupView-content-wrap.", " #newFileExperienceWrapper {\n\t\tbox-shadow: ", ";\n\t}\n"])), mediaSingleSharedStyle, richMediaClassName, richMediaClassName, richMediaClassName, mediaInlineImageStyles, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPaddingWide, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, "var(--ds-space-150, 12px)", akEditorMediaResizeHandlerPadding, richMediaClassName, richMediaClassName, "var(--ds-border, #091E4224)", akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, "var(--ds-border-focused, #388BFF)", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), akEditorSelectedBorderBoldSize, "var(--ds-border-danger, ".concat(akEditorDeleteBorder, ")"), richMediaClassName, fileCardImageViewSelector, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, inlinePlayerClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), richMediaClassName, newFileExperienceClassName, "var(--ds-border-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-icon-danger, ".concat(akEditorDeleteIconColor, ")"), "var(--ds-blanket-danger, rgb(255, 189, 173, 0.5))", richMediaClassName, fileCardImageViewSelector, "var(--ds-border-warning, #E56910)", richMediaClassName, inlinePlayerClassName, "var(--ds-border-warning, #E56910)", richMediaClassName, newFileExperienceClassName, "var(--ds-border-warning, #E56910)", "var(--ds-icon-warning, #E56910)", akEditorSelectedNodeClassName, akEditorSelectedBoxShadow);
12
11
 
13
12
  /* `left: unset` above is to work around Chrome bug where rendering a div with
14
13
  * that style applied inside a container that has a scroll, causes any svgs on
package/dist/esm/ui/ContextPanel/index.js CHANGED
@@ -22,7 +22,6 @@ import Transition from 'react-transition-group/Transition';
22
22
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
23
23
  import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
24
24
  import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
25
- import { N30 } from '@atlaskit/theme/colors';
26
25
  var ANIM_SPEED_MS = 500;
27
26
  var panelHidden = css({
28
27
  width: 0
@@ -36,7 +35,7 @@ export var panel = css({
36
35
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
37
36
  transition: "width ".concat(ANIM_SPEED_MS, "ms ").concat(akEditorSwoopCubicBezier),
38
37
  overflow: 'hidden',
39
- boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, ".concat(N30, ")"))
38
+ boxShadow: "inset 2px 0 0 0 ".concat("var(--ds-border, #091E4224)")
40
39
  });
41
40
 
42
41
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
package/dist/esm/ui/ToolbarFeedback/styles.js CHANGED
@@ -1,8 +1,6 @@
1
1
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
2
2
  import { css } from '@emotion/react';
3
3
  import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
4
- import { N400, N60A, P400 } from '@atlaskit/theme/colors';
5
- import { borderRadius } from '@atlaskit/theme/constants';
6
4
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
7
5
  export var buttonContent = css({
8
6
  display: 'flex',
@@ -19,10 +17,10 @@ export var wrapper = css({
19
17
 
20
18
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
21
19
  export var confirmationPopup = css({
22
- background: "var(--ds-surface-overlay, #fff)",
20
+ background: "var(--ds-surface-overlay, #FFFFFF)",
23
21
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
24
- borderRadius: "".concat(borderRadius(), "px"),
25
- boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"),
22
+ borderRadius: "var(--ds-border-radius, 3px)",
23
+ boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #091E4226, 0px 0px 1px #091E424f)",
26
24
  display: 'flex',
27
25
  flexDirection: 'column',
28
26
  boxSizing: 'border-box',
@@ -38,7 +36,7 @@ export var confirmationText = css({
38
36
  fontSize: relativeFontSizeToBase16(14),
39
37
  wordSpacing: '4px',
40
38
  lineHeight: '22px',
41
- color: "var(--ds-text-subtle, ".concat(N400, ")"),
39
+ color: "var(--ds-text-subtle, #44546F)",
42
40
  marginTop: "var(--ds-space-400, 32px)",
43
41
  padding: "var(--ds-space-250, 20px)",
44
42
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
@@ -57,7 +55,7 @@ export var confirmationText = css({
57
55
 
58
56
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
59
57
  export var confirmationHeader = css({
60
- backgroundColor: "var(--ds-background-discovery-bold, ".concat(P400, ")"),
58
+ backgroundColor: "var(--ds-background-discovery-bold, #6E5DC6)",
61
59
  height: '100px',
62
60
  width: '100%',
63
61
  display: 'inline-block'
package/dist/esm/ui/WithFlash/index.js CHANGED
@@ -15,21 +15,20 @@ import React from 'react';
15
15
 
16
16
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
17
17
  import { css, jsx, keyframes } from '@emotion/react';
18
- import { R100 } from '@atlaskit/theme/colors';
19
18
  var pulseBackground = keyframes({
20
19
  '50%': {
21
- backgroundColor: "var(--ds-blanket-danger, ".concat(R100, ")")
20
+ backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
22
21
  }
23
22
  });
24
23
  var pulseBackgroundReverse = keyframes({
25
24
  '0%': {
26
- backgroundColor: "var(--ds-blanket-danger, ".concat(R100, ")")
25
+ backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
27
26
  },
28
27
  '50%': {
29
28
  backgroundColor: 'auto'
30
29
  },
31
30
  '100%': {
32
- backgroundColor: "var(--ds-blanket-danger, ".concat(R100, ")")
31
+ backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
33
32
  }
34
33
  });
35
34
  var flashWrapper = css({
package/dist/esm/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "197.7.0";
2
+ export var version = "197.7.2";
package/dist/types/create-editor/create-universal-preset.d.ts CHANGED
@@ -294,7 +294,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
294
294
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
295
295
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
296
296
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
297
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
297
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
298
298
  };
299
299
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
300
300
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
@@ -638,7 +638,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
638
638
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
639
639
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
640
640
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
641
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
641
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
642
642
  };
643
643
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
644
644
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
@@ -1622,7 +1622,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
1622
1622
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
1623
1623
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
1624
1624
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
1625
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
1625
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
1626
1626
  };
1627
1627
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
1628
1628
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
@@ -2281,7 +2281,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
2281
2281
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
2282
2282
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
2283
2283
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
2284
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
2284
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
2285
2285
  };
2286
2286
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
2287
2287
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
@@ -3143,7 +3143,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
3143
3143
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
3144
3144
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
3145
3145
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
3146
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
3146
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
3147
3147
  };
3148
3148
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
3149
3149
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
@@ -3577,7 +3577,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
3577
3577
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
3578
3578
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
3579
3579
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
3580
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
3580
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
3581
3581
  };
3582
3582
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
3583
3583
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
@@ -4313,7 +4313,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
4313
4313
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
4314
4314
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
4315
4315
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
4316
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
4316
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
4317
4317
  };
4318
4318
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
4319
4319
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
@@ -4659,7 +4659,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
4659
4659
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
4660
4660
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
4661
4661
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
4662
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
4662
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
4663
4663
  };
4664
4664
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
4665
4665
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
@@ -5243,7 +5243,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
5243
5243
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
5244
5244
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
5245
5245
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
5246
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
5246
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
5247
5247
  };
5248
5248
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
5249
5249
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
@@ -5819,7 +5819,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
5819
5819
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
5820
5820
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
5821
5821
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
5822
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
5822
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
5823
5823
  };
5824
5824
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
5825
5825
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
@@ -6163,7 +6163,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
6163
6163
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
6164
6164
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
6165
6165
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
6166
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
6166
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
6167
6167
  };
6168
6168
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
6169
6169
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
package/dist/types/editor.d.ts CHANGED
@@ -11,6 +11,13 @@ export type { FeedbackInfo } from '@atlaskit/editor-common/types';
11
11
  interface EditorPropsWithInitialPluginConfiguration extends EditorProps {
12
12
  initialPluginConfiguration?: InitialPluginConfiguration;
13
13
  }
14
+ /**
15
+ * @deprecated - Please use the `ComposableEditor` component instead.
16
+ * We strongly encourage the use of custom presets, however your easiest migration path is to use the `useUniversalPreset` hook.
17
+ * The `ComposableEditor` component is a more flexible and customizable alternative to the `Editor` component.
18
+ * It allows you to create an editor with a custom set of plugins and configurations.
19
+ * For more information, see the documentation for the `ComposableEditor` component here: https://atlaskit.atlassian.com/packages/editor/editor-core
20
+ */
14
21
  export default class Editor extends React.Component<EditorPropsWithInitialPluginConfiguration> {
15
22
  static defaultProps: EditorProps;
16
23
  constructor(props: EditorPropsWithInitialPluginConfiguration);
package/dist/types/presets/default.d.ts CHANGED
@@ -267,7 +267,7 @@ export declare function createDefaultPreset(options: DefaultPresetPluginOptions)
267
267
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
268
268
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
269
269
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
270
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
270
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
271
271
  };
272
272
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
273
273
  pluginConfiguration: FeatureFlags;
@@ -613,7 +613,7 @@ export declare function createDefaultPreset(options: DefaultPresetPluginOptions)
613
613
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
614
614
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
615
615
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
616
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
616
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
617
617
  };
618
618
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
619
619
  pluginConfiguration: FeatureFlags;
@@ -1197,7 +1197,7 @@ export declare function createDefaultPreset(options: DefaultPresetPluginOptions)
1197
1197
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
1198
1198
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
1199
1199
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
1200
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
1200
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
1201
1201
  };
1202
1202
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
1203
1203
  pluginConfiguration: FeatureFlags;
@@ -1773,7 +1773,7 @@ export declare function createDefaultPreset(options: DefaultPresetPluginOptions)
1773
1773
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
1774
1774
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
1775
1775
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
1776
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
1776
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
1777
1777
  };
1778
1778
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
1779
1779
  pluginConfiguration: FeatureFlags;
@@ -2117,7 +2117,7 @@ export declare function createDefaultPreset(options: DefaultPresetPluginOptions)
2117
2117
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
2118
2118
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
2119
2119
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
2120
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
2120
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
2121
2121
  };
2122
2122
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
2123
2123
  pluginConfiguration: FeatureFlags;
@@ -2759,7 +2759,7 @@ export declare function useDefaultPreset(props: DefaultPresetPluginOptions): Edi
2759
2759
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
2760
2760
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
2761
2761
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
2762
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
2762
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
2763
2763
  };
2764
2764
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
2765
2765
  pluginConfiguration: FeatureFlags;
@@ -3105,7 +3105,7 @@ export declare function useDefaultPreset(props: DefaultPresetPluginOptions): Edi
3105
3105
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
3106
3106
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
3107
3107
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
3108
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
3108
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
3109
3109
  };
3110
3110
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
3111
3111
  pluginConfiguration: FeatureFlags;
@@ -3689,7 +3689,7 @@ export declare function useDefaultPreset(props: DefaultPresetPluginOptions): Edi
3689
3689
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
3690
3690
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
3691
3691
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
3692
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
3692
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
3693
3693
  };
3694
3694
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
3695
3695
  pluginConfiguration: FeatureFlags;
@@ -4265,7 +4265,7 @@ export declare function useDefaultPreset(props: DefaultPresetPluginOptions): Edi
4265
4265
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
4266
4266
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
4267
4267
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
4268
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
4268
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
4269
4269
  };
4270
4270
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
4271
4271
  pluginConfiguration: FeatureFlags;
@@ -4609,7 +4609,7 @@ export declare function useDefaultPreset(props: DefaultPresetPluginOptions): Edi
4609
4609
  (descriptor: import("react-intl-next").MessageDescriptor, values?: Record<string, string | number | boolean | {} | import("react").ReactPortal | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | Date | import("intl-messageformat").FormatXMLElementFn<import("react").ReactNode, import("react").ReactNode> | null | undefined> | undefined, opts?: import("intl-messageformat").Options | undefined): import("react").ReactNode;
4610
4610
  } | undefined) => import("@atlaskit/editor-common/types").EditorCommand;
4611
4611
  showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: import("@atlaskit/editor-plugin-block-controls").HandleOptions) => import("@atlaskit/editor-common/types").EditorCommand;
4612
- setNodeDragged: (posNumber: number, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
4612
+ setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => import("@atlaskit/editor-common/types").EditorCommand;
4613
4613
  };
4614
4614
  }, undefined>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"featureFlags", {
4615
4615
  pluginConfiguration: FeatureFlags;