cm-md-editor 2.3.1 → 2.3.3

package/package.json

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

package/src/MdEditor.js

@@ -27,6 +27,10 @@ export class MdEditor {
         this.element.addEventListener('keydown', (e) => this.handleKeyDown(e))
         this.createToolbar()
         this.createHighlightBackdrop()
+        if (!this.wrapEnabled && this.highlightLayer) {
+            this.highlightLayer.style.whiteSpace = 'pre'
+            this.highlightLayer.style.overflowWrap = 'normal'
+        }
     }
 
     createToolbar() {
@@ -73,7 +77,9 @@ export class MdEditor {
         toolbar.appendChild(spacer)
 
         // Wrap toggle button
-        this.wrapEnabled = true
+        this.wrapStorageKey = 'mdEditor_wrap_' + (this.element.id || this.element.name || 'default')
+        const savedWrap = localStorage.getItem(this.wrapStorageKey)
+        this.wrapEnabled = savedWrap !== null ? savedWrap === 'true' : true
         this.wrapButton = document.createElement('button')
         this.wrapButton.type = 'button'
         this.wrapButton.title = 'Toggle word wrap'
@@ -86,8 +92,13 @@ export class MdEditor {
             e.preventDefault()
             this.toggleWrapMode()
         })
-        this.wrapButton.style.opacity = '0.9'
+        this.wrapButton.style.opacity = this.wrapEnabled ? '0.9' : '0.4'
         toolbar.appendChild(this.wrapButton)
+        // Apply saved wrap state
+        if (!this.wrapEnabled) {
+            this.element.style.whiteSpace = 'pre'
+            this.element.style.overflowX = 'auto'
+        }
     }
 
     createHighlightBackdrop() {
@@ -290,7 +301,7 @@ export class MdEditor {
             '<span style="color:rgba(' + c('colorEscape') + ',1)">\\</span>$1')
 
         // Unordered list markers with optional task list checkbox
-        result = result.replace(/^(\t*)(- )(\[[ xX]\] )?/, (_, tabs, marker, task) => {
+        result = result.replace(/^((?:\t|  )*)(- )(\[[ xX]\] )?/, (_, tabs, marker, task) => {
             let r = tabs + this.colorSpan('colorList', marker)
             if (task) {
                 r += this.colorSpan('colorList', task)
@@ -299,7 +310,7 @@ export class MdEditor {
         })
 
         // Ordered list markers
-        result = result.replace(/^(\t*)(\d+\. )/, (_, tabs, marker) =>
+        result = result.replace(/^((?:\t|  )*)(\d+\. )/, (_, tabs, marker) =>
             tabs + this.colorSpan('colorList', marker))
 
         // Images ![alt](url) and Links [text](url)
@@ -333,6 +344,7 @@ export class MdEditor {
 
     toggleWrapMode() {
         this.wrapEnabled = !this.wrapEnabled
+        localStorage.setItem(this.wrapStorageKey, this.wrapEnabled)
         const wrap = this.wrapEnabled
         this.element.style.whiteSpace = wrap ? 'pre-wrap' : 'pre'
         this.element.style.overflowX = wrap ? 'hidden' : 'auto'