Addressed existing cm6 todos

- Updated clipboard handling
  - Removed old clipboard package for browser-native API.
- Updated codemirror editor events to use new props for new data types.

resources/js/code/index.mjs

@@ -1,5 +1,5 @@
-import {EditorView, keymap} from "@codemirror/view"
-import Clipboard from "clipboard/dist/clipboard.min";
+import {EditorView, keymap} from "@codemirror/view";
+import {copyTextToClipboard} from "../services/clipboard.js"
 
 // Modes
 import {viewer, editor} from "./setups.js";
@@ -57,28 +57,23 @@ function highlightElem(elem) {
 
 /**
  * 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="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);
+    });
 }
 
 /**
@@ -187,11 +182,7 @@ export function updateLayout(cmInstance) {
  */
 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: [
@@ -202,8 +193,13 @@ export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
             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);
     elem.style.display = 'none';
 
     return ev;

resources/js/code/setups.js

@@ -45,5 +45,6 @@ export function editor(language) {
             ...historyKeymap,
         ]),
         getLanguageExtension(language, ''),
+        EditorView.lineWrapping,
     ];
 }

resources/js/components/markdown-editor.js

@@ -1,4 +1,3 @@
-import {debounce} from "../services/util";
 import {Component} from "./component";
 import {init as initEditor} from "../markdown/editor";
 
@@ -45,8 +44,7 @@ export class MarkdownEditor extends Component {
         window.$events.emitPublic(this.elem, 'editor-markdown::setup', {
             markdownIt: this.editor.markdown.getRenderer(),
             displayEl: this.display,
-            // TODO - change to codeMirrorView?
-            // codeMirrorInstance: this.editor.cm,
+            cmEditorView: this.editor.cm,
         });
     }
 
@@ -81,12 +79,6 @@ export class MarkdownEditor extends Component {
             toolbarLabel.closest('.markdown-editor-wrap').classList.add('active');
         });
 
-        // Refresh CodeMirror on container resize
-        // TODO
-        // const resizeDebounced = debounce(() => this.editor.cm.refresh(), 100, false);
-        // const observer = new ResizeObserver(resizeDebounced);
-        // observer.observe(this.elem);
-
         this.handleDividerDrag();
     }
 
@@ -104,8 +96,6 @@ export class MarkdownEditor extends Component {
                 window.removeEventListener('pointerup', upListener);
                 this.display.style.pointerEvents = null;
                 document.body.style.userSelect = null;
-                // TODO
-                // this.editor.cm.refresh();
             };
 
             this.display.style.pointerEvents = 'none';

resources/js/components/pointer.js

@@ -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');

resources/js/markdown/codemirror.js

@@ -64,11 +64,10 @@ export async function init(editor) {
         domEventHandlers,
         provideKeyBindings(editor),
     );
-    window.cm = cm;
 
-    // Will force to remain as ltr for now due to issues when HTML is in editor.
-    // TODO
-    // cm.setOption('direction', 'ltr');
+    // Add editor view to window for easy access/debugging.
+    // Not part of official API/Docs
+    window.mdEditorView = cm;
 
     return cm;
 }

resources/js/services/clipboard.js

@@ -1,5 +1,5 @@
 
-class Clipboard {
+export class Clipboard {
 
     /**
      * Constructor
@@ -51,4 +51,8 @@ class Clipboard {
     }
 }
 
+export function copyTextToClipboard(text) {
+    return navigator.clipboard.writeText(text);
+}
+
 export default Clipboard;