@atlaskit/editor-plugin-code-block-advanced 2.2.1 → 2.2.2

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 CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-code-block-advanced
2
2
 
3
+ ## 2.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#139592](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139592)
8
+ [`fe3dc07ed6ab8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fe3dc07ed6ab8) -
9
+ Fixes a selection bug on chrome if there are multiple code blocks at the start of a document
10
+
3
11
  ## 2.2.1
4
12
 
5
13
  ### Patch Changes
@@ -14,6 +14,7 @@ var _language = require("@codemirror/language");
14
14
  var _state = require("@codemirror/state");
15
15
  var _view = require("@codemirror/view");
16
16
  var _codeBlock = require("@atlaskit/editor-common/code-block");
17
+ var _whitespace = require("@atlaskit/editor-common/whitespace");
17
18
  var _state2 = require("@atlaskit/editor-prosemirror/state");
18
19
  var _view2 = require("@atlaskit/editor-prosemirror/view");
19
20
  var _syntaxHighlightingTheme = require("../ui/syntaxHighlightingTheme");
@@ -80,8 +81,14 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
80
81
  }), (0, _manageSelectionMarker.manageSelectionMarker)(config.api), (0, _prosemirrorDecorations.prosemirrorDecorationPlugin)(this.pmFacet, view, getPos)])
81
82
  });
82
83
 
84
+ // We append an additional element that fixes a selection bug on chrome if the code block
85
+ // is the first element followed by subsequent code blocks
86
+ var spaceContainer = document.createElement('span');
87
+ spaceContainer.innerText = _whitespace.ZERO_WIDTH_SPACE;
88
+ spaceContainer.style.height = '0';
83
89
  // The editor's outer node is our DOM representation
84
90
  this.dom = this.cm.dom;
91
+ this.dom.appendChild(spaceContainer);
85
92
 
86
93
  // This flag is used to avoid an update loop between the outer and
87
94
  // inner editor
@@ -4,6 +4,7 @@ import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
4
4
  import { Compartment, EditorSelection, Facet } from '@codemirror/state';
5
5
  import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
6
6
  import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
7
+ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
7
8
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
8
9
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
9
10
  import { highlightStyle } from '../ui/syntaxHighlightingTheme';
@@ -60,8 +61,14 @@ class CodeBlockAdvancedNodeView {
60
61
  }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)]
61
62
  });
62
63
 
64
+ // We append an additional element that fixes a selection bug on chrome if the code block
65
+ // is the first element followed by subsequent code blocks
66
+ const spaceContainer = document.createElement('span');
67
+ spaceContainer.innerText = ZERO_WIDTH_SPACE;
68
+ spaceContainer.style.height = '0';
63
69
  // The editor's outer node is our DOM representation
64
70
  this.dom = this.cm.dom;
71
+ this.dom.appendChild(spaceContainer);
65
72
 
66
73
  // This flag is used to avoid an update loop between the outer and
67
74
  // inner editor
@@ -7,6 +7,7 @@ import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
7
7
  import { Compartment, EditorSelection, Facet } from '@codemirror/state';
8
8
  import { EditorView as CodeMirror, lineNumbers, gutters } from '@codemirror/view';
9
9
  import { isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
10
+ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
10
11
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
11
12
  import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
12
13
  import { highlightStyle } from '../ui/syntaxHighlightingTheme';
@@ -73,8 +74,14 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
73
74
  }), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)])
74
75
  });
75
76
 
77
+ // We append an additional element that fixes a selection bug on chrome if the code block
78
+ // is the first element followed by subsequent code blocks
79
+ var spaceContainer = document.createElement('span');
80
+ spaceContainer.innerText = ZERO_WIDTH_SPACE;
81
+ spaceContainer.style.height = '0';
76
82
  // The editor's outer node is our DOM representation
77
83
  this.dom = this.cm.dom;
84
+ this.dom.appendChild(spaceContainer);
78
85
 
79
86
  // This flag is used to avoid an update loop between the outer and
80
87
  // inner editor
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-code-block-advanced",
3
- "version": "2.2.1",
3
+ "version": "2.2.2",
4
4
  "description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "dependencies": {
35
35
  "@atlaskit/adf-schema": "^47.6.0",
36
- "@atlaskit/editor-common": "^103.0.0",
36
+ "@atlaskit/editor-common": "^103.3.0",
37
37
  "@atlaskit/editor-plugin-code-block": "^4.2.0",
38
38
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
39
39
  "@atlaskit/editor-plugin-find-replace": "^2.0.0",
@@ -10,6 +10,7 @@ import type {
10
10
  getPosHandlerNode,
11
11
  ExtractInjectionAPI,
12
12
  } from '@atlaskit/editor-common/types';
13
+ import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
13
14
  import { EditorSelectionAPI } from '@atlaskit/editor-plugin-selection';
14
15
  import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
15
16
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
@@ -110,8 +111,14 @@ class CodeBlockAdvancedNodeView implements NodeView {
110
111
  ],
111
112
  });
112
113
 
114
+ // We append an additional element that fixes a selection bug on chrome if the code block
115
+ // is the first element followed by subsequent code blocks
116
+ const spaceContainer = document.createElement('span');
117
+ spaceContainer.innerText = ZERO_WIDTH_SPACE;
118
+ spaceContainer.style.height = '0';
113
119
  // The editor's outer node is our DOM representation
114
120
  this.dom = this.cm.dom;
121
+ this.dom.appendChild(spaceContainer);
115
122
 
116
123
  // This flag is used to avoid an update loop between the outer and
117
124
  // inner editor