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.

diff --git a/resources/js/code.mjs b/resources/js/code.mjs
index 5d4186dd0527abaa4257edce8e50312bd4c65c7f..eca941f1c5c1b722593dd8b54eaca4c5dd4d5a21 100644 (file)
--- a/resources/js/code.mjs
+++ b/resources/js/code.mjs
@@ -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',

diff --git a/resources/js/components/code-editor.js b/resources/js/components/code-editor.js
index 27ff56395d1af49968014407f77c31d1b96e6c3c..7ed5a1cbe10c7ae60d93bf810d1cbc67bc8b2cac 100644 (file)
--- a/resources/js/components/code-editor.js
+++ b/resources/js/components/code-editor.js
@@ -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;
             }
         }
     }

diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 4509c2b9a4b8a610e424eddfc54493d073b509a6..9b6d624c1aad6e9e43f8f453a6b1256b1d96df5c 100644 (file)
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -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%;

diff --git a/resources/views/pages/parts/code-editor.blade.php b/resources/views/pages/parts/code-editor.blade.php
index 4ac688692ef81619dc6c6b6962fc24b217d2bdf4..93c76dc2242c9e5a32fc3305a4bd46654439d90f 100644 (file)
--- a/resources/views/pages/parts/code-editor.blade.php
+++ b/resources/views/pages/parts/code-editor.blade.php
@@ -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>