github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-14 07:52:52 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

WYSIWYG: Added text direction support for code editor popup

Browse Source 
Editor popup will now reflect the direction of the opened code block.
This also updates in-editor codemirror instances to correcly reflect/use
the direction if set on the inner code elem.

This also defaults new code blocks, when in RTL languages, to be started
in LTR, which can then be changed via in-editor direction controls if
needed. This is on the assumption that most code will be LTR (could not
find much examples of RTL code use).

Fixes #4943
This commit is contained in:
Dan Brown
2024-05-03 13:35:30 +01:00
parent 4c1c315594
commit f9e087330b
4 changed files with 43 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
resources/js/wysiwyg/plugin-codeeditor.js
View File

@ -6,13 +6,14 @@ function elemIsCodeBlock(elem) {
* @param {Editor} editor
* @param {String} code
* @param {String} language
* @param {String} direction
* @param {function(string, string)} callback (Receives (code: string,language: string)
*/
function showPopup(editor, code, language, callback) {
function showPopup(editor, code, language, direction, callback) {
/** @var {CodeEditor} codeEditor * */
const codeEditor = window.$components.first('code-editor');
const bookMark = editor.selection.getBookmark();
codeEditor.open(code, language, (newCode, newLang) => {
codeEditor.open(code, language, direction, (newCode, newLang) => {
callback(newCode, newLang);
editor.focus();
editor.selection.moveToBookmark(bookMark);
@ -27,7 +28,8 @@ function showPopup(editor, code, language, callback) {
* @param {CodeBlockElement} codeBlock
*/
function showPopupForCodeBlock(editor, codeBlock) {
showPopup(editor, codeBlock.getContent(), codeBlock.getLanguage(), (newCode, newLang) => {
const direction = codeBlock.getAttribute('dir') || '';
showPopup(editor, codeBlock.getContent(), codeBlock.getLanguage(), direction, (newCode, newLang) => {
codeBlock.setContent(newCode, newLang);
});
}
@ -179,13 +181,17 @@ function register(editor) {
showPopupForCodeBlock(editor, selectedNode);
} else {
const textContent = editor.selection.getContent({format: 'text'});
showPopup(editor, textContent, '', (newCode, newLang) => {
const direction = document.dir === 'rtl' ? 'ltr' : '';
showPopup(editor, textContent, '', direction, (newCode, newLang) => {
const pre = doc.createElement('pre');
const code = doc.createElement('code');
code.classList.add(`language-${newLang}`);
code.innerText = newCode;
pre.append(code);
if (direction) {
pre.setAttribute('dir', direction);
}
pre.append(code);
editor.insertContent(pre.outerHTML);
});
}
@ -205,7 +211,8 @@ function register(editor) {
contenteditable: 'false',
});
const direction = el.attr('dir');
const childCodeBlock = el.children().filter(child => child.name === 'code')[0] || null;
const direction = el.attr('dir') || (childCodeBlock && childCodeBlock.attr('dir')) || '';
if (direction) {
wrapper.attr('dir', direction);
}