feat: highlithg sql in notes, history and console

This commit is contained in:
Fabio Di Stasio 2023-12-22 18:06:27 +01:00
parent 08e5a13f72
commit bfa3924d57
8 changed files with 82 additions and 10 deletions

21
package-lock.json generated
View File

@ -39,6 +39,7 @@
"source-map-support": "~0.5.20", "source-map-support": "~0.5.20",
"spectre.css": "~0.5.9", "spectre.css": "~0.5.9",
"sql-formatter": "~13.0.0", "sql-formatter": "~13.0.0",
"sql-highlight": "~4.4.0",
"v-mask": "~2.3.0", "v-mask": "~2.3.0",
"vue": "~3.3.4", "vue": "~3.3.4",
"vue-i18n": "~9.2.2", "vue-i18n": "~9.2.2",
@ -14252,6 +14253,21 @@
"sql-formatter": "bin/sql-formatter-cli.cjs" "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": { "node_modules/sqlstring": {
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz", "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",
@ -27952,6 +27968,11 @@
"nearley": "^2.20.1" "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": { "sqlstring": {
"version": "2.3.3", "version": "2.3.3",
"resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz", "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.3.tgz",

View File

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

View File

@ -75,7 +75,7 @@
<code <code
class="cut-text" class="cut-text"
:title="query.sql" :title="query.sql"
v-html="highlightWord(query.sql)" v-html="highlight(highlightWord(query.sql), {html: true})"
/> />
</div> </div>
<div class="tile-bottom-content"> <div class="tile-bottom-content">
@ -126,7 +126,19 @@
<script setup lang="ts"> <script setup lang="ts">
import { ConnectionParams } from 'common/interfaces/antares'; 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 { useI18n } from 'vue-i18n';
import BaseIcon from '@/components/BaseIcon.vue'; import BaseIcon from '@/components/BaseIcon.vue';

View File

@ -43,7 +43,11 @@
</div> </div>
</div> </div>
<div class="form-group"> <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 <BaseTextEditor
v-model="localNote.note" v-model="localNote.note"
:mode="editorMode" :mode="editorMode"
@ -110,7 +114,7 @@ watch(() => localNote.value.type, () => {
}); });
onBeforeMount(() => { onBeforeMount(() => {
localNote.value = props.note; localNote.value = JSON.parse(JSON.stringify(props.note));
}); });
</script> </script>

View File

@ -43,7 +43,11 @@
</div> </div>
</div> </div>
<div class="form-group"> <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 <BaseTextEditor
v-model="newNote.note" v-model="newNote.note"
:mode="editorMode" :mode="editorMode"

View File

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

View File

@ -24,7 +24,7 @@
tabindex="0" tabindex="0"
@contextmenu.prevent="contextMenu($event, wLog)" @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> </div>
</div> </div>
@ -47,6 +47,7 @@
<script setup lang="ts"> <script setup lang="ts">
import * as moment from 'moment'; import * as moment from 'moment';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { highlight } from 'sql-highlight';
import { computed, nextTick, onMounted, Ref, ref, watch } from 'vue'; import { computed, nextTick, onMounted, Ref, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';

View File

@ -1,4 +1,4 @@
/* stylelint-disable selector-class-pattern */ /* stylelint-disable */
@import "~spectre.css/src/variables"; @import "~spectre.css/src/variables";
@import "variables"; @import "variables";
@import "transitions"; @import "transitions";
@ -109,7 +109,6 @@ option:checked {
> div { > div {
padding: 0.1rem 0.2rem; padding: 0.1rem 0.2rem;
/* stylelint-disable-next-line value-no-vendor-prefix */
min-width: -webkit-fill-available; 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;
}