Refactor ace editor component

client/web/admin/package.json

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

client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue

@@ -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
+      <c-ace-editor
-        :font-size="14"
-        width="100%"
-        mode="json"
-        theme="chrome"
-        show-print-margin
-        read-only
-        show-gutter
-        highlight-active-line
         :value="request.body"
-        :editor-props="{
+        :border="false"
-          $blockScrolling: false,
+        lang="json"
-        }"
+        height="400px"
-        :set-options="{
+        show-line-numbers
-          useWorker: false,
+        read-only
-        }"
-        class="border-0 rounded-0"
       />
     </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'
+const { CAceEditor } = components
-import 'brace/theme/chrome'
 
 export default {
   name: 'CProfilerHitInfo',
@@ -260,7 +249,7 @@ export default {
   },
 
   components: {
-    AceEditor,
+    CAceEditor,
   },
 
   props: {

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)"
+            lang="css"
-            :value="settings['auth.ui.styles']"
+            height="300px"
-            :editor-props="{
+            font-size="14px"
-              $blockScrolling: false
+            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 { components } from '@cortezaproject/corteza-vue'
-import 'brace/theme/chrome'
-
-import { Ace as AceEditor } from 'vue2-brace-editor'
 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: {

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"
+    lang="html"
-    :value="template.template"
+    height="400px"
-    :editor-props="{
+    show-line-numbers
-      $blockScrolling: false,
+    highlight-active-line
-    }"
+    show-print-margin
-    class="border-0 rounded-0"
+    :border="false"
   />
 </template>
 
 <script>
-import { Ace as AceEditor } from 'vue2-brace-editor'
+import { components } from '@cortezaproject/corteza-vue'
 
-import 'brace/mode/html'
+const { CAceEditor } = components
-import 'brace/theme/chrome'
 
 export default {
   components: {
-    AceEditor,
+    CAceEditor,
   },
 
   props: {

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"
+    lang="plain_text"
-    :value="template.template"
+    height="400px"
-    :editor-props="{
+    font-size="14px"
-      $blockScrolling: false,
+    show-line-numbers
-    }"
-    class="border-0 rounded-0"
   />
 </template>
 
 <script>
-import { Ace as AceEditor } from 'vue2-brace-editor'
+import { components } from '@cortezaproject/corteza-vue'
 
-import 'brace/mode/plain_text'
+const { CAceEditor } = components
-import 'brace/theme/chrome'
 
 export default {
   components: {
-    AceEditor,
+    CAceEditor,
   },
 
   props: {

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"
+          lang="json"
-          :value="previewData"
+          height="500px"
-          :editor-props="{
+          show-line-numbers
-            $blockScrolling: false,
+          highlight-active-line
-          }"
+          show-print-margin
-          class="border-0 rounded-0"
+          :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: [

client/web/admin/yarn.lock

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

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

client/web/compose/yarn.lock

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

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

client/web/workflow/src/components/Configurator/Delay.vue

@@ -21,8 +21,8 @@
           label-class="text-primary"
           class="mb-0"
         >
-          <expression-editor
+          <c-ace-editor
-            :value.sync="item.config.arguments[0].expr"
+            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,

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,

client/web/workflow/src/components/Configurator/Expressions.vue

@@ -61,8 +61,8 @@
       @ok="saveExpression"
       @hidden="resetExpression"
     >
-      <expression-editor
+      <c-ace-editor
-        :value.sync="currentExpressionValue"
+        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,
   },
 

client/web/workflow/src/components/Configurator/Function.vue

@@ -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
+      <c-ace-editor
-        :value.sync="currentExpressionValue"
+        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,
   },
 

client/web/workflow/src/components/Configurator/Gateway.vue

@@ -33,8 +33,8 @@
             :label="edge.value"
             label-class="text-primary"
           >
-            <expression-editor
+            <c-ace-editor
-              :value.sync="edge.expr"
+              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,

client/web/workflow/src/components/ExpressionEditor.vue

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

client/web/workflow/src/components/ExpressionTable.vue

@@ -97,8 +97,8 @@
               <b-form-group
                 class="mb-0"
               >
-                <expression-editor
+                <c-ace-editor
-                  :value.sync="item[valueField]"
+                  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,
   },
 

lib/vue/src/components/input/CAceEditor.vue

@@ -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
       })
     },
   },

server/assets/src/scss/main/18201141_custom_webapp.scss

@@ -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 {
@@ -369,4 +312,4 @@ fieldset.required {
     break-inside: avoid;
     width: 100%;
   }
-}
+}