CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-notion-types

TypeScript types for core Notion data structures.

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

formatting.mddocs/

Text Formatting

Rich text decoration system with support for bold, italic, links, colors, mentions, and other formatting options. Includes complete type definitions for all decoration formats.

Capabilities

Color System

/**
 * 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';

Basic Text Formatting

/**
 * 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];

Link and Reference Formatting

/**
 * 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];

Special Content Formatting

/**
 * Inline equation formatting
 */
type InlineEquationFormat = ['e', string];

/**
 * Discussion/comment formatting
 */
type DiscussionFormat = ['m', string];

/**
 * Suggestion edit formatting
 */
type SuggestionEditFormat = ['si', string];

Number Formatting

/**
 * 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 Formatting

/**
 * 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];

Decoration System

/**
 * 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

docs

api.md

blocks.md

collection-views.md

collections.md

formatting.md

formulas.md

index.md

users.md

tile.json