Missing newline after header

[rienswagerman]

A newline is removed when adding a header inside a paragraph.

1. Add a paragraph of text.
2. Split the paragraph by adding 3 returns
3. Add a line of text above the second paragraph
4. Format it as header

Output before adding h1, two <br/>'s before HEADER:
<p>You can try a live demo of the conversion by opening the demo-browser.html file after cloning the repo.<br/><br/>HEADER<br/>Hello Yan try a live demo of the conversion by opening the demo-browser.html file after cloning the repo.<br/></p>

Output after adding h1, one <br/> before <p><h1>HEADER</h1>:
<p>You can try a live demo of the conversion by opening the demo-browser.html file after cloning the repo.<br/></p><h1>HEADER</h1><p>Hello Yan try a live demo of the conversion by opening the demo-browser.html file after cloning the repo.<br/></p>

Output Quill:
<p>You can try a live demo of the conversion by opening the demo-browser.html file after cloning the repo.</p><p><br></p><h1>HEADER</h1><p>Hello Yan try a live demo of the conversion by opening the demo-browser.html file after cloning the repo.</p>

I've looked into the '_renderInlines' function in /src/QuillDeltaToHtmlConverter.ts and found that the second newline is removed in lines 276 - 279.

I am not sure why that condition is in there...

  _renderInlines(ops: DeltaInsertOp[], isInlineGroup = true) {
    var opsLen = ops.length - 1;
    var html = ops
      .map((op: DeltaInsertOp, i: number) => {
       /** THIS REMOVES A NEWLINE TOO MUCH **/
        if (i > 0 && i === opsLen && op.isJustNewline()) {
          return '';
        }
        return this._renderInline(op, null);
      })
      .join('');
    if (!isInlineGroup) {
      return html;
    }

[jraoult]

Message from the future , thanks for tracing it @rienswagerman 😉. How did you go about working around this?

[anmeln]

Message from the future 2.0, @rienswagerman @jraoult have you found any solutions?

[jraoult]

@anmeln I create a sub-class called KeepNewLineConverter (how original 😉) and have been happy since then, here's the gist of it:

/**
 * The only purpose of this custom converter is to disabled new line collapsing
 * algorithm to stay consistent with Quill's behaviour.
 *
 * @see https://github.com/nozer/quill-delta-to-html/issues/80
 */
class KeepNewLineConverter extends QuillDeltaToHtmlConverter {
  constructor(deltaOps: Array<unknown>, options: Options) {
    super(deltaOps, options);
  }

  get superOptions() {
    // `options` is declared private in the parent class so we centralise access
    // here to minimize the use of ts-ignore
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    return this.options as unknown as NonNullable<Options>;
  }

  override _renderInlines(ops: Array<DeltaInsertOp>, isInlineGroup = true) {
    const html = ops
      .map((op: DeltaInsertOp) => {
        return this._renderInline(op, null) as unknown;
      })
      .join("");
    if (!isInlineGroup) {
      return html;
    }

    const startParaTag = makeStartTag(this.superOptions.paragraphTag);
    const endParaTag = makeEndTag(this.superOptions.paragraphTag);
    if (html === BrTag || this.superOptions.multiLineParagraph) {
      return startParaTag + html + endParaTag;
    }
    return (
      startParaTag +
      html
        .split(BrTag)
        .map((v) => {
          return v === "" ? BrTag : v;
        })
        .join(endParaTag + startParaTag) +
      endParaTag
    );
  }
}

Now I'll be honest, I'm not sure how committed you are to the Quill ecosystem, but I'd suggest staying away if you sill can. It is pretty much abandoned and not the future (what a shame, though, it was good).