feat: auto calculate table size (#48)

src/BlockHub/TableBlock/Table.vue

@@ -3,7 +3,8 @@ import { type TableBlock } from './TableBlock'
 import RichText from '@RichText/RichText.vue'
 import { type ArrayStore } from '@Kernel/Store/ArrayStore'
 import type { TextStore } from '@Kernel/Store/TextStore'
-import { shallowRef } from 'vue'
+import { ref, shallowRef, onMounted, onUnmounted } from 'vue'
+import { CELL_WIDTH, CELL_HEIGHT } from './const'
 
 const { block } = defineProps<{
   block: TableBlock
@@ -17,19 +18,40 @@ for (const row of block.data) {
   }
   tableData.value.push(rowData as Array<TextStore>)
 }
+
+const tableRef = ref<HTMLElement | null>(null)
+const resizeObserver = new ResizeObserver((entries) => {
+  const height = entries[0].borderBoxSize[0].blockSize
+  block.height = height
+})
+onMounted(() => {
+  resizeObserver.observe(tableRef.value as HTMLElement)
+})
+onUnmounted(() => {
+  resizeObserver.unobserve(tableRef.value as HTMLElement)
+})
 </script>
 
 <template>
   <div
+    ref="tableRef"
     class="table absolute border border-dashed border-secondary-border"
     :style="{
       left: `${block.x}px`,
       top: `${block.y}px`,
       padding: '30px',
     }"
   >
-    <div class="row" v-for="(row, rowIndex) of tableData">
-      <div class="cell inline-block border w-[100px]" v-for="(cell, columnIndex) of row">
+    <div
+      class="row flex"
+      v-for="(row, rowIndex) of tableData"
+      :style="{ width: `${CELL_WIDTH * row.length}`, minHeight: `${CELL_HEIGHT}px` }"
+    >
+      <div
+        class="cell inline-block border align-top"
+        :style="{ width: `${CELL_WIDTH}px` }"
+        v-for="(cell, columnIndex) of row"
+      >
         <RichText
           @click="block.updateCurrentCoord(rowIndex, columnIndex)"
           :textStore="(cell as TextStore)"

src/BlockHub/TableBlock/TableBlock.ts

@@ -2,6 +2,7 @@ import { TextStore } from '@Kernel/Store/TextStore'
 import { Block } from '../Block/Block'
 import { type RichTextController } from '@RichText/RichText'
 import { ArrayStore } from '@Kernel/Store/ArrayStore'
+import { CELL_HEIGHT, CELL_WIDTH } from './const'
 
 export class TableBlock extends Block {
   private _row: number
@@ -10,7 +11,7 @@ export class TableBlock extends Block {
   private _currentCoord = { row: 0, column: 0 }
 
   constructor(x: number, y: number, row: number, column: number) {
-    super('Table', x, y, 500, 300)
+    super('Table', x, y, CELL_WIDTH * column, CELL_HEIGHT * row)
     this._row = row
     this._column = column
     this._data = this._initData()

src/BlockHub/TableBlock/const.ts

@@ -0,0 +1,2 @@
+export const CELL_WIDTH = 112
+export const CELL_HEIGHT = 36

src/RichText/handler/EventHandler.ts

@@ -13,8 +13,9 @@ export class EventHandler {
   }
 
   onSelectionChange() {
-    const range = document.getSelection()?.getRangeAt(0) as Range
+    const range = window.getSelection()?.getRangeAt(0) as Range
     this._isCurrentElement = range.intersectsNode(this.richText.element as HTMLElement)
+    this.richText.focus = this._isCurrentElement
     if (!this._isCurrentElement) {
       return
     }
@@ -65,11 +66,6 @@ export class EventHandler {
 
   mount() {
     const element = this.richText.element as HTMLElement
-    element.addEventListener('focus', () => (this.richText.focus = true))
-    element.addEventListener('blur', async () => {
-      await sleep(100)
-      this.richText.focus = false
-    })
     element.addEventListener('beforeinput', this.onBeforeInput.bind(this))
     element.addEventListener('compositionstart', this.onCompositionStart.bind(this))
     element.addEventListener('compositionend', this.onCompositionEnd.bind(this))

src/RichText/handler/SelectionHandler.ts

@@ -79,7 +79,7 @@ export class SelectionHandler {
   }
 
   setSelectionByNative() {
-    const range = document.getSelection()?.getRangeAt(0) as Range
+    const range = window.getSelection()?.getRangeAt(0) as Range
     const { startContainer, startOffset, endContainer, endOffset } = range
     const richTextElement = this.richText.element as HTMLElement
     const rowElements = richTextElement.querySelectorAll('.row')