Code Editor #2760

frankvp11 · 2024-03-24T17:17:08Z

frankvp11
Mar 24, 2024

I think it would be really cool if we can make an example / element for a code editor.
I don't believe that it would be to difficult to integrate something like https://codemirror.net/. I am going to start looking into how I can get this running myself, but of course help with most likely be required and greatly appreciated!
Currently, I have this code which creates a very simplistic code editor with just raw HTML and JS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeMirror Example</title>
  <!-- Include CodeMirror CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css">
  <!-- Include CodeMirror Theme (Change 'theme' to your desired theme) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/dracula.min.css">
</head>
<body>
  <!-- Textarea or other element where you want to apply CodeMirror -->
  <textarea id="myTextarea"></textarea>

  <!-- Include CodeMirror JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.js"></script>
  <!-- Include CodeMirror Language Modes (Change 'mode' to the language you want) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/mode/javascript/javascript.min.js"></script>
  <!-- Initialize CodeMirror -->
  <script>
    // Get reference to the textarea or other element
    var myTextarea = document.getElementById("myTextarea");
    // Initialize CodeMirror
    var myCodeMirror = CodeMirror.fromTextArea(myTextarea, {
      mode: "javascript", // Set the language mode (change to whatever language you want)
      theme: "dracula", // Set the theme (change to whatever theme you prefer)
      lineNumbers: true // Enable line numbers
      // Add more options as needed
    });
  </script>
</body>
</html>

falkoschindler · 2024-03-24T22:46:30Z

falkoschindler
Mar 24, 2024
Maintainer

Hi @frankvp11, this demo looks very promising! A NiceGUI integration should indeed not be too hard.

But note that there's already a discussion about integrating the Monaco Editor. Before integrating and maintaining two code editors, we should chose carefully which one to focus on.

5 replies

frankvp11 Mar 25, 2024
Author

That's a good point.
Personally I think given the fact that the Monaco Editor is used in VSCode, it might make a more familiar feel to most developers. Looking at their sample it also doesn't seem to bad, however reading their documentation is certainly gives off the feeling that theirs is much more intricate than the one I provided. I'll probably look into seeing if I can get a sample running of either or both (aka try both) and then go from there.

rodja Mar 25, 2024
Maintainer

I would very much like to see an integration of CodeMirror. In my research it was the most promising candidate for collaborative editing.

frankvp11 Mar 25, 2024
Author

I've got an initial setup of the CodeMirror running. From here on out, I think most of the things are just configurations.
Since I can't (for some reason) just upload the files, here's the code:
code.js:

export default {
  template: `
      <div>
        <div ref="editorContainer" style="width: 100%; height: 100%;"></div>
      </div>
  `,
  mounted() {
    // Load CodeMirror resources and initialize it
    Promise.all([
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.js"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/mode/javascript/javascript.min.js"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/dracula.min.css"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css")
    ]).then(() => {
      // Initialize CodeMirror
      const CodeMirror = window.CodeMirror;
      this.editor = CodeMirror(this.$refs.editorContainer, {
        lineNumbers: true,
        mode: 'javascript',
        theme: 'dracula'
      });
    });
  },
  methods: {
    loadResource(url) {
      return new Promise((resolve, reject) => {
        const dataAttribute = `data-${url.split("/").pop().replace(/\./g, "-")}`;
        if (document.querySelector(`[${dataAttribute}]`)) {
          resolve();
          return;
        }
        let element;
        if (url.endsWith(".css")) {
          element = document.createElement("link");
          element.setAttribute("rel", "stylesheet");
          element.setAttribute("href", url);
        } else if (url.endsWith(".js")) {
          element = document.createElement("script");
          element.setAttribute("src", url);
        }
        element.setAttribute(dataAttribute, "");
        document.head.appendChild(element);
        element.onload = resolve;
        element.onerror = reject;
      });
    }
  }
};

code_1.py:

from nicegui.element import Element

class Coder(Element, component='code.js'):
    def __init__(self):
        super().__init__()

test.py:

from nicegui import ui
from code_1 import Coder

coder = Coder()

ui.run()

Unfortunately I couldn't really get loadResource to work properly, so I just kind of set it up inside the file itself again. This needs to be fixed, but currently this code is just to show off what's possible.
Edit: I think it's also having troubles getting the first package, since the console gives an error about CodeMirror.

frankvp11 Mar 26, 2024
Author

To give you guys an update:
The following code works really quite well for Python. I've got it so that it does the syntax highlighting, and the tab completions are decent enough to leave them as is for now. I'm still struggling (albeit forward) with the autocompletion code and the functionality to fold code.
The only thing I've updated is the code.js file since the previous update:

export default {
  template: `
    <div style="width: 100%">
      <textarea ref="myTextarea"></textarea>
    </div>
  `,
  mounted() {
    // Load CodeMirror resources and initialize it
    Promise.all([
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/dracula.min.css"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/python/python.min.js"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/closebrackets.min.js"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldcode.min.js"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.css"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.js"),

    ]).then(() => {
      // Initialize CodeMirror
      const myTextarea = this.$refs.myTextarea;
      const myCodeMirror = CodeMirror.fromTextArea(myTextarea, {
        language: "Python",
        lineNumbers: true,
        theme: "dracula",
        autoCloseBrackets: true,
        indentWithTabs: true,
        foldGutter: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],  
      });
     
    });
  },
  methods: {
    loadResource(url) {
      return new Promise((resolve, reject) => {
        const dataAttribute = `data-${url.split("/").pop().replace(/\./g, "-")}`;
        if (document.querySelector(`[${dataAttribute}]`)) {
          resolve();
          return;
        }
        let element;
        if (url.endsWith(".css")) {
          element = document.createElement("link");
          element.setAttribute("rel", "stylesheet");
          element.setAttribute("href", url);
        } else if (url.endsWith(".js")) {
          element = document.createElement("script");
          element.setAttribute("src", url);
        }
        element.setAttribute(dataAttribute, "");
        document.head.appendChild(element);
        element.onload = resolve;
        element.onerror = reject;
      });
    },
    
  }
};

frankvp11 Mar 26, 2024
Author

Here's a bit of an update on the code. I'm still not entirely sure of how to fold properly, but it does output that it is attempting to fold. I thought I properly stole from their documentation on how to fold, but i'm guessing I did something wrong. This appears to slowly be reaching the end of my abilities with codemirror... so help would be appreciated.

export default {
  template: `
    <div style="width: 100%">
      <textarea ref="myTextarea"></textarea>
    </div>
  `,
  mounted() {
    // Load CodeMirror resources and initialize it
    Promise.all([
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/theme/dracula.min.css"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/python/python.min.js"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/closebrackets.min.js"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldcode.min.js"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.css"),
      this.loadResource("https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.js"),

    ]).then(() => {
      // Initialize CodeMirror
      const myTextarea = this.$refs.myTextarea;
      const myCodeMirror = CodeMirror.fromTextArea(myTextarea, {
        language: "python",
        lineNumbers: true,
        theme: "dracula",
        autoCloseBrackets: true,
        indentWithTabs: true,
        foldGutter: false,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        extraKeys: {
          "Ctrl-.": function(cm) { // Shortcut for folding
            console.log("Folding!")
            cm.foldCode(cm.getCursor());
          }
        }

        
      });
      myCodeMirror.setGutterMarker(0, "CodeMirror-foldgutter", document.createTextNode("+"));
    });
  },
  methods: {
    loadResource(url) {
      return new Promise((resolve, reject) => {
        const dataAttribute = `data-${url.split("/").pop().replace(/\./g, "-")}`;
        if (document.querySelector(`[${dataAttribute}]`)) {
          resolve();
          return;
        }
        let element;
        if (url.endsWith(".css")) {
          element = document.createElement("link");
          element.setAttribute("rel", "stylesheet");
          element.setAttribute("href", url);
        } else if (url.endsWith(".js")) {
          element = document.createElement("script");
          element.setAttribute("src", url);
        }
        element.setAttribute(dataAttribute, "");
        document.head.appendChild(element);
        element.onload = resolve;
        element.onerror = reject;
      });
    },
    
  }
};

rodja · 2024-03-27T06:54:15Z

rodja
Mar 27, 2024
Maintainer

@frankvp11 thanks for digging into this. I suggest you start a pull request instead of posting code updates into this discussion. Would be much simpler to track changes.

2 replies

frankvp11 Mar 27, 2024
Author

I agree with that, I was just waiting for my other PR to get merged. I have set up my repo for this task now, but I am dealing with some issues in integrating. Namely, if you run my fork, you will get this error:

Traceback (most recent call last):
  File "/home/frankvp11/Documents/Stable2/Testing/nicegui/main.py", line 12, in <module>
    from website import anti_scroll_hack, documentation, fly, main_page, svg
  File "/home/frankvp11/Documents/Stable2/Testing/nicegui/website/__init__.py", line 1, in <module>
    from . import anti_scroll_hack, documentation, fly, main_page, svg
  File "/home/frankvp11/Documents/Stable2/Testing/nicegui/website/documentation/__init__.py", line 1, in <module>
    from .content import overview, redirects, registry
  File "/home/frankvp11/Documents/Stable2/Testing/nicegui/website/documentation/content/overview.py", line 3, in <module>
    from . import (doc, section_action_events, section_audiovisual_elements, section_binding_properties,
  File "/home/frankvp11/Documents/Stable2/Testing/nicegui/website/documentation/content/section_controls.py", line 1, in <module>
    from . import (badge_documentation, button_documentation, checkbox_documentation, codemirror_documentation,
  File "/home/frankvp11/Documents/Stable2/Testing/nicegui/website/documentation/content/codemirror_documentation.py", line 8, in <module>
    @doc.demo(ui.codemirror)
  File "/home/frankvp11/Documents/Stable2/Testing/nicegui/website/documentation/content/doc/api.py", line 89, in demo
    title_, description = doc.split('\n', 1)
AttributeError: 'NoneType' object has no attribute 'split'

I think I've added the codeMirror to all the right spots, but I could be wrong. Let me know, that way I can start a draft PR.

frankvp11 Mar 27, 2024
Author

Edit: I've figured that out - refer to the PR from now on

frankvp11 · 2024-03-28T00:52:32Z

frankvp11
Mar 28, 2024
Author

#2775 is where this discussion will be moving

2 replies

falkoschindler Mar 29, 2024
Maintainer

I just re-opened the discussion to make it visible in the list of open feature requests.
But comments and contributions regarding @frankvp11's CodeMirror integration can be posted right over at PR #2775.

falkoschindler May 16, 2024
Maintainer

ui.codemirror has been released. I'll close this feature request.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Code Editor #2760

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 9 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Code Editor #2760

frankvp11 Mar 24, 2024

Replies: 3 comments · 9 replies

falkoschindler Mar 24, 2024 Maintainer

frankvp11 Mar 25, 2024 Author

rodja Mar 25, 2024 Maintainer

frankvp11 Mar 25, 2024 Author

frankvp11 Mar 26, 2024 Author

frankvp11 Mar 26, 2024 Author

rodja Mar 27, 2024 Maintainer

frankvp11 Mar 27, 2024 Author

frankvp11 Mar 27, 2024 Author

frankvp11 Mar 28, 2024 Author

falkoschindler Mar 29, 2024 Maintainer

falkoschindler May 16, 2024 Maintainer

frankvp11
Mar 24, 2024

Replies: 3 comments 9 replies

falkoschindler
Mar 24, 2024
Maintainer

frankvp11 Mar 25, 2024
Author

rodja Mar 25, 2024
Maintainer

frankvp11 Mar 25, 2024
Author

frankvp11 Mar 26, 2024
Author

frankvp11 Mar 26, 2024
Author

rodja
Mar 27, 2024
Maintainer

frankvp11 Mar 27, 2024
Author

frankvp11 Mar 27, 2024
Author

frankvp11
Mar 28, 2024
Author

falkoschindler Mar 29, 2024
Maintainer

falkoschindler May 16, 2024
Maintainer