feat(wiki): CodeMirror editor for wiki pages (replace EasyMDE) #665

New Issue

2026-06-21T06:31:53Z

jmiller commented

2026-06-21 06:31:53 +00:00

Summary

Replace the current EasyMDE-based wiki editor with the same CodeMirror 6 editor used in the repository code editor. This brings syntax highlighting, VS Code keybindings, command palette, and a modern editing experience to wiki pages.

Current State

Wiki edit page (templates/repo/wiki/new.tmpl) uses combomarkdowneditor template which initializes EasyMDE — a basic markdown toolbar editor
The code file editor (web_src/js/features/repo-editor.ts) uses createCodeEditor() from web_src/js/modules/codeeditor/main.ts which loads CodeMirror 6 with full language support, indentation markers, linting, and command palette
There is a significant UX gap between editing code files and editing wiki pages

Proposed Changes

Frontend

New module: web_src/js/features/wiki-editor.ts wrapping createCodeEditor() with wiki-specific extensions:
- Markdown language mode pre-loaded (not detected from filename)
- Wiki-link autocomplete: typing [[ triggers a page name picker from the wiki page list
- Live split preview (side-by-side by default, like the code editor's preview tab)
- Image upload inline via drag-and-drop (committed to wiki git repo)
- Diff tab showing changes vs. current page version
Template change: templates/repo/wiki/new.tmpl — replace combomarkdowneditor include with CodeMirror container + write/preview/diff tabs

Backend

routers/web/repo/wiki.go renderEditPage() needs to pass CodeEditorConfig data (indentation, tab width) to the template, same pattern as routers/web/repo/editor.go
New endpoint for wiki page list (for [[ autocomplete): GET /:owner/:repo/wiki/-/autocomplete returning page names as JSON

Key Files

File	Change
`templates/repo/wiki/new.tmpl`	Replace `combomarkdowneditor` with CodeMirror container
`web_src/js/features/repo-wiki.ts`	Initialize CodeMirror instead of EasyMDE
`web_src/js/features/wiki-editor.ts`	New — wiki-specific CodeMirror wrapper
`routers/web/repo/wiki.go`	Pass editor config, add autocomplete endpoint

Wikipedia Parity

This brings the wiki editor to parity with the code editor, matching Wikipedia's VisualEditor/source editor experience with a proper syntax-aware editing environment.

## Summary Replace the current EasyMDE-based wiki editor with the same CodeMirror 6 editor used in the repository code editor. This brings syntax highlighting, VS Code keybindings, command palette, and a modern editing experience to wiki pages. ## Current State - Wiki edit page (`templates/repo/wiki/new.tmpl`) uses `combomarkdowneditor` template which initializes **EasyMDE** — a basic markdown toolbar editor - The code file editor (`web_src/js/features/repo-editor.ts`) uses `createCodeEditor()` from `web_src/js/modules/codeeditor/main.ts` which loads **CodeMirror 6** with full language support, indentation markers, linting, and command palette - There is a significant UX gap between editing code files and editing wiki pages ## Proposed Changes ### Frontend - **New module:** `web_src/js/features/wiki-editor.ts` wrapping `createCodeEditor()` with wiki-specific extensions: - Markdown language mode pre-loaded (not detected from filename) - Wiki-link autocomplete: typing `[[` triggers a page name picker from the wiki page list - Live split preview (side-by-side by default, like the code editor's preview tab) - Image upload inline via drag-and-drop (committed to wiki git repo) - Diff tab showing changes vs. current page version - **Template change:** `templates/repo/wiki/new.tmpl` — replace `combomarkdowneditor` include with CodeMirror container + write/preview/diff tabs ### Backend - `routers/web/repo/wiki.go` `renderEditPage()` needs to pass `CodeEditorConfig` data (indentation, tab width) to the template, same pattern as `routers/web/repo/editor.go` - New endpoint for wiki page list (for `[[` autocomplete): `GET /:owner/:repo/wiki/-/autocomplete` returning page names as JSON ### Key Files | File | Change | |------|--------| | `templates/repo/wiki/new.tmpl` | Replace `combomarkdowneditor` with CodeMirror container | | `web_src/js/features/repo-wiki.ts` | Initialize CodeMirror instead of EasyMDE | | `web_src/js/features/wiki-editor.ts` | New — wiki-specific CodeMirror wrapper | | `routers/web/repo/wiki.go` | Pass editor config, add autocomplete endpoint | ## Wikipedia Parity This brings the wiki editor to parity with the code editor, matching Wikipedia's VisualEditor/source editor experience with a proper syntax-aware editing environment. ## Related - Depends on: none (existing CodeMirror infrastructure is already in place) - Enhances: #664 (sidebar editing would also benefit from the new editor)

jmiller added the feature: wiki label 2026-06-21 06:31:53 +00:00

jmiller referenced this issue

2026-07-12 20:13:06 +00:00

Epic: MokoGitea vNext — rebase to Gitea 1.26.4 (security backports) + feature roadmap #762

Sign in to join this conversation.

Priority Medium

Type Feature

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: MokoConsulting/MokoGIT#665