textstyler

Introduction

Apply text styling to substrings (represented by character index ranges)

I mostly built this library to handle text match results returned by the GitHub Search API

{
    "fragment": " without crashing', () => {\n  const div = document.createElement('div');\n  ReactDOM.render(<App />, div);\n});\n",
    "matches": [
        {
            "text": "React",
            "indices": [
                75,
                80
            ]
        }
    ]
}

so that I can format the matching fragment like

Install

npm install textstyler --save

API

Text Style Options

Pretty much a 1-to-1 mapping with the colors package

TextColors:

• BLACK
• RED
• GREEN
• YELLOW
• BLUE
• MAGENTA
• CYAN
• WHITE
• GRAY
• GREY

BackgroundColors:

• BLACK
• RED
• GREEN
• YELLOW
• BLUE
• MAGENTA
• CYAN
• WHITE

TextFormat:

• RESET
• BOLD
• DIM
• ITALIC
• UNDERLINE
• INVERSE
• HIDDEN
• STRIKETHROUGH

Style

• TextStyler.style(text, styledSubstrings)
  • text is a string to apply formatting to
  • styledSubstrings are an array of StyledRange objects
    • A StyledRange takes
      • A Range
        • Takes a start and an end parameter
        • These are numbers that represent the inclusive character indices to apply a particular TextStyle to
      • A TextStyle
        • Takes a color, backgroundColor, and format parameter
        • color represents the text color
        • backgroundColor represents the text background color
        • format represents some text format (like bold text)
    • StyledRanges are applied in order - text styles are merged based on the last text style

Example

import { Range, TextStyler, StyledRange, TextStyle, TextColor, TextFormat, BackgroundColor } from 'textstyler';
 
const value = 'foobar';
const range = new Range(1, 3);
const anotherRange = new Range(2, 4);
 
const style = new TextStyle(TextColor.CYAN, BackgroundColor.WHITE, TextFormat.ITALIC);
const anotherStyle = new TextStyle(TextColor.RED, BackgroundColor.BLUE, TextFormat.BOLD);
 
const styledRange = new StyledRange(range, style);
const anotherStyledRange = new StyledRange(anotherRange, anotherStyle);
 
const styledText = TextStyler.style(value, [ styledRange, anotherStyledRange ]);

The above example should output