Not able to add styled text with OOXML

Question

I am creating an office add-in for Word and i am trying to create custom styles for users to style their texts with. I came accross this example of a styled text and went to try it myself.

Here is the gist code: https://gist.github.com/thomas-idgis/286cd1526b2fbf5bf7359b0dd54464ac

The text that it creates when clicked on run should be styled but it isn't styled, which is the problem cause i want it to be styled as it should be styled from the OOXML code and i can't figure out why it's wrong.

I couldn't get it working, is the example wrong or is my code the problem?

// Create a proxy object for the document body.
    var body = context.document.body;

    // Queue a command to insert OOXML in to the beginning of the body.
    body.insertOoxml(
      `<pkg:package xmlns:pkg="http://schemas.microsoft.com/office/2006/xmlPackage">
      <pkg:part pkg:name="/_rels/.rels" pkg:contentType="application/vnd.openxmlformats-package.relationships+xml" pkg:padding="512">
        <pkg:xmlData>
          <Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
            <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/>
          </Relationships>
        </pkg:xmlData>
      </pkg:part>
      <pkg:part pkg:name="/word/_rels/document.xml.rels" pkg:contentType="application/vnd.openxmlformats-package.relationships+xml" pkg:padding="256">
        <pkg:xmlData>
          <Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
            <Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/>
          </Relationships>
        </pkg:xmlData>
      </pkg:part>
      <pkg:part pkg:name="/word/document.xml" pkg:contentType="application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml">
        <pkg:xmlData>
          <w:document xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
            <w:body>
              <w:p>
                <w:pPr>
                  <w:pStyle w:val="TestParagraphStyle"/>
                </w:pPr>
                <w:r>
                  <w:t xml:space="preserve">This text should be styled</w:t>
                </w:r>
              </w:p>
            </w:body>
          </w:document>
        </pkg:xmlData>
      </pkg:part>
      <pkg:part pkg:name="/word/styles.xml" pkg:contentType="application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml">
        <pkg:xmlData>
          <w:styles xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main" >
            <w:style w:type="paragraph" w:styleId="TestParagraphStyle">
              <w:name w:val="Test Paragraph Style"/>
              <w:pPr>
                <w:spacing w:line="480" w:lineRule="auto"/>
                <w:ind w:firstLine="1440"/>
              </w:pPr>
              <w:rPr>
                <w:rFonts w:ascii="Courier New" w:hAnsi="Courier New"/>
                <w:color w:val="FFF200"/>
                <w:sz w:val="40"/>
              </w:rPr>
            </w:style>
          </w:styles>
        </pkg:xmlData>
      </pkg:part>
     </pkg:package>
    `,
      Word.InsertLocation.start
    );

    // Synchronize the document state by executing the queued commands,
    // and return a promise to indicate task completion.
    return context.sync().then(function () {
      console.log('OOXML added to the beginning of the document body.');
    });

Answer 1

We dont have an API to create new styles in Word.js, thats a gap. However there are a couple of ways to achieve this.

1. Via insertFileFromBase64 API (inserting a document with all the custom styles you need)
2. You can actually also achieve it with OOXML insertion, but more on this later. (you just need the right OOOXML for it and make sure you dont dupe any existing style names (default ones or custom currently present in the doc)

On this answer I want to show the first method :)

Here are the basic steps.

1. Create a Word document and add all the custom styles you need. Super important make sure that in this test document you are using ALL the styles, just add some text with each style.
2. Save the document as docx we will use it later.
3. Now open a new document and load this script lab snippet.(choose the insert document option)
4. Click on the button, you will be asked to insert a file, just choose to insert the file you created on the previous step (with all the used styles)
5. Voila! you should have all the styles you need.

what happens on that snippet? the important instruction is this one:

context.document.body.insertFileFromBase64(mybase64, "end").getRange().clear();

that line of code is actually inserting the file and then clearing the inserted content by getting the range from the insertion and erasing it. BUT the styles are persisted in the document! Now you can use them :)

Evidently:

1. you dont need to pop the dialog to insert this document you your need to encode the doc as base64 and send the base-64 encoded string.
2. If you want to do the same with the INsertOOXML method, then you need to save the doc as OOXML instead of docx and its should also work.
3. Finally, again make sure you dont use existing names as this will cause a collision of styles and the originals will be used.

Hope this helps.