How can I use ENTER key for soft line break?

[ghost]

The question.
Can I swap the shortcut key for Soft Line Break (ENTER+SHIFT) with Hard Line Break (ENTER) ?
Why and how the question has come up.
I just want to make sure that if the user presses ENTER key the user will create a newline on the existing paragraph without creating a new one so a set of lines can be grouped together easily.

[CavalcanteLeo]

I need to change that too

[neSpecc]

Describe your use case, pls. Why do you prefer such data:

{
    "time" : 1602768915881,
    "blocks" : [
        {
            "type" : "paragraph",
            "data" : {
                "text" : "Line one<br>Line two<br>Line three"
            }
        }
    ],
    "version" : "2.18.0"
}

instead of this:

{
    "time" : 1602768915881,
    "blocks" : [
        {
            "type" : "paragraph",
            "data" : {
                "text" : "Line one"
            }
        },
        {
            "type" : "paragraph",
            "data" : {
                "text" : "Line two"
            }
        },
        {
            "type" : "paragraph",
            "data" : {
                "text" : "Line three"
            }
        }
    ],
    "version" : "2.18.0"
}

?

[victor-david]

One reason is when entering poetry. A paragraph represents a stanza, and the lines within the paragraph are separated by <br>.

At rendering time, the lines within a paragraph are separated by their line-height (<br>. only) while the paragraphs themselves are separated by their margin and/or padding. This leaves the visual aspect of the poetry intact, keeping the stanzas separated more than the lines within each stanza - with appropriate css applied of course.

[CavalcanteLeo]

@neSpecc I have to prevent when the users types enter, and instead of create a new paragraph, it should just return a break line
. But when the users type enter only

the enter key should be equal shift+enter

https://staging.leorad.com.br/laudador/63

There are a bunch of pre set sentences there. If the user wants to improve that, they can continue writing, but when the user types enter, it must continue in the same block, it can not create a new block

[CavalcanteLeo]

I think I have to change this behavior
https://github.com/codex-team/editor.js/blob/next/src/components/flipper.ts#L253

[CavalcanteLeo]

any news? did you guys figured?

@neSpecc that's exactly what i need.
As i asked in other issue you have closed. (#1387)

[kashyap-git]

I also need same feature. @CavalcanteLeo - Have you figure out this anytime?

[dyonis]

Interested too.
Any updates ?

[sadikyalcin]

@dyonis @CavalcanteLeo

This is what I have so far if you guys are interested - it's not perfect but it's a start. I will update it once I perfect it (minor issue with <br /> sometimes, it's created but doesn't actually break the line).

This code is in a custom block - clone the paragraph and create your own block or fork the repo.

1. Add event listener to your element

if (!this.readOnly) {
  div.contentEditable = true;
  div.addEventListener('keydown', this.onKeyDown);
}

2. Listen for enter and stop default behaviours

onKeyDown(e) {
  if (e.code === 'Enter') {
    e.preventDefault();
    e.stopPropagation();

    this.addLineBreak();
  }    
}

3. Use selection and range api

addLineBreak() {
  const selection = window.getSelection(); // get the current selection.
  const range = selection.getRangeAt(0); // get the current range of the selection.
  const br = document.createElement('br');
  range.insertNode(br); // insert the <br> element at the current cursor position.
  range.setStartAfter(br); // set the start of the range to the position after the <br> element.
  range.collapse(true); // collapse the range to the position after the <br> element.
  selection.removeAllRanges(); // used to remove any existing ranges from the selection.
  selection.addRange(range); // add the modified range to the selection.
}

[ARH3]

Thanks @sadikyalcin for sending this along. I'm curious why you are approaching it this way, instead of using enableLineBreaks?

For me, desired state is: ENTER creates a soft line break, and SHIFT + ENTER creates a new block.

What I could do is set enableLineBreaks = true and then add a shortcut of SHIFT + ENTER for the default block.... but when I set enableLineBreaks = true for my custom block, I get an error that I can't figure out: Uncaught TypeError: Cannot read properties of undefined (reading 'length') .... this only happens when I am at a blank soft line break, and hit backspace. So annoying haha.

Anyway, tl;dr is that I am curious of your final solution and also wondering why you aren't using the enableLineBreaks = true. Thanks!

[sadikyalcin]

Thanks @sadikyalcin for sending this along. I'm curious why you are approaching it this way, instead of using enableLineBreaks?

For me, desired state is: ENTER creates a soft line break, and SHIFT + ENTER creates a new block.

What I could do is set enableLineBreaks = true and then add a shortcut of SHIFT + ENTER for the default block.... but when I set enableLineBreaks = true for my custom block, I get an error that I can't figure out: Uncaught TypeError: Cannot read properties of undefined (reading 'length') .... this only happens when I am at a blank soft line break, and hit backspace. So annoying haha.

Anyway, tl;dr is that I am curious of your final solution and also wondering why you aren't using the enableLineBreaks = true. Thanks!

enableLineBreaks just tells the editor, let the browser handle the events. And on browsers; Enter key wraps a div around the br tag. Enter + Shift just creates a br tag. It's an illogical browser design IMO. Create a simple html with a <p contenteditable="true" /> and you can see the difference. Depending on use case, specifically for mine, a div is an absolute no-no.

[sadikyalcin]

Updated:

  addLineBreak() {
    const selection = window.getSelection(); // get the current selection.
    const range = selection.getRangeAt(0); // get the current range of the selection.
    const brTags = this._element.querySelectorAll('br');

    // we need to create 2x tags initially, 1x tag will not do anything
    // this is the default browser behavior with Enter + Shift as well
    if (brTags.length === 0) {
      const br1 = document.createElement('br');
      const br2 = document.createElement('br');
      range.insertNode(br1); // inserts the <br> element at the current cursor position.
      range.insertNode(br2); // inserts the <br> element at the current cursor position.
      range.setStartAfter(br2); // set the start of the range to the position after the <br> element.
    } else {
      const br = document.createElement('br');
      range.insertNode(br);
      range.setStartAfter(br); // set the start of the range to the position after the <br> element.
    }

    range.collapse(true); // collapse the range to the position after the <br> element.
    selection.removeAllRanges(); // remove any existing ranges from the selection.
    selection.addRange(range); // add the modified range to the selection.
  }

[ARH3]

@sadikyalcin super helpful thanks! A few questions for clarity:

• So, you keep enableLineBreaks = false when implementing this?
• What are you doing for SHIFT+ENTER? Do you use this to create a new block? If so, I'd love to see that code as well.

Thanks!!!

[sadikyalcin]

@sadikyalcin super helpful thanks! A few questions for clarity:

• So, you keep enableLineBreaks = false when implementing this?
• What are you doing for SHIFT+ENTER? Do you use this to create a new block? If so, I'd love to see that code as well.

Thanks!!!

enableLineBreaks are true. Here is my custom body block tool:

import { IconText } from '@codexteam/icons';

/**
 * Build styles
 */
require('./index.css').toString();

/**
 * Base Paragraph Block for the Editor.js.
 * Represents simple paragraph
 *
 * @author CodeX (team@codex.so)
 * @copyright CodeX 2018
 * @license The MIT License (MIT)
 */

/**
 * @typedef {object} ParagraphConfig
 * @property {string} placeholder - placeholder for the empty paragraph
 * @property {boolean} preserveBlank - Whether or not to keep blank paragraphs when saving editor data
 */

/**
 * @typedef {Object} ParagraphData
 * @description Tool's input and output data format
 * @property {String} text — Paragraph's content. Can include HTML tags: <a><b><i>
 */
export default class Body {
  /**
   * Default placeholder for Paragraph Tool
   *
   * @return {string}
   * @constructor
   */
  static get DEFAULT_PLACEHOLDER() {
    return `Let's create an awesome slide!`;
  }

  /**
   * Allow to use native Enter behaviour
   *
   * @returns {boolean}
   * @public
   */
  static get enableLineBreaks() {
    return true;
  }

  /**
   * Render plugin`s main Element and fill it with saved data
   *
   * @param {object} params - constructor params
   * @param {ParagraphData} params.data - previously saved data
   * @param {ParagraphConfig} params.config - user config for Tool
   * @param {object} params.api - editor.js api
   * @param {boolean} readOnly - read only mode flag
   */
  constructor({ data, config, api, readOnly }) {
    this.config = config;
    this.api = api;
    this.readOnly = readOnly;

    this._CSS = {
      block: this.api.styles.block,
      wrapper: 'ce-paragraph',
    };

    if (!this.readOnly) {
      this.onKeyUp = this.onKeyUp.bind(this);
      this.onKeyDown = this.onKeyDown.bind(this);
    }

    /**
     * Placeholder for paragraph if it is first Block
     * @type {string}
     */
    this._placeholder = config.placeholder ? config.placeholder : Body.DEFAULT_PLACEHOLDER;
    this._data = {};
    this._element = this.drawView();
    this._preserveBlank = config.preserveBlank !== undefined ? config.preserveBlank : false;
    this.data = data;
  }

  /**
   * Check if text content is empty and set empty string to inner html.
   * We need this because some browsers (e.g. Safari) insert <br> into empty contenteditanle elements
   *
   * @param {KeyboardEvent} e - key up event
   */
  onKeyUp(e) {
    if (e.code !== 'Backspace' && e.code !== 'Delete') {
      return;
    }

    const { textContent } = this._element;

    if (textContent === '') {
      this._element.innerHTML = '';
    }
  }

  onKeyDown(e) {
    if (e.code === 'Enter') {
      e.preventDefault();
      e.stopPropagation();

      this.addLineBreak();
    }
  }

  addLineBreak() {
    const selection = window.getSelection(); // get the current selection.
    const range = selection.getRangeAt(0); // get the current range of the selection.
    const brTags = this._element.querySelectorAll('br');

    // we need to create 2x tags initially, 1x tag will not do anything
    // this is the default browser behavior with Enter + Shift as well
    if (brTags.length === 0) {
      const br1 = document.createElement('br');
      const br2 = document.createElement('br');
      range.insertNode(br1); // inserts the <br> element at the current cursor position.
      range.insertNode(br2); // inserts the <br> element at the current cursor position.
      range.setStartAfter(br2); // set the start of the range to the position after the <br> element.
    } else {
      const br = document.createElement('br');
      range.insertNode(br);
      range.setStartAfter(br); // set the start of the range to the position after the <br> element.
    }

    range.collapse(true); // collapse the range to the position after the <br> element.
    selection.removeAllRanges(); // remove any existing ranges from the selection.
    selection.addRange(range); // add the modified range to the selection.
  }

  /**
   * Create Tool's view
   * @return {HTMLElement}
   * @private
   */
  drawView() {
    let div = document.createElement('P');

    div.classList.add(this._CSS.wrapper, this._CSS.block);
    div.contentEditable = false;
    div.dataset.placeholder = this.api.i18n.t(this._placeholder);

    if (!this.readOnly) {
      div.contentEditable = true;
      div.addEventListener('keyup', this.onKeyUp);
      div.addEventListener('keydown', this.onKeyDown);
    }

    return div;
  }

  /**
   * Return Tool's view
   *
   * @returns {HTMLDivElement}
   */
  render() {
    return this._element;
  }

  /**
   * Method that specified how to merge two Text blocks.
   * Called by Editor.js by backspace at the beginning of the Block
   * @param {ParagraphData} data
   * @public
   */
  merge(data) {
    let newData = {
      text: this.data.text + data.text
    };

    this.data = newData;
  }

  /**
   * Validate Paragraph block data:
   * - check for emptiness
   *
   * @param {ParagraphData} savedData — data received after saving
   * @returns {boolean} false if saved data is not correct, otherwise true
   * @public
   */
  validate(savedData) {
    if (savedData.text.trim() === '' && !this._preserveBlank) {
      return false;
    }

    return true;
  }

  /**
   * Extract Tool's data from the view
   * @param {HTMLDivElement} toolsContent - Paragraph tools rendered view
   * @returns {ParagraphData} - saved data
   * @public
   */
  save(toolsContent) {
    // const content = toolsContent.querySelector('[contenteditable]')
    return {
      text: toolsContent.innerHTML,
    };
  }

  /**
   * On paste callback fired from Editor.
   *
   * @param {PasteEvent} event - event with pasted data
   */
  onPaste(event) {
    const data = {
      text: event.detail.data.innerHTML
    };

    this.data = data;
  }

  /**
   * Sanitizer rules
   */
  static get sanitize() {
    return {
      text: {
        br: true,
      }
    };
  }

  /**
   * Returns true to notify the core that read-only mode is supported
   *
   * @return {boolean}
   */
  static get isReadOnlySupported() {
    return true;
  }

  static get isLineBreaksEnabled() {
    return true;
  }

  /**
   * Get current Tools`s data
   * @returns {ParagraphData} Current data
   * @private
   */
  get data() {
    let text = this._element.innerHTML;

    this._data.text = text;

    return this._data;
  }

  /**
   * Store data in plugin:
   * - at the this._data property
   * - at the HTML
   *
   * @param {ParagraphData} data — data to set
   * @private
   */
  set data(data) {
    this._data = data || {};

    this._element.innerHTML = this._data.text || '';
  }

  /**
   * Used by Editor paste handling API.
   * Provides configuration to handle P tags.
   *
   * @returns {{tags: string[]}}
   */
  static get pasteConfig() {
    return {
      tags: ['P']
    };
  }

  /**
   * Icon and title for displaying at the Toolbox
   *
   * @return {{icon: string, title: string}}
   */
  static get toolbox() {
    return {
      icon: IconText,
      title: 'Body'
    };
  }
}

As for SHIFT + ENTER - I haven't touched it. This is handled by editorjs or/and the browsers.

I only use the + button to add a new block.

[ARH3]

@sadikyalcin this is very helpful! I am almost there with my own implementation. I just have one more question.

const brTags = this._element.querySelectorAll('br');

If I am understanding this correctly, this line will look for any br tags in the block, and add them to an array. How does this help you decide if you should add 1 or 2 br tags? Wouldn't the logic have to be to check to see if a br tag exists at the end of the block in question, instead?

When I reproduce the issue, it doesn't seem to matter how many br tags exist. The only one that matters is the one that is or isn't at the very end of the block.

Thanks in advance!

[sadikyalcin]

@sadikyalcin this is very helpful! I am almost there with my own implementation. I just have one more question.

const brTags = this._element.querySelectorAll('br');

If I am understanding this correctly, this line will look for any br tags in the block, and add them to an array. How does this help you decide if you should add 1 or 2 br tags? Wouldn't the logic have to be to check to see if a br tag exists at the end of the block in question, instead?

When I reproduce the issue, it doesn't seem to matter how many br tags exist. The only one that matters is the one that is or isn't at the very end of the block.

Thanks in advance!

I added inline comments as to why but I think you missed it. We check how many BR tags already exist initially because 1 br will not do anything on the first line - this is how browsers handle it. I don't know why they do this but even without editorjs, if you try on a textarea or any editable tag, you will see.

    const brTags = this._element.querySelectorAll('br');

    // we need to create 2x tags initially, 1x tag will not do anything
    // this is the default browser behavior with Enter + Shift as well
    if (brTags.length === 0) {
      const br1 = document.createElement('br');
      const br2 = document.createElement('br');
      range.insertNode(br1); // inserts the <br> element at the current cursor position.
      range.insertNode(br2); // inserts the <br> element at the current cursor position.
      range.setStartAfter(br2); // set the start of the range to the position after the <br> element.
    } else {
      const br = document.createElement('br');
      range.insertNode(br);
      range.setStartAfter(br); // set the start of the range to the position after the <br> element.
    }

[davidyuUpflowy]

Reviving this old thread because I thought it could be quite useful for others. I have tried @sadikyalcin solution, it mostly worked but I still ended up having to press enter twice for certain occasions.

I think the inspiration here is, just create your own block plugin if is not meant to function like a "paragraph". This make sense and I have created my own plugin to suit for my project's requirement. Here is the barebones version that has worked for me - I have modified the namings that suits for poetry example :

interface PoemBlockConstructor {
  data?: object;
  config?: object;
}

class PoemBlock implements BlockTool {
  private _data: BlockToolData;
  private _element: HTMLDivElement;

  constructor({ data }: PoemBlockConstructor) {
    this._data = { text: '' };
    this._element = this.drawView();
    this.data = data;
  }

  static get enableLineBreaks(): boolean {
    return true;
  }

  // What this does is to use browser native contentEditable functionality rather than EditorJS default
  drawView(): HTMLDivElement {
    const div = document.createElement('div');
    div.classList.add('ce-poem-block');
    div.innerHTML = this._data.text || '';
    div.contentEditable = 'true';
    return div;
  }

  render(): HTMLDivElement {
    return this._element;
  }

  save(toolsContent: HTMLDivElement): BlockToolData {
    return {
      text: toolsContent.innerHTML,
    };
  }

  static get sanitize(): SanitizerConfig {
    return {
      text: {
        br: true,
        span: true,
      },
    };
  }

  get data(): BlockToolData {
    return this._data;
  }

  set data(data: BlockToolData) {
    this._data = data;
    this._element.innerHTML = data.text || '';
  }

  static get toolbox() {
    return {
      title: 'Poem',
    };
  }
}

CSS - this is important, because if the wrapper is a standard "block", the breaklines are wrapped with a div:

.ce-poem-block {
  display: inline-block;
}

The idea of this is, if the EditorJS default behaviour is not suitable for certain use-case, you can create a plugin to use the standard browser-native contenteditable. You won't need to worry about implementing your own processing to determine inserting one or two br tags.