Refactor ace editor component

cortezaproject · Apr 16, 2024 · ebc4352 · ebc4352
1 parent 1a248c7
commit ebc4352
Show file tree

Hide file tree

Showing 19 changed files with 120 additions and 238 deletions.
diff --git a/client/web/admin/package.json b/client/web/admin/package.json
@@ -45,7 +45,6 @@
     "vue-echarts": "^6.2.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"

diff --git a/client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue b/client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue
@@ -214,42 +214,31 @@
     <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">
           {{ $t('body.label') }}
         </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: {

diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue b/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
@@ -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: {

diff --git a/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextHtml.vue b/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextHtml.vue
@@ -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: {

diff --git a/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextPlain.vue b/client/web/admin/src/components/Template/CTemplateEditorContent/EditorTextPlain.vue
@@ -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: {

diff --git a/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue b/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
@@ -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: [

diff --git a/client/web/admin/yarn.lock b/client/web/admin/yarn.lock
@@ -11801,13 +11801,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"

diff --git a/client/web/compose/package.json b/client/web/compose/package.json
@@ -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",

diff --git a/client/web/compose/yarn.lock b/client/web/compose/yarn.lock
@@ -12487,13 +12487,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"

diff --git a/client/web/workflow/package.json b/client/web/workflow/package.json
@@ -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"
   },

diff --git a/client/web/workflow/src/components/Configurator/Delay.vue b/client/web/workflow/src/components/Configurator/Delay.vue
@@ -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,

diff --git a/client/web/workflow/src/components/Configurator/Error.vue b/client/web/workflow/src/components/Configurator/Error.vue
@@ -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,

diff --git a/client/web/workflow/src/components/Configurator/Expressions.vue b/client/web/workflow/src/components/Configurator/Expressions.vue
@@ -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,
   },