Skip to content

[lexical-playground] [lexical-list] add ability to change ordered list start number#7638

Merged
ivailop7 merged 12 commits intofacebook:mainfrom
achaljhawar:ordered-list-start-number
Jun 27, 2025
Merged

[lexical-playground] [lexical-list] add ability to change ordered list start number#7638
ivailop7 merged 12 commits intofacebook:mainfrom
achaljhawar:ordered-list-start-number

Conversation

@achaljhawar
Copy link
Copy Markdown
Contributor

Description

This PR introduces a feature allowing users to modify the starting number of an existing ordered list directly through the toolbar in the playground.

Closes #7621

Test plan

  • Create an ordered list.
  • Select an item in the ordered list.
  • You should see a new number input field appear in the toolbar, next to the block type dropdown, showing the current start number .
  • Change the number in that input field (e.g., to 9).
  • Verify that the list in the editor updates its numbering accordingly (e.g., starts from 9, 10, 11...).

Before

Currently, Lexical allows starting an ordered list with an arbitrary number only by creating a new list with that specific starting number. There is no UI mechanism to change the start number of an existing ordered list.

After

Lexical.Playground.1.mp4

@vercel
Copy link
Copy Markdown

vercel bot commented Jun 22, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
lexical ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 27, 2025 6:33pm
lexical-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 27, 2025 6:33pm

@facebook-github-bot facebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Jun 22, 2025
@achaljhawar achaljhawar changed the title feat: add ability to change ordered list start number [lexical-playground] [lexical-list] add ability to change ordered list start number Jun 22, 2025
UPDATE_LIST_START_COMMAND,
(payload) => {
const {listNodeKey, newStart} = payload;
$handleUpdateListStart(editor, listNodeKey, newStart);
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

It probably makes more sense to inline the implementation of $handleUpdateListStart here since it's short, not used anywhere else, and isn't particularly useful as a public API.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I have done the inline implementation now.

etrepum
etrepum previously approved these changes Jun 25, 2025
Copy link
Copy Markdown
Collaborator

@etrepum etrepum left a comment

Choose a reason for hiding this comment

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

Looks good! Will merge once the test suite has finished running successfully

@etrepum etrepum dismissed their stale review June 25, 2025 20:03

On further inspection we might want to rethink the UI for this a bit, since it causes internal scrolling of the toolbar even with a full width browser on a normal laptop screen.

@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Jun 25, 2025

I just had a closer look and perhaps we might want to reconsider this UI since it causes internal scrolling in the toolbar, even with a full width browser on a laptop screen. The code and implementation is otherwise clean, it's really just a UI concern.

numbered-list-toolbar.mov

@achaljhawar
Copy link
Copy Markdown
Contributor Author

achaljhawar commented Jun 25, 2025

I just had a closer look and perhaps we might want to reconsider this UI since it causes internal scrolling in the toolbar, even with a full width browser on a laptop screen. The code and implementation is otherwise clean, it's really just a UI concern.

numbered-list-toolbar.mov

yeah I initially tried to fix this problem by decreasing the size of buttons on the toolbar when a ordered list is clicked so that it could accommodate a new field, but the scroll was still persistent.

@achaljhawar
Copy link
Copy Markdown
Contributor Author

@etrepum Is this okay if I increase the size of the playground by 40px and center align the toolbar the scroll doesn't come

Lexical.Playground.3.mp4

should I commit this?

@etrepum
Copy link
Copy Markdown
Collaborator

etrepum commented Jun 26, 2025

@ivailop7 do you have any opinions on this UI?

@ivailop7
Copy link
Copy Markdown
Collaborator

@ivailop7 do you have any opinions on this UI?

Not a fan of the UI change. I'd keep only the changes to the plugin, but skip the toolbar one. If people want to make use of the new functionality, it should be documented how to use 'UPDATE_LIST_START_COMMAND' and skip the UI part altogether.

@achaljhawar
Copy link
Copy Markdown
Contributor Author

@etrepum Is this okay if I increase the size of the playground by 40px and center align the toolbar the scroll doesn't come

Lexical.Playground.3.mp4
should I commit this?

@ivailop7 what do you think about this?

@achaljhawar achaljhawar requested a review from etrepum June 27, 2025 13:45
@ivailop7
Copy link
Copy Markdown
Collaborator

@etrepum Is this okay if I increase the size of the playground by 40px and center align the toolbar the scroll doesn't come

Lexical.Playground.3.mp4

should I commit this?

@ivailop7 what do you think about this?

Let's just scope the changes in this PR to the command for now and skip the toolbar and UI changes for now altogether.

@achaljhawar
Copy link
Copy Markdown
Contributor Author

@ivailop7 I have removed all the ui changes as you asked

@ivailop7 ivailop7 added this pull request to the merge queue Jun 27, 2025
Merged via the queue into facebook:main with commit 4bdf614 Jun 27, 2025
39 checks passed
@lachieh
Copy link
Copy Markdown

lachieh commented Jun 27, 2025

@ivailop7 would you mind if I made another issue to surface the command in the UI? I am imagining something like the table feature where right-clicking on the list item/s brings up a menu with "change list numbering" which then opens a modal with the number input. If that seems out of scope, I'll leave it alone.

@achaljhawar achaljhawar deleted the ordered-list-start-number branch June 28, 2025 02:56
@etrepum etrepum mentioned this pull request Jul 3, 2025
fantactuka pushed a commit that referenced this pull request Aug 11, 2025
…t start number (#7638)

Co-authored-by: Bob Ippolito <bob@redivi.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. extended-tests Run extended e2e tests on a PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature: Add ability to reset/change ordered list numbering

5 participants