cm-md-editor 2.2.1 → 2.3.1

package/index.html

@@ -17,6 +17,7 @@
             font-family: monospace;
             tab-size: 4;
             line-height: 1.3;
+            background-color: #111;
         }
     </style>
 </head>
@@ -35,7 +36,7 @@ description: Some example text for the editor
 
 ### Heading 3
 
-This is a minimal **markdown editor** with _italic_ and **_bold italic_** text. You can also use ~~strikethrough~~ for deleted text.
+This is a minimal **markdown editor** with _italic_ and *also italic* and **_bold italic_** text. You can also use ~~strikethrough~~ for deleted text.
 
 <!-- This is a comment -->
 

package/package.json

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

package/src/MdEditor.js

@@ -102,7 +102,7 @@ export class MdEditor {
         // Copy textarea computed styles to backdrop
         const cs = window.getComputedStyle(this.element)
         this.backdrop.style.cssText = `position:absolute;overflow:hidden;pointer-events:none;z-index:1;opacity:${this.props.syntaxHighlight};`
-        this.highlightLayer.style.cssText = `white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;color:transparent;`
+        this.highlightLayer.style.cssText = `white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;`
 
         const syncStyles = () => {
             const cs = window.getComputedStyle(this.element)
@@ -121,17 +121,23 @@ export class MdEditor {
         }
         syncStyles()
 
-        // Make textarea background transparent so backdrop shows through
+        // Move textarea bg to backdrop, make textarea transparent so backdrop shows through
+        const originalBg = cs.getPropertyValue('background-color')
+        this.backdrop.style.background = originalBg
         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.backdrop.scrollTop = this.element.scrollTop
-            this.backdrop.scrollLeft = this.element.scrollLeft
-        })
+        this.element.style.zIndex = '2'
+        const originalColor = cs.color
+        this.element.style.caretColor = originalColor
+        this.element.style.color = 'transparent'
+        this.highlightLayer.style.color = originalColor
+
+        // Sync scroll via transform — no visible jitter since all text is in the highlight layer
+        const syncScroll = () => {
+            this.highlightLayer.style.transform = `translate(${-this.element.scrollLeft}px, ${-this.element.scrollTop}px)`
+        }
+        this.element.addEventListener('scroll', syncScroll)
 
         // Update on input
         this.element.addEventListener('input', () => this.updateHighlight())
@@ -312,8 +318,10 @@ export class MdEditor {
         result = result.replace(/(\*\*)(.*?)(\*\*)/g, (_, p1, p2, p3) =>
             this.colorSpan('colorBold', p1) + this.colorSpan('colorBold', p2) + this.colorSpan('colorBold', p3))
 
-        // Italic _text_
-        result = result.replace(/((?:^|[^\\]))(\_)(.*?[^\\])(\_)/g, (_, pre, p1, p2, p3) =>
+        // Italic _text_ or *text* (single asterisk, after bold has been handled)
+        result = result.replace(/((?:^|[^\\*]))(\_)(.*?[^\\])(\_)/g, (_, pre, p1, p2, p3) =>
+            pre + this.colorSpan('colorItalic', p1) + this.colorSpan('colorItalic', p2) + this.colorSpan('colorItalic', p3))
+        result = result.replace(/((?:^|[^\\*]))(\*)((?!\*).+?[^\\])(\*)/g, (_, pre, p1, p2, p3) =>
             pre + this.colorSpan('colorItalic', p1) + this.colorSpan('colorItalic', p2) + this.colorSpan('colorItalic', p3))
 
         // HTML tags