cm-md-editor 2.0.0 → 2.1.0

package/index.html

@@ -21,23 +21,59 @@
 <div class="container-fluid">
     <label for="editor">cm-md-editor</label>
     <textarea id="editor">
-# cm-md-editor
+# Heading 1
 
-This is a minimal **markdown editor** which is used in chessmail.de.
+## Heading 2
 
-## Key features
+### Heading 3
 
-- Vanilla JavaScript module, without dependencies
-- Supports outlines with tab and shift-tab to indent and outdent
-- Supports the **bold** syntax with command-b/ctrl-b
-- Supports the _italic_ syntax with command-i/ctrl-i
-- Supports undo and redo with command-z/ctrl-z and command-shift-z/ctrl-shift-z
-- It is…
-	- lightweight
-	- easy to use
-	- fast
+This is a minimal **markdown editor** with _italic_ and **_bold italic_** text. You can also use ~~strikethrough~~ for deleted text.
 
-☝️ [Check out the Demo page](https://shaack.com/projekte/cm-md-editor/)</textarea>
+Inline `code spans` are highlighted and protect their content: `**not bold**`.
+
+> Blockquotes are highlighted with a green prefix.
+
+### Links and images
+
+Visit [the demo page](https://shaack.com/projekte/cm-md-editor/) or use a [reference link][ref].
+
+![An example image](https://example.com/image.png)
+
+[ref]: https://shaack.com
+
+### Lists
+
+- Unordered list item
+- Another item
+	- Nested item
+	- Deeper nesting
+
+1. Ordered list item
+2. Second item
+
+### Task lists
+
+- [ ] Unchecked task
+- [x] Completed task
+
+### Code block
+
+```javascript
+const editor = new MdEditor(element)
+console.log("syntax highlighted")
+```
+
+### Horizontal rules
+
+---
+
+### Escape sequences
+
+Literal stars: \*not bold\* and backslash: \\
+
+### HTML tags
+
+This has <mark>inline HTML</mark> and a <br> tag.</textarea>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-md-editor",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "a simple markdown editor",
   "main": "index.js",
   "scripts": {

package/src/MdEditor.js

@@ -45,6 +45,28 @@ export class MdEditor {
             })
             toolbar.appendChild(button)
         })
+
+        // Spacer to push wrap toggle to the right
+        const spacer = document.createElement('div')
+        spacer.style.cssText = 'flex:1;'
+        toolbar.appendChild(spacer)
+
+        // Wrap toggle button
+        this.wrapEnabled = true
+        this.wrapButton = document.createElement('button')
+        this.wrapButton.type = 'button'
+        this.wrapButton.title = 'Toggle word wrap'
+        this.wrapButton.style.cssText = 'background:none;border:none;border-radius:3px;cursor:pointer;padding:4px 6px;display:flex;align-items:center;justify-content:center;color:inherit;opacity:0.6;transition:opacity 0.15s,background 0.15s;'
+        this.wrapButton.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M4 6h16v2H4zm0 10h6v2H4zm0-5h16c0 0 0 0 0 0v0c0 2.2-1.8 4-4 4h-2l2-2h-1l-3 3 3 3h1l-2-2h2c3.3 0 6-2.7 6-6H4z"/></svg>`
+        this.wrapButton.addEventListener('mouseenter', () => { this.wrapButton.style.opacity = '1'; this.wrapButton.style.background = 'rgba(128,128,128,0.2)' })
+        this.wrapButton.addEventListener('mouseleave', () => { this.wrapButton.style.opacity = this.wrapEnabled ? '0.9' : '0.4'; this.wrapButton.style.background = 'none' })
+        this.wrapButton.addEventListener('mousedown', (e) => e.preventDefault())
+        this.wrapButton.addEventListener('click', (e) => {
+            e.preventDefault()
+            this.toggleWrapMode()
+        })
+        this.wrapButton.style.opacity = '0.9'
+        toolbar.appendChild(this.wrapButton)
     }
 
     createHighlightBackdrop() {
@@ -78,13 +100,15 @@ export class MdEditor {
         syncStyles()
 
         // Make textarea background transparent so backdrop shows through
+        this.element.style.overscrollBehavior = 'none'
         this.element.style.background = 'transparent'
         this.element.style.position = 'relative'
         this.element.style.caretColor = cs.color
 
         // Sync scroll
         this.element.addEventListener('scroll', () => {
-            this.highlightLayer.style.transform = `translate(0, -${this.element.scrollTop}px)`
+            this.backdrop.scrollTop = this.element.scrollTop
+            this.backdrop.scrollLeft = this.element.scrollLeft
         })
 
         // Update on input
@@ -97,38 +121,152 @@ export class MdEditor {
         const text = this.element.value
         const lines = text.split('\n')
         let html = ''
+        let inCodeBlock = false
+
         for (let i = 0; i < lines.length; i++) {
             if (i > 0) html += '\n'
-            let line = lines[i]
-            let result = this.escapeHtml(line)
+            const line = lines[i]
 
-            // Headings: emphasize entire line
+            // Fenced code block delimiter
+            if (/^`{3,}/.test(line)) {
+                inCodeBlock = !inCodeBlock
+                html += '<span style="color:rgba(130,170,200,0.7)">' + this.escapeHtml(line) + '</span>'
+                continue
+            }
+            if (inCodeBlock) {
+                html += '<span style="color:rgba(130,170,200,0.5)">' + this.escapeHtml(line) + '</span>'
+                continue
+            }
+
+            // Horizontal rule (3+ of same -, *, or _ with optional spaces)
+            if (/^\s{0,3}([-*_])\s*(\1\s*){2,}$/.test(line)) {
+                html += '<span style="color:rgba(128,128,128,0.6)">' + this.escapeHtml(line) + '</span>'
+                continue
+            }
+
+            // Headings
             const headingMatch = line.match(/^(#{1,6}) /)
             if (headingMatch) {
-                const hashes = this.escapeHtml(headingMatch[1])
-                const rest = this.escapeHtml(line.substring(headingMatch[0].length))
                 const opacity = Math.max(0.3, 0.8 - (headingMatch[1].length - 1) * 0.1)
-                result = `<span style="color:rgba(100,160,255,${opacity})">${hashes} </span><span style="color:rgba(100,160,255,${opacity})">${rest}</span>`
-            } else {
-                // Bold **text**
-                result = result.replace(/(\*\*)(.*?)(\*\*)/g,
-                    '<span style="color:rgba(255,180,80,0.5)">$1</span><span style="color:rgba(255,180,80,0.8)">$2</span><span style="color:rgba(255,180,80,0.5)">$3</span>')
-                // Italic _text_
-                result = result.replace(/((?:^|[^\\]))(\_)(.*?[^\\])(\_)/g,
-                    '$1<span style="color:rgba(180,130,255,0.5)">$2</span><span style="color:rgba(180,130,255,0.8)">$3</span><span style="color:rgba(180,130,255,0.5)">$4</span>')
-                // Unordered list markers
-                result = result.replace(/^(\t*)(- )/, (_, tabs, marker) =>
-                    this.escapeHtml(tabs) + '<span style="color:rgba(100,200,150,0.7)">' + this.escapeHtml(marker) + '</span>')
-                // Ordered list markers
-                result = result.replace(/^(\t*)(\d+\. )/, (_, tabs, marker) =>
-                    this.escapeHtml(tabs) + '<span style="color:rgba(100,200,150,0.7)">' + this.escapeHtml(marker) + '</span>')
+                html += '<span style="color:rgba(100,160,255,' + opacity + ')">' + this.escapeHtml(line) + '</span>'
+                continue
             }
-            html += result
+
+            // Reference link definition [ref]: url
+            const refMatch = line.match(/^(\s{0,3}\[)([^\]]+)(\]:\s+)(.+)$/)
+            if (refMatch) {
+                html += '<span style="color:rgba(100,180,220,0.5)">' + this.escapeHtml(refMatch[1]) + '</span>'
+                    + '<span style="color:rgba(100,180,220,0.8)">' + this.escapeHtml(refMatch[2]) + '</span>'
+                    + '<span style="color:rgba(100,180,220,0.5)">' + this.escapeHtml(refMatch[3]) + '</span>'
+                    + '<span style="color:rgba(100,180,220,0.6)">' + this.escapeHtml(refMatch[4]) + '</span>'
+                continue
+            }
+
+            // Blockquote prefix
+            let prefix = ''
+            let rest = line
+            const bqMatch = line.match(/^(\s*>+\s?)/)
+            if (bqMatch) {
+                prefix = '<span style="color:rgba(128,180,128,0.7)">' + this.escapeHtml(bqMatch[0]) + '</span>'
+                rest = line.substring(bqMatch[0].length)
+            }
+
+            html += prefix + this.highlightInline(rest)
         }
         // Trailing newline so the backdrop height matches the textarea
         this.highlightLayer.innerHTML = html + '\n'
     }
 
+    highlightInline(line) {
+        // Split by inline code to protect code content from other highlighting
+        const segments = []
+        let lastIndex = 0
+        const codeRegex = /`([^`]+)`/g
+        let match
+
+        while ((match = codeRegex.exec(line)) !== null) {
+            if (match.index > lastIndex) {
+                segments.push({type: 'text', content: line.substring(lastIndex, match.index)})
+            }
+            segments.push({type: 'code', content: match[0]})
+            lastIndex = codeRegex.lastIndex
+        }
+        if (lastIndex < line.length) {
+            segments.push({type: 'text', content: line.substring(lastIndex)})
+        }
+        if (segments.length === 0) {
+            segments.push({type: 'text', content: ''})
+        }
+
+        let result = ''
+        for (const seg of segments) {
+            if (seg.type === 'code') {
+                result += '<span style="color:rgba(130,170,200,0.7)">' + this.escapeHtml(seg.content) + '</span>'
+            } else {
+                result += this.highlightTextSegment(this.escapeHtml(seg.content))
+            }
+        }
+        return result
+    }
+
+    highlightTextSegment(escaped) {
+        let result = escaped
+
+        // Escape sequences: dim the backslash before markdown punctuation
+        result = result.replace(/\\([\\`*_{}[\]()#+\-.!~|])/g,
+            '<span style="color:rgba(128,128,128,0.4)">\\</span>$1')
+
+        // Unordered list markers with optional task list checkbox
+        result = result.replace(/^(\t*)(- )(\[[ xX]\] )?/, (_, tabs, marker, task) => {
+            let r = tabs + '<span style="color:rgba(100,200,150,0.7)">' + marker + '</span>'
+            if (task) {
+                r += '<span style="color:rgba(100,200,150,0.7)">' + task + '</span>'
+            }
+            return r
+        })
+
+        // Ordered list markers
+        result = result.replace(/^(\t*)(\d+\. )/, (_, tabs, marker) =>
+            tabs + '<span style="color:rgba(100,200,150,0.7)">' + marker + '</span>')
+
+        // Images ![alt](url) and Links [text](url)
+        result = result.replace(/(!?\[)(.*?)(\]\()(.+?)(\))/g,
+            '<span style="color:rgba(100,180,220,0.5)">$1</span><span style="color:rgba(100,180,220,0.8)">$2</span><span style="color:rgba(100,180,220,0.5)">$3</span><span style="color:rgba(100,180,220,0.6)">$4</span><span style="color:rgba(100,180,220,0.5)">$5</span>')
+
+        // Reference links [text][ref]
+        result = result.replace(/(\[)(.*?)(\]\[)(.*?)(\])/g,
+            '<span style="color:rgba(100,180,220,0.5)">$1</span><span style="color:rgba(100,180,220,0.8)">$2</span><span style="color:rgba(100,180,220,0.5)">$3</span><span style="color:rgba(100,180,220,0.6)">$4</span><span style="color:rgba(100,180,220,0.5)">$5</span>')
+
+        // Strikethrough ~~text~~
+        result = result.replace(/(~~)(.*?)(~~)/g,
+            '<span style="color:rgba(255,100,100,0.5)">$1</span><span style="color:rgba(255,100,100,0.7)">$2</span><span style="color:rgba(255,100,100,0.5)">$3</span>')
+
+        // Bold **text**
+        result = result.replace(/(\*\*)(.*?)(\*\*)/g,
+            '<span style="color:rgba(255,180,80,0.5)">$1</span><span style="color:rgba(255,180,80,0.8)">$2</span><span style="color:rgba(255,180,80,0.5)">$3</span>')
+
+        // Italic _text_
+        result = result.replace(/((?:^|[^\\]))(\_)(.*?[^\\])(\_)/g,
+            '$1<span style="color:rgba(180,130,255,0.5)">$2</span><span style="color:rgba(180,130,255,0.8)">$3</span><span style="color:rgba(180,130,255,0.5)">$4</span>')
+
+        // HTML tags
+        result = result.replace(/(&lt;)(\/?[a-zA-Z]\w*)(.*?)(&gt;)/g,
+            '<span style="color:rgba(200,120,120,0.5)">$1$2$3$4</span>')
+
+        return result
+    }
+
+    toggleWrapMode() {
+        this.wrapEnabled = !this.wrapEnabled
+        const wrap = this.wrapEnabled
+        this.element.style.whiteSpace = wrap ? 'pre-wrap' : 'pre'
+        this.element.style.overflowX = wrap ? 'hidden' : 'auto'
+        this.highlightLayer.style.whiteSpace = wrap ? 'pre-wrap' : 'pre'
+        this.highlightLayer.style.overflowWrap = wrap ? 'break-word' : 'normal'
+        this.wrapButton.style.opacity = wrap ? '0.9' : '0.4'
+        this.updateHighlight()
+    }
+
     escapeHtml(str) {
         return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
     }