Detect key events in code tag in domObserver

[seanchambo]

We currently have a code block node that under the hood uses a code tag instead of a p tag for better syntax highlighting. We were noticing on mobile that if you hit enter within the code block it would delete all the text after the place where the "Enter" was done.

I believe this will fix the issue but also not sure if it is the best approach. I don't think on our end we are able to change to a p tag now and must stick with code.

Have attached some videos to help show the issue. This is done on the iOS simulator BTW

after.mov

before.mov

[marijnh]

Are you styling the code elements as display: block, or wrapping them in a block node? (Seeing the toDOM function for your block nodes would be useful.)

[seanchambo]

Yup we are wrapping the code in quite a nested structure.

[
    'div',
    { class: 'code-block' },
    ['div', { class: codeBlockClassNames.gutter, contenteditable: 'false' }],
    [
      'div',
      { class: codeBlockClassNames.content },
      [
        'code',
        {
          'data-language': node.attrs.language || '',
          spellcheck: 'false',
          contenteditable: 'true',
        },
        0,
      ],
    ],
  ]

[marijnh]

And the browser only splits the <code> element, not the <div>, when you press enter? That doesn't seem like the native behavior would produce a line break.

[seanchambo]

Yes it splits into 2 code tags.

[seanchambo]

Any ideas about this? I can send through the mutations from the domobserver if that helps?

[seanchambo]

This is the dom mutations that are generated when you hit "enter" in the code block node on ios

[seanchambo]

@marijnh just wanted to bump this

[marijnh]

A minimal self-contained setup that demonstrates the problem would help debug this. The markdown schema also has an inner <code> tag, but doesn't seem to cause this issue. So try to figure out what it is that you're doing differently.

[robinslange]

Hey @marijnh I'm necroing this thread only because I work with Sean and have been working on newer problems arising that are fixed by this also.

We have an issue where users on Android mobile cannot enter a new line while in a codeblock, and also if there is content after the cursor and the return key is pressed, that content is lost.

I've created a reproduction for you to try out here: https://stackblitz.com/edit/js-jb8fcr?file=index.html

I tested the PR suggested change locally, and without any other changes was able to resolve both the aforementioned issues :)

Hopefully the reproduction helps, let me know if you need anything else. Open to suggestion on resolution, there may be something we've missed in our investigation.

We're currently looking at a bump for our prosemirror-view version in May, and having tested v1.30.1 as that is what we're looking to bump to and at present none of the new changes fix our issues.

[robinslange]

Hey @marijnh just a gentle bump ❤️

[marijnh]

At a glance, your code blocks are rendered in an uneditable wrapper element, which is definitely not something this library supports.