MDXEditor Textarea Replacement Test
How it works:
Any
<textarea data-mdxeditor>
element will be automatically enhanced with the MDXEditor. The original textarea is hidden but receives all changes, making it compatible with form submissions.
Editor 1: Token References
# Markdown Test We are testing different **Markdown** libraries to see *what they can do*. ## mdxeditor ### Some things you can do: 1. Write in WYSIWYG markdown mode with transparent textarea. 2. Start writing [ to see tokens - currently some examples from **node** and **current-user**. 3. Also start writing { to see variable templates. ### Some cool features outside of what is checked below for all: 1. Lightweight (~95KB minified) 2. Native textarea - undo/redo, mobile keyboards work 3. Solar (light) and Cave (dark) themes 4. Toolbar support 5. Task lists with clickable checkboxes ### What to think about: 1. No built-in mention/autocomplete - requires custom implementation. 2. MIT license, ready to go. ## What does a markdown library need to do? We want to find a library that can in order: - [x] Write in highlighted markdown. - [x] Preview or write in full preview. - [x] Mention/Autocomplete of tokens (custom implementation). - [x] Preview or write in raw text. - [ ] Paste from Word/Google Docs working. - [ ] Fullscreen mode for longer prompts. - [ ] Can run preview in a side-by-side mode. - [ ] Support rtl as well. - [x] We can remove image button if needed, since AI won't be able to read this in general.
(Textarea value will appear here)
Editor 2: Project Variables ({)
# Project Update **Project:** {{ project-name }} **Version:** {{ version }} **Environment:** {{ environment }} ## Status Everything is on track for {{ deadline }}. ## Content Title: [node:title] Body: [node:body]
(Textarea value will appear here)
Editor 3: No Autocomplete (plain markdown)
# Simple Editor This editor has **no** autocomplete configured. Just plain markdown editing with: - Rich text mode - Source mode - Diff mode ```javascript console.log("Hello World!"); ```
(Textarea value will appear here)
Show All Textarea Values