Creating Rainbow Text in Google Docs

Question

var selectedElements = selection.getSelectedElements();
for (var i = 0; i < selectedElements.length; ++i) {
var selectedElement = selectedElements[i];

// Only modify elements that can be edited as text; skip images and other
// non-text elements.
var text = selectedElement.getElement().editAsText();

// Change the background color of the selected part of the element, or the
// full element if it's completely selected.
if (selectedElement.isPartial()) {
  text.setColor(selectedElement.getStartOffset(),
      selectedElement.getEndOffsetInclusive(), '#69359c');
    }
  }
}

The above text takes a selection inside of a Google Doc and changes it to the hex code #69359c (a dark purple). I have searched many websites, many gits, and asked many friends for help with my project.

My end project is this:

1. Create a menu for Google Docs with my selector (DONE)
2. Be able to highlight a certain amount of text and change it to an array of colors (ROY G. BIV / the rainbow).
3. Have the format be only for Google Documents.

If anyone can help me it would be highly appreciated.

Answer 1

You are pretty close to the answer already. Try iterating over the elements within your 'text' variable, so you can change the background on each one.

You could use something like this to iterate over each letter:

var letters =  elementText.getText();
for(var j = 0 ; j< letters.length-1; j++)
{
     elementText.setBackgroundColor(j, j+1, getRandomColor())
}

Here is a sample of a function to use different colors:

function getRandomColor() {
   var letters = '0123456789ABCDEF'.split('');
   var color = '#';
   for (var i = 0; i < 6; i++ ) 
   {
       color += letters[Math.floor(Math.random() * 16)];
   }
   return color;
}

For your last question, since the Text class is not part of Javascript, but from app-script library, this will not work outside Google environment.

Answer 2

I just found this question and am happy to provide some working code from my Rainbow Font Google Docs add-on (Magic Rainbow Unicorns).

The first problem is that you need to set the foreground color on the text, and the second is that the code above only allows for partial paragraph selections.

For whole selections use this code:

var elementText = element.editAsText();
if (elementText) {
  var paragraph = elementText.getText();
  for (var j = 0; j < paragraph.length; j++) {
    elementText.setForegroundColor(j, j, getNextRainbowColour(...));
  }
}

For partial selections, I used this:

var elementText = element.asText();
var startIndex = element.getStartOffset();
var endIndex = elements.getEndOffsetInclusive();
for (var j = startIndex; j < endIndex+1; j++) {
  elementText.setForegroundColor(j, j, getNextRainbowColour(...));
}