Feature request to support *table* block type

[nullifiedaccount3]

https://github.com/editor-js/table

[pavittarx]

@nullifiedaccount Thank you for your suggestions. I'll surely look into it.

[sethmichaelbrown]

Wanted to bump this, as well as checklist. Do you think support for this is on the horizon? Thanks kindly!

[pavittarx]

@sethmichaelbrown I am aware of this bit, but supporting tables can be a little tricky. I can use good old table tags, but there are new layout features like Flexboxes and Grids, that are simpler and better in my opinion.

Moreover, this is a HTML library, that is what had been from the start.

Suporting checklist is another deal in itself. Since, I don't think that would be possible without CSS.

However, there is support for adding custom parser functions and oveerriding the default ones. So you are free to add your own approach. However, support for these bits are on hold, until either I find a suitable approach for the same.

[ziaulhasanhamim]

Any progress on supporting tables?

[VityaSchel]

JS:

editorJsSerializer({
  table: (block) => {
    const rows = block.data.content
      .map((row, rowIndex) => `<tr>${
        row
          .map(cell => {
            const cellTag = (block.data.withHeadings && rowIndex === 0) ? 'th' : 'td'
            return `<${cellTag}>${cell}</${cellTag}>`
          })
          .join('')
      }</tr>`)
      .join('')
    return `<table>${rows}</table>`
  }
}).parse(editorJSData).join('\n')

TS:

// import type { OutputData } from '@editorjs/editorjs'
// or
type OutputData = { type: 'table', data: { content: string[][], withHeadings: boolean } } // per https://www.npmjs.com/package/@editorjs/table
editorJsSerializer({
  table: (block: OutputData) => {
    const rows = block.data.content
      .map((row, rowIndex) => `<tr>${
        row
          .map(cell => {
            const cellTag = (block.data.withHeadings && rowIndex === 0) ? 'th' : 'td'
            return `<${cellTag}>${cell}</${cellTag}>`
          })
          .join('')
      }</tr>`)
      .join('')
    return `<table>${rows}</table>`
  }
}).parse(editorJSData).join('\n')