Closed `<details>` elements break scroll sync in the markdown editor

personalizedrefrigerator commented 8 months ago

Operating system

Linux

Joplin version

2.14.13

Desktop version info

Joplin 2.14.13 (dev, linux)

Client ID: d8b09c022f7e47aab5531063457d116c Sync Version: 3 Profile Version: 45 Keychain Supported: No

Revision: bfef14868 (pr/fix-item-search-on-old-android-2)

Simple Backup: 1.3.5

Current behaviour

Create a long note with a long <details> block in the middle
Example

# Welcome to Joplin!

Joplin is a free, open source note taking and to-do application, which helps you write and organise your notes, and synchronise them between your devices. The notes are searchable, can be copied, tagged and modified either from the application directly or from your own text editor. The notes are in [Markdown format](https://joplinapp.org/help/apps/markdown). Joplin is available as a **desktop**, **mobile** and **terminal** application.

The notes in this notebook give an overview of what Joplin can do and how to use it. In general, the three applications share roughly the same functionalities; any differences will be clearly indicated.

![](:/f11a30e08821477f8171f6c174a8af12)

<details>

## Joplin is divided into three parts

Joplin has three main columns:

- **Sidebar** contains the list of your notebooks and tags, as well as the synchronisation status.

- **Note List** contains the current list of notes - either the notes in the currently selected notebook, the notes in the currently selected tag, or search results.

- **Note Editor** is the place where you write your notes. There is a **Rich Text editor** and a **Markdown editor** - click on the **Toggle editor** button in the top right hand corner to switch between both! You may also use an [external editor](https://joplinapp.org/help/apps/external_text_editor) to edit notes. For example you can use Typora as an external editor and it will display the note as well as any embedded images.

## Writing notes in Markdown

Markdown is a lightweight markup language with plain text formatting syntax. Joplin supports a [Github-flavoured Markdown syntax](https://joplinapp.org/help/apps/markdown) with a few variations and additions.

In general, while Markdown is a markup language, it is meant to be human readable, even without being rendered. This is a simple example (you can see how it looks in the viewer panel):

* * *

# Heading

## Sub-heading

Paragraphs are separated by a blank line. Text attributes _italic_, **bold** and `monospace` are supported. You can create bullet lists:

* apples
* oranges
* pears

Or numbered lists:

1. wash
2. rinse
3. repeat

</details>

This is a [link](https://joplinapp.org) and, finally, below is a horizontal rule:

* * *

A lot more is possible including adding code samples, math formulae or checkbox lists - see the [Markdown documentation](https://joplinapp.org/help/apps/markdown) for more information.

## Organising your notes

### With notebooks

Joplin notes are organised into a tree of notebooks and sub-notebooks.

- On **desktop**, you can create a notebook by clicking on New Notebook, then you can drag and drop them into other notebooks to organise them as you wish.
- On **mobile**, press the "+" icon and select "New notebook".
- On **terminal**, press `:mn`

![](:/bd89811d90394999a4bc9d34a35868b7)

### With tags

The second way to organise your notes is using tags:

- On **desktop**, right-click on any note in the Note List, and select "Edit tags". You can then add the tags, separating them by commas.
- On **mobile**, open the note and press the "⋮" button and select "Tags".
- On **terminal**, type `:help tag` for the available commands.

Scroll to the end of the note
Scroll up

Currently, any scrolling after the end of the <details> block is incorrectly synced. This happens in both the CM6 and CM5 editors.

https://github.com/laurent22/joplin/assets/46334387/c1ac979c-a58f-49e4-8e6c-d7a925db8072

Expected behaviour

Scroll should be synced between the markdown editor and viewer.

Logs

No response

taw00 commented 7 months ago

This is an ongoing issue with the markdown editor. Though it used to be far, far worse, sometimes HTML tags will trigger bizarre scrolling behavior. I really wish this would be addressed once and for all.

personalizedrefrigerator commented 7 months ago

For reference, I suspect that this issue is related to how we create the scroll map:

https://github.com/laurent22/joplin/blob/dd04a39f3b0add299adc0bf26e74c68813414ce3/packages/app-desktop/gui/note-viewer/scrollmap.js#L40-L50

laurent22 / joplin