Live Preview (#119)

Live preview mode is here

common/customtags.ts

@@ -1,5 +1,7 @@
 import { Tag } from "./deps.ts";
 
+export const CommandLinkTag = Tag.define();
+export const CommandLinkNameTag = Tag.define();
 export const WikiLinkTag = Tag.define();
 export const WikiLinkPageTag = Tag.define();
 export const CodeInfoTag = Tag.define();

common/deps.ts

@@ -41,7 +41,9 @@ export {
   TaskList,
 } from "@lezer/markdown";
 
-export type { SyntaxNode, Tree } from "@lezer/common";
+export { parseMixed } from "@lezer/common";
+
+export type { NodeType, SyntaxNode, SyntaxNodeRef, Tree } from "@lezer/common";
 
 export { searchKeymap } from "https://esm.sh/@codemirror/search@6.2.2?external=@codemirror/state,@codemirror/view";
 export {
@@ -65,6 +67,7 @@ export {
   EditorState,
   Range,
   SelectionRange,
+  StateField,
   Text,
   Transaction,
 } from "@codemirror/state";
@@ -72,6 +75,8 @@ export type { ChangeSpec, Extension, StateCommand } from "@codemirror/state";
 export {
   defaultHighlightStyle,
   defineLanguageFacet,
+  foldedRanges,
+  foldInside,
   foldNodeProp,
   HighlightStyle,
   indentNodeProp,

common/parser.test.ts

@@ -8,7 +8,6 @@ type: page
 tags:
 - hello
 - world
-
 ---
 # This is a doc
 
@@ -26,9 +25,9 @@ Deno.test("Test parser", () => {
     lang,
     sample1,
   );
+  console.log("tree", JSON.stringify(tree, null, 2));
   // Check if rendering back to text works
   assertEquals(renderToText(tree), sample1);
-  // console.log("tree", JSON.stringify(tree, null, 2));
   let node = findNodeOfType(tree, "FrontMatter");
   assertNotEquals(node, undefined);
   tree = parse(lang, sampleInvalid1);

common/parser.ts

@@ -23,7 +23,10 @@ import {
 export const pageLinkRegex = /^\[\[([^\]]+)\]\]/;
 
 const WikiLink: MarkdownConfig = {
-  defineNodes: ["WikiLink", "WikiLinkPage"],
+  defineNodes: ["WikiLink", "WikiLinkPage", {
+    name: "WikiLinkMark",
+    style: t.processingInstruction,
+  }],
   parseInline: [
     {
       name: "WikiLink",
@@ -35,9 +38,48 @@ const WikiLink: MarkdownConfig = {
         ) {
           return -1;
         }
+        const endPos = pos + match[0].length;
         return cx.addElement(
-          cx.elt("WikiLink", pos, pos + match[0].length, [
-            cx.elt("WikiLinkPage", pos + 2, pos + match[0].length - 2),
+          cx.elt("WikiLink", pos, endPos, [
+            cx.elt("WikiLinkMark", pos, pos + 2),
+            cx.elt("WikiLinkPage", pos + 2, endPos - 2),
+            cx.elt("WikiLinkMark", endPos - 2, endPos),
+          ]),
+        );
+      },
+      after: "Emphasis",
+    },
+  ],
+};
+
+const commandLinkRegex = /^\{\[([^\]]+)\]\}/;
+
+const CommandLink: MarkdownConfig = {
+  defineNodes: [
+    { name: "CommandLink", style: { "CommandLink/...": ct.CommandLinkTag } },
+    { name: "CommandLinkName", style: ct.CommandLinkNameTag },
+    {
+      name: "CommandLinkMark",
+      style: t.processingInstruction,
+    },
+  ],
+  parseInline: [
+    {
+      name: "CommandLink",
+      parse(cx, next, pos) {
+        let match: RegExpMatchArray | null;
+        if (
+          next != 123 /* '{' */ ||
+          !(match = commandLinkRegex.exec(cx.slice(pos, cx.end)))
+        ) {
+          return -1;
+        }
+        const endPos = pos + match[0].length;
+        return cx.addElement(
+          cx.elt("CommandLink", pos, endPos, [
+            cx.elt("CommandLinkMark", pos, pos + 2),
+            cx.elt("CommandLinkName", pos + 2, endPos - 2),
+            cx.elt("CommandLinkMark", endPos - 2, endPos),
           ]),
         );
       },
@@ -102,7 +144,7 @@ export const Comment: MarkdownConfig = {
 
 // FrontMatter parser
 
-const lang = StreamLanguage.define(yamlLanguage);
+const yamlLang = StreamLanguage.define(yamlLanguage);
 
 export const FrontMatter: MarkdownConfig = {
   defineNodes: [
@@ -142,7 +184,7 @@ export const FrontMatter: MarkdownConfig = {
         }
         lastPos = cx.parsedPos;
       } while (line.text !== "---");
-      const yamlTree = lang.parser.parse(text);
+      const yamlTree = yamlLang.parser.parse(text);
 
       elts.push(
         cx.elt("FrontMatterCode", startPos, endPos, [
@@ -167,6 +209,7 @@ export default function buildMarkdown(mdExtensions: MDExt[]): Language {
   return markdown({
     extensions: [
       WikiLink,
+      CommandLink,
       FrontMatter,
       TaskList,
       Comment,
@@ -179,6 +222,8 @@ export default function buildMarkdown(mdExtensions: MDExt[]): Language {
           styleTags({
             WikiLink: ct.WikiLinkTag,
             WikiLinkPage: ct.WikiLinkPageTag,
+            // CommandLink: ct.CommandLinkTag,
+            // CommandLinkName: ct.CommandLinkNameTag,
             Task: ct.TaskTag,
             TaskMarker: ct.TaskMarkerTag,
             Comment: ct.CommentTag,