ep_data_tables 0.0.2

package/static/js/collector_hooks.js

@@ -0,0 +1,13 @@
+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 || ''; 
+};

package/static/js/datatables-renderer.js

@@ -0,0 +1,157 @@
+/* ep_data_tables – datatables-renderer.js
+ *
+ * Only used by:
+ *   • export pipeline           (`context === "export"`)
+ *   • timeslider frame          (`context === "timeslider"`)
+ * Regular pad rendering is done by client_hooks.js.
+ */
+
+const log = (...m) => console.debug('[ep_data_tables:datatables-renderer]', ...m);
+const DELIMITER = '|'; // Used for splitting cell content if ever needed by legacy, export now receives pre-split, pre-rendered cells
+
+// buildExportHtml now expects an array of pre-rendered HTML strings for each cell.
+const buildExportHtml = (metadata, richHtmlCellArray) => {
+  const funcName = 'buildExportHtml';
+  log(`${funcName}: START`, { metadata, numberOfCells: richHtmlCellArray.length });
+
+  if (!metadata || typeof metadata.tblId === 'undefined' || typeof metadata.row === 'undefined' || typeof metadata.cols !== 'number') {
+    log(`${funcName}: ERROR - Invalid or missing metadata. Metadata:`, metadata);
+    return `<div>Error: Missing table metadata for export.</div>`;
+  }
+
+  if (metadata.cols !== richHtmlCellArray.length) {
+    log(`${funcName}: WARN - Column count in metadata (${metadata.cols}) does not match provided HTML cell array length (${richHtmlCellArray.length}).`);
+    // Adjusting to render only the minimum of available cells or metadata.cols to prevent errors.
+    // Or, one might choose to pad with empty cells if segments are fewer.
+  }
+
+  // Get column widths from metadata, or use equal distribution if not set
+  const numCols = richHtmlCellArray.length;
+  const columnWidths = metadata.columnWidths || Array(numCols).fill(100 / numCols);
+  
+  // Ensure we have the right number of column widths
+  while (columnWidths.length < numCols) {
+    columnWidths.push(100 / numCols);
+  }
+  if (columnWidths.length > numCols) {
+    columnWidths.splice(numCols);
+  }
+
+  const tdStyle = `padding: 5px 7px; word-wrap:break-word; vertical-align: top; border: 1px solid #000;`;
+  const firstRowClass = metadata.row === 0 ? ' dataTable-first-row' : '';
+
+  // Each item in richHtmlCellArray is now the complete inner HTML for a cell.
+  // Apply column widths to each cell
+  const cellsHtml = richHtmlCellArray.map((cellHtml, index) => {
+    const widthPercent = columnWidths[index] || (100 / numCols);
+    const cellStyle = `${tdStyle} width: ${widthPercent}%;`;
+    return `<td style="${cellStyle}">${cellHtml || '&nbsp;'}</td>`;
+  }).join('');
+
+  const tableHtml = 
+    `<table class="dataTable${firstRowClass}" data-tblId="${metadata.tblId}" data-row="${metadata.row}" style="width:100%; border-collapse:collapse; table-layout: fixed;">` +
+    `<tbody><tr>${cellsHtml}</tr></tbody>` +
+    `</table>`;
+  
+  log(`${funcName}: END - Generated HTML for export: ${tableHtml.substring(0,150)}...`);
+  return tableHtml;
+};
+
+if (typeof DatatablesRenderer === 'undefined') {
+    log('Defining DatatablesRenderer');
+    var DatatablesRenderer = (() => {
+      const buildHtmlLegacy = (rowJSON, props = {}) => {
+        log('buildHtmlLegacy: START', { rowJSON, props });
+        const p = { borderWidth: 1, width: 100, ...rowJSON.tblProperties, ...props };
+        const border  = `border:${p.borderWidth}px solid ${p.borderColor || '#ccc'}`;
+        const tdStyle = `${border};padding:4px;word-wrap:break-word`;
+        const tr = (rowJSON.payload && rowJSON.payload[0] && Array.isArray(rowJSON.payload[0])) 
+          ? rowJSON.payload[0].map(txt => `<td style="${tdStyle}">${txt}</td>`).join('')
+          : '<td>Error: Invalid payload structure for buildHtmlLegacy</td>';
+        const html = `<table class="dataTable" style="border-collapse:collapse;width:${p.width}%"><tbody><tr>${tr}</tr></tbody></table>`;
+        log('buildHtmlLegacy: Generated HTML:', html);
+        return html;
+      };
+  
+      return {
+        render(ctx, el, metadataJsonString) { 
+          log('render: START', { ctx, elContext: el, metadataJson: metadataJsonString });
+
+          if (ctx === 'export') {
+            log('render (export context): Processing for export.');
+            // el is now expected to be an object like { cellsRichHtml: ["<td>Cell1HTML</td>", ...] }
+            if (!el || !el.cellsRichHtml || !Array.isArray(el.cellsRichHtml)) {
+              log('render (export context): ERROR - el.cellsRichHtml is missing or not an array.', el);
+              return '<div>Error: Missing pre-rendered cell HTML for table export.</div>';
+            }
+            if (!metadataJsonString) {
+              log('render (export context): ERROR - metadataJsonString is undefined.');
+              return `<div>Error: Missing table metadata for export.</div>`;
+            }
+
+            let rowMetadata;
+            try {
+              rowMetadata = JSON.parse(metadataJsonString);
+              log('render (export context): Parsed rowMetadata:', rowMetadata);
+            } catch (e) {
+              log('render (export context): ERROR - Failed to parse metadata JSON:', metadataJsonString, e);
+              return `<div>Error: Invalid table metadata.</div>`;
+            }
+            
+            const exportHtml = buildExportHtml(rowMetadata, el.cellsRichHtml);
+            log('render (export context): Returning HTML string for export.');
+            return exportHtml;
+          }
+          
+          // Fallback to existing logic for other contexts (e.g., timeslider)
+          log(`render (context: ${ctx}): Using legacy/timeslider rendering path.`);
+          if (!ctx || (ctx !== 'timeslider')) { 
+            log('render: Skipping - Invalid context for legacy path:', ctx);
+            return;
+          }
+          log('render: Context is valid for legacy path:', ctx);
+  
+          let row;
+          if (ctx.parsedJson) {
+            log('render: Using provided ctx.parsedJson for legacy path');
+            row = ctx.parsedJson;
+          } else {
+            log('render: Parsing JSON from element text/html for legacy path');
+            const txt = ctx === 'timeslider'
+              ? (typeof $ !== 'undefined' ? $('<div>').html(el.innerHTML).text() : el.innerHTML) 
+              : el.innerHTML; 
+            log('render: Text to parse for legacy path:', txt);
+  
+            try {
+              row = JSON.parse(txt);
+              log('render: Parsed JSON successfully for legacy path:', row);
+            } catch (e) {
+              log('render: ERROR - Failed to parse JSON from text for legacy path:', e);
+              console.error('[ep_data_tables:datatables-renderer] Failed to parse JSON (legacy path):', txt, e);
+              return; 
+            }
+          }
+          
+          const extraPropsLegacy = metadataJsonString && typeof metadataJsonString === 'string' ? JSON.parse(metadataJsonString) : (metadataJsonString || {});
+          log('render: Parsed extraProps for legacy path:', extraPropsLegacy);
+          const html = buildHtmlLegacy(row, extraPropsLegacy);
+  
+          if (el.innerHTML !== html) {
+            log('render: Updating element innerHTML for legacy path (timeslider?)');
+            el.innerHTML = html;
+          } else {
+            log('render: Skipping innerHTML update, content matches for legacy path (timeslider?)');
+          }
+          log('render: END (legacy path)');
+        },
+      };
+    })();
+} else {
+  log('DatatablesRenderer already defined.');
+}
+  
+if (typeof exports !== 'undefined') {
+  log('Exporting DatatablesRenderer for Node.js');
+  exports.DatatablesRenderer = DatatablesRenderer;
+}
+  

package/static/js/index.js

@@ -0,0 +1,45 @@
+// index.js – server-side EEJS injections for ep_data_tables
+const eejs = require('ep_etherpad-lite/node/eejs/');
+
+const log = (...m) => console.debug('[ep_data_tables:index]', ...m);
+log('Loading EEJS templates...');
+
+const scriptsTag        = eejs.require('ep_data_tables/templates/datatablesScripts.ejs');
+const editbarButtonsTag = eejs.require('ep_data_tables/templates/datatablesEditbarButtons.ejs');
+const styleTag          = eejs.require('ep_data_tables/templates/styles.ejs'); // Optional base styles
+// const timesliderTag  = eejs.require('ep_data_tables/templates/datatablesScriptsTimeslider.ejs'); // optional
+log('EEJS templates loaded.');
+
+exports.eejsBlock_scripts = (_hook, args) => {
+  log('eejsBlock_scripts: START');
+  args.content += scriptsTag;
+  log('eejsBlock_scripts: Appended scriptsTag.');
+  log('eejsBlock_scripts: END');
+};
+
+exports.eejsBlock_editbarMenuLeft = (_hook, args) => {
+  log('eejsBlock_editbarMenuLeft: START');
+  args.content += editbarButtonsTag;
+  log('eejsBlock_editbarMenuLeft: Appended editbarButtonsTag.');
+  log('eejsBlock_editbarMenuLeft: END');
+};
+
+// Reverted: Only prepend styles from template, do not link external CSS file
+exports.eejsBlock_styles = (_hook, args) => {
+  log('eejsBlock_styles: START');
+  // If you rely solely on the inline CSS from client_hooks.js, delete this hook.
+  args.content = styleTag + args.content;
+  log('eejsBlock_styles: Prepended styleTag (from template).');
+  log('eejsBlock_styles: END');
+};
+
+/* Uncomment only if you truly need extra JS in the timeslider */
+
+exports.eejsBlock_timesliderScripts = (_hook, args) => {
+  log('eejsBlock_timesliderScripts: START');
+  args.content +='<script src="/static/plugins/ep_data_tables/static/js/datatables-renderer.js"></script>';
+  log('eejsBlock_timesliderScripts: Appended timesliderTag.');
+  log('eejsBlock_timesliderScripts: END');
+};
+
+log('EEJS hooks defined.');

package/static/js/initialisation.js

@@ -0,0 +1,249 @@
+/* global $ */
+
+const log = (...m) => console.debug('[ep_data_tables:initialisation]', ...m);
+
+// NEW: Helper function to get line number (adapted from ep_image_insert)
+// Needs to be defined before being used in the mousedown handler
+function _getLineNumberOfElement(element) {
+    // Implementation similar to ep_image_insert
+    let currentElement = element;
+    let count = 0;
+    while (currentElement = currentElement.previousElementSibling) {
+        count++;
+    }
+    return count;
+}
+
+let $tblContextMenu;
+
+exports.postAceInit = (hook, ctx) => {
+  // log('postAceInit: START', { hook, ctx });
+  // ───────────────────── helpers ─────────────────────
+  const $menu      = $('#table-context-menu');
+  const $gridWrap  = $('#create-table-container');
+  const $gridCells = $('#new-table-size-selector td');
+  const $sizeText  = $('#new-table-size');
+  const $toolbarBtn = $('#table-menu-button');
+  // log('postAceInit: Found UI elements.');
+
+  function position(el, target, dx = 0, dy = 0) {
+    // log('position: Calculating position for', el, 'relative to', target);
+    const p = target.offset();
+    el.css({ left: p.left + dx, top: p.top + dy });
+    // log('position: Set position:', { left: p.left + dx, top: p.top + dy });
+  }
+
+  // ───────────────────── init once DOM is ready ─────────────────────
+  // Using setTimeout to ensure DOM elements are ready
+  // log('postAceInit: Setting up UI handlers via setTimeout.');
+  setTimeout(() => {
+    // log('postAceInit: setTimeout callback - START');
+    try {
+    // move pop‑ups to <body> so they are not clipped by #editbar overflow
+    $menu.add($gridWrap).appendTo('body').hide();
+      // log('postAceInit: setTimeout - Moved popups to body.');
+
+    // grid hover: live update highlight & label
+    $gridCells.hover(function () {
+      const cell = $(this);
+      const r = cell.parent().index();
+      const c = cell.index();
+      $gridCells.removeClass('selected');
+      for (let i = 0; i <= r; i++) {
+        for (let j = 0; j <= c; j++) {
+          $('#new-table-size-selector tr').eq(i).find('td').eq(j).addClass('selected');
+        }
+      }
+        const size = `${c + 1} X ${r + 1}`;
+        $sizeText.text(size);
+    });
+
+    // main toolbar button toggles context menu
+    $toolbarBtn.on('click', (e) => {
+        // log('Toolbar Button Click: START');
+      e.preventDefault();
+      e.stopPropagation();
+      position($menu, $toolbarBtn, 0, $toolbarBtn.outerHeight());
+      $menu.toggle();
+      $gridWrap.hide();
+        // log('Toolbar Button Click: END - Toggled menu visibility:', $menu.is(':visible'));
+    });
+
+    // "Insert table" hover reveals grid chooser
+    $('#tbl_prop_create_table').hover(
+      function () {
+        position($gridWrap, $(this), $(this).outerWidth(), -12);
+        $gridWrap.show();
+      },
+        () => {
+          setTimeout(() => {
+            if (!$gridWrap.is(':hover')) {
+              $gridWrap.hide();
+            }
+          }, 100);
+        }
+    );
+
+    // keep grid visible while hovered
+      $gridWrap.hover(
+        () => { $gridWrap.show(); },
+        () => { $gridWrap.hide(); }
+      );
+
+    // selecting a size calls Ace helper then hides menus
+    $gridCells.on('click', () => {
+        // log('Grid Cell Click: START');
+      const [cols, rows] = $sizeText.text().split(' X ').map(n => parseInt(n, 10));
+        // log('Grid Cell Click: Parsed size:', { cols, rows });
+      ctx.ace.callWithAce((ace) => {
+          // log('Grid Cell Click: Calling ace.ace_createTableViaAttributes...');
+        ace.ace_createTableViaAttributes(rows, cols);
+          // log('Grid Cell Click: ace.ace_createTableViaAttributes call finished.');
+      }, 'tblCreate', true);
+      $menu.hide();
+      $gridWrap.hide();
+        // log('Grid Cell Click: END - Hid menus.');
+    });
+
+    // other menu actions (row / col insert & delete, etc.)
+    $menu.find('.menu-item[data-action]')
+      .not('#tbl_prop_create_table')
+      .on('click', function (e) {
+          const action = $(this).data('action');
+          // log('Menu Item Click: START', { action });
+        e.preventDefault();
+        e.stopPropagation();
+        ctx.ace.callWithAce((ace) => {
+            // log('Menu Item Click: Calling ace.ace_doDatatableOptions...', { action });
+          ace.ace_doDatatableOptions(action);
+            // log('Menu Item Click: ace.ace_doDatatableOptions call finished.');
+        }, 'tblOptions', true);
+        $menu.hide();
+          // log('Menu Item Click: END - Hid menu.');
+      });
+
+    // manual close button
+    $('#tbl_prop_menu_hide').on('click', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      $menu.hide();
+    });
+
+    // global click closes pop‑ups when clicking outside
+    $(document).on('click', (e) => {
+      if (!$(e.target).closest('#table-context-menu, #table-menu-button, #create-table-container').length) {
+        $menu.hide();
+        $gridWrap.hide();
+      }
+    });
+
+    // --- BEGIN NEW: Add mousedown listener for cell selection ---
+    // Wrap in callWithAce to ensure we have the editor instance
+    ctx.ace.callWithAce((ace) => {
+        // log('postAceInit: Inside callWithAce for attaching mousedown listeners.');
+        try {
+            const $innerIframe = $('iframe[name="ace_outer"]').contents().find('iframe[name="ace_inner"]');
+            if ($innerIframe.length === 0) {
+                console.error('ep_data_tables postAceInit: ERROR - Could not find inner iframe (ace_inner) for cell selection.');
+                return;
+            }
+            const $inner = $($innerIframe.contents().find('body'));
+            const innerDoc = $innerIframe.contents(); // Inner document for event delegation
+
+            if (!$inner || $inner.length === 0) {
+                console.error('ep_data_tables postAceInit: ERROR - Could not get body from inner iframe for cell selection.');
+                return;
+            }
+
+            // Check if ace.editor exists now we are inside callWithAce
+            if (!ace.editor) {
+                console.error('ep_data_tables postAceInit: ERROR - ace.editor is STILL undefined inside callWithAce. Cannot attach state.');
+                return;
+            }
+
+            // Initialize the shared state variable on the editor instance
+            if (typeof ace.editor.ep_data_tables_last_clicked === 'undefined') {
+                ace.editor.ep_data_tables_last_clicked = null;
+                // log('postAceInit: Initialized ace.editor.ep_data_tables_last_clicked');
+            }
+
+            // log('postAceInit: Attempting to attach mousedown listener to $inner for cell selection...');
+
+            // Mousedown on table TD elements
+            $inner.on('mousedown', 'table.dataTable td', function(evt) {
+                // log('[ep_data_tables mousedown] RAW MOUSE DOWN detected inside table.dataTable td.');
+                
+                // Check if the click is on an image or image-related element
+                const target = evt.target;
+                const $target = $(target);
+                const isImageElement = $target.closest('.inline-image, .image-placeholder, .image-inner, .image-resize-handle').length > 0;
+                
+                if (isImageElement) {
+                    // log('[ep_data_tables mousedown] Click detected on image element within table cell. Completely skipping table processing to avoid interference.');
+                    // Completely skip all table processing when image is clicked
+                    return;
+                }
+                
+                // log('[ep_data_tables mousedown] Click detected on table cell (not image). Processing normally.');
+                
+                if (evt.button !== 0) return; // Only left clicks
+
+                const tdElement = $(this); 
+                const trElement = tdElement.closest('tr');
+                const tableElement = trElement.closest('table.dataTable');
+                const lineDiv = tdElement.closest('div.ace-line'); 
+
+                if (tdElement.length && trElement.length && tableElement.length && lineDiv.length) {
+                    const cellIndex = tdElement.index(); 
+                    const tblId = tableElement.attr('data-tblId');
+                    const lineNum = _getLineNumberOfElement(lineDiv[0]);
+
+                    if (tblId !== undefined && cellIndex !== -1 && lineNum !== -1) {
+                        // log(`[ep_data_tables mousedown] Clicked cell (SUCCESS): Line=${lineNum}, TblId=${tblId}, CellIndex=${cellIndex}`);
+                        // Store info on the shared ace editor object
+                        ace.editor.ep_data_tables_last_clicked = { lineNum, cellIndex, tblId };
+
+                        // Visual feedback (Keep this for now)
+                        // --- TEST: Comment out class manipulation ---
+                        // tableElement.find('td.selected-table-cell').removeClass('selected-table-cell');
+                        // tdElement.addClass('selected-table-cell');
+                        // log('[ep_data_tables mousedown] TEST: Skipped adding/removing selected-table-cell class');
+                    } else {
+                        console.warn('[ep_data_tables mousedown] Could not reliably get cell info (FAIL).', {tblId, cellIndex, lineNum});
+                        ace.editor.ep_data_tables_last_clicked = null; // Clear shared state
+                        // --- TEST: Comment out class manipulation (for consistency on failure) ---
+                        // $inner.find('td.selected-table-cell').removeClass('selected-table-cell');
+                    }
+                } else {
+                     // log('[ep_data_tables mousedown] Click was not within a valid TD/TR/TABLE/LINEDIV structure (FAIL).');
+                }
+            });
+
+            // Add listener to clear selection when clicking outside tables
+            $(innerDoc).on('mousedown', function(evt) {
+                if (!$(evt.target).closest('table.dataTable').length) {
+                    if (ace.editor.ep_data_tables_last_clicked) { 
+                        // log('[ep_data_tables mousedown] Clicked outside table, clearing cell info.');
+                        ace.editor.ep_data_tables_last_clicked = null;
+                        // --- TEST: Comment out class manipulation ---
+                        // $inner.find('td.selected-table-cell').removeClass('selected-table-cell');
+                    }
+                }
+            });
+
+            // log('postAceInit: Mousedown listeners for cell selection attached successfully (inside callWithAce).');
+
+        } catch(e) {
+            console.error('[ep_data_tables postAceInit] Error attaching mousedown listener (inside callWithAce):', e);
+        }
+    }, 'tables5_cell_selection_setup', true); // Unique name for callWithAce task
+    // --- END NEW: Add mousedown listener for cell selection ---
+
+    } catch (error) {
+      // log('postAceInit: setTimeout callback - ERROR:', error);
+      console.error('[ep_data_tables:initialisation] Error in setTimeout callback:', error);
+    }
+    // log('postAceInit: setTimeout callback - END');
+  }, 400); // delay so #editbar is in DOM
+  // log('postAceInit: END');
+};

package/templates/datatablesEditbarButtons.ejs

@@ -0,0 +1,50 @@
+<li class="separator acl-write"></li>
+
+<li id="table-menu-button" class="acl-write">
+  <!-- just a button, no nested <a> -->
+  <button title="Table"
+          class="buttonicon buttonicon-table"
+          aria-haspopup="true"
+          aria-expanded="false"></button>
+</li>
+
+<!-- context menu -->
+<nav id="table-context-menu" class="table-context-menu" role="menu">
+  <ul role="none">
+    <li class="menu-item" id="tbl_prop_create_table" role="menuitem">
+      <a href="#create-table-container" data-l10n-id="ep_data_tables.menuCreateTable">Insert Table</a>
+    </li>
+  </ul>
+
+  <ul role="none">
+    <li class="menu-item" data-action="addTblRowA"><a href="#" data-l10n-id="ep_data_tables.menuInsertRowAbove">Insert Row Above</a></li>
+    <li class="menu-item" data-action="addTblRowB"><a href="#" data-l10n-id="ep_data_tables.menuInsertRowBelow">Insert Row Below</a></li>
+    <li class="menu-item" data-action="addTblColL"><a href="#" data-l10n-id="ep_data_tables.menuInsertColumnLeft">Insert Column Left</a></li>
+    <li class="menu-item" data-action="addTblColR"><a href="#" data-l10n-id="ep_data_tables.menuInsertColumnRight">Insert Column Right</a></li>
+  </ul>
+
+  <ul role="none">
+    <li class="menu-item" data-action="delTblRow"><a href="#" data-l10n-id="ep_data_tables.menuDeleteRow">Delete Row</a></li>
+    <li class="menu-item" data-action="delTblCol"><a href="#" data-l10n-id="ep_data_tables.menuDeleteColumn">Delete Column</a></li>
+  </ul>
+
+  <ul role="none">
+    <li class="menu-item" id="tbl_prop_menu_hide"><a href="#" data-l10n-id="ep_data_tables.menuCloseThisMenu">Close Menu</a></li>
+  </ul>
+
+  <!-- table-size chooser -->
+  <div id="create-table-container" class="table-context-menu">
+    <div id="new-table-size">1 X 1</div>
+    <table id="new-table-size-selector">
+      <tbody>
+        <% for (let i = 1; i <= 30; i++) { %>
+        <tr>
+          <% for (let j = 1; j <= 10; j++) { %>
+            <td tabindex="-1"></td>
+          <% } %>
+        </tr>
+        <% } %>
+      </tbody>
+    </table>
+  </div>
+</nav>

package/templates/datatablesScripts.ejs

@@ -0,0 +1,16 @@
+<script src="../static/plugins/ep_data_tables/static/js/datatables-renderer.js"></script>
+<script type="text/javascript">
+  // Ensure DatatablesRenderer is available globally
+  if (typeof window.DatatablesRenderer === 'undefined') {
+    window.DatatablesRenderer = DatatablesRenderer;
+  }
+  
+  // Access the Changeset object properly from Etherpad's existing references
+  // We need to avoid setting it to an empty object which would break functionality
+  // Changeset should remain whatever Etherpad has already defined it as
+  
+  // Create a global Datatables variable if it doesn't exist
+  if (typeof window.Datatables === 'undefined' && typeof Datatables !== 'undefined') {
+    window.Datatables = Datatables;
+  }
+</script>

package/templates/datatablesScriptsTimeslider.ejs

@@ -0,0 +1 @@
+<script src="../static/plugins/ep_data_tables/static/js/datatables-renderer.js"></script>

package/templates/styles.ejs

@@ -0,0 +1 @@
+<link rel="stylesheet" href="../static/plugins/ep_data_tables/static/css/table-menu.css" type="text/css" />