From 236b0b4bc66a5a01d4715a2d95f8e4440d912def Mon Sep 17 00:00:00 2001
From: zhangxiaolong <zhangxiaolong@geedgenetworks.com>
Date: Wed, 20 Apr 2022 19:17:08 +0800
Subject: [PATCH] =?UTF-8?q?=20fix=20:=20=E8=A7=A3=E5=86=B3codemirror?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=90=8E=E4=BC=9A=E5=85=B3=E9=97=ADrightbox?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=20=E4=BF=AE=E6=94=B9=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/js/tools.js         |   2 +-
 .../page/dashboard/explore/promqlInput.vue    | 197 +++++++++++-------
 2 files changed, 118 insertions(+), 81 deletions(-)

diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js
index 1db16a97b..91dc7f438 100644
--- a/nezha-fronted/src/components/common/js/tools.js
+++ b/nezha-fronted/src/components/common/js/tools.js
@@ -4,7 +4,7 @@ import i18n from '../i18n'
 import bus from '@/libs/bus'
 import moment from 'moment-timezone'
 /* 弹窗点击外部后关闭 */
-const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel', 'el-dropdown-menu', 'el-select-dropdown'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
+const exceptClassName = ['prevent-clickoutside', 'config-dropdown', 'nz-pop', 'el-picker', 'chart-box-dropdown', 'metric-dropdown', 'el-cascader__dropdown', 'no-style-class', 'el-message-box', 'nz-dashboard-dropdown', 'el-autocomplete-suggestion', 'nz-temp-box', 'el-time-panel', 'el-dropdown-menu', 'el-select-dropdown','no-close'] // clickoutside排除的class(白名单)  no-style-class：没有任何样式的class
 export const clickoutside = {
   // 初始化指令
   bind (el, binding, vnode) {
diff --git a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
index cf7bc5cfd..7b7bbffba 100644
--- a/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
+++ b/nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
@@ -77,6 +77,7 @@
           @click="dropDownVisible = false"
         >
         <div id="editor"
+        class="not-fixed-height no-resize no-close"
         >
         </div>
           <!-- <el-input
@@ -227,7 +228,7 @@
               v-if="plugins.indexOf('metric-input') > -1"
             >
             <div id="editor"
-            class="not-fixed-height no-resize"
+            class="not-fixed-height no-resize no-close"
                 ref="elInput"
 
             ></div>
@@ -450,7 +451,8 @@ export default {
   },
   data () {
     return {
-      a: 'a',
+      newView:null,
+      codeMirrorValue: '',
       dropDownVisible: false,
       // metricStore:[],
       metricOptions: [],
@@ -516,7 +518,14 @@ export default {
     }
   },
   mounted () {
-    const self = this
+    this.initCodeMirror()
+    if (!this.fromFatherData && this.type !== 'logs') {
+      this.queryMetrics()
+    }
+  },
+  methods: {
+    initCodeMirror(){
+      const self = this
     const promQL = new PromQLExtension().setComplete(
       {
         remote: {
@@ -539,80 +548,102 @@ export default {
       promQL.asExtension(),
       baseTheme
     ]
-    // const dynamicConfigCompartment = new Compartment();
-    const EditorViewstate = EditorState.create({
-      extensions: [
-        baseTheme,
-        highlightSpecialChars(),
-        history(),
-        EditorState.allowMultipleSelections.of(true),
-        indentOnInput(),
-        bracketMatching(),
-        closeBrackets(),
-        autocompletion(),
-        highlightSelectionMatches(),
-        EditorView.lineWrapping,
-        keymap.of([
-          ...closeBracketsKeymap,
-          ...defaultKeymap,
-          ...historyKeymap,
-          ...commentKeymap,
-          ...completionKeymap,
-          ...lintKeymap
-        ]),
-        placeholder('Expression (press Shift+Enter for newlines)'),
-        dynamicConfigCompartment.of(dynamicConfig),
-        // This keymap is added without precedence so that closing the autocomplete dropdown
-        // via Escape works without blurring the editor.
-        keymap.of([
-          {
-            key: 'Escape',
-            run: (v) => {
-              v.contentDOM.blur()
-              return false
-            }
-          }
-        ]),
-        Prec.override(
+    if(!this.newView){
+      const EditorViewstate = EditorState.create({
+        extensions: [
+          baseTheme,
+          highlightSpecialChars(),
+          history(),
+          EditorState.allowMultipleSelections.of(true),
+          indentOnInput(),
+          bracketMatching(),
+          closeBrackets(),
+          autocompletion(),
+          highlightSelectionMatches(),
+          EditorView.lineWrapping,
+          keymap.of([
+            ...closeBracketsKeymap,
+            ...defaultKeymap,
+            ...historyKeymap,
+            ...commentKeymap,
+            ...completionKeymap,
+            ...lintKeymap
+          ]),
+          placeholder('Expression (press Shift+Enter for newlines)'),
+          dynamicConfigCompartment.of(dynamicConfig),
+          // This keymap is added without precedence so that closing the autocomplete dropdown
+          // via Escape works without blurring the editor.
           keymap.of([
             {
-              key: 'Enter',
+              key: 'Escape',
               run: (v) => {
-                self.newChange()
-                return true
+                v.contentDOM.blur()
+                return false
               }
-            },
-            {
-              key: 'Shift-Enter',
-              run: insertNewlineAndIndent
             }
-          ])
-        ),
-        EditorView.updateListener.of((update) => {
-          self.newChange(update.state.doc.toString())
+          ]),
+          Prec.override(
+            keymap.of([
+              {
+                key: 'Enter',
+                run: (v) => {
+                  self.newChange()
+                  return true
+                }
+              },
+              {
+                key: 'Shift-Enter',
+                run: insertNewlineAndIndent
+              }
+            ])
+          ),
+          EditorView.updateListener.of((update) => {
+            self.newChange(update.state.doc.toString())
+          })
+        ],
+        doc: self.codeMirrorValue,
+        editorState: {
+          changeByRange: self.newChange(),
+          changes: self.newDoc(),
+          facet: self.newChange()
+        }
+      })
+      const view = new EditorView({
+        state: EditorViewstate,
+        parent: document.getElementById('editor')
+      })
+      self.newView = view
+    }else{
+      console.log('viewIsOk');
+      self.newView.dispatch(
+        self.newView.state.update({
+          effects: dynamicConfigCompartment.reconfigure(dynamicConfig),
         })
-      ],
-      doc: self.a,
-      editorState: {
-        changeByRange: self.newChange(),
-        changes: self.newDoc(),
-        facet: self.newChange()
-      }
-    })
-    new EditorView({
-      state: EditorViewstate,
-      parent: document.getElementById('editor')
-    })
-    if (!this.fromFatherData && this.type !== 'logs') {
-      this.queryMetrics()
+      );
     }
-  },
-  methods: {
+const insertAtCursor = (value) => {
+    const view = this.newView;
+    if (view === null) {
+      return;
+    }
+    const { from, to } = view.state.selection.ranges[0];
+    console.log(from,to);
+    view.dispatch(
+      view.update({
+        changes: { from, to, insert: value },
+      })
+    );
+  }
+    },
     newChange (val) {
-      console.log(val)
+      this.codeMirrorValue = val
+      this.metricKeyDown(val)
+      console.log('change',val)
+      console.log(this.newView);
+
     },
     newDoc (val) {
-      console.log(val)
+      console.log('doc',val)
     },
     closeDropdown () {
       this.dropDownVisible = false
@@ -688,6 +719,7 @@ export default {
     },
     metricChange: function (value) {
       this.expressionList[this.index] = value
+      this.codeMirrorValue = value
       this.dropDownVisible = false
       this.$emit('change', value)
       this.$forceUpdate()
@@ -700,6 +732,7 @@ export default {
       this.$emit('change', value)
       this.$forceUpdate()
       this.cascaderValue = ''
+      this.initCodeMirror()
     },
     logLabelChange (value) {
       if (!value || value.length === 0) return
@@ -947,21 +980,24 @@ export default {
     },
     insertText (insertTxt) {
       // 获取el-input中的input元素
-      const elInput = this.$refs.elInput.$el.firstElementChild
+      // const elInput = this.$refs.elInput.$el.firstElementChild
       // 获取el-input的值
-      const txt = elInput.value
+      // const txt = elInput.value
       // 获取选区开始位置
-      const startPos = elInput.selectionStart
+      // const startPos = elInput.selectionStart
       // 获取选区结束位置
-      const endPos = elInput.selectionEnd
-      if (startPos === undefined || endPos === undefined) return
-
+      // const endPos = elInput.selectionEnd
+      // if (startPos === undefined || endPos === undefined) return
       // 将文本插入光标位置
-      this.expressionList[this.index] = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
+      // this.expressionList[this.index] = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
       // 将光标移至文本末尾
-      elInput.focus()
-      elInput.selectionStart = startPos + insertTxt.length
-      elInput.selectionEnd = startPos + insertTxt.length
+      // elInput.focus()
+      // elInput.selectionStart = startPos + insertTxt.length
+      // elInput.selectionEnd = startPos + insertTxt.length
+      this.expressionList[this.index]= insertTxt
+      this.codeMirrorValue = insertTxt
+      console.log('inserttext',this.codeMirrorValue);
+      this.initCodeMirror()
     }
     /* setMsg:function(){
         this.appendMsg
@@ -976,9 +1012,10 @@ export default {
         }
       }
     },
-    a () {
-      console.log(this.a)
-    },
+    // codeMirrorValue () {
+    //   console.log('watch',this.codeMirrorValue)
+
+    // },
     metricOptionsParent: {
       deep: true,
       immediate: true,