@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.
- package/CHANGELOG.md +23 -0
- package/afm-cc/tsconfig.json +1 -1
- package/dist/cjs/nodeviews/codeBlockAdvanced.js +62 -18
- package/dist/cjs/nodeviews/extensions/lineSeparator.js +18 -0
- package/dist/cjs/ui/theme.js +77 -72
- package/dist/es2019/nodeviews/codeBlockAdvanced.js +61 -20
- package/dist/es2019/nodeviews/extensions/lineSeparator.js +13 -0
- package/dist/es2019/ui/theme.js +7 -6
- package/dist/esm/nodeviews/codeBlockAdvanced.js +65 -21
- package/dist/esm/nodeviews/extensions/lineSeparator.js +13 -0
- package/dist/esm/ui/theme.js +77 -72
- package/dist/types/codeBlockAdvancedPluginType.d.ts +3 -1
- package/dist/types/nodeviews/codeBlockAdvanced.d.ts +4 -0
- package/dist/types/nodeviews/extensions/lineSeparator.d.ts +5 -0
- package/dist/types/ui/theme.d.ts +6 -1
- package/dist/types-ts4.5/codeBlockAdvancedPluginType.d.ts +3 -1
- package/dist/types-ts4.5/nodeviews/codeBlockAdvanced.d.ts +4 -0
- package/dist/types-ts4.5/nodeviews/extensions/lineSeparator.d.ts +5 -0
- package/dist/types-ts4.5/ui/theme.d.ts +6 -1
- package/package.json +4 -4
- package/src/codeBlockAdvancedPluginType.ts +2 -0
- package/src/nodeviews/codeBlockAdvanced.ts +80 -20
- package/src/nodeviews/extensions/keymap/backspace.ts +1 -1
- package/src/nodeviews/extensions/lineSeparator.ts +14 -0
- package/src/pm-plugins/shiftArrowKeyWorkaround.ts +2 -2
- package/src/ui/theme.ts +82 -79
- package/tsconfig.app.json +3 -0
- package/build/tsconfig.json +0 -22
|
@@ -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
|
-
|
|
41
|
+
_contentFormatSharedS,
|
|
41
42
|
_config$api2,
|
|
42
|
-
|
|
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
|
-
|
|
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$
|
|
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$
|
|
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
|
|
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
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
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)
|
|
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)
|
|
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
|
+
};
|
package/dist/esm/ui/theme.js
CHANGED
|
@@ -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
|
|
5
|
-
return
|
|
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
|
|
8
|
-
return
|
|
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
|
package/dist/types/ui/theme.d.ts
CHANGED
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
|
|
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
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
|
|
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.
|
|
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.
|
|
41
|
-
"@atlaskit/tokens": "^9.
|
|
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.
|
|
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
|
}
|