Rendering invisibles

I’ve created a plugin to render invisible characters in a ProseMirror document, both as a task to understand maps in ProseMirror a bit better but also because a lot of print people at work will love something like this.

https://github.com/guardian/prosemirror-invisibles

Demo: https://guardian.github.io/prosemirror-invisibles

It just uses decorations stuck inline wherever an invisible appears so could be a bit heavy on large documents, although with decoration mapping it actually seems fine on the pretty large documents I’ve tested it on.

There are no tests and is currently doesn’t work on FF due to this issue: the user needs to cursor left twice through an invisible character.

Feel free to comment / PR on how I’ve mapped the decos and especially this code here, which attempts to get all the ranges that have been inserted in a transaction - not quite sure if that does the job but it seems to work!

2 Likes

Nice!

Are you trying to get the ranges in the new document? It seems like you should be mapping through the steps that come after the current one (mapping.slice(1 + 1)) instead of the ones that come before it to do that.

You’re quite right (assuming that’s meant to be i + 1) and actually I did have it that way before but I think I broke something and then changed this in the course of fixing it - thinking that was what had broken it. I guess the only reason it works now is because there was often only one range?

Are there good examples of edits to a simple document that make create more than one contiguous range or is purely for collaborative editing and appendedTransactions?

Turning a paragraph with images in it into a code block—that would first delete the images, and then change the block type. Or using the wrapInList command on a bunch of paragraphs.

The easiest way to get interesting testing transactions is probably to generate them programmatically though—just replace a bunch of ranges.

Great thanks!

This is what I’ve been doing in other places, just wondered if there was an easy to way to click and break something while I was playing around.

I like this a lot. The repository is simple and modern, and demonstrates solving an interesting problem. Well done!

It’s great that PM makes expressing this stuff relatively easy (but for a few contenteditable standard issues). One other cool thing about it is that it’ll allow us to bring in things like soft-hyphens which have proven pretty hard for us to work with on the web but are pretty neat for dealing with text in confined spaces.

This is great, I’ve been working with the same thing (see Showing formatting symbols in editor)

I am however seeing problems with cursor movement not only in Firefox. In Chrome, at least on Mac, moving with left/right keys from one block to the next will skip the first/last character. Are you seeing the same thing? Is that also due to #832. I had that problem with my own plugin, too.

I don’t seem to be having that issue, my only issue now (I think) is shift-right selecting something, which takes two cursor movements per character in FF. Have you got any code to look at?