cm-md-editor 2.3.2 → 2.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Stefan Haack (shaack.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,15 +1,83 @@
 # cm-md-editor
 
-This is a minimal **markdown editor** which is used in chessmail.de.
+A minimal, dependency-free markdown editor as a vanilla JavaScript ES6 module.
+
+[Demo](https://shaack.com/projekte/cm-md-editor/)
+
+![Screenshot](screenshot.png)
 
 ## Key features
 
-- 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
+- Vanilla JavaScript module, zero dependencies
+- Syntax highlighting for headings, bold, italic, code, lists, links, images, blockquotes, HTML tags, horizontal rules, front matter and more
+- Toolbar with configurable buttons (headings, bold, italic, lists, links, images)
+- Word wrap toggle with persistent state (localStorage)
+- List mode: Tab/Shift-Tab to indent/outdent, auto-continuation on Enter
+- Bold with Ctrl/Cmd+B, italic with Ctrl/Cmd+I
+- Native undo/redo support (Ctrl/Cmd+Z / Ctrl/Cmd+Shift+Z)
+- Lightweight, fast, easy to use
+
+## Installation
+
+```bash
+npm install cm-md-editor
+```
+
+## Usage
+
+```html
+<textarea id="editor"></textarea>
+
+<script type="module">
+    import {MdEditor} from "cm-md-editor/src/MdEditor.js"
+
+    const editor = new MdEditor(document.getElementById("editor"))
+</script>
+```
+
+With custom configuration:
+
+```javascript
+const editor = new MdEditor(document.getElementById("editor"), {
+    wordWrap: false,
+    toolbarButtons: ["h1", "h2", "bold", "italic", "ul", "link"]
+})
+```
+
+## Configuration (props)
+
+All props are optional. Pass them as the second argument to the constructor.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `wordWrap` | `boolean` | `true` | Default word wrap state. Overridden by localStorage if the user has toggled it |
+| `toolbarButtons` | `string[]` | `["h1", "h2", "h3", "bold", "italic", "ul", "ol", "link", "image"]` | Which toolbar buttons to show. Available: `h1`, `h2`, `h3`, `bold`, `italic`, `ul`, `ol`, `link`, `image` |
+| `colorHeading` | `string` | `"100,160,255"` | RGB color for headings |
+| `colorCode` | `string` | `"130,170,200"` | RGB color for code spans and fenced code blocks |
+| `colorComment` | `string` | `"128,128,128"` | RGB color for HTML comments |
+| `colorLink` | `string` | `"100,180,220"` | RGB color for links and images |
+| `colorBlockquote` | `string` | `"100,200,150"` | RGB color for blockquote prefixes |
+| `colorList` | `string` | `"100,200,150"` | RGB color for list markers |
+| `colorStrikethrough` | `string` | `"255,100,100"` | RGB color for ~~strikethrough~~ |
+| `colorBold` | `string` | `"255,180,80"` | RGB color for **bold** |
+| `colorItalic` | `string` | `"180,130,255"` | RGB color for _italic_ |
+| `colorHtmlTag` | `string` | `"200,120,120"` | RGB color for HTML tags |
+| `colorHorizontalRule` | `string` | `"128,128,200"` | RGB color for horizontal rules |
+| `colorEscape` | `string` | `"128,128,128"` | RGB color for escape sequences |
+| `colorFrontMatter` | `string` | `"128,128,200"` | RGB color for YAML front matter |
+
+Colors are specified as RGB strings (e.g. `"255,180,80"`) and rendered at full opacity.
+
+## Keyboard shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| Ctrl/Cmd + B | Toggle bold |
+| Ctrl/Cmd + I | Toggle italic |
+| Tab | Indent list item or insert tab |
+| Shift + Tab | Outdent list item |
+| Enter | Auto-continue list (unordered and ordered) |
+
+## License
+
+MIT

package/package.json

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

package/src/MdEditor.js

@@ -7,7 +7,6 @@ export class MdEditor {
     constructor(element, props) {
         this.element = element
         this.props = {
-            syntaxHighlight: 1, // opacity of the highlighting, set 0 to disable
             colorHeading: "100,160,255",
             colorCode: "130,170,200",
             colorComment: "128,128,128",
@@ -21,12 +20,17 @@ export class MdEditor {
             colorHorizontalRule: "128,128,200",
             colorEscape: "128,128,128",
             colorFrontMatter: "128,128,200",
+            wordWrap: true,
             toolbarButtons: ["h1", "h2", "h3", "bold", "italic", "ul", "ol", "link", "image"],
             ...props
         }
         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' : this.props.wordWrap
         this.wrapButton = document.createElement('button')
         this.wrapButton.type = 'button'
         this.wrapButton.title = 'Toggle word wrap'
@@ -86,12 +92,16 @@ 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() {
-        if (!this.props.syntaxHighlight) return
         const container = this.element.parentNode
         container.style.position = 'relative'
         this.backdrop = document.createElement('div')
@@ -101,7 +111,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.backdrop.style.cssText = `position:absolute;overflow:hidden;pointer-events:none;z-index:1;`
         this.highlightLayer.style.cssText = `white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;`
 
         const syncStyles = () => {
@@ -333,6 +343,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'