diff --git a/demos/playground/src/RichTextComposer.svelte b/demos/playground/src/RichTextComposer.svelte
index b327320..4709ccb 100644
--- a/demos/playground/src/RichTextComposer.svelte
+++ b/demos/playground/src/RichTextComposer.svelte
@@ -43,6 +43,12 @@
ColumnLayoutPlugin,
LayoutContainerNode,
LayoutItemNode,
+ TableNode,
+ TableCellNode,
+ TableRowNode,
+ TablePlugin,
+ TableHoverActionPlugin,
+ TableActionMenuPlugin,
} from 'svelte-lexical';
import {prepopulatedRichText} from './prepopulatedRichText';
import type {SettingsStore} from './settings/setttingsStore';
@@ -68,8 +74,7 @@
let isSmallWidthViewport = $state(true);
- // svelte-ignore non_reactive_update
- let editorDiv: HTMLDivElement | undefined;
+ let editorDiv: HTMLDivElement | undefined = $state();
const initialConfig = {
editorState: $settings.isCollab
@@ -93,6 +98,9 @@
CodeHighlightNode,
LayoutContainerNode,
LayoutItemNode,
+ TableNode,
+ TableCellNode,
+ TableRowNode,
],
onError: (error: Error) => {
throw error;
@@ -140,7 +148,6 @@
{#if $settings.isRichText}
-
{#if $settings.isCollab}
+
+
+
+
{#if !isSmallWidthViewport}
diff --git a/demos/playground/src/ToolbarPlayground.svelte b/demos/playground/src/ToolbarPlayground.svelte
index 51b4043..19ebf7c 100644
--- a/demos/playground/src/ToolbarPlayground.svelte
+++ b/demos/playground/src/ToolbarPlayground.svelte
@@ -34,11 +34,14 @@
DropDownBackColorPicker,
InsertColumnLayoutDropDownItem,
InsertColumnsDialog,
+ InsertTableDialog,
+ InsertTableDropDownItem,
} from 'svelte-lexical';
import InsertImageDialog from './InsertImageDialog.svelte';
let imageDialog: InsertImageDialog;
let columnsDialog: InsertColumnsDialog;
+ let tableDialog: InsertTableDialog;
@@ -87,6 +90,7 @@
imageDialog.open()} />
columnsDialog.open()} />
+ tableDialog.open()} />
{/if}
@@ -95,5 +99,6 @@
+
{/snippet}
diff --git a/packages/svelte-lexical/src/lib/index.ts b/packages/svelte-lexical/src/lib/index.ts
index 176da80..49fc56f 100644
--- a/packages/svelte-lexical/src/lib/index.ts
+++ b/packages/svelte-lexical/src/lib/index.ts
@@ -22,6 +22,9 @@ export {default as FloatingLinkEditorPlugin} from './core/plugins/link/FloatingL
export {default as CodeHighlightPlugin} from './core/plugins/CodeBlock/CodeHighlightPlugin.svelte';
export {default as CodeActionMenuPlugin} from './core/plugins/CodeBlock/CodeActionMenuPlugin/CodeActionMenuPlugin.svelte';
export {default as ColumnLayoutPlugin} from './core/plugins/ColumnsLayout/ColumnLayoutPlugin.svelte';
+export {default as TablePlugin} from './core/plugins/Table/TablePlugin.svelte';
+export {default as TableActionMenuPlugin} from './core/plugins/Table/TableActionMenuPlugin.svelte';
+export {default as TableHoverActionPlugin} from './core/plugins/Table/TableHoverActionPlugin.svelte';
export {default as MarkdownShortcutPlugin} from './core/plugins/MardownShortcut/MarkdownShortcutPlugin.svelte';
export {
@@ -61,6 +64,7 @@ export {CodeNode, CodeHighlightNode} from '@lexical/code';
export type {Provider} from '@lexical/yjs';
export {LayoutContainerNode} from './core/plugins/ColumnsLayout/LayoutContainerNode.js';
export {LayoutItemNode} from './core/plugins/ColumnsLayout/LayoutItemNode.js';
+export {TableNode, TableRowNode, TableCellNode} from '@lexical/table';
// toolbar
export {default as ToolbarRichText} from './components/richtext/ToolbarRichText.svelte';
@@ -99,6 +103,7 @@ export {default as SubscriptDropDownItem} from './components/toolbar/MoreStylesD
export {default as SuperscriptDropDownItem} from './components/toolbar/MoreStylesDropDown/SuperscriptDropDownItem.svelte';
export {default as ClearFormattingDropDownItem} from './components/toolbar/MoreStylesDropDown/ClearFormattingDropDownItem.svelte';
export {default as InsertColumnLayoutDropDownItem} from './components/toolbar/InsertDropDown/InsertColumnLayoutDropDownItem.svelte';
+export {default as InsertTableDropDownItem} from './components/toolbar/InsertDropDown/InsertTableDropDownItem.svelte';
// dialogs
export {default as InsertImageDialog} from './components/toolbar/dialogs/InsertImageDialog.svelte';
export {default as InsertImageUploadedDialogBody} from './components/toolbar/dialogs/InsertImageUploadedDialogBody.svelte';