Merge pull request #3512 from BookStackApp/code_manager_updates
WYSIWYG Code Editor Updates
This commit is contained in:
Dan Brown
GitHub
commit
df94b73e29
|
|
@ -50,16 +50,18 @@ const modeMap = {
|
|||
diff: 'diff',
|
||||
for: 'fortran',
|
||||
fortran: 'fortran',
|
||||
'f#': 'text/x-fsharp',
|
||||
fsharp: 'text/x-fsharp',
|
||||
go: 'go',
|
||||
haskell: 'haskell',
|
||||
hs: 'haskell',
|
||||
html: 'htmlmixed',
|
||||
ini: 'properties',
|
||||
javascript: 'javascript',
|
||||
json: {name: 'javascript', json: true},
|
||||
js: 'javascript',
|
||||
jl: 'julia',
|
||||
julia: 'julia',
|
||||
javascript: 'text/javascript',
|
||||
json: 'application/json',
|
||||
js: 'text/javascript',
|
||||
jl: 'text/x-julia',
|
||||
julia: 'text/x-julia',
|
||||
latex: 'text/x-stex',
|
||||
lua: 'lua',
|
||||
md: 'markdown',
|
||||
|
|
@ -71,7 +73,7 @@ const modeMap = {
|
|||
pl: 'perl',
|
||||
powershell: 'powershell',
|
||||
properties: 'properties',
|
||||
ocaml: 'mllike',
|
||||
ocaml: 'text/x-ocaml',
|
||||
pascal: 'text/x-pascal',
|
||||
pas: 'text/x-pascal',
|
||||
php: (content) => {
|
||||
|
|
@ -88,6 +90,8 @@ const modeMap = {
|
|||
stext: 'text/x-stex',
|
||||
bash: 'shell',
|
||||
toml: 'toml',
|
||||
ts: 'text/typescript',
|
||||
typescript: 'text/typescript',
|
||||
sql: 'text/x-sql',
|
||||
vbs: 'vbscript',
|
||||
vbscript: 'vbscript',
|
||||
|
|
|
|||
|
|
@ -33,10 +33,11 @@ class CodeEditor {
|
|||
onSelect(this.languageLinks, event => {
|
||||
const language = event.target.dataset.lang;
|
||||
this.languageInput.value = language;
|
||||
this.updateEditorMode(language);
|
||||
this.languageInputChange(language);
|
||||
});
|
||||
|
||||
onEnterPress(this.languageInput, e => this.save());
|
||||
this.languageInput.addEventListener('input', e => this.languageInputChange(this.languageInput.value));
|
||||
onSelect(this.saveButton, e => this.save());
|
||||
|
||||
onChildEvent(this.historyList, 'button', 'click', (event, elem) => {
|
||||
|
|
@ -60,7 +61,7 @@ class CodeEditor {
|
|||
this.callback = callback;
|
||||
|
||||
this.show()
|
||||
.then(() => this.updateEditorMode(language))
|
||||
.then(() => this.languageInputChange(language))
|
||||
.then(() => window.importVersioned('code'))
|
||||
.then(Code => Code.setContent(this.editor, code));
|
||||
}
|
||||
|
|
@ -90,6 +91,22 @@ class CodeEditor {
|
|||
Code.setMode(this.editor, language, this.editor.getValue());
|
||||
}
|
||||
|
||||
languageInputChange(language) {
|
||||
this.updateEditorMode(language);
|
||||
const inputLang = language.toLowerCase();
|
||||
let matched = false;
|
||||
|
||||
for (const link of this.languageLinks) {
|
||||
const lang = link.dataset.lang.toLowerCase().trim();
|
||||
const isMatch = inputLang && lang.startsWith(inputLang);
|
||||
link.classList.toggle('active', isMatch);
|
||||
if (isMatch && !matched) {
|
||||
link.scrollIntoView({block: "center", behavior: "smooth"});
|
||||
matched = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loadHistory() {
|
||||
this.history = JSON.parse(window.sessionStorage.getItem(this.historyKey) || '{}');
|
||||
const historyKeys = Object.keys(this.history).reverse();
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
// System wide notifications
|
||||
[notification] {
|
||||
position: fixed;
|
||||
|
|
@ -137,35 +138,54 @@
|
|||
}
|
||||
}
|
||||
|
||||
.popup-footer button, .popup-header-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
.popup-header button, .popup-footer button {
|
||||
margin: 0;
|
||||
height: 40px;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
&:active {
|
||||
outline: 0;
|
||||
color: #FFF;
|
||||
padding: $-xs $-m;
|
||||
}
|
||||
|
||||
.popup-header button:not(.popup-header-close) {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.popup-header button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
justify-content: end;
|
||||
background-color: var(--color-primary-light);
|
||||
min-height: 41px;
|
||||
button {
|
||||
padding: 10px $-m;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-header-close {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: #FFF;
|
||||
font-size: 16px;
|
||||
padding: 0 $-m;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-header, .popup-footer {
|
||||
display: block !important;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 40px;
|
||||
flex: none !important;
|
||||
flex: 0;
|
||||
.popup-title {
|
||||
color: #FFF;
|
||||
margin-right: auto;
|
||||
padding: 8px $-m;
|
||||
}
|
||||
&.flex-container-row {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
height: 444px;
|
||||
|
|
@ -298,12 +318,6 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
}
|
||||
}
|
||||
|
||||
.image-manager .corner-button {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
padding: $-m;
|
||||
}
|
||||
|
||||
// Dropzone
|
||||
/*
|
||||
* The MIT License
|
||||
|
|
@ -630,24 +644,76 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
|||
}
|
||||
|
||||
.code-editor .CodeMirror {
|
||||
height: 400px;
|
||||
height: auto;
|
||||
min-height: 50vh;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.code-editor .lang-options {
|
||||
max-width: 540px;
|
||||
margin-bottom: $-s;
|
||||
a {
|
||||
margin-inline-end: $-xs;
|
||||
text-decoration: underline;
|
||||
overflow-y: scroll;
|
||||
flex-basis: 200px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.code-editor .lang-options button {
|
||||
display: block;
|
||||
padding: $-xs $-m;
|
||||
border-bottom: 1px solid;
|
||||
@include lightDark(color, #333, #AAA);
|
||||
@include lightDark(border-bottom-color, #EEE, #000);
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-family: $mono;
|
||||
font-size: 0.7rem;
|
||||
&:hover, &.active {
|
||||
background-color: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@include smaller-than($m) {
|
||||
.code-editor .lang-options {
|
||||
.code-editor label {
|
||||
background-color: var(--color-primary-light);
|
||||
width: 100%;
|
||||
color: var(--color-primary);
|
||||
padding: $-xxs $-m;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.code-editor-language-list {
|
||||
position: relative;
|
||||
width: 160px;
|
||||
z-index: 2;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.code-editor-language-list input {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DDD;
|
||||
padding: $-xs $-m;
|
||||
}
|
||||
|
||||
.code-editor-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
.CodeMirror {
|
||||
margin-bottom: 0;
|
||||
z-index: 1;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.code-editor .CodeMirror {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
@include smaller-than($s) {
|
||||
.code-editor .lang-options {
|
||||
display: none;
|
||||
}
|
||||
.code-editor-body-wrap {
|
||||
flex-direction: column;
|
||||
}
|
||||
.code-editor-language-list, .code-editor-language-list input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
<div class="popup-header primary-background">
|
||||
<div class="popup-title">{{ $title }}</div>
|
||||
<button refs="popup@hide" type="button" class="popup-header-close">x</button>
|
||||
<button refs="popup@hide" type="button" class="popup-header-close">@icon('close')</button>
|
||||
</div>
|
||||
|
||||
<div class="px-m py-m">
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<div class="popup-body small" tabindex="-1">
|
||||
<div class="popup-header primary-background">
|
||||
<div class="popup-title">{{ trans('entities.entity_select') }}</div>
|
||||
<button refs="popup@hide" type="button" class="popup-header-close">x</button>
|
||||
<button refs="popup@hide" type="button" class="popup-header-close">@icon('close')</button>
|
||||
</div>
|
||||
@include('entities.selector', ['name' => 'entity-selector'])
|
||||
<div class="popup-footer">
|
||||
<button refs="entity-selector-popup@select" type="button" disabled="true" class="button corner-button">{{ trans('common.select') }}</button>
|
||||
<button refs="entity-selector-popup@select" type="button" disabled="true" class="button">{{ trans('common.select') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,69 +2,69 @@
|
|||
<div components="popup code-editor" class="popup-background code-editor">
|
||||
<div refs="code-editor@container" class="popup-body" tabindex="-1">
|
||||
|
||||
<div class="popup-header primary-background">
|
||||
<div class="popup-header flex-container-row primary-background">
|
||||
<div class="popup-title">{{ trans('components.code_editor') }}</div>
|
||||
<button class="popup-header-close" refs="popup@hide">x</button>
|
||||
<div component="dropdown" refs="code-editor@historyDropDown" class="flex-container-row">
|
||||
<button refs="dropdown@toggle">
|
||||
<span>@icon('history')</span>
|
||||
<span>{{ trans('components.code_session_history') }}</span>
|
||||
</button>
|
||||
<ul refs="dropdown@menu code-editor@historyList" class="dropdown-menu"></ul>
|
||||
</div>
|
||||
<button class="popup-header-close" refs="popup@hide">@icon('close')</button>
|
||||
</div>
|
||||
|
||||
<div class="p-l popup-content">
|
||||
<div class="form-group">
|
||||
<div class="code-editor-body-wrap flex-container-row flex-fill">
|
||||
<div class="code-editor-language-list flex-container-column flex-fill">
|
||||
<label for="code-editor-language">{{ trans('components.code_language') }}</label>
|
||||
<div class="lang-options">
|
||||
<small>
|
||||
<a refs="code-editor@languageLink" data-lang="CSS">CSS</a>
|
||||
<a refs="code-editor@languageLink" data-lang="C">C</a>
|
||||
<a refs="code-editor@languageLink" data-lang="C++">C++</a>
|
||||
<a refs="code-editor@languageLink" data-lang="C#">C#</a>
|
||||
<a refs="code-editor@languageLink" data-lang="Fortran">Fortran</a>
|
||||
<a refs="code-editor@languageLink" data-lang="Go">Go</a>
|
||||
<a refs="code-editor@languageLink" data-lang="HTML">HTML</a>
|
||||
<a refs="code-editor@languageLink" data-lang="INI">INI</a>
|
||||
<a refs="code-editor@languageLink" data-lang="Java">Java</a>
|
||||
<a refs="code-editor@languageLink" data-lang="JavaScript">JavaScript</a>
|
||||
<a refs="code-editor@languageLink" data-lang="JSON">JSON</a>
|
||||
<a refs="code-editor@languageLink" data-lang="LaTeX">LaTeX</a>
|
||||
<a refs="code-editor@languageLink" data-lang="Lua">Lua</a>
|
||||
<a refs="code-editor@languageLink" data-lang="MarkDown">MarkDown</a>
|
||||
<a refs="code-editor@languageLink" data-lang="Nginx">Nginx</a>
|
||||
<a refs="code-editor@languageLink" data-lang="PASCAL">Pascal</a>
|
||||
<a refs="code-editor@languageLink" data-lang="Perl">Perl</a>
|
||||
<a refs="code-editor@languageLink" data-lang="PHP">PHP</a>
|
||||
<a refs="code-editor@languageLink" data-lang="Powershell">Powershell</a>
|
||||
<a refs="code-editor@languageLink" data-lang="Python">Python</a>
|
||||
<a refs="code-editor@languageLink" data-lang="Ruby">Ruby</a>
|
||||
<a refs="code-editor@languageLink" data-lang="shell">Shell/Bash</a>
|
||||
<a refs="code-editor@languageLink" data-lang="SQL">SQL</a>
|
||||
<a refs="code-editor@languageLink" data-lang="VBScript">VBScript</a>
|
||||
<a refs="code-editor@languageLink" data-lang="VB.NET">VB.NET</a>
|
||||
<a refs="code-editor@languageLink" data-lang="XML">XML</a>
|
||||
<a refs="code-editor@languageLink" data-lang="YAML">YAML</a>
|
||||
</small>
|
||||
</div>
|
||||
<input refs="code-editor@languageInput" id="code-editor-language" type="text">
|
||||
<div class="lang-options">
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="CSS">CSS</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="C">C</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="C++">C++</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="C#">C#</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="diff">Diff</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="Fortran">Fortran</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="F#">F#</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="Go">Go</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="Haskell">Haskell</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="HTML">HTML</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="INI">INI</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="Java">Java</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="JavaScript">JavaScript</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="JSON">JSON</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="Julia">Julia</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="kotlin">Kotlin</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="LaTeX">LaTeX</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="Lua">Lua</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="MarkDown">MarkDown</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="Nginx">Nginx</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="ocaml">OCaml</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="PASCAL">Pascal</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="Perl">Perl</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="PHP">PHP</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="Powershell">Powershell</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="Python">Python</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="Ruby">Ruby</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="rust">Rust</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="shell">Shell/Bash</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="SQL">SQL</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="typescript">TypeScript</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="VBScript">VBScript</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="VB.NET">VB.NET</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="XML">XML</button>
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="YAML">YAML</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="grid half no-break v-end mb-xs">
|
||||
<div>
|
||||
<label for="code-editor-content">{{ trans('components.code_content') }}</label>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div component="dropdown" refs="code-editor@historyDropDown" class="inline block">
|
||||
<button refs="dropdown@toggle" class="text-button text-small">@icon('history') {{ trans('components.code_session_history') }}</button>
|
||||
<ul refs="dropdown@menu code-editor@historyList" class="dropdown-menu"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
<div class="code-editor-main flex-fill">
|
||||
<textarea refs="code-editor@editor"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button refs="code-editor@saveButton" type="button" class="button">{{ trans('components.code_save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popup-footer">
|
||||
<button refs="code-editor@saveButton" type="button" class="button">{{ trans('components.code_save') }}</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
<div class="popup-header primary-background">
|
||||
<div class="popup-title">{{ trans('components.image_select') }}</div>
|
||||
<button refs="popup@hide" type="button" class="popup-header-close">x</button>
|
||||
<button refs="popup@hide" type="button" class="popup-header-close">@icon('close')</button>
|
||||
</div>
|
||||
|
||||
<div class="flex-fill image-manager-body">
|
||||
|
|
@ -53,14 +53,16 @@
|
|||
</div>
|
||||
|
||||
<div refs="image-manager@formContainer" class="inner flex"></div>
|
||||
|
||||
<button refs="image-manager@selectButton" type="button" class="hidden button corner-button">
|
||||
{{ trans('components.image_select_image') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="popup-footer">
|
||||
<button refs="image-manager@selectButton" type="button" class="hidden button">
|
||||
{{ trans('components.image_select_image') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue