fix codemirror refresh issue and disable auto load mode

Author: wang0618

pywebio/html/codemirror/addons.js

@@ -0,0 +1,47 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"))
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod)
+  else // Plain browser env
+    mod(CodeMirror)
+})(function(CodeMirror) {
+  "use strict"
+
+  CodeMirror.defineOption("autoRefresh", false, function(cm, val) {
+    if (cm.state.autoRefresh) {
+      stopListening(cm, cm.state.autoRefresh)
+      cm.state.autoRefresh = null
+    }
+    if (val && cm.display.wrapper.offsetHeight == 0)
+      startListening(cm, cm.state.autoRefresh = {delay: val.delay || 250})
+  })
+
+  function startListening(cm, state) {
+    function check() {
+      if (cm.display.wrapper.offsetHeight) {
+        stopListening(cm, state)
+        if (cm.display.lastWrapHeight != cm.display.wrapper.clientHeight)
+          cm.refresh()
+      } else {
+        state.timeout = setTimeout(check, state.delay)
+      }
+    }
+    state.timeout = setTimeout(check, state.delay)
+    state.hurry = function() {
+      clearTimeout(state.timeout)
+      state.timeout = setTimeout(check, 50)
+    }
+    CodeMirror.on(window, "mouseup", state.hurry)
+    CodeMirror.on(window, "keyup", state.hurry)
+  }
+
+  function stopListening(_cm, state) {
+    clearTimeout(state.timeout)
+    CodeMirror.off(window, "mouseup", state.hurry)
+    CodeMirror.off(window, "keyup", state.hurry)
+  }
+});

pywebio/html/codemirror/autorefresh.js

@@ -46,10 +46,7 @@
 
 <script src="{{ base_url }}js/mustache.min.js"></script>  <!--template system-->
 <script src="{{ base_url }}js/codemirror.min.js"></script>  <!--code textarea editor-->
-<script src="{{ base_url }}codemirror/matchbrackets.js"></script>  <!--codemirror plugin-->
-<script src="{{ base_url }}codemirror/python.js"></script> <!--codemirror python language support-->
-<script src="{{ base_url }}codemirror/loadmode.js"></script> <!--codemirror plugin: auto load mode-->
-<script src="{{ base_url }}codemirror/active-line.js"></script> <!--codemirror plugin: auto load mode-->
+<script src="{{ base_url }}codemirror/addons.js"></script> <!--codemirror addons: matchbrackets, python mode, active line, auto refresh-->
 <script src="{{ base_url }}js/prism.min.js"></script>  <!-- markdown code highlight -->
 <script src="{{ base_url }}js/FileSaver.min.js"></script>  <!-- saving files on the client-side -->
 <script src="{{ base_url }}js/jquery.min.js"></script>

pywebio/platform/tpl/index.html

@@ -44,6 +44,8 @@
             "html/codemirror/active-line.js",
             "html/codemirror/matchbrackets.js",
             "html/codemirror/loadmode.js",
+            "html/codemirror/autorefresh.js",
+            "html/codemirror/addons.js",
             "html/codemirror/python.js",
             "html/css/bootstrap.min.css",
             "html/css/markdown.min.css",

setup.py

@@ -25,6 +25,7 @@ export class Textarea extends InputItem {
         'styleActiveLine': true,  // 当前行背景高亮
         'matchBrackets': true,  //括号匹配
         'lineWrapping': true,  //自动换行
+        'autoRefresh': true  // https://codemirror.net/doc/manual.html#addon_autorefresh
     };
 
     constructor(spec: any, task_id: string, on_input_event: (event_name: string, input_item: InputItem) => void) {
@@ -90,10 +91,12 @@ export class Textarea extends InputItem {
     after_show(first_show: boolean): any {
         if (first_show && this.spec.code) {
             this.code_mirror = CodeMirror.fromTextArea(this.element.find('textarea')[0], this.code_mirror_config);
-            try {
-                CodeMirror.autoLoadMode(this.code_mirror, this.code_mirror_config.mode);
-            } catch (e) {
-                console.error('CodeMirror load mode `%s` error: %s', this.code_mirror_config.mode, e);
+            if (CodeMirror.autoLoadMode) {
+                try {
+                    CodeMirror.autoLoadMode(this.code_mirror, this.code_mirror_config.mode);
+                } catch (e) {
+                    console.error('CodeMirror load mode `%s` error: %s', this.code_mirror_config.mode, e);
+                }
             }
             if (this.spec.onchange)
                 this.code_mirror.on('change', (instance: object, changeObj: object) => {