chore: fix empty table nodes when copying from external sources in super

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} />

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;
 }

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
+}