Exposing simpleMDEditor as Javascript object (again) #4916

New Issue

GiteaMirror · 2025-11-02T06:07:08-06:00

GiteaMirror commented

2025-11-02 06:07:08 -06:00

Originally created by @marcellmars on GitHub (Feb 21, 2020).

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

Originally created by @marcellmars on GitHub (Feb 21, 2020).   - 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 - [x] Not relevant - Can you reproduce the bug at https://try.gitea.io: - [ ] Yes (provide example URL) - [ ] No - [x] Not relevant ## Description I think exposing simpleMDEditor as Javascript object from [web_src/js/index.js](https://github.com/go-gitea/gitea/blob/master/web_src/js/index.js) could be very useful for customizing Gitea. I added this function to [web_src/js/index.js](https://github.com/go-gitea/gitea/blob/master/web_src/js/index.js): ```javascript window.getSimpleMDEditor = function () { return simpleMDEditor; }; ``` and that allows me to play with CodeMirror. Fox example: ```javascript 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](https://docs.gitea.io/en-us/customizing-gitea/#other-additions-to-the-page) and it worked great. ## Screenshots ![getSimpleMDEditor](https://user-images.githubusercontent.com/288208/75079922-c1579d80-550a-11ea-81dd-7d6ef888c903.png)

GiteaMirror added the type/proposal label 2025-11-02 06:07:08 -06:00

GiteaMirror closed this issue

2025-11-02 06:07:08 -06:00

GiteaMirror commented

2025-11-02 06:07:09 -06:00

@silverwind commented on GitHub (Feb 22, 2020):

Plan is to switch to easymde (https://github.com/go-gitea/gitea/pull/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.

@silverwind commented on GitHub (Feb 22, 2020): Plan is to switch to easymde (https://github.com/go-gitea/gitea/pull/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.

GiteaMirror commented

2025-11-02 06:07:10 -06:00

@sdockray commented on GitHub (Jun 2, 2020):

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

@sdockray commented on GitHub (Jun 2, 2020): Returning to this now that monaco is being used: it would be great if the `editor` that is created [here](https://github.com/go-gitea/gitea/blob/9249c810b883406e649586f6731a820c1c96b698/web_src/js/features/codeeditor.js#L61), and which is returned from `createCodeEditor()` could be exposed (for example, to Javascript in custom templates). But it's just thrown away [here](https://github.com/go-gitea/gitea/blob/788b8b1440462d477f45b0088875b66f09da25d4/web_src/js/index.js#L1578): ``` await createCodeEditor($editArea[0], $editFilename[0], previewFileModes); ``` Most of the customizations described in the [Monaco Editor Playground](https://microsoft.github.io/monaco-editor/playground.html) are not possible without the `editor`

GiteaMirror commented

2025-11-02 06:07:10 -06:00

@silverwind commented on GitHub (Jun 2, 2020):

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

SimpleMDE will eventually go away (probably replaced by a textarea), see https://github.com/go-gitea/gitea/issues/10729.

@silverwind commented on GitHub (Jun 2, 2020): I'll look into that. Will probably be an array `window.editors`. SimpleMDE will eventually go away (probably replaced by a textarea), see https://github.com/go-gitea/gitea/issues/10729.

GiteaMirror commented

2025-11-02 06:07:10 -06:00

@silverwind commented on GitHub (Jun 2, 2020):

https://github.com/go-gitea/gitea/pull/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);
}

@silverwind commented on GitHub (Jun 2, 2020): https://github.com/go-gitea/gitea/pull/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: ```js 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); }

GiteaMirror referenced this issue

2025-11-02 14:51:32 -06:00

[PR #5141] [CLOSED] Center tables within markdown #17665

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#4916