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