gintervals
A library for merging overlapping intervals with differentiable content. The primary use case is transforming raw rich text data acquired from Draft.js into discrete segments.
Usage
Add gintervals to your project by using:
npm install --save gintervalsExamples
Consider the following string of text:
const text = "The last word is bold-italic-underlined";This text can be decorated using overlapping intervals:
const inlineStyleRanges = [
{ offset: 17, length: 22, style: "BOLD" },
{ offset: 22, length: 17, style: "ITALIC" },
{ offset: 29, length: 10, style: "UNDERLINE" }
];With this set of inline styles the expected rendering is:
To transform the text string above into an array of segments with the
corresponding styling metadata, gintervals can be used as follows:
const gintervals = require("gintervals");
const text = "The last word is bold-italic-underlined";
const inlineStyleRanges = [
{ offset: 17, length: 22, style: "BOLD" },
{ offset: 22, length: 17, style: "ITALIC" },
{ offset: 29, length: 10, style: "UNDERLINE" }
];
// map to input format
const data = inlineStyleRanges.map((x) => ({
start: x.offset,
end: x.offset + x.length - 1,
content: x.style
}));
const filled = gintervals.fillGaps({
intervals: data,
start: 0,
end: text.length - 1
});
console.log(filled);
// [
// { start: 0, end: 16, content: null },
// { start: 17, end: 38, content: 'BOLD' },
// { start: 22, end: 38, content: 'ITALIC' },
// { start: 29, end: 38, content: 'UNDERLINE' }
// ]
const intervals = gintervals.merge(filled);
console.log(intervals);
// [
// { start: 0, end: 16, contentList: [] },
// { start: 17, end: 21, contentList: [ 'BOLD' ] },
// { start: 22, end: 28, contentList: [ 'BOLD', 'ITALIC' ] },
// {
// start: 29,
// end: 38,
// contentList: [ 'BOLD', 'ITALIC', 'UNDERLINE' ]
// }
// ]
const decorated = gintervals.decorateText({ intervals, text });
console.log(decorated);
// [
// { text: 'The last word is ', contentList: [] },
// { text: 'bold-', contentList: [ 'BOLD' ] },
// { text: 'italic-', contentList: [ 'BOLD', 'ITALIC' ] },
// {
// text: 'underlined',
// contentList: [ 'BOLD', 'ITALIC', 'UNDERLINE' ]
// }
// ]Finally once the decorated text array is obtained, each segment can be rendered independently inline.
Contributing
Please feel free to reach out to the author of this package for any and all feedback.
License
Copyright (c) 2022, Justin Cartwright
References
- Draft.js: https://draftjs.org/