DeforaNetworks/corteza
DeforaNetworks/corteza
3
0
Fork 0
Code

Refactor ace editor component

Browse Source
This commit is contained in:
Kelani Tolulope 2024-04-09 14:53:40 +01:00 committed by Jože Fortun
parent d539f56406
commit ad64c547a2
19 changed files with 120 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/web/admin/package.json
View File

@ -45,7 +45,6 @@
"vue-echarts": "6.7.3",
"vue-native-websocket": "^2.0.15",
"vue-router": "3.1.5",
"vue2-brace-editor": "^2.0.2",
"vue2-dropzone": "^3.6.0",
"vuedraggable": "^2.23.2",
"vuex": "3.1.2"

31
client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue
View File

@ -214,7 +214,7 @@
<b-card
header-class="border-bottom"
body-class="p-0"
class="shadow-sm mt-3"
class="shadow-sm mt-3 overflow-hidden"
>
<template #header>
<h4 class="m-0">
@ -222,34 +222,23 @@
</h4>
</template>
<ace-editor
:font-size="14"
width="100%"
mode="json"
theme="chrome"
show-print-margin
read-only
show-gutter
highlight-active-line
<c-ace-editor
:value="request.body"
:editor-props="{
$blockScrolling: false,
}"
:set-options="{
useWorker: false,
}"
class="border-0 rounded-0"
:border="false"
lang="json"
height="400px"
show-line-numbers
read-only
/>
</b-card>
</div>
</template>
<script>
import { components } from '@cortezaproject/corteza-vue'
import { fmt, NoID } from '@cortezaproject/corteza-js'
import { Ace as AceEditor } from 'vue2-brace-editor'
import 'brace/mode/json'
import 'brace/theme/chrome'
const { CAceEditor } = components
export default {
name: 'CProfilerHitInfo',
@ -260,7 +249,7 @@ export default {
},
components: {
AceEditor,
CAceEditor,
},
props: {

29
client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
View File

@ -48,23 +48,15 @@
:label="$t('image.editor.label')"
label-class="d-flex align-items-center text-primary"
>
<ace-editor
<c-ace-editor
v-model="settings['auth.ui.styles']"
data-test-id="auth-bg-image-styling-editor"
:font-size="14"
:show-print-margin="true"
:show-gutter="true"
:highlight-active-line="true"
mode="css"
theme="chrome"
height="h-100"
name="editor/css"
:on-change="v => (settings['auth.ui.styles'] = v)"
:value="settings['auth.ui.styles']"
:editor-props="{
$blockScrolling: false
}"
lang="css"
height="300px"
font-size="14px"
show-line-numbers
class="flex-fill w-100"
style="min-height: 300px;"
/>
</b-form-group>
</b-col>
@ -84,12 +76,11 @@
</template>
<script>
import 'brace/mode/css'
import 'brace/theme/chrome'
import { Ace as AceEditor } from 'vue2-brace-editor'
import { components } from '@cortezaproject/corteza-vue'
import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
const { CAceEditor } = components
export default {
name: 'CSystemEditorAuthBgImage',
@ -100,7 +91,7 @@ export default {
components: {
CUploaderWithPreview,
AceEditor,
CAceEditor,
},
props: {

29
client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextHtml.vue
View File

@ -1,32 +1,25 @@
<template>
<ace-editor
<c-ace-editor
v-model="template.template"
data-test-id="template-html-editor"
:font-size="14"
:show-print-margin="true"
:show-gutter="true"
:highlight-active-line="true"
width="100%"
mode="html"
theme="chrome"
name="editor/html"
:on-change="(v) => template.template = v"
:value="template.template"
:editor-props="{
$blockScrolling: false,
}"
class="border-0 rounded-0"
lang="html"
height="400px"
show-line-numbers
highlight-active-line
show-print-margin
:border="false"
/>
</template>
<script>
import { Ace as AceEditor } from 'vue2-brace-editor'
import { components } from '@cortezaproject/corteza-vue'
import 'brace/mode/html'
import 'brace/theme/chrome'
const { CAceEditor } = components
export default {
components: {
AceEditor,
CAceEditor,
},
props: {

27
client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextPlain.vue
View File

@ -1,32 +1,23 @@
<template>
<ace-editor
<c-ace-editor
v-model="template.template"
data-test-id="template-plain-text-editor"
:font-size="14"
:show-print-margin="true"
:show-gutter="true"
:highlight-active-line="true"
width="100%"
mode="plain_text"
theme="chrome"
name="editor/plain_text"
:on-change="(v) => template.template = v"
:value="template.template"
:editor-props="{
$blockScrolling: false,
}"
class="border-0 rounded-0"
lang="plain_text"
height="400px"
font-size="14px"
show-line-numbers
/>
</template>
<script>
import { Ace as AceEditor } from 'vue2-brace-editor'
import { components } from '@cortezaproject/corteza-vue'
import 'brace/mode/plain_text'
import 'brace/theme/chrome'
const { CAceEditor } = components
export default {
components: {
AceEditor,
CAceEditor,
},
props: {

32
client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
View File

@ -63,23 +63,16 @@
class="shadow-sm mt-3"
>
<!-- Partial templates can't be previewed -->
<ace-editor
<c-ace-editor
v-model="previewData"
data-test-id="template-preview-output"
:font-size="14"
:show-print-margin="true"
:show-gutter="true"
:highlight-active-line="true"
width="100%"
height="500px"
mode="json"
theme="chrome"
name="preview-data"
:on-change="(v) => previewData = v"
:value="previewData"
:editor-props="{
$blockScrolling: false,
}"
class="border-0 rounded-0"
lang="json"
height="500px"
show-line-numbers
highlight-active-line
show-print-margin
:border="false"
/>
<template #header>
@ -113,20 +106,19 @@
</template>
<script>
import 'brace/mode/json'
import 'brace/theme/chrome'
import listHelpers from 'corteza-webapp-admin/src/mixins/listHelpers'
import EditorToolbox from './EditorToolbox'
import EditorTextHtml from './EditorTextHtml'
import EditorTextPlain from './EditorTextPlain'
import EditorUnsupported from './EditorUnsupported'
import { Ace as AceEditor } from 'vue2-brace-editor'
import { components } from '@cortezaproject/corteza-vue'
const { CAceEditor } = components
export default {
components: {
AceEditor,
CAceEditor,
EditorToolbox,
},
mixins: [

7
client/web/admin/yarn.lock
View File

@ -11818,13 +11818,6 @@ vue2-ace-editor@^0.0.15:
dependencies:
brace "^0.11.0"
vue2-brace-editor@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/vue2-brace-editor/-/vue2-brace-editor-2.0.2.tgz#d9cd06f201c3e7af8382fd14a3eb8c2c49971436"
integrity sha512-ADJo1dccmIjq3ZejUNFJT/GpTQV5+TPOkC7xArBbVooVSjL8NOgRbqQ1Ix1LEW2S0hgy1y2ac8VHpZZdV4hjug==
dependencies:
brace "^0.11.0"
vue2-dropzone@^3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/vue2-dropzone/-/vue2-dropzone-3.6.0.tgz#b4bb4b64de1cbbb3b88f04b24878e06780a51546"

1
client/web/compose/package.json
View File

@ -80,7 +80,6 @@
"vue-router": "3.1.5",
"vue-sortable-tree": "^1.2.2",
"vue-tweet-embed": "^2.3.0",
"vue2-brace-editor": "^2.0.2",
"vue2-dropzone": "^3.6.0",
"vuedraggable": "^2.23.0",
"vuex": "^3.1.1",

7
client/web/compose/yarn.lock
View File

@ -12520,13 +12520,6 @@ vue2-ace-editor@^0.0.15:
dependencies:
brace "^0.11.0"
vue2-brace-editor@^2.0.2:
version "2.0.2"
resolved "https://registry.yarnpkg.com/vue2-brace-editor/-/vue2-brace-editor-2.0.2.tgz#d9cd06f201c3e7af8382fd14a3eb8c2c49971436"
integrity sha512-ADJo1dccmIjq3ZejUNFJT/GpTQV5+TPOkC7xArBbVooVSjL8NOgRbqQ1Ix1LEW2S0hgy1y2ac8VHpZZdV4hjug==
dependencies:
brace "^0.11.0"
vue2-dropzone@^3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/vue2-dropzone/-/vue2-dropzone-3.6.0.tgz#b4bb4b64de1cbbb3b88f04b24878e06780a51546"

1
client/web/workflow/package.json
View File

@ -27,7 +27,6 @@
"v-jsoneditor": "^1.4.2",
"vue": "2.6.14",
"vue-router": "3.1.5",
"vue2-ace-editor": "^0.0.15",
"vuedraggable": "^2.23.0",
"vuex": "^3.6.2"
},

10
client/web/workflow/src/components/Configurator/Delay.vue
View File

@ -21,8 +21,8 @@
label-class="text-primary"
class="mb-0"
>
<expression-editor
:value.sync="item.config.arguments[0].expr"
<c-ace-editor
v-model="item.config.arguments[0].expr"
lang="javascript"
font-size="18px"
show-line-numbers
@ -37,11 +37,13 @@
<script>
import base from './base'
import ExpressionEditor from '../ExpressionEditor'
import { components } from '@cortezaproject/corteza-vue'
const { CAceEditor } = components
export default {
components: {
ExpressionEditor,
CAceEditor,
},
extends: base,

10
client/web/workflow/src/components/Configurator/Error.vue
View File

@ -20,7 +20,7 @@
label-class="text-primary"
class="mb-0"
>
<expression-editor
<c-ace-editor
v-model="item.config.arguments[0].expr"
lang="javascript"
font-size="18px"
@ -44,7 +44,7 @@
@ok="saveExpression"
@hidden="resetExpression"
>
<expression-editor
<c-ace-editor
v-model="expressionEditor.currentExpression"
lang="javascript"
height="500"
@ -59,11 +59,13 @@
<script>
import base from './base'
import ExpressionEditor from '../ExpressionEditor'
import { components } from '@cortezaproject/corteza-vue'
const { CAceEditor } = components
export default {
components: {
ExpressionEditor,
CAceEditor,
},
extends: base,

10
client/web/workflow/src/components/Configurator/Expressions.vue
View File

@ -61,8 +61,8 @@
@ok="saveExpression"
@hidden="resetExpression"
>
<expression-editor
:value.sync="currentExpressionValue"
<c-ace-editor
v-model="currentExpressionValue"
height="500"
lang="javascript"
font-size="18px"
@ -76,12 +76,14 @@
<script>
import base from './base'
import ExpressionEditor from '../ExpressionEditor.vue'
import ExpressionTable from '../ExpressionTable.vue'
import { components } from '@cortezaproject/corteza-vue'
const { CAceEditor } = components
export default {
components: {
ExpressionEditor,
CAceEditor,
ExpressionTable,
},

18
client/web/workflow/src/components/Configurator/Function.vue
View File

@ -157,17 +157,17 @@
{{ a.target }}
</b-form-checkbox>
<expression-editor
<c-ace-editor
v-else
:value.sync="a.value"
v-model="a.value"
@open="openInEditor(index)"
@input="$root.$emit('change-detected')"
/>
</div>
<expression-editor
<c-ace-editor
v-else-if="a.valueType === 'expr'"
:value.sync="a.expr"
v-model="a.expr"
lang="javascript"
show-line-numbers
@open="openInEditor(index)"
@ -304,8 +304,8 @@
@ok="saveExpression"
@hidden="resetExpression"
>
<expression-editor
:value.sync="currentExpressionValue"
<c-ace-editor
v-model="currentExpressionValue"
:lang="expressionEditor.lang"
height="500"
font-size="18px"
@ -319,13 +319,15 @@
<script>
import base from './base'
import ExpressionEditor from '../ExpressionEditor.vue'
import ExpressionTable from '../ExpressionTable.vue'
import { objectSearchMaker, stringSearchMaker } from '../../lib/filter'
import { components } from '@cortezaproject/corteza-vue'
const { CAceEditor } = components
export default {
components: {
ExpressionEditor,
CAceEditor,
ExpressionTable,
},

10
client/web/workflow/src/components/Configurator/Gateway.vue
View File

@ -33,8 +33,8 @@
:label="edge.value"
label-class="text-primary"
>
<expression-editor
:value.sync="edge.expr"
<c-ace-editor
v-model="edge.expr"
lang="javascript"
height="100"
show-line-numbers
@ -50,11 +50,13 @@
<script>
import base from './base'
import ExpressionEditor from '../ExpressionEditor.vue'
import { components } from '@cortezaproject/corteza-vue'
const { CAceEditor } = components
export default {
components: {
ExpressionEditor,
CAceEditor,
},
extends: base,

46
client/web/workflow/src/components/ExpressionEditor.vue
View File

@ -2,37 +2,26 @@
<div
class="position-relative"
>
<ace-editor
<c-ace-editor
v-model="expressionValue"
:lang="lang"
:mode="lang"
theme="chrome"
width="100%"
:height="height"
:class="{ 'border-0 rounded-0': !border }"
:show-line-numbers="showLineNumbers"
:font-size="fontSize"
:show-popout="showPopout"
v-on="$listeners"
@init="editorInit"
/>
<b-button
v-if="showPopout"
variant="link"
class="popout position-absolute px-2 py-1"
@click="$emit('open')"
>
<font-awesome-icon
:icon="['fas', 'expand-alt']"
/>
</b-button>
</div>
</template>
<script>
import AceEditor from 'vue2-ace-editor'
import { components } from '@cortezaproject/corteza-vue'
const { CAceEditor } = components
export default {
components: {
AceEditor,
CAceEditor,
},
props: {
@ -83,25 +72,6 @@ export default {
},
},
},
methods: {
editorInit (editor) {
require('brace/mode/text')
require('brace/mode/javascript')
require('brace/theme/chrome')
editor.setOptions({
tabSize: 2,
fontSize: this.fontSize,
wrap: true,
indentedSoftWrap: false,
showLineNumbers: this.showLineNumbers,
showGutter: this.showLineNumbers,
displayIndentGuides: this.lang !== 'text',
useWorker: false,
})
},
},
}
</script>

10
client/web/workflow/src/components/ExpressionTable.vue
View File

@ -97,8 +97,8 @@
<b-form-group
class="mb-0"
>
<expression-editor
:value.sync="item[valueField]"
<c-ace-editor
v-model="item[valueField]"
lang="javascript"
show-line-numbers
@open="$emit('open-editor', index)"
@ -114,13 +114,15 @@
</template>
<script>
import ExpressionEditor from './ExpressionEditor.vue'
import { components } from '@cortezaproject/corteza-vue'
import { objectSearchMaker } from '../lib/filter'
import draggable from 'vuedraggable'
const { CAceEditor } = components
export default {
components: {
ExpressionEditor,
CAceEditor,
draggable,
},

20
lib/vue/src/components/input/CAceEditor.vue
View File

@ -74,6 +74,21 @@ export default {
type: Boolean,
default: false,
},
readOnly: {
type: Boolean,
default: false,
},
highlightActiveLine: {
type: Boolean,
default: false,
},
showPrintMargin: {
type: Boolean,
default: false,
},
},
computed: {
@ -94,6 +109,7 @@ export default {
require('brace/mode/html')
require('brace/mode/css')
require('brace/mode/scss')
require('brace/mode/json')
require('brace/mode/javascript')
require('brace/theme/chrome')
@ -102,11 +118,13 @@ export default {
fontSize: this.fontSize,
wrap: true,
indentedSoftWrap: false,
showPrintMargin: false,
showPrintMargin: this.showPrintMargin,
showLineNumbers: this.showLineNumbers,
showGutter: this.showLineNumbers,
displayIndentGuides: this.lang !== 'text',
useWorker: false,
readOnly: this.readOnly,
highlightActiveLine: this.highlightActiveLine
})
},
},

57
server/assets/src/scss/main/18201141_custom_webapp.scss
View File

@ -294,63 +294,6 @@ fieldset.required {
}
}
// Remove from here when all ace-editors use c-ace-editor
.ace_editor {
color: var(--black) !important;
background-color: var(--white) !important;
border-radius: 0.25rem;
border: 2px solid var(--extra-light);
.ace_cursor {
border-left: 2px solid var(--black);
}
.ace_gutter {
background-color: var(--light) !important;
color: var(--black) !important;
.ace_gutter-active-line {
background-color: var(--extra-light) !important;
}
}
.ace_text {
color: var(--black) !important;
}
.ace_keyword {
color: var(--primary) !important;
}
.ace_string {
color: var(--secondary) !important;
}
.ace_variable {
color: var(--warning) !important;
}
.ace_type {
color: var(--secondary) !important;
}
.ace_constant {
color: var(--primary) !important;
}
.ace_tag {
color: var(--primary) !important;
}
.ace_attribute {
color: var(--warning) !important;
}
.ace_comment {
color: var(--extra-light) !important;
}
}
// Supporting CSS to improve print-to-PDF option
@media print {
@page {