@atlaskit/editor-plugin-code-block-advanced 1.0.3 → 1.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 +20 -0
- package/dist/cjs/nodeviews/codemirrorSync/syncCMWithPM.js +1 -1
- package/dist/cjs/nodeviews/extensions/prosemirrorDecorations.js +0 -8
- package/dist/cjs/ui/theme.js +20 -2
- package/dist/es2019/nodeviews/codemirrorSync/syncCMWithPM.js +1 -1
- package/dist/es2019/nodeviews/extensions/prosemirrorDecorations.js +0 -8
- package/dist/es2019/ui/theme.js +62 -2
- package/dist/esm/nodeviews/codemirrorSync/syncCMWithPM.js +1 -1
- package/dist/esm/nodeviews/extensions/prosemirrorDecorations.js +0 -8
- package/dist/esm/ui/theme.js +20 -2
- package/package.json +10 -10
- package/src/nodeviews/codemirrorSync/syncCMWithPM.ts +1 -1
- package/src/nodeviews/extensions/prosemirrorDecorations.ts +0 -8
- package/src/ui/theme.ts +64 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-code-block-advanced
|
|
2
2
|
|
|
3
|
+
## 1.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#113094](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113094)
|
|
8
|
+
[`b7cb7ca6cd1e0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b7cb7ca6cd1e0) -
|
|
9
|
+
Stop auto-scrolling on large code blocks from prosemirror.
|
|
10
|
+
|
|
11
|
+
## 1.1.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [#105322](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105322)
|
|
16
|
+
[`8876083532adc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8876083532adc) -
|
|
17
|
+
Bumped editor-prosemirror version to 7.0.0
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- Updated dependencies
|
|
22
|
+
|
|
3
23
|
## 1.0.3
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
|
@@ -31,7 +31,7 @@ var syncCMWithPM = exports.syncCMWithPM = function syncCMWithPM(_ref) {
|
|
|
31
31
|
}
|
|
32
32
|
offset += toB - fromB - (toA - fromA);
|
|
33
33
|
});
|
|
34
|
-
tr.setSelection(_state.TextSelection.create(tr.doc, selFrom, selTo));
|
|
34
|
+
tr.setSelection(_state.TextSelection.create(tr.doc, selFrom, selTo)).setMeta('scrollIntoView', false);
|
|
35
35
|
view.dispatch(tr);
|
|
36
36
|
}
|
|
37
37
|
};
|
|
@@ -104,17 +104,9 @@ var prosemirrorDecorationPlugin = exports.prosemirrorDecorationPlugin = function
|
|
|
104
104
|
var innnerDecorations = view.state.facet(updateDecorationsEffect);
|
|
105
105
|
var allDecorations = [];
|
|
106
106
|
innnerDecorations === null || innnerDecorations === void 0 || innnerDecorations.map(function (source) {
|
|
107
|
-
// Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
|
|
108
|
-
// Once we do our prosemirror bump (very soon) we should remove this.
|
|
109
|
-
// https://product-fabric.atlassian.net/browse/ED-26398
|
|
110
|
-
// @ts-ignore
|
|
111
107
|
source === null || source === void 0 || source.forEachSet(function (set) {
|
|
112
108
|
var decorations = set.find(from, to)
|
|
113
109
|
// Do not render the code block line decorations
|
|
114
|
-
// Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
|
|
115
|
-
// Once we do our prosemirror bump (very soon) we should remove this.
|
|
116
|
-
// https://product-fabric.atlassian.net/browse/ED-26398
|
|
117
|
-
// @ts-ignore
|
|
118
110
|
.filter(function (dec) {
|
|
119
111
|
return dec.spec.type !== 'decorationWidgetType';
|
|
120
112
|
});
|
package/dist/cjs/ui/theme.js
CHANGED
|
@@ -11,6 +11,7 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
|
|
|
11
11
|
padding: '0',
|
|
12
12
|
marginTop: "var(--ds-space-100, 8px)",
|
|
13
13
|
marginBottom: "var(--ds-space-100, 8px)",
|
|
14
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
14
15
|
fontSize: '0.875rem',
|
|
15
16
|
// Custom syntax styling to match existing styling
|
|
16
17
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
@@ -37,7 +38,11 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
|
|
|
37
38
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
38
39
|
lineHeight: 'unset',
|
|
39
40
|
fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
40
|
-
borderRadius: "var(--ds-border-radius, 4px)"
|
|
41
|
+
borderRadius: "var(--ds-border-radius, 4px)",
|
|
42
|
+
backgroundImage: overflowShadow({
|
|
43
|
+
leftCoverWidth: "var(--ds-space-300, 24px)"
|
|
44
|
+
}),
|
|
45
|
+
backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll'
|
|
41
46
|
},
|
|
42
47
|
'&.cm-focused .cm-cursor': {
|
|
43
48
|
borderLeftColor: "var(--ds-text, #172B4D)"
|
|
@@ -53,4 +58,17 @@ var cmTheme = exports.cmTheme = _view.EditorView.theme({
|
|
|
53
58
|
paddingRight: "var(--ds-space-0, 0px)",
|
|
54
59
|
minWidth: 'unset'
|
|
55
60
|
}
|
|
56
|
-
});
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
/**
|
|
64
|
+
* Copied directly from `packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts`
|
|
65
|
+
* `CodeMirror` does not support emotion styling so this has been re-created.
|
|
66
|
+
*/
|
|
67
|
+
function overflowShadow(_ref) {
|
|
68
|
+
var leftCoverWidth = _ref.leftCoverWidth,
|
|
69
|
+
rightCoverWidth = _ref.rightCoverWidth;
|
|
70
|
+
var width = "var(--ds-space-100, 8px)";
|
|
71
|
+
var leftCoverWidthResolved = leftCoverWidth || width;
|
|
72
|
+
var rightCoverWidthResolved = rightCoverWidth || width;
|
|
73
|
+
return "\n linear-gradient(\n to right,\n ".concat("var(--ds-background-neutral, #091E420F)", " ", leftCoverWidthResolved, ",\n transparent ").concat(leftCoverWidthResolved, "\n ),\n linear-gradient(\n to right,\n ", "var(--ds-surface-raised, #FFFFFF)", " ").concat(leftCoverWidthResolved, ",\n transparent ").concat(leftCoverWidthResolved, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-background-neutral, #091E420F)", " ").concat(rightCoverWidthResolved, ",\n transparent ").concat(rightCoverWidthResolved, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-surface-raised, #FFFFFF)", " ").concat(rightCoverWidthResolved, ",\n transparent ").concat(rightCoverWidthResolved, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n ),\n linear-gradient(\n to right,\n ", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n ),\n linear-gradient(\n to right,\n ", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n )\n");
|
|
74
|
+
}
|
|
@@ -28,7 +28,7 @@ export const syncCMWithPM = ({
|
|
|
28
28
|
}
|
|
29
29
|
offset += toB - fromB - (toA - fromA);
|
|
30
30
|
});
|
|
31
|
-
tr.setSelection(TextSelection.create(tr.doc, selFrom, selTo));
|
|
31
|
+
tr.setSelection(TextSelection.create(tr.doc, selFrom, selTo)).setMeta('scrollIntoView', false);
|
|
32
32
|
view.dispatch(tr);
|
|
33
33
|
}
|
|
34
34
|
};
|
|
@@ -81,17 +81,9 @@ export const prosemirrorDecorationPlugin = (updateDecorationsEffect, editorView,
|
|
|
81
81
|
const innnerDecorations = view.state.facet(updateDecorationsEffect);
|
|
82
82
|
const allDecorations = [];
|
|
83
83
|
innnerDecorations === null || innnerDecorations === void 0 ? void 0 : innnerDecorations.map(source => {
|
|
84
|
-
// Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
|
|
85
|
-
// Once we do our prosemirror bump (very soon) we should remove this.
|
|
86
|
-
// https://product-fabric.atlassian.net/browse/ED-26398
|
|
87
|
-
// @ts-ignore
|
|
88
84
|
source === null || source === void 0 ? void 0 : source.forEachSet(set => {
|
|
89
85
|
const decorations = set.find(from, to)
|
|
90
86
|
// Do not render the code block line decorations
|
|
91
|
-
// Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
|
|
92
|
-
// Once we do our prosemirror bump (very soon) we should remove this.
|
|
93
|
-
// https://product-fabric.atlassian.net/browse/ED-26398
|
|
94
|
-
// @ts-ignore
|
|
95
87
|
.filter(dec => dec.spec.type !== 'decorationWidgetType');
|
|
96
88
|
allDecorations.push(...decorations);
|
|
97
89
|
});
|
package/dist/es2019/ui/theme.js
CHANGED
|
@@ -5,6 +5,7 @@ export const cmTheme = CodeMirror.theme({
|
|
|
5
5
|
padding: '0',
|
|
6
6
|
marginTop: "var(--ds-space-100, 8px)",
|
|
7
7
|
marginBottom: "var(--ds-space-100, 8px)",
|
|
8
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
8
9
|
fontSize: '0.875rem',
|
|
9
10
|
// Custom syntax styling to match existing styling
|
|
10
11
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
@@ -31,7 +32,11 @@ export const cmTheme = CodeMirror.theme({
|
|
|
31
32
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
32
33
|
lineHeight: 'unset',
|
|
33
34
|
fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
34
|
-
borderRadius: "var(--ds-border-radius, 4px)"
|
|
35
|
+
borderRadius: "var(--ds-border-radius, 4px)",
|
|
36
|
+
backgroundImage: overflowShadow({
|
|
37
|
+
leftCoverWidth: "var(--ds-space-300, 24px)"
|
|
38
|
+
}),
|
|
39
|
+
backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll'
|
|
35
40
|
},
|
|
36
41
|
'&.cm-focused .cm-cursor': {
|
|
37
42
|
borderLeftColor: "var(--ds-text, #172B4D)"
|
|
@@ -47,4 +52,59 @@ export const cmTheme = CodeMirror.theme({
|
|
|
47
52
|
paddingRight: "var(--ds-space-0, 0px)",
|
|
48
53
|
minWidth: 'unset'
|
|
49
54
|
}
|
|
50
|
-
});
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Copied directly from `packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts`
|
|
59
|
+
* `CodeMirror` does not support emotion styling so this has been re-created.
|
|
60
|
+
*/
|
|
61
|
+
function overflowShadow({
|
|
62
|
+
leftCoverWidth,
|
|
63
|
+
rightCoverWidth
|
|
64
|
+
}) {
|
|
65
|
+
const width = "var(--ds-space-100, 8px)";
|
|
66
|
+
const leftCoverWidthResolved = leftCoverWidth || width;
|
|
67
|
+
const rightCoverWidthResolved = rightCoverWidth || width;
|
|
68
|
+
return `
|
|
69
|
+
linear-gradient(
|
|
70
|
+
to right,
|
|
71
|
+
${"var(--ds-background-neutral, #091E420F)"} ${leftCoverWidthResolved},
|
|
72
|
+
transparent ${leftCoverWidthResolved}
|
|
73
|
+
),
|
|
74
|
+
linear-gradient(
|
|
75
|
+
to right,
|
|
76
|
+
${"var(--ds-surface-raised, #FFFFFF)"} ${leftCoverWidthResolved},
|
|
77
|
+
transparent ${leftCoverWidthResolved}
|
|
78
|
+
),
|
|
79
|
+
linear-gradient(
|
|
80
|
+
to left,
|
|
81
|
+
${"var(--ds-background-neutral, #091E420F)"} ${rightCoverWidthResolved},
|
|
82
|
+
transparent ${rightCoverWidthResolved}
|
|
83
|
+
),
|
|
84
|
+
linear-gradient(
|
|
85
|
+
to left,
|
|
86
|
+
${"var(--ds-surface-raised, #FFFFFF)"} ${rightCoverWidthResolved},
|
|
87
|
+
transparent ${rightCoverWidthResolved}
|
|
88
|
+
),
|
|
89
|
+
linear-gradient(
|
|
90
|
+
to left,
|
|
91
|
+
${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
|
|
92
|
+
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
|
|
93
|
+
),
|
|
94
|
+
linear-gradient(
|
|
95
|
+
to left,
|
|
96
|
+
${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
|
|
97
|
+
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
|
|
98
|
+
),
|
|
99
|
+
linear-gradient(
|
|
100
|
+
to right,
|
|
101
|
+
${"var(--ds-shadow-overflow-spread, #091e4229)"} 0,
|
|
102
|
+
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
|
|
103
|
+
),
|
|
104
|
+
linear-gradient(
|
|
105
|
+
to right,
|
|
106
|
+
${"var(--ds-shadow-overflow-perimeter, #091e421f)"} 0,
|
|
107
|
+
${"var(--ds-UNSAFE-transparent, transparent)"} ${width}
|
|
108
|
+
)
|
|
109
|
+
`;
|
|
110
|
+
}
|
|
@@ -25,7 +25,7 @@ export var syncCMWithPM = function syncCMWithPM(_ref) {
|
|
|
25
25
|
}
|
|
26
26
|
offset += toB - fromB - (toA - fromA);
|
|
27
27
|
});
|
|
28
|
-
tr.setSelection(TextSelection.create(tr.doc, selFrom, selTo));
|
|
28
|
+
tr.setSelection(TextSelection.create(tr.doc, selFrom, selTo)).setMeta('scrollIntoView', false);
|
|
29
29
|
view.dispatch(tr);
|
|
30
30
|
}
|
|
31
31
|
};
|
|
@@ -97,17 +97,9 @@ export var prosemirrorDecorationPlugin = function prosemirrorDecorationPlugin(up
|
|
|
97
97
|
var innnerDecorations = view.state.facet(updateDecorationsEffect);
|
|
98
98
|
var allDecorations = [];
|
|
99
99
|
innnerDecorations === null || innnerDecorations === void 0 || innnerDecorations.map(function (source) {
|
|
100
|
-
// Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
|
|
101
|
-
// Once we do our prosemirror bump (very soon) we should remove this.
|
|
102
|
-
// https://product-fabric.atlassian.net/browse/ED-26398
|
|
103
|
-
// @ts-ignore
|
|
104
100
|
source === null || source === void 0 || source.forEachSet(function (set) {
|
|
105
101
|
var decorations = set.find(from, to)
|
|
106
102
|
// Do not render the code block line decorations
|
|
107
|
-
// Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
|
|
108
|
-
// Once we do our prosemirror bump (very soon) we should remove this.
|
|
109
|
-
// https://product-fabric.atlassian.net/browse/ED-26398
|
|
110
|
-
// @ts-ignore
|
|
111
103
|
.filter(function (dec) {
|
|
112
104
|
return dec.spec.type !== 'decorationWidgetType';
|
|
113
105
|
});
|
package/dist/esm/ui/theme.js
CHANGED
|
@@ -5,6 +5,7 @@ export var cmTheme = CodeMirror.theme({
|
|
|
5
5
|
padding: '0',
|
|
6
6
|
marginTop: "var(--ds-space-100, 8px)",
|
|
7
7
|
marginBottom: "var(--ds-space-100, 8px)",
|
|
8
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
8
9
|
fontSize: '0.875rem',
|
|
9
10
|
// Custom syntax styling to match existing styling
|
|
10
11
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
@@ -31,7 +32,11 @@ export var cmTheme = CodeMirror.theme({
|
|
|
31
32
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
32
33
|
lineHeight: 'unset',
|
|
33
34
|
fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
34
|
-
borderRadius: "var(--ds-border-radius, 4px)"
|
|
35
|
+
borderRadius: "var(--ds-border-radius, 4px)",
|
|
36
|
+
backgroundImage: overflowShadow({
|
|
37
|
+
leftCoverWidth: "var(--ds-space-300, 24px)"
|
|
38
|
+
}),
|
|
39
|
+
backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll'
|
|
35
40
|
},
|
|
36
41
|
'&.cm-focused .cm-cursor': {
|
|
37
42
|
borderLeftColor: "var(--ds-text, #172B4D)"
|
|
@@ -47,4 +52,17 @@ export var cmTheme = CodeMirror.theme({
|
|
|
47
52
|
paddingRight: "var(--ds-space-0, 0px)",
|
|
48
53
|
minWidth: 'unset'
|
|
49
54
|
}
|
|
50
|
-
});
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Copied directly from `packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts`
|
|
59
|
+
* `CodeMirror` does not support emotion styling so this has been re-created.
|
|
60
|
+
*/
|
|
61
|
+
function overflowShadow(_ref) {
|
|
62
|
+
var leftCoverWidth = _ref.leftCoverWidth,
|
|
63
|
+
rightCoverWidth = _ref.rightCoverWidth;
|
|
64
|
+
var width = "var(--ds-space-100, 8px)";
|
|
65
|
+
var leftCoverWidthResolved = leftCoverWidth || width;
|
|
66
|
+
var rightCoverWidthResolved = rightCoverWidth || width;
|
|
67
|
+
return "\n linear-gradient(\n to right,\n ".concat("var(--ds-background-neutral, #091E420F)", " ", leftCoverWidthResolved, ",\n transparent ").concat(leftCoverWidthResolved, "\n ),\n linear-gradient(\n to right,\n ", "var(--ds-surface-raised, #FFFFFF)", " ").concat(leftCoverWidthResolved, ",\n transparent ").concat(leftCoverWidthResolved, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-background-neutral, #091E420F)", " ").concat(rightCoverWidthResolved, ",\n transparent ").concat(rightCoverWidthResolved, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-surface-raised, #FFFFFF)", " ").concat(rightCoverWidthResolved, ",\n transparent ").concat(rightCoverWidthResolved, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n ),\n linear-gradient(\n to left,\n ", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n ),\n linear-gradient(\n to right,\n ", "var(--ds-shadow-overflow-spread, #091e4229)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n ),\n linear-gradient(\n to right,\n ", "var(--ds-shadow-overflow-perimeter, #091e421f)", " 0,\n ", "var(--ds-UNSAFE-transparent, transparent)", " ").concat(width, "\n )\n");
|
|
68
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-code-block-advanced",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "CodeBlockAdvanced plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,14 +33,14 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/adf-schema": "^46.1.0",
|
|
36
|
-
"@atlaskit/editor-common": "^99.
|
|
37
|
-
"@atlaskit/editor-plugin-code-block": "^3.
|
|
38
|
-
"@atlaskit/editor-plugin-editor-disabled": "^1.
|
|
39
|
-
"@atlaskit/editor-plugin-find-replace": "^1.
|
|
40
|
-
"@atlaskit/editor-plugin-selection": "^1.
|
|
41
|
-
"@atlaskit/editor-plugin-selection-marker": "^1.
|
|
42
|
-
"@atlaskit/editor-prosemirror": "
|
|
43
|
-
"@atlaskit/tokens": "^3.
|
|
36
|
+
"@atlaskit/editor-common": "^99.11.0",
|
|
37
|
+
"@atlaskit/editor-plugin-code-block": "^3.7.0",
|
|
38
|
+
"@atlaskit/editor-plugin-editor-disabled": "^1.5.0",
|
|
39
|
+
"@atlaskit/editor-plugin-find-replace": "^1.9.0",
|
|
40
|
+
"@atlaskit/editor-plugin-selection": "^1.8.0",
|
|
41
|
+
"@atlaskit/editor-plugin-selection-marker": "^1.8.0",
|
|
42
|
+
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
43
|
+
"@atlaskit/tokens": "^3.3.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"@codemirror/autocomplete": "6.18.4",
|
|
46
46
|
"@codemirror/commands": "6.7.1",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@atlaskit/code": "^15.
|
|
59
|
+
"@atlaskit/code": "^15.7.0",
|
|
60
60
|
"typescript": "~5.4.2"
|
|
61
61
|
},
|
|
62
62
|
"techstack": {
|
|
@@ -33,7 +33,7 @@ export const syncCMWithPM = ({ view, update, offset }: Props): void => {
|
|
|
33
33
|
}
|
|
34
34
|
offset += toB - fromB - (toA - fromA);
|
|
35
35
|
});
|
|
36
|
-
tr.setSelection(TextSelection.create(tr.doc, selFrom, selTo));
|
|
36
|
+
tr.setSelection(TextSelection.create(tr.doc, selFrom, selTo)).setMeta('scrollIntoView', false);
|
|
37
37
|
view.dispatch(tr);
|
|
38
38
|
}
|
|
39
39
|
};
|
|
@@ -122,18 +122,10 @@ export const prosemirrorDecorationPlugin = (
|
|
|
122
122
|
const innnerDecorations = view.state.facet(updateDecorationsEffect);
|
|
123
123
|
const allDecorations: Decoration[] = [];
|
|
124
124
|
innnerDecorations?.map((source) => {
|
|
125
|
-
// Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
|
|
126
|
-
// Once we do our prosemirror bump (very soon) we should remove this.
|
|
127
|
-
// https://product-fabric.atlassian.net/browse/ED-26398
|
|
128
|
-
// @ts-ignore
|
|
129
125
|
source?.forEachSet((set) => {
|
|
130
126
|
const decorations = set
|
|
131
127
|
.find(from, to)
|
|
132
128
|
// Do not render the code block line decorations
|
|
133
|
-
// Temporary: this only exists on prosemirror-view@1.34.0. Since post-office is lower it causes an error.
|
|
134
|
-
// Once we do our prosemirror bump (very soon) we should remove this.
|
|
135
|
-
// https://product-fabric.atlassian.net/browse/ED-26398
|
|
136
|
-
// @ts-ignore
|
|
137
129
|
.filter((dec) => dec.spec.type !== 'decorationWidgetType');
|
|
138
130
|
allDecorations.push(...decorations);
|
|
139
131
|
});
|
package/src/ui/theme.ts
CHANGED
|
@@ -8,6 +8,7 @@ export const cmTheme = CodeMirror.theme({
|
|
|
8
8
|
padding: '0',
|
|
9
9
|
marginTop: token('space.100'),
|
|
10
10
|
marginBottom: token('space.100'),
|
|
11
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
11
12
|
fontSize: '0.875rem',
|
|
12
13
|
// Custom syntax styling to match existing styling
|
|
13
14
|
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
@@ -35,6 +36,10 @@ export const cmTheme = CodeMirror.theme({
|
|
|
35
36
|
lineHeight: 'unset',
|
|
36
37
|
fontFamily: token('font.family.code'),
|
|
37
38
|
borderRadius: token('border.radius'),
|
|
39
|
+
backgroundImage: overflowShadow({
|
|
40
|
+
leftCoverWidth: token('space.300'),
|
|
41
|
+
}),
|
|
42
|
+
backgroundAttachment: 'local, local, local, local, scroll, scroll, scroll, scroll',
|
|
38
43
|
},
|
|
39
44
|
'&.cm-focused .cm-cursor': {
|
|
40
45
|
borderLeftColor: token('color.text'),
|
|
@@ -51,3 +56,62 @@ export const cmTheme = CodeMirror.theme({
|
|
|
51
56
|
minWidth: 'unset',
|
|
52
57
|
},
|
|
53
58
|
});
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Copied directly from `packages/editor/editor-shared-styles/src/overflow-shadow/overflow-shadow.ts`
|
|
62
|
+
* `CodeMirror` does not support emotion styling so this has been re-created.
|
|
63
|
+
*/
|
|
64
|
+
function overflowShadow({
|
|
65
|
+
leftCoverWidth,
|
|
66
|
+
rightCoverWidth,
|
|
67
|
+
}: {
|
|
68
|
+
leftCoverWidth?: string;
|
|
69
|
+
rightCoverWidth?: string;
|
|
70
|
+
}) {
|
|
71
|
+
const width = token('space.100');
|
|
72
|
+
const leftCoverWidthResolved = leftCoverWidth || width;
|
|
73
|
+
const rightCoverWidthResolved = rightCoverWidth || width;
|
|
74
|
+
|
|
75
|
+
return `
|
|
76
|
+
linear-gradient(
|
|
77
|
+
to right,
|
|
78
|
+
${token('color.background.neutral')} ${leftCoverWidthResolved},
|
|
79
|
+
transparent ${leftCoverWidthResolved}
|
|
80
|
+
),
|
|
81
|
+
linear-gradient(
|
|
82
|
+
to right,
|
|
83
|
+
${token('elevation.surface.raised')} ${leftCoverWidthResolved},
|
|
84
|
+
transparent ${leftCoverWidthResolved}
|
|
85
|
+
),
|
|
86
|
+
linear-gradient(
|
|
87
|
+
to left,
|
|
88
|
+
${token('color.background.neutral')} ${rightCoverWidthResolved},
|
|
89
|
+
transparent ${rightCoverWidthResolved}
|
|
90
|
+
),
|
|
91
|
+
linear-gradient(
|
|
92
|
+
to left,
|
|
93
|
+
${token('elevation.surface.raised')} ${rightCoverWidthResolved},
|
|
94
|
+
transparent ${rightCoverWidthResolved}
|
|
95
|
+
),
|
|
96
|
+
linear-gradient(
|
|
97
|
+
to left,
|
|
98
|
+
${token('elevation.shadow.overflow.spread')} 0,
|
|
99
|
+
${token('utility.UNSAFE.transparent')} ${width}
|
|
100
|
+
),
|
|
101
|
+
linear-gradient(
|
|
102
|
+
to left,
|
|
103
|
+
${token('elevation.shadow.overflow.perimeter')} 0,
|
|
104
|
+
${token('utility.UNSAFE.transparent')} ${width}
|
|
105
|
+
),
|
|
106
|
+
linear-gradient(
|
|
107
|
+
to right,
|
|
108
|
+
${token('elevation.shadow.overflow.spread')} 0,
|
|
109
|
+
${token('utility.UNSAFE.transparent')} ${width}
|
|
110
|
+
),
|
|
111
|
+
linear-gradient(
|
|
112
|
+
to right,
|
|
113
|
+
${token('elevation.shadow.overflow.perimeter')} 0,
|
|
114
|
+
${token('utility.UNSAFE.transparent')} ${width}
|
|
115
|
+
)
|
|
116
|
+
`;
|
|
117
|
+
}
|