WYSIWYG Markdown support

[LifeIsStrange]

Next generation editors allow WYSIWYG Markdown support such as slate and Tiptap.

Explanation of this awesome feature: Markdown as of today is underused as the changes it will do are not visible while editing but this doesn't has to be the case:

As you can see in this demo[0], just outline a word with * and it instantaneously become italic. What's more: if you start a new line with # it instantaneously get the right size. You want an h2? Just put 2 ## It's just plain instantaneous and therefore user friendly and productive Markdown.

[0] https://tiptap.dev

The WYSIWYG that you already provide is complementary and is quicker to access sometimes and sometimes isn't, especially for doing partial selections, double clicking repeatedly and so much mouse movements "break" the train of thoughts of the writing process, I think this point is important. What do you think? To me this is the future and is implemented through prosemirror https://prosemirror.net (but doesn't necessarily has to be)

Also there is a market opportunity here, since as of today there are no WYSIWYG Markdown editors available for Angular (slate being for react and Tiptap for Vue) and since you have a great support of Angular, you could adress that market.

[kolkov]

Thank you for this innovative feature request!

Feature: WYSIWYG Markdown Support

This is an interesting concept - combining instant visual feedback with Markdown syntax shortcuts.

What This Means

Traditional Markdown:

You type: **bold text**
You see: **bold text**
Preview: bold text (only when rendered)

WYSIWYG Markdown (Tiptap/Slate style):

You type: **bold
Editor shows: bold (instantly formatted)
Storage: **bold** (still Markdown)

Examples of Shortcuts

Input	Instant Result
*text*	italic
**text**	bold
# Heading	# Heading (H1 size)
## Heading	## Heading (H2 size)
- Item	• Item (bullet list)
1. Item	1. Item (numbered list)
`code`	code (monospace)

Current Limitations

The Angular Editor is built on:

• contenteditable (native browser editing)
• document.execCommand() (deprecated API)
• HTML output (not Markdown)

This architecture is fundamentally incompatible with Markdown WYSIWYG.

Why This is Challenging

1. Different Data Model

// Current editor
Output: "<p><strong>bold</strong> and <em>italic</em></p>"

// WYSIWYG Markdown
Display: bold and italic (formatted)
Storage: "**bold** and *italic*" (Markdown)

2. Different Editing Model

• contenteditable: Browser handles all text editing
• ProseMirror: Custom document model + transform system
• Slate: React-specific editor framework
• Tiptap: Vue wrapper around ProseMirror

Proposed Solutions

Option 1: Fork with ProseMirror (Major Rewrite)

This would require completely rewriting the editor using ProseMirror:

import { Schema } from 'prosemirror-model';
import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';

// Define Markdown-compatible schema
const schema = new Schema({
  nodes: {
    doc: { content: 'block+' },
    paragraph: { 
      content: 'inline*',
      toMarkdown: (state, node) => {
        state.renderInline(node);
        state.closeBlock();
      }
    },
    // ... more nodes
  },
  marks: {
    strong: {
      toMarkdown: { open: '**', close: '**' }
    },
    em: {
      toMarkdown: { open: '*', close: '*' }
    }
  }
});

Pros:

• ✅ Full WYSIWYG Markdown support
• ✅ Powerful editing model
• ✅ Market opportunity (no Angular Markdown WYSIWYG)

Cons:

• ❌ Complete rewrite (months of work)
• ❌ Breaking changes for all users
• ❌ Different architecture
• ❌ Large dependency (ProseMirror is big)

Option 2: Markdown Plugin (Lightweight)

Add Markdown shortcuts to current editor:

// Detect Markdown patterns on keypress
onKeyPress(event: KeyboardEvent) {
  const text = this.getTextBeforeCursor();
  
  // Bold shortcut
  if (text.endsWith('**') && event.key !== '*') {
    this.convertToFormat('bold', text);
  }
  
  // Heading shortcut
  if (text.match(/^#{1,6}\s$/) && event.key === ' ') {
    const level = text.trim().length;
    this.convertToHeading(level);
  }
}

Pros:

• ✅ Keeps current architecture
• ✅ No breaking changes
• ✅ Incremental improvement

Cons:

• ❌ Not true Markdown (still HTML output)
• ❌ Half-baked solution
• ❌ Doesn't store as Markdown

Option 3: Separate Markdown Editor (New Package)

Create a new package: @kolkov/angular-markdown-editor

Built with ProseMirror, inspired by Tiptap but for Angular:

npm install @kolkov/angular-markdown-editor

import { AngularMarkdownEditorModule } from '@kolkov/angular-markdown-editor';

@Component({
  template: `
    <angular-markdown-editor
      [(ngModel)]="content"
      [config]="config">
    </angular-markdown-editor>
  `
})
export class MyComponent {
  content = '**Bold** and *italic* text';
  
  config = {
    shortcuts: true,  // Enable Markdown shortcuts
    output: 'markdown' // or 'html'
  };
}

Pros:

• ✅ Clean separation
• ✅ No breaking changes to existing editor
• ✅ Target Markdown users specifically
• ✅ Market opportunity

Cons:

• ❌ New package to maintain
• ❌ Large effort to build
• ❌ Need to learn ProseMirror

Similar Projects

React:

• Slate.js
• Lexical (Meta)
• React Quill

Vue:

• Tiptap (ProseMirror wrapper)
• Element Tiptap

Angular:

• ❌ No WYSIWYG Markdown editors!
• ngx-markdown (preview only, not WYSIWYG)
• This could be a first-mover advantage

Market Analysis

Demand:

• ✅ Markdown is widely used (GitHub, documentation, forums)
• ✅ WYSIWYG Markdown improves UX significantly
• ✅ No Angular solutions exist
• ✅ Developers need this for Angular CMS, docs sites, forums

Competition:

• ❌ No direct Angular competitors
• ⚠️ Users might use React/Vue editors as web components

Recommendation

Short-term: Keep this issue open as a feature request

Medium-term: Experiment with Option 2 (Markdown shortcuts plugin)

• Add basic shortcuts (**, *, #, etc.)
• Keep HTML output
• Test user reception

Long-term: If there's demand, create Option 3 (new package)

• @kolkov/angular-markdown-editor
• Built on ProseMirror
• Full WYSIWYG Markdown support
• First Angular WYSIWYG Markdown editor!

Community Interest

This is a significant feature that would require substantial development effort.

Would the community use this? Please 👍 this issue if you would use a WYSIWYG Markdown editor for Angular!

Would anyone contribute? Building this as a community effort could make it feasible.

Related

• #467 - execCommand deprecation (would be solved by ProseMirror rewrite)
• #377 - Multi-editor undo/redo (would be solved by ProseMirror)

Conclusion

This is a great idea with market potential, but requires:

• Major architectural change
• Significant development effort
• Possibly a separate package

Keeping this OPEN as a long-term feature request / discussion topic.

Thank you for the innovative suggestion!