fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
package-lock.json generated
View File

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

1
package.json
View File

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

16
src/renderer/components/ModalHistory.vue
View File

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

8
src/renderer/components/ModalNoteEdit.vue
View File

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

6
src/renderer/components/ModalNoteNew.vue
View File

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

5
src/renderer/components/ScratchpadNote.vue
View File

@ -31,8 +31,8 @@
<code
v-if="note.type === 'query'"
ref="noteParagraph"
class="tile-paragraph"
v-html="highlightWord(note.note)"
class="tile-paragraph sql"
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';

3
src/renderer/components/WorkspaceQueryConsole.vue
View File

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

32
src/renderer/scss/main.scss
View File

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