[Release] Codemirror6 Plugin

Plugins
,
#121

If I have time, I want to use js-minimap - npm to build a minimap scrollbar for Story River. Minimap 小地图插件 · tiddly-gittly/tiddlywiki-plugins · Discussion #99 · GitHub

#122

@oeyoews

I have found two issues with the CM6 plugin.

Issue 1

CM6 is adding these lines to the raw markup section:

image
image693×248 24.4 KB

I deleted over a hundred of them before taking the screenshot.

Issue 2

When selecting text in the editor with the mouse, CM6 will start to select multiple lines almost immediately, even if you’re trying to select text on a single line. Then it starts to scroll the editor (for no reason). Now you try to select upward and the problem gets worse – you have to stop dragging the mouse and start over.

There should be code to desensitize the mouse (jitter/debounce) because it’s just too sensitive.

This problem is much worse when those hundreds of empty divs are present from issue 1.

Hope this makes sense?

#123

It looks like this is the default behavior of codemirror6, I may need to find a way to clean them up when the instance is destroyed

#124

Issue 2 is by far the worst.

#125

Actually, I don’t understand this question, can you provide some pictures or video demonstrations?

1 Like
#126

I can’t give you the video or screenshot because I’ve deleted all the bogus divs.

If I try to select text like this…

image
image770×168 6.58 KB

CM6 immediately starts to scroll the editor so I end up with this:

image
image1377×312 19.1 KB

Then I try to drag the mouse UP and end up in a race condition trying to regain control of the selection. A race I can’t win.

If I use the keyboard instead, it works fine. So the problem is in the code that provides mouse-drag-selection.

1 Like
#127

And where are the styles kept? I found $:/plugins/oeyoews/tiddlywiki-codemirror-6/styles but that seems overloaded with !important property values (not cool for a library to do that especially without recourse to @layer).

#128

Hello @CodaCoder

To the styles I can say that they are in the CodeMirror6 Javascript code hardcoded and added in the tiddlywiki header.
The styles you found that are using !important (I believe) are mostly color definitions (and styles used for the ControlPanel > Settings UI)

I have updated my version of the codemirror6 plugin, maybe there these lines you found aren’t added.
CodeMirror6 adds them and I don’t know why.

Best wishes,
Simon

#129

image
image943×538 53.5 KB

This line of content is added every time a new tiddler is opened, and it will not be destroyed. It is currently difficult for me to locate the step where the problem occurs.

#130

codemirror6 plugin 1.6.29 has fixed

2 Likes
#131

Yep, each newly created tiddler, and every tiddler opened for editing.

#132 
<img alt="version" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Foeyoews%2Ftiddlywiki-codemirror6%2Fmain%2Fpackage.json&query=version&style=flat-square&logo=Codemirror&logoColor=white&label=codemirror&labelColor=black&color=black">

But that’s pulling from the online source which doesn’t tell the user what he has installed locally.

This is tw .com where cm6 is not installed:

image
image947×426 24.5 KB

#133

Confirmed.    
:trophy:

1 Like
#134

@BurningTreeC

Agreed and thanks for jumping in. Some of the color settings are pretty bad (worst at the moment are the choices used for text selection – almost no color/background contrast at all).

I’m trying to use this to override it:

.ͼr .cm-selectionLayer .cm-selectionBackground {
  background: #04e !important;
  color: #000 !important;
}

The background almost works, but the color refuses to stick which suggests the color scheme is dynamic (overwritten). And even then, it’s not consistent. Look…

image

One selection, two different backgrounds, color:#000 completely ignored.

Where is your release, Simon?

#135

@oeyoews

Issue 3

Steps:

  1. Create a new tiddler.
  2. Add some content to the body.
  3. Ctrl F
  4. Esc (to cancel the search)
  5. Tiddler is closed.

Escaping out of the Search panel should not close the tiddler. You need a delegate added to the Search panel to handle the Esc key.

#136

I know this, codemirror6 also supports this, not sure why it doesn’t work in tiddlywiki, tiddlywiki’s global shortcut priority seems to break this

#137

If you add your own delegate at the panel, this will be fixed.

#138

Hi @CodaCoder @oeyoews

I’m not sure but I thought it works in my plugin version

@CodaCoder I’ll provide a link later

#139

Hi @CodaCoder

This is the link to my version of the plugin:

https://burningtreec.github.io/tiddlywiki-codemirror-6/

Esc within the search panel isn’t working there either

1 Like
#140

@BurningTreeC @oeyoews

Are either of you guys working on this? Where is the latest version? I’m finding quite a few issues…

1 Like