facebook / lexical

Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance.
https://lexical.dev
MIT License
19.78k stars 1.68k forks source link

Feature: Paragraph numbers on the left side #6702

Closed ebengtso closed 1 month ago

ebengtso commented 1 month ago

Description

Display paragraph numbers on the left side of the page. It should be automatically numbered starting from 1. Only nodes "paragraphs" should be considered as paragraphs. Headings are nodes to be excluded, or other specific nodes.

paragraphs should be indexed. In this way, they can be linked.

Impact

Professional text editors will make use of this functionality. Scholars also need such functionality.

etrepum commented 1 month ago

I think you could implement this with css counters, not even sure you'd need to do anything but specify the appropriate classes in your theme to do this.

ebengtso commented 1 month ago

This approach is quite good, but not perfect . It cannot be sure that in all circumstances the paragraphs will be aligned to the left, thus the numbering will not always be aligned

`p.editor-paragraph::before { content: counter(item) " "; / margin-left: -30px; / / direction: rtl; / position: absolute; font-weight: bold; / margin-right: 10px; / / align-content: end; / text-align: right; / margin-right: 20px; / / display: block; / min-width: 35px; font-size: smaller; transform: translateX(-40px); }

.editor-paragraph { counter-increment: item; }`

For permanent link, I can create a scroll function, and scroll to the indexed paragraph. Like this: function scrollTo(number) { // Get all elements with the class 'my-element' const elements = document.querySelectorAll('.editor-paragraph'); var counter = 0; if(elements.length>=number) elements[number].scrollIntoView({ behavior: 'smooth', block: 'center' }); }

Here a screenshot of this solution:

image

ebengtso commented 1 month ago

I think we can close the issue for now, due to the workaround