Skip to content

fix(toolbar): give each toolbar separator its own item - #3932

Merged
caio-pizzol merged 2 commits into
superdoc:mainfrom
PopaSerban:fix/toolbar-separator-duplicate-key
Aug 26, 2026
Merged

fix(toolbar): give each toolbar separator its own item#3932
caio-pizzol merged 2 commits into
superdoc:mainfrom
PopaSerban:fix/toolbar-separator-duplicate-key

Conversation

@PopaSerban

@PopaSerban PopaSerban commented Aug 25, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Fix a Vue "Duplicate keys found during update" warning on ButtonGroup by giving
    each separator in the built-in toolbar its own item, instead of reusing one
    shared item six times (packages/superdoc/src/internal/toolbar/built-in/default-items.js).
    UI layer only — no pipeline/document-data involvement.
Screenshot 2026-08-25 at 20 07 25

Context

ButtonGroup.vue keys its v-for on item.id.value. default-items.js created a
single separator toolbar item and spliced that same object into the toolbar list
six times; since separators default to the center group, all six ended up in one
ButtonGroup sharing one id, so Vue re-render passes for that group patched a
list with six duplicate keys.

The warning only surfaces on a re-render after the initial mount (Vue's duplicate-key
check runs in patchKeyedChildren, not on first mount), which is why it doesn't show
up right after page load — it needs a toolbar-state-change event (e.g. clicking
into the document, changing selection, typing) to trigger the re-render.

Fix: default-items.js now calls useToolbarItem(...) fresh for each separator
occurrence, giving each its own id.

File Change Risk
packages/superdoc/src/internal/toolbar/built-in/default-items.js shared separator item → makeSeparator() factory, called at each of its 6 use sites LOW — internal to the module, no exported signature change

@qodo-code-review

Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 1 file

Re-trigger cubic

@caio-pizzol
caio-pizzol self-requested a review August 25, 2026 19:22
@caio-pizzol caio-pizzol self-assigned this Aug 25, 2026
@caio-pizzol
caio-pizzol removed their request for review August 25, 2026 19:22
@qodo-code-review

qodo-code-review Bot commented Aug 25, 2026

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review
Tip of the day
💡 Did you know, you can hide the parts of a finding you never read, like the evidence or the agent prompt

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗


Previous reviews

Review updated until commit 6b8d876 ⚖️ Balanced

Results up to commit fb6e2e0 🚀 Fast


No changes from previous review


Powered by Qodo

@caio-pizzol caio-pizzol left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@PopaSerban, thanks for the PR—this was a precise diagnosis and a clean fix. I added a focused regression test to the branch; it fails with the previous shared-separator implementation and passes with your change. The full SuperDoc package suite also passes locally with 2,493 tests.

Approving—thanks again for the contribution!

PopaSerban and others added 2 commits August 25, 2026 23:28
`ButtonGroup.vue` keys its v-for on item.id.value. default-items.js
created a single `separator` item and reused that same object six
times in the toolbar list; since separators default to the "center"
group, all six landed in one ButtonGroup sharing one id, so a
re-render for that group patched a list with six duplicate keys
(Vue's "Duplicate keys found during update" warning).

Each separator occurrence now gets its own item via makeSeparator().
@caio-pizzol
caio-pizzol force-pushed the fix/toolbar-separator-duplicate-key branch from fb6e2e0 to 6b8d876 Compare August 25, 2026 23:34
@caio-pizzol

Copy link
Copy Markdown
Contributor

@cubic-dev-ai review this PR after the rebase.

@cubic-dev-ai

cubic-dev-ai Bot commented Aug 25, 2026

Copy link
Copy Markdown

@cubic-dev-ai review this PR after the rebase.

@caio-pizzol I have started the AI code review. It will take a few minutes to complete.

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 2 files

Re-trigger cubic

@caio-pizzol
caio-pizzol merged commit 119fe9a into superdoc:main Aug 26, 2026
31 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants