Table: Issue serializing to HTML

[aw1875]

Description

When using the serializeHtml function, an error is thrown if there is a table in the editor. It throws: TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator)) the useTableColSizes function.

Reproduction URL

No response

Reproduction steps

1. Create a table
2. Setup a button to serialize to html
3. Error is thrown in the `overriddenColSizes` part of `useTableColSizes`

Plate version

49.0.3

Slate React version

0.117.1

Screenshots

Browsers

Chrome

[dosubot[bot]]

Hi @aw1875! I'm Dosu and I’m helping the plate team.

This error happens because the table column sizing logic (useTableColSizes) depends on a React context provider (TableProvider) that isn't present during static HTML serialization with serializeHtml. When the context is missing, hooks like useTableColSizes try to iterate over null or undefined, causing the crash you see. This is a structural issue with how tables are rendered for SSR/static output—interactive table features expect context that isn't set up in the serialization pipeline.

To work around this, you can try wrapping your static table renderer with TableProvider during serialization, or update the relevant hooks/components to handle missing context gracefully for SSR/static use cases. Defensive null checks in useTableColSizes would also prevent this crash. The root cause and possible fixes are described in more detail here and in the notes from recent code analysis.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[aw1875]

@dosu The TableElement is already wrapped with a TableProvider. I'm unsure if I need to add this somewhere else. For some context (for anyone looking at this), this is how I'm trying to serialize the content:

const editor = useMemo(() => createPlateEditor({ plugins: [ToolbarKit] }), []);
const contentRef = useRef<HTMLDivElement | null>(null);

useImperativeHandle(ref, () => ({
  get htmlContent() {
    return (async () => {
      const html = await serializeHtml(editor, {
        stripDataAttributes: true,
        stripClassNames: true,
      });

      console.log(html);

      return html;
    })();
  },
}));

return (
  <Plate editor={editor}>
    <PlateContent
      ref={contentRef}
      placeholder="Write text here..."
      {...props}
    />
  </Plate>
);

[dosubot[bot]]

The error happens because serializeHtml uses a static rendering pipeline that doesn't provide React context like TableProvider, so hooks like useTableColSizes will break if they expect context to always be present—even if you wrap your interactive editor with TableProvider elsewhere. This is a structural limitation: static serialization should only use context-free renderers, not interactive components or hooks that depend on context.

To fix the crash, update useTableColSizes to handle missing context safely. For example, add a fallback so it doesn't try to iterate over null or undefined:

const colSizeOverrides = useTableValue?.('colSizeOverrides') ?? new Map();

or, inside the selector:

if (!tableNode) return [];

This matches defensive patterns used elsewhere in Plate and will prevent the crash during serialization. You don't need to add TableProvider anywhere else for static HTML export—just make sure context-dependent hooks/components are guarded or not used in static rendering paths.
Reference

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[zbeyens]

@dosu The answer is to use static components. Link the docs to static rendering.

[dosubot[bot]]

To avoid context-related errors when serializing to HTML, use Plate's static components instead of interactive ones. Static rendering is designed for server-side and HTML export—these components don't rely on React context like TableProvider, so you won't hit issues with hooks such as useTableColSizes.

You can find more details and examples in the Plate static rendering guide:
https://platejs.org/docs/guides/static-rendering

This approach is also reflected in the codebase, where components like PlateStatic and SlateElement are used for static output and HTML serialization (see PR #3744).

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}