overtype 2.3.9 → 2.3.10

package/README.md

@@ -1,6 +1,6 @@
 # OverType
 
-A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~110KB minified with all features.
+A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay technique. Includes optional toolbar. ~111KB minified with all features.
 
 ## Live Examples
 
@@ -19,7 +19,7 @@ A lightweight markdown editor library with perfect WYSIWYG alignment using an in
 - ⌨️ **Keyboard shortcuts** - Common markdown shortcuts (Cmd/Ctrl+B for bold, etc.)
 - 📱 **Mobile optimized** - Responsive design with mobile-specific styles
 - 🔄 **DOM persistence aware** - Recovers from existing DOM (perfect for HyperClay and similar platforms)
-- 🚀 **Lightweight** - ~110KB minified
+- 🚀 **Lightweight** - ~111KB minified
 - 🎯 **Optional toolbar** - Clean, minimal toolbar with all essential formatting
 - ✨ **Smart shortcuts** - Keyboard shortcuts with selection preservation
 - 📝 **Smart list continuation** - GitHub-style automatic list continuation on Enter
@@ -35,7 +35,7 @@ We overlap an invisible textarea on top of styled output, giving the illusion of
 
 | Feature | OverType | HyperMD | Milkdown | TUI Editor | EasyMDE |
 |---------|----------|---------|----------|------------|---------|
-| **Size** | ~110KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
+| **Size** | ~111KB | 364.02 KB | 344.51 KB | 560.99 KB | 323.69 KB |
 | **Dependencies** | Bundled | CodeMirror | ProseMirror + plugins | Multiple libs | CodeMirror |
 | **Setup** | Single file | Complex config | Build step required | Complex config | Moderate |
 | **Approach** | Invisible textarea | ContentEditable | ContentEditable | ContentEditable | CodeMirror |
@@ -145,6 +145,24 @@ const [editor] = new OverType('#editor', {
 // orderedList, taskList, quote, separator, viewMode
 ```
 
+**Driving formatting from your own UI:**
+
+OverType re-exports the bundled `markdown-actions` library so you can build a fully custom toolbar (or any UI) without installing or bundling `markdown-actions` separately:
+
+```javascript
+import OverType, { markdownActions } from 'overtype';
+
+const [editor] = new OverType('#editor');
+
+// Apply formatting to the editor's textarea directly
+document.querySelector('#bold-btn').addEventListener('click', () => {
+  markdownActions.toggleBold(editor.textarea);
+  editor.textarea.focus();
+});
+```
+
+Available actions include `toggleBold`, `toggleItalic`, `toggleCode`, `insertLink`, `toggleBulletList`, `toggleNumberedList`, `toggleQuote`, `toggleTaskList`, `insertHeader`, `toggleH1`/`H2`/`H3`, `getActiveFormats`, `hasFormat`, `expandSelection`, and `applyCustomFormat`. The same namespace is available as `window.markdownActions` and `OverType.markdownActions` in script-tag builds.
+
 See [examples/custom-toolbar.html](examples/custom-toolbar.html) for complete examples.
 
 ### View Modes
@@ -236,6 +254,38 @@ document.querySelector('form').addEventListener('submit', (e) => {
 });
 ```
 
+### File Uploads
+
+OverType handles paste and drop of files when `fileUpload` is configured. You upload to your own backend in `onInsertFile` and return the markdown to insert. When that markdown link is later removed from the editor, `onRemoveFile` fires so you can clean up the backend file.
+
+```javascript
+const [editor] = new OverType('#editor', {
+  fileUpload: {
+    enabled: true,
+    maxSize: 10 * 1024 * 1024,                  // 10MB
+    mimeTypes: ['image/png', 'image/jpeg'],     // optional whitelist; empty = accept all
+    batch: false,                               // true = one onInsertFile call per drop
+
+    // Upload to your backend, return the markdown link to insert
+    onInsertFile: async (file) => {
+      const { url } = await uploadToBackend(file);
+      const isImage = file.type.startsWith('image/');
+      return isImage ? `![${file.name}](${url})` : `[${file.name}](${url})`;
+    },
+
+    // Optional: fires when an inserted link is removed from the editor.
+    // Useful for deleting orphaned files from storage.
+    onRemoveFile: ({ url, filename, file }) => {
+      fetch(`/api/files/${encodeURIComponent(url)}`, { method: 'DELETE' });
+    }
+  }
+});
+```
+
+`onRemoveFile` only fires for URLs that OverType originally inserted via `onInsertFile`. URL edits, manual paste of an existing link, or programmatic edits to non-tracked URLs do not trigger it.
+
+See [examples/file-upload.html](website/examples/file-upload.html) for a complete working demo.
+
 ### Custom Theme
 
 ```javascript
@@ -476,7 +526,19 @@ new OverType(target, options)
   
   // Callbacks
   onChange: (value, instance) => {},
-  onKeydown: (event, instance) => {}
+  onKeydown: (event, instance) => {},
+  onFocus: (event, instance) => {},
+  onBlur: (event, instance) => {},
+
+  // File upload (paste/drop) — see "File Uploads" section below
+  fileUpload: {
+    enabled: true,
+    maxSize: 10 * 1024 * 1024,                            // bytes (default 10MB)
+    mimeTypes: [],                                        // empty = accept all
+    batch: false,                                         // single onInsertFile call per drop
+    onInsertFile: async (file) => `[${file.name}](url)`,  // required: return inserted markdown
+    onRemoveFile: ({ url, filename, file }) => {}         // fires when an inserted link is removed
+  }
 }
 ```
 
@@ -554,10 +616,12 @@ OverType.init(target, options)
 
 // Initialize with per-element config via data-ot-* attributes
 // Uses kebab-case: data-ot-show-stats="true" → showStats: true
+// Accepts a selector, Element, NodeList, or Array of elements
 OverType.initFromData('.editor', { /* defaults */ })
 
-// Get instance from element
-OverType.getInstance(element)
+// Get instance from a selector, Element, NodeList, or Array
+// Returns the instance for the first matching element
+OverType.getInstance(target)
 
 // Destroy all instances
 OverType.destroyAll()
@@ -763,7 +827,7 @@ Uses kebab-case attributes that convert to camelCase options (e.g., `data-ot-sho
 
 **Supported:** `toolbar`, `theme`, `value`, `placeholder`, `autofocus`, `auto-resize`, `min-height`, `max-height`, `font-size`, `line-height`, `show-stats`, `smart-lists`, `show-active-line-raw`
 
-**Not supported (use JS):** `toolbarButtons`, `textareaProps`, `onChange`, `onKeydown`, `statsFormatter`, `codeHighlighter`, `colors`, `mobile`
+**Not supported (use JS):** `toolbarButtons`, `textareaProps`, `onChange`, `onKeydown`, `onFocus`, `onBlur`, `statsFormatter`, `codeHighlighter`, `colors`, `mobile`
 
 ## Contributors
 
@@ -776,7 +840,7 @@ Special thanks to:
 - [Lyric Wai](https://github.com/lyricat) - Fixed double-escaping of links ([#64](https://github.com/panphora/overtype/pull/64)), shared code block alignment fix ([#65](https://github.com/panphora/overtype/issues/65))
 - [kozi](https://github.com/kozi) - Reported Firefox link tooltip bug ([#68](https://github.com/panphora/overtype/issues/68)), toolbar positioning ([#69](https://github.com/panphora/overtype/issues/69)), theme CSS variable issues ([#70](https://github.com/panphora/overtype/issues/70), [#71](https://github.com/panphora/overtype/issues/71))
 - [1951FDG](https://github.com/1951FDG) - Reported unordered list rendering bug ([#74](https://github.com/panphora/overtype/issues/74)), suggested showStats() API improvement ([#77](https://github.com/panphora/overtype/issues/77)), reported placeholder CSS regression ([#102](https://github.com/panphora/overtype/issues/102))
-- [nodesocket](https://github.com/nodesocket) - Reported toolbarButtons export issues ([#73](https://github.com/panphora/overtype/issues/73), [#78](https://github.com/panphora/overtype/issues/78)), suggested image toolbar button ([#89](https://github.com/panphora/overtype/issues/89)), reported custom theme stats bar styling ([#101](https://github.com/panphora/overtype/issues/101))
+- [nodesocket](https://github.com/nodesocket) - Reported toolbarButtons export issues ([#73](https://github.com/panphora/overtype/issues/73), [#78](https://github.com/panphora/overtype/issues/78)), suggested image toolbar button ([#89](https://github.com/panphora/overtype/issues/89)), reported custom theme stats bar styling ([#101](https://github.com/panphora/overtype/issues/101)), suggested onRemoveFile callback ([#104](https://github.com/panphora/overtype/issues/104))
 - [Travis Bell](https://github.com/travisbell) - Reported keyboard shortcuts bug in ESM build ([#80](https://github.com/panphora/overtype/issues/80))
 - [fab2713](https://github.com/fab2713) - Reported italic rendering in lists ([#81](https://github.com/panphora/overtype/issues/81)), reinit maxHeight ([#82](https://github.com/panphora/overtype/issues/82)), placeholder visibility ([#83](https://github.com/panphora/overtype/issues/83)), suggested auto theme ([#84](https://github.com/panphora/overtype/issues/84)), relative URL prefix ([#85](https://github.com/panphora/overtype/issues/85)), minification improvements ([#94](https://github.com/panphora/overtype/issues/94))
 - [oooo-ps](https://github.com/oooo-ps) - Reported remote script loading issue ([#86](https://github.com/panphora/overtype/issues/86))

package/dist/overtype-webcomponent.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.3.9
+ * OverType v2.3.10
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -5172,6 +5172,7 @@ var _OverType = class _OverType {
       return;
     }
     this._fileUploadCounter = 0;
+    this._uploadedFiles = /* @__PURE__ */ new Map();
     this._boundHandleFilePaste = this._handleFilePaste.bind(this);
     this._boundHandleFileDrop = this._handleFileDrop.bind(this);
     this._boundHandleDragOver = this._handleDragOver.bind(this);
@@ -5180,6 +5181,53 @@ var _OverType = class _OverType {
     this.textarea.addEventListener("dragover", this._boundHandleDragOver);
     this.fileUploadInitialized = true;
   }
+  /**
+   * Extract URLs from markdown link syntax: [text](url) or ![text](url).
+   * @private
+   */
+  _extractMarkdownUrls(text) {
+    const urls = [];
+    const re = /!?\[[^\]]*\]\(([^)\s]+)/g;
+    let m;
+    while ((m = re.exec(text)) !== null)
+      urls.push(m[1]);
+    return urls;
+  }
+  /**
+   * Track URLs that were just inserted, pairing each with the source File.
+   * If multiple URLs appear in one inserted block, all get associated with
+   * the same file (rare; happens if onInsertFile returns several links).
+   * @private
+   */
+  _trackInsertedUrls(insertedText, file) {
+    if (!this._uploadedFiles || !file || !insertedText)
+      return;
+    for (const url of this._extractMarkdownUrls(insertedText)) {
+      this._uploadedFiles.set(url, { filename: file.name, file });
+    }
+  }
+  /**
+   * Diff the tracked-URL set against the current value and fire
+   * fileUpload.onRemoveFile for any URL no longer present.
+   * @private
+   */
+  _checkForRemovedUploads() {
+    var _a;
+    if (!this._uploadedFiles || this._uploadedFiles.size === 0)
+      return;
+    const cb = (_a = this.options.fileUpload) == null ? void 0 : _a.onRemoveFile;
+    const value = this.textarea.value;
+    const removed = [];
+    for (const [url, info] of this._uploadedFiles) {
+      if (!value.includes(url))
+        removed.push({ url, info });
+    }
+    for (const { url, info } of removed) {
+      this._uploadedFiles.delete(url);
+      if (cb)
+        cb({ url, filename: info.filename, file: info.file });
+    }
+  }
   _handleFilePaste(e) {
     var _a, _b;
     if (!((_b = (_a = e == null ? void 0 : e.clipboardData) == null ? void 0 : _a.files) == null ? void 0 : _b.length))
@@ -5212,6 +5260,7 @@ var _OverType = class _OverType {
       }
       this.options.fileUpload.onInsertFile(file).then((text) => {
         this.textarea.value = this.textarea.value.replace(placeholder, text);
+        this._trackInsertedUrls(text, file);
         this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
       }, (error) => {
         console.error("OverType: File upload failed", error);
@@ -5224,6 +5273,7 @@ var _OverType = class _OverType {
         const texts = Array.isArray(result) ? result : [result];
         texts.forEach((text, index) => {
           this.textarea.value = this.textarea.value.replace(files[index].placeholder, text);
+          this._trackInsertedUrls(text, files[index].file);
         });
         this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
       }, (error) => {
@@ -5245,6 +5295,7 @@ var _OverType = class _OverType {
     this._boundHandleFilePaste = null;
     this._boundHandleFileDrop = null;
     this._boundHandleDragOver = null;
+    this._uploadedFiles = null;
     this.fileUploadInitialized = false;
   }
   insertAtCursor(text) {
@@ -5289,9 +5340,12 @@ var _OverType = class _OverType {
    * @private
    */
   _notifyChange() {
-    if (!this.options.onChange || !this.initialized)
+    if (!this.initialized)
       return;
-    this.options.onChange(this.textarea.value, this);
+    this._checkForRemovedUploads();
+    if (this.options.onChange) {
+      this.options.onChange(this.textarea.value, this);
+    }
   }
   /**
    * Apply background styling to code blocks