table icon indicating copy to clipboard operation
table copied to clipboard

SHIFT + ENTER to make new line?

Open intaek-h opened this issue 2 years ago • 8 comments

Inside a table cell, I press shift + enter to create a new line. It displays fine. However in JSON, the new line is not saved, therefore not printed. Any ideas on keeping the style in JSON? 스크린샷 2022-10-20 오후 5 42 08 스크린샷 2022-10-20 오후 5 42 19

intaek-h avatar Oct 20 '22 08:10 intaek-h

I'm running into the same problem.

KevinBeckers avatar Oct 20 '22 17:10 KevinBeckers

Looks like the issue is caused by cell.textContent.trim()); at: https://github.com/editor-js/table/blob/59071355377fd853d424cfd18366929221009c5e/src/table.js#L932

KevinBeckers avatar Oct 20 '22 17:10 KevinBeckers

@KevinBeckers May I ask why your merge request was blocked? And did you solve the issue by removing trim()?

+edit) Oh, your pr isn't reviewed yet ;)

intaek-h avatar Oct 21 '22 01:10 intaek-h

After more research, the problem seems to vary by browser. Different browsers have different behavior in a 'contentEditable DIV'. Safari for example, which places a new div. Chrome adds a new line and Firefox ads a

KevinBeckers avatar Oct 25 '22 08:10 KevinBeckers

Just adding that I am having the same problem. It would be great if this could be supported somehow! Even with these browsers handling everything differently

evanshabsove avatar Oct 27 '22 17:10 evanshabsove

I have the same issue. Would be great if we could find a solution. @KevinBeckers Did you by any chance find something that worked?

Thimows avatar Jan 25 '23 20:01 Thimows

@intaek-h @KevinBeckers @evanshabsove @Thimows

The reason is that br is not an allowed inline tag, which will then be removed when the Editor calls it a sanitization function.

Just extend this plugin, then add a sanitization configuration, like this:

import Table from '@editorjs/table'

export default class TablePlugin extends Table {
  static get sanitize(){
    return {
      br: {},
      // ... other configs
    }
  }
}

manh-gntvn avatar Feb 28 '23 05:02 manh-gntvn

Thanks @manh-gntvn the suggested approach works I am using following code to support bold, italic and links alongside newlines in table cells

import Table from '@editorjs/table'

export default class TablePlugin extends Table {
  static get sanitize() {
    return {
      b: true,
      a: {
        href: true,
      },
      i: true,
      br: {},
    };
  }
}

abidfs avatar Feb 07 '24 10:02 abidfs