WYSIWYG: Updated code handling to respect direction

Specifically supports "dir" attribute being on top level "pre" element,
and handles application/switching of this within the editor.

For #4809

diff --git a/resources/js/code/index.mjs b/resources/js/code/index.mjs
index ada4529db5454fa448e4263a9665a470272a4c03..d92a9ba26ca9b12e0d72a544a137d40a806a5f1d 100644 (file)
--- a/resources/js/code/index.mjs
+++ b/resources/js/code/index.mjs
@@ -1,4 +1,4 @@
-import {EditorView, keymap} from '@codemirror/view';
+import {EditorView, keymap, Direction} from '@codemirror/view';
 
 import {copyTextToClipboard} from '../services/clipboard';
 import {viewerExtensions, editorExtensions} from './setups';
@@ -55,6 +55,11 @@ function highlightElem(elem) {
     const wrapper = document.createElement('div');
     elem.parentNode.insertBefore(wrapper, elem);
 
+    const direction = innerCodeElem.getAttribute('dir') || elem.getAttribute('dir') || '';
+    if (direction) {
+        wrapper.setAttribute('dir', direction);
+    }
+
     const ev = createView('content-code-block', {
         parent: wrapper,
         doc: content,

diff --git a/resources/js/wysiwyg/plugin-codeeditor.js b/resources/js/wysiwyg/plugin-codeeditor.js
index 2fe2ac26a6bc6ecba4c786ff7e6ee2198c41152f..f86760214e1ed93d124b6a9f777463f1bb1525e5 100644 (file)
--- a/resources/js/wysiwyg/plugin-codeeditor.js
+++ b/resources/js/wysiwyg/plugin-codeeditor.js
@@ -205,6 +205,11 @@ function register(editor) {
                     contenteditable: 'false',
                 });
 
+                const direction = el.attr('dir');
+                if (direction) {
+                    wrapper.attr('dir', direction);
+                }
+
                 const spans = el.getAll('span');
                 for (const span of spans) {
                     span.unwrap();
@@ -222,6 +227,13 @@ function register(editor) {
 
         editor.serializer.addNodeFilter('code-block', elms => {
             for (const el of elms) {
+                const direction = el.attr('dir');
+                if (direction && el.firstChild) {
+                    el.firstChild.attr('dir', direction);
+                } else if (el.firstChild) {
+                    el.firstChild.attr('dir', null);
+                }
+
                 el.unwrap();
             }
         });

diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss
index c4b0e2e8958635b15aec5ff66c288d642f0f0108..c79671d76467a4baf3b8edcab39598a769b996ce 100644 (file)
--- a/resources/sass/_codemirror.scss
+++ b/resources/sass/_codemirror.scss
@@ -34,10 +34,10 @@
   align-items: center;
   justify-content: center;
   top: -1px;
-  right: -1px;
+  inset-inline-end: -1px;
   background-color: #EEE;
   border: 1px solid #DDD;
-  border-radius: 0 4px 0 0;
+  border-start-end-radius: 4px;
   @include lightDark(background-color, #eee, #333);
   @include lightDark(border-color, #ddd, #444);
   @include lightDark(color, #444, #888);

diff --git a/resources/sass/_text.scss b/resources/sass/_text.scss
index a3e6f09ac53a7768e780d8f9c8a358930841fed5..9f367984ad57eeb805297ea688efcb7072ce9c48 100644 (file)
--- a/resources/sass/_text.scss
+++ b/resources/sass/_text.scss
@@ -182,7 +182,7 @@ pre {
   @include lightDark(background-color, #FFF, #2B2B2B);
   @include lightDark(border-color, #DDD, #111);
   border-radius: 4px;
-  padding-left: 26px;
+  padding-inline-start: 26px;
   position: relative;
   padding-top: 3px;
   padding-bottom: 3px;
@@ -192,10 +192,10 @@ pre {
     position: absolute;
     top: 0;
     width: 22.4px;
-    left: 0;
+    inset-inline-start: 0;
     height: 100%;
     @include lightDark(background-color, #f5f5f5, #313335);
-    @include lightDark(border-right, 1px solid #DDD, none);
+    @include lightDark(border-inline-end, 1px solid #DDD, none);
   }
 }