feat: hypermd demo!!!

apps/petal-notes/package.json

@@ -17,6 +17,10 @@
     "build-storybook": "storybook build",
     "chromatic": "chromatic"
   },
+  "dependencies": {
+    "codemirror": "^5.65.18",
+    "hypermd": "^0.3.11"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",
     "@psdtools/tsconfig": "workspace:^",
@@ -36,6 +40,7 @@
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "4.0.0-beta.9",
     "@total-typescript/ts-reset": "^0.6.1",
+    "@types/codemirror": "~5.60.15",
     "@vitest/browser": "^3.0.2",
     "@vitest/coverage-v8": "^3.0.2",
     "chromatic": "^11.25.0",

apps/petal-notes/src/lib/hypermd.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" module>
+  const HyperMD_ = await import("hypermd");
+
+  const loadingP = Promise.all([
+    // Load these modes if you want highlighting ...
+    import("codemirror/mode/htmlmixed/htmlmixed.js"), // for embedded HTML.
+    import("codemirror/mode/stex/stex.js"), // for Math TeX Formulae.
+    import("codemirror/mode/yaml/yaml.js"), // for frontmatter.
+
+    // Load PowerPacks if you want to use 3rd-party libraries for enhanced features...
+    import("hypermd/powerpack/fold-math-with-katex.js"),
+    import("hypermd/powerpack/hover-with-marked.js"),
+  ]);
+</script>
+
+<script lang="ts">
+  export interface Props {
+    value: string;
+
+    mode: "hypermd" | "normal";
+  }
+
+  let { mode = $bindable(), value = $bindable() }: Props = $props();
+
+  let editor: CodeMirror.Editor;
+  let textarea: HTMLTextAreaElement;
+
+  // eslint-disable-next-line unicorn/prefer-top-level-await
+  void (async () => {
+    await loadingP;
+
+    // @ts-expect-error(TS2454): Using `bind:this`.
+    editor = HyperMD_.fromTextArea(textarea);
+    editor.setSize(null, "200%");
+    editor.focus();
+  })();
+
+  let isMounting = true;
+
+  $effect(() => {
+    // Force the effect to run if the mode changes.
+    mode = mode;
+
+    if (isMounting) {
+      isMounting = false;
+
+      return;
+    }
+
+    if (mode === "hypermd") {
+      HyperMD_.switchToHyperMD(editor);
+    } else {
+      HyperMD_.switchToNormal(editor);
+    }
+  });
+</script>
+
+<textarea bind:this={textarea} bind:value></textarea>

apps/petal-notes/src/lib/hypermd.ts

@@ -0,0 +1,3 @@
+declare module "codemirror/mode/htmlmixed/htmlmixed.js" {}
+declare module "codemirror/mode/stex/stex.js" {}
+declare module "codemirror/mode/yaml/yaml.js" {}

apps/petal-notes/src/routes/+page.svelte

@@ -1,8 +1,61 @@
 <script lang="ts">
-  import { sveltekitUrl as svelteKitDocsUrl } from "$lib/demo.ts";
+  import HyperMDC from "$lib/hypermd.svelte";
+
+  let mode: "hypermd" | "normal" = $state("hypermd");
+
+  const value = `---
+title: Hello, HyperMD!
+---
+# Your HyperMD editor is here
+
+![Logo](/favicon.png)
+
+Maybe you prefer the hard ~~core~~ code way, want to import all libraries manually 🤘.
+
+No problem! HyperMD provides ai1 (all-in-one) single-file bundle :gift:!
+
+**Check-out this page's source code.** It just imports all the stuff, without any trick!
+
+-------------------
+
+All built-in features are ready-to-go. You may manipulate the editor via cm or HyperMD global variables. Try out:
+
+1. \`HyperMD.switchToNormal(cm)\`
+2. \`HyperMD.switchToHyperMD(cm)\`
+3. \`cm.getValue()\` returns the Markdown source text
+
+**Note**: This demo is using these powerpacks and 3rd-party libs and services. Special thanks to them!
+
+
+1. **fold-math-with-katex** uses _KaTeX_, the math typesetting library.
+2. **hover-with-marked** uses _marked_ to render footnotes[^1].
+
+[^1]: Like this one!
+
+[hypermd-doc]: https://laobubu.net/HyperMD/docs/ HyperMD documentation
+[cm-manual]: https://codemirror.net/doc/manual.html CodeMirror User manual
+`;
 </script>
 
-<h1>Welcome to SvelteKit</h1>
-<p>
-  Visit <a href={svelteKitDocsUrl}>svelte.dev/docs/kit</a> to read the documentation
-</p>
+<div>
+  <button
+    class="rounded-sm border px-2 py-0.5"
+    onclick={() => {
+      mode = "normal";
+    }}
+    type="button"
+  >
+    Switch To Normal
+  </button>
+  <button
+    class="rounded-md border px-2 py-0.5"
+    onclick={() => {
+      mode = "hypermd";
+    }}
+    type="button"
+  >
+    Switch To HyperMD
+  </button>
+</div>
+
+<HyperMDC {value} bind:mode />

apps/petal-notes/tests/demo.test.ts

@@ -1,8 +1,7 @@
-import { sveltekitUrl } from "$lib/demo";
 import { describe, test } from "vitest";
 
 describe("demo test", () => {
   test("svelte is secure", ({ expect }) => {
-    expect(sveltekitUrl).toMatch(/^https:\/\//);
+    expect("https://svelte.dev/").toMatch(/^https:\/\//);
   });
 });

knip.json

@@ -4,30 +4,25 @@
     "apps/gpa-calculator": {
       "entry": ["src/{script,sw}.ts"],
       "project": ["**/*.{js,cjs,mjs,ts,cts,mts}"],
-      "ignore": ["eslint.config.ts", "tailwind.config.ts"],
-      "ignoreDependencies": ["deputy", "fontaine", "tailwindcss"]
+      "ignore": ["tailwind.config.ts"],
+      "ignoreDependencies": ["fontaine", "tailwindcss"]
     },
     "apps/petal-notes": {
-      "ignore": [".storybook/vitest.setup.ts", "eslint.config.ts"],
+      "ignore": [".storybook/vitest.setup.ts", "src/lib/hypermd.ts"],
       "ignoreDependencies": [
         "@tailwindcss/forms",
         "@tailwindcss/typography",
-        "deputy",
         "tailwindcss",
         "vitest-browser-svelte"
       ]
     },
     "apps/phs-map": {
       "entry": ["src/{script,sw}.ts"],
-      "project": ["**/*.{js,cjs,mjs,ts,cts,mts}"],
-      "ignore": ["eslint.config.ts"],
-      "ignoreDependencies": ["deputy"]
-    },
-    "packages/deputy": {
-      "ignore": ["eslint.config.ts"]
+      "project": ["**/*.{js,cjs,mjs,ts,cts,mts}"]
     }
   },
-  "ignore": [".pnpmfile.cjs"],
+  "ignore": [".pnpmfile.cjs", "**/eslint.config.ts"],
+  "ignoreDependencies": ["deputy"],
   "ignoreExportsUsedInFile": true,
   "includeEntryExports": true
 }