5

I have searched for a way to change the default behavior for Enter to be the same as Shift + Enter. To get instead of new

Is it possible to change to this behavior somehow?

Bohodir Rahmonov
  • 109
  • 1
  • 5

2 Answers2

4
 this.editor = new Editor({
  content: this.modelValue,
  extensions: [
    StarterKit,
    HardBreak.extend({
      addKeyboardShortcuts () {
        return {
          Enter: () => this.editor.commands.setHardBreak()
        }
      }
    })
  ]
});
Bohodir Rahmonov
  • 109
  • 1
  • 5
  • 3
    Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you [edit] your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Jeremy Caney Mar 18 '22 at 18:05
  • Please add an explanation to your answer – Ken Jun 24 '22 at 11:17
  • Added a suggested edit to help clarify the answer. – Hybrid web dev Apr 03 '23 at 04:22
4

If you're just tryng to achive the line break on your output the same as your editor, you might not need this at all.

I was encountering the same problem and asked myself this question. But by setting my "Enter" key to set a HardBreak, it causes issues with multiple extensions such as headings and list.

It turns out that after a brief inspection of the element inside the editor and my output, it renders a<p> tag and inside it contain's a <br /> which acts as a line break. BUT, that <br /> tag does not get included on the output so the <p> tag does not have any height at all.

Two other methods that works:

  1. With CSS, you can do something like this (probably more reliable than the second method): How to keep a paragraph height even when there is no text in it?
.ProseMirror p:empty::before {
  content: '';
  display: inline-block;
}

I attached the ProseMirror css class to my output as well, change it acording to your need. This inserts an empty element so that the <p> height will be kept.

  1. Configure the Paragraph extension to add a class/style for the "height" (this can be a simple height, min-height, margin, etc).
const CustomStarterKit = StarterKit.configure({
  // ...
  paragraph: {
    HTMLAttributes: {
      class: 'min-h-[1rem]'
    }
  }
});

Or this.

const CustomParagraph = Paragraph.configure({
  HTMLAttributes: {
    class: 'min-h-[1rem]'
  }
});

Then include it in your list of extensions. I was using Tailwind there, but you get the idea.

ArnNied
  • 173
  • 1
  • 1
  • 8