webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

Merge pull request #3617 from BookStackApp/codemirror6

Browse Source 
Upgrade to codemirror 6
This commit is contained in:
Dan Brown
2023-04-18 15:35:39 +01:00
committed by GitHub
parent 50f3c10f19 baf5edd73a
commit 69d03042c6
30 changed files with 1775 additions and 2731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
resources/js/components/code-editor.js
View File

@ -4,6 +4,15 @@ import {Component} from "./component";
export class CodeEditor extends Component {
/**
* @type {null|SimpleEditorInterface}
*/
editor = null;
callback = null;
history = {};
historyKey = 'code_history';
setup() {
this.container = this.$refs.container;
this.popup = this.$el;
@ -16,10 +25,6 @@ export class CodeEditor extends Component {
this.historyList = this.$refs.historyList;
this.favourites = new Set(this.$opts.favourites.split(','));
this.callback = null;
this.editor = null;
this.history = {};
this.historyKey = 'code_history';
this.setupListeners();
this.setupFavourites();
}
@ -45,7 +50,7 @@ export class CodeEditor extends Component {
event.preventDefault();
const historyTime = elem.dataset.time;
if (this.editor) {
this.editor.setValue(this.history[historyTime]);
this.editor.setContent(this.history[historyTime]);
}
});
}
@ -104,19 +109,18 @@ export class CodeEditor extends Component {
save() {
if (this.callback) {
this.callback(this.editor.getValue(), this.languageInput.value);
this.callback(this.editor.getContent(), this.languageInput.value);
}
this.hide();
}
open(code, language, callback) {
async open(code, language, callback) {
this.languageInput.value = language;
this.callback = callback;
this.show()
.then(() => this.languageInputChange(language))
.then(() => window.importVersioned('code'))
.then(Code => Code.setContent(this.editor, code));
await this.show();
this.languageInputChange(language);
this.editor.setContent(code);
}
async show() {
@ -127,7 +131,6 @@ export class CodeEditor extends Component {
this.loadHistory();
this.getPopup().show(() => {
Code.updateLayout(this.editor);
this.editor.focus();
}, () => {
this.addHistory()
@ -147,8 +150,7 @@ export class CodeEditor extends Component {
}
async updateEditorMode(language) {
const Code = await window.importVersioned('code');
Code.setMode(this.editor, language, this.editor.getValue());
this.editor.setMode(language, this.editor.getContent());
}
languageInputChange(language) {
@ -177,7 +179,7 @@ export class CodeEditor extends Component {
addHistory() {
if (!this.editor) return;
const code = this.editor.getValue();
const code = this.editor.getContent();
if (!code) return;
// Stop if we'd be storing the same as the last item

11
resources/js/components/markdown-editor.js
View File

@ -1,4 +1,3 @@
import {debounce} from "../services/util";
import {Component} from "./component";
import {init as initEditor} from "../markdown/editor";
@ -45,7 +44,7 @@ export class MarkdownEditor extends Component {
window.$events.emitPublic(this.elem, 'editor-markdown::setup', {
markdownIt: this.editor.markdown.getRenderer(),
displayEl: this.display,
codeMirrorInstance: this.editor.cm,
cmEditorView: this.editor.cm,
});
}
@ -57,7 +56,7 @@ export class MarkdownEditor extends Component {
if (button === null) return;
const action = button.getAttribute('data-action');
if (action === 'insertImage') this.editor.actions.insertImage();
if (action === 'insertImage') this.editor.actions.showImageInsert();
if (action === 'insertLink') this.editor.actions.showLinkSelector();
if (action === 'insertDrawing' && (event.ctrlKey || event.metaKey)) {
this.editor.actions.showImageManager();
@ -80,11 +79,6 @@ export class MarkdownEditor extends Component {
toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
});
// Refresh CodeMirror on container resize
const resizeDebounced = debounce(() => this.editor.cm.refresh(), 100, false);
const observer = new ResizeObserver(resizeDebounced);
observer.observe(this.elem);
this.handleDividerDrag();
}
@ -102,7 +96,6 @@ export class MarkdownEditor extends Component {
window.removeEventListener('pointerup', upListener);
this.display.style.pointerEvents = null;
document.body.style.userSelect = null;
this.editor.cm.refresh();
};
this.display.style.pointerEvents = 'none';

2
resources/js/components/page-editor.js
View File

@ -22,7 +22,7 @@ export class PageEditor extends Component {
this.draftDisplayIcon = this.$refs.draftDisplayIcon;
this.changelogInput = this.$refs.changelogInput;
this.changelogDisplay = this.$refs.changelogDisplay;
this.changeEditorButtons = this.$manyRefs.changeEditor;
this.changeEditorButtons = this.$manyRefs.changeEditor || [];
this.switchDialogContainer = this.$refs.switchDialog;
// Translations

18
resources/js/components/pointer.js
View File

@ -1,12 +1,14 @@
import * as DOM from "../services/dom";
import Clipboard from "clipboard/dist/clipboard.min";
import {Component} from "./component";
import {copyTextToClipboard} from "../services/clipboard";
export class Pointer extends Component {
setup() {
this.container = this.$el;
this.input = this.$refs.input;
this.button = this.$refs.button;
this.pageId = this.$opts.pageId;
// Instance variables
@ -16,15 +18,17 @@ export class Pointer extends Component {
this.pointerSectionId = '';
this.setupListeners();
// Set up clipboard
new Clipboard(this.container.querySelector('button'));
}
setupListeners() {
// Copy on copy button click
this.button.addEventListener('click', event => {
copyTextToClipboard(this.input.value);
});
// Select all contents on input click
DOM.onChildEvent(this.container, 'input', 'click', (event, input) => {
input.select();
this.input.addEventListener('click', event => {
this.input.select();
event.stopPropagation();
});
@ -112,7 +116,7 @@ export class Pointer extends Component {
inputText = window.location.protocol + "//" + window.location.host + inputText;
}
this.container.querySelector('input').value = inputText;
this.input.value = inputText;
// Update anchor if present
const editAnchor = this.container.querySelector('#pointer-edit');