Skip to content

Improve JavaScript and CSS injection dialog - #2775

Closed
guanglinn wants to merge 44 commits into
gsantner:masterfrom
guanglinn:code_mirror
Closed

Improve JavaScript and CSS injection dialog#2775
guanglinn wants to merge 44 commits into
gsantner:masterfrom
guanglinn:code_mirror

Conversation

@guanglinn

@guanglinn guanglinn commented Mar 16, 2026

Copy link
Copy Markdown
Contributor

Hello, @gsantner

JavaScript and CSS injection is a powerful feature for Markor, but the experience of injection dialog is really bad.

Related issues:
#2765 - Improve the user experience of JavaScript and CSS injection dialog

In order to make it better to use, this PR implemented the following features (can greatly enhance UX):

  1. Better dialog size;
  2. Monospaced font;
  3. Syntax highlighting (HTML, CSS and JavaScript);
  4. Auto-completion (HTML, CSS and basic JavaScript);
  5. Auto-indentation;
  6. Code block folding;
  7. Bracket and HTML tag matching;
  8. Line numbers;
  9. Undo redo support;
  10. Reset to template code;
  11. Better format for template code;
  12. File Browser: Add add an option "favorite first" to FolderSortDialog.

Major features above for code editing dialog are supported by CodeMirror, which is a powerful text editor kernel.

Obsidian and GitHub are all using CodeMirror, which can proven that CodeMirror is stable enough for production.

Some great features of CodeMirror:

  1. Lightweight and efficient, the size of build files for Markor is only about 500 KB;

  2. Multiple code language support, see Language Support;

  3. Highly customizable styles and themes extensions, see CodeMirror Styling Example;

  4. Rich programming interface and extensions, see Extension;

  5. Excellent performance and huge document support, see Huge Document Support: load a document with millions of lines;

  6. Optimizing for mobile devices, it used platform's native selection and editing features on Android devices;

  7. Strong community support;

  8. LICENSE.

CodeMirror development and build guidance for Markor

Who is using CodeMirror?

See Sponsors

@guanglinn

guanglinn commented Mar 16, 2026

Copy link
Copy Markdown
Contributor Author

Screen recording

SVID_20260316_170402_1.mp4

@guanglinn

guanglinn commented Mar 16, 2026

Copy link
Copy Markdown
Contributor Author

1

Before

Screenshot_20260312_135729.jpg

Now

Screenshot_20260316_223344_net.gsantner.markor_test.jpg


2

Before

Screenshot_20260312_135654.jpg

Now

Screenshot_20260316_170639_net.gsantner.markor_test.jpg

@guanglinn

Copy link
Copy Markdown
Contributor Author

Dark theme

Screenshot_20260316_225340_net.gsantner.markor_test.jpg

@gsantner

gsantner commented May 19, 2026

Copy link
Copy Markdown
Owner

Thank you @guanglinn

Major features are supported by CodeMirror: https://codemirror.net/. This is limited use of CodeMirror, it is only used in this code editing dialog. I learned that Obsidian and GitHub are all using CodeMirror, so it can be proven that CodeMirror is stable for production.

I take this with grain of salt to be honest. I know from other comments that theres a meaningful interest to move on to it - and thus to WebUI instead of the current editor solution.
For one, we did hard work to get into this shape while we still are on native sytem/Android component side. For the other, when we use the same like the others, what is the reason to use Markor then - when you could just use that other already existing tool.

@guanglinn

guanglinn commented May 19, 2026

Copy link
Copy Markdown
Contributor Author

@gsantner
Android component EditText is already a bottleneck of Markor in performance and functionality, especially performance.
Hope you can merge this PR, it is really great.
Not only rich features, CodeMirror's performance far exceeds EditText, you can see #2814 (comment)

@guanglinn

guanglinn commented May 19, 2026

Copy link
Copy Markdown
Contributor Author

I think this will be a significant milestone for Markor

@guanglinn guanglinn changed the title Improve code injection dialog Improve JavaScript and CSS injection dialog May 27, 2026
@guanglinn

Copy link
Copy Markdown
Contributor Author

Close this PR due to PR #2834 based on this branch.

@guanglinn guanglinn closed this Jun 2, 2026
@guanglinn
guanglinn deleted the code_mirror branch July 23, 2026 14:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants