feat: highlithg sql in notes, history and console

package-lock.json

@@ -39,6 +39,7 @@
         "source-map-support": "~0.5.20",
         "spectre.css": "~0.5.9",
         "sql-formatter": "~13.0.0",
+        "sql-highlight": "~4.4.0",
         "v-mask": "~2.3.0",
         "vue": "~3.3.4",
         "vue-i18n": "~9.2.2",
@@ -14252,6 +14253,21 @@
         "sql-formatter": "bin/sql-formatter-cli.cjs"
       }
     },
+    "node_modules/sql-highlight": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/sql-highlight/-/sql-highlight-4.4.0.tgz",
+      "integrity": "sha512-/DeHb9IkH7Le5PDOXaF3+QuclZTvzEo7H99o7qlTncPJCpCZEBBGqmreIv7tRVIofoXA+2gRl2an6bzk/n2jNA==",
+      "funding": [
+        "https://github.com/scriptcoded/sql-highlight?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/scriptcoded"
+        }
+      ],
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/sqlstring": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
@@ -27952,6 +27968,11 @@
         "nearley": "^2.20.1"
       }
     },
+    "sql-highlight": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/sql-highlight/-/sql-highlight-4.4.0.tgz",
+      "integrity": "sha512-/DeHb9IkH7Le5PDOXaF3+QuclZTvzEo7H99o7qlTncPJCpCZEBBGqmreIv7tRVIofoXA+2gRl2an6bzk/n2jNA=="
+    },
     "sqlstring": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",

package.json

@@ -147,6 +147,7 @@
     "source-map-support": "~0.5.20",
     "spectre.css": "~0.5.9",
     "sql-formatter": "~13.0.0",
+    "sql-highlight": "~4.4.0",
     "v-mask": "~2.3.0",
     "vue": "~3.3.4",
     "vue-i18n": "~9.2.2",

src/renderer/components/ModalHistory.vue

@@ -75,7 +75,7 @@
                                     <code
                                        class="cut-text"
                                        :title="query.sql"
-                                       v-html="highlightWord(query.sql)"
+                                       v-html="highlight(highlightWord(query.sql), {html: true})"
                                     />
                                  </div>
                                  <div class="tile-bottom-content">
@@ -126,7 +126,19 @@
 
 <script setup lang="ts">
 import { ConnectionParams } from 'common/interfaces/antares';
-import { Component, computed, ComputedRef, onBeforeUnmount, onMounted, onUpdated, Prop, Ref, ref, watch } from 'vue';
+import { highlight } from 'sql-highlight';
+import {
+   Component,
+   computed,
+   ComputedRef,
+   onBeforeUnmount,
+   onMounted,
+   onUpdated,
+   Prop,
+   Ref,
+   ref,
+   watch
+} from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import BaseIcon from '@/components/BaseIcon.vue';

src/renderer/components/ModalNoteEdit.vue

@@ -43,7 +43,11 @@
                </div>
             </div>
             <div class="form-group">
-               <label class="form-label">{{ t('general.content') }}</label>
+               <label class="form-label">{{ t('general.content') }} <small
+                  v-if="localNote.type !== 'query'"
+                  style="line-height: 1;"
+                  class="text-gray"
+               >({{ t('application.markdownSupported') }})</small></label>
                <BaseTextEditor
                   v-model="localNote.note"
                   :mode="editorMode"
@@ -110,7 +114,7 @@ watch(() => localNote.value.type, () => {
 });
 
 onBeforeMount(() => {
-   localNote.value = props.note;
+   localNote.value = JSON.parse(JSON.stringify(props.note));
 });
 
 </script>

src/renderer/components/ModalNoteNew.vue

@@ -43,7 +43,11 @@
                </div>
             </div>
             <div class="form-group">
-               <label class="form-label">{{ t('general.content') }}</label>
+               <label class="form-label">{{ t('general.content') }} <small
+                  v-if="newNote.type !== 'query'"
+                  style="line-height: 1;"
+                  class="text-gray"
+               >({{ t('application.markdownSupported') }})</small></label>
                <BaseTextEditor
                   v-model="newNote.note"
                   :mode="editorMode"

src/renderer/components/ScratchpadNote.vue

@@ -31,8 +31,8 @@
             <code
                v-if="note.type === 'query'"
                ref="noteParagraph"
-               class="tile-paragraph"
+               class="tile-paragraph sql"
-               v-html="highlightWord(note.note)"
+               v-html="highlight(highlightWord(note.note), {html: true})"
             />
             <div
                v-else
@@ -104,6 +104,7 @@
 <script setup lang="ts">
 import { useElementBounding } from '@vueuse/core';
 import { marked } from 'marked';
+import { highlight } from 'sql-highlight';
 import { computed, PropType, Ref, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 

src/renderer/components/WorkspaceQueryConsole.vue

@@ -24,7 +24,7 @@
                tabindex="0"
                @contextmenu.prevent="contextMenu($event, wLog)"
             >
-               <span class="type-datetime">{{ moment(wLog.date).format('HH:mm:ss') }}</span>: <code class="query-console-log-sql">{{ wLog.sql }}</code>
+               <span class="type-datetime">{{ moment(wLog.date).format('HH:mm:ss') }}</span>: <code class="query-console-log-sql" v-html="highlight(wLog.sql, {html: true})" />
             </div>
          </div>
       </div>
@@ -47,6 +47,7 @@
 <script setup lang="ts">
 import * as moment from 'moment';
 import { storeToRefs } from 'pinia';
+import { highlight } from 'sql-highlight';
 import { computed, nextTick, onMounted, Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 

src/renderer/scss/main.scss

@@ -1,4 +1,4 @@
-/* stylelint-disable selector-class-pattern */
+/* stylelint-disable */
 @import "~spectre.css/src/variables";
 @import "variables";
 @import "transitions";
@@ -109,7 +109,6 @@ option:checked {
 
       > div {
         padding: 0.1rem 0.2rem;
-        /* stylelint-disable-next-line value-no-vendor-prefix */
         min-width: -webkit-fill-available;
       }
     }
@@ -429,3 +428,32 @@ option:checked {
     }
   }
 }
+
+/* sql-highlight */
+code.sql {
+  font-family: monospace;
+}
+
+.sql-hl-keyword {
+  color: $primary-color;
+}
+
+.sql-hl-function {
+  color: darkorchid;
+}
+
+.sql-hl-number {
+  color: $number-color;
+}
+
+.sql-hl-string {
+  color: $string-color;
+}
+
+.sql-hl-special {
+  color: goldenrod;
+}
+
+.sql-hl-bracket {
+  color: darkorchid;
+}