Keydown/paste listener for a panel plugin

Resources Plugins
1

Hey there

I am working on a simple plugin to visually show hidden characters inside the panel (forum post, GitHub).

While it was relatively easy to replace whitespaces with characters from a custom font, I’m a little clueless how to visualize soft hyphens and <br> linebreaks. One idea is to wrap them in a span tag and using a css pseudo element to visually show the character/element afterwards. Later on they could be replaced with a regular expression hook to not show up in the frontend. – Even though I don’t know whether this is a good idea at all.

I had a look into the Writer Marks plugin from @johannschopplich, since it extends the writer field similar as needed. It feels a little dirty to create a mark without a button to get the spans rendered, but it works for preformatted content.

Now to my question: Would it be possible to extend Kirby with listeners to wrap elements in a span on keydown or paste? Is there a good starting point or another plugin to have a look at?

All the best
Jakob

2

Since extending marks and nodes is now possible on V4 by default, I tried to investigate further. Sadly without luck yet. While setting up marks and nodes is relatively easy now, like:

window.panel.plugin("grommas/custom-marks", {
  icons: {
    "uppercase": '<path d="M17 11V4H19V21H17V13H7V21H5V4H7V11H17Z"></path>',
  },

  writerMarks: {
      uppercase: {
      get button() {
        return {
          icon: "uppercase",
          label: window.panel.$t("custom-marks.uppercase")
        }
      },

      commands() {
        return () => this.toggle()
      },

      get name() {
        return "uppercase"
      },

      get schema() {
        return {
          parseDOM: [{ tag: "span", class: "uppercase"}],
          toDOM: () => [
            "span",
            {
              class: "uppercase",
            },
            0
          ],
        }
      }
    }
  }
});

I don’t quite get how to extend / manipulate defaults, like this one:

As written in my original post I would like to extend br tags by either wrapping them in a span tag or prepending one. Ideally only when rendered in the panel. Is this somehow possible with V4 or is it related to ProseMirror and technically not possible in V4 itself?

3

It’s not urgent at all, but tried a couple of ways to extend or replace the default HardBreak class. For sure my knowledge is limited, so any hints are very welcome:)

4

Managed to find a solution based on the foundational logic of Kirby Soft Hyphens by @hansipete, the key is to not extending ProseMirror at all but creating a clone of it.