[frontend] Fix the SqlText Vue component and add option to format
</template>
<script lang="ts">
+ import { formatSql } from 'apps/notebook2/apiUtils';
import $ from 'jquery';
import Vue from 'vue';
import Component from 'vue-class-component';
@Prop({ required: false })
value = '';
@Prop({ required: false })
- formatted = false;
+ format = false;
@Prop({ required: false })
enableOverflow = false;
@Prop({ required: false })
splitLines = false;
@Watch('value')
- renderAce(): void {
- if (this.value) {
+ async renderAce(): Promise<void> {
+ if (!this.value) {
+ return;
+ }
const ace = getAce();
const impalaRules = ace.require('ace/mode/impala_highlight_rules');
const hiveRules = ace.require('ace/mode/hive_highlight_rules');
const Tokenizer = tokenizer.Tokenizer;
const Rules =
- this.dialect === 'impala'
- ? impalaRules.ImpalaHighlightRules
- : hiveRules.HiveHighlightRules;
+ this.dialect === 'impala' ? impalaRules.ImpalaHighlightRules : hiveRules.HiveHighlightRules;
const res: string[] = [];
const Text = text.Text;
const tok = new Tokenizer(new Rules().getRules());
- const lines = this.value.split('\n');
+
+ let editorText = this.value;
+ if (this.format) {
+ editorText = await formatSql({ statements: this.value, silenceErrors: true });
+ }
+ const lines = editorText.split('\n');
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const renderSimpleLine = (txt: any, stringBuilder: string[], tokens: any[]) => {
}
};
- let additionalClass = '';
- if (!this.splitLines && !this.formatted) {
+ let additionalClass = 'pull-left';
+ if (!this.splitLines && !this.format) {
additionalClass = 'pull-left';
- } else if (this.formatted) {
+ } else if (this.format) {
additionalClass = 'ace-highlight-pre';
}
const tokens = tok.getLineTokens(line);
if (tokens && tokens.tokens.length) {
- renderSimpleLine(
- new Text(document.createElement('div')),
- renderedTokens,
- tokens.tokens
- );
+ renderSimpleLine(new Text(document.createElement('div')), renderedTokens, tokens.tokens);
}
res.push(
);
});
- const element = this.$el.firstElementChild;
- if (!element) {
- return;
- }
- element.innerHTML =
+ this.$el.innerHTML =
'<div class="ace_editor ace-hue"' +
(this.enableOverflow ? ' style="overflow: initial !important;"' : '') +
'><div class="ace_layer" style="position: static;' +
res.join('') +
'</div></div>';
if (this.enableOverflow) {
- $(element).css({ overflow: 'auto' });
- }
- $(element).find('.ace_invisible_space').remove();
+ $(this.$el).css({ overflow: 'auto' });
}
+ $(this.$el).find('.ace_invisible_space').remove();
}
mounted(): void {
