cycleccc / wangEditor-next

wangEditor-next —— Open-source web rich text editor, based on slate.js. wangEditor-next —— 开源 Web 富文本编辑器,基于 slate.js。
https://cycleccc.github.io/docs/
MIT License
74 stars 14 forks source link

功能: Table 支持 Cell 合并 #31

Closed jschyz closed 1 month ago

jschyz commented 1 month ago

实现参考 https://github.com/nlulic/slate-table 飞书表格

WangEditor 支持 Table Cell 合并 [预览]

基础能力

  1. 拖动选择单元格,隐藏默认选区行为
  2. 合并 / 拆分 单元格

列拖拽

  1. 表头出现单元格合并,每列可单独拖动设置宽度
  2. 合并单元格内聚焦时,不会出现拖拽引导线

行列新增 / 删除

  1. 支持单元格区间内 新增 / 删除行列功能

宽度自适应

  1. 当Table宽度100%时,拖动单元格能力禁用。
(无法判断单元格哪个该新增宽度,哪个该减小宽度)

图片自适应

  1. 图片最大适应单元格 100% 宽度,不会存在撑大行为
  2. 修改图片自身尺寸最大限制 🚫

Summary by CodeRabbit

coderabbitai[bot] commented 1 month ago

Walkthrough

The recent changes to the table-module package involve enhancements and refactoring aimed at improving table manipulation functionality. Key updates include handling table column deletion and insertion, adding new features for merging and splitting cells, and introducing column width configurations. These changes enhance table editing capabilities, improve performance, and refine rendering logic.

Changes

File(s) Change Summary
DeleteCol.ts, InsertCol.ts Refactored logic for deleting and inserting columns, including handling cells, column spans, widths, and table structures.
InsertTable.ts Introduced a columnWidths array within the TableElement object for specifying column widths.
MergeCell.ts, SplitCell.ts Added functionality for merging and splitting table cells, along with related configurations.
plugin.ts Added an import for withSelection and integrated a call to withSelection within withTable for improved selection handling.
render-cell.tsx Refactored table cell rendering logic, including removal of column width resizing and adjustments based on cell properties.
render-table.tsx Enhanced table rendering, managing cell borders, column resizing, and event listeners for table interactions.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant TableEditor
    participant DeleteCol
    participant InsertCol
    participant MergeCell
    participant SplitCell
    participant RenderTable
    participant Plugin

    User->>TableEditor: Delete Column
    TableEditor->>DeleteCol: Execute delete column logic
    DeleteCol-->>TableEditor: Updated table structure

    User->>TableEditor: Insert Column
    TableEditor->>InsertCol: Execute insert column logic
    InsertCol-->>TableEditor: Updated table structure

    User->>TableEditor: Merge Cells
    TableEditor->>MergeCell: Execute merge cell logic
    MergeCell-->>TableEditor: Merged cells

    User->>TableEditor: Split Cells
    TableEditor->>SplitCell: Execute split cell logic
    SplitCell-->>TableEditor: Split cells

    TableEditor->>RenderTable: Render updated table
    RenderTable-->>User: Display updated table

Poem

In the land of code where tables dwell,
Columns shift and cells now tell,
Of merges and splits, widths anew,
A dance of data, sleek and true.
With each new change, we celebrate,
A table's tale, forever great.
🐇✨


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit testing code for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit testing code for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit testing code.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` - `@coderabbitai help me debug CodeRabbit configuration file.` Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai full review` to do a full review from scratch and review all the files again. - `@coderabbitai summary` to regenerate the summary of the PR. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information. - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json` ### Documentation and Community - Visit our [Documentation](https://coderabbit.ai/docs) for detailed information on how to use CodeRabbit. - Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback. - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.
jschyz commented 1 month ago

本地测试截图

cycleccc commented 1 month ago

收到,今晚 review。

cycleccc commented 1 month ago

需要跑一下 yarn lint --fix

cycleccc commented 1 month ago

我这边check到你的分支改了部分 test 文件,因为 lint 校验没过,提不上去,没法合到你的分支里,这太扯了😂

jschyz commented 1 month ago

我这边check到你的分支改了部分 test 文件,因为 lint 校验没过,提不上去,没法合到你的分支里,这太扯了😂

确实没有 lint; table 单测完看看。

jschyz commented 1 month ago

求助,这个 test FAIL 莫名其妙

image
cycleccc commented 1 month ago

哈哈哈,我就是这个有点困惑才让你看下的,我今天有事应该看不了这个了,明天看看能不能解决,不能解决的话就小步快跑了。说不定看半天是jest的毛病呢,我有打算换 vtest 的,现在单测有点多,vtest 似乎更快一些。

cycleccc commented 1 month ago

image 看报错信息 似乎是 tableEntry 可能不存在 解构 null 报错了。 image

jschyz commented 1 month ago

我在给 jest打断点,找到问题了,我改改

jschyz commented 1 month ago
image
cycleccc commented 1 month ago

已经发布了新版本,Cypress 的 action checkout,出问题了,我晚上回去看一下。

jschyz commented 1 month ago

嗯嗯,什么问题

cycleccc commented 1 month ago

看了一下,似乎是 e2e 测试的 docker 容器版本过时了,换了最新版和node版本,现在没问题了。

cycleccc commented 1 month ago

@jschyz 方便加个微信不?ylf2991205548 我今天测试,发现飞书的表格在加入合并功能后复制进来渲染出了问题,这个你方便看一下嘛。 我正在搞文档,另一个飞书文档渲染 blockquote 出错的问题也得看看,这个我可以晚点看下。