From 999d41a7f5455f4c7f9f175b5718d82ee529df2b Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 18 Feb 2024 17:55:56 +0000
Subject: [PATCH] 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
---
 resources/js/code/index.mjs               |  7 ++++++-
 resources/js/wysiwyg/plugin-codeeditor.js | 12 ++++++++++++
 resources/sass/_codemirror.scss           |  4 ++--
 resources/sass/_text.scss                 |  6 +++---
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/resources/js/code/index.mjs b/resources/js/code/index.mjs
index ada4529db..d92a9ba26 100644
--- 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 2fe2ac26a..f86760214 100644
--- 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 c4b0e2e89..c79671d76 100644
--- 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 a3e6f09ac..9f367984a 100644
--- 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);
   }
 }