How do I set Docs attributes from a Google add-on sidebar?

I am trying to create an add-on for Docs that will allow my students to highlight selections of a text using certain pre-defined highlighter tools in the add-on sidebar (similar to this add-on, but with predefined highlighter tools).

I've been able to use Google scripts to interact with my drive files, create folders, rename files, etc., and I know how to use .onclick functions within HTML. Where I am stuck is getting the buttons in my sidebar to change the attributes of selected text within the doc when the button is clicked.

Based on my reading in the Developers documentation, my .gs script looks like this:

 function highlightStyleGreen() {
      var selection = DocumentApp.getActiveDocument().getSelection();
      if (selection) {
        var elements = selection.getRangeElements();
        for (var i = 0; i < elements.length; i++) {
        var element = elements[i];}
        var highlightStyleGreen = {};
         highlightStyle[DocumentApp.Attribute.BACKGROUND_COLOR] =    '#7CCD7C';

       selection.setAttributes(highlightStyleGreen);
      }
    }

In the HTML, the button is assigned like this:

< button onclick="highlightStyleGreen()">Main Idea < /button>

Clearly this isn't working, but I'm not sure what to try next.

Help?

Solution

if you are calling a google-apps-script function (including custom functions) from a custom dialog or sidebar, the syntax is:

<button onclick="google.script.run.highlightStyleGreen()">Main Idea</button>

documentation: https://developers.google.com/apps-script/guides/html/communication

And here is the google-apps-script code. This function will highlight the user's selection in green.

function highlightStyleGreen() {

  //App>Doc>Body>Paragraph>Text
  //selection>rangeElements>RangeElement>Element>Text

  var selection = DocumentApp.getActiveDocument().getSelection();
  if (selection) {

    //declare variables once before loop
    var elements = selection.getRangeElements();    
    var rngEelement;
    var element;
    var text;
    var startOffset;
    var endOffsetInclusive;

    //loop through selection
    for (var i=0; i < elements.length; i++){
      rngElement = elements[i];
      element = rngElement.getElement();
      if (element) {
        text = element.asText();  
        if (text) {
          //if we are on a 'partial element' we need to only grab the selected part of the text
          if (rngElement.isPartial()) {
            startOffset = rngElement.getStartOffset();
            endOffsetInclusive = rngElement.getEndOffsetInclusive();
            text.setBackgroundColor(startOffset, endOffsetInclusive, '#00FF00');
          } else {
            text.setBackgroundColor('#00FF00');
          }
        }
      }
    }
  }
}

documentation: https://developers.google.com/apps-script/guides/docs