@atlaskit/editor-plugin-code-block-advanced 2.2.6 → 2.2.7

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 (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/theme.js +10 -1
  3. package/dist/es2019/ui/theme.js +10 -1
  4. package/dist/esm/ui/theme.js +10 -1
  5. package/package.json +2 -2
  6. package/src/ui/theme.ts +11 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-code-block-advanced
2
2
 
3
+ ## 2.2.7
4
+
5
+ ### Patch Changes
6
+
7
+ - [#153048](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/153048)
8
+ [`3ed1cacec6ad5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3ed1cacec6ad5) -
9
+ [ux] Fix small gutter flicker on load
10
+
3
11
  ## 2.2.6
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/theme.js CHANGED
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.cmTheme = void 0;
7
7
  var _view = require("@codemirror/view");
8
+ var lineHeight = '1.5rem';
8
9
  var cmTheme = exports.cmTheme = _view.EditorView.theme({
9
10
  '&': {
10
11
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
@@ -15,7 +16,7 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
15
16
  fontSize: '0.875rem',
16
17
  // Custom syntax styling to match existing styling
17
18
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
18
- lineHeight: '1.5rem'
19
+ lineHeight: lineHeight
19
20
  },
20
21
  '&.cm-focused': {
21
22
  outline: 'none'
@@ -60,6 +61,14 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
60
61
  paddingLeft: "var(--ds-space-0, 0px)",
61
62
  paddingRight: "var(--ds-space-0, 0px)",
62
63
  minWidth: 'unset'
64
+ },
65
+ // Set the gutter element min height to prevent flicker of styling while
66
+ // codemirror is calculating (which happens after an animation frame).
67
+ // Example problem: https://github.com/codemirror/dev/issues/1076
68
+ // Ignore the first gutter element as it is a special hidden element.
69
+ '.cm-gutterElement:not(:first-child)': {
70
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
71
+ minHeight: lineHeight
63
72
  }
64
73
  });
65
74
 
package/dist/es2019/ui/theme.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { EditorView as CodeMirror } from '@codemirror/view';
2
+ const lineHeight = '1.5rem';
2
3
  export const cmTheme = CodeMirror.theme({
3
4
  '&': {
4
5
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
@@ -9,7 +10,7 @@ export const cmTheme = CodeMirror.theme({
9
10
  fontSize: '0.875rem',
10
11
  // Custom syntax styling to match existing styling
11
12
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
12
- lineHeight: '1.5rem'
13
+ lineHeight: lineHeight
13
14
  },
14
15
  '&.cm-focused': {
15
16
  outline: 'none'
@@ -54,6 +55,14 @@ export const cmTheme = CodeMirror.theme({
54
55
  paddingLeft: "var(--ds-space-0, 0px)",
55
56
  paddingRight: "var(--ds-space-0, 0px)",
56
57
  minWidth: 'unset'
58
+ },
59
+ // Set the gutter element min height to prevent flicker of styling while
60
+ // codemirror is calculating (which happens after an animation frame).
61
+ // Example problem: https://github.com/codemirror/dev/issues/1076
62
+ // Ignore the first gutter element as it is a special hidden element.
63
+ '.cm-gutterElement:not(:first-child)': {
64
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
65
+ minHeight: lineHeight
57
66
  }
58
67
  });
59
68
 
package/dist/esm/ui/theme.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { EditorView as CodeMirror } from '@codemirror/view';
2
+ var lineHeight = '1.5rem';
2
3
  export var cmTheme = CodeMirror.theme({
3
4
  '&': {
4
5
  backgroundColor: "var(--ds-background-neutral, #091E420F)",
@@ -9,7 +10,7 @@ export var cmTheme = CodeMirror.theme({
9
10
  fontSize: '0.875rem',
10
11
  // Custom syntax styling to match existing styling
11
12
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
12
- lineHeight: '1.5rem'
13
+ lineHeight: lineHeight
13
14
  },
14
15
  '&.cm-focused': {
15
16
  outline: 'none'
@@ -54,6 +55,14 @@ export var cmTheme = CodeMirror.theme({
54
55
  paddingLeft: "var(--ds-space-0, 0px)",
55
56
  paddingRight: "var(--ds-space-0, 0px)",
56
57
  minWidth: 'unset'
58
+ },
59
+ // Set the gutter element min height to prevent flicker of styling while
60
+ // codemirror is calculating (which happens after an animation frame).
61
+ // Example problem: https://github.com/codemirror/dev/issues/1076
62
+ // Ignore the first gutter element as it is a special hidden element.
63
+ '.cm-gutterElement:not(:first-child)': {
64
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
65
+ minHeight: lineHeight
57
66
  }
58
67
  });
59
68
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-code-block-advanced",
3
- "version": "2.2.6",
3
+ "version": "2.2.7",
4
4
  "description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -38,7 +38,7 @@
38
38
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
39
39
  "@atlaskit/editor-plugin-find-replace": "^2.2.0",
40
40
  "@atlaskit/editor-plugin-selection": "^2.2.0",
41
- "@atlaskit/editor-plugin-selection-marker": "^2.2.0",
41
+ "@atlaskit/editor-plugin-selection-marker": "^2.3.0",
42
42
  "@atlaskit/editor-prosemirror": "7.0.0",
43
43
  "@atlaskit/tokens": "^4.8.0",
44
44
  "@babel/runtime": "^7.0.0",
package/src/ui/theme.ts CHANGED
@@ -2,6 +2,8 @@ import { EditorView as CodeMirror } from '@codemirror/view';
2
2
 
3
3
  import { token } from '@atlaskit/tokens';
4
4
 
5
+ const lineHeight = '1.5rem';
6
+
5
7
  export const cmTheme = CodeMirror.theme({
6
8
  '&': {
7
9
  backgroundColor: token('color.background.neutral'),
@@ -12,7 +14,7 @@ export const cmTheme = CodeMirror.theme({
12
14
  fontSize: '0.875rem',
13
15
  // Custom syntax styling to match existing styling
14
16
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
15
- lineHeight: '1.5rem',
17
+ lineHeight: lineHeight,
16
18
  },
17
19
  '&.cm-focused': {
18
20
  outline: 'none',
@@ -58,6 +60,14 @@ export const cmTheme = CodeMirror.theme({
58
60
  paddingRight: token('space.0'),
59
61
  minWidth: 'unset',
60
62
  },
63
+ // Set the gutter element min height to prevent flicker of styling while
64
+ // codemirror is calculating (which happens after an animation frame).
65
+ // Example problem: https://github.com/codemirror/dev/issues/1076
66
+ // Ignore the first gutter element as it is a special hidden element.
67
+ '.cm-gutterElement:not(:first-child)': {
68
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
69
+ minHeight: lineHeight,
70
+ },
61
71
  });
62
72
 
63
73
  /**