search

pavittarx / editorjs-html

A javascript library to parse editorjs clean data to html. It is adaptable and usable in all kind of projects.
https://runkit.com/pavittarx/editorjs-html-example
MIT License
331 stars 61 forks source link

Quote generated HTML has an empty paragraph for the caption #7

Closed literakl closed 4 years ago

literakl commented 4 years ago

I have the following source:

{
  "type": "quote",
  "data": {
    "text": "a",
    "caption": "",
    "alignment": "left"
  }
}

It produces following HTML code:

<blockquote><p></p> a </blockquote>

It should skip the first paragraph when the caption is empty.

<blockquote>a</blockquote>
pavittarx commented 4 years ago

Hey, @literakl . Sorry, but the library doesn't provide a default parser function for type: "quote" . It must be a parser function defined within your project or library. So, you will need to accustom it to your needs accordingly.

Here is the list of parser functions, provided with the library. https://github.com/pavittarx/editorjs-html#supported-block-types

Here is the source, for said parser functions. https://github.com/pavittarx/editorjs-html/blob/master/src/transforms.js

As, you can see, the block of type: "quote" is not being handled by the library,

pavittarx commented 4 years ago

Trobouleshooting Information:

  1. Check your custom parser functions.
  2. Check the version of the library you are using.
  3. Check within /node_modules/editorjs-html/src/transforms.js

More on custom parser functions here, https://github.com/pavittarx/editorjs-html#extend-for-custom-blocks

literakl commented 4 years ago

You were right. It was a custom parser. Would you add table and quote render to your library?

    quote: (obj) => {
      let html = `<blockquote style="text-align:${obj.data.alignment};">`;
      if (obj.data.caption != null && obj.data.caption !== '') {
        html += `<p>${obj.data.caption}</p> `;
      }
      html += `${obj.data.text} </blockquote>`;
      return html;
    },

and

    table: (obj) => {
      let rows = '', rendered = '';
      obj.data.content.map((row) => {
        let cells = '';
        row.map((cell) => {
          cells += `<td class="tc-table__cell"><div class="tc-table__area">${
            cell}</div></td>\n`;
        });
        rows += `<tr>${cells}</tr>\n`;
      });
      rendered += `${'<div class="ce-block"><div class="ce-block__content"><div class="tc-editor cdx-block">'
      + '<div class="tc-table__wrap">\n<table class="tc-table"><tbody>'}${
        rows}</tbody></table>\n</div></div></div></div>\n`;
      return rendered;
    },
pavittarx commented 4 years ago

@literakl Since, editorjs supports quote and table blocks by default. I would be more than happy to add them. To provide your changes or suggestions, please open a PR (Pull Request) with suggested changes.