How to pass paragraph headings to html and back

Question

I'm trying to write a function that displays paragraph headings from inside a google document onto an HTML sidebar, and allows you to select them (using checkboxes)

After you press a button it will call a function from the Google App Script to format all of the headings in a specific way.

---

Detailed Process:

1. The user presses a refresh button to display all paragraph headings. A Google App Script function (called from HTML file) gets an array of all the headings in the document.
2. The array is passed to the HTML file, where a javascript function displays each heading in the array as a checkbox
3. The user selects some checkboxes and presses a button. A javascript function gets the # of each checkbox that is selected and for each one, gets the corresponding heading (using array)
4. Now, each heading is passed back to the Google App Script, where they are all formatted in a specific way (for example: bolded).

---

The issue: passing an array of paragraph headings to an HTML file doesn't work since paragraph headings are a feature of google app scripts, so all of the headings return empty when they are passed back to the Google App Script.

Is there a way to get around this?

---

Things I've Tried:

1. Making the array of headings a global variable in GAS (google app script) and doing everything inside the app script
   • Doesn't work: global variables in GAS are static so every time the user refreshes the headings or changes something in the doc, this wouldn't work anymore.
2. Using PropertiesService instead of a global function
   • Doesn't work: only takes strings as input so I can't input paragraph headings that need to be formatted inside the document :(

---

Minimal Reproducible Example:

Javascript (in HTML file):

google.script.run.withSuccessHandler(paragraphHeadingTest).getParagraphHeadings();
function paragraphHeadingTest(paragraphHeadings) {
  google.script.run.logOutput(paragraphHeadings);
}

Google App Script Code:

function getParagraphHeadings() {
  var document = DocumentApp.getActiveDocument().getBody();
  var paragraphs = document.getParagraphs();
  return paragraphs;
}

function logOutput(output) {
  Logger.log(output);
}

Answer 1

I understood your issue as follows.

• The issue: passing an array of paragraph headings to an HTML file doesn't work since paragraph headings are a feature of google app scripts, so all of the headings return empty when they are passed back to the Google App Script.
• For example, if I want to underline it, I would need to do element.editAsText.setUnderline(true);.

Modification points:

• I think that the reason of your issue is that getParagraphs() returns the object of Class Paragraph.
  • In order to send it to Javascript side, how about sending the string type?
• When you want to retrieve the header of the paragraph, it is required to check whether the paragraph is the header. When your script is modified, how about the following modification?
• At the identification of the paragraph, the index of the paragraph is used.

Modified script:

In this modification, getParagraphHeadings() of Google Apps Script side is modified.

Google Apps Script side:

From

function getParagraphHeadings() {
  var document = DocumentApp.getActiveDocument().getBody();
  var paragraphs = document.getParagraphs();
  return paragraphs;
}

function logOutput(output) {
  Logger.log(output);
}

To:

function getParagraphHeadings() {
  var document = DocumentApp.getActiveDocument().getBody();
  var paragraphs = document.getParagraphs();
  return paragraphs.reduce((ar, e, i) => {
    if (e.getHeading() == DocumentApp.ParagraphHeading.HEADING1) ar.push({text: e.getText(), index: i});
    return ar;
  }, []);
}

function logOutput(index) {
  var document = DocumentApp.getActiveDocument().getBody();
  var paragraph = document.getParagraphs()[index];
  paragraph.editAsText().setUnderline(true);
}

HTML&Javascript side:

From:

google.script.run.withSuccessHandler(paragraphHeadingTest).getParagraphHeadings();
function paragraphHeadingTest(paragraphHeadings) {
  google.script.run.logOutput(paragraphHeadings);
}

To:

google.script.run.withSuccessHandler(paragraphHeadingTest).getParagraphHeadings();
function paragraphHeadingTest(paragraphHeadings) {

  // do something

  const index = 5; // For example, when the index of 5 is selected, the index is sent to Google Apps Script.
  google.script.run.logOutput(index);
}

• In this modification, the paragraph which has HEADING1 is retrieved as the text type. If you want to other header like HEADING2, HEADING3,,,, please modify the script.
• getParagraphHeadings() returns the object like [{"text":"sample text1","index":1},{"text":"sample text2","index":5},,,]. When the index of paragraph is sent from HTML side to Google Apps Script, the paragraph can be retrieved using the index.

References:

• getParagraphs()
• getHeading()