Has anyone ever tried to use CodeMirror inside a panel?

Adobe XD UXP Plugin API
1

Just curious. I realize it’s early times for panels and UXP DOM coverage, but thought I should ask before starting to experiment.

1 Like
2

Please share your experience if you decide to start the experiment!

3

Yes, I most definitely would! Still exploring options…

1 Like
4

I don’t think text fields support monospace fonts.

5

Not yet. But one of these days. We’re also considering something more like a Rich Text Editor widget that would be customizable.

Welcome to try CodeMirror, but I suspect we don’t have nearly enough of the necessary DOM, events, and HTML elements to support it…

1 Like
6

I would also suggest trying Ace Editor.

7

I tried loading Ace Editor and got this error:

Plugin UxpRuntimeError: Error: Loading script tags from remote is not supported: https://pagecdn.io/lib/ace/1.4.12/ace.min.js

Is there a way around this or should I try and package Ace Editor package locally?

Update
Tested using a local instance and the class itself loads with no reported errors but when attempting to create the editor I get these errors:

Plugin TypeError: window.getComputedStyle is not a function
at Object.t.computedStyle (ace-src-min-noconflict/ace.js:1:6201)

Plugin TypeError: window.focus is not a function
at e.exports.n (ace-src-min-noconflict/ace.js:1:57232)

8

I would assume (I’ve last tested something like this a few months ago) that all these editor libraries (just like WYSIWYG editors) aren’t supported, yet, as they usually require advanced DOM manipulation like contenteditable and its “relatives” :thinking:

9

I haven’t dug too deep into the codebase but it did need the window.getComputedStyle() function and the window.focus function when I attempted to activate the editor.

 console.log("Is created?", window.ace); // shows ace editor object api
 var editor = ace.edit("myDiv"); // throws errors mentioned above

The good news was the Ace classes themselves initialized and were recognized in the DOM.

The WYSIWYG editors do use contenteditable (or did last time I checked). I did a quick search of the Ace Editor repository and found no used references to contenteditable.

10

It’s unlikely any of these off-the-shelf editors would work. They typically rely on contenteditable APIs or other APIs that UXP does not support.

You could probably write a custom editor of sorts, but UXP does not support off-the-shelf code editors like Ace or CodeMirror.