flinker-markdown 1.0.0 → 1.1.1

package/README.md

@@ -1,13 +1,58 @@
 ## Intro
 __FlinkerMD__ (MD) is a TypeScript library for parsing markdown text into html.
 
-See demo:
-[](https://wiki.archlinux.org/title/Installation_guide)
 
 ## Install
 ```cli
 npm i flinker-markdown
 ```
 
+## Example 1
+```ts
+import { md, MDGrammar, MDParser } from "flinker-markdown"
+import { div, TextProps } from "flinker-dom"
+
+interface MarkdownProps extends TextProps {
+  absolutePathPrefix?: string
+  showRawText?: boolean
+}
+
+const grammar = new MDGrammar()
+const parser = new MDParser(grammar)
+export const Markdown = () => {
+  return div<MarkdownProps>()
+    .map(s => {
+      if (!s.showRawText) {
+        s.htmlText = s.text ? md(parser, s.text, s.absolutePathPrefix) : ''
+        s.text = ''
+      }
+    })
+}
+```
+
+## Example 2: Custom grammar rule
+Parsing Bash code:
+```ts
+const grammar = new MDGrammar()
+const bash = new MDLineGrammarRule()
+bash.matcher = [/^>>> /, '> '] // begin text with symbols >>> to tranform line to bash code
+bash.postProccessing = highlightBashCode // define highlight-func: (v: string) => string
+grammar.globalRule.childrenLineRules.splice(0, 0, bash)
+grammar.ol.childrenLineRules.splice(0, 0, bash) // allow lists to include bash code
+grammar.ul.childrenLineRules.splice(0, 0, bash)
+
+const parser = new MDParser(grammar)
+export const Markdown = () => {...}
+```
+
+highlightBashCode-func transforms text from e.g.:
+```html
+>>> npm run install
+```
+to the tokenized form: 
+```html
+<pre class="bashcode-dark"><code class="md-dark"><span class="op">&gt; </span><span class="bash-cmd">npm </span><span class="bash-param">run </span><span class="bash-param">install</span></code></pre>
+```
+
 ## License
 MIT

package/dist/esm/index.js

@@ -1,3 +1 @@
-export { StyleSheetProcessor, PseudoClass } from "./processor";
-export { buildClassName, buildRule } from "./core";
-export { UIComponent, vstack, vstackMapper, hstack, hstackMapper, Text, div, p, span, h1, h2, h3, h4, h5, h6, Button, btn, LinkBtn, link, switcher, observer, List, vlist, hlist, spacer, Image, image, Input, input, textarea } from "./components";
+export { md, MDInlineGrammarRule, MDLineGrammarRule, MDMultilineGrammarRule, GlobalGrammarRule, MDGrammar, MDParser } from "./md";

package/dist/esm/md.js

@@ -0,0 +1,256 @@
+export class MDInlineGrammarRule {
+    constructor() {
+        this.matcher = [new RegExp(''), ''];
+        this.childrenInlineRules = [];
+    }
+}
+export class MDLineGrammarRule {
+    constructor() {
+        this.matcher = [new RegExp(''), ''];
+        this.childrenInlineRules = [];
+    }
+}
+export class GlobalGrammarRule {
+    constructor() {
+        this.childrenMultilineRules = [];
+        this.childrenLineRules = [];
+        this.childrenInlineRules = [];
+    }
+}
+export class MDMultilineGrammarRule {
+    constructor() {
+        this.startMatcher = [new RegExp(''), ''];
+        this.endMatcher = [new RegExp(''), ''];
+        this.childrenMultilineRules = [];
+        this.childrenLineRules = [];
+        this.childrenInlineRules = [];
+    }
+}
+export class MDGrammar {
+    constructor() {
+        this.globalRule = new GlobalGrammarRule();
+        const defLinePreproccessing = (v) => {
+            let res = v;
+            res = res.replace(/</g, '&lt;');
+            //character escaping
+            res = res.replace(/\\`/gm, '&#x60;');
+            res = res.replace(/\\#/gm, '&#x23;');
+            res = res.replace(/\\_/g, '&#x5f;');
+            return res;
+        };
+        // 
+        // INLINE GRAMMAR RULES
+        //
+        this.sup = new MDInlineGrammarRule();
+        this.sup.matcher = [/\^\{([^}]+)\}/g, '<sup>$1</sup>'];
+        this.sub = new MDInlineGrammarRule();
+        this.sub.matcher = [/_\{([^}]+)\}/g, '<sub>$1</sub>'];
+        this.strong = new MDInlineGrammarRule();
+        this.strong.matcher = [/\*([^*]+)\*/g, '<strong>$1</strong>'];
+        this.boldItalic = new MDInlineGrammarRule();
+        this.boldItalic.matcher = [/_{3,}([^_]+)_{3,}/g, '<b><i>$1</i></b>'];
+        this.bold = new MDInlineGrammarRule();
+        this.bold.matcher = [/_{2,}([^_]+)_{2,}/g, '<b>$1</b>'];
+        this.italic = new MDInlineGrammarRule();
+        this.italic.matcher = [/_([^_]+)_/g, '<i>$1</i>'];
+        this.em = new MDInlineGrammarRule();
+        this.em.matcher = [/`([^`]+)`/g, '<em>$1</em>'];
+        this.em.childrenInlineRules = [this.strong, this.bold, this.italic];
+        this.code = new MDInlineGrammarRule();
+        this.code.matcher = [/``([^`]+)``/g, '<code>$1</code>'];
+        this.figure = new MDInlineGrammarRule();
+        this.figure.matcher = [/!\[([^\]]+)\]\(([^)]+)\)\(([^)]+)\)/gm, '<figure><img alt="$1" src="$2"/><figcaption>$3</figcaption></figure>'];
+        this.img = new MDInlineGrammarRule();
+        this.img.matcher = [/!\[([^\]]+)\]\(([^)]+)\)/gm, '<img alt="$1" src="$2"/>'];
+        this.link = new MDInlineGrammarRule();
+        this.link.matcher = [/\[([^\]]*)\]\(([^)]+)\)/, (line, descr, url) => {
+                return '<a href="' + url + '">' + (descr || url) + '</a>';
+            }];
+        this.globalRule.childrenInlineRules = [this.code, this.figure, this.img, this.link, this.sub, this.sup, this.strong, this.boldItalic, this.bold, this.em, this.italic];
+        // 
+        // LINE GRAMMAR RULES
+        //
+        this.header = new MDLineGrammarRule();
+        this.header.matcher = [/^\$?(#{1,6}) (.*)$/, (line, signs, header) => {
+                const count = signs.length;
+                return '<h' + count + '>' + header + '</h' + count + '>';
+            }];
+        this.header.childrenInlineRules = [this.strong, this.boldItalic, this.bold, this.italic];
+        this.header.preProccessing = defLinePreproccessing;
+        this.quote = new MDLineGrammarRule();
+        this.quote.matcher = [/^> (.*)$/, '<blockquote><p>$1</p></blockquote>'];
+        this.quote.childrenInlineRules = this.globalRule.childrenInlineRules;
+        this.quote.preProccessing = defLinePreproccessing;
+        this.alignRight = new MDLineGrammarRule();
+        this.alignRight.matcher = [/^==> (.*)$/, '<div class="md-right">$1</div>'];
+        this.alignRight.childrenInlineRules = this.globalRule.childrenInlineRules;
+        this.alignRight.preProccessing = defLinePreproccessing;
+        this.alignCenter = new MDLineGrammarRule();
+        this.alignCenter.matcher = [/^=> (.*)$/, '<div class="md-center">$1</div>'];
+        this.alignCenter.childrenInlineRules = this.globalRule.childrenInlineRules;
+        this.alignCenter.preProccessing = defLinePreproccessing;
+        this.stars = new MDLineGrammarRule();
+        this.stars.matcher = [/^(\*{3,})/, '<p class="md-delim">$1</p>'];
+        this.p = new MDLineGrammarRule();
+        this.p.matcher = [/^(.*)$/, '<p>$1</p>'];
+        this.p.childrenInlineRules = this.globalRule.childrenInlineRules;
+        this.p.preProccessing = defLinePreproccessing;
+        this.br = new MDLineGrammarRule();
+        this.br.matcher = [/^\n$/, '<br/>'];
+        this.oli = new MDLineGrammarRule();
+        this.oli.matcher = [/^\d+\. (.*)$/, '<li>$1</li>'];
+        this.oli.childrenInlineRules = this.globalRule.childrenInlineRules;
+        this.oli.preProccessing = defLinePreproccessing;
+        this.uli = new MDLineGrammarRule();
+        this.uli.matcher = [/^\+ (.*)$/, '<li>$1</li>'];
+        this.uli.childrenInlineRules = this.globalRule.childrenInlineRules;
+        this.uli.preProccessing = defLinePreproccessing;
+        this.globalRule.childrenLineRules = [this.header, this.quote, this.alignCenter, this.alignRight, this.stars, this.br, this.p];
+        //
+        // MULTILINE GRAMMAR RULES
+        //
+        this.ol = new MDMultilineGrammarRule();
+        this.ul = new MDMultilineGrammarRule();
+        this.ol.startMatcher = [/^```ol *$/, '<ol>'];
+        this.ol.endMatcher = [/^``` *$/, '</ol>'];
+        this.ol.childrenLineRules = [this.oli, this.br, this.p];
+        this.ol.childrenInlineRules = this.globalRule.childrenInlineRules;
+        this.ol.childrenMultilineRules = [this.ol, this.ul];
+        this.ul.startMatcher = [/^```ul *$/, '<ul>'];
+        this.ul.endMatcher = [/^``` *$/, '</ul>'];
+        this.ul.childrenLineRules = [this.uli, this.br, this.p];
+        this.ul.childrenInlineRules = this.globalRule.childrenInlineRules;
+        this.ul.childrenMultilineRules = [this.ol, this.ul];
+        this.table = new MDMultilineGrammarRule();
+        this.table.startMatcher = [/^```tbl *$/, '<table>'];
+        this.table.endMatcher = [/^``` *$/, '</table>'];
+        const tableRow = new MDLineGrammarRule();
+        tableRow.matcher = [/^(.*)$/, (line) => {
+                return '<tr>' + line.split(/,(?! )/).map(v => '<td>' + v + '</td>').join('') + '</tr>';
+            }];
+        tableRow.childrenInlineRules = this.globalRule.childrenInlineRules;
+        tableRow.preProccessing = defLinePreproccessing;
+        this.table.childrenLineRules = [tableRow];
+        this.div = new MDMultilineGrammarRule();
+        this.div.startMatcher = [/^```([a-zA-Z]+) */, '<div class="$1"><div>'];
+        this.div.endMatcher = [/^``` *$/, '</div></div>'];
+        this.div.childrenInlineRules = this.globalRule.childrenInlineRules;
+        this.div.childrenLineRules = [this.quote, this.alignCenter, this.alignRight, this.br, this.p];
+        this.div.childrenMultilineRules = [this.div];
+        this.globalRule.childrenMultilineRules = [this.ol, this.ul, this.table, this.div];
+    }
+}
+class MDParserContext {
+    constructor(text) {
+        this._rowIndex = -1;
+        this.rows = text.split('\n');
+    }
+    nextRow() {
+        this._rowIndex++;
+        return this._rowIndex < this.rows.length ? this.rows[this._rowIndex] : undefined;
+    }
+}
+export class MDParser {
+    constructor(grammar) {
+        this.globalRule = grammar.globalRule;
+    }
+    run(text) {
+        const ctx = new MDParserContext(text);
+        return this.parseMultiline(ctx, this.globalRule);
+    }
+    parseMultiline(ctx, rule) {
+        let res = '';
+        let exactlyMatched = false;
+        while (true) {
+            let row = ctx.nextRow();
+            if (row === undefined)
+                break;
+            if (!row)
+                row = '\n';
+            exactlyMatched = false;
+            if (!(rule instanceof GlobalGrammarRule) && row.match(rule.endMatcher[0])) {
+                res += row.replace(rule.endMatcher[0], rule.endMatcher[1]);
+                break;
+            }
+            for (let i = 0; i < rule.childrenMultilineRules.length; i++) {
+                const r = rule.childrenMultilineRules[i];
+                if (row.match(r.startMatcher[0])) {
+                    exactlyMatched = true;
+                    res += row.replace(r.startMatcher[0], r.startMatcher[1]);
+                    res += this.parseMultiline(ctx, r);
+                    break;
+                }
+            }
+            if (exactlyMatched)
+                continue;
+            for (let i = 0; i < rule.childrenLineRules.length; i++) {
+                const r = rule.childrenLineRules[i];
+                if (row.match(r.matcher[0])) {
+                    exactlyMatched = true;
+                    let line = r.preProccessing ? r.preProccessing(row) : row;
+                    line = line.replace(r.matcher[0], r.matcher[1]);
+                    line = this.parseLine(line, r.childrenInlineRules);
+                    if (r.postProccessing)
+                        line = r.postProccessing(line);
+                    res += line;
+                    break;
+                }
+            }
+            if (exactlyMatched)
+                continue;
+            console.warn('Line is not handled by any rule, line: <', row, '>', 'parent rule:', rule);
+            res += this.parseLine(row, rule.childrenInlineRules);
+        }
+        if (rule.postProccessing)
+            res = rule.postProccessing(res);
+        return res;
+    }
+    parseLine(text, inlineRules) {
+        if (!text || inlineRules.length === 0)
+            return text;
+        if (inlineRules.length === 1) {
+            return text.replace(inlineRules[0].matcher[0], inlineRules[0].matcher[1]);
+        }
+        const buffer = [];
+        let rules = [...inlineRules];
+        let value = text;
+        while (value) {
+            const candidateRules = [];
+            let matchedRule;
+            let matchedRuleMinSearchIndex = value.length;
+            for (let i = 0; i < rules.length; i++) {
+                const r = rules[i];
+                const si = value.search(r.matcher[0]);
+                if (si !== -1) {
+                    candidateRules.push(r);
+                    if (si < matchedRuleMinSearchIndex) {
+                        matchedRuleMinSearchIndex = si;
+                        matchedRule = r;
+                    }
+                }
+            }
+            if (!matchedRule) {
+                buffer.push(value);
+                break;
+            }
+            buffer.push(value.substring(0, matchedRuleMinSearchIndex));
+            value = value.substring(matchedRuleMinSearchIndex);
+            let replacingSubstring = value.match(matchedRule.matcher[0])?.[0] ?? '';
+            value = value.substring(replacingSubstring.length);
+            replacingSubstring = replacingSubstring.replace(matchedRule.matcher[0], matchedRule.matcher[1]);
+            if (matchedRule.childrenInlineRules.length > 0)
+                replacingSubstring = this.parseLine(replacingSubstring, matchedRule.childrenInlineRules);
+            buffer.push(replacingSubstring);
+            rules = candidateRules;
+        }
+        return buffer.join('');
+    }
+}
+// const parser = new MDParser(new MDGrammar)
+export const md = (parser, text, absolutePathPrefix) => {
+    let res = parser.run(text);
+    // allow images and links to have a relative path
+    if (absolutePathPrefix)
+        res = res.replace(/src="((?!https?:)[^"]+)"/gm, 'src="' + absolutePathPrefix + '$1"');
+    return res;
+};

package/dist/types/index.d.ts

@@ -1,3 +1 @@
-export { StyleSheetProcessor, PseudoClassType, PseudoClass } from "./processor";
-export { RulePriority, buildClassName, buildRule, BorderStyle, PointerEventsStyle, FontWeight, UIComponentProps } from "./core";
-export { HtmlTag, AnyUIComponent, ObserveAffect, UIComponent, StackHAlign, StackVAlign, StackProps, vstack, vstackMapper, hstack, hstackMapper, TextProps, Text, div, p, span, h1, h2, h3, h4, h5, h6, ButtonProps, Button, btn, LinkProps, LinkBtn, link, SwitcherProps, switcher, observer, OnReceiver, List, vlist, hlist, SpacerProps, spacer, ImageProps, Image, image, InputType, InputMode, TurnType, InputProps, Input, input, textarea } from "./components";
+export { md, MDInlineGrammarRule, MDLineGrammarRule, MDMultilineGrammarRule, GlobalGrammarRule, MDGrammar, MDParser } from "./md";

package/dist/types/md.d.ts

@@ -0,0 +1,60 @@
+export declare class MDInlineGrammarRule {
+    matcher: [RegExp, any];
+    childrenInlineRules: MDInlineGrammarRule[];
+}
+export declare class MDLineGrammarRule {
+    matcher: [RegExp, any];
+    preProccessing?: (v: string) => string;
+    postProccessing?: (v: string) => string;
+    childrenInlineRules: MDInlineGrammarRule[];
+}
+export declare class GlobalGrammarRule {
+    postProccessing?: (v: string) => string;
+    childrenMultilineRules: MDMultilineGrammarRule[];
+    childrenLineRules: MDLineGrammarRule[];
+    childrenInlineRules: MDInlineGrammarRule[];
+}
+export declare class MDMultilineGrammarRule {
+    startMatcher: [RegExp, any];
+    endMatcher: [RegExp, any];
+    postProccessing?: (v: string) => string;
+    childrenMultilineRules: MDMultilineGrammarRule[];
+    childrenLineRules: MDLineGrammarRule[];
+    childrenInlineRules: MDInlineGrammarRule[];
+}
+export declare class MDGrammar {
+    readonly globalRule: GlobalGrammarRule;
+    readonly sup: MDInlineGrammarRule;
+    readonly sub: MDInlineGrammarRule;
+    readonly strong: MDInlineGrammarRule;
+    readonly bold: MDInlineGrammarRule;
+    readonly italic: MDInlineGrammarRule;
+    readonly boldItalic: MDInlineGrammarRule;
+    readonly em: MDInlineGrammarRule;
+    readonly code: MDInlineGrammarRule;
+    readonly figure: MDInlineGrammarRule;
+    readonly img: MDInlineGrammarRule;
+    readonly link: MDInlineGrammarRule;
+    readonly header: MDLineGrammarRule;
+    readonly quote: MDLineGrammarRule;
+    readonly alignRight: MDLineGrammarRule;
+    readonly alignCenter: MDLineGrammarRule;
+    readonly stars: MDLineGrammarRule;
+    readonly p: MDLineGrammarRule;
+    readonly br: MDLineGrammarRule;
+    readonly oli: MDLineGrammarRule;
+    readonly uli: MDLineGrammarRule;
+    readonly ol: MDMultilineGrammarRule;
+    readonly ul: MDMultilineGrammarRule;
+    readonly table: MDMultilineGrammarRule;
+    readonly div: MDMultilineGrammarRule;
+    constructor();
+}
+export declare class MDParser {
+    readonly globalRule: GlobalGrammarRule;
+    constructor(grammar: MDGrammar);
+    run(text: string): string;
+    private parseMultiline;
+    private parseLine;
+}
+export declare const md: (parser: MDParser, text: string, absolutePathPrefix?: string) => string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "flinker-markdown",
   "description": "Free TypeScript library for parsing markdown text (customisable, not standardized).",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Dittner/FlinkerMD.git"