Exit code on right arrow

[techstonia]

Hey 👋

This PR adds functionality to extension-code and allows the user to exit by pressing RightArrow:

[philippkuehn]

Hey, thanks for that PR.

I think your gif doesn't demonstrate your fix very well because after applying a mark input rule, the mark is always removed. It’s just a rendering issue that you think you are still in the mark. But if you type something it's without the mark. See:

Bildschirmaufnahme.2021-04-23.um.22.09.57.mp4

You maybe want to improve the behavior when a code mark is at the end of a line?

Bildschirmaufnahme.2021-04-23.um.22.23.03.mp4

There is also a inclusive: false option for marks which can change that behavior.

Bildschirmaufnahme.2021-04-23.um.22.23.03.mp4

Or is there any other case you wanted to improve?

[techstonia]

I think I left out some context. 😬 Sorry about that.

It's difficult to leave code after editing it (and code is the last "thing" in editor):

[m1911star]

Hello~I need that. It's hard for me to append another kind of element after previous code block.So, I need arrow to skip out code block to continue input

[philippkuehn]

I’m thinking of moving this into its own commands. It’s also important to say that this solved only the right side of code. I’m also not sure about adding a whitespace. Maybe just remove storedMarks is enough.

So maybe a leaveMarkLeft and leaveMarkRight would be nice? This affects also other marks like bold, italic...

Sorry about that but there are so many cases 🙃

[m1911star]

@philippkuehn I'll try, thanks a lot~

[martinthenth]

The option to add an extra space would be great. I currently have an implementation of Code that exits the Mark on two consecutive spaces, and then adds an extra space after the mark; but it relies on Transaction (i.e. return state.tr.insertText(' '), which is not available with keyboard shortcuts.

I believe the requested implementation does not actually insert a "space" character, because in the live editor it seems this.editor.insertContent(' ') filters the initial and final "space" characters from the value.

For example, this.editor.insertContent(' $ ') (space, $ sign, space) returns only `$'.

Is there a workaround to add the space character?

[techstonia]

I think there were some changes in what insertContent accepts as parameters. Now

if (codeOnLeft && noCodeUnderCursor && nothingOnRight) {
            return this.editor
              .chain()
              .unsetCode()
              .insertContent([{ type: 'text', text: ' ' }])
              .run()
          }

this works instead.

EDIT: Updated the PR as well.

[philippkuehn]

but it relies on Transaction (i.e. return state.tr.insertText(' '), which is not available with keyboard shortcuts.

don’t understand that 🤔

[philippkuehn]

I think there were some changes in what insertContent accepts as parameters.

I changed some code there but it should still work with simple strings: https://www.tiptap.dev/api/commands/insert-content

But maybe there is a bug when using trailing or leading spaces.

[philippkuehn]

With this fix this.editor.insertContent(' $ ') should work as expected again.

[martinthenth]

but it relies on Transaction (i.e. return state.tr.insertText(' '), which is not available with keyboard shortcuts.

don’t understand that 🤔

I should have mentioned I'm using a custom InputRule to match on "two consecutive spaces". InputRules have a variable tr available, which in turn has ProseMirror's insertText() function. I don't think addKeyboardShortcuts has this available.

The fix works great, exactly as expected. Thanks.

[philippkuehn]

@martinthenth Within addKeyboardShortcuts you can literally do everything. A plain transaction (tr) is available everywhere.

addKeyboardShortcuts() {
  return {
    // work with plain transactions
    Enter: () => {
      const { tr } = this.editor.state

      tr.insertText('whatever')

      this.editor.view.dispatch(tr)

      return true
    },

    // or use commands as abstraction layer
    Enter: () => {
      return this.editor.commands.insertContent('whatever')
    },

    // or use the generic `command()` command
    Enter: () => {
      return this.editor.commands.command(({ tr }) => {
        tr.insertText('whatever')

        return true
      })
    },
  }
}

[rowanc1]

Might be useful to see another library prosemirror-codemark that solve these challenges around code-marks specifically and handles a lot of other use cases (clicking, arrow up/down, start-of-line quirks) through a fake cursor to indicate the next character insertion.
https://github.com/curvenote/prosemirror-codemark

Let me know if there is anything in there that might be helpful.

[uinz]

Might be useful to see another library prosemirror-codemark that solve these challenges around code-marks specifically and handles a lot of other use cases (clicking, arrow up/down, start-of-line quirks) through a fake cursor to indicate the next character insertion. https://github.com/curvenote/prosemirror-codemark

Let me know if there is anything in there that might be helpful.

prosemirror-codemark not working with composetion input

[bdbch]

May not be the best way to handle this, but it works for now and should help with exiting code marks in general with other marks - I added a new attribute to the Mark object that handles this on ArrowRight. See #2925

This would solve this issue for code marks that are at the end of a node (for example paragraph, where it's hard to exit the mark).

What I could now imagine as an improvement would be to "save" the last exit transaction and see if the selection moves out of the current node to remove the empty whitespace at the end of the node.