Made the "Custom HTML Head Content" setting a highlighted code editor

This commit is contained in:
Dan Brown 2022-05-17 17:39:31 +01:00
parent cb1c2db282
commit 4759fa1e1f
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
4 changed files with 40 additions and 1 deletions

View File

@ -242,6 +242,21 @@ export function popupEditor(elem, modeSuggestion) {
}); });
} }
/**
* Create an inline editor to replace the given textarea.
* @param {HTMLTextAreaElement} textArea
* @param {String} mode
* @returns {CodeMirror3}
*/
export function inlineEditor(textArea, mode) {
return CodeMirror.fromTextArea(textArea, {
mode: getMode(mode, textArea.value),
lineNumbers: true,
lineWrapping: false,
theme: getTheme(),
});
}
/** /**
* Set the mode of a codemirror instance. * Set the mode of a codemirror instance.
* @param cmInstance * @param cmInstance

View File

@ -0,0 +1,16 @@
/**
* A simple component to render a code editor within the textarea
* this exists upon.
* @extends {Component}
*/
class CodeTextarea {
async setup() {
const mode = this.$opts.mode;
const Code = await window.importVersioned('code');
Code.inlineEditor(this.$el, mode);
}
}
export default CodeTextarea;

View File

@ -9,6 +9,7 @@ import bookSort from "./book-sort.js"
import chapterToggle from "./chapter-toggle.js" import chapterToggle from "./chapter-toggle.js"
import codeEditor from "./code-editor.js" import codeEditor from "./code-editor.js"
import codeHighlighter from "./code-highlighter.js" import codeHighlighter from "./code-highlighter.js"
import codeTextarea from "./code-textarea.js"
import collapsible from "./collapsible.js" import collapsible from "./collapsible.js"
import confirmDialog from "./confirm-dialog" import confirmDialog from "./confirm-dialog"
import customCheckbox from "./custom-checkbox.js" import customCheckbox from "./custom-checkbox.js"
@ -65,6 +66,7 @@ const componentMapping = {
"chapter-toggle": chapterToggle, "chapter-toggle": chapterToggle,
"code-editor": codeEditor, "code-editor": codeEditor,
"code-highlighter": codeHighlighter, "code-highlighter": codeHighlighter,
"code-textarea": codeTextarea,
"collapsible": collapsible, "collapsible": collapsible,
"confirm-dialog": confirmDialog, "confirm-dialog": confirmDialog,
"custom-checkbox": customCheckbox, "custom-checkbox": customCheckbox,

View File

@ -119,7 +119,13 @@
<div> <div>
<label for="setting-app-custom-head" class="setting-list-label">{{ trans('settings.app_custom_html') }}</label> <label for="setting-app-custom-head" class="setting-list-label">{{ trans('settings.app_custom_html') }}</label>
<p class="small">{{ trans('settings.app_custom_html_desc') }}</p> <p class="small">{{ trans('settings.app_custom_html_desc') }}</p>
<textarea name="setting-app-custom-head" id="setting-app-custom-head" class="simple-code-input mt-m">{{ setting('app-custom-head', '') }}</textarea> <div class="mt-m">
<textarea component="code-textarea"
option:code-textarea:mode="html"
name="setting-app-custom-head"
id="setting-app-custom-head"
class="simple-code-input">{{ setting('app-custom-head', '') }}</textarea>
</div>
<p class="small text-right">{{ trans('settings.app_custom_html_disabled_notice') }}</p> <p class="small text-right">{{ trans('settings.app_custom_html_disabled_notice') }}</p>
</div> </div>