@atlaskit/editor-plugin-code-block 3.3.3 → 3.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/nodeviews/code-block.js +20 -2
  3. package/dist/cjs/pm-plugins/main.js +13 -8
  4. package/dist/cjs/toolbar.js +1 -0
  5. package/dist/es2019/nodeviews/code-block.js +20 -2
  6. package/dist/es2019/pm-plugins/main.js +13 -8
  7. package/dist/es2019/toolbar.js +1 -0
  8. package/dist/esm/nodeviews/code-block.js +20 -2
  9. package/dist/esm/pm-plugins/main.js +13 -8
  10. package/dist/esm/toolbar.js +1 -0
  11. package/dist/types/nodeviews/code-block.d.ts +4 -0
  12. package/dist/types-ts4.5/nodeviews/code-block.d.ts +4 -0
  13. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/editor-plugin-code-block
2
2
 
3
+ ## 3.3.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [#130377](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130377)
8
+ [`3dad41b881f45`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3dad41b881f45) -
9
+ [ux] ED-24613 add support for decorator mapping on new transactions and live view button enable
10
+ - Updated dependencies
11
+
12
+ ## 3.3.4
13
+
14
+ ### Patch Changes
15
+
16
+ - [#128388](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/128388)
17
+ [`0ea0f81d30dcc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0ea0f81d30dcc) -
18
+ ED-24501 Add a CSS var to maintain a dynamic line number gutter size on the code block based on
19
+ the max number length. ED-24573 update handleClickOn in the code block plugin to work with new
20
+ line number gutter.
21
+
3
22
  ## 3.3.3
4
23
 
5
24
  ### Patch Changes
package/dist/cjs/nodeviews/code-block.js CHANGED
@@ -60,6 +60,20 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
60
60
  _this.lineNumberGutter.removeChild(_this.lineNumberGutter.lastChild);
61
61
  }
62
62
  }));
63
+ /**
64
+ * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
65
+ */
66
+ (0, _defineProperty2.default)(this, "maintainDynamicGutterSize", function () {
67
+ var totalLineCount = 1;
68
+ _this.node.forEach(function (node) {
69
+ var text = node.text;
70
+ if (text) {
71
+ totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
72
+ }
73
+ });
74
+ var maxDigits = totalLineCount.toString().length;
75
+ _this.dom.style.setProperty('--lineNumberGutterWidth', "".concat(maxDigits, "ch"));
76
+ });
63
77
  this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
64
78
  var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled))),
65
79
  dom = _DOMSerializer$render.dom,
@@ -71,7 +85,9 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
71
85
  this.contentDOM = contentDOM;
72
86
  this.lineNumberGutter = this.dom.querySelector(".".concat((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? _classNames.codeBlockClassNames.gutterFg : _classNames.codeBlockClassNames.gutter));
73
87
  this.api = api;
74
- if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
88
+ if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
89
+ this.maintainDynamicGutterSize();
90
+ } else {
75
91
  this.ensureLineNumbers();
76
92
  }
77
93
  this.handleEditorDisabledChanged();
@@ -149,7 +165,9 @@ var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
149
165
  this.contentDOM.setAttribute('data-language', node.attrs.language || '');
150
166
  }
151
167
  this.node = node;
152
- if (!(0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
168
+ if ((0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping')) {
169
+ this.maintainDynamicGutterSize();
170
+ } else {
153
171
  this.ensureLineNumbers();
154
172
  }
155
173
  if (_utils.browser.android) {
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -70,20 +70,18 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
70
70
  }
71
71
  return decorationSetFromState;
72
72
  };
73
- var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, state) {
74
- var decorationSetFromState = pluginState.decorations;
73
+ var updateLineDecorationSet = function updateLineDecorationSet(tr, state, decorationSet) {
75
74
  // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
76
- var children = decorationSetFromState.find(undefined, undefined, function (spec) {
75
+ var children = decorationSet.find(undefined, undefined, function (spec) {
77
76
  return spec.type === _decorators.DECORATION_WIDGET_TYPE;
78
77
  });
79
- decorationSetFromState = decorationSetFromState.remove(children);
78
+ decorationSet = decorationSet.remove(children);
80
79
 
81
80
  // regenerate all the line number for the documents code blocks
82
81
  var lineDecorators = createLineNumberDecoratorsFromDecendants(state);
83
82
 
84
83
  // add the newly generated line numbers to the decorations set
85
- decorationSetFromState = decorationSetFromState.add(tr.doc, (0, _toConsumableArray2.default)(lineDecorators));
86
- return decorationSetFromState;
84
+ return decorationSet.add(tr.doc, (0, _toConsumableArray2.default)(lineDecorators));
87
85
  };
88
86
 
89
87
  // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
@@ -147,10 +145,17 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
147
145
  }
148
146
  if (tr.docChanged) {
149
147
  var _node = (0, _utils2.findCodeBlock)(newState, tr.selection);
148
+
149
+ // Updates mapping position of all existing decorations to new positions
150
+ // specifically used for updating word wrap node decorators
151
+ var updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
152
+
153
+ // Wipe and regenerate all line numbers in the document
154
+ updatedDecorationSet = updateLineDecorationSet(tr, newState, updatedDecorationSet);
150
155
  var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
151
156
  pos: _node ? _node.pos : null,
152
157
  isNodeSelected: tr.selection instanceof _state.NodeSelection,
153
- decorations: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, newState) : _view.DecorationSet.empty
158
+ decorations: (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? updatedDecorationSet : _view.DecorationSet.empty
154
159
  });
155
160
  return newPluginState;
156
161
  }
@@ -188,7 +193,7 @@ var createPlugin = exports.createPlugin = function createPlugin(_ref) {
188
193
  }
189
194
  },
190
195
  handleClickOn: (0, _selection.createSelectionClickHandler)(['codeBlock'], function (target) {
191
- return !!(target.closest(".".concat(_classNames.codeBlockClassNames.gutter)) || target.classList.contains(_classNames.codeBlockClassNames.content));
196
+ return (0, _platformFeatureFlags.fg)('editor_support_code_block_wrapping') ? !!(target.classList.contains(_classNames.codeBlockClassNames.lineNumberWidget) || target.classList.contains(_classNames.codeBlockClassNames.gutterFg)) : !!(target.closest(".".concat(_classNames.codeBlockClassNames.gutter)) || target.classList.contains(_classNames.codeBlockClassNames.content));
192
197
  }, {
193
198
  useLongPressSelection: useLongPressSelection
194
199
  }),
package/dist/cjs/toolbar.js CHANGED
@@ -106,6 +106,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
106
106
  var codeBlockWrapButton = {
107
107
  id: 'editor.codeBlock.wrap',
108
108
  type: 'button',
109
+ supportsViewMode: true,
109
110
  icon: _WrapIcon.WrapIcon,
110
111
  onClick: (0, _actions.toggleWordWrapStateForCodeBlockNode)(editorAnalyticsAPI),
111
112
  // Hooking up here for demo purposes. To be revisited with ED-24222.
package/dist/es2019/nodeviews/code-block.js CHANGED
@@ -47,6 +47,20 @@ export class CodeBlockView {
47
47
  this.lineNumberGutter.removeChild(this.lineNumberGutter.lastChild);
48
48
  }
49
49
  }));
50
+ /**
51
+ * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
52
+ */
53
+ _defineProperty(this, "maintainDynamicGutterSize", () => {
54
+ let totalLineCount = 1;
55
+ this.node.forEach(node => {
56
+ const text = node.text;
57
+ if (text) {
58
+ totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
59
+ }
60
+ });
61
+ const maxDigits = totalLineCount.toString().length;
62
+ this.dom.style.setProperty('--lineNumberGutterWidth', `${maxDigits}ch`);
63
+ });
50
64
  this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
51
65
  const {
52
66
  dom,
@@ -59,7 +73,9 @@ export class CodeBlockView {
59
73
  this.contentDOM = contentDOM;
60
74
  this.lineNumberGutter = this.dom.querySelector(`.${fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFg : codeBlockClassNames.gutter}`);
61
75
  this.api = api;
62
- if (!fg('editor_support_code_block_wrapping')) {
76
+ if (fg('editor_support_code_block_wrapping')) {
77
+ this.maintainDynamicGutterSize();
78
+ } else {
63
79
  this.ensureLineNumbers();
64
80
  }
65
81
  this.handleEditorDisabledChanged();
@@ -126,7 +142,9 @@ export class CodeBlockView {
126
142
  this.contentDOM.setAttribute('data-language', node.attrs.language || '');
127
143
  }
128
144
  this.node = node;
129
- if (!fg('editor_support_code_block_wrapping')) {
145
+ if (fg('editor_support_code_block_wrapping')) {
146
+ this.maintainDynamicGutterSize();
147
+ } else {
130
148
  this.ensureLineNumbers();
131
149
  }
132
150
  if (browser.android) {
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -58,18 +58,16 @@ export const createPlugin = ({
58
58
  }
59
59
  return decorationSetFromState;
60
60
  };
61
- const createLineDecoratorPluginState = (pluginState, tr, state) => {
62
- let decorationSetFromState = pluginState.decorations;
61
+ const updateLineDecorationSet = (tr, state, decorationSet) => {
63
62
  // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
64
- const children = decorationSetFromState.find(undefined, undefined, spec => spec.type === DECORATION_WIDGET_TYPE);
65
- decorationSetFromState = decorationSetFromState.remove(children);
63
+ const children = decorationSet.find(undefined, undefined, spec => spec.type === DECORATION_WIDGET_TYPE);
64
+ decorationSet = decorationSet.remove(children);
66
65
 
67
66
  // regenerate all the line number for the documents code blocks
68
67
  const lineDecorators = createLineNumberDecoratorsFromDecendants(state);
69
68
 
70
69
  // add the newly generated line numbers to the decorations set
71
- decorationSetFromState = decorationSetFromState.add(tr.doc, [...lineDecorators]);
72
- return decorationSetFromState;
70
+ return decorationSet.add(tr.doc, [...lineDecorators]);
73
71
  };
74
72
 
75
73
  // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
@@ -132,11 +130,18 @@ export const createPlugin = ({
132
130
  }
133
131
  if (tr.docChanged) {
134
132
  const node = findCodeBlock(newState, tr.selection);
133
+
134
+ // Updates mapping position of all existing decorations to new positions
135
+ // specifically used for updating word wrap node decorators
136
+ let updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
137
+
138
+ // Wipe and regenerate all line numbers in the document
139
+ updatedDecorationSet = updateLineDecorationSet(tr, newState, updatedDecorationSet);
135
140
  const newPluginState = {
136
141
  ...pluginState,
137
142
  pos: node ? node.pos : null,
138
143
  isNodeSelected: tr.selection instanceof NodeSelection,
139
- decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, newState) : DecorationSet.empty
144
+ decorations: fg('editor_support_code_block_wrapping') ? updatedDecorationSet : DecorationSet.empty
140
145
  };
141
146
  return newPluginState;
142
147
  }
@@ -174,7 +179,7 @@ export const createPlugin = ({
174
179
  nodeViews: {
175
180
  codeBlock: (node, view, getPos) => codeBlockNodeView(node, view, getPos, api)
176
181
  },
177
- handleClickOn: createSelectionClickHandler(['codeBlock'], target => !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
182
+ handleClickOn: createSelectionClickHandler(['codeBlock'], target => fg('editor_support_code_block_wrapping') ? !!(target.classList.contains(codeBlockClassNames.lineNumberWidget) || target.classList.contains(codeBlockClassNames.gutterFg)) : !!(target.closest(`.${codeBlockClassNames.gutter}`) || target.classList.contains(codeBlockClassNames.content)), {
178
183
  useLongPressSelection
179
184
  }),
180
185
  handleDOMEvents
package/dist/es2019/toolbar.js CHANGED
@@ -87,6 +87,7 @@ export const getToolbarConfig = (allowCopyToClipboard = false, api) => (state, {
87
87
  const codeBlockWrapButton = {
88
88
  id: 'editor.codeBlock.wrap',
89
89
  type: 'button',
90
+ supportsViewMode: true,
90
91
  icon: WrapIcon,
91
92
  onClick: toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI),
92
93
  // Hooking up here for demo purposes. To be revisited with ED-24222.
package/dist/esm/nodeviews/code-block.js CHANGED
@@ -53,6 +53,20 @@ export var CodeBlockView = /*#__PURE__*/function () {
53
53
  _this.lineNumberGutter.removeChild(_this.lineNumberGutter.lastChild);
54
54
  }
55
55
  }));
56
+ /**
57
+ * As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
58
+ */
59
+ _defineProperty(this, "maintainDynamicGutterSize", function () {
60
+ var totalLineCount = 1;
61
+ _this.node.forEach(function (node) {
62
+ var text = node.text;
63
+ if (text) {
64
+ totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
65
+ }
66
+ });
67
+ var maxDigits = totalLineCount.toString().length;
68
+ _this.dom.style.setProperty('--lineNumberGutterWidth', "".concat(maxDigits, "ch"));
69
+ });
56
70
  this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
57
71
  var _DOMSerializer$render = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled))),
58
72
  dom = _DOMSerializer$render.dom,
@@ -64,7 +78,9 @@ export var CodeBlockView = /*#__PURE__*/function () {
64
78
  this.contentDOM = contentDOM;
65
79
  this.lineNumberGutter = this.dom.querySelector(".".concat(fg('editor_support_code_block_wrapping') ? codeBlockClassNames.gutterFg : codeBlockClassNames.gutter));
66
80
  this.api = api;
67
- if (!fg('editor_support_code_block_wrapping')) {
81
+ if (fg('editor_support_code_block_wrapping')) {
82
+ this.maintainDynamicGutterSize();
83
+ } else {
68
84
  this.ensureLineNumbers();
69
85
  }
70
86
  this.handleEditorDisabledChanged();
@@ -142,7 +158,9 @@ export var CodeBlockView = /*#__PURE__*/function () {
142
158
  this.contentDOM.setAttribute('data-language', node.attrs.language || '');
143
159
  }
144
160
  this.node = node;
145
- if (!fg('editor_support_code_block_wrapping')) {
161
+ if (fg('editor_support_code_block_wrapping')) {
162
+ this.maintainDynamicGutterSize();
163
+ } else {
146
164
  this.ensureLineNumbers();
147
165
  }
148
166
  if (browser.android) {
package/dist/esm/pm-plugins/main.js CHANGED
@@ -63,20 +63,18 @@ export var createPlugin = function createPlugin(_ref) {
63
63
  }
64
64
  return decorationSetFromState;
65
65
  };
66
- var createLineDecoratorPluginState = function createLineDecoratorPluginState(pluginState, tr, state) {
67
- var decorationSetFromState = pluginState.decorations;
66
+ var updateLineDecorationSet = function updateLineDecorationSet(tr, state, decorationSet) {
68
67
  // remove all the line number children from the decorations set. 'undefined, undefined' is used to find() the whole doc.
69
- var children = decorationSetFromState.find(undefined, undefined, function (spec) {
68
+ var children = decorationSet.find(undefined, undefined, function (spec) {
70
69
  return spec.type === DECORATION_WIDGET_TYPE;
71
70
  });
72
- decorationSetFromState = decorationSetFromState.remove(children);
71
+ decorationSet = decorationSet.remove(children);
73
72
 
74
73
  // regenerate all the line number for the documents code blocks
75
74
  var lineDecorators = createLineNumberDecoratorsFromDecendants(state);
76
75
 
77
76
  // add the newly generated line numbers to the decorations set
78
- decorationSetFromState = decorationSetFromState.add(tr.doc, _toConsumableArray(lineDecorators));
79
- return decorationSetFromState;
77
+ return decorationSet.add(tr.doc, _toConsumableArray(lineDecorators));
80
78
  };
81
79
 
82
80
  // ME-1599: Composition on mobile was causing the DOM observer to mutate the code block
@@ -140,10 +138,17 @@ export var createPlugin = function createPlugin(_ref) {
140
138
  }
141
139
  if (tr.docChanged) {
142
140
  var _node = findCodeBlock(newState, tr.selection);
141
+
142
+ // Updates mapping position of all existing decorations to new positions
143
+ // specifically used for updating word wrap node decorators
144
+ var updatedDecorationSet = pluginState.decorations.map(tr.mapping, tr.doc);
145
+
146
+ // Wipe and regenerate all line numbers in the document
147
+ updatedDecorationSet = updateLineDecorationSet(tr, newState, updatedDecorationSet);
143
148
  var newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
144
149
  pos: _node ? _node.pos : null,
145
150
  isNodeSelected: tr.selection instanceof NodeSelection,
146
- decorations: fg('editor_support_code_block_wrapping') ? createLineDecoratorPluginState(pluginState, tr, newState) : DecorationSet.empty
151
+ decorations: fg('editor_support_code_block_wrapping') ? updatedDecorationSet : DecorationSet.empty
147
152
  });
148
153
  return newPluginState;
149
154
  }
@@ -181,7 +186,7 @@ export var createPlugin = function createPlugin(_ref) {
181
186
  }
182
187
  },
183
188
  handleClickOn: createSelectionClickHandler(['codeBlock'], function (target) {
184
- return !!(target.closest(".".concat(codeBlockClassNames.gutter)) || target.classList.contains(codeBlockClassNames.content));
189
+ return fg('editor_support_code_block_wrapping') ? !!(target.classList.contains(codeBlockClassNames.lineNumberWidget) || target.classList.contains(codeBlockClassNames.gutterFg)) : !!(target.closest(".".concat(codeBlockClassNames.gutter)) || target.classList.contains(codeBlockClassNames.content));
185
190
  }, {
186
191
  useLongPressSelection: useLongPressSelection
187
192
  }),
package/dist/esm/toolbar.js CHANGED
@@ -96,6 +96,7 @@ export var getToolbarConfig = function getToolbarConfig() {
96
96
  var codeBlockWrapButton = {
97
97
  id: 'editor.codeBlock.wrap',
98
98
  type: 'button',
99
+ supportsViewMode: true,
99
100
  icon: WrapIcon,
100
101
  onClick: toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI),
101
102
  // Hooking up here for demo purposes. To be revisited with ED-24222.
package/dist/types/nodeviews/code-block.d.ts CHANGED
@@ -16,6 +16,10 @@ export declare class CodeBlockView {
16
16
  updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
17
17
  coalesceDOMElements(): void;
18
18
  private ensureLineNumbers;
19
+ /**
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.
21
+ */
22
+ private maintainDynamicGutterSize;
19
23
  update(node: Node): boolean;
20
24
  ignoreMutation(record: MutationRecord | {
21
25
  type: 'selection';
package/dist/types-ts4.5/nodeviews/code-block.d.ts CHANGED
@@ -16,6 +16,10 @@ export declare class CodeBlockView {
16
16
  updateDOMAndSelection(savedInnerHTML: string, newCursorPosition: number): void;
17
17
  coalesceDOMElements(): void;
18
18
  private ensureLineNumbers;
19
+ /**
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.
21
+ */
22
+ private maintainDynamicGutterSize;
19
23
  update(node: Node): boolean;
20
24
  ignoreMutation(record: MutationRecord | {
21
25
  type: 'selection';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-code-block",
3
- "version": "3.3.3",
3
+ "version": "3.3.5",
4
4
  "description": "Code block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -35,7 +35,7 @@
35
35
  "dependencies": {
36
36
  "@atlaskit/adf-schema": "^40.8.1",
37
37
  "@atlaskit/code": "^15.5.0",
38
- "@atlaskit/editor-common": "^87.10.0",
38
+ "@atlaskit/editor-common": "^87.11.0",
39
39
  "@atlaskit/editor-plugin-analytics": "^1.7.0",
40
40
  "@atlaskit/editor-plugin-composition": "^1.2.0",
41
41
  "@atlaskit/editor-plugin-decorations": "^1.2.0",