fix: table column widths not being set in exported HTML (#1947)

Author: matthewlipski

docs/content/docs/features/export/html.mdx

@@ -16,11 +16,14 @@ path: /docs/converting-blocks
 
 ## Export to BlockNote HTML
 
-Use `editor.blocksToFullHTML` to export the entire document with all structure, styles and formatting.
-The exported HTML is the same as BlockNote would use to render the editor, and includes all structure for nested blocks.
+Use `editor.blocksToFullHTML` to export blocks with their full HTML structure, the same as BlockNote uses in its rendered HTML.
 
 For example, you an use this for static rendering documents that have been created in the editor.
-Make sure to include the same stylesheets when you want to render the output HTML ([see example](/examples/backend/rendering-static-documents)).
+
+<Callout type={"info"}>
+    For the exported HTML to look the same as the editor, make sure to wrap it in the same `div`s that the editor renders, and add the same stylesheets. To learn more, see [this example](/examples/backend/rendering-static-documents).
+
+</Callout>
 
 ```typescript
 async blocksToFullHTML(blocks?: Block[]): Promise<string>;

examples/02-backend/04-rendering-static-documents/src/App.tsx

@@ -1,18 +1,20 @@
 import "@blocknote/core/fonts/inter.css";
-import "@blocknote/core/style.css";
+import "@blocknote/mantine/style.css";
 
 /**
  On Server Side, you can use the ServerBlockNoteEditor to render BlockNote documents to HTML. e.g.:
 
-    import { ServerBlockNoteEditor } from "@blocknote/server-util";
+  import { ServerBlockNoteEditor } from "@blocknote/server-util";
 
-    const editor = ServerBlockNoteEditor.create();
-    const html = await editor.blocksToFullHTML(document);
+  const editor = ServerBlockNoteEditor.create();
+  const html = await editor.blocksToFullHTML(document);
 
 You can then use render this HTML as a static page or send it to the client. Make sure to include the editor stylesheets:
-
-    import "@blocknote/core/fonts/inter.css";
-    import "@blocknote/core/style.css";
+  
+  import "@blocknote/core/fonts/inter.css";
+  // Depending on the UI library you're using, you may want to use `react`, 
+  // `mantine`, etc instead of `core`.
+  import "@blocknote/core/style.css";
 
 This example has the HTML hard-coded, but shows at least how the document will be rendered when the appropriate style sheets are loaded.
  */
@@ -50,9 +52,14 @@ export default function App() {
 
   // Renders the editor instance using a React component.
   return (
-    <div className="bn-container">
+    // To make the HTML look identical to the editor, we need to add these two
+    // wrapping divs to the exported blocks. You need will need to add
+    // additional class names/attributes depend on the UI library you're using,
+    // whether you want to show light or dark more, etc. It's easiest to just
+    // check the rendered editor HTML to see what you need to add.
+    <div className="bn-container bn-mantine">
       <div
-        className="bn-default-styles"
+        className="ProseMirror bn-editor bn-default-styles"
         dangerouslySetInnerHTML={{ __html: html }}
       />
     </div>

packages/core/src/blocks/TableBlockContent/TableBlockContent.ts

@@ -34,8 +34,8 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
     ];
   },
 
-  renderHTML({ HTMLAttributes }) {
-    return createDefaultBlockDOMOutputSpec(
+  renderHTML({ node, HTMLAttributes }) {
+    const domOutputSpec = createDefaultBlockDOMOutputSpec(
       this.name,
       "table",
       {
@@ -44,6 +44,30 @@ export const TableBlockContent = createStronglyTypedTiptapNode({
       },
       this.options.domAttributes?.inlineContent || {},
     );
+
+    // Need to manually add colgroup element
+    const colGroup = document.createElement("colgroup");
+    for (const tableCell of node.children[0].children) {
+      const colWidths: null | (number | undefined)[] =
+        tableCell.attrs["colwidth"];
+
+      if (colWidths) {
+        for (const colWidth of tableCell.attrs["colwidth"]) {
+          const col = document.createElement("col");
+          if (colWidth) {
+            col.style = `width: ${colWidth}px`;
+          }
+
+          colGroup.appendChild(col);
+        }
+      } else {
+        colGroup.appendChild(document.createElement("col"));
+      }
+    }
+
+    domOutputSpec.dom.firstChild?.appendChild(colGroup);
+
+    return domOutputSpec;
   },
 
   // This node view is needed for the `columnResizing` plugin. By default, the
@@ -146,8 +170,11 @@ const TableParagraph = createStronglyTypedTiptapNode({
     ];
   },
 
-  renderHTML({ HTMLAttributes }) {
-    return ["p", HTMLAttributes, 0];
+  renderHTML({ node, HTMLAttributes }) {
+    // Insert a line break if there is no content, in order to preserve the
+    // correct cell height. Otherwise, the cell will have a height of zero +
+    // padding.
+    return ["p", HTMLAttributes, node.childCount ? 0 : ["br"]];
   },
 });
 

tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-chromium-linux.png

@@ -18,6 +18,10 @@ <h1>Heading 1</h1>
   <code class="bn-inline-content language-text" data-language="text">console.log("Hello World");</code>
 </pre>
 <table>
+  <colgroup>
+    <col />
+    <col />
+  </colgroup>
   <tr>
     <td colspan="1" rowspan="1">
       <p>Table Cell 1</p>

tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-firefox-linux.png

@@ -18,6 +18,10 @@ <h2 data-level="2">Heading 1</h2>
   <code class="bn-inline-content language-typescript" data-language="typescript">console.log("Hello World");</code>
 </pre>
 <table>
+  <colgroup>
+    <col />
+    <col />
+  </colgroup>
   <tr>
     <td colspan="1" rowspan="1">
       <p>Table Cell 1</p>

tests/src/end-to-end/static/static.test.ts-snapshots/static-rendering-webkit-linux.png

@@ -3,6 +3,11 @@
     <div class="bn-block" data-node-type="blockContainer" data-id="1">
       <div class="bn-block-content" data-content-type="table">
         <table class="bn-inline-content">
+          <colgroup>
+            <col style="width: 100px;" />
+            <col style="width: 200px;" />
+            <col style="width: 300px;" />
+          </colgroup>
           <tr>
             <td colspan="1" rowspan="1" colwidth="100">
               <p>Table Cell</p>

tests/src/unit/core/clipboard/copy/__snapshots__/text/html/basicBlocks.html

@@ -3,6 +3,11 @@
     <div class="bn-block" data-node-type="blockContainer" data-id="1">
       <div class="bn-block-content" data-content-type="table">
         <table class="bn-inline-content">
+          <colgroup>
+            <col />
+            <col />
+            <col />
+          </colgroup>
           <tr>
             <td colspan="1" rowspan="1">
               <p>Table Cell</p>