@atlaskit/editor-plugin-code-block-advanced 1.0.1 → 1.0.3
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 +23 -0
- package/afm-cc/tsconfig.json +6 -0
- package/afm-jira/tsconfig.json +6 -0
- package/afm-post-office/tsconfig.json +6 -0
- package/dist/cjs/nodeviews/codeBlockAdvanced.js +31 -8
- package/dist/cjs/nodeviews/codeBlockNodeWithToDOMFixed.js +2 -1
- package/dist/cjs/nodeviews/codemirrorSync/syncCMWithPM.js +0 -1
- package/dist/cjs/nodeviews/extensions/keymap/index.js +23 -3
- package/dist/cjs/nodeviews/extensions/manageSelectionMarker.js +28 -0
- package/dist/cjs/nodeviews/extensions/prosemirrorDecorations.js +142 -0
- package/dist/es2019/nodeviews/codeBlockAdvanced.js +28 -10
- package/dist/es2019/nodeviews/codeBlockNodeWithToDOMFixed.js +2 -1
- package/dist/es2019/nodeviews/codemirrorSync/syncCMWithPM.js +0 -1
- package/dist/es2019/nodeviews/extensions/keymap/index.js +23 -3
- package/dist/es2019/nodeviews/extensions/manageSelectionMarker.js +22 -0
- package/dist/es2019/nodeviews/extensions/prosemirrorDecorations.js +107 -0
- package/dist/esm/nodeviews/codeBlockAdvanced.js +33 -10
- package/dist/esm/nodeviews/codeBlockNodeWithToDOMFixed.js +2 -1
- package/dist/esm/nodeviews/codemirrorSync/syncCMWithPM.js +0 -1
- package/dist/esm/nodeviews/extensions/keymap/index.js +23 -3
- package/dist/esm/nodeviews/extensions/manageSelectionMarker.js +22 -0
- package/dist/esm/nodeviews/extensions/prosemirrorDecorations.js +135 -0
- package/dist/types/codeBlockAdvancedPluginType.d.ts +9 -1
- package/dist/types/nodeviews/codeBlockAdvanced.d.ts +10 -2
- package/dist/types/nodeviews/extensions/keymap/index.d.ts +2 -1
- package/dist/types/nodeviews/extensions/manageSelectionMarker.d.ts +10 -0
- package/dist/types/nodeviews/extensions/prosemirrorDecorations.d.ts +20 -0
- package/dist/types-ts4.5/codeBlockAdvancedPluginType.d.ts +5 -1
- package/dist/types-ts4.5/nodeviews/codeBlockAdvanced.d.ts +10 -2
- package/dist/types-ts4.5/nodeviews/extensions/keymap/index.d.ts +2 -1
- package/dist/types-ts4.5/nodeviews/extensions/manageSelectionMarker.d.ts +10 -0
- package/dist/types-ts4.5/nodeviews/extensions/prosemirrorDecorations.d.ts +20 -0
- package/package.json +6 -4
- package/src/codeBlockAdvancedPluginType.ts +9 -1
- package/src/nodeviews/codeBlockAdvanced.ts +33 -7
- package/src/nodeviews/codeBlockNodeWithToDOMFixed.ts +1 -0
- package/src/nodeviews/codemirrorSync/syncCMWithPM.ts +0 -1
- package/src/nodeviews/extensions/keymap/index.ts +31 -1
- package/src/nodeviews/extensions/manageSelectionMarker.ts +28 -0
- package/src/nodeviews/extensions/prosemirrorDecorations.ts +156 -0
- package/tsconfig.app.json +6 -0
- package/dist/cjs/nodeviews/extensions/bidiCharWarning.js +0 -83
- package/dist/es2019/nodeviews/extensions/bidiCharWarning.js +0 -53
- package/dist/esm/nodeviews/extensions/bidiCharWarning.js +0 -77
- package/dist/types/nodeviews/extensions/bidiCharWarning.d.ts +0 -8
- package/dist/types-ts4.5/nodeviews/extensions/bidiCharWarning.d.ts +0 -8
- package/src/nodeviews/extensions/bidiCharWarning.ts +0 -72
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { ViewPlugin, WidgetType, Decoration as CodeMirrorDecoration } from '@codemirror/view';
|
|
2
|
+
class PMWidget extends WidgetType {
|
|
3
|
+
constructor(toDOMElement) {
|
|
4
|
+
super();
|
|
5
|
+
this.toDOMElement = toDOMElement;
|
|
6
|
+
}
|
|
7
|
+
toDOM() {
|
|
8
|
+
return this.toDOMElement;
|
|
9
|
+
}
|
|
10
|
+
ignoreEvent() {
|
|
11
|
+
return false;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
|
|
16
|
+
// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
|
|
17
|
+
|
|
18
|
+
// This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
|
|
19
|
+
// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
|
|
20
|
+
|
|
21
|
+
// This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
|
|
22
|
+
// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
|
|
23
|
+
function isExtendedDecoration(decoration) {
|
|
24
|
+
return decoration.inline !== undefined && decoration.widget !== undefined && decoration.type !== undefined;
|
|
25
|
+
}
|
|
26
|
+
const getHTMLElement = (toDOM, view, getPos) => {
|
|
27
|
+
if (toDOM instanceof Function) {
|
|
28
|
+
const element = toDOM(view, getPos);
|
|
29
|
+
return element instanceof HTMLElement ? element : undefined;
|
|
30
|
+
} else if (toDOM instanceof HTMLElement) {
|
|
31
|
+
return toDOM;
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
const mapPMDecorationToCMDecoration = (decoration, view, getPos) => {
|
|
35
|
+
if (!isExtendedDecoration(decoration)) {
|
|
36
|
+
return undefined;
|
|
37
|
+
}
|
|
38
|
+
if (decoration.inline) {
|
|
39
|
+
const markDecoration = CodeMirrorDecoration.mark({
|
|
40
|
+
attributes: decoration.type.attrs
|
|
41
|
+
});
|
|
42
|
+
return markDecoration.range(decoration.from, decoration.to);
|
|
43
|
+
} else if (decoration.widget) {
|
|
44
|
+
var _decoration$type;
|
|
45
|
+
const toDOM = getHTMLElement(decoration === null || decoration === void 0 ? void 0 : (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM, view, getPos);
|
|
46
|
+
if (!toDOM) {
|
|
47
|
+
return undefined;
|
|
48
|
+
}
|
|
49
|
+
const widgetDecoration = CodeMirrorDecoration.widget({
|
|
50
|
+
widget: new PMWidget(toDOM),
|
|
51
|
+
side: decoration.type.side
|
|
52
|
+
});
|
|
53
|
+
return widgetDecoration.range(decoration.from, decoration.to);
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
function isDefined(value) {
|
|
57
|
+
return value !== undefined;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Creates CodeMirror versions of the decorations provided by ProseMirror.
|
|
62
|
+
*
|
|
63
|
+
* Inline ProseMirror decorations -> Mark CodeMirror decorations
|
|
64
|
+
* Widget ProseMirror decorations -> Widget CodeMirror decorations
|
|
65
|
+
*
|
|
66
|
+
* This way any decorations applied in ProseMirror land should automatically be supported
|
|
67
|
+
* by the CodeMirror editor
|
|
68
|
+
*
|
|
69
|
+
* @param updateDecorationsEffect Facet for the prosemirror decorations
|
|
70
|
+
* @returns CodeMirror extension
|
|
71
|
+
*/
|
|
72
|
+
export const prosemirrorDecorationPlugin = (updateDecorationsEffect, editorView, getPos) => ViewPlugin.fromClass(class {
|
|
73
|
+
constructor(view) {
|
|
74
|
+
this.decorations = this.updateDecorations(view);
|
|
75
|
+
}
|
|
76
|
+
updateDecorations(view) {
|
|
77
|
+
const {
|
|
78
|
+
from,
|
|
79
|
+
to
|
|
80
|
+
} = view.viewport;
|
|
81
|
+
const innnerDecorations = view.state.facet(updateDecorationsEffect);
|
|
82
|
+
const allDecorations = [];
|
|
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
|
+
source === null || source === void 0 ? void 0 : source.forEachSet(set => {
|
|
89
|
+
const decorations = set.find(from, to)
|
|
90
|
+
// 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
|
+
.filter(dec => dec.spec.type !== 'decorationWidgetType');
|
|
96
|
+
allDecorations.push(...decorations);
|
|
97
|
+
});
|
|
98
|
+
});
|
|
99
|
+
const cmDecorations = allDecorations.sort((a, b) => a.from < b.from ? -1 : 1).map(decoration => mapPMDecorationToCMDecoration(decoration, editorView, getPos)).filter(isDefined);
|
|
100
|
+
return CodeMirrorDecoration.set(cmDecorations);
|
|
101
|
+
}
|
|
102
|
+
update(update) {
|
|
103
|
+
this.decorations = this.updateDecorations(update.view);
|
|
104
|
+
}
|
|
105
|
+
}, {
|
|
106
|
+
decorations: v => v.decorations
|
|
107
|
+
});
|
|
@@ -3,8 +3,8 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
4
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
5
5
|
import { closeBrackets } from '@codemirror/autocomplete';
|
|
6
|
-
import { syntaxHighlighting } from '@codemirror/language';
|
|
7
|
-
import { Compartment, EditorSelection } from '@codemirror/state';
|
|
6
|
+
import { syntaxHighlighting, bracketMatching } from '@codemirror/language';
|
|
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
10
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
@@ -12,21 +12,24 @@ import { highlightStyle } from '../ui/syntaxHighlightingTheme';
|
|
|
12
12
|
import { cmTheme } from '../ui/theme';
|
|
13
13
|
import { syncCMWithPM } from './codemirrorSync/syncCMWithPM';
|
|
14
14
|
import { updateCMSelection } from './codemirrorSync/updateCMSelection';
|
|
15
|
-
import { bidiCharWarningExtension } from './extensions/bidiCharWarning';
|
|
16
15
|
import { keymapExtension } from './extensions/keymap';
|
|
16
|
+
import { manageSelectionMarker } from './extensions/manageSelectionMarker';
|
|
17
|
+
import { prosemirrorDecorationPlugin } from './extensions/prosemirrorDecorations';
|
|
17
18
|
import { LanguageLoader } from './languages/loader';
|
|
18
19
|
// Based on: https://prosemirror.net/examples/codemirror/
|
|
19
20
|
var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
|
|
20
|
-
// eslint-disable-next-line @typescript-eslint/max-params
|
|
21
21
|
function CodeBlockAdvancedNodeView(node, view, getPos, config) {
|
|
22
22
|
var _config$api,
|
|
23
23
|
_this = this,
|
|
24
|
-
_config$api2
|
|
24
|
+
_config$api2,
|
|
25
|
+
_config$api3;
|
|
25
26
|
_classCallCheck(this, CodeBlockAdvancedNodeView);
|
|
26
27
|
_defineProperty(this, "lineWrappingCompartment", new Compartment());
|
|
27
28
|
_defineProperty(this, "languageCompartment", new Compartment());
|
|
28
29
|
_defineProperty(this, "readOnlyCompartment", new Compartment());
|
|
30
|
+
_defineProperty(this, "pmDecorationsCompartment", new Compartment());
|
|
29
31
|
_defineProperty(this, "maybeTryingToReachNodeSelection", false);
|
|
32
|
+
_defineProperty(this, "pmFacet", Facet.define());
|
|
30
33
|
_defineProperty(this, "wordWrappingEnabled", false);
|
|
31
34
|
this.node = node;
|
|
32
35
|
this.view = view;
|
|
@@ -50,13 +53,14 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
|
|
|
50
53
|
});
|
|
51
54
|
this.cm = new CodeMirror({
|
|
52
55
|
doc: this.node.textContent,
|
|
53
|
-
extensions: [].concat(_toConsumableArray(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), keymapExtension({
|
|
56
|
+
extensions: [].concat(_toConsumableArray(config.extensions), [this.lineWrappingCompartment.of([]), this.languageCompartment.of([]), this.pmDecorationsCompartment.of([]), keymapExtension({
|
|
54
57
|
view: view,
|
|
55
58
|
getPos: getPos,
|
|
56
59
|
getNode: getNode,
|
|
57
60
|
selectCodeBlockNode: this.selectCodeBlockNode.bind(this),
|
|
58
|
-
onMaybeNodeSelection: onMaybeNodeSelection
|
|
59
|
-
|
|
61
|
+
onMaybeNodeSelection: onMaybeNodeSelection,
|
|
62
|
+
customFindReplace: Boolean((_config$api3 = config.api) === null || _config$api3 === void 0 ? void 0 : _config$api3.findReplace)
|
|
63
|
+
}), cmTheme, syntaxHighlighting(highlightStyle), bracketMatching(), lineNumbers(),
|
|
60
64
|
// Explicitly disable "sticky" positioning on line numbers to match
|
|
61
65
|
// Renderer behaviour
|
|
62
66
|
gutters({
|
|
@@ -65,7 +69,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
|
|
|
65
69
|
return _this.forwardUpdate(update);
|
|
66
70
|
}), this.readOnlyCompartment.of(CodeMirror.editable.of(this.view.editable)), closeBrackets(), CodeMirror.editorAttributes.of({
|
|
67
71
|
class: 'code-block'
|
|
68
|
-
}),
|
|
72
|
+
}), manageSelectionMarker(config.api), prosemirrorDecorationPlugin(this.pmFacet, view, getPos)])
|
|
69
73
|
});
|
|
70
74
|
|
|
71
75
|
// The editor's outer node is our DOM representation
|
|
@@ -151,7 +155,7 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
|
|
|
151
155
|
}
|
|
152
156
|
}, {
|
|
153
157
|
key: "update",
|
|
154
|
-
value: function update(node) {
|
|
158
|
+
value: function update(node, _, innerDecorations) {
|
|
155
159
|
var _this2 = this;
|
|
156
160
|
this.maybeTryingToReachNodeSelection = false;
|
|
157
161
|
if (node.type !== this.node.type) {
|
|
@@ -170,8 +174,27 @@ var CodeBlockAdvancedNodeView = /*#__PURE__*/function () {
|
|
|
170
174
|
_this2.cm.dispatch(tr);
|
|
171
175
|
_this2.updating = false;
|
|
172
176
|
});
|
|
177
|
+
this.updateProseMirrorDecorations(innerDecorations);
|
|
173
178
|
return true;
|
|
174
179
|
}
|
|
180
|
+
|
|
181
|
+
/**
|
|
182
|
+
* Updates a facet which stores information on the prosemirror decorations
|
|
183
|
+
*
|
|
184
|
+
* This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
|
|
185
|
+
*/
|
|
186
|
+
}, {
|
|
187
|
+
key: "updateProseMirrorDecorations",
|
|
188
|
+
value: function updateProseMirrorDecorations(decorationSource) {
|
|
189
|
+
this.updating = true;
|
|
190
|
+
var computedFacet = this.pmFacet.compute([], function () {
|
|
191
|
+
return decorationSource;
|
|
192
|
+
});
|
|
193
|
+
this.cm.dispatch({
|
|
194
|
+
effects: this.pmDecorationsCompartment.reconfigure(computedFacet)
|
|
195
|
+
});
|
|
196
|
+
this.updating = false;
|
|
197
|
+
}
|
|
175
198
|
}, {
|
|
176
199
|
key: "stopEvent",
|
|
177
200
|
value: function stopEvent(e) {
|
|
@@ -53,7 +53,8 @@ var _toDOM = function toDOM(node, formattedAriaLabel) {
|
|
|
53
53
|
style: convertToInlineCss({
|
|
54
54
|
textAlign: 'right',
|
|
55
55
|
color: "var(--ds-text-subtlest, #626F86)",
|
|
56
|
-
fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
|
|
56
|
+
fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
|
|
57
|
+
whiteSpace: 'pre-wrap'
|
|
57
58
|
}),
|
|
58
59
|
'data-label': content
|
|
59
60
|
}]], ['div', {
|
|
@@ -17,7 +17,6 @@ export var syncCMWithPM = function syncCMWithPM(_ref) {
|
|
|
17
17
|
var pmSel = view.state.selection;
|
|
18
18
|
if (update.docChanged || pmSel.from !== selFrom || pmSel.to !== selTo) {
|
|
19
19
|
var tr = view.state.tr;
|
|
20
|
-
// eslint-disable-next-line @typescript-eslint/max-params
|
|
21
20
|
update.changes.iterChanges(function (fromA, toA, fromB, toB, text) {
|
|
22
21
|
if (text.length) {
|
|
23
22
|
tr.replaceWith(offset + fromA, offset + toA, view.state.schema.text(text.toString()));
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
2
|
import { defaultKeymap, indentWithTab } from '@codemirror/commands';
|
|
3
3
|
import { keymap as cmKeymap } from '@codemirror/view';
|
|
4
|
+
import { browser } from '@atlaskit/editor-common/browser';
|
|
4
5
|
import { exitCode } from '@atlaskit/editor-prosemirror/commands';
|
|
5
6
|
import { undo, redo } from '@atlaskit/editor-prosemirror/history';
|
|
6
7
|
import { backspaceKeymap } from './backspace';
|
|
@@ -10,13 +11,15 @@ export var keymapExtension = function keymapExtension(_ref) {
|
|
|
10
11
|
getNode = _ref.getNode,
|
|
11
12
|
getPos = _ref.getPos,
|
|
12
13
|
selectCodeBlockNode = _ref.selectCodeBlockNode,
|
|
13
|
-
onMaybeNodeSelection = _ref.onMaybeNodeSelection
|
|
14
|
+
onMaybeNodeSelection = _ref.onMaybeNodeSelection,
|
|
15
|
+
customFindReplace = _ref.customFindReplace;
|
|
14
16
|
return cmKeymap.of(codeBlockKeymap({
|
|
15
17
|
view: view,
|
|
16
18
|
getNode: getNode,
|
|
17
19
|
getPos: getPos,
|
|
18
20
|
selectCodeBlockNode: selectCodeBlockNode,
|
|
19
|
-
onMaybeNodeSelection: onMaybeNodeSelection
|
|
21
|
+
onMaybeNodeSelection: onMaybeNodeSelection,
|
|
22
|
+
customFindReplace: customFindReplace
|
|
20
23
|
}));
|
|
21
24
|
};
|
|
22
25
|
var codeBlockKeymap = function codeBlockKeymap(_ref2) {
|
|
@@ -24,7 +27,8 @@ var codeBlockKeymap = function codeBlockKeymap(_ref2) {
|
|
|
24
27
|
getNode = _ref2.getNode,
|
|
25
28
|
getPos = _ref2.getPos,
|
|
26
29
|
selectCodeBlockNode = _ref2.selectCodeBlockNode,
|
|
27
|
-
onMaybeNodeSelection = _ref2.onMaybeNodeSelection
|
|
30
|
+
onMaybeNodeSelection = _ref2.onMaybeNodeSelection,
|
|
31
|
+
customFindReplace = _ref2.customFindReplace;
|
|
28
32
|
return [{
|
|
29
33
|
key: 'ArrowUp',
|
|
30
34
|
run: function run(cm) {
|
|
@@ -81,6 +85,22 @@ var codeBlockKeymap = function codeBlockKeymap(_ref2) {
|
|
|
81
85
|
onMaybeNodeSelection: onMaybeNodeSelection
|
|
82
86
|
});
|
|
83
87
|
}
|
|
88
|
+
}, {
|
|
89
|
+
key: 'Ctrl-f',
|
|
90
|
+
mac: 'Cmd-f',
|
|
91
|
+
run: function run() {
|
|
92
|
+
// Pass synthetic event to prosemirror
|
|
93
|
+
if (customFindReplace) {
|
|
94
|
+
view.dispatchEvent(new KeyboardEvent('keydown', {
|
|
95
|
+
key: 'f',
|
|
96
|
+
code: 'KeyF',
|
|
97
|
+
metaKey: browser.mac ? true : false,
|
|
98
|
+
ctrlKey: browser.mac ? false : true
|
|
99
|
+
}));
|
|
100
|
+
return true;
|
|
101
|
+
}
|
|
102
|
+
return false;
|
|
103
|
+
}
|
|
84
104
|
}, {
|
|
85
105
|
key: 'Ctrl-Enter',
|
|
86
106
|
run: function run() {
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { EditorView as CodeMirror } from '@codemirror/view';
|
|
2
|
+
/**
|
|
3
|
+
* Hides selection marker decoration when focused on codemirror editor and re-enables on blur
|
|
4
|
+
*
|
|
5
|
+
* @param api
|
|
6
|
+
* @returns CodeMirror Extension
|
|
7
|
+
*/
|
|
8
|
+
export var manageSelectionMarker = function manageSelectionMarker(api) {
|
|
9
|
+
var decoHide;
|
|
10
|
+
return CodeMirror.focusChangeEffect.of(function (_state, focusing) {
|
|
11
|
+
if (focusing) {
|
|
12
|
+
var _api$selectionMarker;
|
|
13
|
+
api === null || api === void 0 || (_api$selectionMarker = api.selectionMarker) === null || _api$selectionMarker === void 0 || _api$selectionMarker.actions.queueHideDecoration(function (hideDecoration) {
|
|
14
|
+
decoHide = hideDecoration;
|
|
15
|
+
});
|
|
16
|
+
} else {
|
|
17
|
+
var _decoHide;
|
|
18
|
+
(_decoHide = decoHide) === null || _decoHide === void 0 || _decoHide();
|
|
19
|
+
}
|
|
20
|
+
return null;
|
|
21
|
+
});
|
|
22
|
+
};
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
3
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
4
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
5
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
6
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
7
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
8
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
9
|
+
import { ViewPlugin, WidgetType, Decoration as CodeMirrorDecoration } from '@codemirror/view';
|
|
10
|
+
var PMWidget = /*#__PURE__*/function (_WidgetType) {
|
|
11
|
+
function PMWidget(toDOMElement) {
|
|
12
|
+
var _this;
|
|
13
|
+
_classCallCheck(this, PMWidget);
|
|
14
|
+
_this = _callSuper(this, PMWidget);
|
|
15
|
+
_this.toDOMElement = toDOMElement;
|
|
16
|
+
return _this;
|
|
17
|
+
}
|
|
18
|
+
_inherits(PMWidget, _WidgetType);
|
|
19
|
+
return _createClass(PMWidget, [{
|
|
20
|
+
key: "toDOM",
|
|
21
|
+
value: function toDOM() {
|
|
22
|
+
return this.toDOMElement;
|
|
23
|
+
}
|
|
24
|
+
}, {
|
|
25
|
+
key: "ignoreEvent",
|
|
26
|
+
value: function ignoreEvent() {
|
|
27
|
+
return false;
|
|
28
|
+
}
|
|
29
|
+
}]);
|
|
30
|
+
}(WidgetType); // This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
|
|
31
|
+
// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
|
|
32
|
+
// This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
|
|
33
|
+
// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
|
|
34
|
+
// This type is not exposed publically by ProseMirror but we need it to map to CodeMirror
|
|
35
|
+
// See: https://github.com/ProseMirror/prosemirror-view/blob/master/src/decoration.ts
|
|
36
|
+
function isExtendedDecoration(decoration) {
|
|
37
|
+
return decoration.inline !== undefined && decoration.widget !== undefined && decoration.type !== undefined;
|
|
38
|
+
}
|
|
39
|
+
var getHTMLElement = function getHTMLElement(toDOM, view, getPos) {
|
|
40
|
+
if (toDOM instanceof Function) {
|
|
41
|
+
var element = toDOM(view, getPos);
|
|
42
|
+
return element instanceof HTMLElement ? element : undefined;
|
|
43
|
+
} else if (toDOM instanceof HTMLElement) {
|
|
44
|
+
return toDOM;
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
var mapPMDecorationToCMDecoration = function mapPMDecorationToCMDecoration(decoration, view, getPos) {
|
|
48
|
+
if (!isExtendedDecoration(decoration)) {
|
|
49
|
+
return undefined;
|
|
50
|
+
}
|
|
51
|
+
if (decoration.inline) {
|
|
52
|
+
var markDecoration = CodeMirrorDecoration.mark({
|
|
53
|
+
attributes: decoration.type.attrs
|
|
54
|
+
});
|
|
55
|
+
return markDecoration.range(decoration.from, decoration.to);
|
|
56
|
+
} else if (decoration.widget) {
|
|
57
|
+
var _decoration$type;
|
|
58
|
+
var toDOM = getHTMLElement(decoration === null || decoration === void 0 || (_decoration$type = decoration.type) === null || _decoration$type === void 0 ? void 0 : _decoration$type.toDOM, view, getPos);
|
|
59
|
+
if (!toDOM) {
|
|
60
|
+
return undefined;
|
|
61
|
+
}
|
|
62
|
+
var widgetDecoration = CodeMirrorDecoration.widget({
|
|
63
|
+
widget: new PMWidget(toDOM),
|
|
64
|
+
side: decoration.type.side
|
|
65
|
+
});
|
|
66
|
+
return widgetDecoration.range(decoration.from, decoration.to);
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
function isDefined(value) {
|
|
70
|
+
return value !== undefined;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* Creates CodeMirror versions of the decorations provided by ProseMirror.
|
|
75
|
+
*
|
|
76
|
+
* Inline ProseMirror decorations -> Mark CodeMirror decorations
|
|
77
|
+
* Widget ProseMirror decorations -> Widget CodeMirror decorations
|
|
78
|
+
*
|
|
79
|
+
* This way any decorations applied in ProseMirror land should automatically be supported
|
|
80
|
+
* by the CodeMirror editor
|
|
81
|
+
*
|
|
82
|
+
* @param updateDecorationsEffect Facet for the prosemirror decorations
|
|
83
|
+
* @returns CodeMirror extension
|
|
84
|
+
*/
|
|
85
|
+
export var prosemirrorDecorationPlugin = function prosemirrorDecorationPlugin(updateDecorationsEffect, editorView, getPos) {
|
|
86
|
+
return ViewPlugin.fromClass( /*#__PURE__*/function () {
|
|
87
|
+
function _class(view) {
|
|
88
|
+
_classCallCheck(this, _class);
|
|
89
|
+
this.decorations = this.updateDecorations(view);
|
|
90
|
+
}
|
|
91
|
+
return _createClass(_class, [{
|
|
92
|
+
key: "updateDecorations",
|
|
93
|
+
value: function updateDecorations(view) {
|
|
94
|
+
var _view$viewport = view.viewport,
|
|
95
|
+
from = _view$viewport.from,
|
|
96
|
+
to = _view$viewport.to;
|
|
97
|
+
var innnerDecorations = view.state.facet(updateDecorationsEffect);
|
|
98
|
+
var allDecorations = [];
|
|
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
|
+
source === null || source === void 0 || source.forEachSet(function (set) {
|
|
105
|
+
var decorations = set.find(from, to)
|
|
106
|
+
// 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
|
+
.filter(function (dec) {
|
|
112
|
+
return dec.spec.type !== 'decorationWidgetType';
|
|
113
|
+
});
|
|
114
|
+
allDecorations.push.apply(allDecorations, _toConsumableArray(decorations));
|
|
115
|
+
});
|
|
116
|
+
});
|
|
117
|
+
var cmDecorations = allDecorations.sort(function (a, b) {
|
|
118
|
+
return a.from < b.from ? -1 : 1;
|
|
119
|
+
}).map(function (decoration) {
|
|
120
|
+
return mapPMDecorationToCMDecoration(decoration, editorView, getPos);
|
|
121
|
+
}).filter(isDefined);
|
|
122
|
+
return CodeMirrorDecoration.set(cmDecorations);
|
|
123
|
+
}
|
|
124
|
+
}, {
|
|
125
|
+
key: "update",
|
|
126
|
+
value: function update(_update) {
|
|
127
|
+
this.decorations = this.updateDecorations(_update.view);
|
|
128
|
+
}
|
|
129
|
+
}]);
|
|
130
|
+
}(), {
|
|
131
|
+
decorations: function decorations(v) {
|
|
132
|
+
return v.decorations;
|
|
133
|
+
}
|
|
134
|
+
});
|
|
135
|
+
};
|
|
@@ -2,9 +2,17 @@ import type { Extension } from '@codemirror/state';
|
|
|
2
2
|
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
3
3
|
import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
|
|
4
4
|
import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
|
|
5
|
+
import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
|
|
5
6
|
import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
7
|
+
import type { SelectionMarkerPlugin } from '@atlaskit/editor-plugin-selection-marker';
|
|
6
8
|
export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
|
|
7
|
-
dependencies: [
|
|
9
|
+
dependencies: [
|
|
10
|
+
CodeBlockPlugin,
|
|
11
|
+
SelectionPlugin,
|
|
12
|
+
OptionalPlugin<EditorDisabledPlugin>,
|
|
13
|
+
OptionalPlugin<SelectionMarkerPlugin>,
|
|
14
|
+
OptionalPlugin<FindReplacePlugin>
|
|
15
|
+
];
|
|
8
16
|
pluginConfiguration: {
|
|
9
17
|
extensions?: Extension[];
|
|
10
18
|
} | undefined;
|
|
@@ -2,7 +2,7 @@ import { Extension } from '@codemirror/state';
|
|
|
2
2
|
import { ViewUpdate } from '@codemirror/view';
|
|
3
3
|
import type { getPosHandler, getPosHandlerNode, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
4
|
import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
5
|
-
import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
6
6
|
import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
|
|
7
7
|
interface ConfigProps {
|
|
8
8
|
api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
|
|
@@ -15,6 +15,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
|
|
|
15
15
|
private lineWrappingCompartment;
|
|
16
16
|
private languageCompartment;
|
|
17
17
|
private readOnlyCompartment;
|
|
18
|
+
private pmDecorationsCompartment;
|
|
18
19
|
private node;
|
|
19
20
|
private getPos;
|
|
20
21
|
private cm;
|
|
@@ -22,6 +23,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
|
|
|
22
23
|
private maybeTryingToReachNodeSelection;
|
|
23
24
|
private cleanupDisabledState;
|
|
24
25
|
private languageLoader;
|
|
26
|
+
private pmFacet;
|
|
25
27
|
constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps);
|
|
26
28
|
destroy(): void;
|
|
27
29
|
forwardUpdate(update: ViewUpdate): void;
|
|
@@ -31,7 +33,13 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
|
|
|
31
33
|
private selectCodeBlockNode;
|
|
32
34
|
private wordWrappingEnabled;
|
|
33
35
|
private updateWordWrap;
|
|
34
|
-
update(node: PMNode): boolean;
|
|
36
|
+
update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Updates a facet which stores information on the prosemirror decorations
|
|
39
|
+
*
|
|
40
|
+
* This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
|
|
41
|
+
*/
|
|
42
|
+
private updateProseMirrorDecorations;
|
|
35
43
|
stopEvent(e: Event): boolean;
|
|
36
44
|
}
|
|
37
45
|
export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler) => CodeBlockAdvancedNodeView;
|
|
@@ -9,6 +9,7 @@ interface KeymapProps {
|
|
|
9
9
|
getPos: getPosHandlerNode;
|
|
10
10
|
selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
|
|
11
11
|
onMaybeNodeSelection: () => void;
|
|
12
|
+
customFindReplace: boolean;
|
|
12
13
|
}
|
|
13
|
-
export declare const keymapExtension: ({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection, }: KeymapProps) => Extension;
|
|
14
|
+
export declare const keymapExtension: ({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection, customFindReplace, }: KeymapProps) => Extension;
|
|
14
15
|
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Extension } from '@codemirror/state';
|
|
2
|
+
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
|
|
4
|
+
/**
|
|
5
|
+
* Hides selection marker decoration when focused on codemirror editor and re-enables on blur
|
|
6
|
+
*
|
|
7
|
+
* @param api
|
|
8
|
+
* @returns CodeMirror Extension
|
|
9
|
+
*/
|
|
10
|
+
export declare const manageSelectionMarker: (api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined) => Extension;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Facet } from '@codemirror/state';
|
|
2
|
+
import { ViewPlugin, EditorView as CodeMirror, DecorationSet, ViewUpdate } from '@codemirror/view';
|
|
3
|
+
import type { EditorView, DecorationSource } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
/**
|
|
5
|
+
* Creates CodeMirror versions of the decorations provided by ProseMirror.
|
|
6
|
+
*
|
|
7
|
+
* Inline ProseMirror decorations -> Mark CodeMirror decorations
|
|
8
|
+
* Widget ProseMirror decorations -> Widget CodeMirror decorations
|
|
9
|
+
*
|
|
10
|
+
* This way any decorations applied in ProseMirror land should automatically be supported
|
|
11
|
+
* by the CodeMirror editor
|
|
12
|
+
*
|
|
13
|
+
* @param updateDecorationsEffect Facet for the prosemirror decorations
|
|
14
|
+
* @returns CodeMirror extension
|
|
15
|
+
*/
|
|
16
|
+
export declare const prosemirrorDecorationPlugin: (updateDecorationsEffect: Facet<DecorationSource>, editorView: EditorView, getPos: () => number | undefined) => ViewPlugin<{
|
|
17
|
+
decorations: DecorationSet;
|
|
18
|
+
updateDecorations(view: CodeMirror): DecorationSet;
|
|
19
|
+
update(update: ViewUpdate): void;
|
|
20
|
+
}>;
|
|
@@ -2,12 +2,16 @@ import type { Extension } from '@codemirror/state';
|
|
|
2
2
|
import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
|
|
3
3
|
import type { CodeBlockPlugin } from '@atlaskit/editor-plugin-code-block';
|
|
4
4
|
import type { EditorDisabledPlugin } from '@atlaskit/editor-plugin-editor-disabled';
|
|
5
|
+
import type { FindReplacePlugin } from '@atlaskit/editor-plugin-find-replace';
|
|
5
6
|
import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
|
|
7
|
+
import type { SelectionMarkerPlugin } from '@atlaskit/editor-plugin-selection-marker';
|
|
6
8
|
export type CodeBlockAdvancedPlugin = NextEditorPlugin<'codeBlockAdvanced', {
|
|
7
9
|
dependencies: [
|
|
8
10
|
CodeBlockPlugin,
|
|
9
11
|
SelectionPlugin,
|
|
10
|
-
OptionalPlugin<EditorDisabledPlugin
|
|
12
|
+
OptionalPlugin<EditorDisabledPlugin>,
|
|
13
|
+
OptionalPlugin<SelectionMarkerPlugin>,
|
|
14
|
+
OptionalPlugin<FindReplacePlugin>
|
|
11
15
|
];
|
|
12
16
|
pluginConfiguration: {
|
|
13
17
|
extensions?: Extension[];
|
|
@@ -2,7 +2,7 @@ import { Extension } from '@codemirror/state';
|
|
|
2
2
|
import { ViewUpdate } from '@codemirror/view';
|
|
3
3
|
import type { getPosHandler, getPosHandlerNode, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
4
4
|
import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
5
|
-
import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
5
|
+
import type { Decoration, DecorationSource, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
|
|
6
6
|
import type { CodeBlockAdvancedPlugin } from '../codeBlockAdvancedPluginType';
|
|
7
7
|
interface ConfigProps {
|
|
8
8
|
api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined;
|
|
@@ -15,6 +15,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
|
|
|
15
15
|
private lineWrappingCompartment;
|
|
16
16
|
private languageCompartment;
|
|
17
17
|
private readOnlyCompartment;
|
|
18
|
+
private pmDecorationsCompartment;
|
|
18
19
|
private node;
|
|
19
20
|
private getPos;
|
|
20
21
|
private cm;
|
|
@@ -22,6 +23,7 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
|
|
|
22
23
|
private maybeTryingToReachNodeSelection;
|
|
23
24
|
private cleanupDisabledState;
|
|
24
25
|
private languageLoader;
|
|
26
|
+
private pmFacet;
|
|
25
27
|
constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode, config: ConfigProps);
|
|
26
28
|
destroy(): void;
|
|
27
29
|
forwardUpdate(update: ViewUpdate): void;
|
|
@@ -31,7 +33,13 @@ declare class CodeBlockAdvancedNodeView implements NodeView {
|
|
|
31
33
|
private selectCodeBlockNode;
|
|
32
34
|
private wordWrappingEnabled;
|
|
33
35
|
private updateWordWrap;
|
|
34
|
-
update(node: PMNode): boolean;
|
|
36
|
+
update(node: PMNode, _: readonly Decoration[], innerDecorations: DecorationSource): boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Updates a facet which stores information on the prosemirror decorations
|
|
39
|
+
*
|
|
40
|
+
* This then gets translated to codemirror decorations in `prosemirrorDecorationPlugin`
|
|
41
|
+
*/
|
|
42
|
+
private updateProseMirrorDecorations;
|
|
35
43
|
stopEvent(e: Event): boolean;
|
|
36
44
|
}
|
|
37
45
|
export declare const getCodeBlockAdvancedNodeView: (props: ConfigProps) => (node: PMNode, view: EditorView, getPos: getPosHandler) => CodeBlockAdvancedNodeView;
|
|
@@ -9,6 +9,7 @@ interface KeymapProps {
|
|
|
9
9
|
getPos: getPosHandlerNode;
|
|
10
10
|
selectCodeBlockNode: (relativeSelectionPos: RelativeSelectionPos | undefined) => void;
|
|
11
11
|
onMaybeNodeSelection: () => void;
|
|
12
|
+
customFindReplace: boolean;
|
|
12
13
|
}
|
|
13
|
-
export declare const keymapExtension: ({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection, }: KeymapProps) => Extension;
|
|
14
|
+
export declare const keymapExtension: ({ view, getNode, getPos, selectCodeBlockNode, onMaybeNodeSelection, customFindReplace, }: KeymapProps) => Extension;
|
|
14
15
|
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Extension } from '@codemirror/state';
|
|
2
|
+
import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { CodeBlockAdvancedPlugin } from '../../codeBlockAdvancedPluginType';
|
|
4
|
+
/**
|
|
5
|
+
* Hides selection marker decoration when focused on codemirror editor and re-enables on blur
|
|
6
|
+
*
|
|
7
|
+
* @param api
|
|
8
|
+
* @returns CodeMirror Extension
|
|
9
|
+
*/
|
|
10
|
+
export declare const manageSelectionMarker: (api: ExtractInjectionAPI<CodeBlockAdvancedPlugin> | undefined) => Extension;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Facet } from '@codemirror/state';
|
|
2
|
+
import { ViewPlugin, EditorView as CodeMirror, DecorationSet, ViewUpdate } from '@codemirror/view';
|
|
3
|
+
import type { EditorView, DecorationSource } from '@atlaskit/editor-prosemirror/view';
|
|
4
|
+
/**
|
|
5
|
+
* Creates CodeMirror versions of the decorations provided by ProseMirror.
|
|
6
|
+
*
|
|
7
|
+
* Inline ProseMirror decorations -> Mark CodeMirror decorations
|
|
8
|
+
* Widget ProseMirror decorations -> Widget CodeMirror decorations
|
|
9
|
+
*
|
|
10
|
+
* This way any decorations applied in ProseMirror land should automatically be supported
|
|
11
|
+
* by the CodeMirror editor
|
|
12
|
+
*
|
|
13
|
+
* @param updateDecorationsEffect Facet for the prosemirror decorations
|
|
14
|
+
* @returns CodeMirror extension
|
|
15
|
+
*/
|
|
16
|
+
export declare const prosemirrorDecorationPlugin: (updateDecorationsEffect: Facet<DecorationSource>, editorView: EditorView, getPos: () => number | undefined) => ViewPlugin<{
|
|
17
|
+
decorations: DecorationSet;
|
|
18
|
+
updateDecorations(view: CodeMirror): DecorationSet;
|
|
19
|
+
update(update: ViewUpdate): void;
|
|
20
|
+
}>;
|