feat: Table Menu for add row/column, delete, merge, cell color etc.

packages/svelte-lexical/src/lib/components/generic/colorpicker/ColorPickerDialog.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import {getCommands} from '$lib/core/commands.js';
+  import {getEditor} from '$lib/core/composerContext.js';
+  import CloseCircleButton from '../../generic/button/CloseCircleButton.svelte';
+  import ModalDialog from '../../generic/dialog/ModalDialog.svelte';
+  import ColorPicker from './ColorPicker.svelte';
+
+  export let color: string;
+  export let title: string;
+  let onChange:
+    | ((value: string, skipHistoryStack: boolean) => void)
+    | undefined;
+
+  const editor = getEditor();
+
+  export let showModal = false;
+  export function open(onChangeCallback: (value: string) => void) {
+    onChange = onChangeCallback;
+    showModal = true;
+  }
+
+  function close() {
+    showModal = false;
+    getCommands().FocusEditor.execute(editor);
+  }
+
+  function onColorChange(value: string) {
+    if (onChange) {
+      onChange(value, true);
+    }
+    close();
+  }
+</script>
+
+<ModalDialog bind:showModal>
+  <CloseCircleButton on:click={close} />
+
+  <div class="modal">
+    <h2 class="Modal__title">{title}</h2>
+    <div class="Modal__content">
+      <ColorPicker {color} onChange={onColorChange} />
+    </div>
+  </div>
+</ModalDialog>

packages/svelte-lexical/src/lib/components/generic/portal/Portal.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import {onMount, onDestroy} from 'svelte';
+
+  // eslint-disable-next-line no-undef
+  export let target: HTMLElement | null | undefined = globalThis.document?.body;
+
+  let ref: HTMLElement;
+
+  onMount(() => {
+    if (target) {
+      target.appendChild(ref);
+    }
+  });
+
+  onDestroy(() => {
+    if (ref?.parentNode) {
+      ref.parentNode?.removeChild(ref);
+    }
+  });
+</script>
+
+<div bind:this={ref}>
+  <slot />
+</div>