X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/58cadce052f5cc3c9ce2bc12f88a93cac310699a..refs/pull/5400/head:/resources/js/code/index.mjs

diff --git a/resources/js/code/index.mjs b/resources/js/code/index.mjs
index e51472dc4..a2850c06b 100644
--- a/resources/js/code/index.mjs
+++ b/resources/js/code/index.mjs
@@ -1,6 +1,6 @@
 import {EditorView, keymap} from '@codemirror/view';
 
-import {copyTextToClipboard} from '../services/clipboard';
+import {copyTextToClipboard} from '../services/clipboard.ts';
 import {viewerExtensions, editorExtensions} from './setups';
 import {createView} from './views';
 import {SimpleEditorInterface} from './simple-editor-interface';
@@ -38,6 +38,23 @@ function addCopyIcon(editorView) {
     });
 }
 
+/**
+ * @param {HTMLElement} codeElem
+ * @returns {String}
+ */
+function getDirectionFromCodeBlock(codeElem) {
+    let dir = '';
+    const innerCodeElem = codeElem.querySelector('code');
+
+    if (innerCodeElem && innerCodeElem.hasAttribute('dir')) {
+        dir = innerCodeElem.getAttribute('dir');
+    } else if (codeElem.hasAttribute('dir')) {
+        dir = codeElem.getAttribute('dir');
+    }
+
+    return dir;
+}
+
 /**
  * Add code highlighting to a single element.
  * @param {HTMLElement} elem
@@ -55,7 +72,12 @@ function highlightElem(elem) {
     const wrapper = document.createElement('div');
     elem.parentNode.insertBefore(wrapper, elem);
 
-    const ev = createView({
+    const direction = getDirectionFromCodeBlock(elem);
+    if (direction) {
+        wrapper.setAttribute('dir', direction);
+    }
+
+    const ev = createView('content-code-block', {
         parent: wrapper,
         doc: content,
         extensions: viewerExtensions(wrapper),
@@ -99,7 +121,7 @@ export function highlight() {
  * @returns {SimpleEditorInterface}
  */
 export function wysiwygView(cmContainer, shadowRoot, content, language) {
-    const ev = createView({
+    const ev = createView('content-code-block', {
         parent: cmContainer,
         doc: content,
         extensions: viewerExtensions(cmContainer),
@@ -125,16 +147,11 @@ export function popupEditor(elem, modeSuggestion) {
         doc: content,
         extensions: [
             ...editorExtensions(elem.parentElement),
-            EditorView.updateListener.of(v => {
-                if (v.docChanged) {
-                    // textArea.value = v.state.doc.toString();
-                }
-            }),
         ],
     };
 
     // Create editor, hide original input
-    const editor = new SimpleEditorInterface(createView(config));
+    const editor = new SimpleEditorInterface(createView('code-editor', config));
     editor.setMode(modeSuggestion, content);
     elem.style.display = 'none';
 
@@ -163,7 +180,7 @@ export function inlineEditor(textArea, mode) {
     };
 
     // Create editor view, hide original input
-    const ev = createView(config);
+    const ev = createView('code-input', config);
     const editor = new SimpleEditorInterface(ev);
     editor.setMode(mode, content);
     textArea.style.display = 'none';
@@ -198,7 +215,7 @@ export function markdownEditor(elem, onChange, domEventHandlers, keyBindings) {
     window.$events.emitPublic(elem, 'editor-markdown-cm6::pre-init', {editorViewConfig: config});
 
     // Create editor view, hide original input
-    const ev = createView(config);
+    const ev = createView('markdown-editor', config);
     (new SimpleEditorInterface(ev)).setMode('markdown', '');
     elem.style.display = 'none';