All files index.ts

100% Statements 25/25
100% Branches 4/4
100% Functions 8/8
100% Lines 25/25

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80  1x 1x 1x   1x 1x 1x 1x 1x                                     1x 1x 7x   1x       1x         1x           1x 8x   1x 2x     2x 2x   2x               1x 8x                 1x     1x  
import { MarkdownIt } from "markdown-it";
import { TypographySize } from "@microsoft/fast-components-react-base";
import { HeadingSize, HeadingTag } from "@microsoft/fast-components-react-msft";
import CreateRule from "./rule";
 
enum ComponentType {
    heading = "heading",
    hyperlink = "hyperlink",
    list = "list",
    paragraph = "paragraph",
}
 
export interface Tokens<T> extends Array<T> {
    [idx: number]: T;
}
 
export interface Token {
    children: Tokens<Token>;
    tag: string;
    content: string;
    info: string;
    type: string;
    attrs: string[][];
    attrPush: (attributes: string[]) => void;
}
 
class FastMarkdownIt {
    constructor(md: MarkdownIt) {
        md.core.ruler.push("fast", new CreateRule(md) as any);
        md.renderer.rules.paragraph_open = function (): string {
            return `<Typography size={${TypographySize._7}}>`;
        };
        md.renderer.rules.heading_open = function (
            tokens: Tokens<Token>,
            idx: number
        ): string {
            const id: string = tokens[idx + 1].children[0].content
                .toLowerCase()
                .replace(/\s/g, "-")
                .replace(/[^a-z\-]/g, "");
 
            return `<Heading id="${id}" tag="${HeadingTag[tokens[idx].tag]}" size={${
                HeadingSize[
                    "_" + (parseInt(tokens[idx].tag.charAt(1), 10) + 2).toString()
                ]
            }}>`;
        };
        md.renderer.rules.text = (tokens: Tokens<Token>, idx: number): string => {
            return this.replaceSpecialCharacters(tokens[idx].content);
        };
        md.renderer.rules.fence = function (tokens: Tokens<Token>, idx: number): string {
            let codeSnippet: string = `<pre${
                tokens[idx].info ? ` className="language-${tokens[idx].info}"` : ""
            }><code>`;
            codeSnippet += `{${JSON.stringify(tokens[idx].content, null, 2)}}`;
            codeSnippet += `</code></pre>`;
 
            return codeSnippet;
        };
    }
 
    /**
     * Due to special characters such as {, }, < and > being interpreted by React
     * as meaningful characters, these are replaced with the HTML code versions
     */
    private replaceSpecialCharacters = (content: string): string => {
        return content
            .replace(/{/g, "&#123;")
            .replace(/}/g, "&#125;")
            .replace(/</g, "&#60;")
            .replace(/>/g, "&#62;");
    };
}
 
function plugin(md: MarkdownIt): void {
    const fastMarkdownIt: FastMarkdownIt = new FastMarkdownIt(md);
}
 
export default plugin;