overtype 1.2.1 → 1.2.3

package/src/overtype.js

@@ -164,7 +164,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
@@ -489,25 +490,9 @@ class OverType {
         openParent.classList.add('code-block-line');
         closeParent.classList.add('code-block-line');
         
-        // Apply class to all divs between the parent divs
-        let currentDiv = openParent.nextElementSibling;
-        while (currentDiv && currentDiv !== closeParent) {
-          // Apply class to divs between the fences
-          if (currentDiv.tagName === 'DIV') {
-            currentDiv.classList.add('code-block-line');
-            
-            // Strip all formatting by replacing with plain text
-            // This prevents markdown formatting inside code blocks
-            const plainText = currentDiv.textContent;
-            currentDiv.textContent = plainText;
-          }
-          
-          // Move to next sibling
-          currentDiv = currentDiv.nextElementSibling;
-          
-          // Safety check to prevent infinite loop
-          if (!currentDiv) break;
-        }
+        // With the new structure, there's a <pre> block between fences, not DIVs
+        // We don't need to process anything between the fences anymore
+        // The <pre><code> structure already handles the content correctly
       }
     }
 
@@ -599,6 +584,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);
       
@@ -608,6 +601,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

package/src/parser.js

@@ -286,6 +286,8 @@ export class MarkdownParser {
     
     // Wrap in div to maintain line structure
     if (html.trim() === '') {
+      // Intentionally use   for empty lines to maintain vertical spacing
+      // This causes a 0->1 character count difference but preserves visual alignment
       return '<div>&nbsp;</div>';
     }
     
@@ -304,6 +306,8 @@ export class MarkdownParser {
     this.resetLinkIndex();
     
     const lines = text.split('\n');
+    let inCodeBlock = false;
+    
     const parsedLines = lines.map((line, index) => {
       // Show raw markdown on active line if requested
       if (showActiveLineRaw && index === activeLine) {
@@ -311,6 +315,21 @@ export class MarkdownParser {
         return `<div class="raw-line">${content}</div>`;
       }
       
+      // Check if this line is a code fence
+      const codeFenceRegex = /^```[^`]*$/;
+      if (codeFenceRegex.test(line)) {
+        inCodeBlock = !inCodeBlock;
+        // Parse fence markers normally to get styled output
+        return this.parseLine(line);
+      }
+      
+      // If we're inside a code block, don't parse as markdown
+      if (inCodeBlock) {
+        const escaped = this.escapeHtml(line);
+        const indented = this.preserveIndentation(escaped, line);
+        return `<div>${indented || '&nbsp;'}</div>`;
+      }
+      
       // Otherwise, parse the markdown normally
       return this.parseLine(line);
     });
@@ -358,8 +377,10 @@ export class MarkdownParser {
         const fenceText = codeFence.textContent;
         if (fenceText.startsWith('```')) {
           if (!inCodeBlock) {
-            // Start of code block
+            // Start of code block - keep fence visible, then add pre/code
             inCodeBlock = true;
+            
+            // Create the code block that will follow the fence
             currentCodeBlock = document.createElement('pre');
             const codeElement = document.createElement('code');
             currentCodeBlock.appendChild(codeElement);
@@ -371,14 +392,16 @@ export class MarkdownParser {
               codeElement.className = `language-${lang}`;
             }
             
-            container.insertBefore(currentCodeBlock, child);
-            child.remove();
+            // Insert code block after the fence div (don't remove the fence)
+            container.insertBefore(currentCodeBlock, child.nextSibling);
+            
+            // Store reference to the code element for adding content
+            currentCodeBlock._codeElement = codeElement;
             continue;
           } else {
-            // End of code block
+            // End of code block - fence stays visible
             inCodeBlock = false;
             currentCodeBlock = null;
-            child.remove();
             continue;
           }
         }
@@ -386,13 +409,15 @@ export class MarkdownParser {
       
       // Check if we're in a code block - any div that's not a code fence
       if (inCodeBlock && currentCodeBlock && child.tagName === 'DIV' && !child.querySelector('.code-fence')) {
-        const codeElement = currentCodeBlock.querySelector('code');
+        const codeElement = currentCodeBlock._codeElement || currentCodeBlock.querySelector('code');
         // Add the line content to the code block
         if (codeElement.textContent.length > 0) {
           codeElement.textContent += '\n';
         }
         // Get the actual text content, preserving spaces
-        const lineText = child.innerHTML.replace(/&nbsp;/g, ' ').replace(/<[^>]*>/g, '');
+        // Use textContent instead of innerHTML to avoid double-escaping
+        // textContent automatically decodes HTML entities
+        const lineText = child.textContent.replace(/\u00A0/g, ' '); // \u00A0 is nbsp
         codeElement.textContent += lineText;
         child.remove();
         continue;
@@ -465,27 +490,193 @@ export class MarkdownParser {
       return match;
     });
     
-    // Process code blocks
-    const codeBlockRegex = /<div><span class="code-fence">```([^<]*)<\/span><\/div>(.*?)<div><span class="code-fence">```<\/span><\/div>/gs;
-    processed = processed.replace(codeBlockRegex, (match, lang, content) => {
+    // Process code blocks - KEEP the fence markers for alignment AND use semantic pre/code
+    const codeBlockRegex = /<div><span class="code-fence">(```[^<]*)<\/span><\/div>(.*?)<div><span class="code-fence">(```)<\/span><\/div>/gs;
+    processed = processed.replace(codeBlockRegex, (match, openFence, content, closeFence) => {
       // Extract the content between fences
       const lines = content.match(/<div>(.*?)<\/div>/gs) || [];
       const codeContent = lines.map(line => {
-        // Extract text from each div
+        // Extract text from each div - content is already escaped
         const text = line.replace(/<div>(.*?)<\/div>/s, '$1')
-          .replace(/&nbsp;/g, ' ')
-          .replace(/&lt;/g, '<')
-          .replace(/&gt;/g, '>')
-          .replace(/&quot;/g, '"')
-          .replace(/&#39;/g, "'")
-          .replace(/&amp;/g, '&');
+          .replace(/&nbsp;/g, ' ');
         return text;
       }).join('\n');
       
-      const langClass = lang ? ` class="language-${lang.trim()}"` : '';
-      return `<pre class="code-block"><code${langClass}>${this.escapeHtml(codeContent)}</code></pre>`;
+      // Extract language from the opening fence
+      const lang = openFence.slice(3).trim();
+      const langClass = lang ? ` class="language-${lang}"` : '';
+      
+      // Keep fence markers visible as separate divs, with pre/code block between them
+      let result = `<div><span class="code-fence">${openFence}</span></div>`;
+      // Content is already escaped, don't double-escape
+      result += `<pre class="code-block"><code${langClass}>${codeContent}</code></pre>`;
+      result += `<div><span class="code-fence">${closeFence}</span></div>`;
+      
+      return result;
     });
     
     return processed;
   }
+
+  /**
+   * List pattern definitions
+   */
+  static LIST_PATTERNS = {
+    bullet: /^(\s*)([-*+])\s+(.*)$/,
+    numbered: /^(\s*)(\d+)\.\s+(.*)$/,
+    checkbox: /^(\s*)-\s+\[([ x])\]\s+(.*)$/
+  };
+
+  /**
+   * Get list context at cursor position
+   * @param {string} text - Full text content
+   * @param {number} cursorPosition - Current cursor position
+   * @returns {Object} List context information
+   */
+  static getListContext(text, cursorPosition) {
+    // Find the line containing the cursor
+    const lines = text.split('\n');
+    let currentPos = 0;
+    let lineIndex = 0;
+    let lineStart = 0;
+    
+    for (let i = 0; i < lines.length; i++) {
+      const lineLength = lines[i].length;
+      if (currentPos + lineLength >= cursorPosition) {
+        lineIndex = i;
+        lineStart = currentPos;
+        break;
+      }
+      currentPos += lineLength + 1; // +1 for newline
+    }
+    
+    const currentLine = lines[lineIndex];
+    const lineEnd = lineStart + currentLine.length;
+    
+    // Check for checkbox first (most specific)
+    const checkboxMatch = currentLine.match(this.LIST_PATTERNS.checkbox);
+    if (checkboxMatch) {
+      return {
+        inList: true,
+        listType: 'checkbox',
+        indent: checkboxMatch[1],
+        marker: '-',
+        checked: checkboxMatch[2] === 'x',
+        content: checkboxMatch[3],
+        lineStart,
+        lineEnd,
+        markerEndPos: lineStart + checkboxMatch[1].length + checkboxMatch[2].length + 5 // indent + "- [ ] "
+      };
+    }
+    
+    // Check for bullet list
+    const bulletMatch = currentLine.match(this.LIST_PATTERNS.bullet);
+    if (bulletMatch) {
+      return {
+        inList: true,
+        listType: 'bullet',
+        indent: bulletMatch[1],
+        marker: bulletMatch[2],
+        content: bulletMatch[3],
+        lineStart,
+        lineEnd,
+        markerEndPos: lineStart + bulletMatch[1].length + bulletMatch[2].length + 1 // indent + marker + space
+      };
+    }
+    
+    // Check for numbered list
+    const numberedMatch = currentLine.match(this.LIST_PATTERNS.numbered);
+    if (numberedMatch) {
+      return {
+        inList: true,
+        listType: 'numbered',
+        indent: numberedMatch[1],
+        marker: parseInt(numberedMatch[2]),
+        content: numberedMatch[3],
+        lineStart,
+        lineEnd,
+        markerEndPos: lineStart + numberedMatch[1].length + numberedMatch[2].length + 2 // indent + number + ". "
+      };
+    }
+    
+    // Not in a list
+    return {
+      inList: false,
+      listType: null,
+      indent: '',
+      marker: null,
+      content: currentLine,
+      lineStart,
+      lineEnd,
+      markerEndPos: lineStart
+    };
+  }
+
+  /**
+   * Create a new list item based on context
+   * @param {Object} context - List context from getListContext
+   * @returns {string} New list item text
+   */
+  static createNewListItem(context) {
+    switch (context.listType) {
+      case 'bullet':
+        return `${context.indent}${context.marker} `;
+      case 'numbered':
+        return `${context.indent}${context.marker + 1}. `;
+      case 'checkbox':
+        return `${context.indent}- [ ] `;
+      default:
+        return '';
+    }
+  }
+
+  /**
+   * Renumber all numbered lists in text
+   * @param {string} text - Text containing numbered lists
+   * @returns {string} Text with renumbered lists
+   */
+  static renumberLists(text) {
+    const lines = text.split('\n');
+    const numbersByIndent = new Map();
+    let inList = false;
+    
+    const result = lines.map(line => {
+      const match = line.match(this.LIST_PATTERNS.numbered);
+      
+      if (match) {
+        const indent = match[1];
+        const indentLevel = indent.length;
+        const content = match[3];
+        
+        // If we weren't in a list or indent changed, reset lower levels
+        if (!inList) {
+          numbersByIndent.clear();
+        }
+        
+        // Get the next number for this indent level
+        const currentNumber = (numbersByIndent.get(indentLevel) || 0) + 1;
+        numbersByIndent.set(indentLevel, currentNumber);
+        
+        // Clear deeper indent levels
+        for (const [level] of numbersByIndent) {
+          if (level > indentLevel) {
+            numbersByIndent.delete(level);
+          }
+        }
+        
+        inList = true;
+        return `${indent}${currentNumber}. ${content}`;
+      } else {
+        // Not a numbered list item
+        if (line.trim() === '' || !line.match(/^\s/)) {
+          // Empty line or non-indented line breaks the list
+          inList = false;
+          numbersByIndent.clear();
+        }
+        return line;
+      }
+    });
+    
+    return result.join('\n');
+  }
 }

package/src/styles.js

@@ -79,11 +79,17 @@ export function generateStyles(options = {}) {
       position: relative !important; /* Override reset - needed for absolute children */
       overflow: visible !important; /* Allow dropdown to overflow container */
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+      text-align: left !important;
       ${themeVars ? `
       /* Theme Variables */
       ${themeVars}` : ''}
     }
     
+    /* Force left alignment for all elements in the editor */
+    .overtype-container .overtype-wrapper * {
+      text-align: left !important;
+    }
+    
     /* Auto-resize mode styles */
     .overtype-container.overtype-auto-resize {
       height: auto !important;