TypeScript types for core Notion data structures.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Rich text decoration system with support for bold, italic, links, colors, mentions, and other formatting options. Includes complete type definitions for all decoration formats.
/**
* Notion color palette for text and backgrounds
*/
type Color =
// Text colors
| 'gray'
| 'brown'
| 'orange'
| 'yellow'
| 'teal'
| 'blue'
| 'purple'
| 'pink'
| 'red'
// Background colors
| 'gray_background'
| 'brown_background'
| 'orange_background'
| 'yellow_background'
| 'teal_background'
| 'blue_background'
| 'purple_background'
| 'pink_background'
| 'red_background';/**
* Bold text formatting
*/
type BoldFormat = ['b'];
/**
* Italic text formatting
*/
type ItalicFormat = ['i'];
/**
* Strikethrough text formatting
*/
type StrikeFormat = ['s'];
/**
* Inline code formatting
*/
type CodeFormat = ['c'];
/**
* Underlined text formatting
*/
type UnderlineFormat = ['_'];
/**
* Text color formatting
*/
type ColorFormat = ['h', Color];/**
* Hyperlink formatting
*/
type LinkFormat = ['a', string];
/**
* User mention formatting
*/
type UserFormat = ['u', string];
/**
* Page link formatting
*/
type PageFormat = ['p', string];
/**
* External link formatting
*/
type ExternalLinkFormat = ['‣', [string, string]];
/**
* Link mention formatting
*/
type LinkMentionFormat = ['lm', string];
/**
* External object formatting
*/
type ExternalObjectInstanceFormat = ['eoi', string];/**
* Inline equation formatting
*/
type InlineEquationFormat = ['e', string];
/**
* Discussion/comment formatting
*/
type DiscussionFormat = ['m', string];
/**
* Suggestion edit formatting
*/
type SuggestionEditFormat = ['si', string];/**
* Number display format options
*/
type NumberFormat =
| 'number_with_commas'
| 'percent'
| 'dollar'
| 'euro'
| 'pound'
| 'yen'
| 'ruble'
| 'rupee'
| 'won'
| 'yuan'
| 'real'
| 'lira'
| 'rupiah'
| 'franc'
| 'hong_kong_dollar'
| 'new_zealand_dollar'
| 'krona'
| 'norwegian_krone'
| 'mexican_peso'
| 'rand'
| 'new_taiwan_dollar'
| 'danish_krone'
| 'zloty'
| 'baht'
| 'forno'
| 'koruna'
| 'shekel'
| 'chilean_peso'
| 'philippine_peso'
| 'dirham'
| 'colombian_peso'
| 'riyal'
| 'ringgit'
| 'leu'
| 'argentine_peso'
| 'uruguayan_peso'
| 'singapore_dollar';/**
* Date/time representation
*/
interface FormattedDate {
/** Date type */
type: 'date' | 'daterange' | 'datetime' | 'datetimerange';
/** ISO date string */
start_date: string;
/** Optional start time */
start_time?: string;
/** Optional end date (for ranges) */
end_date?: string;
/** Optional end time (for ranges) */
end_time?: string;
/** Date format preference */
date_format?: string;
/** Timezone identifier */
time_zone?: string;
}
/**
* Date mention formatting
*/
type DateFormat = ['d', FormattedDate];/**
* Union of all decoration format types
*/
type SubDecoration =
| BoldFormat
| ItalicFormat
| StrikeFormat
| CodeFormat
| UnderlineFormat
| LinkFormat
| ColorFormat
| DateFormat
| UserFormat
| InlineEquationFormat
| PageFormat
| ExternalLinkFormat
| DiscussionFormat
| ExternalObjectInstanceFormat
| LinkMentionFormat
| SuggestionEditFormat;
/**
* Basic text without formatting
*/
type BaseDecoration = [string];
/**
* Text with formatting
*/
type AdditionalDecoration = [string, SubDecoration[]];
/**
* Complete decoration type
*/
type Decoration = BaseDecoration | AdditionalDecoration;Usage Examples:
import {
Decoration,
Color,
FormattedDate,
SubDecoration,
BoldFormat,
LinkFormat,
ColorFormat
} from "notion-types";
// Create simple text
const plainText: Decoration = ["Hello, world!"];
// Create bold text
const boldText: Decoration = ["Bold text", [['b']]];
// Create text with multiple formatting
const fancyText: Decoration = [
"This is bold, italic, and colored text",
[
['b'], // Bold
['i'], // Italic
['h', 'blue'] // Blue color
]
];
// Create link with formatting
const styledLink: Decoration = [
"Visit our website",
[
['a', 'https://example.com'], // Link
['b'], // Bold
['h', 'blue'] // Blue color
]
];
// Create user mention
const userMention: Decoration = [
"@john.doe",
[['u', 'user-123']]
];
// Create page reference
const pageLink: Decoration = [
"Project Overview",
[['p', 'page-456']]
];
// Create inline code
const inlineCode: Decoration = [
"console.log('hello')",
[['c']]
];
// Create date mention
const dateValue: FormattedDate = {
type: 'date',
start_date: '2024-01-15',
date_format: 'MM/DD/YYYY'
};
const dateMention: Decoration = [
"January 15, 2024",
[['d', dateValue]]
];
// Create date range
const dateRange: FormattedDate = {
type: 'daterange',
start_date: '2024-01-15',
end_date: '2024-01-20',
date_format: 'MM/DD/YYYY'
};
const dateRangeMention: Decoration = [
"Jan 15-20, 2024",
[['d', dateRange]]
];
// Complex formatting with multiple decorations
const complexText: Decoration = [
"Check out the new feature",
[
['b'], // Bold
['a', 'https://example.com/new'], // Link
['h', 'purple'] // Purple color
]
];
// Helper functions for working with decorations
function isPlainText(decoration: Decoration): decoration is BaseDecoration {
return decoration.length === 1;
}
function hasFormatting(decoration: Decoration): decoration is AdditionalDecoration {
return decoration.length > 1;
}
function extractText(decoration: Decoration): string {
return decoration[0];
}
function getFormats(decoration: Decoration): SubDecoration[] {
return hasFormatting(decoration) ? decoration[1] : [];
}
function hasBold(decoration: Decoration): boolean {
if (!hasFormatting(decoration)) return false;
return decoration[1].some(format => Array.isArray(format) && format[0] === 'b');
}
function hasColor(decoration: Decoration): Color | null {
if (!hasFormatting(decoration)) return null;
const colorFormat = decoration[1].find(format => Array.isArray(format) && format[0] === 'h');
return colorFormat ? (colorFormat as ColorFormat)[1] : null;
}
function getLink(decoration: Decoration): string | null {
if (!hasFormatting(decoration)) return null;
const linkFormat = decoration[1].find(format => Array.isArray(format) && format[0] === 'a');
return linkFormat ? (linkFormat as LinkFormat)[1] : null;
}
// Build decorations programmatically
function createStyledText(text: string, options: {
bold?: boolean;
italic?: boolean;
color?: Color;
link?: string;
strikethrough?: boolean;
code?: boolean;
}): Decoration {
const formats: SubDecoration[] = [];
if (options.bold) formats.push(['b']);
if (options.italic) formats.push(['i']);
if (options.strikethrough) formats.push(['s']);
if (options.code) formats.push(['c']);
if (options.color) formats.push(['h', options.color]);
if (options.link) formats.push(['a', options.link]);
return formats.length > 0 ? [text, formats] : [text];
}
// Example usage
const styledTitle = createStyledText("Important Notice", {
bold: true,
color: 'red_background'
});
const codeSnippet = createStyledText("npm install notion-types", {
code: true,
color: 'gray_background'
});
const externalLink = createStyledText("Documentation", {
link: "https://docs.example.com",
color: 'blue',
bold: true
});
// Convert decorations to plain text
function decorationToPlainText(decorations: Decoration[]): string {
return decorations.map(decoration => extractText(decoration)).join('');
}
// Convert decorations to markdown-like format
function decorationToMarkdown(decoration: Decoration): string {
const text = extractText(decoration);
if (!hasFormatting(decoration)) return text;
let result = text;
const formats = getFormats(decoration);
const hasBold = formats.some(f => f[0] === 'b');
const hasItalic = formats.some(f => f[0] === 'i');
const hasCode = formats.some(f => f[0] === 'c');
const hasStrike = formats.some(f => f[0] === 's');
const link = formats.find(f => f[0] === 'a')?.[1];
if (hasCode) result = `\`${result}\``;
if (hasBold) result = `**${result}**`;
if (hasItalic) result = `*${result}*`;
if (hasStrike) result = `~~${result}~~`;
if (link) result = `[${result}](${link})`;
return result;
}Install with Tessl CLI
npx tessl i tessl/npm-notion-types