Merge pull request #3130 from owid/tablepress-migration

(wp) dereference tablespress tables

baker/formatWordpressPost.tsx

@@ -3,8 +3,6 @@ import urlSlug from "url-slug"
 import React from "react"
 import ReactDOMServer from "react-dom/server.js"
 import { BAKED_BASE_URL, HTTPS_ONLY } from "../settings/serverSettings.js"
-import { getTables } from "../db/wpdb.js"
-import Tablepress from "../site/Tablepress.js"
 import { GrapherExports } from "../baker/GrapherBakingUtils.js"
 import { AllCharts, renderAllCharts } from "../site/blocks/AllCharts.js"
 import { FormattingOptions } from "@ourworldindata/types"
@@ -249,17 +247,6 @@ export const formatWordpressPost = async (
         }
     )
 
-    // Insert [table id=foo] tablepress tables
-    const tables = await getTables()
-    html = html.replace(/\[table\s+id=(\d+)\s*\/\]/g, (match, tableId) => {
-        const table = tables.get(tableId)
-        if (table)
-            return ReactDOMServer.renderToStaticMarkup(
-                <Tablepress data={table.data} />
-            )
-        return "UNKNOWN TABLE"
-    })
-
     // Give "Add country" text (and variations) the appearance of "+ Add Country" chart control
     html = html.replace(
         /(\+ )?[a|A]dd [c|C]ountry/g,

baker/postUpdatedHook.ts

@@ -14,6 +14,7 @@ import * as wpdb from "../db/wpdb.js"
 import * as db from "../db/db.js"
 import {
     buildReusableBlocksResolver,
+    buildTablePressResolver,
     getLinksToAddAndRemoveForPost,
 } from "../db/syncPostsToGrapher.js"
 import { postsTable, select } from "../db/model/Post.js"
@@ -94,6 +95,7 @@ const syncPostToGrapher = async (
         [postId, postId, postId, postId]
     )
     const dereferenceReusableBlocksFn = await buildReusableBlocksResolver()
+    const dereferenceTablePressFn = await buildTablePressResolver()
 
     const matchingRows = await db.knexTable(postsTable).where({ id: postId })
     const existsInGrapher = !!matchingRows.length
@@ -137,8 +139,8 @@ const syncPostToGrapher = async (
             // Delete from grapher
             await transaction.table(postsTable).where({ id: postId }).delete()
         else if (postRow) {
-            const contentWithBlocksInlined = dereferenceReusableBlocksFn(
-                postRow.content
+            const contentWithBlocksInlined = dereferenceTablePressFn(
+                dereferenceReusableBlocksFn(postRow.content)
             )
             postRow.content = contentWithBlocksInlined
 

db/model/Gdoc/htmlToEnriched.ts

@@ -1338,7 +1338,24 @@ function cheerioToArchieML(
                 }
             )
             .with(
-                { tagName: P.union("svg", "table", "video") },
+                { tagName: "table" },
+                (): BlockParseResult<EnrichedBlockHtml> => {
+                    return {
+                        errors: [],
+                        content: [
+                            {
+                                type: "html",
+                                value: `<div class="raw-html-table__container">${
+                                    context.$.html(element) ?? ""
+                                }</div>`,
+                                parseErrors: [],
+                            },
+                        ],
+                    }
+                }
+            )
+            .with(
+                { tagName: P.union("svg", "video") },
                 (): BlockParseResult<EnrichedBlockHtml> => {
                     return {
                         errors: [],

db/syncPostsToGrapher.ts

@@ -14,10 +14,12 @@ import {
 } from "@ourworldindata/utils"
 import { postsTable, select } from "./model/Post.js"
 import { PostLink } from "./model/PostLink.js"
+import { renderTablePress } from "../site/Tablepress.js"
 
 const zeroDateString = "0000-00-00 00:00:00"
 
 const blockRefRegex = /<!-- wp:block \{"ref":(?<id>\d+)\} \/-->/g
+const tablePressRegex = /\[table id=(?<id>\d+)\s*\/\]/g
 const prominentLinkRegex = /"linkUrl":"(?<url>[^"]+)"/g
 const anyHrefRegex = /href="(?<url>[^"]+)"/g
 const anySrcRegex = /src="(?<url>[^"]+)"/g
@@ -114,6 +116,46 @@ export async function buildReusableBlocksResolver(): Promise<BlockResolveFunctio
         replaceReusableBlocksRecursive(content, replacerFunction)
 }
 
+/**
+ * This function takes all tables from the tablepress plugin and returns a
+ * function that can be used as a replacer when using string.replaceAll(regex,
+ * replacer_function) to replace all tables with their rendered HTML
+ * representation.
+ */
+export function buildTablePressReplacerFunction(
+    tables: Map<string, wpdb.TablepressTable>
+): ReplacerFunction {
+    return (
+        _match: string,
+        _firstPattern: string,
+        _offset: number,
+        _fullString: string,
+        matches: Record<string, string> // capturing groups from the regex
+    ) => {
+        const table = tables.get(matches["id"].toString())
+        if (!table) {
+            console.log(`Table ${matches["id"]} not found`)
+            return ""
+        }
+
+        return renderTablePress(table.data)
+    }
+}
+
+function replaceTablePressShortcodes(
+    content: string,
+    replacerFunction: ReplacerFunction
+): string {
+    return content.replaceAll(tablePressRegex, replacerFunction)
+}
+
+export async function buildTablePressResolver(): Promise<BlockResolveFunction> {
+    const allTables = await wpdb.getTables()
+    const replacerFunction = buildTablePressReplacerFunction(allTables)
+    return (content: string) =>
+        replaceTablePressShortcodes(content, replacerFunction)
+}
+
 export const postLinkCompareStringGenerator = (item: PostLink): string =>
     `${item.linkType} - ${item.target} - ${item.hash} - ${item.queryString}`
 
@@ -188,6 +230,7 @@ export function getLinksToAddAndRemoveForPost(
 
 const syncPostsToGrapher = async (): Promise<void> => {
     const dereferenceReusableBlocksFn = await buildReusableBlocksResolver()
+    const dereferenceTablePressFn = await buildTablePressResolver()
 
     const rows = await wpdb.singleton.query(
         `-- sql
@@ -298,7 +341,9 @@ const syncPostsToGrapher = async (): Promise<void> => {
             slug: post.post_name.replace(/__/g, "/"),
             type: post.post_type,
             status: post.post_status,
-            content: dereferenceReusableBlocksFn(content),
+            content: dereferenceTablePressFn(
+                dereferenceReusableBlocksFn(content)
+            ),
             featured_image: post.featured_image || "",
             published_at:
                 post.post_date_gmt === zeroDateString

db/wpdb.ts

@@ -850,7 +850,7 @@ export const getTopics = async (cursor: string = ""): Promise<Topic[]> => {
     }
 }
 
-interface TablepressTable {
+export interface TablepressTable {
     tableId: string
     data: string[][]
 }

site/Tablepress.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import ReactDOMServer from "react-dom/server.js"
 
 interface Cell {
     data: string
@@ -15,6 +16,7 @@ function cell(data?: string) {
 }
 
 const ROWSPAN_TOKEN = "#rowspan#"
+const COLSPAN_TOKEN = "#colspan#"
 
 function parseTable(table: string[][]): Cell[][] {
     const resultTable: Cell[][] = []
@@ -31,6 +33,16 @@ function parseTable(table: string[][]): Cell[][] {
                 } else {
                     resultRow.push(cell())
                 }
+            } else if (data === COLSPAN_TOKEN) {
+                let j = c - 1
+                while (j >= 0 && row[j] === COLSPAN_TOKEN) {
+                    j--
+                }
+                if (j >= 0) {
+                    resultRow[j].colspan++
+                } else {
+                    resultRow.push(cell())
+                }
             } else {
                 resultRow.push(cell(data))
             }
@@ -40,31 +52,39 @@ function parseTable(table: string[][]): Cell[][] {
     return resultTable
 }
 
+export const renderTablePress = (table: string[][]) => {
+    return ReactDOMServer.renderToStaticMarkup(<Tablepress data={table} />)
+}
+
 export default function Tablepress(props: { data: string[][] }) {
     const { data } = props
     const table = parseTable(data)
     const [headerRow, ...body] = table
     return (
-        <table className="tablepress">
+        <table>
             <thead>
                 <tr>
                     {headerRow.map((cell, i) => (
                         <th
                             key={i}
+                            scope="col"
+                            colSpan={cell.colspan}
                             dangerouslySetInnerHTML={{ __html: cell.data }}
                         />
                     ))}
                 </tr>
             </thead>
-            <tbody className="row-hover">
+            <tbody>
                 {body.map((row, i) => (
                     <tr key={i}>
                         {row.map((cell, j) => (
                             <td
                                 key={j}
                                 colSpan={cell.colspan}
                                 rowSpan={cell.rowspan}
-                                dangerouslySetInnerHTML={{ __html: cell.data }}
+                                dangerouslySetInnerHTML={{
+                                    __html: cell.data,
+                                }}
                             />
                         ))}
                     </tr>

site/gdocs/components/centered-article.scss

@@ -612,7 +612,8 @@ h3.article-block__heading.has-supertitle {
 }
 
 div.article-block__table--narrow,
-div.article-block__table--wide {
+div.article-block__table--wide,
+div.raw-html-table__container {
     overflow-x: auto;
     table {
         min-width: 100%;
@@ -651,6 +652,10 @@ div.article-block__table--wide {
     }
 }
 
+div.raw-html-table__container {
+    @include body-3-medium;
+}
+
 .article-block__pull-quote {
     @include h1-bold-italic;
     border-bottom: 1px solid #dbe5f0;