@atlaskit/editor-core 207.6.0 → 207.7.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.
Files changed (47) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/ui/Appearance/FullPage/FullPage.js +13 -1
  3. package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +7 -1
  4. package/dist/cjs/ui/ContentStyles/media.js +1 -1
  5. package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +17 -18
  6. package/dist/cjs/ui/EditorContentContainer/styles/codeBlockStyles.js +216 -0
  7. package/dist/cjs/ui/EditorContentContainer/styles/firstBlockNodeStyles.js +39 -0
  8. package/dist/cjs/ui/EditorContentContainer/styles/overflowShadowStyles.js +13 -0
  9. package/dist/cjs/ui/EditorContentContainer/styles/selectionStyles.js +78 -0
  10. package/dist/cjs/version-wrapper.js +1 -1
  11. package/dist/es2019/ui/Appearance/FullPage/FullPage.js +13 -1
  12. package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +7 -1
  13. package/dist/es2019/ui/ContentStyles/media.js +1 -0
  14. package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +13 -57
  15. package/dist/es2019/ui/EditorContentContainer/styles/codeBlockStyles.js +266 -0
  16. package/dist/es2019/ui/EditorContentContainer/styles/firstBlockNodeStyles.js +41 -0
  17. package/dist/es2019/ui/EditorContentContainer/styles/overflowShadowStyles.js +47 -0
  18. package/dist/es2019/ui/EditorContentContainer/styles/selectionStyles.js +71 -0
  19. package/dist/es2019/version-wrapper.js +1 -1
  20. package/dist/esm/ui/Appearance/FullPage/FullPage.js +13 -1
  21. package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +7 -1
  22. package/dist/esm/ui/ContentStyles/media.js +1 -1
  23. package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +16 -17
  24. package/dist/esm/ui/EditorContentContainer/styles/codeBlockStyles.js +208 -0
  25. package/dist/esm/ui/EditorContentContainer/styles/firstBlockNodeStyles.js +32 -0
  26. package/dist/esm/ui/EditorContentContainer/styles/overflowShadowStyles.js +6 -0
  27. package/dist/esm/ui/EditorContentContainer/styles/selectionStyles.js +71 -0
  28. package/dist/esm/version-wrapper.js +1 -1
  29. package/dist/types/create-editor/create-universal-preset.d.ts +3 -12
  30. package/dist/types/presets/universal.d.ts +3 -12
  31. package/dist/types/presets/useUniversalPreset.d.ts +3 -12
  32. package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts +1 -1
  33. package/dist/types/ui/EditorContentContainer/EditorContentContainer.d.ts +0 -1
  34. package/dist/types/ui/EditorContentContainer/styles/codeBlockStyles.d.ts +14 -0
  35. package/dist/types/ui/EditorContentContainer/styles/firstBlockNodeStyles.d.ts +2 -0
  36. package/dist/types/ui/EditorContentContainer/styles/overflowShadowStyles.d.ts +1 -0
  37. package/dist/types/ui/EditorContentContainer/styles/selectionStyles.d.ts +5 -0
  38. package/dist/types-ts4.5/create-editor/create-universal-preset.d.ts +3 -12
  39. package/dist/types-ts4.5/presets/universal.d.ts +3 -12
  40. package/dist/types-ts4.5/presets/useUniversalPreset.d.ts +3 -12
  41. package/dist/types-ts4.5/ui/Appearance/FullPage/FullPageContentArea.d.ts +1 -1
  42. package/dist/types-ts4.5/ui/EditorContentContainer/EditorContentContainer.d.ts +0 -1
  43. package/dist/types-ts4.5/ui/EditorContentContainer/styles/codeBlockStyles.d.ts +14 -0
  44. package/dist/types-ts4.5/ui/EditorContentContainer/styles/firstBlockNodeStyles.d.ts +2 -0
  45. package/dist/types-ts4.5/ui/EditorContentContainer/styles/overflowShadowStyles.d.ts +1 -0
  46. package/dist/types-ts4.5/ui/EditorContentContainer/styles/selectionStyles.d.ts +5 -0
  47. package/package.json +5 -5
package/dist/esm/ui/ContentStyles/media.js CHANGED
@@ -8,7 +8,7 @@ import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorDeleteIconColor
8
8
  import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
9
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
10
10
  export var mediaStyles = function mediaStyles() {
11
- return 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\tto 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.media-filmstrip-list-item {\n\t\tcursor: pointer;\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\n\t.ak-editor-no-interaction #newFileExperienceWrapper {\n\t\tbox-shadow: none;\n\t}\n"])), mediaSingleSharedStyleNew, 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);
11
+ return 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\tto 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.media-filmstrip-list-item {\n\t\tcursor: pointer;\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\n\t// Remove when cleaning up platform_editor_interaction_api_refactor\n\t.ak-editor-no-interaction #newFileExperienceWrapper {\n\t\tbox-shadow: none;\n\t}\n"])), mediaSingleSharedStyleNew, 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
12
  };
13
13
 
14
14
  /* `left: unset` above is to work around Chrome bug where rendering a div with
package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
2
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
3
3
  /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
4
4
  /* eslint-disable react-hooks/rules-of-hooks */
5
5
  /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
@@ -11,13 +11,11 @@ import React from 'react';
11
11
 
12
12
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
13
13
  import { css, jsx, useTheme } from '@emotion/react';
14
- import { browser } from '@atlaskit/editor-common/browser';
15
14
  import { telepointerStyle, telepointerStyleWithInitialOnly } from '@atlaskit/editor-common/collab';
16
15
  import { EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
17
16
  import { MentionSharedCssClassName } from '@atlaskit/editor-common/mention';
18
- import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
19
17
  import { gapCursorStyles } from '@atlaskit/editor-common/selection';
20
- import { CodeBlockSharedCssClassName, GRID_GUTTER, SmartCardSharedCssClassName, blockMarksSharedStyles, codeBlockInListSafariFix, dateSharedStyle, expandClassNames, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles, paragraphSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
18
+ import { GRID_GUTTER, blockMarksSharedStyles, dateSharedStyle, getSmartCardSharedStyles, gridStyles, indentationSharedStyles, listsSharedStyles, paragraphSharedStyles, shadowSharedStyle, smartCardSharedStyles, smartCardStyles, tasksAndDecisionsStyles, textColorStyles, unsupportedStyles, whitespaceSharedStyles } from '@atlaskit/editor-common/styles';
21
19
  import { blocktypeStyles } from '@atlaskit/editor-plugins/block-type/styles';
22
20
  import { findReplaceStyles } from '@atlaskit/editor-plugins/find-replace/styles';
23
21
  import { textHighlightStyle } from '@atlaskit/editor-plugins/paste-options-toolbar/styles';
@@ -29,7 +27,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
29
27
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
30
28
  import { useThemeObserver } from '@atlaskit/tokens';
31
29
  import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
32
- import { codeBlockStyles } from '../ContentStyles/code-block';
33
30
  import { dateStyles, dateVanillaStyles } from '../ContentStyles/date';
34
31
  import { expandStyles } from '../ContentStyles/expand';
35
32
  import { extensionStyles } from '../ContentStyles/extension';
@@ -39,8 +36,10 @@ import { taskDecisionStyles, vanillaTaskDecisionIconWithoutVisualRefresh as vani
39
36
  import { aiPanelBaseStyles, aiPanelDarkStyles } from './styles/ai-panel';
40
37
  import { annotationStyles } from './styles/annotationStyles';
41
38
  import { backgroundColorStyles } from './styles/backgroundColorStyles';
39
+ import { codeBlockStyles, firstCodeBlockWithNoMargin, firstCodeBlockWithNoMarginOld } from './styles/codeBlockStyles';
42
40
  import { codeMarkStyles } from './styles/codeMarkStyles';
43
41
  import { embedCardStyles } from './styles/embedCardStyles';
42
+ import { firstBlockNodeStyles, firstBlockNodeStylesOld } from './styles/firstBlockNodeStyles';
44
43
  import { layoutBaseStyles, layoutViewStyles } from './styles/layout';
45
44
  import { linkStyles, linkStylesOld } from './styles/link';
46
45
  import { mediaStyles } from './styles/mediaStyles';
@@ -92,7 +91,7 @@ var vanillaMentionsStyles = css({
92
91
  });
93
92
  var vanillaSelectionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t\t (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
94
93
  var mentionsStyles = css(_templateObject2 || (_templateObject2 = _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\t\t (in dark blue) have white text by default */\n\t 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)");
95
- var listsStyles = css(_templateObject3 || (_templateObject3 = _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\t// This prevents https://product-fabric.atlassian.net/browse/ED-20924\n\t&: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 : '');
94
+ var listsStyles = css(_templateObject3 || (_templateObject3 = _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\t}\n"])), "var(--ds-space-050, 4px)", blockNodesVerticalMargin);
96
95
  var reactEmojiStyles = css(_templateObject4 || (_templateObject4 = _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]));
97
96
  var emojiStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t[data-prosemirror-node-view-type='vanilla'] {\n\t\t.", " {\n\t\t\tdisplay: inline-block;\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tbackground: no-repeat transparent;\n\t\t\tdisplay: inline-block;\n\t\t\theight: ", "px;\n\t\t\tmax-height: ", "px;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t\tuser-select: all;\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_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, defaultEmojiHeight, defaultEmojiHeight, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
98
97
 
@@ -129,21 +128,13 @@ var placeholderWrapStyles = css({
129
128
  whiteSpace: 'nowrap'
130
129
  }
131
130
  });
132
- var firstBlockNodeStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), PanelSharedCssClassName.prefix, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, expandClassNames.prefix);
133
- var firstBlockNodeStylesNew = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), PanelSharedCssClassName.prefix, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, expandClassNames.prefix);
134
- export var fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
135
- if (fg('platform_editor_element_dnd_nested_fix_patch_6')) {
136
- return firstBlockNodeStylesNew;
137
- }
138
- return firstBlockNodeStyles;
139
- };
140
131
 
141
132
  // The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
142
133
  var akEditorBreakpointForSmallDevice = "1266px";
143
134
 
144
135
  // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
145
136
  var contentStyles = function contentStyles() {
146
- return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceSharedStyles, paragraphSharedStyles(), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(), codeMarkStyles, textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
137
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, whitespaceSharedStyles, paragraphSharedStyles(), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('editor_request_to_edit_task') ? null : css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", placeholderTextStyles, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles, blocktypeStyles(), codeMarkStyles, textColorStyles, backgroundColorStyles, listsStyles, ruleStyles, mediaStyles, fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
147
138
  exposure: false
148
139
  }) && vanillaMentionsStyles, editorExperiment('platform_editor_vanilla_dom', true, {
149
140
  exposure: false
@@ -157,7 +148,7 @@ var contentStyles = function contentStyles() {
157
148
  exposure: false
158
149
  }) && fg('platform-visual-refresh-icons') && vanillaDecisionIconWithVisualRefresh, editorExperiment('platform_editor_vanilla_dom', true, {
159
150
  exposure: false
160
- }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationStyles, smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, fixBlockControlStylesSSR(), !fg('platform-visual-refresh-icons') ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
151
+ }) && !fg('platform-visual-refresh-icons') && vanillaDecisionIconWithoutVisualRefresh, statusStyles, editorExperiment('platform_editor_vanilla_dom', true) ? vanillaStatusStyles() : null, annotationStyles, smartCardStyles(), fg('platform-linking-visual-refresh-v1') ? getSmartCardSharedStyles() : smartCardSharedStyles, editorExperiment('platform_editor_vanilla_dom', true) ? dateVanillaStyles : null, dateStyles, embedCardStyles, unsupportedStyles, resizerStyles, !fg('platform-visual-refresh-icons') ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
161
152
  };
162
153
  var CommentEditorMargin = 14;
163
154
 
@@ -237,7 +228,15 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
237
228
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
238
229
  colorMode === 'dark' && aiPanelDarkStyles,
239
230
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
240
- viewMode === 'view' && layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, fg('platform_editor_ssr_fix_lists') && listLayoutShiftFix],
231
+ viewMode === 'view' && layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, fg('platform_editor_ssr_fix_lists') && listLayoutShiftFix, fg('platform_editor_nested_dnd_styles_changes') ?
232
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
233
+ firstCodeBlockWithNoMargin :
234
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
235
+ firstCodeBlockWithNoMarginOld, fg('platform_editor_element_dnd_nested_fix_patch_6') ?
236
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
237
+ firstBlockNodeStyles :
238
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
239
+ firstBlockNodeStylesOld],
241
240
  "data-editor-scroll-container": isScrollable ? 'true' : undefined,
242
241
  "data-testid": "editor-content-container",
243
242
  style: {
package/dist/esm/ui/EditorContentContainer/styles/codeBlockStyles.js ADDED
@@ -0,0 +1,208 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
3
+
4
+ import { overflowShadowStyles } from './overflowShadowStyles';
5
+ import { blanketSelectionStyles, boxShadowSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
6
+ export var CodeBlockSharedCssClassName = {
7
+ CODEBLOCK_CONTAINER: 'code-block',
8
+ CODEBLOCK_START: 'code-block--start',
9
+ CODEBLOCK_END: 'code-block--end',
10
+ CODEBLOCK_CONTENT_WRAPPER: 'code-block-content-wrapper',
11
+ CODEBLOCK_LINE_NUMBER_GUTTER: 'line-number-gutter',
12
+ CODEBLOCK_CONTENT: 'code-content',
13
+ DS_CODEBLOCK: '[data-ds--code--code-block]',
14
+ CODEBLOCK_CONTENT_WRAPPED: 'code-content--wrapped',
15
+ CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET: 'code-content__line-number--wrapped'
16
+ };
17
+ var fontSize14px = "".concat(14 / 16, "rem");
18
+ var blockNodesVerticalMargin = '0.75rem';
19
+ var gutterDangerOverlay = css({
20
+ '&::after': {
21
+ height: '100%',
22
+ content: "''",
23
+ position: 'absolute',
24
+ left: 0,
25
+ top: 0,
26
+ width: '24px',
27
+ backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
28
+ }
29
+ });
30
+
31
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
32
+ export var codeBlockStyles = css({
33
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
34
+ '.ProseMirror': _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED, " > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, " > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
35
+ marginRight: "var(--ds-space-100, 8px)",
36
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
37
+ code: {
38
+ display: 'block',
39
+ wordBreak: 'break-word',
40
+ whiteSpace: 'pre-wrap'
41
+ }
42
+ }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, " > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
43
+ display: 'flex',
44
+ flex: 1,
45
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
46
+ code: {
47
+ flexGrow: 1,
48
+ whiteSpace: 'pre'
49
+ }
50
+ }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
51
+ '--ds--code--bg-color': 'transparent',
52
+ position: 'relative',
53
+ backgroundColor: "var(--ds-surface-raised, #FFFFFF)",
54
+ borderRadius: "var(--ds-border-radius, 3px)",
55
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
56
+ margin: "".concat(blockNodesVerticalMargin, " 0 0 0"),
57
+ fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
58
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
59
+ minWidth: 48,
60
+ cursor: 'pointer',
61
+ clear: 'both',
62
+ // This is necessary to allow for arrow key navigation in/out of code blocks in Firefox.
63
+ whiteSpace: 'normal',
64
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
65
+ '.code-block-gutter-pseudo-element::before': {
66
+ content: 'attr(data-label)'
67
+ }
68
+ }, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_START), {
69
+ position: 'absolute',
70
+ visibility: 'hidden',
71
+ height: '1.5rem',
72
+ top: 0,
73
+ left: 0
74
+ }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_END), {
75
+ position: 'absolute',
76
+ visibility: 'hidden',
77
+ height: '1.5rem',
78
+ bottom: 0,
79
+ right: 0
80
+ }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER), [
81
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
82
+ overflowShadowStyles, {
83
+ position: 'relative',
84
+ backgroundColor: "var(--ds-background-neutral, #091E420F)",
85
+ display: 'flex',
86
+ borderRadius: "var(--ds-border-radius, 3px)",
87
+ width: '100%',
88
+ counterReset: 'line',
89
+ overflowX: 'auto',
90
+ backgroundRepeat: 'no-repeat',
91
+ backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll',
92
+ backgroundSize: "var(--ds-space-300, 24px)".concat(" 100%,\n\t ", "var(--ds-space-300, 24px)", " 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t 1px 100%,\n\t ", "var(--ds-space-100, 8px)", " 100%,\n\t 1px 100%"),
93
+ backgroundPosition: "0 0,\n\t 0 0,\n 100% 0,\n 100% 0,\n 100% 0,\n 100% 0,\n\t 0 0,\n\t 0 0",
94
+ // Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers.
95
+ overflowY: 'hidden'
96
+ }]), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER), {
97
+ backgroundColor: "var(--ds-background-neutral, #091E420F)",
98
+ position: 'relative',
99
+ width: 'var(--lineNumberGutterWidth, 2rem)',
100
+ padding: "var(--ds-space-100, 8px)",
101
+ flexShrink: 0,
102
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
103
+ fontSize: fontSize14px,
104
+ boxSizing: 'content-box'
105
+ }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "::before"), {
106
+ content: "'1'",
107
+ visibility: 'hidden',
108
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
109
+ fontSize: fontSize14px,
110
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
111
+ lineHeight: '1.5rem'
112
+ }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
113
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
114
+ code: {
115
+ tabSize: 4,
116
+ cursor: 'text',
117
+ color: "var(--ds-text, #172B4D)",
118
+ borderRadius: "var(--ds-border-radius, 3px)",
119
+ margin: "var(--ds-space-100, 8px)",
120
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
121
+ fontSize: fontSize14px,
122
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
123
+ lineHeight: '1.5rem'
124
+ }
125
+ }), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET), {
126
+ pointerEvents: 'none',
127
+ userSelect: 'none',
128
+ width: 'var(--lineNumberGutterWidth, 2rem)',
129
+ left: 0,
130
+ position: 'absolute',
131
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
132
+ fontSize: fontSize14px,
133
+ padding: "0px ".concat("var(--ds-space-100, 8px)"),
134
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
135
+ lineHeight: '1.5rem',
136
+ textAlign: 'right',
137
+ color: "var(--ds-text-subtlest, #505F79)",
138
+ boxSizing: 'content-box'
139
+ })), "li", {
140
+ // if same list item has multiple code blocks we need top margin for all but first
141
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
142
+ '> .code-block': {
143
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
144
+ margin: "".concat(blockNodesVerticalMargin, " 0 0 0")
145
+ },
146
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
147
+ '> .code-block:first-child, > .ProseMirror-gapcursor:first-child + .code-block': {
148
+ marginTop: 0
149
+ },
150
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
151
+ '> div:last-of-type.code-block, > pre:last-of-type.code-block': {
152
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
153
+ marginBottom: blockNodesVerticalMargin
154
+ }
155
+ }), ".code-block.ak-editor-selected-node:not(.danger)", [
156
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
157
+ boxShadowSelectionStyles,
158
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
159
+ blanketSelectionStyles,
160
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
161
+ hideNativeBrowserTextSelectionStyles]), '.danger.code-block', _defineProperty(_defineProperty({
162
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
163
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-danger, #E2483D)")
164
+ }, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER), [{
165
+ backgroundColor: "var(--ds-background-danger, #FFECEB)",
166
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
167
+ color: "var(--ds-text-danger, #AE2E24)"
168
+ }, gutterDangerOverlay]), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
169
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
170
+ backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
171
+ })), '.danger .code-block', _defineProperty(_defineProperty({}, ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER), [{
172
+ backgroundColor: "var(--ds-background-danger, #FFECEB)",
173
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
174
+ color: "var(--ds-text-danger, #AE2E24)"
175
+ }, gutterDangerOverlay]), ".".concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTENT), {
176
+ backgroundColor: "var(--ds-blanket-danger, #EF5C4814)"
177
+ }))
178
+ });
179
+
180
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
181
+ export var firstCodeBlockWithNoMargin = css({
182
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
183
+ '.ProseMirror': {
184
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
185
+ '.ak-editor-panel__content': {
186
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
187
+ '> .code-block:first-child, > .ProseMirror-widget:first-child + .code-block, > .ProseMirror-widget:first-child + .ProseMirror-widget + .code-block': {
188
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space,@atlaskit/ui-styling-standard/no-important-styles
189
+ margin: '0!important'
190
+ }
191
+ }
192
+ }
193
+ });
194
+
195
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
196
+ export var firstCodeBlockWithNoMarginOld = css({
197
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
198
+ '.ProseMirror': {
199
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
200
+ '.ak-editor-panel__content': {
201
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
202
+ '> .code-block:first-child': {
203
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-space,@atlaskit/ui-styling-standard/no-important-styles
204
+ margin: '0!important'
205
+ }
206
+ }
207
+ }
208
+ });
package/dist/esm/ui/EditorContentContainer/styles/firstBlockNodeStyles.js ADDED
@@ -0,0 +1,32 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
3
+
4
+ import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
5
+ import { expandClassNames, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
6
+ import { CodeBlockSharedCssClassName } from './codeBlockStyles';
7
+
8
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
9
+ export var firstBlockNodeStylesOld = css({
10
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
11
+ '.ProseMirror': _defineProperty(_defineProperty({}, "> .".concat(PanelSharedCssClassName.prefix, ", > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, ", > .").concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, ", > div[data-task-list-local-id], > div[data-layout-section], > .").concat(expandClassNames.prefix), {
12
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
13
+ '&:first-child': {
14
+ marginTop: 0
15
+ }
16
+ }), '> hr:first-of-type', {
17
+ marginTop: 0
18
+ })
19
+ });
20
+
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
22
+ export var firstBlockNodeStyles = css({
23
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
24
+ '.ProseMirror': _defineProperty(_defineProperty({}, "> .".concat(PanelSharedCssClassName.prefix, ", > .").concat(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, ", > .").concat(SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, ", > div[data-task-list-local-id], > div[data-layout-section], > .").concat(expandClassNames.prefix), {
25
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
26
+ '&:first-child': {
27
+ marginTop: 0
28
+ }
29
+ }), '> hr:first-child, > .ProseMirror-widget:first-child + hr', {
30
+ marginTop: 0
31
+ })
32
+ });
package/dist/esm/ui/EditorContentContainer/styles/overflowShadowStyles.js ADDED
@@ -0,0 +1,6 @@
1
+ import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
2
+
3
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
4
+ export var overflowShadowStyles = css({
5
+ backgroundImage: "\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t".concat("var(--ds-background-neutral, #091E420F)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-300, 24px)", ",\n\t\t\ttransparent ", "var(--ds-space-300, 24px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-background-neutral, #091E420F)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-surface-raised, #FFFFFF)", " ", "var(--ds-space-100, 8px)", ",\n\t\t\ttransparent ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto left,\n\t\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t),\n\t\tlinear-gradient(\n\t\t\tto right,\n\t\t\t", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n\t\t\t", "var(--ds-UNSAFE-transparent, transparent)", " ", "var(--ds-space-100, 8px)", "\n\t\t)\n\t")
6
+ });
package/dist/esm/ui/EditorContentContainer/styles/selectionStyles.js ADDED
@@ -0,0 +1,71 @@
1
+ import { css } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
2
+
3
+ // TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
4
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
5
+ export var hideNativeBrowserTextSelectionStyles = css({
6
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
7
+ '&::selection,*::selection': {
8
+ backgroundColor: 'transparent'
9
+ },
10
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-selectors
11
+ '&::-moz-selection,*::-moz-selection': {
12
+ backgroundColor: 'transparent'
13
+ }
14
+ });
15
+
16
+ // TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
17
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
18
+ export var borderSelectionStyles = css({
19
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
20
+ border: "1px solid ".concat("var(--ds-border-selected, #0C66E4)"),
21
+ // Fixes ED-15246: Trello card is visible through a border of a table border
22
+ '&::after': {
23
+ height: '100%',
24
+ content: '"\\00a0"',
25
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
26
+ background: "var(--ds-border-selected, #0C66E4)",
27
+ position: 'absolute',
28
+ right: -1,
29
+ top: 0,
30
+ bottom: 0,
31
+ width: 1,
32
+ border: 'none',
33
+ display: 'inline-block'
34
+ }
35
+ });
36
+
37
+ // TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
38
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
39
+ export var boxShadowSelectionStyles = css({
40
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
41
+ boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #0C66E4)"),
42
+ borderColor: 'transparent'
43
+ });
44
+
45
+ // TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
46
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
47
+ export var backgroundSelectionStyles = css({
48
+ backgroundColor: "var(--ds-background-selected, #E9F2FF)"
49
+ });
50
+
51
+ // TODO: ED-28075 - refactor selection styles to unblock Compiled CSS migration
52
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
53
+ export var blanketSelectionStyles = css({
54
+ position: 'relative',
55
+ // Fixes ED-9263, where emoji or inline card in panel makes selection go outside the panel
56
+ // in Safari. Looks like it's caused by user-select: all in the emoji element
57
+ '-webkit-user-select': 'text',
58
+ '&::before': {
59
+ position: 'absolute',
60
+ content: "''",
61
+ left: 0,
62
+ right: 0,
63
+ top: 0,
64
+ bottom: 0,
65
+ width: '100%',
66
+ pointerEvents: 'none',
67
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
68
+ zIndex: 12,
69
+ backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
70
+ }
71
+ });
package/dist/esm/version-wrapper.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export var name = "@atlaskit/editor-core";
2
- export var version = "207.6.0";
2
+ export var version = "207.7.0";
package/dist/types/create-editor/create-universal-preset.d.ts CHANGED
@@ -351,10 +351,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
351
351
  pluginConfiguration: import("@atlaskit/editor-common/types").FeatureFlags;
352
352
  sharedState: import("@atlaskit/editor-common/types").FeatureFlags;
353
353
  }, import("@atlaskit/editor-common/types").FeatureFlags>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"interaction", {
354
- sharedState: {
355
- hasHadInteraction: boolean;
356
- interactionState: "hasNotHadInteraction" | null;
357
- };
354
+ sharedState: import("@atlaskit/editor-plugins/interaction").SharedInteractionState;
358
355
  commands: {
359
356
  handleInteraction: import("@atlaskit/editor-common/types").EditorCommand;
360
357
  };
@@ -369,10 +366,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
369
366
  pluginConfiguration: import("@atlaskit/editor-plugins/selection").SelectionPluginOptions | undefined;
370
367
  actions: import("@atlaskit/editor-plugins/selection").EditorSelectionAPI;
371
368
  dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"interaction", {
372
- sharedState: {
373
- hasHadInteraction: boolean;
374
- interactionState: "hasNotHadInteraction" | null;
375
- };
369
+ sharedState: import("@atlaskit/editor-plugins/interaction").SharedInteractionState;
376
370
  commands: {
377
371
  handleInteraction: import("@atlaskit/editor-common/types").EditorCommand;
378
372
  };
@@ -1144,10 +1138,7 @@ export declare function createUniversalPreset({ props, prevProps, initialPluginC
1144
1138
  }, import("@atlaskit/editor-plugins/context-identifier").ContextIdentifierPluginOptions | undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"composition", {
1145
1139
  sharedState: import("@atlaskit/editor-plugins/composition").CompositionState;
1146
1140
  }, undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"interaction", {
1147
- sharedState: {
1148
- hasHadInteraction: boolean;
1149
- interactionState: "hasNotHadInteraction" | null;
1150
- };
1141
+ sharedState: import("@atlaskit/editor-plugins/interaction").SharedInteractionState;
1151
1142
  commands: {
1152
1143
  handleInteraction: import("@atlaskit/editor-common/types").EditorCommand;
1153
1144
  };
package/dist/types/presets/universal.d.ts CHANGED
@@ -403,10 +403,7 @@ export default function createUniversalPresetInternal({ appearance, props, featu
403
403
  pluginConfiguration: FeatureFlags;
404
404
  sharedState: FeatureFlags;
405
405
  }, FeatureFlags>>, import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"interaction", {
406
- sharedState: {
407
- hasHadInteraction: boolean;
408
- interactionState: "hasNotHadInteraction" | null;
409
- };
406
+ sharedState: import("@atlaskit/editor-plugins/interaction").SharedInteractionState;
410
407
  commands: {
411
408
  handleInteraction: import("@atlaskit/editor-common/types").EditorCommand;
412
409
  };
@@ -421,10 +418,7 @@ export default function createUniversalPresetInternal({ appearance, props, featu
421
418
  pluginConfiguration: import("@atlaskit/editor-plugins/selection").SelectionPluginOptions | undefined;
422
419
  actions: import("@atlaskit/editor-plugins/selection").EditorSelectionAPI;
423
420
  dependencies: [import("@atlaskit/editor-common/types").OptionalPlugin<import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"interaction", {
424
- sharedState: {
425
- hasHadInteraction: boolean;
426
- interactionState: "hasNotHadInteraction" | null;
427
- };
421
+ sharedState: import("@atlaskit/editor-plugins/interaction").SharedInteractionState;
428
422
  commands: {
429
423
  handleInteraction: import("@atlaskit/editor-common/types").EditorCommand;
430
424
  };
@@ -1196,10 +1190,7 @@ export default function createUniversalPresetInternal({ appearance, props, featu
1196
1190
  }, import("@atlaskit/editor-plugins/context-identifier").ContextIdentifierPluginOptions | undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"composition", {
1197
1191
  sharedState: import("@atlaskit/editor-plugins/composition").CompositionState;
1198
1192
  }, undefined>, import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"interaction", {
1199
- sharedState: {
1200
- hasHadInteraction: boolean;
1201
- interactionState: "hasNotHadInteraction" | null;
1202
- };
1193
+ sharedState: import("@atlaskit/editor-plugins/interaction").SharedInteractionState;
1203
1194
  commands: {
1204
1195
  handleInteraction: import("@atlaskit/editor-common/types").EditorCommand;
1205
1196
  };