more work on table capsules

jjallaire · jjallaire · commit 0609a10f95a8 · 2020-05-17T08:28:35.000-04:00
diff --git a/src/gwt/panmirror/src/editor/src/nodes/table/table-capsule.ts b/src/gwt/panmirror/src/editor/src/nodes/table/table-capsule.ts
@@ -31,7 +31,7 @@ export function tableBlockCapsuleFilter() : PandocBlockCapsuleFilter {
 
     type: kTableBlockCapsuleType,
     
-    match: /^([\t >]*)(<table>.*?<\/table>)([ \t]*)$/gm,
+    match: /^([\t >]*)(<table.*?<\/table>)([ \t]*)$/gm,
     
     // textually enclose the capsule so that pandoc parses it as the type of block we want it to
     // (in this case we don't do anything because pandoc would have written this table as a 
@@ -99,9 +99,24 @@ export function tableBlockCapsuleFilter() : PandocBlockCapsuleFilter {
         // get prosemirror dom parser
         const prosemirrorDomParser = DOMParser.fromSchema(schema);
 
+        // get unparsed (by prosemirror) table
+        const unparsedTable = doc.body.firstChild;
+
+        // ensure that table cells all have content
+        const ensureCellContent = (tag: string) => {
+          const cells = unparsedTable.getElementsByTagName(tag);
+          for (let i=0; i<cells.length; i++) {
+            const cell = cells.item(i)!;
+            if (cell.children.length === 0) {
+              cell.append(window.document.createElement('p'));
+            }
+          }
+        };
+        ensureCellContent('td');
+        ensureCellContent('th');
+
         // extract caption element
         let captionElement: HTMLTableCaptionElement | null = null;
-        const unparsedTable = doc.body.firstChild;
         const captionCollection = unparsedTable.getElementsByTagName('caption');
         if (captionCollection.length) {
           captionElement = captionCollection.item(0);
diff --git a/src/gwt/panmirror/src/editor/src/nodes/table/table-nodes.ts b/src/gwt/panmirror/src/editor/src/nodes/table/table-nodes.ts
@@ -52,9 +52,7 @@ const nodes = tableNodes({
         return (dom as HTMLElement).className;
       },
       setDOMAttr(value, attrs) {
-        if (value) {
-          attrs.class = value;
-        }
+        attrs.class = kDefaultCellClasses;
       },
     },
   },
@@ -97,9 +95,30 @@ export const tableNode = {
         getAttrs: (dom: Node | string) => {
           const el = dom as HTMLElement;
 
-          let width: number | null = null;
+          // shared colpercents
           let colpercents: number[] | null = null;
 
+          // if we have a colgroup w/ widths then read percents from there
+          // <colgroup><col style="width: 44%" /><col style="width: 11%" /></colgroup>
+          const colgroup  = el.getElementsByTagName('colgroup');
+          if (colgroup.length) {
+            const cols = colgroup[0].childElementCount;
+            colpercents = new Array<number>(cols).fill(0);
+            for (let i = 0; i<cols; i++) {
+              const col = colgroup[0].children.item(i) as HTMLElement;
+              if (col.style.width) {
+                colpercents[i] = (parseInt(col.style.width, 10) || 0) / 100;
+              }
+            }
+            if (colpercents.every(value => !!value)) {
+              return {
+                colpercents
+              };
+            }
+          }
+        
+          // otherwise read from data-colwidth
+          let width: number | null = null;
           const rows = el.getElementsByTagName('tr');
           if (rows.length) {
             const firstRow = rows.item(0)!;
