Exposing simpleMDEditor as Javascript object (again)

[marcellmars]

• Gitea version (or commit ref): v1.12.0-dev
• Git version: 2.24.1
• Operating system: GNU Linux, Debian
• Database (use [x]):
  • PostgreSQL
  • MySQL
  • MSSQL
  • SQLite
  • Not relevant
• Can you reproduce the bug at https://try.gitea.io:
  • Yes (provide example URL)
  • No
  • Not relevant

Description

I think exposing simpleMDEditor as Javascript object from web_src/js/index.js could be very useful for customizing Gitea.

I added this function to web_src/js/index.js:

window.getSimpleMDEditor = function () {
  return simpleMDEditor;
};

and that allows me to play with CodeMirror. Fox example:

script = document.createElement('script');
script.src = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/show-hint.min.js"
document.body.appendChild(script)
link = document.createElement('link')
link.rel = "stylesheet"
link.href = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.10.0/addon/hint/show-hint.min.css"
document.body.appendChild(link)
editor = getSimpleMDEditor().codemirror
editor.setOption("extraKeys", {
'Alt-U': function () {
    var options = {
    hint: function() {
      return {
        from: editor.getDoc().getCursor(),
          to: editor.getDoc().getCursor(),
        list: ['foo', 'bar']
        }
      }
    };
  editor.showHint(options)}
});

allowed me to bring popup list after one would use [Alt-u] keyboard shortcut.
I am working on a simple UI in which one could use Gitea to maintain Hugo web site and so far it worked very good but for less tech-savvy people in our team I wanted to bring autocomplete for internal links of the Hugo website. This is the way which allows me to do that.

I played with adding these kind of things via custom templates and it worked great.

Screenshots

[silverwind]

Plan is to switch to easymde (#9973), I guess it can be exposed via window.easymde = [...editors] then. Array because I think they can appear multiple times on the same page.

[sdockray]

Returning to this now that monaco is being used:

it would be great if the editor that is created here, and which is returned from createCodeEditor() could be exposed (for example, to Javascript in custom templates).

But it's just thrown away here:

await createCodeEditor($editArea[0], $editFilename[0], previewFileModes);

Most of the customizations described in the Monaco Editor Playground are not possible without the editor

[silverwind]

I'll look into that. Will probably be an array window.editors.

SimpleMDE will eventually go away (probably replaced by a textarea), see #10729.

[silverwind]

#11739 will fix this. The only tricky part is because the editor is lazy-loaded, you'll need to wait until it is done loading, for example polling for it:

function waitForEditor() {
  return new Promise(resolve => {
    const interval = setInterval(() => {
      if (window.codeEditors && window.codeEditors.length) {
        clearInterval(interval);
        resolve(window.codeEditors);
      }
    }, 500);
  });
}

for (const editor of await waitForEditor()) {
  console.log(editor);
}