Quill delta to Docx 'indent' formatting issue

45 views Asked by At

quill-to-word library generated docx file doesn't include the 'indent' attribute of the original quill delta ops content

I am using Quill in my project and I've been trying for a couple of days now - with no success - to find a solution to the following problem. For the record, i am using NextJs.

I have a Delta JSON content in which, with the help of the quill-to-word library (https://github.com/andrewanthro/quill-to-word)(that also uses quilljs-parser and docx libraries) i managed to convert it to docx.

Also, i've seen in the end of the documentation (on the "Style Configuration" section) that we can apply our own styling. I tried to follow it (you can see in my handleDownload function below this part commented out) but the problem is that, even though it applied the indentation, it applied to all of the content, when it should had only applied to some specific parts within.

Anyways, in the generated docx file, everything is well and formatted (according to the original quill delta) but the indent, which is totally ignored.

My question is: Anyone knows how to make it so the generated docx file takes the indentation into consideration but only on the content parts that actually had the indent toggle on from the original quill editor? In other words, so it only affects the ops/paragraphs that had the 'indent' attribute.

Below i'll share some example and codes.

I)Example

-> 1) Find below an example of the delta and the parsedQuill structure that is used in the generateWord function of the quill-to-word library:

a) delta:

{
  "ops": [
    {
      "insert": "This is a quill content.\n\nThis has the attribute `indent`"
    },
    {
      "attributes": {
        "indent": 1
      },
      "insert": "\n"
    }
  ]
}

b) parsedQuill:

{
  "paragraphs": [
    {
      "textRuns": [
        {
          "text": "This is a quill content."
        }
      ]
    },
    {
      "textRuns": [
        {
          "text": ""
        }
      ]
    },
    {
      "textRuns": [
        {
          "text": "This has the attribute `indent`"
        }
      ],
      "attributes": {
        "indent": 1
      }
    },
    {
      "textRuns": []
    }
  ],
  "setup": {
    "numberedLists": 0,
    "hyperlinks": []
  }
}

II) Codes:

-> 2) Find below the function that i use to generate the docx file:

const handleDownload = async (document) => {
    const { content_json, name } = document;
    console.log("content_json: ", content_json);
    console.log("name: ", name);
    const delta = JSON.parse(content_json);
    console.log("delta: ", delta);

    // Preprocess the delta to handle custom variables (converting it to plain text format)
    const preprocessedDelta = preprocessDelta(delta);
    console.log("preprocessedDelta: ", preprocessedDelta);
    // Parse the preprocessed delta to transform it into paragraph format
    const parsedQuill = parseQuillDelta(preprocessedDelta); // Using parsed delta // Utilizes the parseQuillDelta function from quilljs-parser to transform the Quill delta into a paragraph format, making it ready for conversion to DOCX.
    console.log("parsedQuill: ", parsedQuill);

    try {
      // Configuration for quill-to-word to output a Blob
      // Configuration for quill-to-word
      const quillToWordConfig = {
        exportAs: "blob", // Specify the export format
        // paragraphStyles: {
        //   // Define custom styles as needed, for example:
        //   normal: {
        //     paragraph: {
        //       indent: { left: 720 }, // Example indentation for "normal" text
        //     },
        //   },
        //   // Additional custom styles...
        // },
      };

      // Generating the Word document from the preprocessed and parsed delta
      const docAsBlob = await quillToWord.generateWord(
        parsedQuill,
        quillToWordConfig
      );

      // Using FileSaver to download the generated Word document
      saveAs(docAsBlob, `${name}.docx`);
    } catch (error) {
      console.error("Error generating or downloading the document:", error);
    }
  };

-> 3) I also treat some variables i have inside the content from a custom blot with the following function:

const preprocessDelta = (delta) => {
   // Convert custom variables to plain text or any desired format
   const newOps = delta.ops.map((op) => {
     if (
       op.insert &&
       typeof op.insert === "object" &&
       op.insert["template-variable"]
     ) {
       const variableData = JSON.parse(op.insert["template-variable"]);
       // Replace or modify the op as needed
       return {
         insert: variableData.content || `{{${variableData.name}}}`,
       };
     }
     return op;
   });

   return { ...delta, ops: newOps };
 };

Thanks in advance!

0

There are 0 answers