From e50acac40b60998fc17883b355f7a2d0692f8b27 Mon Sep 17 00:00:00 2001
From: umaranis <mail@umaranis.com>
Date: Wed, 13 Nov 2024 21:18:13 +1100
Subject: [PATCH] feat: enhance InsertTableDialog with close button and
 improved layout

---
 .../toolbar/dialogs/InsertTableDialog.svelte  | 50 ++++++++++++-------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/packages/svelte-lexical/src/lib/components/toolbar/dialogs/InsertTableDialog.svelte b/packages/svelte-lexical/src/lib/components/toolbar/dialogs/InsertTableDialog.svelte
index ee6810d..4f20f10 100644
--- a/packages/svelte-lexical/src/lib/components/toolbar/dialogs/InsertTableDialog.svelte
+++ b/packages/svelte-lexical/src/lib/components/toolbar/dialogs/InsertTableDialog.svelte
@@ -4,7 +4,9 @@
   import ModalDialog from '../../generic/dialog/ModalDialog.svelte';
   import {getCommands} from '$lib/core/commands.js';
   import NumberInput from '$lib/components/generic/input/NumberInput.svelte';
+  import CloseCircleButton from '$lib/components/generic/button/CloseCircleButton.svelte';
   import {tick} from 'svelte';
+
   let rows = '5';
   let columns = '5';
   let isDisabled = true;
@@ -43,23 +45,35 @@
 </script>
 
 <ModalDialog bind:showModal>
-  <NumberInput
-    placeholder={'# of rows (1-500)'}
-    label="Rows"
-    value={rows}
-    dataTestId="table-modal-rows" />
-  <NumberInput
-    placeholder={'# of columns (1-50)'}
-    label="Columns"
-    value={columns}
-    dataTestId="table-modal-columns" />
-  <div class="DialogActions" data-test-id="table-model-confirm-insert">
-    <button
-      disabled={isDisabled}
-      class="Button__root"
-      class:Button__disabled={isDisabled}
-      on:click={onClick}>
-      Confirm
-    </button>
+  <CloseCircleButton on:click={close} />
+  <div class="modal">
+    <h2 class="Modal__title">Insert Table</h2>
+    <div class="Modal__content">
+      <NumberInput
+        placeholder={'# of rows (1-500)'}
+        label="Rows"
+        value={rows}
+        dataTestId="table-modal-rows" />
+      <NumberInput
+        placeholder={'# of columns (1-50)'}
+        label="Columns"
+        value={columns}
+        dataTestId="table-modal-columns" />
+      <div class="DialogActions" data-test-id="table-model-confirm-insert">
+        <button
+          disabled={isDisabled}
+          class="Button__root"
+          class:Button__disabled={isDisabled}
+          on:click={onClick}>
+          Confirm
+        </button>
+      </div>
+    </div>
   </div>
 </ModalDialog>
+
+<style>
+  .modal {
+    width: 20em;
+  }
+</style>