Skip to content

Commit 2862f6b

Browse files
lishaducklishaduck
committed
feat: switch to hypermd port to codemirror 6
Hurrah!
1 parent bedc68e commit 2862f6b

File tree

9 files changed

+783
-221
lines changed

9 files changed

+783
-221
lines changed

‎.npmrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
auto-install-peers=true
1+
auto-install-peers=false
22
strict-peer-dependencies=true
33
disallow-workspace-cycles=true
44
engine-strict=true

‎apps/petal-notes/package.json

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,19 @@
2121
"defaults"
2222
],
2323
"dependencies": {
24-
"codemirror": "^5.65.18",
25-
"hypermd": "^0.3.11"
24+
"@codemirror/autocomplete": "^6.18.6",
25+
"@codemirror/commands": "^6.8.0",
26+
"@codemirror/lang-markdown": "^6.3.2",
27+
"@codemirror/language": "^6.10.8",
28+
"@codemirror/language-data": "^6.5.1",
29+
"@codemirror/search": "^6.5.9",
30+
"@codemirror/state": "^6.5.1",
31+
"@codemirror/view": "^6.36.2",
32+
"@lezer-unofficial/printer": "^1.0.1",
33+
"@lezer/highlight": "^1.2.1",
34+
"@lezer/markdown": "^1.4.1",
35+
"codemirror": "^6.0.1",
36+
"hypermd": "https://pkg.pr.new/jsimonrichard/HyperMD/hypermd@9c02ff2"
2637
},
2738
"devDependencies": {
2839
"@chromatic-com/storybook": "^3.2.4",
@@ -43,7 +54,7 @@
4354
"@tailwindcss/typography": "^0.5.16",
4455
"@tailwindcss/vite": "4.0.2",
4556
"@total-typescript/ts-reset": "^0.6.1",
46-
"@types/codemirror": "~5.60.15",
57+
"@types/react": "^19.0.8",
4758
"@vitest/browser": "^3.0.4",
4859
"@vitest/coverage-v8": "^3.0.4",
4960
"browserslist": "^4.24.4",

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

Lines changed: 78 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,94 @@
1-
<script lang="ts" module>
2-
const HyperMD_ = await import("hypermd");
3-
4-
const loadingP = Promise.all([
5-
// Load these modes if you want highlighting ...
6-
import("codemirror/mode/htmlmixed/htmlmixed.js"), // for embedded HTML.
7-
import("codemirror/mode/stex/stex.js"), // for Math TeX Formulae.
8-
import("codemirror/mode/yaml/yaml.js"), // for frontmatter.
9-
10-
// Load PowerPacks if you want to use 3rd-party libraries for enhanced features...
11-
import("hypermd/powerpack/fold-math-with-katex.js"),
12-
import("hypermd/powerpack/hover-with-marked.js"),
13-
]);
14-
</script>
15-
161
<script lang="ts">
2+
import {
3+
autocompletion,
4+
closeBrackets,
5+
closeBracketsKeymap,
6+
completionKeymap,
7+
} from "@codemirror/autocomplete";
8+
import { indentWithTab } from "@codemirror/commands";
9+
import { markdown } from "@codemirror/lang-markdown";
10+
import {
11+
bracketMatching,
12+
foldKeymap,
13+
indentOnInput,
14+
syntaxTree,
15+
} from "@codemirror/language";
16+
import { languages } from "@codemirror/language-data";
17+
import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
18+
import { EditorState } from "@codemirror/state";
19+
import {
20+
crosshairCursor,
21+
dropCursor,
22+
EditorView,
23+
highlightActiveLine,
24+
highlightActiveLineGutter,
25+
keymap,
26+
rectangularSelection,
27+
} from "@codemirror/view";
28+
import { printTree } from "@lezer-unofficial/printer";
29+
import { GFM } from "@lezer/markdown";
30+
import { minimalSetup } from "codemirror";
31+
import { hypermdExtensions, hypermdMarkdownExtensions } from "hypermd";
32+
import { onMount } from "svelte";
33+
1734
export interface Props {
1835
value: string;
19-
20-
mode: "hypermd" | "normal";
2136
}
2237
23-
let { mode = $bindable(), value = $bindable() }: Props = $props();
38+
let { value = $bindable() }: Props = $props();
2439
25-
let editor: CodeMirror.Editor;
26-
let textarea: HTMLTextAreaElement;
40+
let container: HTMLDivElement;
2741
28-
// eslint-disable-next-line unicorn/prefer-top-level-await
29-
void (async () => {
30-
await loadingP;
42+
onMount(() => {
43+
new EditorView({
44+
doc: value,
45+
extensions: [
46+
minimalSetup,
3147
32-
// @ts-expect-error(TS2454): Using `bind:this`.
33-
editor = HyperMD_.fromTextArea(textarea);
34-
editor.setSize(null, "200%");
35-
editor.focus();
36-
})();
48+
highlightActiveLineGutter(),
49+
dropCursor(),
50+
EditorState.allowMultipleSelections.of(true),
51+
indentOnInput(),
52+
bracketMatching(),
53+
closeBrackets(),
54+
autocompletion(),
55+
rectangularSelection(),
56+
crosshairCursor(),
57+
highlightActiveLine(),
58+
highlightSelectionMatches(),
3759
38-
let isMounting = true;
60+
markdown({
61+
codeLanguages: languages,
62+
extensions: [GFM, hypermdMarkdownExtensions],
63+
}),
64+
EditorView.lineWrapping,
65+
hypermdExtensions,
66+
keymap.of([
67+
...closeBracketsKeymap,
68+
...searchKeymap,
69+
...foldKeymap,
70+
...completionKeymap,
3971
40-
$effect(() => {
41-
// Force the effect to run if the mode changes.
42-
mode = mode;
72+
indentWithTab,
4373
44-
if (isMounting) {
45-
isMounting = false;
74+
// Debugging
75+
{
76+
key: "Alt-p",
77+
run: (view) => {
78+
if (import.meta.env.PROD) return true;
4679
47-
return;
48-
}
80+
console.debug(
81+
printTree(syntaxTree(view.state), view.state.doc.toString()),
82+
);
4983
50-
if (mode === "hypermd") {
51-
HyperMD_.switchToHyperMD(editor);
52-
} else {
53-
HyperMD_.switchToNormal(editor);
54-
}
84+
return true;
85+
},
86+
},
87+
]),
88+
],
89+
parent: container,
90+
});
5591
});
5692
</script>
5793

58-
<textarea bind:this={textarea} bind:value></textarea>
59-
60-
<style>
61-
:global {
62-
.CodeMirror-gutters {
63-
display: none;
64-
}
65-
.CodeMirror-sizer {
66-
margin-left: 1rem !important;
67-
margin-right: 1rem !important;
68-
}
69-
.CodeMirror-gutter-wrapper {
70-
display: none;
71-
}
72-
}
73-
</style>
94+
<div bind:this={container}></div>

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

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎apps/petal-notes/src/routes/(wrapper)/notes/[...path]/+page.svelte

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,10 @@
11
<script lang="ts">
22
import HyperMDC from "$lib/hypermd.svelte";
33
4-
type EditorMode = "hypermd" | "normal";
5-
6-
let editorMode: EditorMode = $state("hypermd");
7-
84
let { data } = $props();
95
</script>
106

11-
<div class="p-1">
12-
{#snippet button(mode: EditorMode, modeName: string)}
13-
<button
14-
class="rounded-sm border border-slate-950 px-2 py-0.5 dark:border-slate-50"
15-
onclick={() => {
16-
editorMode = mode;
17-
}}
18-
type="button"
19-
>
20-
Switch To {modeName}
21-
</button>
22-
{/snippet}
23-
24-
{@render button("normal", "Normal")}
25-
{@render button("hypermd", "HyperMD")}
26-
</div>
27-
287
<div class="overflow-hidden">
298
<!-- eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -->
30-
<HyperMDC value={data.note} bind:mode={editorMode} />
9+
<HyperMDC value={data.note} />
3110
</div>

‎apps/petal-notes/src/routes/(wrapper)/notes/[...path]/+page.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ const notes = new Map<string, string>([
1313
title: Hello, HyperMD!
1414
---
1515
# Your ~~HyperMD editor~~ Logo is here :gift:
16-
Cant figure out how to make it smaller, but it's here!
16+
17+
Can’t figure out how to make it smaller, but it's here!
18+
1719
![Logo](/PetalNotes-logo.svg)
1820
1921
-------------------
@@ -32,8 +34,8 @@ Try out these methods!
3234
3335
[^1]: Like this one!
3436
35-
[hypermd-doc]: https://laobubu.net/HyperMD/docs/ HyperMD documentation
36-
[cm-manual]: https://codemirror.net/doc/manual.html CodeMirror User manual
37+
[hypermd-doc]: <https://laobubu.net/HyperMD/docs/> HyperMD documentation
38+
[cm-manual]: <https://codemirror.net/doc/manual.html> CodeMirror User manual
3739
`,
3840
],
3941
]);

‎knip.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"ignoreDependencies": [
1313
"@tailwindcss/forms",
1414
"@tailwindcss/typography",
15+
"@types/react",
1516
"tailwindcss",
1617
"vitest-browser-svelte"
1718
],

‎package.json

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,6 @@
6161
],
6262
"overrides": {
6363
"eslint-plugin-unicorn": "^56.0.1",
64-
"hypermd>emojione": "-",
65-
"hypermd>flowchart.js": "-",
66-
"hypermd>mathjax": "-",
67-
"hypermd>mermaid": "-",
68-
"hypermd>turndown": "-",
69-
"hypermd>turndown-plugin-gfm": "-",
70-
"hypermd>twemoji": "-",
7164
"vitest>jsdom": "-"
7265
},
7366
"patchedDependencies": {

0 commit comments

Comments
 (0)