fix(table): improve property modal ui

[cycleccc]

Summary

• Refine the table/cell property modal layout for border, background, and alignment controls.
• Replace the text alignment select with icon segmented buttons while keeping the existing textAlign data field.
• Add tests for the new alignment button interaction and active state.
• Add a patch changeset for @wangeditor-next/table-module.

Verification

• pnpm --filter @wangeditor-next/table-module test
• pnpm --filter @wangeditor-next/table-module build
• pnpm eslint --quiet --no-error-on-unmatched-pattern packages/table-module/src/module/menu/TableProperty.ts packages/table-module/src/module/menu/CellProperty.ts packages/table-module/__tests__/menu/property-menu.test.ts
• git diff --check
• pnpm build

Summary by CodeRabbit

Release Notes

• New Features

  • Added border color option to table property modals.

• Improvements

  • Expanded table and cell property modal widths for better control visibility.
  • Enhanced modal styling with refined spacing, borders, and color token consistency.
  • Improved table alignment controls with clearer button states and accessibility support.

[changeset-bot]

🦋 Changeset detected

Latest commit: 5b851cc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@wangeditor-next/table-module	Patch
@wangeditor-next/editor	Patch
@wangeditor-next/demo-react	Patch
@wangeditor-next/demo-vue3	Patch
@wangeditor-next/demo-yjs-react	Patch
@wangeditor-next/demo-yjs-vue3	Patch
@wangeditor-next/plugin-attachment	Patch
@wangeditor-next/plugin-ctrl-enter	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

Table property and cell property modals are resized from 300px to 360px width. Modal DOM is restructured to render text-align options as button controls. Border color i18n labels added. Modal styling updated with refined control layouts and spacing. Tests align interactions and assertions with the new button-driven UI.

Changes

Table Property Modal Refactor

Layer / File(s)	Summary
Modal width and localization updates packages/table-module/src/module/menu/CellProperty.ts, packages/table-module/src/module/menu/TableProperty.ts, packages/table-module/src/locale/en.ts, packages/table-module/src/locale/zh-CN.ts	Modal width constant increased from 300 to 360 in both CellProperty and TableProperty; borderColor i18n key added to en and zh-CN locales; import statement formatting adjusted.
TableProperty modal template and text-align button logic packages/table-module/src/module/menu/TableProperty.ts	Modal template DOM restructured with renamed control classes and text-align rendered as clickable buttons instead of select input; text-align button state updater syncs aria-pressed and active classes with hidden textAlign input value on user interaction; button selector refined to .button-container button; click event target safety check added in color panel handler; clearText assignment for color/bgColor marks refactored into explicit conditional branches.
Modal styling refactoring packages/table-module/src/assets/index.less	Modal stylesheet completely restructured: replaced .babel-container with .w-e-table-property-modal class and redefined control layout, borders, button group styling, input sizing, and color picker drop panel dimensions; single margin value adjusted from 1px 0px to 2px 1px.
Test suite updates for new UI interactions packages/table-module/__tests__/menu/property-menu.test.ts	Test helper createContextSelection expanded to pair Slate entries with explicit direction-context objects; TableProperty and CellProperty test cases updated to interact with alignment buttons and assert button active class and aria-pressed attributes alongside hidden input values; color picker mock reformatted with explicit conditional branches; border color panel assertion reformatted; new test added to verify text-align button active state reflects current table content alignment.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• wangeditor-next/wangEditor-next#127: Addresses table property alignment styles in the same packages/table-module/src/assets/index.less file with related modal control styling updates.

Poem

🐰 The modals grow wider, controls take new form,
Buttons aligned, where selects once swarm,
ARIA whispers keep state in the dance,
Tests hop along to validate the chance!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly and concisely describes the main change: improving the table property modal UI, which aligns with the changeset summary and file modifications throughout the PR.
Description check	✅ Passed	The PR description covers the main changes and provides comprehensive verification steps, but lacks details in some template sections like implementation approach and explicit test coverage explanation.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/table/property-modal-ui

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

.changeset/polite-tables-dress.md (1)

5-5: 💤 Low value

Consider adding more detail to the changeset description.

The description is valid but could be more informative for users reviewing the changelog. Consider mentioning key changes such as the replacement of select controls with icon buttons for text alignment and the addition of border color localization.

Example:

-Improve table and cell property modal controls.
+Improve table and cell property modal controls.
+
+- Replace text-alignment select with icon-based segmented buttons
+- Add border color i18n entries
+- Increase modal width from 300px to 360px

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.changeset/polite-tables-dress.md at line 5, Update the changeset
description for "polite-tables-dress" to be more informative: explicitly mention
that text-alignment select controls were replaced with icon-button controls,
note the addition of border-color localization support, and briefly list any
user-visible behavior or UI changes (e.g., where the new icon buttons appear and
how localization affects border color options) so the changelog entry clearly
communicates the key improvements.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/table-module/src/assets/index.less`:
- Line 270: The CSS keyword casing violates Stylelint: locate the declaration
"fill: currentColor;" (in assets/index.less) and change the keyword to lowercase
("fill: currentcolor;") so it satisfies the keyword-case rule; ensure you only
modify the keyword casing for the "fill" declaration.

---

Nitpick comments:
In @.changeset/polite-tables-dress.md:
- Line 5: Update the changeset description for "polite-tables-dress" to be more
informative: explicitly mention that text-alignment select controls were
replaced with icon-button controls, note the addition of border-color
localization support, and briefly list any user-visible behavior or UI changes
(e.g., where the new icon buttons appear and how localization affects border
color options) so the changelog entry clearly communicates the key improvements.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 808f8635-b354-4a88-8925-a0500e2b18c9

📥 Commits

Reviewing files that changed from the base of the PR and between 87d786d and 5b851cc.

📒 Files selected for processing (7)

• .changeset/polite-tables-dress.md
• packages/table-module/__tests__/menu/property-menu.test.ts
• packages/table-module/src/assets/index.less
• packages/table-module/src/locale/en.ts
• packages/table-module/src/locale/zh-CN.ts
• packages/table-module/src/module/menu/CellProperty.ts
• packages/table-module/src/module/menu/TableProperty.ts

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fix currentColor keyword casing to satisfy Stylelint.

fill: currentColor; at Line 270 violates the configured keyword-case rule and can fail linting.

Proposed fix

-        fill: currentColor;
+        fill: currentcolor;

As per coding guidelines, style/lint violations should be fixed in changed segments.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	fill: currentColor;
	fill: currentcolor;

🧰 Tools

🪛 Stylelint (17.12.0)

[error] 270-270: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/table-module/src/assets/index.less` at line 270, The CSS keyword
casing violates Stylelint: locate the declaration "fill: currentColor;" (in
assets/index.less) and change the keyword to lowercase ("fill: currentcolor;")
so it satisfies the keyword-case rule; ensure you only modify the keyword casing
for the "fill" declaration.

Sources: Coding guidelines, Linters/SAST tools