JSPM

notion-rehype-k

1.1.6
    • ESM via JSPM
    • ES Module Entrypoint
    • Export Map
    • Keywords
    • License
    • Repository URL
    • TypeScript Types
    • README
    • Created
    • Published
    • Downloads 938
    • Score
      100M100P100Q109266F
    • License MIT

    Turn Notion blocks(from API) into rehype(hast), so you can make the most of the rich rehype ecosystem.

    Package Exports

    • notion-rehype-k
    • notion-rehype-k/dist/index.js

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (notion-rehype-k) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    notion-rehype

    Turn Notion blocks(from API) into rehype(hast), so you can make the most of the rich rehype ecosystem.

    Usage

    import { unified } from 'unified';
    import notionRehype from 'notion-rehype';
    import rehypeKatex from 'rehype-katex';
    import rehypeStringify from 'rehype-stringify';
    
    const notionBlocks = [
      {
        // ... some properties omitted
        type: 'paragraph',
        paragraph: {
          // ... some properties omitted
          rich_text: [{ plain_text: 'This is a Notion paragraph' }],
        },
      },
    ];
    
    const processor = unified()
      .use(notionRehype) // Parse Notion blocks to rehype AST
      .use(rehypeKatex) // Then you can use any rehype plugins to enrich the AST
      .use(rehypeStringify); // Turn AST to HTML string
    
    // Due to the limitation of the `.process()` method,
    // notion blocks should be passed in with a wrapper `{ data: xxx }`;
    const vFile = unifiedInst.process({ data: notionBlocks });
    // Or you can pass a string in.
    // The plugin will use JSON.parse to parse any string argument.
    const vFile = unifiedInst.process(JSON.stringify(notionBlocks));
    
    const html = vFile.toString(); // get the output HTML string
    assert(html === '<p>This is a Notion paragraph</p>');

    Plugin Options

    The plugin offers many options to customize the output, you can set options in this way: .use(notionRehype, { ...options })

    Option Type Default Value Description
    notionPrefix string 'notion-' The prefix of the classes and attributes that relates to Notion. e.g. <section class="notion-callout"><section>, the 'notion-' is the prefix.
    enableNestedParagraph boolean false Should paragraph elements supports nesting. If true, the paragraph element which has children will turn into <div> instead of <p>, since the <p> element doesn't allow nesting. Which might leads to lower accessibility
    enableBlockId boolean false Should add block id info to DOM or not. If true, the DOMs will have a data-{prefix}-block-id attribute.
    convertRawHtml (richTextObj: any) => string | false | undefined | null undefined A function to test should a block.[type].rich_text item turn to raw HTML. If should, this function returns the raw HTML value. e.g. convertRawHtml: (richTextObj) => richTextObj.plain_text.startsWith('@@') ? richTextObj.plain_text.slice(2) : null, will render like this: Notion Block: 'TEST. @@<span>test</span>. TEST' -> Result: <p>TEST. <span>test</span>. TEST</p>
    pageReference { [pageId: string]: any } {} Used in link_to_page blocks, since the blocks don't contain page metadatas, the info should be passed in from the outside.
    footnoteReference { [blockId: string]: any } {} [NOT STABLE - this option will change anytime following Notion Comment API changes. Use it at your own rick] If a block has a 'footnote placeholder' (a rich_text item which is inline code and text is [^]), it will search for the relevant block comments, and use the comments as footnote for placeholder.
    footnoteTitle string 'Footnotes' The Footnote Title. If set to <hr>, will render a hr element rather than a h2 title.
    footnoteBackLabel string 'Back to ref' The title and aria text for a footnote's 'go back' icon.

    TODO

    • Types support
    • Unit tests
    • Engineering (ESLint, Prettier, …etc.)