-import {EditorView} from "@codemirror/view"
-import Clipboard from "clipboard/dist/clipboard.min";
+import {EditorView, keymap} from "@codemirror/view";
-// Modes
+import {copyTextToClipboard} from "../services/clipboard.js"
import {viewer, editor} from "./setups.js";
import {createView, updateViewLanguage} from "./views.js";
const ev = createView({
parent: wrapper,
doc: content,
- extensions: viewer(),
+ extensions: viewer(wrapper),
});
- setMode(ev, langName, content);
+ setMode(ev, langName, content);
elem.remove();
-
addCopyIcon(ev);
}
/**
* Add a button to a CodeMirror instance which copies the contents to the clipboard upon click.
- * @param cmInstance
+ * @param {EditorView} editorView
*/
-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);
- // });
+function addCopyIcon(editorView) {
+ const copyIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><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 checkIcon = `<svg viewBox="0 0 24 24" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>`;
+ const copyButton = document.createElement('button');
+ copyButton.setAttribute('type', 'button')
+ copyButton.classList.add('cm-copy-button');
+ copyButton.innerHTML = copyIcon;
+ editorView.dom.appendChild(copyButton);
+
+ const notifyTime = 620;
+ const transitionTime = 60;
+ copyButton.addEventListener('click', event => {
+ copyTextToClipboard(editorView.state.doc.toString());
+ copyButton.classList.add('success');
+
+ setTimeout(() => {
+ copyButton.innerHTML = checkIcon;
+ }, transitionTime / 2);
+
+ setTimeout(() => {
+ copyButton.classList.remove('success');
+ }, notifyTime);
+
+ setTimeout(() => {
+ copyButton.innerHTML = copyIcon;
+ }, notifyTime + (transitionTime / 2));
+ });
}
/**
* @returns {*|string}
*/
function getTheme() {
+ // TODO - Remove
const darkMode = document.documentElement.classList.contains('dark-mode');
return window.codeTheme || (darkMode ? 'darcula' : 'default');
}
* @param {HTMLElement} cmContainer
* @param {String} content
* @param {String} language
- * @returns {{wrap: Element, editor: *}}
+ * @returns {EditorView}
*/
export function wysiwygView(cmContainer, content, language) {
- return CodeMirror(cmContainer, {
- value: content,
- mode: getMode(language, content),
- lineNumbers: true,
- lineWrapping: false,
- theme: getTheme(),
- readOnly: true
+ const ev = createView({
+ parent: cmContainer,
+ doc: content,
+ extensions: viewer(cmContainer),
});
+
+ setMode(ev, language, content);
+
+ return ev;
}
* Create an inline editor to replace the given textarea.
* @param {HTMLTextAreaElement} textArea
* @param {String} mode
- * @returns {CodeMirror3}
+ * @returns {EditorView}
*/
export function inlineEditor(textArea, mode) {
- return CodeMirror.fromTextArea(textArea, {
- mode: getMode(mode, textArea.value),
- lineNumbers: true,
- lineWrapping: false,
- theme: getTheme(),
- });
+ const content = textArea.value;
+ const config = {
+ parent: textArea.parentNode,
+ doc: content,
+ extensions: [
+ ...editor(textArea.parentElement),
+ EditorView.updateListener.of((v) => {
+ if (v.docChanged) {
+ textArea.value = v.state.doc.toString();
+ }
+ }),
+ ],
+ };
+
+ // Create editor view, hide original input
+ const ev = createView(config);
+ setMode(ev, mode, content);
+ textArea.style.display = 'none';
+
+ return ev;
}
/**
* @param {HTMLElement} elem
* @param {function} onChange
* @param {object} domEventHandlers
+ * @param {Array} keyBindings
* @returns {*}
*/
-export function markdownEditor(elem, onChange, domEventHandlers) {
+export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
const content = elem.textContent;
-
- // TODO - Change to pass something else that's useful, probably extension array?
- // window.$events.emitPublic(elem, 'editor-markdown-cm::pre-init', {config});
-
- const ev = createView({
+ const config = {
parent: elem.parentNode,
doc: content,
extensions: [
- ...editor('markdown'),
+ ...editor(elem.parentElement),
EditorView.updateListener.of((v) => {
onChange(v);
}),
EditorView.domEventHandlers(domEventHandlers),
+ keymap.of(keyBindings),
],
- });
+ };
+
+ // 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});
+ // Create editor view, hide original input
+ const ev = createView(config);
+ setMode(ev, 'markdown', '');
elem.style.display = 'none';
return ev;
-}
-
-/**
- * Get the 'meta' key dependent on the user's system.
- * @returns {string}
- */
-export function getMetaKey() {
- // TODO - Redo, Is needed? No CodeMirror instance to use.
- const mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
- return mac ? "Cmd" : "Ctrl";
}
\ No newline at end of file
projects / bookstack / blobdiff