ep_data_tables 0.0.2 → 0.0.3

package/collectContentPre.js

@@ -1,5 +1,9 @@
 'use strict';
 
+// Ensure settings.toolbar exists early to avoid load-order error with ep_font_color
+const settings = require('ep_etherpad-lite/node/utils/Settings');
+if (!settings.toolbar) settings.toolbar = {};
+
 // Using console.log for server-side logging, similar to other Etherpad server-side files.
 const log = (...m) => console.log('[ep_data_tables:collectContentPre_SERVER]', ...m);
 

package/ep.json

@@ -10,8 +10,6 @@
 		},
   		"client_hooks": {
 		  "collectContentPre"      : "ep_data_tables/static/js/client_hooks:collectContentPre",
-		  "collectContentLineBreak": "ep_data_tables/static/js/collector_hooks:collectContentLineBreak",
-		  "collectContentLineText" : "ep_data_tables/static/js/collector_hooks:collectContentLineText",
 		  "aceKeyEvent"                 : "ep_data_tables/static/js/client_hooks:aceKeyEvent",
 		  "aceStartLineAndCharForPoint" : "ep_data_tables/static/js/client_hooks:aceStartLineAndCharForPoint",
 		  "aceEndLineAndCharForPoint"   : "ep_data_tables/static/js/client_hooks:aceEndLineAndCharForPoint",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ep_data_tables",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "BETA - etherpad tables plugin, compatible with other character/line based styling and other features",
   "author": {
     "name": "DCastelone",

package/static/js/client_hooks.js

@@ -472,6 +472,12 @@ exports.collectContentPre = (hook, ctx) => {
                   // the span would be mistaken for a real cell boundary.
                   const hiddenDelimRegexPrimary = /<span class="ep-data_tables-delim"[^>]*>.*?<\/span>/ig;
                   segmentHTML = segmentHTML.replace(hiddenDelimRegexPrimary, '');
+                  // Remove caret-anchor spans (invisible, non-semantic)
+                  const caretAnchorRegex = /<span class="ep-data_tables-caret-anchor"[^>]*><\/span>/ig;
+                  segmentHTML = segmentHTML.replace(caretAnchorRegex, '');
+                  // If, after stripping tags/entities, the content is empty, serialize as empty string
+                  const textCheck = segmentHTML.replace(/<[^>]*>/g, '').replace(/&nbsp;/ig, ' ').trim();
+                  if (textCheck === '') segmentHTML = '';
 
         const hidden = index === 0 ? '' :
         /* keep the char in the DOM but make it visually disappear and non-editable */
@@ -482,7 +488,7 @@ exports.collectContentPre = (hook, ctx) => {
 
       if (cellHTMLSegments.length !== existingMetadata.cols) {
                     // log(`${funcName}: WARNING Line ${lineNum}: Reconstructed cell count (${cellHTMLSegments.length}) does not match metadata cols (${existingMetadata.cols}). Padding/truncating.`);
-        while (cellHTMLSegments.length < existingMetadata.cols) cellHTMLSegments.push('&nbsp;');
+        while (cellHTMLSegments.length < existingMetadata.cols) cellHTMLSegments.push('');
                     if (cellHTMLSegments.length > existingMetadata.cols) cellHTMLSegments.length = existingMetadata.cols;
                 }
 
@@ -520,15 +526,21 @@ exports.collectContentPre = (hook, ctx) => {
                   const resizeHandleRegex = /<div class="ep-data_tables-resize-handle"[^>]*><\/div>/ig;
                   segmentHTML = segmentHTML.replace(resizeHandleRegex, '');
                   if (index > 0) {
-                    const hiddenDelimRegex = new RegExp(`^<span class="ep-data_tables-delim" contenteditable="false">${DELIMITER}(<\\/span>)?<\\/span>`, 'i');
+                    const hiddenDelimRegex = new RegExp('^<span class="ep-data_tables-delim" contenteditable="false">' + DELIMITER + '(<\\/span>)?<\\/span>', 'i');
                     segmentHTML = segmentHTML.replace(hiddenDelimRegex, '');
                   }
+                  // Remove caret-anchor spans (invisible, non-semantic)
+                  const caretAnchorRegex = /<span class="ep-data_tables-caret-anchor"[^>]*><\/span>/ig;
+                  segmentHTML = segmentHTML.replace(caretAnchorRegex, '');
+                  // If, after stripping tags/entities, the content is empty, serialize as empty string
+                  const textCheck = segmentHTML.replace(/<[^>]*>/g, '').replace(/&nbsp;/ig, ' ').trim();
+                  if (textCheck === '') segmentHTML = '';
                   return segmentHTML;
                 });
                 
                 if (cellHTMLSegments.length !== domCols) {
                      // log(`${funcName}: WARNING Line ${lineNum} (Fallback): Reconstructed cell count (${cellHTMLSegments.length}) does not match DOM cols (${domCols}).`);
-                     while(cellHTMLSegments.length < domCols) cellHTMLSegments.push('&nbsp;');
+                     while(cellHTMLSegments.length < domCols) cellHTMLSegments.push('');
                      if(cellHTMLSegments.length > domCols) cellHTMLSegments.length = domCols;
                 }
 
@@ -672,24 +684,41 @@ function buildTableFromDelimitedHTML(metadata, innerHTMLSegments) {
   // Basic styling - can be moved to CSS later
   const tdStyle = `padding: 5px 7px; word-wrap:break-word; vertical-align: top; border: 1px solid #000; position: relative;`; // Added position: relative
 
+  // Precompute encoded tbljson class so empty cells can carry the same marker
+  let encodedTbljsonClass = '';
+  try {
+    encodedTbljsonClass = `tbljson-${enc(JSON.stringify(metadata))}`;
+  } catch (_) { encodedTbljsonClass = ''; }
+
   // Map the HTML segments directly into TD elements with column widths
   const cellsHtml = innerHTMLSegments.map((segment, index) => {
     // Build the hidden delimiter *inside* the first author span so the caret
-    // cannot sit between delimiter and text.
-    let modifiedSegment = segment || '&nbsp;';
+    // cannot sit between delimiter and text. For empty cells, synthesize a span
+    // that carries tbljson and tblCell-N so caret anchoring remains stable.
+    const textOnly = (segment || '').replace(/<[^>]*>/g, '').replace(/&nbsp;/ig, ' ').trim();
+    let modifiedSegment = segment || '';
+    const isEmpty = !segment || textOnly === '';
+    if (isEmpty) {
+      const cellClass = encodedTbljsonClass ? `${encodedTbljsonClass} tblCell-${index}` : `tblCell-${index}`;
+      modifiedSegment = `<span class="${cellClass}">&nbsp;</span>`;
+    }
     if (index > 0) {
       const delimSpan = `<span class="ep-data_tables-delim" contenteditable="false">${HIDDEN_DELIM}</span>`;
       // If the rendered segment already starts with a <span …> (which will be
       // the usual author-colour wrapper) inject the delimiter right after that
       // opening tag; otherwise just prefix it.
       modifiedSegment = modifiedSegment.replace(/^(<span[^>]*>)/i, `$1${delimSpan}`);
-      if (modifiedSegment === segment) modifiedSegment = `${delimSpan}${modifiedSegment}`;
+      if (!/^<span[^>]*>/i.test(modifiedSegment)) modifiedSegment = `${delimSpan}${modifiedSegment}`;
     }
 
-    // --- NEW: Always embed the invisible caret-anchor as *last* child *within* the first author span ---
+    // --- NEW: Always embed the invisible caret-anchor as *last* child *within* the first span ---
     const caretAnchorSpan = '<span class="ep-data_tables-caret-anchor" contenteditable="false"></span>';
     const anchorInjected = modifiedSegment.replace(/<\/span>\s*$/i, `${caretAnchorSpan}</span>`);
-    modifiedSegment = (anchorInjected !== modifiedSegment) ? anchorInjected : `${modifiedSegment}${caretAnchorSpan}`;
+    modifiedSegment = (anchorInjected !== modifiedSegment)
+      ? anchorInjected
+      : (isEmpty
+          ? `<span class="${encodedTbljsonClass ? `${encodedTbljsonClass} ` : ''}tblCell-${index}">${modifiedSegment}${caretAnchorSpan}</span>`
+          : `${modifiedSegment}${caretAnchorSpan}`);
 
     // Width & other decorations remain unchanged
     const widthPercent = columnWidths[index] || (100 / numCols);
@@ -922,7 +951,10 @@ exports.acePostWriteDomLineHTML = function (hook_name, args, cb) {
   // the embedded delimiter character they carry doesn't inflate or shrink
   // the segment count.
   const spanDelimRegex = new RegExp('<span class="ep-data_tables-delim"[^>]*>' + DELIMITER + '<\\/span>', 'ig');
-  const sanitizedHTMLForSplit = (delimitedTextFromLine || '').replace(spanDelimRegex, '');
+  const sanitizedHTMLForSplit = (delimitedTextFromLine || '')
+    .replace(spanDelimRegex, '')
+    // strip caret anchors from raw line html before split
+    .replace(/<span class="ep-data_tables-caret-anchor"[^>]*><\/span>/ig, '');
   const htmlSegments = sanitizedHTMLForSplit.split(DELIMITER);
   
   // log(`${logPrefix} NodeID#${nodeId}: *** SEGMENT ANALYSIS ***`);
@@ -949,57 +981,83 @@ exports.acePostWriteDomLineHTML = function (hook_name, args, cb) {
   let finalHtmlSegments = htmlSegments;
   
   if (htmlSegments.length !== rowMetadata.cols) {
-      // log(`${logPrefix} NodeID#${nodeId}: *** MISMATCH DETECTED ***`);
-      // log(`${logPrefix} NodeID#${nodeId}: WARNING - Parsed segment count (${htmlSegments.length}) does not match metadata cols (${rowMetadata.cols}). Auto-reconstructing table structure.`);
-      console.warn(`[ep_data_tables] ${funcName} NodeID#${nodeId}: Parsed segment count (${htmlSegments.length}) mismatch with metadata cols (${rowMetadata.cols}). Segments:`, htmlSegments);
-      
-      // *** ENHANCED DEBUG: Analyze why we have a mismatch ***
-      // log(`${logPrefix} NodeID#${nodeId}: *** MISMATCH ANALYSIS ***`);
-      // log(`${logPrefix} NodeID#${nodeId}: Expected columns: ${rowMetadata.cols}`);
-      // log(`${logPrefix} NodeID#${nodeId}: Actual segments: ${htmlSegments.length}`);
-      // log(`${logPrefix} NodeID#${nodeId}: Delimiter count found: ${delimiterCount}`);
-      // log(`${logPrefix} NodeID#${nodeId}: Expected delimiter count: ${rowMetadata.cols - 1}`);
+      // log(`${logPrefix} NodeID#${nodeId}: *** MISMATCH DETECTED *** - Attempting reconstruction.`);
       
       // Check if this is an image selection issue
       const hasImageSelected = delimitedTextFromLine.includes('currently-selected');
       const hasImageContent = delimitedTextFromLine.includes('image:');
-      // log(`${logPrefix} NodeID#${nodeId}: Has selected image: ${hasImageSelected}`);
-      // log(`${logPrefix} NodeID#${nodeId}: Has image content: ${hasImageContent}`);
-      
       if (hasImageSelected) {
         // log(`${logPrefix} NodeID#${nodeId}: *** POTENTIAL CAUSE: Image selection state may be affecting segment parsing ***`);
       }
-      
-      // ENHANCED: Always reconstruct the correct structure based on metadata
-      const reconstructedSegments = [];
-      
-    if (htmlSegments.length === 1 && rowMetadata.cols > 1) {
-          // Single segment case - put all content in first column, empty remaining columns
-          // log(`${logPrefix} NodeID#${nodeId}: Single segment detected, distributing content to first column of ${rowMetadata.cols} columns.`);
-          reconstructedSegments.push(htmlSegments[0]);
-      for (let i = 1; i < rowMetadata.cols; i++) {
-              reconstructedSegments.push('&nbsp;');
-      }
-    } else if (htmlSegments.length > rowMetadata.cols) {
-          // Too many segments - merge excess into last column
-          // log(`${logPrefix} NodeID#${nodeId}: Too many segments (${htmlSegments.length}), merging excess into ${rowMetadata.cols} columns.`);
-      for (let i = 0; i < rowMetadata.cols - 1; i++) {
-              reconstructedSegments.push(htmlSegments[i] || '&nbsp;');
+
+      // First attempt: reconstruct using DOM spans that carry tblCell-N classes
+      let usedClassReconstruction = false;
+      try {
+        const cols = Math.max(0, Number(rowMetadata.cols) || 0);
+        const grouped = Array.from({ length: cols }, () => '');
+        const candidates = Array.from(node.querySelectorAll('[class*="tblCell-"]'));
+
+        const classNum = (el) => {
+          if (!el || !el.classList) return -1;
+          for (const cls of el.classList) {
+            const m = /^tblCell-(\d+)$/.exec(cls);
+            if (m) return parseInt(m[1], 10);
+          }
+          return -1;
+        };
+        const hasAncestorWithSameCell = (el, n) => {
+          let p = el?.parentElement;
+          while (p) {
+            if (p.classList && p.classList.contains(`tblCell-${n}`)) return true;
+            p = p.parentElement;
+          }
+          return false;
+        };
+
+        for (const el of candidates) {
+          const n = classNum(el);
+          if (n >= 0 && n < cols) {
+            if (!hasAncestorWithSameCell(el, n)) {
+              grouped[n] += el.outerHTML || '';
+            }
+          }
+        }
+        const usable = grouped.some(s => s && s.trim() !== '');
+        if (usable) {
+          finalHtmlSegments = grouped.map(s => (s && s.trim() !== '') ? s : '&nbsp;');
+          usedClassReconstruction = true;
+          console.warn(`[ep_data_tables] ${funcName} NodeID#${nodeId}: Reconstructed ${finalHtmlSegments.length} segments from tblCell-N classes.`);
+        }
+      } catch (e) {
+        console.debug(`[ep_data_tables] ${funcName} NodeID#${nodeId}: Class-based reconstruction error; falling back.`, e);
       }
-          // Merge remaining segments into last column
+
+      // Fallback: reconstruct from string segments
+      if (!usedClassReconstruction) {
+        const reconstructedSegments = [];
+        if (htmlSegments.length === 1 && rowMetadata.cols > 1) {
+          reconstructedSegments.push(htmlSegments[0]);
+          for (let i = 1; i < rowMetadata.cols; i++) {
+            reconstructedSegments.push('&nbsp;');
+          }
+        } else if (htmlSegments.length > rowMetadata.cols) {
+          for (let i = 0; i < rowMetadata.cols - 1; i++) {
+            reconstructedSegments.push(htmlSegments[i] || '&nbsp;');
+          }
           const remainingSegments = htmlSegments.slice(rowMetadata.cols - 1);
           reconstructedSegments.push(remainingSegments.join('|') || '&nbsp;');
-    } else {
-          // Too few segments - pad with empty columns
-          // log(`${logPrefix} NodeID#${nodeId}: Too few segments (${htmlSegments.length}), padding to ${rowMetadata.cols} columns.`);
-      for (let i = 0; i < rowMetadata.cols; i++) {
-              reconstructedSegments.push(htmlSegments[i] || '&nbsp;');
+        } else {
+          for (let i = 0; i < rowMetadata.cols; i++) {
+            reconstructedSegments.push(htmlSegments[i] || '&nbsp;');
           }
+        }
+        finalHtmlSegments = reconstructedSegments;
+      }
+
+      // Only warn if we still don't have the right number of segments
+      if (finalHtmlSegments.length !== rowMetadata.cols) {
+        console.warn(`[ep_data_tables] ${funcName} NodeID#${nodeId}: Could not reconstruct to expected ${rowMetadata.cols} segments. Got ${finalHtmlSegments.length}.`);
       }
-      
-      // log(`${logPrefix} NodeID#${nodeId}: Reconstructed ${reconstructedSegments.length} segments to match expected ${rowMetadata.cols} columns.`);
-      finalHtmlSegments = reconstructedSegments;
-      
   } else {
       // log(`${logPrefix} NodeID#${nodeId}: Segment count matches metadata cols (${rowMetadata.cols}). Using original segments.`);
   }
@@ -1533,12 +1591,12 @@ exports.aceKeyEvent = (h, ctx) => {
   // --- Check for Ctrl+X (Cut) key combination ---
   const isCutKey = (evt.ctrlKey || evt.metaKey) && (evt.key === 'x' || evt.key === 'X' || evt.keyCode === 88);
   if (isCutKey && hasSelection) {
-    // log(`${logPrefix} Ctrl+X (Cut) detected with selection. Letting cut event handler manage this.`);
+    log(`${logPrefix} Ctrl+X (Cut) detected with selection. Letting cut event handler manage this.`);
     // Let the cut event handler handle this - we don't need to preventDefault here
     // as the cut event will handle the operation and prevent default
     return false; // Allow the cut event to be triggered
   } else if (isCutKey && !hasSelection) {
-    // log(`${logPrefix} Ctrl+X (Cut) detected but no selection. Allowing default.`);
+    log(`${logPrefix} Ctrl+X (Cut) detected but no selection. Allowing default.`);
     return false; // Allow default - nothing to cut
   }
 
@@ -1892,38 +1950,37 @@ exports.aceInitialized = (h, ctx) => {
     }
 
     // *** CUT EVENT LISTENER ***
-    // log(`${callWithAceLogPrefix} Attaching cut event listener to $inner (inner iframe body).`);
+    log(`${callWithAceLogPrefix} Attaching cut event listener to $inner (inner iframe body).`);
     $inner.on('cut', (evt) => {
       const cutLogPrefix = '[ep_data_tables:cutHandler]';
-      // log(`${cutLogPrefix} CUT EVENT TRIGGERED. Event object:`, evt);
+      console.log(`${cutLogPrefix} CUT EVENT TRIGGERED. Event object:`, evt);
 
-      // log(`${cutLogPrefix} Getting current editor representation (rep).`);
+      console.log(`${cutLogPrefix} Getting current editor representation (rep).`);
       const rep = ed.ace_getRep();
       if (!rep || !rep.selStart) {
-        // log(`${cutLogPrefix} WARNING: Could not get representation or selection. Allowing default cut.`);
+        console.warn(`${cutLogPrefix} WARNING: Could not get representation or selection. Allowing default cut.`);
         console.warn(`${cutLogPrefix} Could not get rep or selStart.`);
         return; // Allow default
       }
-      // log(`${cutLogPrefix} Rep obtained. selStart:`, rep.selStart, `selEnd:`, rep.selEnd);
+      console.log(`${cutLogPrefix} Rep obtained. selStart:`, rep.selStart, `selEnd:`, rep.selEnd);
       const selStart = rep.selStart;
       const selEnd = rep.selEnd;
       const lineNum = selStart[0];
-      // log(`${cutLogPrefix} Current line number: ${lineNum}. Column start: ${selStart[1]}, Column end: ${selEnd[1]}.`);
-
-      // Check if there's actually a selection to cut
-      if (selStart[0] === selEnd[0] && selStart[1] === selEnd[1]) {
-        // log(`${cutLogPrefix} No selection to cut. Allowing default cut.`);
-        return; // Allow default - nothing to cut
+      console.log(`${cutLogPrefix} Current line number: ${lineNum}. Column start: ${selStart[1]}, Column end: ${selEnd[1]}.`);
+      // Determine if there is a selection in the editor representation
+      const hasSelectionInRep = !(selStart[0] === selEnd[0] && selStart[1] === selEnd[1]);
+      if (!hasSelectionInRep) {
+        console.log(`${cutLogPrefix} No selection detected in rep; deferring decision until table-line check.`);
       }
 
       // Check if selection spans multiple lines
       if (selStart[0] !== selEnd[0]) {
-        // log(`${cutLogPrefix} WARNING: Selection spans multiple lines. Preventing cut to protect table structure.`);
+        console.warn(`${cutLogPrefix} WARNING: Selection spans multiple lines. Preventing cut to protect table structure.`);
         evt.preventDefault();
         return;
       }
 
-      // log(`${cutLogPrefix} Checking if line ${lineNum} is a table line by fetching '${ATTR_TABLE_JSON}' attribute.`);
+      console.log(`${cutLogPrefix} Checking if line ${lineNum} is a table line by fetching '${ATTR_TABLE_JSON}' attribute.`);
       let lineAttrString = docManager.getAttributeOnLine(lineNum, ATTR_TABLE_JSON);
       let tableMetadata = null;
 
@@ -1940,11 +1997,18 @@ exports.aceInitialized = (h, ctx) => {
       }
 
       if (!tableMetadata || typeof tableMetadata.cols !== 'number' || typeof tableMetadata.tblId === 'undefined' || typeof tableMetadata.row === 'undefined') {
-        // log(`${cutLogPrefix} Line ${lineNum} is NOT a recognised table line. Allowing default cut.`);
+        console.log(`${cutLogPrefix} Line ${lineNum} is NOT a recognised table line. Allowing default cut.`);
         return; // Not a table line
       }
 
-      // log(`${cutLogPrefix} Line ${lineNum} IS a table line. Metadata:`, tableMetadata);
+      console.log(`${cutLogPrefix} Line ${lineNum} IS a table line. Metadata:`, tableMetadata);
+
+      // If inside a table line but the rep shows no selection, prevent default to protect structure
+      if (!hasSelectionInRep) {
+        console.log(`${cutLogPrefix} Preventing default CUT on table line with collapsed selection to protect delimiters.`);
+        evt.preventDefault();
+        return;
+      }
 
       // Validate selection is within cell boundaries
       const lineText = rep.lines.atIndex(lineNum)?.text || '';
@@ -1994,37 +2058,37 @@ exports.aceInitialized = (h, ctx) => {
         selEnd[1] = cellEndCol;              // clamp
       }
       if (targetCellIndex === -1 || selEnd[1] > cellEndCol) {
-        // log(`${cutLogPrefix} WARNING: Selection spans cell boundaries or is outside cells. Preventing cut to protect table structure.`);
+        console.warn(`${cutLogPrefix} WARNING: Selection spans cell boundaries or is outside cells. Preventing cut to protect table structure.`);
         evt.preventDefault();
         return;
       }
 
       // If we reach here, the selection is entirely within a single cell - allow cut and preserve table structure
-      // log(`${cutLogPrefix} Selection is entirely within cell ${targetCellIndex}. Intercepting cut to preserve table structure.`);
+      console.log(`${cutLogPrefix} Selection is entirely within cell ${targetCellIndex}. Intercepting cut to preserve table structure.`);
       evt.preventDefault();
 
       try {
         // Get the selected text to copy to clipboard
         const selectedText = lineText.substring(selStart[1], selEnd[1]);
-        // log(`${cutLogPrefix} Selected text to cut: "${selectedText}"`);
+        console.log(`${cutLogPrefix} Selected text to cut: "${selectedText}"`);
 
         // Copy to clipboard manually
         if (navigator.clipboard && navigator.clipboard.writeText) {
           navigator.clipboard.writeText(selectedText).then(() => {
-            // log(`${cutLogPrefix} Successfully copied to clipboard via Navigator API.`);
+            console.log(`${cutLogPrefix} Successfully copied to clipboard via Navigator API.`);
           }).catch((err) => {
             console.warn(`${cutLogPrefix} Failed to copy to clipboard via Navigator API:`, err);
           });
         } else {
           // Fallback for older browsers
-          // log(`${cutLogPrefix} Using fallback clipboard method.`);
+          console.log(`${cutLogPrefix} Using fallback clipboard method.`);
           const textArea = document.createElement('textarea');
           textArea.value = selectedText;
           document.body.appendChild(textArea);
           textArea.select();
           try {
             document.execCommand('copy');
-            // log(`${cutLogPrefix} Successfully copied to clipboard via execCommand fallback.`);
+            console.log(`${cutLogPrefix} Successfully copied to clipboard via execCommand fallback.`);
           } catch (err) {
             console.warn(`${cutLogPrefix} Failed to copy to clipboard via fallback:`, err);
           }
@@ -2032,14 +2096,14 @@ exports.aceInitialized = (h, ctx) => {
         }
 
         // Now perform the deletion within the cell using ace operations
-        // log(`${cutLogPrefix} Performing deletion via ed.ace_callWithAce.`);
+        console.log(`${cutLogPrefix} Performing deletion via ed.ace_callWithAce.`);
         ed.ace_callWithAce((aceInstance) => {
           const callAceLogPrefix = `${cutLogPrefix}[ace_callWithAceOps]`;
-          // log(`${callAceLogPrefix} Entered ace_callWithAce for cut operations. selStart:`, selStart, `selEnd:`, selEnd);
+          console.log(`${callAceLogPrefix} Entered ace_callWithAce for cut operations. selStart:`, selStart, `selEnd:`, selEnd);
           
-          // log(`${callAceLogPrefix} Calling aceInstance.ace_performDocumentReplaceRange to delete selected text.`);
+          console.log(`${callAceLogPrefix} Calling aceInstance.ace_performDocumentReplaceRange to delete selected text.`);
           aceInstance.ace_performDocumentReplaceRange(selStart, selEnd, '');
-          // log(`${callAceLogPrefix} ace_performDocumentReplaceRange successful.`);
+          console.log(`${callAceLogPrefix} ace_performDocumentReplaceRange successful.`);
 
           // --- Ensure cell is not left empty (zero-length) ---
           const repAfterDeletion = aceInstance.ace_getRep();
@@ -2048,7 +2112,7 @@ exports.aceInitialized = (h, ctx) => {
           const cellTextAfterDeletion = cellsAfterDeletion[targetCellIndex] || '';
 
           if (cellTextAfterDeletion.length === 0) {
-            // log(`${callAceLogPrefix} Cell ${targetCellIndex} became empty after cut – inserting single space to preserve structure.`);
+            console.log(`${callAceLogPrefix} Cell ${targetCellIndex} became empty after cut – inserting single space to preserve structure.`);
             const insertPos = [lineNum, selStart[1]]; // Start of the now-empty cell
             aceInstance.ace_performDocumentReplaceRange(insertPos, insertPos, ' ');
 
@@ -2060,9 +2124,9 @@ exports.aceInitialized = (h, ctx) => {
             );
           }
 
-          // log(`${callAceLogPrefix} Preparing to re-apply tbljson attribute to line ${lineNum}.`);
+          console.log(`${callAceLogPrefix} Preparing to re-apply tbljson attribute to line ${lineNum}.`);
           const repAfterCut = aceInstance.ace_getRep();
-          // log(`${callAceLogPrefix} Fetched rep after cut for applyMeta. Line ${lineNum} text now: "${repAfterCut.lines.atIndex(lineNum).text}"`);
+          console.log(`${callAceLogPrefix} Fetched rep after cut for applyMeta. Line ${lineNum} text now: "${repAfterCut.lines.atIndex(lineNum).text}"`);
           
           ed.ep_data_tables_applyMeta(
             lineNum,
@@ -2074,20 +2138,20 @@ exports.aceInitialized = (h, ctx) => {
             null,
             docManager
           );
-          // log(`${callAceLogPrefix} tbljson attribute re-applied successfully via ep_data_tables_applyMeta.`);
+          console.log(`${callAceLogPrefix} tbljson attribute re-applied successfully via ep_data_tables_applyMeta.`);
 
           const newCaretPos = [lineNum, selStart[1]];
-          // log(`${callAceLogPrefix} Setting caret position to: [${newCaretPos}].`);
+          console.log(`${callAceLogPrefix} Setting caret position to: [${newCaretPos}].`);
           aceInstance.ace_performSelectionChange(newCaretPos, newCaretPos, false);
-          // log(`${callAceLogPrefix} Selection change successful.`);
+          console.log(`${callAceLogPrefix} Selection change successful.`);
 
-          // log(`${callAceLogPrefix} Cut operations within ace_callWithAce completed successfully.`);
+          console.log(`${callAceLogPrefix} Cut operations within ace_callWithAce completed successfully.`);
         }, 'tableCutTextOperations', true);
 
-        // log(`${cutLogPrefix} Cut operation completed successfully.`);
+        console.log(`${cutLogPrefix} Cut operation completed successfully.`);
       } catch (error) {
         console.error(`${cutLogPrefix} ERROR during cut operation:`, error);
-        // log(`${cutLogPrefix} Cut operation failed. Error details:`, { message: error.message, stack: error.stack });
+        console.log(`${cutLogPrefix} Cut operation failed. Error details:`, { message: error.message, stack: error.stack });
       }
     });
 
@@ -2281,6 +2345,18 @@ exports.aceInitialized = (h, ctx) => {
       const dropLogPrefix = '[ep_data_tables:dropHandler]';
       // log(`${dropLogPrefix} DROP EVENT TRIGGERED. Event object:`, evt);
 
+      // Block drops directly targeted at a table element regardless of selection state
+      const targetEl = evt.target;
+      if (targetEl && typeof targetEl.closest === 'function' && targetEl.closest('table.dataTable')) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        if (evt.originalEvent && evt.originalEvent.dataTransfer) {
+          try { evt.originalEvent.dataTransfer.dropEffect = 'none'; } catch (_) {}
+        }
+        console.warn('[ep_data_tables] Drop prevented on table to protect structure.');
+        return;
+      }
+
       // log(`${dropLogPrefix} Getting current editor representation (rep).`);
       const rep = ed.ace_getRep();
       if (!rep || !rep.selStart) {
@@ -2314,6 +2390,17 @@ exports.aceInitialized = (h, ctx) => {
     $inner.on('dragover', (evt) => {
       const dragLogPrefix = '[ep_data_tables:dragoverHandler]';
       
+      // If hovering over a table, signal not-allowed and block default
+      const targetEl = evt.target;
+      if (targetEl && typeof targetEl.closest === 'function' && targetEl.closest('table.dataTable')) {
+        if (evt.originalEvent && evt.originalEvent.dataTransfer) {
+          try { evt.originalEvent.dataTransfer.dropEffect = 'none'; } catch (_) {}
+        }
+        evt.preventDefault();
+        evt.stopPropagation();
+        return;
+      }
+
       const rep = ed.ace_getRep();
       if (!rep || !rep.selStart) {
         return; // Allow default
@@ -2337,6 +2424,18 @@ exports.aceInitialized = (h, ctx) => {
       }
     });
 
+    // Guard against dragenter into table areas
+    $inner.on('dragenter', (evt) => {
+      const targetEl = evt.target;
+      if (targetEl && typeof targetEl.closest === 'function' && targetEl.closest('table.dataTable')) {
+        if (evt.originalEvent && evt.originalEvent.dataTransfer) {
+          try { evt.originalEvent.dataTransfer.dropEffect = 'none'; } catch (_) {}
+        }
+        evt.preventDefault();
+        evt.stopPropagation();
+      }
+    });
+
     // *** EXISTING PASTE LISTENER ***
     // log(`${callWithAceLogPrefix} Attaching paste event listener to $inner (inner iframe body).`);
     $inner.on('paste', (evt) => {
@@ -2791,14 +2890,15 @@ exports.aceInitialized = (h, ctx) => {
       // *** DRAG PREVENTION FOR TABLE ELEMENTS ***
       const preventTableDrag = (evt) => {
         const target = evt.target;
-        // Check if the target is a table element or inside a table
-        if (target.tagName === 'TABLE' && target.classList.contains('dataTable') ||
-            target.tagName === 'TD' && target.closest('table.dataTable') ||
-            target.tagName === 'TR' && target.closest('table.dataTable') ||
-            target.tagName === 'TBODY' && target.closest('table.dataTable')) {
-          // log('[ep_data_tables:dragPrevention] Preventing drag operation on table element:', target.tagName);
+        // Block ANY drag gesture that originates within a table (including spans/text inside cells)
+        const inTable = target && typeof target.closest === 'function' && target.closest('table.dataTable');
+        if (inTable) {
+          // log('[ep_data_tables:dragPrevention] Preventing drag operation originating from inside table');
           evt.preventDefault();
           evt.stopPropagation();
+          if (evt.originalEvent && evt.originalEvent.dataTransfer) {
+            try { evt.originalEvent.dataTransfer.effectAllowed = 'none'; } catch (_) {}
+          }
           return false;
         }
       };
@@ -2808,6 +2908,21 @@ exports.aceInitialized = (h, ctx) => {
       $inner.on('drag', preventTableDrag);
       $inner.on('dragend', preventTableDrag);
       // log(`${callWithAceLogPrefix} Attached drag prevention handlers to inner body`);
+
+      // Attach drag prevention broadly to cover iframe boundaries and the host document
+      if (innerDoc.length > 0) {
+        innerDoc.on('dragstart', preventTableDrag);
+        innerDoc.on('drag', preventTableDrag);
+        innerDoc.on('dragend', preventTableDrag);
+      }
+      if (outerDoc.length > 0) {
+        outerDoc.on('dragstart', preventTableDrag);
+        outerDoc.on('drag', preventTableDrag);
+        outerDoc.on('dragend', preventTableDrag);
+      }
+      $(document).on('dragstart', preventTableDrag);
+      $(document).on('drag', preventTableDrag);
+      $(document).on('dragend', preventTableDrag);
     };
     
     // Setup the global handlers
@@ -4239,203 +4354,4 @@ exports.aceUndoRedo = (hook, ctx) => {
     console.error(`${logPrefix} Error during undo/redo validation:`, e);
     // log(`${logPrefix} Error details:`, { message: e.message, stack: e.stack });
   }
-};
-
-// *** ADDED: postAceInit hook for attaching listeners ***
-exports.postAceInit = (hookName, ctx) => {
-  const func = '[ep_data_tables:postAceInit]';
-  // log(`${func} START`);
-  const editorInfo = ctx.ace; // Get editorInfo from context
-
-  if (!editorInfo) {
-    console.error(`${func} ERROR: editorInfo (ctx.ace) is not available.`);
-    return;
-  }
-
-  const attachReconnectHandler = () => {
-    try {
-      const padObj = window.pad;
-      const socket = padObj && padObj.socket;
-      if (!socket) return false; // Not ready yet
-
-      if (socket.ep_data_tables_reconnect_listener_attached) return true;
-
-      let triggered = false;
-      const triggerHardReconnect = (evtName) => {
-        if (triggered) return;
-        triggered = true;
-        console.log(`[ep_data_tables] Socket.IO event '${evtName}' – invoking pad.forceReconnect()`);
-        if (window.pad && typeof window.pad.forceReconnect === 'function') {
-          try { window.pad.forceReconnect(); } catch(e) { console.error('[ep_data_tables] pad.forceReconnect() failed', e); window.location.reload(); }
-        } else {
-          window.location.reload();
-        }
-      };
-
-      socket.on('reconnect_attempt', () => triggerHardReconnect('reconnect_attempt'));
-      socket.on('reconnect', () => triggerHardReconnect('reconnect'));
-      socket.on('connect', () => { if (socket.disconnectedPreviously) triggerHardReconnect('connect'); });
-      socket.on('disconnect', () => { socket.disconnectedPreviously = true; });
-
-      socket.ep_data_tables_reconnect_listener_attached = true;
-      console.log('[ep_data_tables] Reconnect handler fully attached to pad.socket');
-      return true;
-    } catch (e) {
-      console.error('[ep_data_tables] Error attaching reconnect listener:', e);
-      return false;
-    }
-  };
-
-  // Keep trying until it attaches (no max attempts)
-  if (!attachReconnectHandler()) {
-    const intervalId = setInterval(() => {
-      if (attachReconnectHandler()) clearInterval(intervalId);
-    }, 500);
-  }
-  
-  // Setup mousedown listener via callWithAce
-  editorInfo.ace_callWithAce((ace) => {
-      const editor = ace.editor;
-      const inner = ace.editor.container; // Use the main container
-
-      if (!editor || !inner) {
-          console.error(`${func} ERROR: ace.editor or ace.editor.container not found within ace_callWithAce.`);
-          return;
-      }
-
-      // log(`${func} Inside callWithAce for attaching mousedown listeners.`);
-
-      // Initialize shared state on the editor object
-      if (!editor.ep_data_tables_last_clicked) {
-          editor.ep_data_tables_last_clicked = null;
-          // log(`${func} Initialized ace.editor.ep_data_tables_last_clicked`);
-      }
-
-      // log(`${func} Attempting to attach mousedown listener to editor container for cell selection...`);
-
-      inner.addEventListener('mousedown', (evt) => {
-          const target = evt.target;
-          const mousedownFuncName = '[ep_data_tables mousedown]';
-          // log(`${mousedownFuncName} RAW MOUSE DOWN detected. Target:`, target);
-          // log(`${mousedownFuncName} Target tagName: ${target.tagName}`);
-          // log(`${mousedownFuncName} Target className: ${target.className}`);
-          // log(`${mousedownFuncName} Target ID: ${target.id}`);
-
-          // Don't interfere with resize handle clicks
-          if (target.classList && target.classList.contains('ep-data_tables-resize-handle')) {
-            // log(`${mousedownFuncName} Click on resize handle, skipping cell selection logic.`);
-            return;
-          }
-
-          // *** ENHANCED DEBUG: Check for image-related elements ***
-          const $target = $(target);
-          const isImageElement = $target.closest('.inline-image, .image-placeholder, .image-inner, .image-resize-handle').length > 0;
-          // log(`${mousedownFuncName} Is target or ancestor image-related?`, isImageElement);
-          
-          if (isImageElement) {
-            // log(`${mousedownFuncName} *** IMAGE ELEMENT DETECTED ***`);
-            // log(`${mousedownFuncName} Closest image container:`, $target.closest('.inline-image, .image-placeholder')[0]);
-            // log(`${mousedownFuncName} Is .inline-image:`, $target.hasClass('inline-image') || $target.closest('.inline-image').length > 0);
-            // log(`${mousedownFuncName} Is .image-placeholder:`, $target.hasClass('image-placeholder') || $target.closest('.image-placeholder').length > 0);
-            // log(`${mousedownFuncName} Is .image-inner:`, $target.hasClass('image-inner') || $target.closest('.image-inner').length > 0);
-            // log(`${mousedownFuncName} Is .image-resize-handle:`, $target.hasClass('image-resize-handle') || $target.closest('.image-resize-handle').length > 0);
-          }
-          
-          // Check if the click is on an image or image-related element - if so, completely skip
-          if (isImageElement) {
-            // log(`${mousedownFuncName} Click detected on image element within table cell. Completely skipping table processing to avoid interference.`);
-            return;
-          }
-
-          // *** ENHANCED DEBUG: Check table context ***
-          const clickedTD = target.closest('td');
-          const clickedTR = target.closest('tr');
-          const clickedTable = target.closest('table.dataTable');
-          
-          // log(`${mousedownFuncName} Table context analysis:`);
-          // log(`${mousedownFuncName} - Clicked TD:`, !!clickedTD);
-          // log(`${mousedownFuncName} - Clicked TR:`, !!clickedTR);
-          // log(`${mousedownFuncName} - Clicked table.dataTable:`, !!clickedTable);
-          
-          if (clickedTable) {
-            // log(`${mousedownFuncName} - Table tblId:`, clickedTable.getAttribute('data-tblId'));
-            // log(`${mousedownFuncName} - Table row:`, clickedTable.getAttribute('data-row'));
-          }
-          if (clickedTD) {
-            // log(`${mousedownFuncName} - TD data-column:`, clickedTD.getAttribute('data-column'));
-            // log(`${mousedownFuncName} - TD innerHTML length:`, clickedTD.innerHTML?.length || 0);
-            // log(`${mousedownFuncName} - TD contains images:`, clickedTD.querySelector('.inline-image, .image-placeholder') ? 'YES' : 'NO');
-          }
-
-          // Clear previous selection state regardless of where click happened
-          if (editor.ep_data_tables_last_clicked) {
-              // log(`${mousedownFuncName} Clearing previous selection info.`);
-              // TODO: Add visual class removal if needed
-          }
-          editor.ep_data_tables_last_clicked = null; // Clear state first
-
-          if (clickedTD && clickedTR && clickedTable) {
-              // log(`${mousedownFuncName} Click detected inside table.dataTable td.`);
-              try {
-                  const cellIndex = Array.from(clickedTR.children).indexOf(clickedTD);
-                  const lineNode = clickedTable.closest('div.ace-line');
-                  const tblId = clickedTable.getAttribute('data-tblId');
-
-                  // log(`${mousedownFuncName} Cell analysis:`);
-                  // log(`${mousedownFuncName} - Cell index:`, cellIndex);
-                  // log(`${mousedownFuncName} - Line node:`, !!lineNode);
-                  // log(`${mousedownFuncName} - Line node ID:`, lineNode?.id);
-                  // log(`${mousedownFuncName} - Table ID:`, tblId);
-
-                  // Ensure ace.rep and ace.rep.lines are available
-                  if (!ace.rep || !ace.rep.lines) {
-                      console.error(`${mousedownFuncName} ERROR: ace.rep or ace.rep.lines not available inside mousedown listener.`);
-                      return;
-                  }
-
-                  if (lineNode && lineNode.id && tblId !== null && cellIndex !== -1) {
-                      const lineNum = ace.rep.lines.indexOfKey(lineNode.id);
-                      if (lineNum !== -1) {
-                           // Store the accurately determined cell info
-                           // Initialize relative position - might be refined later if needed
-                           const clickInfo = { lineNum, tblId, cellIndex, relativePos: 0 }; // Set initial relativePos to 0
-                           editor.ep_data_tables_last_clicked = clickInfo;
-                           // log(`${mousedownFuncName} Clicked cell (SUCCESS): Line=${lineNum}, TblId=${tblId}, CellIndex=${cellIndex}. Stored click info:`, clickInfo);
-
-                           // --- NEW: Jump caret immediately for snappier UX ---
-                           try {
-                             const docMgr = ace.ep_data_tables_docManager;
-                             if (docMgr && typeof navigateToCell === 'function') {
-                               const navOk = navigateToCell(lineNum, cellIndex, ace, docMgr);
-                               // log(`${mousedownFuncName} Immediate navigateToCell result: ${navOk}`);
-                             }
-                           } catch (navErr) {
-                             console.error(`${mousedownFuncName} Error during immediate caret navigation:`, navErr);
-                           }
-
-                           // TODO: Add visual class for selection if desired
-                           // log(`${mousedownFuncName} TEST: Skipped adding/removing selected-table-cell class`);
-
-                      } else {
-                          // log(`${mousedownFuncName} Clicked cell (ERROR): Could not find line number for node ID: ${lineNode.id}`);
-                      }
-                  } else {
-                       // log(`${mousedownFuncName} Clicked cell (ERROR): Missing required info (lineNode, lineNode.id, tblId, or valid cellIndex).`, { lineNode, tblId, cellIndex });
-                  }
-              } catch (e) {
-                  console.error(`${mousedownFuncName} Error processing table cell click:`, e);
-                  // log(`${mousedownFuncName} Error details:`, { message: e.message, stack: e.stack });
-                  editor.ep_data_tables_last_clicked = null; // Ensure state is clear on error
-              }
-          } else {
-               // log(`${mousedownFuncName} Click was outside a table.dataTable td.`);
-          }
-      });
-      // log(`${func} Mousedown listeners for cell selection attached successfully (inside callWithAce).`);
-
-  }, 'tableCellSelectionPostAce', true); // Unique name for callstack
-
-  // log(`${func} END`);
-};
-
-// END OF FILE
+};

package/static/js/collector_hooks.js

@@ -1,13 +0,0 @@
-const log = (...m) => console.debug('[ep_data_tables:collector_hooks]', ...m);
-
-exports.collectContentPre = (hook, ctx) => {
-    return; 
-};
-
-exports.collectContentLineBreak = (hook, ctx) => {
-    return true; 
-};
-
-exports.collectContentLineText = (_hook, ctx) => {
-    return ctx.text || ''; 
-};