@atlaskit/editor-plugin-code-block 3.5.7 → 3.5.9
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 +14 -0
- package/dist/cjs/editor-commands/index.js +0 -4
- package/dist/cjs/nodeviews/code-block.js +13 -41
- package/dist/cjs/pm-plugins/codeBlockAutoFullStopTransformPlugin.js +1 -1
- package/dist/cjs/pm-plugins/decorators.js +1 -1
- package/dist/cjs/pm-plugins/main.js +10 -15
- package/dist/cjs/pm-plugins/toolbar.js +1 -2
- package/dist/cjs/ui/class-names.js +2 -6
- package/dist/es2019/editor-commands/index.js +0 -4
- package/dist/es2019/nodeviews/code-block.js +13 -40
- package/dist/es2019/pm-plugins/codeBlockAutoFullStopTransformPlugin.js +1 -1
- package/dist/es2019/pm-plugins/decorators.js +1 -1
- package/dist/es2019/pm-plugins/main.js +10 -15
- package/dist/es2019/pm-plugins/toolbar.js +1 -2
- package/dist/es2019/ui/class-names.js +2 -6
- package/dist/esm/editor-commands/index.js +0 -4
- package/dist/esm/nodeviews/code-block.js +13 -40
- package/dist/esm/pm-plugins/codeBlockAutoFullStopTransformPlugin.js +1 -1
- package/dist/esm/pm-plugins/decorators.js +1 -1
- package/dist/esm/pm-plugins/main.js +10 -15
- package/dist/esm/pm-plugins/toolbar.js +1 -2
- package/dist/esm/ui/class-names.js +2 -6
- package/dist/types/nodeviews/code-block.d.ts +0 -1
- package/dist/types/ui/class-names.d.ts +1 -4
- package/dist/types-ts4.5/nodeviews/code-block.d.ts +0 -1
- package/dist/types-ts4.5/ui/class-names.d.ts +1 -4
- package/package.json +5 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-code-block
|
|
2
2
|
|
|
3
|
+
## 3.5.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 3.5.8
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#167313](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167313)
|
|
14
|
+
[`40d491ee58258`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/40d491ee58258) -
|
|
15
|
+
ED-24230 Remove code wrapping for editor FG
|
|
16
|
+
|
|
3
17
|
## 3.5.7
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
|
@@ -15,7 +15,6 @@ var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
|
|
|
15
15
|
var _insert = require("@atlaskit/editor-common/insert");
|
|
16
16
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
17
17
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
18
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
18
|
var _actions = require("../pm-plugins/actions");
|
|
20
19
|
var _codeBlockCopySelectionPlugin = require("../pm-plugins/codeBlockCopySelectionPlugin");
|
|
21
20
|
var _pluginKey = require("../pm-plugins/plugin-key");
|
|
@@ -198,9 +197,6 @@ function insertCodeBlockWithAnalytics(inputMethod, analyticsAPI, isNestingInQuot
|
|
|
198
197
|
var toggleWordWrapStateForCodeBlockNode = exports.toggleWordWrapStateForCodeBlockNode = function toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI) {
|
|
199
198
|
return function (state, dispatch) {
|
|
200
199
|
var _findCodeBlock;
|
|
201
|
-
if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
|
|
202
|
-
return false;
|
|
203
|
-
}
|
|
204
200
|
var codeBlockNode = (_findCodeBlock = (0, _utils2.findCodeBlock)(state)) === null || _findCodeBlock === void 0 ? void 0 : _findCodeBlock.node;
|
|
205
201
|
var tr = state.tr;
|
|
206
202
|
if (!_codeBlock.codeBlockWrappedStates || !codeBlockNode) {
|
|
@@ -8,7 +8,6 @@ exports.codeBlockNodeView = exports.CodeBlockView = void 0;
|
|
|
8
8
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
9
9
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
|
-
var _rafSchd = _interopRequireDefault(require("raf-schd"));
|
|
12
11
|
var _browser = require("@atlaskit/editor-common/browser");
|
|
13
12
|
var _codeBlock = require("@atlaskit/editor-common/code-block");
|
|
14
13
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
@@ -16,22 +15,20 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
16
15
|
var _editorCommands = require("../editor-commands");
|
|
17
16
|
var _mainState = require("../pm-plugins/main-state");
|
|
18
17
|
var _classNames = require("../ui/class-names");
|
|
19
|
-
/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
20
|
-
|
|
21
18
|
var MATCH_NEWLINES = new RegExp('\n', 'g');
|
|
22
19
|
var toDOM = function toDOM(node, contentEditable, formattedAriaLabel) {
|
|
23
20
|
return ['div', {
|
|
24
|
-
class:
|
|
21
|
+
class: _classNames.codeBlockClassNames.container
|
|
25
22
|
}, ['div', {
|
|
26
23
|
class: _classNames.codeBlockClassNames.start,
|
|
27
24
|
contenteditable: 'false'
|
|
28
25
|
}], ['div', {
|
|
29
|
-
class:
|
|
26
|
+
class: _classNames.codeBlockClassNames.contentWrapper
|
|
30
27
|
}, ['div', {
|
|
31
|
-
class:
|
|
28
|
+
class: _classNames.codeBlockClassNames.gutter,
|
|
32
29
|
contenteditable: 'false'
|
|
33
30
|
}], ['div', {
|
|
34
|
-
class:
|
|
31
|
+
class: _classNames.codeBlockClassNames.content
|
|
35
32
|
}, ['code', {
|
|
36
33
|
'data-language': node.attrs.language || '',
|
|
37
34
|
spellcheck: 'false',
|
|
@@ -49,21 +46,6 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
|
|
|
49
46
|
_api$editorDisabled;
|
|
50
47
|
(0, _classCallCheck2.default)(this, CodeBlockView);
|
|
51
48
|
(0, _defineProperty2.default)(this, "formattedAriaLabel", '');
|
|
52
|
-
(0, _defineProperty2.default)(this, "ensureLineNumbers", (0, _rafSchd.default)(function () {
|
|
53
|
-
var lines = 1;
|
|
54
|
-
_this.node.forEach(function (node) {
|
|
55
|
-
var text = node.text;
|
|
56
|
-
if (text) {
|
|
57
|
-
lines += (node.text.match(MATCH_NEWLINES) || []).length;
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
while (_this.lineNumberGutter.childElementCount < lines) {
|
|
61
|
-
_this.lineNumberGutter.appendChild(document.createElement('span'));
|
|
62
|
-
}
|
|
63
|
-
while (_this.lineNumberGutter.childElementCount > lines) {
|
|
64
|
-
_this.lineNumberGutter.removeChild(_this.lineNumberGutter.lastChild);
|
|
65
|
-
}
|
|
66
|
-
}));
|
|
67
49
|
/**
|
|
68
50
|
* As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
|
|
69
51
|
*/
|
|
@@ -87,18 +69,14 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
|
|
|
87
69
|
this.node = _node;
|
|
88
70
|
this.dom = dom;
|
|
89
71
|
this.contentDOM = contentDOM;
|
|
90
|
-
this.lineNumberGutter = this.dom.querySelector(".".concat(
|
|
72
|
+
this.lineNumberGutter = this.dom.querySelector(".".concat(_classNames.codeBlockClassNames.gutter));
|
|
91
73
|
this.api = api;
|
|
92
|
-
|
|
93
|
-
this.maintainDynamicGutterSize();
|
|
74
|
+
this.maintainDynamicGutterSize();
|
|
94
75
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
}
|
|
100
|
-
} else {
|
|
101
|
-
this.ensureLineNumbers();
|
|
76
|
+
// Ensure the code block node has a wrapped state.
|
|
77
|
+
// Wrapped state may already exist from breakout's recreating the node.
|
|
78
|
+
if (!_codeBlock.codeBlockWrappedStates.has(_node)) {
|
|
79
|
+
_codeBlock.codeBlockWrappedStates.set(_node, _codeBlock.defaultWordWrapState);
|
|
102
80
|
}
|
|
103
81
|
this.handleEditorDisabledChanged();
|
|
104
82
|
}
|
|
@@ -168,20 +146,14 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
|
|
|
168
146
|
return false;
|
|
169
147
|
}
|
|
170
148
|
if (node !== this.node) {
|
|
171
|
-
if ((0, _platformFeatureFlags.fg)('
|
|
172
|
-
|
|
173
|
-
(0, _codeBlock.transferCodeBlockWrappedValue)(this.node, node);
|
|
174
|
-
}
|
|
149
|
+
if (!(0, _platformFeatureFlags.fg)('editor_code_block_wrapping_language_change_bug')) {
|
|
150
|
+
(0, _codeBlock.transferCodeBlockWrappedValue)(this.node, node);
|
|
175
151
|
}
|
|
176
152
|
if (node.attrs.language !== this.node.attrs.language) {
|
|
177
153
|
this.contentDOM.setAttribute('data-language', node.attrs.language || '');
|
|
178
154
|
}
|
|
179
155
|
this.node = node;
|
|
180
|
-
|
|
181
|
-
this.maintainDynamicGutterSize();
|
|
182
|
-
} else {
|
|
183
|
-
this.ensureLineNumbers();
|
|
184
|
-
}
|
|
156
|
+
this.maintainDynamicGutterSize();
|
|
185
157
|
if (_browser.browser.android) {
|
|
186
158
|
this.coalesceDOMElements();
|
|
187
159
|
(0, _editorCommands.resetShouldIgnoreFollowingMutations)(this.view.state, this.view.dispatch);
|
|
@@ -15,7 +15,7 @@ function codeBlockAutoFullStopTransformPlugin() {
|
|
|
15
15
|
return new _safePlugin.SafePlugin({
|
|
16
16
|
key: codeBlockAutoFullStopTransformPluginKey,
|
|
17
17
|
appendTransaction: function appendTransaction(_transactions, oldState, newState) {
|
|
18
|
-
if (!(0, _platformFeatureFlags.fg)('
|
|
18
|
+
if (!(0, _platformFeatureFlags.fg)('code_block_auto_insertion_bug_fix')) {
|
|
19
19
|
return undefined;
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -171,7 +171,7 @@ var updateDecorationSetWithWordWrappedDecorator = exports.updateDecorationSetWit
|
|
|
171
171
|
updatedDecorationSet = updatedDecorationSet.remove(currentWrappedBlockDecorationSet);
|
|
172
172
|
} else {
|
|
173
173
|
var wrappedBlock = _view.Decoration.node(pos, pos + innerNode.nodeSize, {
|
|
174
|
-
class: _classNames.codeBlockClassNames.
|
|
174
|
+
class: _classNames.codeBlockClassNames.contentWrapped
|
|
175
175
|
}, {
|
|
176
176
|
type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
|
|
177
177
|
} // Allows for quick filtering of decorations while using `find`
|
|
@@ -74,7 +74,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
|
|
|
74
74
|
state: {
|
|
75
75
|
init: function init(_, state) {
|
|
76
76
|
var node = (0, _utils.findCodeBlock)(state, state.selection);
|
|
77
|
-
var initialDecorations = (0,
|
|
77
|
+
var initialDecorations = (0, _decorators.generateInitialDecorations)(state);
|
|
78
78
|
return {
|
|
79
79
|
pos: node ? node.pos : null,
|
|
80
80
|
contentCopied: false,
|
|
@@ -85,7 +85,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
|
|
|
85
85
|
},
|
|
86
86
|
apply: function apply(tr, pluginState, _oldState, newState) {
|
|
87
87
|
var meta = tr.getMeta(_pluginKey.pluginKey);
|
|
88
|
-
if ((meta === null || meta === void 0 ? void 0 : meta.type) === _actions.ACTIONS.SET_IS_WRAPPED
|
|
88
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.type) === _actions.ACTIONS.SET_IS_WRAPPED) {
|
|
89
89
|
var node = (0, _utils.findCodeBlock)(newState, tr.selection);
|
|
90
90
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
91
91
|
decorations: (0, _decorators.updateDecorationSetWithWordWrappedDecorator)(pluginState.decorations, tr, node)
|
|
@@ -97,19 +97,17 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
|
|
|
97
97
|
// Updates mapping position of all existing decorations to new positions
|
|
98
98
|
// specifically used for updating word wrap node decorators (does not cover drag & drop, validateWordWrappedDecorators does).
|
|
99
99
|
var updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
if (
|
|
103
|
-
|
|
104
|
-
(0, _codeBlock.updateCodeBlockWrappedStateNodeKeys)(codeBlockNodes, _oldState);
|
|
105
|
-
}
|
|
106
|
-
updatedDecorationSet = (0, _decorators.updateCodeBlockDecorations)(tr, codeBlockNodes, updatedDecorationSet);
|
|
100
|
+
var codeBlockNodes = (0, _platformFeatureFlags.fg)('editor_code_wrapping_perf_improvement_ed-25141') ? (0, _utils.getAllChangedCodeBlocksInTransaction)(tr) : (0, _utils.getAllCodeBlockNodesInDoc)(newState);
|
|
101
|
+
if (codeBlockNodes) {
|
|
102
|
+
if ((0, _platformFeatureFlags.fg)('editor_code_block_wrapping_language_change_bug')) {
|
|
103
|
+
(0, _codeBlock.updateCodeBlockWrappedStateNodeKeys)(codeBlockNodes, _oldState);
|
|
107
104
|
}
|
|
105
|
+
updatedDecorationSet = (0, _decorators.updateCodeBlockDecorations)(tr, codeBlockNodes, updatedDecorationSet);
|
|
108
106
|
}
|
|
109
107
|
var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
110
108
|
pos: _node ? _node.pos : null,
|
|
111
109
|
isNodeSelected: tr.selection instanceof _state.NodeSelection,
|
|
112
|
-
decorations:
|
|
110
|
+
decorations: updatedDecorationSet
|
|
113
111
|
});
|
|
114
112
|
return newPluginState;
|
|
115
113
|
}
|
|
@@ -136,10 +134,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
|
|
|
136
134
|
key: _pluginKey.pluginKey,
|
|
137
135
|
props: {
|
|
138
136
|
decorations: function decorations(state) {
|
|
139
|
-
|
|
140
|
-
return _pluginKey.pluginKey.getState(state).decorations || _view.DecorationSet.empty;
|
|
141
|
-
}
|
|
142
|
-
return undefined;
|
|
137
|
+
return _pluginKey.pluginKey.getState(state).decorations || _view.DecorationSet.empty;
|
|
143
138
|
},
|
|
144
139
|
nodeViews: {
|
|
145
140
|
codeBlock: function codeBlock(node, view, getPos) {
|
|
@@ -150,7 +145,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
|
|
|
150
145
|
}
|
|
151
146
|
},
|
|
152
147
|
handleClickOn: (0, _selection.createSelectionClickHandler)(['codeBlock'], function (target) {
|
|
153
|
-
return
|
|
148
|
+
return !!(target.classList.contains(_classNames.codeBlockClassNames.lineNumberWidget) || target.classList.contains(_classNames.codeBlockClassNames.gutter));
|
|
154
149
|
}, {
|
|
155
150
|
useLongPressSelection: useLongPressSelection
|
|
156
151
|
}),
|
|
@@ -13,7 +13,6 @@ var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
|
|
|
13
13
|
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/migration/copy"));
|
|
14
14
|
var _textWrap = _interopRequireDefault(require("@atlaskit/icon/core/text-wrap"));
|
|
15
15
|
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
|
|
16
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
16
|
var _editorCommands = require("../editor-commands");
|
|
18
17
|
var _WrapIcon = require("../ui/icons/WrapIcon");
|
|
19
18
|
var _codeBlockCopySelectionPlugin = require("./codeBlockCopySelectionPlugin");
|
|
@@ -123,7 +122,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
|
|
|
123
122
|
return (0, _utils.findDomRefAtPos)(pos, view.domAtPos.bind(view));
|
|
124
123
|
},
|
|
125
124
|
nodeType: nodeType,
|
|
126
|
-
items:
|
|
125
|
+
items: [languageSelect, separator, codeBlockWrapButton, separator].concat(copyToClipboardItems, [deleteButton]),
|
|
127
126
|
scrollable: true
|
|
128
127
|
};
|
|
129
128
|
};
|
|
@@ -10,12 +10,8 @@ var codeBlockClassNames = exports.codeBlockClassNames = {
|
|
|
10
10
|
start: _styles.CodeBlockSharedCssClassName.CODEBLOCK_START,
|
|
11
11
|
end: _styles.CodeBlockSharedCssClassName.CODEBLOCK_END,
|
|
12
12
|
contentWrapper: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
|
|
13
|
+
contentWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
|
|
13
14
|
gutter: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
|
|
14
15
|
content: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
|
|
15
|
-
|
|
16
|
-
contentWrapperFg: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG,
|
|
17
|
-
contentFg: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG,
|
|
18
|
-
contentFgWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG_WRAPPED,
|
|
19
|
-
lineNumberWidget: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET,
|
|
20
|
-
gutterFg: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG
|
|
16
|
+
lineNumberWidget: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET
|
|
21
17
|
};
|
|
@@ -5,7 +5,6 @@ import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
|
|
|
5
5
|
import { contentAllowedInCodeBlock, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
|
|
6
6
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
7
7
|
import { findParentNodeOfType, findSelectedNodeOfType, isNodeSelection, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { ACTIONS } from '../pm-plugins/actions';
|
|
10
9
|
import { copySelectionPluginKey } from '../pm-plugins/codeBlockCopySelectionPlugin';
|
|
11
10
|
import { pluginKey } from '../pm-plugins/plugin-key';
|
|
@@ -205,9 +204,6 @@ export function insertCodeBlockWithAnalytics(inputMethod, analyticsAPI, isNestin
|
|
|
205
204
|
*/
|
|
206
205
|
export const toggleWordWrapStateForCodeBlockNode = editorAnalyticsAPI => (state, dispatch) => {
|
|
207
206
|
var _findCodeBlock;
|
|
208
|
-
if (!fg('editor_support_code_block_wrapping')) {
|
|
209
|
-
return false;
|
|
210
|
-
}
|
|
211
207
|
const codeBlockNode = (_findCodeBlock = findCodeBlock(state)) === null || _findCodeBlock === void 0 ? void 0 : _findCodeBlock.node;
|
|
212
208
|
const {
|
|
213
209
|
tr
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
3
|
-
import rafSchedule from 'raf-schd';
|
|
4
2
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
5
3
|
import { codeBlockWrappedStates, defaultWordWrapState, transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
|
|
6
4
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
@@ -10,17 +8,17 @@ import { getPluginState } from '../pm-plugins/main-state';
|
|
|
10
8
|
import { codeBlockClassNames } from '../ui/class-names';
|
|
11
9
|
const MATCH_NEWLINES = new RegExp('\n', 'g');
|
|
12
10
|
const toDOM = (node, contentEditable, formattedAriaLabel) => ['div', {
|
|
13
|
-
class:
|
|
11
|
+
class: codeBlockClassNames.container
|
|
14
12
|
}, ['div', {
|
|
15
13
|
class: codeBlockClassNames.start,
|
|
16
14
|
contenteditable: 'false'
|
|
17
15
|
}], ['div', {
|
|
18
|
-
class:
|
|
16
|
+
class: codeBlockClassNames.contentWrapper
|
|
19
17
|
}, ['div', {
|
|
20
|
-
class:
|
|
18
|
+
class: codeBlockClassNames.gutter,
|
|
21
19
|
contenteditable: 'false'
|
|
22
20
|
}], ['div', {
|
|
23
|
-
class:
|
|
21
|
+
class: codeBlockClassNames.content
|
|
24
22
|
}, ['code', {
|
|
25
23
|
'data-language': node.attrs.language || '',
|
|
26
24
|
spellcheck: 'false',
|
|
@@ -35,21 +33,6 @@ export class CodeBlockView {
|
|
|
35
33
|
constructor(_node, view, getPos, formattedAriaLabel, api, cleanupEditorDisabledListener) {
|
|
36
34
|
var _api$editorDisabled, _api$editorDisabled$s;
|
|
37
35
|
_defineProperty(this, "formattedAriaLabel", '');
|
|
38
|
-
_defineProperty(this, "ensureLineNumbers", rafSchedule(() => {
|
|
39
|
-
let lines = 1;
|
|
40
|
-
this.node.forEach(node => {
|
|
41
|
-
const text = node.text;
|
|
42
|
-
if (text) {
|
|
43
|
-
lines += (node.text.match(MATCH_NEWLINES) || []).length;
|
|
44
|
-
}
|
|
45
|
-
});
|
|
46
|
-
while (this.lineNumberGutter.childElementCount < lines) {
|
|
47
|
-
this.lineNumberGutter.appendChild(document.createElement('span'));
|
|
48
|
-
}
|
|
49
|
-
while (this.lineNumberGutter.childElementCount > lines) {
|
|
50
|
-
this.lineNumberGutter.removeChild(this.lineNumberGutter.lastChild);
|
|
51
|
-
}
|
|
52
|
-
}));
|
|
53
36
|
/**
|
|
54
37
|
* As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
|
|
55
38
|
*/
|
|
@@ -74,18 +57,14 @@ export class CodeBlockView {
|
|
|
74
57
|
this.node = _node;
|
|
75
58
|
this.dom = dom;
|
|
76
59
|
this.contentDOM = contentDOM;
|
|
77
|
-
this.lineNumberGutter = this.dom.querySelector(`.${
|
|
60
|
+
this.lineNumberGutter = this.dom.querySelector(`.${codeBlockClassNames.gutter}`);
|
|
78
61
|
this.api = api;
|
|
79
|
-
|
|
80
|
-
this.maintainDynamicGutterSize();
|
|
62
|
+
this.maintainDynamicGutterSize();
|
|
81
63
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
} else {
|
|
88
|
-
this.ensureLineNumbers();
|
|
64
|
+
// Ensure the code block node has a wrapped state.
|
|
65
|
+
// Wrapped state may already exist from breakout's recreating the node.
|
|
66
|
+
if (!codeBlockWrappedStates.has(_node)) {
|
|
67
|
+
codeBlockWrappedStates.set(_node, defaultWordWrapState);
|
|
89
68
|
}
|
|
90
69
|
this.handleEditorDisabledChanged();
|
|
91
70
|
}
|
|
@@ -144,20 +123,14 @@ export class CodeBlockView {
|
|
|
144
123
|
return false;
|
|
145
124
|
}
|
|
146
125
|
if (node !== this.node) {
|
|
147
|
-
if (fg('
|
|
148
|
-
|
|
149
|
-
transferCodeBlockWrappedValue(this.node, node);
|
|
150
|
-
}
|
|
126
|
+
if (!fg('editor_code_block_wrapping_language_change_bug')) {
|
|
127
|
+
transferCodeBlockWrappedValue(this.node, node);
|
|
151
128
|
}
|
|
152
129
|
if (node.attrs.language !== this.node.attrs.language) {
|
|
153
130
|
this.contentDOM.setAttribute('data-language', node.attrs.language || '');
|
|
154
131
|
}
|
|
155
132
|
this.node = node;
|
|
156
|
-
|
|
157
|
-
this.maintainDynamicGutterSize();
|
|
158
|
-
} else {
|
|
159
|
-
this.ensureLineNumbers();
|
|
160
|
-
}
|
|
133
|
+
this.maintainDynamicGutterSize();
|
|
161
134
|
if (browser.android) {
|
|
162
135
|
this.coalesceDOMElements();
|
|
163
136
|
resetShouldIgnoreFollowingMutations(this.view.state, this.view.dispatch);
|
|
@@ -8,7 +8,7 @@ export function codeBlockAutoFullStopTransformPlugin() {
|
|
|
8
8
|
return new SafePlugin({
|
|
9
9
|
key: codeBlockAutoFullStopTransformPluginKey,
|
|
10
10
|
appendTransaction(_transactions, oldState, newState) {
|
|
11
|
-
if (!fg('
|
|
11
|
+
if (!fg('code_block_auto_insertion_bug_fix')) {
|
|
12
12
|
return undefined;
|
|
13
13
|
}
|
|
14
14
|
|
|
@@ -163,7 +163,7 @@ export const updateDecorationSetWithWordWrappedDecorator = (decorationSet, tr, n
|
|
|
163
163
|
updatedDecorationSet = updatedDecorationSet.remove(currentWrappedBlockDecorationSet);
|
|
164
164
|
} else {
|
|
165
165
|
const wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {
|
|
166
|
-
class: codeBlockClassNames.
|
|
166
|
+
class: codeBlockClassNames.contentWrapped
|
|
167
167
|
}, {
|
|
168
168
|
type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
|
|
169
169
|
} // Allows for quick filtering of decorations while using `find`
|
|
@@ -63,7 +63,7 @@ export const createPlugin = ({
|
|
|
63
63
|
state: {
|
|
64
64
|
init(_, state) {
|
|
65
65
|
const node = findCodeBlock(state, state.selection);
|
|
66
|
-
const initialDecorations =
|
|
66
|
+
const initialDecorations = generateInitialDecorations(state);
|
|
67
67
|
return {
|
|
68
68
|
pos: node ? node.pos : null,
|
|
69
69
|
contentCopied: false,
|
|
@@ -74,7 +74,7 @@ export const createPlugin = ({
|
|
|
74
74
|
},
|
|
75
75
|
apply(tr, pluginState, _oldState, newState) {
|
|
76
76
|
const meta = tr.getMeta(pluginKey);
|
|
77
|
-
if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_IS_WRAPPED
|
|
77
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_IS_WRAPPED) {
|
|
78
78
|
const node = findCodeBlock(newState, tr.selection);
|
|
79
79
|
return {
|
|
80
80
|
...pluginState,
|
|
@@ -87,20 +87,18 @@ export const createPlugin = ({
|
|
|
87
87
|
// Updates mapping position of all existing decorations to new positions
|
|
88
88
|
// specifically used for updating word wrap node decorators (does not cover drag & drop, validateWordWrappedDecorators does).
|
|
89
89
|
let updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
if (
|
|
93
|
-
|
|
94
|
-
updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
|
|
95
|
-
}
|
|
96
|
-
updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
|
|
90
|
+
const codeBlockNodes = fg('editor_code_wrapping_perf_improvement_ed-25141') ? getAllChangedCodeBlocksInTransaction(tr) : getAllCodeBlockNodesInDoc(newState);
|
|
91
|
+
if (codeBlockNodes) {
|
|
92
|
+
if (fg('editor_code_block_wrapping_language_change_bug')) {
|
|
93
|
+
updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
|
|
97
94
|
}
|
|
95
|
+
updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
|
|
98
96
|
}
|
|
99
97
|
const newPluginState = {
|
|
100
98
|
...pluginState,
|
|
101
99
|
pos: node ? node.pos : null,
|
|
102
100
|
isNodeSelected: tr.selection instanceof NodeSelection,
|
|
103
|
-
decorations:
|
|
101
|
+
decorations: updatedDecorationSet
|
|
104
102
|
};
|
|
105
103
|
return newPluginState;
|
|
106
104
|
}
|
|
@@ -130,10 +128,7 @@ export const createPlugin = ({
|
|
|
130
128
|
key: pluginKey,
|
|
131
129
|
props: {
|
|
132
130
|
decorations(state) {
|
|
133
|
-
|
|
134
|
-
return pluginKey.getState(state).decorations || DecorationSet.empty;
|
|
135
|
-
}
|
|
136
|
-
return undefined;
|
|
131
|
+
return pluginKey.getState(state).decorations || DecorationSet.empty;
|
|
137
132
|
},
|
|
138
133
|
nodeViews: {
|
|
139
134
|
codeBlock: (node, view, getPos) => {
|
|
@@ -144,7 +139,7 @@ export const createPlugin = ({
|
|
|
144
139
|
return codeBlockNodeView(node, view, getPos, formattedAriaLabel, api);
|
|
145
140
|
}
|
|
146
141
|
},
|
|
147
|
-
handleClickOn: createSelectionClickHandler(['codeBlock'], target =>
|
|
142
|
+
handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.classList.contains(codeBlockClassNames.lineNumberWidget) || target.classList.contains(codeBlockClassNames.gutter)), {
|
|
148
143
|
useLongPressSelection
|
|
149
144
|
}),
|
|
150
145
|
handleDOMEvents
|
|
@@ -5,7 +5,6 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
|
5
5
|
import CopyIcon from '@atlaskit/icon/core/migration/copy';
|
|
6
6
|
import TextWrapIcon from '@atlaskit/icon/core/text-wrap';
|
|
7
7
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { changeLanguage, copyContentToClipboard, removeCodeBlock, resetCopiedState, toggleWordWrapStateForCodeBlockNode } from '../editor-commands';
|
|
10
9
|
import { WrapIcon } from '../ui/icons/WrapIcon';
|
|
11
10
|
import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './codeBlockCopySelectionPlugin';
|
|
@@ -102,7 +101,7 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api) => (state, {
|
|
|
102
101
|
title: 'CodeBlock floating controls',
|
|
103
102
|
getDomRef: view => findDomRefAtPos(pos, view.domAtPos.bind(view)),
|
|
104
103
|
nodeType,
|
|
105
|
-
items:
|
|
104
|
+
items: [languageSelect, separator, codeBlockWrapButton, separator, ...copyToClipboardItems, deleteButton],
|
|
106
105
|
scrollable: true
|
|
107
106
|
};
|
|
108
107
|
};
|
|
@@ -4,12 +4,8 @@ export const codeBlockClassNames = {
|
|
|
4
4
|
start: CodeBlockSharedCssClassName.CODEBLOCK_START,
|
|
5
5
|
end: CodeBlockSharedCssClassName.CODEBLOCK_END,
|
|
6
6
|
contentWrapper: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
|
|
7
|
+
contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
|
|
7
8
|
gutter: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
|
|
8
9
|
content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
|
|
9
|
-
|
|
10
|
-
contentWrapperFg: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG,
|
|
11
|
-
contentFg: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG,
|
|
12
|
-
contentFgWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG_WRAPPED,
|
|
13
|
-
lineNumberWidget: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET,
|
|
14
|
-
gutterFg: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG
|
|
10
|
+
lineNumberWidget: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET
|
|
15
11
|
};
|
|
@@ -5,7 +5,6 @@ import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
|
|
|
5
5
|
import { contentAllowedInCodeBlock, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
|
|
6
6
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
7
7
|
import { findParentNodeOfType, findSelectedNodeOfType, isNodeSelection, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { ACTIONS } from '../pm-plugins/actions';
|
|
10
9
|
import { copySelectionPluginKey } from '../pm-plugins/codeBlockCopySelectionPlugin';
|
|
11
10
|
import { pluginKey } from '../pm-plugins/plugin-key';
|
|
@@ -188,9 +187,6 @@ export function insertCodeBlockWithAnalytics(inputMethod, analyticsAPI, isNestin
|
|
|
188
187
|
export var toggleWordWrapStateForCodeBlockNode = function toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI) {
|
|
189
188
|
return function (state, dispatch) {
|
|
190
189
|
var _findCodeBlock;
|
|
191
|
-
if (!fg('editor_support_code_block_wrapping')) {
|
|
192
|
-
return false;
|
|
193
|
-
}
|
|
194
190
|
var codeBlockNode = (_findCodeBlock = findCodeBlock(state)) === null || _findCodeBlock === void 0 ? void 0 : _findCodeBlock.node;
|
|
195
191
|
var tr = state.tr;
|
|
196
192
|
if (!codeBlockWrappedStates || !codeBlockNode) {
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
2
2
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
3
3
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
4
|
-
/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
|
|
5
|
-
import rafSchedule from 'raf-schd';
|
|
6
4
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
7
5
|
import { codeBlockWrappedStates, defaultWordWrapState, transferCodeBlockWrappedValue } from '@atlaskit/editor-common/code-block';
|
|
8
6
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
@@ -13,17 +11,17 @@ import { codeBlockClassNames } from '../ui/class-names';
|
|
|
13
11
|
var MATCH_NEWLINES = new RegExp('\n', 'g');
|
|
14
12
|
var toDOM = function toDOM(node, contentEditable, formattedAriaLabel) {
|
|
15
13
|
return ['div', {
|
|
16
|
-
class:
|
|
14
|
+
class: codeBlockClassNames.container
|
|
17
15
|
}, ['div', {
|
|
18
16
|
class: codeBlockClassNames.start,
|
|
19
17
|
contenteditable: 'false'
|
|
20
18
|
}], ['div', {
|
|
21
|
-
class:
|
|
19
|
+
class: codeBlockClassNames.contentWrapper
|
|
22
20
|
}, ['div', {
|
|
23
|
-
class:
|
|
21
|
+
class: codeBlockClassNames.gutter,
|
|
24
22
|
contenteditable: 'false'
|
|
25
23
|
}], ['div', {
|
|
26
|
-
class:
|
|
24
|
+
class: codeBlockClassNames.content
|
|
27
25
|
}, ['code', {
|
|
28
26
|
'data-language': node.attrs.language || '',
|
|
29
27
|
spellcheck: 'false',
|
|
@@ -41,21 +39,6 @@ export var CodeBlockView = /*#__PURE__*/function () {
|
|
|
41
39
|
_api$editorDisabled;
|
|
42
40
|
_classCallCheck(this, CodeBlockView);
|
|
43
41
|
_defineProperty(this, "formattedAriaLabel", '');
|
|
44
|
-
_defineProperty(this, "ensureLineNumbers", rafSchedule(function () {
|
|
45
|
-
var lines = 1;
|
|
46
|
-
_this.node.forEach(function (node) {
|
|
47
|
-
var text = node.text;
|
|
48
|
-
if (text) {
|
|
49
|
-
lines += (node.text.match(MATCH_NEWLINES) || []).length;
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
while (_this.lineNumberGutter.childElementCount < lines) {
|
|
53
|
-
_this.lineNumberGutter.appendChild(document.createElement('span'));
|
|
54
|
-
}
|
|
55
|
-
while (_this.lineNumberGutter.childElementCount > lines) {
|
|
56
|
-
_this.lineNumberGutter.removeChild(_this.lineNumberGutter.lastChild);
|
|
57
|
-
}
|
|
58
|
-
}));
|
|
59
42
|
/**
|
|
60
43
|
* As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
|
|
61
44
|
*/
|
|
@@ -79,18 +62,14 @@ export var CodeBlockView = /*#__PURE__*/function () {
|
|
|
79
62
|
this.node = _node;
|
|
80
63
|
this.dom = dom;
|
|
81
64
|
this.contentDOM = contentDOM;
|
|
82
|
-
this.lineNumberGutter = this.dom.querySelector(".".concat(
|
|
65
|
+
this.lineNumberGutter = this.dom.querySelector(".".concat(codeBlockClassNames.gutter));
|
|
83
66
|
this.api = api;
|
|
84
|
-
|
|
85
|
-
this.maintainDynamicGutterSize();
|
|
67
|
+
this.maintainDynamicGutterSize();
|
|
86
68
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
} else {
|
|
93
|
-
this.ensureLineNumbers();
|
|
69
|
+
// Ensure the code block node has a wrapped state.
|
|
70
|
+
// Wrapped state may already exist from breakout's recreating the node.
|
|
71
|
+
if (!codeBlockWrappedStates.has(_node)) {
|
|
72
|
+
codeBlockWrappedStates.set(_node, defaultWordWrapState);
|
|
94
73
|
}
|
|
95
74
|
this.handleEditorDisabledChanged();
|
|
96
75
|
}
|
|
@@ -160,20 +139,14 @@ export var CodeBlockView = /*#__PURE__*/function () {
|
|
|
160
139
|
return false;
|
|
161
140
|
}
|
|
162
141
|
if (node !== this.node) {
|
|
163
|
-
if (fg('
|
|
164
|
-
|
|
165
|
-
transferCodeBlockWrappedValue(this.node, node);
|
|
166
|
-
}
|
|
142
|
+
if (!fg('editor_code_block_wrapping_language_change_bug')) {
|
|
143
|
+
transferCodeBlockWrappedValue(this.node, node);
|
|
167
144
|
}
|
|
168
145
|
if (node.attrs.language !== this.node.attrs.language) {
|
|
169
146
|
this.contentDOM.setAttribute('data-language', node.attrs.language || '');
|
|
170
147
|
}
|
|
171
148
|
this.node = node;
|
|
172
|
-
|
|
173
|
-
this.maintainDynamicGutterSize();
|
|
174
|
-
} else {
|
|
175
|
-
this.ensureLineNumbers();
|
|
176
|
-
}
|
|
149
|
+
this.maintainDynamicGutterSize();
|
|
177
150
|
if (browser.android) {
|
|
178
151
|
this.coalesceDOMElements();
|
|
179
152
|
resetShouldIgnoreFollowingMutations(this.view.state, this.view.dispatch);
|
|
@@ -8,7 +8,7 @@ export function codeBlockAutoFullStopTransformPlugin() {
|
|
|
8
8
|
return new SafePlugin({
|
|
9
9
|
key: codeBlockAutoFullStopTransformPluginKey,
|
|
10
10
|
appendTransaction: function appendTransaction(_transactions, oldState, newState) {
|
|
11
|
-
if (!fg('
|
|
11
|
+
if (!fg('code_block_auto_insertion_bug_fix')) {
|
|
12
12
|
return undefined;
|
|
13
13
|
}
|
|
14
14
|
|
|
@@ -164,7 +164,7 @@ export var updateDecorationSetWithWordWrappedDecorator = function updateDecorati
|
|
|
164
164
|
updatedDecorationSet = updatedDecorationSet.remove(currentWrappedBlockDecorationSet);
|
|
165
165
|
} else {
|
|
166
166
|
var wrappedBlock = Decoration.node(pos, pos + innerNode.nodeSize, {
|
|
167
|
-
class: codeBlockClassNames.
|
|
167
|
+
class: codeBlockClassNames.contentWrapped
|
|
168
168
|
}, {
|
|
169
169
|
type: DECORATION_WRAPPED_BLOCK_NODE_TYPE
|
|
170
170
|
} // Allows for quick filtering of decorations while using `find`
|
|
@@ -69,7 +69,7 @@ export var createPlugin = function createPlugin(_ref) {
|
|
|
69
69
|
state: {
|
|
70
70
|
init: function init(_, state) {
|
|
71
71
|
var node = findCodeBlock(state, state.selection);
|
|
72
|
-
var initialDecorations =
|
|
72
|
+
var initialDecorations = generateInitialDecorations(state);
|
|
73
73
|
return {
|
|
74
74
|
pos: node ? node.pos : null,
|
|
75
75
|
contentCopied: false,
|
|
@@ -80,7 +80,7 @@ export var createPlugin = function createPlugin(_ref) {
|
|
|
80
80
|
},
|
|
81
81
|
apply: function apply(tr, pluginState, _oldState, newState) {
|
|
82
82
|
var meta = tr.getMeta(pluginKey);
|
|
83
|
-
if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_IS_WRAPPED
|
|
83
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.type) === ACTIONS.SET_IS_WRAPPED) {
|
|
84
84
|
var node = findCodeBlock(newState, tr.selection);
|
|
85
85
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
86
86
|
decorations: updateDecorationSetWithWordWrappedDecorator(pluginState.decorations, tr, node)
|
|
@@ -92,19 +92,17 @@ export var createPlugin = function createPlugin(_ref) {
|
|
|
92
92
|
// Updates mapping position of all existing decorations to new positions
|
|
93
93
|
// specifically used for updating word wrap node decorators (does not cover drag & drop, validateWordWrappedDecorators does).
|
|
94
94
|
var updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
if (
|
|
98
|
-
|
|
99
|
-
updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
|
|
100
|
-
}
|
|
101
|
-
updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
|
|
95
|
+
var codeBlockNodes = fg('editor_code_wrapping_perf_improvement_ed-25141') ? getAllChangedCodeBlocksInTransaction(tr) : getAllCodeBlockNodesInDoc(newState);
|
|
96
|
+
if (codeBlockNodes) {
|
|
97
|
+
if (fg('editor_code_block_wrapping_language_change_bug')) {
|
|
98
|
+
updateCodeBlockWrappedStateNodeKeys(codeBlockNodes, _oldState);
|
|
102
99
|
}
|
|
100
|
+
updatedDecorationSet = updateCodeBlockDecorations(tr, codeBlockNodes, updatedDecorationSet);
|
|
103
101
|
}
|
|
104
102
|
var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
105
103
|
pos: _node ? _node.pos : null,
|
|
106
104
|
isNodeSelected: tr.selection instanceof NodeSelection,
|
|
107
|
-
decorations:
|
|
105
|
+
decorations: updatedDecorationSet
|
|
108
106
|
});
|
|
109
107
|
return newPluginState;
|
|
110
108
|
}
|
|
@@ -131,10 +129,7 @@ export var createPlugin = function createPlugin(_ref) {
|
|
|
131
129
|
key: pluginKey,
|
|
132
130
|
props: {
|
|
133
131
|
decorations: function decorations(state) {
|
|
134
|
-
|
|
135
|
-
return pluginKey.getState(state).decorations || DecorationSet.empty;
|
|
136
|
-
}
|
|
137
|
-
return undefined;
|
|
132
|
+
return pluginKey.getState(state).decorations || DecorationSet.empty;
|
|
138
133
|
},
|
|
139
134
|
nodeViews: {
|
|
140
135
|
codeBlock: function codeBlock(node, view, getPos) {
|
|
@@ -145,7 +140,7 @@ export var createPlugin = function createPlugin(_ref) {
|
|
|
145
140
|
}
|
|
146
141
|
},
|
|
147
142
|
handleClickOn: createSelectionClickHandler(['codeBlock'], function (target) {
|
|
148
|
-
return
|
|
143
|
+
return !!(target.classList.contains(codeBlockClassNames.lineNumberWidget) || target.classList.contains(codeBlockClassNames.gutter));
|
|
149
144
|
}, {
|
|
150
145
|
useLongPressSelection: useLongPressSelection
|
|
151
146
|
}),
|
|
@@ -5,7 +5,6 @@ import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
|
5
5
|
import CopyIcon from '@atlaskit/icon/core/migration/copy';
|
|
6
6
|
import TextWrapIcon from '@atlaskit/icon/core/text-wrap';
|
|
7
7
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { changeLanguage, copyContentToClipboard, removeCodeBlock, resetCopiedState, toggleWordWrapStateForCodeBlockNode } from '../editor-commands';
|
|
10
9
|
import { WrapIcon } from '../ui/icons/WrapIcon';
|
|
11
10
|
import { provideVisualFeedbackForCopyButton, removeVisualFeedbackForCopyButton } from './codeBlockCopySelectionPlugin';
|
|
@@ -113,7 +112,7 @@ export var getToolbarConfig = function getToolbarConfig() {
|
|
|
113
112
|
return findDomRefAtPos(pos, view.domAtPos.bind(view));
|
|
114
113
|
},
|
|
115
114
|
nodeType: nodeType,
|
|
116
|
-
items:
|
|
115
|
+
items: [languageSelect, separator, codeBlockWrapButton, separator].concat(copyToClipboardItems, [deleteButton]),
|
|
117
116
|
scrollable: true
|
|
118
117
|
};
|
|
119
118
|
};
|
|
@@ -4,12 +4,8 @@ export var codeBlockClassNames = {
|
|
|
4
4
|
start: CodeBlockSharedCssClassName.CODEBLOCK_START,
|
|
5
5
|
end: CodeBlockSharedCssClassName.CODEBLOCK_END,
|
|
6
6
|
contentWrapper: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
|
|
7
|
+
contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
|
|
7
8
|
gutter: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER,
|
|
8
9
|
content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT,
|
|
9
|
-
|
|
10
|
-
contentWrapperFg: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG,
|
|
11
|
-
contentFg: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG,
|
|
12
|
-
contentFgWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG_WRAPPED,
|
|
13
|
-
lineNumberWidget: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET,
|
|
14
|
-
gutterFg: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG
|
|
10
|
+
lineNumberWidget: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET
|
|
15
11
|
};
|
|
@@ -16,7 +16,6 @@ export declare class CodeBlockView {
|
|
|
16
16
|
handleEditorDisabledChanged(): void;
|
|
17
17
|
updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
|
|
18
18
|
coalesceDOMElements(): void;
|
|
19
|
-
private ensureLineNumbers;
|
|
20
19
|
/**
|
|
21
20
|
* As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
|
|
22
21
|
*/
|
|
@@ -3,11 +3,8 @@ export declare const codeBlockClassNames: {
|
|
|
3
3
|
start: string;
|
|
4
4
|
end: string;
|
|
5
5
|
contentWrapper: string;
|
|
6
|
+
contentWrapped: string;
|
|
6
7
|
gutter: string;
|
|
7
8
|
content: string;
|
|
8
|
-
contentWrapperFg: string;
|
|
9
|
-
contentFg: string;
|
|
10
|
-
contentFgWrapped: string;
|
|
11
9
|
lineNumberWidget: string;
|
|
12
|
-
gutterFg: string;
|
|
13
10
|
};
|
|
@@ -16,7 +16,6 @@ export declare class CodeBlockView {
|
|
|
16
16
|
handleEditorDisabledChanged(): void;
|
|
17
17
|
updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
|
|
18
18
|
coalesceDOMElements(): void;
|
|
19
|
-
private ensureLineNumbers;
|
|
20
19
|
/**
|
|
21
20
|
* As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
|
|
22
21
|
*/
|
|
@@ -3,11 +3,8 @@ export declare const codeBlockClassNames: {
|
|
|
3
3
|
start: string;
|
|
4
4
|
end: string;
|
|
5
5
|
contentWrapper: string;
|
|
6
|
+
contentWrapped: string;
|
|
6
7
|
gutter: string;
|
|
7
8
|
content: string;
|
|
8
|
-
contentWrapperFg: string;
|
|
9
|
-
contentFg: string;
|
|
10
|
-
contentFgWrapped: string;
|
|
11
9
|
lineNumberWidget: string;
|
|
12
|
-
gutterFg: string;
|
|
13
10
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-code-block",
|
|
3
|
-
"version": "3.5.
|
|
3
|
+
"version": "3.5.9",
|
|
4
4
|
"description": "Code block plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,17 +33,16 @@
|
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@atlaskit/adf-schema": "^46.1.0",
|
|
35
35
|
"@atlaskit/code": "^15.6.0",
|
|
36
|
-
"@atlaskit/editor-common": "^95.
|
|
36
|
+
"@atlaskit/editor-common": "^95.10.0",
|
|
37
37
|
"@atlaskit/editor-plugin-analytics": "^1.10.0",
|
|
38
38
|
"@atlaskit/editor-plugin-composition": "^1.2.0",
|
|
39
39
|
"@atlaskit/editor-plugin-decorations": "^1.3.0",
|
|
40
40
|
"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
|
|
41
|
-
"@atlaskit/editor-prosemirror": "6.
|
|
42
|
-
"@atlaskit/icon": "^
|
|
41
|
+
"@atlaskit/editor-prosemirror": "6.2.1",
|
|
42
|
+
"@atlaskit/icon": "^23.0.0",
|
|
43
43
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
44
44
|
"@atlaskit/prosemirror-input-rules": "^3.2.0",
|
|
45
|
-
"@babel/runtime": "^7.0.0"
|
|
46
|
-
"raf-schd": "^4.0.3"
|
|
45
|
+
"@babel/runtime": "^7.0.0"
|
|
47
46
|
},
|
|
48
47
|
"peerDependencies": {
|
|
49
48
|
"react": "^16.8.0 || ^17.0.0 || ~18.2.0",
|
|
@@ -94,9 +93,6 @@
|
|
|
94
93
|
}
|
|
95
94
|
},
|
|
96
95
|
"platform-feature-flags": {
|
|
97
|
-
"editor_support_code_block_wrapping": {
|
|
98
|
-
"type": "boolean"
|
|
99
|
-
},
|
|
100
96
|
"code_block_auto_insertion_bug_fix": {
|
|
101
97
|
"type": "boolean"
|
|
102
98
|
},
|