@atlaskit/editor-plugin-code-block-advanced 7.0.0 → 7.1.1

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.
@@ -21,44 +21,50 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
21
21
  import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
22
22
  import { highlightStyle } from '../ui/syntaxHighlightingTheme';
23
23
  import { cmTheme, codeFoldingTheme } from '../ui/theme';
24
-
25
- // Store last observed heights of code blocks
26
- var codeBlockHeights = new WeakMap();
27
24
  import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
28
25
  import { getCMSelectionChanges } from './codemirrorSync/updateCMSelection';
29
26
  import { firstCodeBlockInDocument } from './extensions/firstCodeBlockInDocument';
30
27
  import { foldGutterExtension, getCodeBlockFoldStateEffects } from './extensions/foldGutter';
31
28
  import { keymapExtension } from './extensions/keymap';
29
+ import { lineSeparatorExtension } from './extensions/lineSeparator';
32
30
  import { manageSelectionMarker } from './extensions/manageSelectionMarker';
33
31
  import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
34
32
  import { tripleClickSelectAllExtension } from './extensions/tripleClickExtension';
35
33
  import { LanguageLoader } from './languages/loader';
34
+
35
+ // Store last observed heights of code blocks
36
+ var codeBlockHeights = new WeakMap();
36
37
  // Based on: https://prosemirror.net/examples/codemirror/
37
38
  var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
38
39
  function CodeBlockAdvancedNodeView(node, view, getPos, innerDecorations, config) {
39
40
  var _config$api,
40
- _this = this,
41
+ _contentFormatSharedS,
41
42
  _config$api2,
42
- _config$api3;
43
+ _this = this,
44
+ _config$api3,
45
+ _config$api4;
43
46
  _classCallCheck(this, CodeBlockAdvancedNodeView);
44
47
  _defineProperty(this, "lineWrappingCompartment", new Compartment());
45
48
  _defineProperty(this, "languageCompartment", new Compartment());
46
49
  _defineProperty(this, "readOnlyCompartment", new Compartment());
47
50
  _defineProperty(this, "pmDecorationsCompartment", new Compartment());
51
+ _defineProperty(this, "themeCompartment", new Compartment());
48
52
  _defineProperty(this, "maybeTryingToReachNodeSelection", false);
49
53
  _defineProperty(this, "pmFacet", Facet.define());
50
54
  _defineProperty(this, "wordWrappingEnabled", false);
51
55
  this.node = node;
52
56
  this.view = view;
53
57
  this.getPos = getPos;
54
- this.selectionAPI = (_config$api = config.api) === null || _config$api === void 0 || (_config$api = _config$api.selection) === null || _config$api === void 0 ? void 0 : _config$api.actions;
58
+ var contentFormatSharedState = expValEquals('confluence_compact_text_format', 'isEnabled', true) ? (_config$api = config.api) === null || _config$api === void 0 || (_config$api = _config$api.contentFormat) === null || _config$api === void 0 ? void 0 : _config$api.sharedState : undefined;
59
+ this.contentMode = expValEquals('confluence_compact_text_format', 'isEnabled', true) ? contentFormatSharedState === null || contentFormatSharedState === void 0 || (_contentFormatSharedS = contentFormatSharedState.currentState) === null || _contentFormatSharedS === void 0 || (_contentFormatSharedS = _contentFormatSharedS.call(contentFormatSharedState)) === null || _contentFormatSharedS === void 0 ? void 0 : _contentFormatSharedS.contentMode : undefined;
60
+ this.selectionAPI = (_config$api2 = config.api) === null || _config$api2 === void 0 || (_config$api2 = _config$api2.selection) === null || _config$api2 === void 0 ? void 0 : _config$api2.actions;
55
61
  var getNode = function getNode() {
56
62
  return _this.node;
57
63
  };
58
64
  var onMaybeNodeSelection = function onMaybeNodeSelection() {
59
65
  return _this.maybeTryingToReachNodeSelection = true;
60
66
  };
61
- this.cleanupDisabledState = (_config$api2 = config.api) === null || _config$api2 === void 0 || (_config$api2 = _config$api2.editorDisabled) === null || _config$api2 === void 0 ? void 0 : _config$api2.sharedState.onChange(function () {
67
+ this.cleanupDisabledState = (_config$api3 = config.api) === null || _config$api3 === void 0 || (_config$api3 = _config$api3.editorDisabled) === null || _config$api3 === void 0 ? void 0 : _config$api3.sharedState.onChange(function () {
62
68
  _this.updateReadonlyState();
63
69
  });
64
70
  this.languageLoader = new LanguageLoader(function (lang) {
@@ -85,10 +91,12 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
85
91
  getNode: getNode,
86
92
  selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
87
93
  onMaybeNodeSelection: onMaybeNodeSelection,
88
- customFindReplace: Boolean((_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : _config$api3.findReplace)
94
+ customFindReplace: Boolean((_config$api4 = config.api) === null || _config$api4 === void 0 ? void 0 : _config$api4.findReplace)
89
95
  }),
90
96
  // Goes before cmTheme to override styles
91
- config.allowCodeFolding ? [codeFoldingTheme] : [], cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers({
97
+ config.allowCodeFolding ? [codeFoldingTheme] : [], this.themeCompartment.of(cmTheme({
98
+ contentMode: expValEquals('confluence_compact_text_format', 'isEnabled', true) ? this.contentMode : undefined
99
+ })), syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers({
92
100
  domEventHandlers: {
93
101
  click: function click() {
94
102
  selectNode();
@@ -115,20 +123,27 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
115
123
  getNode: function getNode() {
116
124
  return _this.node;
117
125
  }
118
- })] : []])
126
+ })] : [], lineSeparatorExtension()])
119
127
  });
120
-
121
- // We append an additional element that fixes a selection bug on chrome if the code block
122
- // is the first element followed by subsequent code blocks
123
- var spaceContainer = document.createElement('span');
124
- spaceContainer.innerText = ZERO_WIDTH_SPACE;
125
- spaceContainer.style.height = '0';
126
- // The editor's outer node is our DOM representation
127
- this.dom = this.cm.dom;
128
- this.dom.appendChild(spaceContainer);
128
+ if (contentFormatSharedState) {
129
+ this.unsubscribeContentFormat = contentFormatSharedState.onChange(function (_ref) {
130
+ var nextSharedState = _ref.nextSharedState,
131
+ prevSharedState = _ref.prevSharedState;
132
+ var prevMode = prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.contentMode;
133
+ var nextMode = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.contentMode;
134
+ if (nextMode === prevMode) {
135
+ return;
136
+ }
137
+ _this.applyContentModeTheme(nextMode);
138
+ if (_this.updating || _this.cm.hasFocus) {
139
+ return;
140
+ }
141
+ _this.cm.requestMeasure();
142
+ });
143
+ }
129
144
 
130
145
  // Observe size changes of the CodeMirror DOM and request a measurement pass
131
- if (expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) {
146
+ if (!expValEquals('confluence_compact_text_format', 'isEnabled', true) && expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) {
132
147
  this.ro = new ResizeObserver(function (entries) {
133
148
  // Skip measurements when:
134
149
  // 1. Currently updating (prevents feedback loops)
@@ -150,6 +165,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
150
165
  }
151
166
  codeBlockHeights.set(_this.cm.contentDOM, currentHeight);
152
167
  }
168
+
153
169
  // CodeMirror to re-measure when its content size changes
154
170
  } catch (err) {
155
171
  _iterator.e(err);
@@ -161,6 +177,15 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
161
177
  this.ro.observe(this.cm.contentDOM);
162
178
  }
163
179
 
180
+ // We append an additional element that fixes a selection bug on chrome if the code block
181
+ // is the first element followed by subsequent code blocks
182
+ var spaceContainer = document.createElement('span');
183
+ spaceContainer.innerText = ZERO_WIDTH_SPACE;
184
+ spaceContainer.style.height = '0';
185
+ // The editor's outer node is our DOM representation
186
+ this.dom = this.cm.dom;
187
+ this.dom.appendChild(spaceContainer);
188
+
164
189
  // This flag is used to avoid an update loop between the outer and
165
190
  // inner editor
166
191
  this.updating = false;
@@ -182,7 +207,11 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
182
207
  // codemirror
183
208
  this.clearProseMirrorDecorations();
184
209
  (_this$cleanupDisabled = this.cleanupDisabledState) === null || _this$cleanupDisabled === void 0 || _this$cleanupDisabled.call(this);
185
- if (expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) {
210
+ if (expValEquals('confluence_compact_text_format', 'isEnabled', true)) {
211
+ var _this$unsubscribeCont;
212
+ (_this$unsubscribeCont = this.unsubscribeContentFormat) === null || _this$unsubscribeCont === void 0 || _this$unsubscribeCont.call(this);
213
+ }
214
+ if (!expValEquals('confluence_compact_text_format', 'isEnabled', true) && expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) {
186
215
  var _this$ro;
187
216
  (_this$ro = this.ro) === null || _this$ro === void 0 || _this$ro.disconnect();
188
217
  }
@@ -280,6 +309,21 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
280
309
  }
281
310
  this.updating = false;
282
311
  }
312
+ }, {
313
+ key: "applyContentModeTheme",
314
+ value: function applyContentModeTheme(contentMode) {
315
+ if (contentMode === this.contentMode) {
316
+ return;
317
+ }
318
+ this.contentMode = contentMode;
319
+ this.updating = true;
320
+ this.cm.dispatch({
321
+ effects: this.themeCompartment.reconfigure(cmTheme({
322
+ contentMode: contentMode
323
+ }))
324
+ });
325
+ this.updating = false;
326
+ }
283
327
  }, {
284
328
  key: "update",
285
329
  value: function update(node, _, innerDecorations) {
@@ -0,0 +1,13 @@
1
+ import { EditorState as CodeMirrorState } from '@codemirror/state';
2
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
3
+
4
+ /**
5
+ * To avoid issues with CRLF (\r\n) syncing with ProseMirror,
6
+ * we only consider \n for line separators.
7
+ */
8
+ export var lineSeparatorExtension = function lineSeparatorExtension() {
9
+ if (expValEquals('platform_editor_fix_advanced_codeblocks_crlf', 'isEnabled', true)) {
10
+ return CodeMirrorState.lineSeparator.of('\n');
11
+ }
12
+ return [];
13
+ };
@@ -1,80 +1,85 @@
1
1
  import { EditorView as CodeMirror } from '@codemirror/view';
2
2
  import { fg } from '@atlaskit/platform-feature-flags';
3
3
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
- var getLineHeight = function getLineHeight() {
5
- return expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? '1.5em' : '1.5rem';
4
+ var shouldUseCompactTypography = function shouldUseCompactTypography(contentMode) {
5
+ return contentMode === 'compact' || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp');
6
6
  };
7
- var getFontSize = function getFontSize() {
8
- return expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp') ? '0.875em' : '0.875rem';
7
+ var getLineHeight = function getLineHeight(contentMode) {
8
+ return shouldUseCompactTypography(contentMode) ? '1.5em' : '1.5rem';
9
+ };
10
+ var getFontSize = function getFontSize(contentMode) {
11
+ return shouldUseCompactTypography(contentMode) ? '0.875em' : '0.875rem';
12
+ };
13
+ export var cmTheme = function cmTheme(options) {
14
+ return CodeMirror.theme({
15
+ '&': {
16
+ backgroundColor: "var(--ds-background-neutral, #0515240F)",
17
+ padding: '0',
18
+ marginTop: "var(--ds-space-100, 8px)",
19
+ marginBottom: "var(--ds-space-100, 8px)",
20
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
21
+ fontSize: getFontSize(options === null || options === void 0 ? void 0 : options.contentMode),
22
+ // Custom syntax styling to match existing styling
23
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
24
+ lineHeight: getLineHeight(options === null || options === void 0 ? void 0 : options.contentMode)
25
+ },
26
+ '&.cm-focused': {
27
+ outline: 'none'
28
+ },
29
+ '.cm-line': {
30
+ padding: '0'
31
+ },
32
+ '&.cm-editor.code-block.danger': {
33
+ backgroundColor: "var(--ds-background-danger, #FFECEB)"
34
+ },
35
+ '.cm-content[aria-readonly="true"]': {
36
+ caretColor: 'transparent'
37
+ },
38
+ '.cm-content': {
39
+ cursor: 'text',
40
+ caretColor: "var(--ds-text, #292A2E)",
41
+ margin: "var(--ds-space-100, 8px)",
42
+ padding: "var(--ds-space-0, 0px)"
43
+ },
44
+ '.cm-scroller': {
45
+ backgroundColor: "var(--ds-background-neutral, #0515240F)",
46
+ // Custom syntax styling to match existing styling
47
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
48
+ lineHeight: 'unset',
49
+ fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
50
+ borderRadius: "var(--ds-radius-small, 4px)",
51
+ backgroundImage: overflowShadow({
52
+ leftCoverWidth: "var(--ds-space-300, 24px)"
53
+ }),
54
+ backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll'
55
+ },
56
+ '&.cm-focused .cm-cursor': {
57
+ borderLeftColor: "var(--ds-text, #292A2E)"
58
+ },
59
+ '.cm-gutter': {
60
+ padding: "var(--ds-space-100, 8px)"
61
+ },
62
+ '.cm-gutters': {
63
+ backgroundColor: "var(--ds-background-neutral, #0515240F)",
64
+ border: 'none',
65
+ padding: "var(--ds-space-0, 0px)",
66
+ color: "var(--ds-text-subtlest, #6B6E76)"
67
+ },
68
+ '.cm-lineNumbers .cm-gutterElement': {
69
+ paddingLeft: "var(--ds-space-0, 0px)",
70
+ paddingRight: "var(--ds-space-0, 0px)",
71
+ minWidth: 'unset'
72
+ },
73
+ // Set the gutter element min height to prevent flicker of styling while
74
+ // codemirror is calculating (which happens after an animation frame).
75
+ // Example problem: https://github.com/codemirror/dev/issues/1076
76
+ // Ignore the first gutter element as it is a special hidden element.
77
+ '.cm-gutterElement:not(:first-child)': {
78
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
79
+ minHeight: getLineHeight(options === null || options === void 0 ? void 0 : options.contentMode)
80
+ }
81
+ });
9
82
  };
10
- export var cmTheme = CodeMirror.theme({
11
- '&': {
12
- backgroundColor: "var(--ds-background-neutral, #0515240F)",
13
- padding: '0',
14
- marginTop: "var(--ds-space-100, 8px)",
15
- marginBottom: "var(--ds-space-100, 8px)",
16
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
17
- fontSize: getFontSize(),
18
- // Custom syntax styling to match existing styling
19
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
20
- lineHeight: getLineHeight()
21
- },
22
- '&.cm-focused': {
23
- outline: 'none'
24
- },
25
- '.cm-line': {
26
- padding: '0'
27
- },
28
- '&.cm-editor.code-block.danger': {
29
- backgroundColor: "var(--ds-background-danger, #FFECEB)"
30
- },
31
- '.cm-content[aria-readonly="true"]': {
32
- caretColor: 'transparent'
33
- },
34
- '.cm-content': {
35
- cursor: 'text',
36
- caretColor: "var(--ds-text, #292A2E)",
37
- margin: "var(--ds-space-100, 8px)",
38
- padding: "var(--ds-space-0, 0px)"
39
- },
40
- '.cm-scroller': {
41
- backgroundColor: "var(--ds-background-neutral, #0515240F)",
42
- // Custom syntax styling to match existing styling
43
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
44
- lineHeight: 'unset',
45
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
46
- borderRadius: "var(--ds-radius-small, 4px)",
47
- backgroundImage: overflowShadow({
48
- leftCoverWidth: "var(--ds-space-300, 24px)"
49
- }),
50
- backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll'
51
- },
52
- '&.cm-focused .cm-cursor': {
53
- borderLeftColor: "var(--ds-text, #292A2E)"
54
- },
55
- '.cm-gutter': {
56
- padding: "var(--ds-space-100, 8px)"
57
- },
58
- '.cm-gutters': {
59
- backgroundColor: "var(--ds-background-neutral, #0515240F)",
60
- border: 'none',
61
- padding: "var(--ds-space-0, 0px)",
62
- color: "var(--ds-text-subtlest, #6B6E76)"
63
- },
64
- '.cm-lineNumbers .cm-gutterElement': {
65
- paddingLeft: "var(--ds-space-0, 0px)",
66
- paddingRight: "var(--ds-space-0, 0px)",
67
- minWidth: 'unset'
68
- },
69
- // Set the gutter element min height to prevent flicker of styling while
70
- // codemirror is calculating (which happens after an animation frame).
71
- // Example problem: https://github.com/codemirror/dev/issues/1076
72
- // Ignore the first gutter element as it is a special hidden element.
73
- '.cm-gutterElement:not(:first-child)': {
74
- // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
75
- minHeight: getLineHeight()
76
- }
77
- });
78
83
  export var codeFoldingTheme = CodeMirror.theme({
79
84
  '.cm-gutter': {
80
85
  paddingLeft: "var(--ds-space-075, 6px)",
@@ -1,6 +1,7 @@
1
1
  import type { Extension } from '@codemirror/state';
2
2
  import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
3
3
  import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
4
+ import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';
4
5
  import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
5
6
  import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
6
7
  import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
@@ -11,7 +12,8 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
11
12
  SelectionPlugin,
12
13
  OptionalPlugin<EditorDisabledPlugin>,
13
14
  OptionalPlugin<SelectionMarkerPlugin>,
14
- OptionalPlugin<FindReplacePlugin>
15
+ OptionalPlugin<FindReplacePlugin>,
16
+ OptionalPlugin<ContentFormatPlugin>
15
17
  ];
16
18
  pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
17
19
  }>;
@@ -19,15 +19,18 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
19
19
  private languageCompartment;
20
20
  private readOnlyCompartment;
21
21
  private pmDecorationsCompartment;
22
+ private themeCompartment;
22
23
  private node;
23
24
  private getPos;
24
25
  private cm;
26
+ private contentMode;
25
27
  private selectionAPI;
26
28
  private maybeTryingToReachNodeSelection;
27
29
  private cleanupDisabledState;
28
30
  private languageLoader;
29
31
  private pmFacet;
30
32
  private ro?;
33
+ private unsubscribeContentFormat;
31
34
  constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
32
35
  destroy(): void;
33
36
  forwardUpdate(update: ViewUpdate): void;
@@ -39,6 +42,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
39
42
  private wordWrappingEnabled;
40
43
  private getWordWrapEffects;
41
44
  private restoreFoldState;
45
+ private applyContentModeTheme;
42
46
  update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
43
47
  /**
44
48
  * Updates a facet which stores information on the prosemirror decorations
@@ -0,0 +1,5 @@
1
+ /**
2
+ * To avoid issues with CRLF (\r\n) syncing with ProseMirror,
3
+ * we only consider \n for line separators.
4
+ */
5
+ export declare const lineSeparatorExtension: () => import("@codemirror/state").Extension;
@@ -1,2 +1,7 @@
1
- export declare const cmTheme: import("@codemirror/state").Extension;
1
+ import type { EditorContentMode } from '@atlaskit/editor-common/types';
2
+ type ThemeOptions = {
3
+ contentMode?: EditorContentMode;
4
+ };
5
+ export declare const cmTheme: (options?: ThemeOptions) => import("@codemirror/state").Extension;
2
6
  export declare const codeFoldingTheme: import("@codemirror/state").Extension;
7
+ export {};
@@ -1,6 +1,7 @@
1
1
  import type { Extension } from '@codemirror/state';
2
2
  import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
3
3
  import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
4
+ import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';
4
5
  import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
5
6
  import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
6
7
  import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
@@ -11,7 +12,8 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
11
12
  SelectionPlugin,
12
13
  OptionalPlugin<EditorDisabledPlugin>,
13
14
  OptionalPlugin<SelectionMarkerPlugin>,
14
- OptionalPlugin<FindReplacePlugin>
15
+ OptionalPlugin<FindReplacePlugin>,
16
+ OptionalPlugin<ContentFormatPlugin>
15
17
  ];
16
18
  pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
17
19
  }>;
@@ -19,15 +19,18 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
19
19
  private languageCompartment;
20
20
  private readOnlyCompartment;
21
21
  private pmDecorationsCompartment;
22
+ private themeCompartment;
22
23
  private node;
23
24
  private getPos;
24
25
  private cm;
26
+ private contentMode;
25
27
  private selectionAPI;
26
28
  private maybeTryingToReachNodeSelection;
27
29
  private cleanupDisabledState;
28
30
  private languageLoader;
29
31
  private pmFacet;
30
32
  private ro?;
33
+ private unsubscribeContentFormat;
31
34
  constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, innerDecorations: DecorationSource, config: ConfigProps);
32
35
  destroy(): void;
33
36
  forwardUpdate(update: ViewUpdate): void;
@@ -39,6 +42,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
39
42
  private wordWrappingEnabled;
40
43
  private getWordWrapEffects;
41
44
  private restoreFoldState;
45
+ private applyContentModeTheme;
42
46
  update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
43
47
  /**
44
48
  * Updates a facet which stores information on the prosemirror decorations
@@ -0,0 +1,5 @@
1
+ /**
2
+ * To avoid issues with CRLF (\r\n) syncing with ProseMirror,
3
+ * we only consider \n for line separators.
4
+ */
5
+ export declare const lineSeparatorExtension: () => import("@codemirror/state").Extension;
@@ -1,2 +1,7 @@
1
- export declare const cmTheme: import("@codemirror/state").Extension;
1
+ import type { EditorContentMode } from '@atlaskit/editor-common/types';
2
+ type ThemeOptions = {
3
+ contentMode?: EditorContentMode;
4
+ };
5
+ export declare const cmTheme: (options?: ThemeOptions) => import("@codemirror/state").Extension;
2
6
  export declare const codeFoldingTheme: import("@codemirror/state").Extension;
7
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-code-block-advanced",
3
- "version": "7.0.0",
3
+ "version": "7.1.1",
4
4
  "description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,8 +37,8 @@
37
37
  "@atlaskit/editor-prosemirror": "^7.2.0",
38
38
  "@atlaskit/platform-feature-flags": "^1.1.0",
39
39
  "@atlaskit/prosemirror-history": "^0.2.0",
40
- "@atlaskit/tmp-editor-statsig": "^16.3.0",
41
- "@atlaskit/tokens": "^9.0.0",
40
+ "@atlaskit/tmp-editor-statsig": "^16.23.0",
41
+ "@atlaskit/tokens": "^9.1.0",
42
42
  "@babel/runtime": "^7.0.0",
43
43
  "@codemirror/autocomplete": "6.18.4",
44
44
  "@codemirror/commands": "6.7.1",
@@ -54,7 +54,7 @@
54
54
  "codemirror-lang-elixir": "4.0.0"
55
55
  },
56
56
  "peerDependencies": {
57
- "@atlaskit/editor-common": "^111.0.0",
57
+ "@atlaskit/editor-common": "^111.8.0",
58
58
  "react": "^18.2.0",
59
59
  "react-intl-next": "npm:react-intl@^5.18.1"
60
60
  },
@@ -2,6 +2,7 @@ import type { Extension } from '@codemirror/state';
2
2
 
3
3
  import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
4
4
  import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
5
+ import type { ContentFormatPlugin } from '@atlaskit/editor-plugin-content-format';
5
6
  import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
6
7
  import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
7
8
  import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
@@ -16,6 +17,7 @@ export type CodeBlockAdvancedPlugin = NextEditorPlugin<
16
17
  OptionalPlugin<EditorDisabledPlugin>,
17
18
  OptionalPlugin<SelectionMarkerPlugin>,
18
19
  OptionalPlugin<FindReplacePlugin>,
20
+ OptionalPlugin<ContentFormatPlugin>,
19
21
  ];
20
22
  pluginConfiguration: CodeBlockAdvancedPluginOptions | undefined;
21
23
  }