build: playground - add tables plugin

umaranis · Dec 28, 2024 · f85daba · f85daba
1 parent 2db9298
commit f85daba
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git 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}
         <RichTextPlugin />
 
-        <MarkdownShortcutPlugin transformers={ALL_TRANSFORMERS} />
         {#if $settings.isCollab}
           <CollaborationPlugin
             id="main"
@@ -162,6 +169,10 @@
         </ImagePlugin>
         <LinkPlugin {validateUrl} />
         <CodeHighlightPlugin />
+        <MarkdownShortcutPlugin transformers={ALL_TRANSFORMERS} />
+        <TablePlugin />
+        <TableHoverActionPlugin anchorElem={editorDiv} />
+        <TableActionMenuPlugin anchorElem={editorDiv} cellMerge={true} />
         {#if !isSmallWidthViewport}
           <FloatingLinkEditorPlugin anchorElem={editorDiv} />
           <CodeActionMenuPlugin anchorElem={editorDiv} />

diff --git 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;
 </script>
 
 <Toolbar>
@@ -87,6 +90,7 @@
           <InsertImageDropDownItem onclick={() => imageDialog.open()} />
           <InsertColumnLayoutDropDownItem
             onclick={() => columnsDialog.open()} />
+          <InsertTableDropDownItem onclick={() => tableDialog.open()} />
         </InsertDropDown>
         <Divider />
       {/if}
@@ -95,5 +99,6 @@
     <!-- dialogs -->
     <InsertImageDialog bind:this={imageDialog} />
     <InsertColumnsDialog bind:this={columnsDialog} />
+    <InsertTableDialog bind:this={tableDialog} />
   {/snippet}
 </Toolbar>
diff --git 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';