-import {EditorView} from "@codemirror/view"
-// import {EditorState} from "@codemirror/state"
-import Clipboard from "clipboard/dist/clipboard.min";
+import {EditorView, keymap} from "@codemirror/view";
+import {copyTextToClipboard} from "../services/clipboard.js"
// Modes
-import {modes, modeMap, modesAsStreamLanguages} from "./modes";
-import {viewer} from "./setups.js";
+import {viewer, editor} from "./setups.js";
+import {createView, updateViewLanguage} from "./views.js";
/**
* Highlight pre elements on a page
elem.innerHTML = elem.innerHTML.replace(/<br\s*[\/]?>/gi ,'\n');
const content = elem.textContent.trimEnd();
- let mode = '';
+ let langName = '';
if (innerCodeElem !== null) {
- const langName = innerCodeElem.className.replace('language-', '');
- mode = getMode(langName, content);
+ langName = innerCodeElem.className.replace('language-', '');
}
const wrapper = document.createElement('div');
elem.parentNode.insertBefore(wrapper, elem);
- const cm = new EditorView({
+ const ev = createView({
parent: wrapper,
doc: content,
extensions: viewer(),
});
+ setMode(ev, langName, content);
elem.remove();
- // TODO - theme: getTheme(),
- // TODO - mode,
- addCopyIcon(cm);
+ addCopyIcon(ev);
}
/**
* Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
- * @param cmInstance
- */
-function addCopyIcon(cmInstance) {
- // TODO
- // const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
- // const copyButton = document.createElement('div');
- // copyButton.classList.add('CodeMirror-copy');
- // copyButton.innerHTML = copyIcon;
- // cmInstance.display.wrapper.appendChild(copyButton);
- //
- // const clipboard = new Clipboard(copyButton, {
- // text: function(trigger) {
- // return cmInstance.getValue()
- // }
- // });
- //
- // clipboard.on('success', event => {
- // copyButton.classList.add('success');
- // setTimeout(() => {
- // copyButton.classList.remove('success');
- // }, 240);
- // });
-}
-
-/**
- * Search for a codemirror code based off a user suggestion
- * @param {String} suggestion
- * @param {String} content
- * @returns {string}
+ * @param {EditorView} editorView
*/
-function getMode(suggestion, content) {
- suggestion = suggestion.trim().replace(/^\./g, '').toLowerCase();
-
- const modeMapType = typeof modeMap[suggestion];
-
- if (modeMapType === 'undefined') {
- return '';
- }
-
- if (modeMapType === 'function') {
- return modeMap[suggestion](content);
- }
-
- return modeMap[suggestion];
+function addCopyIcon(editorView) {
+ const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
+ const copyButton = document.createElement('button');
+ copyButton.setAttribute('type', 'button')
+ copyButton.classList.add('cm-copy-button');
+ copyButton.innerHTML = copyIcon;
+ editorView.dom.appendChild(copyButton);
+
+ copyButton.addEventListener('click', event => {
+ copyTextToClipboard(editorView.state.doc.toString());
+ copyButton.classList.add('success');
+ setTimeout(() => {
+ copyButton.classList.remove('success');
+ }, 240);
+ });
}
/**
}
/**
- * Set the mode of a codemirror instance.
- * @param cmInstance
- * @param modeSuggestion
+ * Set the language mode of a codemirror EditorView.
+ *
+ * @param {EditorView} ev
+ * @param {string} modeSuggestion
+ * @param {string} content
*/
-export function setMode(cmInstance, modeSuggestion, content) {
- cmInstance.setOption('mode', getMode(modeSuggestion, content));
+export function setMode(ev, modeSuggestion, content) {
+ updateViewLanguage(ev, modeSuggestion, content);
}
/**
/**
* Get a CodeMirror instance to use for the markdown editor.
* @param {HTMLElement} elem
+ * @param {function} onChange
+ * @param {object} domEventHandlers
+ * @param {Array} keyBindings
* @returns {*}
*/
-export function markdownEditor(elem) {
+export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
const content = elem.textContent;
const config = {
- value: content,
- mode: "markdown",
- lineNumbers: true,
- lineWrapping: true,
- theme: getTheme(),
- scrollPastEnd: true,
+ parent: elem.parentNode,
+ doc: content,
+ extensions: [
+ ...editor('markdown'),
+ EditorView.updateListener.of((v) => {
+ onChange(v);
+ }),
+ EditorView.domEventHandlers(domEventHandlers),
+ keymap.of(keyBindings),
+ ],
};
- window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
+ // Emit a pre-event public event to allow tweaking of the configure before view creation.
+ window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {cmEditorViewConfig: config});
- return CodeMirror(function (elt) {
- elem.parentNode.insertBefore(elt, elem);
- elem.style.display = 'none';
- }, config);
-}
+ // Create editor view, hide original input
+ const ev = createView(config);
+ elem.style.display = 'none';
-/**
- * Get the 'meta' key dependent on the user's system.
- * @returns {string}
- */
-export function getMetaKey() {
- let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
- return mac ? "Cmd" : "Ctrl";
+ return ev;
}
\ No newline at end of file
projects / bookstack / blobdiff