mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-11-23 19:32:29 +01:00
Started code-editor lang favorites system
- Split bash from shell in language list - Updated code-lang highlighting to be exact match only to prevent confusion scenarios (Java matching JavaScript, etc..) - Added design for favorites - Changed blade language list to be generated from array.
This commit is contained in:
Dan Brown
parent
da6169159d
commit
ebc5a53410
@ -39,6 +39,7 @@ import 'codemirror/addon/scroll/scrollpastend';
|
||||
// Value can be a mode string or a function that will receive the code content & return the mode string.
|
||||
// The function option is used in the event the exact mode could be dynamic depending on the code.
|
||||
const modeMap = {
|
||||
bash: 'shell',
|
||||
css: 'css',
|
||||
c: 'text/x-csrc',
|
||||
java: 'text/x-java',
|
||||
@ -88,7 +89,6 @@ const modeMap = {
|
||||
shell: 'shell',
|
||||
sh: 'shell',
|
||||
stext: 'text/x-stex',
|
||||
bash: 'shell',
|
||||
toml: 'toml',
|
||||
ts: 'text/typescript',
|
||||
typescript: 'text/typescript',
|
||||
|
||||
@ -94,15 +94,13 @@ class CodeEditor {
|
||||
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);
|
||||
const isMatch = inputLang === lang;
|
||||
link.classList.toggle('active', isMatch);
|
||||
if (isMatch && !matched) {
|
||||
if (isMatch) {
|
||||
link.scrollIntoView({block: "center", behavior: "smooth"});
|
||||
matched = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -666,12 +666,29 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
|
||||
text-align: left;
|
||||
font-family: $mono;
|
||||
font-size: 0.7rem;
|
||||
padding-right: 24px + $-m;
|
||||
&:hover, &.active {
|
||||
background-color: var(--color-primary-light);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.code-editor button.lang-option-favorite-toggle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 28px;
|
||||
font-size: 1rem;
|
||||
border: 0;
|
||||
line-height: 1;
|
||||
padding: 2px;
|
||||
z-index: 2;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
svg {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.code-editor label {
|
||||
background-color: var(--color-primary-light);
|
||||
width: 100%;
|
||||
|
||||
@ -19,41 +19,24 @@
|
||||
<label for="code-editor-language">{{ trans('components.code_language') }}</label>
|
||||
<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>
|
||||
@php
|
||||
$languages = [
|
||||
'Bash', 'CSS', 'C', 'C++', 'C#', 'Diff', 'Fortran', 'F#', 'Go', 'Haskell', 'HTML', 'INI',
|
||||
'Java', 'JavaScript', 'JSON', 'Julia', 'Kotlin', 'LaTeX', 'Lua', 'MarkDown', 'Nginx', 'OCaml',
|
||||
'Pascal', 'Perl', 'PHP', 'Powershell', 'Python', 'Ruby', 'Rust', 'Shell', 'SQL', 'TypeScript',
|
||||
'VBScript', 'VB.NET', 'XML', 'YAML',
|
||||
];
|
||||
@endphp
|
||||
|
||||
@foreach($languages as $language)
|
||||
<div class="relative">
|
||||
<button type="button" refs="code-editor@languageLink" data-lang="{{ strtolower($language) }}">{{ $language }}</button>
|
||||
<button class="lang-option-favorite-toggle" title="{{ trans('common.favourite') }}" data-alt-title="{{ trans('common.unfavourite') }}">
|
||||
<div class="pre-favorite">@icon('star-outline')</div>
|
||||
<div class="post-favorite" style="display: none;">@icon('star')</div>
|
||||
</button>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user