mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
Made the "Custom HTML Head Content" setting a highlighted code editor
This commit is contained in:
parent
cb1c2db282
commit
4759fa1e1f
@ -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
|
||||||
|
16
resources/js/components/code-textarea.js
Normal file
16
resources/js/components/code-textarea.js
Normal 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;
|
@ -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,
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user