From 653af36363dc00a46dfe85353bf72075ea45c628 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 7 Aug 2023 22:06:05 +0530
Subject: [PATCH] chore: fix empty table nodes when copying from external
 sources in super

---
 .../Components/SuperEditor/BlocksEditor.tsx   |  2 ++
 .../SuperEditor/Lexical/Theme/editor.scss     |  2 +-
 .../SuperEditor/Plugins/TablePlugin.tsx       | 34 +++++++++++++++++--
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx b/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
index c3634bcaf..708d81b7a 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
@@ -25,6 +25,7 @@ import { handleEditorChange } from './Utils'
 import { SuperEditorContentId } from './Constants'
 import { classNames } from '@standardnotes/utils'
 import { MarkdownTransformers } from './MarkdownTransformers'
+import { RemoveBrokenTablesPlugin } from './Plugins/TablePlugin'
 
 type BlocksEditorProps = {
   onChange?: (value: string, preview: string) => void
@@ -105,6 +106,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
       <YouTubePlugin />
       <CollapsiblePlugin />
       <TabIndentationPlugin />
+      <RemoveBrokenTablesPlugin />
       {!readonly && floatingAnchorElem && (
         <>
           <FloatingTextFormatToolbarPlugin anchorElem={floatingAnchorElem} />
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/editor.scss b/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/editor.scss
index 20a0ce1e4..cc935bee8 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/editor.scss
+++ b/packages/web/src/javascripts/Components/SuperEditor/Lexical/Theme/editor.scss
@@ -149,7 +149,7 @@
   top: 0;
 }
 .Lexical__tableCellHeader {
-  background-color: var(--sn-stylekit-contrast-background-color);
+  background-color: var(--sn-stylekit-contrast-background-color) !important;
   border-color: var(--sn-stylekit-contrast-border-color);
   text-align: start;
 }
diff --git a/packages/web/src/javascripts/Components/SuperEditor/Plugins/TablePlugin.tsx b/packages/web/src/javascripts/Components/SuperEditor/Plugins/TablePlugin.tsx
index 6733b3e78..90dd7ef9e 100644
--- a/packages/web/src/javascripts/Components/SuperEditor/Plugins/TablePlugin.tsx
+++ b/packages/web/src/javascripts/Components/SuperEditor/Plugins/TablePlugin.tsx
@@ -6,12 +6,14 @@
  *
  */
 
-import { INSERT_TABLE_COMMAND } from '@lexical/table'
+import { INSERT_TABLE_COMMAND, TableNode, TableRowNode } from '@lexical/table'
 import { LexicalEditor } from 'lexical'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import Button from '../Lexical/UI/Button'
 import { DialogActions } from '../Lexical/UI/Dialog'
 import TextInput from '../Lexical/UI/TextInput'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { mergeRegister } from '@lexical/utils'
 
 export function InsertTableDialog({
   activeEditor,
@@ -38,3 +40,31 @@ export function InsertTableDialog({
     </>
   )
 }
+
+/**
+ * Sometimes copy/pasting tables from other sources can result
+ * in adding extra table nodes which don't have any children.
+ * This causes an error when copying the table or exporting the
+ * note as HTML.
+ * This plugin removes any tables which don't have any children.
+ */
+export function RemoveBrokenTablesPlugin() {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => {
+    return mergeRegister(
+      editor.registerNodeTransform(TableRowNode, (node) => {
+        if (!node.getFirstChild()) {
+          node.remove()
+        }
+      }),
+      editor.registerNodeTransform(TableNode, (node) => {
+        if (!node.getFirstChild()) {
+          node.remove()
+        }
+      }),
+    )
+  }, [editor])
+
+  return null
+}