Merge pull request #3512 from BookStackApp/code_manager_updates

WYSIWYG Code Editor Updates

resources/js/code.mjs

@@ -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',
+    javascript: 'text/javascript',
-    json: {name: 'javascript', json: true},
+    json: 'application/json',
-    js: 'javascript',
+    js: 'text/javascript',
-    jl: 'julia',
+    jl: 'text/x-julia',
-    julia: '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',

resources/js/components/code-editor.js

@@ -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();

resources/sass/_components.scss

@@ -1,3 +1,4 @@
+
 // System wide notifications
 [notification] {
   position: fixed;
@@ -137,35 +138,54 @@
   }
 }
 
-.popup-footer button, .popup-header-close {
+.popup-header button, .popup-footer button {
-  position: absolute;
-  top: 0;
-  right: 0;
   margin: 0;
-  height: 40px;
   border-radius: 0;
   box-shadow: none;
-  &:active {
+  color: #FFF;
-    outline: 0;
+  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;
+  overflow-y: scroll;
-  margin-bottom: $-s;
+  flex-basis: 200px;
-  a {
+  flex-grow: 1;
-    margin-inline-end: $-xs;
+}
-    text-decoration: underline;
+
+.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 label {
-  .code-editor .lang-options {
+  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%;
   }
 }
 

resources/views/common/confirm-dialog.blade.php

@@ -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">

resources/views/entities/selector-popup.blade.php

@@ -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>

resources/views/pages/parts/code-editor.blade.php

@@ -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="code-editor-body-wrap flex-container-row flex-fill">
-                <div class="form-group">
+                <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="code-editor-main flex-fill">
-                    <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>
                     <textarea refs="code-editor@editor"></textarea>
                 </div>
 
-                <div class="form-group">
+            </div>
-                    <button refs="code-editor@saveButton" type="button" class="button">{{ trans('components.code_save') }}</button>
-                </div>
 
+            <div class="popup-footer">
+                <button refs="code-editor@saveButton" type="button" class="button">{{ trans('components.code_save') }}</button>
             </div>
 
         </div>

resources/views/pages/parts/image-manager.blade.php

@@ -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>