overtype 1.2.2 → 1.2.4

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "overtype",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "A lightweight markdown editor library with perfect WYSIWYG alignment using an invisible textarea overlay",
   "main": "dist/overtype.cjs",
   "module": "dist/overtype.esm.js",
   "browser": "dist/overtype.min.js",
+  "types": "dist/overtype.d.ts",
   "unpkg": "dist/overtype.min.js",
   "jsdelivr": "dist/overtype.min.js",
   "exports": {
@@ -20,12 +21,13 @@
     "build:prod": "npm test && npm run build",
     "dev": "http-server -p 8080 -c-1",
     "watch": "node build.js --watch",
-    "test": "node test/overtype.test.js && node test/preview-mode.test.js && node test/links.test.js && node test/api-methods.test.js && node test/comprehensive-alignment.test.js",
+    "test": "node test/overtype.test.js && node test/preview-mode.test.js && node test/links.test.js && node test/api-methods.test.js && node test/comprehensive-alignment.test.js && npm run test:types",
     "test:main": "node test/overtype.test.js",
     "test:preview": "node test/preview-mode.test.js",
     "test:links": "node test/links.test.js",
     "test:api": "node test/api-methods.test.js",
     "test:alignment": "node test/comprehensive-alignment.test.js",
+    "test:types": "tsc --noEmit test-types.ts",
     "preversion": "npm test",
     "size": "gzip-size dist/overtype.min.js",
     "serve": "http-server -p 8080 -c-1"

package/src/link-tooltip.js

@@ -58,29 +58,29 @@ export class LinkTooltip {
           position: absolute;
           position-anchor: var(--target-anchor, --link-0);
           position-area: block-end center;
-          margin-top: 8px;
+          margin-top: 8px !important;
           
-          background: #333;
-          color: white;
-          padding: 6px 10px;
-          border-radius: 16px;
-          font-size: 12px;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-          display: none;
-          z-index: 10000;
-          cursor: pointer;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-          max-width: 300px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
+          background: #333 !important;
+          color: white !important;
+          padding: 6px 10px !important;
+          border-radius: 16px !important;
+          font-size: 12px !important;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+          display: none !important;
+          z-index: 10000 !important;
+          cursor: pointer !important;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
+          max-width: 300px !important;
+          white-space: nowrap !important;
+          overflow: hidden !important;
+          text-overflow: ellipsis !important;
           
           position-try: most-width block-end inline-end, flip-inline, block-start center;
           position-visibility: anchors-visible;
         }
         
         .overtype-link-tooltip.visible {
-          display: flex;
+          display: flex !important;
         }
       }
     `;

package/src/overtype.d.ts

@@ -71,7 +71,16 @@ export interface Options {
   // Features
   showActiveLineRaw?: boolean;
   showStats?: boolean;
-  toolbar?: boolean;
+  toolbar?: boolean | {
+    buttons?: Array<{
+      name?: string;
+      icon?: string;
+      title?: string;
+      action?: string;
+      separator?: boolean;
+    }>;
+  };
+  smartLists?: boolean;       // v1.2.3+ Smart list continuation
   statsFormatter?: (stats: Stats) => string;
 
   // Theme (deprecated in favor of global theme)
@@ -107,6 +116,10 @@ export interface OverTypeConstructor {
   getTheme(name: string): Theme;
 }
 
+export interface RenderOptions {
+  cleanHTML?: boolean;
+}
+
 export interface OverTypeInstance {
   // Public properties
   container: HTMLElement;
@@ -135,6 +148,15 @@ export interface OverTypeInstance {
   showStats(show: boolean): void;
   setTheme(theme: string | Theme): void;
   updatePreview(): void;
+  
+  // HTML output methods
+  getRenderedHTML(options?: RenderOptions): string;
+  getCleanHTML(): string;
+  getPreviewHTML(): string;
+  
+  // View mode methods
+  showPlainTextarea(show: boolean): void;
+  showPreviewMode(show: boolean): void;
 }
 
 // Declare the constructor as a constant with proper typing

package/src/overtype.js

@@ -104,7 +104,8 @@ class OverType {
 
       // Setup toolbar if enabled
       if (this.options.toolbar) {
-        this.toolbar = new Toolbar(this);
+        const toolbarButtons = typeof this.options.toolbar === 'object' ? this.options.toolbar.buttons : null;
+        this.toolbar = new Toolbar(this, toolbarButtons);
         this.toolbar.create();
         
         // Update toolbar states on selection change
@@ -164,7 +165,8 @@ class OverType {
         showActiveLineRaw: false,
         showStats: false,
         toolbar: false,
-        statsFormatter: null
+        statsFormatter: null,
+        smartLists: true  // Enable smart list continuation
       };
       
       // Remove theme and colors from options - these are now global
@@ -583,6 +585,14 @@ class OverType {
         return;
       }
       
+      // Handle Enter key for smart list continuation
+      if (event.key === 'Enter' && !event.shiftKey && !event.metaKey && !event.ctrlKey && this.options.smartLists) {
+        if (this.handleSmartListContinuation()) {
+          event.preventDefault();
+          return;
+        }
+      }
+      
       // Let shortcuts manager handle other keys
       const handled = this.shortcuts.handleKeydown(event);
       
@@ -592,6 +602,141 @@ class OverType {
       }
     }
 
+    /**
+     * Handle smart list continuation
+     * @returns {boolean} Whether the event was handled
+     */
+    handleSmartListContinuation() {
+      const textarea = this.textarea;
+      const cursorPos = textarea.selectionStart;
+      const context = MarkdownParser.getListContext(textarea.value, cursorPos);
+      
+      if (!context || !context.inList) return false;
+      
+      // Handle empty list item (exit list)
+      if (context.content.trim() === '' && cursorPos >= context.markerEndPos) {
+        this.deleteListMarker(context);
+        return true;
+      }
+      
+      // Handle text splitting if cursor is in middle of content
+      if (cursorPos > context.markerEndPos && cursorPos < context.lineEnd) {
+        this.splitListItem(context, cursorPos);
+      } else {
+        // Just add new item after current line
+        this.insertNewListItem(context);
+      }
+      
+      // Handle numbered list renumbering
+      if (context.listType === 'numbered') {
+        this.scheduleNumberedListUpdate();
+      }
+      
+      return true;
+    }
+    
+    /**
+     * Delete list marker and exit list
+     * @private
+     */
+    deleteListMarker(context) {
+      // Select from line start to marker end
+      this.textarea.setSelectionRange(context.lineStart, context.markerEndPos);
+      document.execCommand('delete');
+      
+      // Trigger input event
+      this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    
+    /**
+     * Insert new list item
+     * @private
+     */
+    insertNewListItem(context) {
+      const newItem = MarkdownParser.createNewListItem(context);
+      document.execCommand('insertText', false, '\n' + newItem);
+      
+      // Trigger input event
+      this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    
+    /**
+     * Split list item at cursor position
+     * @private
+     */
+    splitListItem(context, cursorPos) {
+      // Get text after cursor
+      const textAfterCursor = context.content.substring(cursorPos - context.markerEndPos);
+      
+      // Delete text after cursor
+      this.textarea.setSelectionRange(cursorPos, context.lineEnd);
+      document.execCommand('delete');
+      
+      // Insert new list item with remaining text
+      const newItem = MarkdownParser.createNewListItem(context);
+      document.execCommand('insertText', false, '\n' + newItem + textAfterCursor);
+      
+      // Position cursor after new list marker
+      const newCursorPos = this.textarea.selectionStart - textAfterCursor.length;
+      this.textarea.setSelectionRange(newCursorPos, newCursorPos);
+      
+      // Trigger input event
+      this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    
+    /**
+     * Schedule numbered list renumbering
+     * @private
+     */
+    scheduleNumberedListUpdate() {
+      // Clear any pending update
+      if (this.numberUpdateTimeout) {
+        clearTimeout(this.numberUpdateTimeout);
+      }
+      
+      // Schedule update after current input cycle
+      this.numberUpdateTimeout = setTimeout(() => {
+        this.updateNumberedLists();
+      }, 10);
+    }
+    
+    /**
+     * Update/renumber all numbered lists
+     * @private
+     */
+    updateNumberedLists() {
+      const value = this.textarea.value;
+      const cursorPos = this.textarea.selectionStart;
+      
+      const newValue = MarkdownParser.renumberLists(value);
+      
+      if (newValue !== value) {
+        // Calculate cursor offset
+        let offset = 0;
+        const oldLines = value.split('\n');
+        const newLines = newValue.split('\n');
+        let charCount = 0;
+        
+        for (let i = 0; i < oldLines.length && charCount < cursorPos; i++) {
+          if (oldLines[i] !== newLines[i]) {
+            const diff = newLines[i].length - oldLines[i].length;
+            if (charCount + oldLines[i].length < cursorPos) {
+              offset += diff;
+            }
+          }
+          charCount += oldLines[i].length + 1; // +1 for newline
+        }
+        
+        // Update textarea
+        this.textarea.value = newValue;
+        const newCursorPos = cursorPos + offset;
+        this.textarea.setSelectionRange(newCursorPos, newCursorPos);
+        
+        // Trigger update
+        this.textarea.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    }
+
     /**
      * Handle scroll events
      * @private
@@ -627,16 +772,21 @@ class OverType {
 
     /**
      * Get the rendered HTML of the current content
-     * @param {boolean} processForPreview - If true, post-processes HTML for preview mode (consolidates lists/code blocks)
+     * @param {Object} options - Rendering options
+     * @param {boolean} options.cleanHTML - If true, removes syntax markers and OverType-specific classes
      * @returns {string} Rendered HTML
      */
-    getRenderedHTML(processForPreview = false) {
+    getRenderedHTML(options = {}) {
       const markdown = this.getValue();
       let html = MarkdownParser.parse(markdown);
       
-      if (processForPreview) {
-        // Post-process HTML for preview mode
-        html = MarkdownParser.postProcessHTML(html);
+      if (options.cleanHTML) {
+        // Remove all syntax marker spans for clean HTML export
+        html = html.replace(/<span class="syntax-marker[^"]*">.*?<\/span>/g, '');
+        // Remove OverType-specific classes
+        html = html.replace(/\sclass="(bullet-list|ordered-list|code-fence|hr-marker|blockquote|url-part)"/g, '');
+        // Clean up empty class attributes
+        html = html.replace(/\sclass=""/g, '');
       }
       
       return html;
@@ -644,11 +794,21 @@ class OverType {
 
     /**
      * Get the current preview element's HTML
+     * This includes all syntax markers and OverType styling
      * @returns {string} Current preview HTML (as displayed)
      */
     getPreviewHTML() {
       return this.preview.innerHTML;
     }
+    
+    /**
+     * Get clean HTML without any OverType-specific markup
+     * Useful for exporting to other formats or storage
+     * @returns {string} Clean HTML suitable for export
+     */
+    getCleanHTML() {
+      return this.getRenderedHTML({ cleanHTML: true });
+    }
 
     /**
      * Focus the editor
@@ -1065,12 +1225,6 @@ OverType.getTheme = getTheme;
 // Set default theme
 OverType.currentTheme = solar;
 
-// Only attach to global in browser environments (not Node.js)
-if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {
-  // Browser environment - attach to window
-  window.OverType = OverType;
-}
-
 // Export for module systems
 export default OverType;
 export { OverType };