Codemirror not finding a textarea because DOM is not completely loaded

Getting Started
1

Hi all,
i’m trying to embed w codemirror TextArea in an App built with Hype (Tumult). I have no problem to fireup codemirror on whatever textarea i insert in my php document.

But, when i try to target at a textarea from my JS design, the answer is always: textarea is null.

I bet that’s because my textArea “comes on the scene” after codemirror has started.

Please: how could i delay the codeMirror firing up after i am sure my textarea id=“myBox” is loaded ?

2

Hypes API has got events for documentload and sceneload. you may listen and load content accordingly. working with a shadowdom may also be an option.

1 Like
4

The easiest way is to add code to the On Scene Load handler that creates the codemirror element.

The steps I used:

  1. Include the codemirror.js and codemirror.css files in the Resource Library
  2. Insert a new Rectangle element and remove the background/border styling
  3. Edit the Inner HTML of the Rectangle to add the textarea div:
    <textarea id="myTextarea" style="width:100%;height:100%; padding:0px;"></textarea>
  4. Go to the Scene Inspector and add a new action for On Scene Load
  5. Set it to Run JavaScript… and create a new JavaScript function with this code:
    var myTextarea = hypeDocument.getElementById("myTextarea");
var editor = CodeMirror.fromTextArea(myTextarea, {
	lineNumbers: true
});

Now the text area is a codemirror editor. Sample project:

codemirror.hype.zip (113.1 KB)

1 Like