Skip to content

jaebradley/textstyler

Repository files navigation

textstyler

Build Status npm npm_downloads GitHub release

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 alt-text

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

alt-ext