fix(table): improve property modal defaults

Author: cycleccc

packages/table-module/__tests__/menu/property-menu.test.ts

@@ -47,6 +47,16 @@ function changeInputValue(input: HTMLInputElement | HTMLSelectElement, value: st
   input.dispatchEvent(new Event('change', { bubbles: true }))
 }
 
+function selectBorderStyle(elem: HTMLElement, value: string) {
+  const trigger = elem.querySelector('.w-e-table-property-select-trigger') as HTMLButtonElement
+  const option = elem.querySelector(
+    `.w-e-table-property-select-option[data-value="${value}"]`
+  ) as HTMLButtonElement
+
+  trigger.click()
+  option.click()
+}
+
 function createContextSelection(editor, rows: number[][][]): NodeEntryWithContext[][] {
   return rows.map(row =>
     row.map(path => [
@@ -76,15 +86,12 @@ describe('table property menus', () => {
     setSelectionInsideFirstCell(editor)
 
     const elem = menu.getModalContentElem(editor) as HTMLDivElement
-    const borderStyle = elem.querySelector('[name="borderStyle"]') as HTMLSelectElement
+    const borderStyle = elem.querySelector('[name="borderStyle"]') as HTMLInputElement
     const borderWidth = elem.querySelector('[name="borderWidth"]') as HTMLInputElement
     const borderColorTrigger = elem.querySelector('[data-mark="color"]') as HTMLElement
     const backgroundColorTrigger = elem.querySelector('[data-mark="bgColor"]') as HTMLElement
-    const width = elem.querySelector('[name="width"]') as HTMLInputElement
-    const fullWidthButton = elem.querySelector(
-      '.w-e-table-property-segment-button[data-value="100%"]'
-    ) as HTMLButtonElement
     const textAlign = elem.querySelector('[name="textAlign"]') as HTMLInputElement | null
+    const width = elem.querySelector('[name="width"]') as HTMLInputElement | null
     const button = elem.querySelector('.button-container button') as HTMLButtonElement
 
     vi.spyOn(editor, 'getMenuConfig').mockImplementation((mark: string) => {
@@ -97,24 +104,23 @@ describe('table property menus', () => {
       return {} as any
     })
 
-    fullWidthButton.click()
-    changeInputValue(borderStyle, 'dashed')
+    selectBorderStyle(elem, 'dashed')
     changeInputValue(borderWidth, '2')
     borderColorTrigger.click()
     ;(borderColorTrigger.querySelector('li[data-value="#ff0000"]') as HTMLElement).click()
     backgroundColorTrigger.click()
     ;(backgroundColorTrigger.querySelector('li[data-value="#00ff00"]') as HTMLElement).click()
 
     expect(textAlign).toBeNull()
-    expect(width.value).toBe('100%')
-    expect(fullWidthButton.classList.contains('active')).toBe(true)
+    expect(width).toBeNull()
+    expect(borderStyle.value).toBe('dashed')
 
     button.click()
     vi.runAllTimers()
 
     const table = editor.children[0] as TableElement & Record<string, string>
 
-    expect(table.width).toBe('100%')
+    expect(table.width).toBe('auto')
     expect(table.borderStyle).toBe('dashed')
     expect(table.borderColor).toBe('#ff0000')
     expect(table.borderWidth).toBe('2')
@@ -123,6 +129,44 @@ describe('table property menus', () => {
     expect(focusSpy).toHaveBeenCalled()
   })
 
+  test('TableProperty shows default border style and makes selected border color visible', () => {
+    vi.useFakeTimers()
+    const editor = createEditor({ content: createTableContent() })
+    const menu = new TableProperty()
+
+    setSelectionInsideFirstCell(editor)
+    vi.spyOn(editor, 'getMenuConfig').mockImplementation((mark: string) => {
+      if (mark === 'color') {
+        return { colors: ['#ff0000'] } as any
+      }
+      return {} as any
+    })
+
+    const elem = menu.getModalContentElem(editor) as HTMLDivElement
+    const borderStyle = elem.querySelector('[name="borderStyle"]') as HTMLInputElement
+    const borderWidth = elem.querySelector('[name="borderWidth"]') as HTMLInputElement
+    const borderColorTrigger = elem.querySelector('[data-mark="color"]') as HTMLElement
+    const button = elem.querySelector('.button-container button') as HTMLButtonElement
+
+    expect(borderStyle.value).toBe('none')
+    expect(borderWidth.placeholder).toBe('默认 1')
+
+    borderColorTrigger.click()
+    ;(borderColorTrigger.querySelector('li[data-value="#ff0000"]') as HTMLElement).click()
+
+    expect(borderStyle.value).toBe('solid')
+    expect(borderWidth.value).toBe('1')
+
+    button.click()
+    vi.runAllTimers()
+
+    const table = editor.children[0] as TableElement & Record<string, string>
+
+    expect(table.borderColor).toBe('#ff0000')
+    expect(table.borderStyle).toBe('solid')
+    expect(table.borderWidth).toBe('1')
+  })
+
   test('CellProperty applies properties to every selected cell in the batch selection', () => {
     vi.useFakeTimers()
     const editor = createEditor({ content: createTableContent() })
@@ -145,7 +189,6 @@ describe('table property menus', () => {
     )
 
     const elem = menu.getModalContentElem(editor) as HTMLDivElement
-    const borderStyle = elem.querySelector('[name="borderStyle"]') as HTMLSelectElement
     const textAlign = elem.querySelector('[name="textAlign"]') as HTMLInputElement
     const rightAlignButton = elem.querySelector(
       '.w-e-table-property-align-button[data-value="right"]'
@@ -164,7 +207,7 @@ describe('table property menus', () => {
       return {} as any
     })
 
-    changeInputValue(borderStyle, 'solid')
+    selectBorderStyle(elem, 'solid')
     rightAlignButton.click()
     middleVerticalAlignButton.click()
     backgroundColorTrigger.click()
@@ -235,7 +278,7 @@ describe('table property menus', () => {
 
     const elem = menu.getModalContentElem(editor) as HTMLDivElement
     const backgroundColor = elem.querySelector('[name="backgroundColor"]') as HTMLInputElement
-    const borderStyle = elem.querySelector('[name="borderStyle"]') as HTMLSelectElement
+    const borderStyle = elem.querySelector('[name="borderStyle"]') as HTMLInputElement
     const rightAlignButton = elem.querySelector(
       '.w-e-table-property-align-button[data-value="right"]'
     ) as HTMLButtonElement
@@ -287,6 +330,8 @@ describe('table property menus', () => {
     colorOption.click()
 
     expect(borderColorInput.value).toBe('#00ff00')
+    expect((elem.querySelector('[name="borderStyle"]') as HTMLInputElement).value).toBe('solid')
+    expect((elem.querySelector('[name="borderWidth"]') as HTMLInputElement).value).toBe('1')
     expect(
       (borderColorTrigger.querySelector('.color-group-block') as HTMLElement).style.backgroundColor
     ).toContain('0, 255, 0')

packages/table-module/src/assets/index.less

@@ -186,24 +186,80 @@
       min-width: 0;
     }
 
-    span.babel-container-width,
     span.babel-container-select,
     span.babel-container-number {
       display: block;
     }
 
-    span.babel-container-width {
+    .w-e-table-property-select {
+      position: relative;
+      display: block;
       width: 100%;
     }
 
-    span.babel-container-select select {
+    .w-e-table-property-select-trigger {
+      position: relative;
       width: 100%;
       height: 32px;
-      padding: 4px 8px;
+      padding: 4px 24px 4px 8px;
       color: @toolbar-color;
       background-color: @toolbar-bg-color;
+      text-align: left;
       border: 1px solid @modal-button-border-color;
       border-radius: 4px;
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        right: 8px;
+        width: 0;
+        height: 0;
+        border-top: 4px solid @toolbar-disabled-color;
+        border-right: 4px solid transparent;
+        border-left: 4px solid transparent;
+        content: '';
+        transform: translateY(-50%);
+      }
+    }
+
+    .w-e-table-property-select-value {
+      display: block;
+      overflow: hidden;
+      line-height: 20px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .w-e-table-property-select-panel {
+      position: absolute;
+      z-index: 1;
+      top: 34px;
+      left: 0;
+      display: none;
+      width: 100%;
+      max-height: 184px;
+      overflow-y: auto;
+      padding: 4px;
+      border: 1px solid @modal-button-border-color;
+      border-radius: 4px;
+      background-color: @toolbar-bg-color;
+      box-shadow: 0 2px 8px #0000001f;
+    }
+
+    .w-e-table-property-select-option {
+      display: block;
+      width: 100%;
+      height: 28px;
+      padding: 4px 8px;
+      text-align: left;
+      border: 0;
+      border-radius: 3px;
+      background-color: transparent;
+
+      &:hover,
+      &.active {
+        background-color: @toolbar-active-bg-color;
+      }
     }
 
     .w-e-table-property-number {
@@ -243,10 +299,6 @@
       display: flex;
     }
 
-    span.babel-container-vertical-align {
-      display: flex;
-    }
-
     .w-e-table-property-align,
     .w-e-table-property-segment {
       display: inline-flex;

packages/table-module/src/locale/en.ts

@@ -10,6 +10,7 @@ export default {
       borderColor: 'Border color',
       borderStyle: 'Border style',
       borderWidth: 'Border width',
+      borderWidthDefault: 'Default 1',
       bgColor: 'Back color',
       align: 'Text Align',
       verticalAlign: 'Vertical Align',

packages/table-module/src/locale/zh-CN.ts

@@ -10,6 +10,7 @@ export default {
       borderColor: '边框颜色',
       borderStyle: '边框样式',
       borderWidth: '边框粗细',
+      borderWidthDefault: '默认 1',
       bgColor: '背景色',
       align: '对齐方式',
       verticalAlign: '垂直对齐',