How to insert Table? A really simple example is not working. (Vanilla JS)

[peppies]

I've looked this up countless times on Google and everywhere else, and it seems ridiculously straight forward. For some reason, I cannot get a lexical table to insert.

My website is a standalone app, not built in React. I use a Rollup bundle script to bundle up Lexical packages into a single JS file that runs on my site. Here is what I have:

src/main.js:

import { createEditor, FORMAT_TEXT_COMMAND, $getRoot, UNDO_COMMAND, REDO_COMMAND, FORMAT_ELEMENT_COMMAND, $getSelection, $isRangeSelection, INSERT_PARAGRAPH_COMMAND, createCommand, $createParagraphNode, $createTextNode, $insertNodes} from 'lexical';
import { registerRichText, HeadingNode, QuoteNode, $createQuoteNode, $isQuoteNode } from '@lexical/rich-text';
import { $getNearestNodeOfType} from '@lexical/utils';
import { $setBlocksType } from '@lexical/selection';
import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html';
import { createHeadlessEditor } from '@lexical/headless';
import { $convertToMarkdownString, $convertFromMarkdownString, registerMarkdownShortcuts } from '@lexical/markdown';
import { AutoLinkNode, LinkNode } from "@lexical/link";
import { ListNode, ListItemNode } from "@lexical/list";
import { TableNode, TableCellNode, TableRowNode, INSERT_TABLE_COMMAND } from "@lexical/table";
import { CodeNode, $isCodeNode, $createCodeNode } from "@lexical/code";
import { createEmptyHistoryState, registerHistory } from '@lexical/history';

export { createEditor , $getRoot, registerRichText , HeadingNode, QuoteNode, FORMAT_TEXT_COMMAND , FORMAT_ELEMENT_COMMAND , $generateHtmlFromNodes , createHeadlessEditor , $convertToMarkdownString , $convertFromMarkdownString, registerMarkdownShortcuts, AutoLinkNode, LinkNode, ListNode, ListItemNode, TableNode, TableCellNode, TableRowNode, CodeNode , createEmptyHistoryState , registerHistory, UNDO_COMMAND, REDO_COMMAND , $getSelection, $isRangeSelection, $createQuoteNode, $setBlocksType, INSERT_PARAGRAPH_COMMAND, $isQuoteNode, createCommand, $createParagraphNode, $getNearestNodeOfType, $isCodeNode, $createCodeNode, $createTextNode, INSERT_TABLE_COMMAND, $insertNodes};

Web App:

// sorry, forgot to add this bit
const config = {namespace: 'RichTextEditor',
  theme: exampleTheme,
  nodes: [
    lex.LinkNode,
    lex.AutoLinkNode,
    lex.ListNode,
    lex.ListItemNode,
    lex.TableNode,
    lex.TableCellNode,
    lex.TableRowNode,
    lex.CodeNode,
    lex.HeadingNode,
    lex.QuoteNode
  ],
  onError: (error) => console.log(error)
};

var editor = lex.createEditor(config);

<style>
  table, td {
    background-color:black;
    min-height:100px;
    min-width:100px;
  }
</style>

document.querySelector('#table-button').addEventListener('click', () => {
  editor.update(() => {
    editor.dispatchCommand(lex.INSERT_TABLE_COMMAND, { rows: '3', columns: '3', includeHeaders: true });
    console.log(JSON.stringify(editor.getEditorState()));
  });
});

When I add some text to the editor and press the button, this is the console.log result, which shows no table node:

{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"asdf","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1,"textFormat":0,"textStyle":""}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}

Is there something I'm missing here?

[etrepum]

Yes, the table plugin needs to be registered in order for the INSERT_TABLE_COMMAND to do anything. https://lexical.dev/docs/api/modules/lexical_table#registertableplugin

[peppies]

Again, thanks for the help, I really appreciate it!