Plugin: Keep Cursor Synced between editor and md viewer

ylc395 · 2021-10-11T07:29:07.858Z

GitHub

GitHub - ylc395/joplin-plugin-better-markdown-viewer

Contribute to ylc395/joplin-plugin-better-markdown-viewer development by creating an account on GitHub.

Feature 1: Mark the active line of editor in MD Viewer

You can also set the highlight style in userstyle.css of Joplin. For example:

.better-markdown-viewer-highlight-line { position: relative; }
.better-markdown-viewer-highlight-line::before { position: absolute; background-color: rgba(255, 255, 255, 0.4); content: ''; height: 100%; width: 3px; left: -6px; }

When using dark theme, the highlighted line element get an extra class name.

.better-markdown-viewer-highlight-line-dark {
  background: red;
}

Feature 2: Focus the same line in editor when double click MD Viewer

When In View Mode:

Daeraxa · 2021-10-11T08:39:30.972Z

I really like this however I've already had some issues with the double click feature.
I can apparently only double click once on the viewer window, any other attempts just makes the text blue and doesn't swap to the editor.
Other times it goes grey but the cursor is then put onto the wrong line
Sometimes it goes grey but I don't see the cursor at all and the viewer puts a highlight onto a different line.

One potential feature request (not sure if it is even possible), could the double click feature be used on the single pane viewer to take you to the editor pane? (or does it already do this and it isn't working for me?) This would be great for working like I would with the dual pane viewer but on devices with more limited screen estate.

I'm on Joplin 2.5.1 on Win10.

ylc395 · 2021-10-11T08:52:58.489Z

"db click doesn't work" is a bug, fixed in 1.0.2

Daeraxa · 2021-10-11T10:09:25.343Z

Thanks, I'll have another play with it when the plugin repo updates.

ylc395 · 2021-10-11T11:29:47.202Z

Your requested feature have been included in 1.1.0. See gif in this post

ylc395 · 2021-10-11T11:34:11.125Z

Oh, I just got we you mean. View-Only Mode -> db click -> Editor-Only Mode, right? I will add a option in 1.2.0

Daeraxa · 2021-10-11T11:35:42.013Z

To be honest either works perfectly fine for me but yes, that is what I originally meant. Thanks so much for implementing it.
(I was in the middle of saying I couldn't see a 1.0.2 update yet but I've just spotted the NPM package go up to 1.1.0) so hopefully the repo will update in 25 mins and I can have a play.

bepolymathe · 2021-10-11T13:14:26.095Z

Hi @ylc395

Thank you for this initiative. For me, the Double click will toggle editor out when in View Mode option does not work. It's like an infinite loop where the plugin tries to activate/deactivate the "view" mode. I should mention that in the general settings of Joplin I only alternate between the editor and the viewer.

ylc395 · 2021-10-11T13:27:58.802Z

Bug confirmed. Fixed in 1.2.1. Waiting for NPM to update, may take hours.

Daeraxa · 2021-10-12T11:27:51.819Z

Just downloaded 1.2.2 and it is working nicely with the toggle out to editor function, thank you for adding it.
One thing I have noticed is that it doesn't seem to like code blocks in various forms:

Inline code blocks on double click seems to make the cursor jump to the previous section even when after normal text
Fenced code blocks don't seem to work at all

On the other hand, indented code blocks work just fine

ylc395 · 2021-10-12T12:37:35.073Z

Inline code blocks on double click seems to make the cursor jump to the previous section even when after normal text

I don't quite get this, can you provide a gif or something?

Fenced code blocks don't seem to work at all

Yes, I don't have a good idea to handle Fenced code for some reasons. If anyone can help, PRs are welcome

Daeraxa · 2021-10-12T13:31:16.204Z

ylc395:

I don't quite get this, can you provide a gif or something?

It's a bit odd. You can see in the gif that sometimes things don't quite line up right. Sometimes I can double click the inline code and the cursor goes to the right place but the highlight doesnt. Other times it goes to the wrong line entirely but if you double click again without moving anything else it will change the cursor position. Hope the gif is clear enough.

Animation

ylc395 · 2021-10-14T02:25:59.325Z

图片1918×618 27.4 KB

Do you know why my Joplin MD viewer is not like yours when handling line-break?

Nacandev · 2021-10-14T03:51:58.025Z

I like this plugin! It would be better if it will show a mark on the scrollbar (just like the search mark which appear on the scrollbar when searching a word with ctrl+f). Or, add a method that can directly jump to the exact location on the render viewer.

Besides, I saw you have a question about the line-break. That is about the setting on preference > markdown:

Daeraxa · 2021-10-14T08:13:42.629Z

As @Nacandev mentions, I don't have soft breaks turned on.

Nacandev:

I like this plugin! It would be better if it will show a mark on the scrollbar (just like the search mark which appear on the scrollbar when searching a word with ctrl+f ). Or, add a method that can directly jump to the exact location on the render viewer.

Its worth noting that there is a merged PR that I don't think is in a full release yet (but you can test if you build Joplin yourself) that synchronises the scrolling better so that this shouldn't be necessary

ylc395 · 2021-10-14T08:17:30.757Z

Daeraxa:

As @Nacandev mentions, I don't have soft breaks turned on.

so why are there diffences between your rendered markdown and mine?

Daeraxa · 2021-10-14T08:24:49.090Z

If I turn them on then it does look like yours.

image821×168 2.94 KB

Daeraxa · 2021-10-14T09:20:44.539Z

I stand corrected, it hasn't been merged but you can still build it from the other branch:

github.com/laurent22/joplin

Desktop: Fix #2242: Sync-Scroll for Markdown Editor and Viewer

laurent22:dev ← ken1kob:sync-scroll2-2.4.9

opened 12:20PM - 30 Sep 21 UTC

ken1kob

+350 -109

This PR provides the synchronous scroll capability between Markdown Editor and V…iewer. It's based on [CalebJohn's branch](https://github.com/CalebJohn/joplin/tree/sync-scroll), and the following features are added. - Bi-directional sync-scroll (viewer <-> editor) - Performance improvements: - The mapping between line and scroll position is cached. - Efficiently observing rendering updates to keep scroll consistency - Some cleanups Related forum topics and github issue: - [[Feature request] Better synchronized scrolling in desktop app](https://discourse.joplinapp.org/t/feature-request-better-synchronized-scrolling-in-desktop-app/3609) - [Syncing Split View (Markdown/Preview)](https://discourse.joplinapp.org/t/syncing-split-view-markdown-preview/12131) - [When scrolling, the two sides are out of sync · Issue #2242 · laurent22/joplin](https://github.com/laurent22/joplin/issues/2242) NOTE: If you use an HD display or use zoom in/out, applying the following PR is highly recommended with this PR. - [Desktop: Resolves #4827: Laggy Scrolling in Viewer by ken1kob · Pull Request #5496 · laurent22/joplin](https://github.com/laurent22/joplin/pull/5496)

I'm not sure I understand the argument about it being "too fast". The speed depends on which pane you are scrolling.

Nacandev · 2021-10-14T09:30:01.704Z

Oh! Sorry, I made a logic mistake. You are right, that's what I need, I'm just thinking too much.

splerman · 2021-10-15T19:36:05.003Z

I was surprised by how dramatic the usability of Joplin is improved by this plugin. Maybe it's just my workflow/workstyle, but this is awesome! Thank you!