QuillDeltaToHtmlConverter returns blank

[Doetheman]

I am currently fetching delta data from my database and using convert() to convert the delta value to HTML. For some reason, the value returns a blank string but before convert() the object was assigned delta. What could be the issue?

EXAMPLE: const QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;

jobs.forEach(job => { const cfg = {}; const cfg2 = {}; const converterDesc = new QuillDeltaToHtmlConverter(job.info.description.toString()); const converterReq = new QuillDeltaToHtmlConverter(job.info.requirements.toString()); job.info.description = converterDesc.convert(); job.info.requirements = converterReq.convert(); });

converterDesc contains this before I call the convert() function:

rawDeltaOps:'{"ops":[{"attributes":{"bold":true},"insert":"Looking for Independent and Growth Mindset Designer"},{"insert":"\nLooking for UI/UX designs to assist our team to support black businesses in becoming digital resilient. Our team consult with startups and small business and offer services to design & develop their digital solution.\n\n"}]}'

I tried without toString()

[lushiyun]

I'm having the same issue. Converter rawDeltaOps shows result similar to yours but the convert() function returns blank.

import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html'
const cfg = {}
const converter = new QuillDeltaToHtmlConverter(
    JSON.parse(message.content),
    cfg
)
const html = converter.convert()

[Rikhart]

I have the same issue, any news about this bug ?

[lushiyun]

Are you using React? If so, I found a workaround:

const deltaOps = JSON.parse(message.content)

const quillHtml = () => {
    const temp = new Quill(document.createElement('div'))
    temp.setContents(deltaOps)
    return { __html: temp.root.innerHTML }
  }

return <div dangerouslySetInnerHTML={quillHtml()}></div>

[martinschilliger]

I often stumbled over this… don't supply the delta to the converter, supply delta.ops. So the example of @Doetheman would be:

const QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;

jobs.forEach(job => {
  const cfg = {};
  const cfg2 = {};
  const converterDesc = new QuillDeltaToHtmlConverter(job.info.description.ops);
  const converterReq = new QuillDeltaToHtmlConverter(job.info.requirements.ops);
  job.info.description = converterDesc.convert();
  job.info.requirements = converterReq.convert();
});

I don't know why you are using toString() here, you have to pass the JavaScript Object to the converter.

[yklim]

typescript + react . Works fine!

import { QuillDeltaToHtmlConverter } from 'quill-delta-to-html';

const cfg = {};

function deltaToHtml(delta: string) {
  const _delta = JSON.parse(delta);
  const converter = new QuillDeltaToHtmlConverter(_delta.ops, cfg);
  const html = converter.convert();
  return html;

...
<div dangerouslySetInnerHTML={{ __html: quillToHtml(data) }} />

[hhvdblom]

I often stumbled over this… don't supply the delta to the converter, supply delta.ops. So the example of @Doetheman would be:

const QuillDeltaToHtmlConverter = require('quill-delta-to-html').QuillDeltaToHtmlConverter;

jobs.forEach(job => {
  const cfg = {};
  const cfg2 = {};
  const converterDesc = new QuillDeltaToHtmlConverter(job.info.description.ops);
  const converterReq = new QuillDeltaToHtmlConverter(job.info.requirements.ops);
  job.info.description = converterDesc.convert();
  job.info.requirements = converterReq.convert();
});

I don't know why you are using toString() here, you have to pass the JavaScript Object to the converter.

What I did forget was to first make a JSON object of the String I got from the database withJSON.parse(delta). After that I put the Delta with ops in it and it works fine :-) Thanks for the community to make this possible :-)