CodeMirror integration

Show and Tell
#1

I’d previously used a pretty primitive library to get a text editor integrated with Anvil (Text editor with customized toolbar buttons & preview), but found I needed more features so I ended up using CodeMirror instead.

Here’s what the end result looks like: CodeMirrorDemo

It’s setup in HTML mode right now, which isn’t really the ideal use for CodeMirror (use something like Quill if you want to do HTML), but is easy to preview the results for. I personally had it setup for BBCode, but CodeMirror supports a whole bunch of languages.

The main value add of this demo is showing how to integrate a toolbar with CodeMirror, which doesn’t support a toolbar out of the box.

The clone link: Anvil | Login

Note that setting up the editor has to happen in form_show, but only once. Otherwise bad things happen.

9 Likes
[Wiki] Awesome custom components, dependencies (and the like)
#2

Hi, Thank you for sharing it. Is it possible to exec() code from codemirror?

#3

Welcome to the forum!

Yes, it is possible to exec code from the editor. There are some potential pitfalls, like any use of exec. Here’s a post about an educational Python IDE I created using a combination of CodeMirror and exec: Toy educational Python IDE

2 Likes
#4

Thank you! I am building a tool to help people learn to code using Codex. I’m currently running on Writepy.com, but want to add extra functionality.

2 Likes
#5

Jay, I am trying to display the output of exec(), but can’t figure out how to do it. Could you explain how you did it?

#6

If you look in the clone from the Duck Coding topic, you’ll see something like this:

      g = {
        'move': self.move,
        'turn_off': self.turn_off,
        'print': self.print_it,
        'turn_left': self.turn_left,
        'pick_beeper': self.pick_beeper,
        'put_beeper': self.put_beeper,
        'repeat': self.repeat,
        'front_is_clear': self.front_is_clear,
        'left_is_clear': self.left_is_clear,
        'right_is_clear': self.right_is_clear,
        'on_beeper': self.on_beeper,
        'next_to_a_beeper': self.on_beeper,
        'carries_beepers': self.carries_beepers,
      }
      
    exec(code, g)

This is providing some extra built-in functions for the coders to use. Those execute functions on my form, and those are the only places where I can do anything different from standard Python. In particular, note how I overrode the default Python print statement to call self.print_it so I could display the text in the Anvil UI.

Display results of exec()
#7

Thank you! I will try to dig deeper. I use anvil elements and not sure how to combine it with custom html.

#8

Nothing about that is specific to custom HTML. Here’s the important code from the self.print_it function:

  def print_it(self, msg=''):
    self.output.text += str(msg) + "\n"
1 Like
#9

Thank you for your help! I was able to make it run through colab. I just need to work with pandas. Will be happy to share when I am done.

1 Like
#10

Hi Jay,

Just completed the app. Please find it here https://app.missingvalue.co

I would love to hear what you think.