mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 18:10:18 +05:30
Compare commits
26
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 amitwh
|
d865b181e9 | ||
|
amitwh
|
5e5bab3da9 | ||
|
amitwh
|
ce2bf62d42 | ||
|
amitwh
|
6da98c3a54 | ||
|
amitwh
|
3598d06240 | ||
|
amitwh
|
650c266945 | ||
|
amitwh
|
05bbb9f86b | ||
|
amitwh
|
77c8e05fa5 | ||
|
amitwh
|
17f318dd75 | ||
|
amitwh
|
fa5a46d5ac | ||
|
amitwh
|
a4201acad9 | ||
|
amitwh
|
0b5af04a6a | ||
|
amitwh
|
2d6f909b0e | ||
|
amitwh
|
8624257c1f | ||
|
amitwh
|
b75f436aaa | ||
|
amitwh
|
d81d8c28d2 | ||
|
amitwh
|
559d09cad9 | ||
|
amitwh
|
5ad582ec3e | ||
|
amitwh
|
d02f896167 | ||
|
amitwh
|
f34775ce53 | ||
|
amitwh
|
5d6a55dd09 | ||
|
amitwh
|
0e80e37d9d | ||
|
amitwh
|
9a7e994224 | ||
|
amitwh
|
3effacf816 | ||
|
amitwh
|
1be10f9ae5 | ||
|
amitwh
|
4c0b7d6e84 |
Generated
+801
-1
@@ -27,6 +27,9 @@
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@hookform/resolvers": "^5.4.0",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-context-menu": "^2.2.16",
|
||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"codemirror": "^6.0.2",
|
||||
@@ -1851,6 +1854,44 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/core": {
|
||||
"version": "1.7.5",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
|
||||
"integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/dom": {
|
||||
"version": "1.7.6",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
|
||||
"integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.7.5",
|
||||
"@floating-ui/utils": "^0.2.11"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/react-dom": {
|
||||
"version": "2.1.8",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
|
||||
"integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.7.6"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8.0",
|
||||
"react-dom": ">=16.8.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@floating-ui/utils": {
|
||||
"version": "0.2.11",
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
|
||||
"integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@hookform/resolvers": {
|
||||
"version": "5.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.4.0.tgz",
|
||||
@@ -3805,6 +3846,115 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@radix-ui/number": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
|
||||
"integrity": "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@radix-ui/primitive": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
|
||||
"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@radix-ui/react-arrow": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
|
||||
"integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.1.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collapsible": {
|
||||
"version": "1.1.12",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
|
||||
"integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collection": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
|
||||
"integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-slot": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-compose-refs": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
|
||||
@@ -3820,6 +3970,390 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-context": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
|
||||
"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-context-menu": {
|
||||
"version": "2.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
|
||||
"integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-menu": "2.1.16",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-direction": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
|
||||
"integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-dismissable-layer": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
|
||||
"integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-escape-keydown": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-focus-guards": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
|
||||
"integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-focus-scope": {
|
||||
"version": "1.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
|
||||
"integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-id": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
|
||||
"integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-menu": {
|
||||
"version": "2.1.16",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
|
||||
"integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.11",
|
||||
"@radix-ui/react-focus-guards": "1.1.3",
|
||||
"@radix-ui/react-focus-scope": "1.1.7",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-popper": "1.2.8",
|
||||
"@radix-ui/react-portal": "1.1.9",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-roving-focus": "1.1.11",
|
||||
"@radix-ui/react-slot": "1.2.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"aria-hidden": "^1.2.4",
|
||||
"react-remove-scroll": "^2.6.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-popper": {
|
||||
"version": "1.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
|
||||
"integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/react-dom": "^2.0.0",
|
||||
"@radix-ui/react-arrow": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1",
|
||||
"@radix-ui/react-use-rect": "1.1.1",
|
||||
"@radix-ui/react-use-size": "1.1.1",
|
||||
"@radix-ui/rect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-portal": {
|
||||
"version": "1.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
|
||||
"integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-presence": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
|
||||
"integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-primitive": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
|
||||
"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-slot": "1.2.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
|
||||
"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-compose-refs": "1.1.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-roving-focus": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
|
||||
"integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-collection": "1.1.7",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-id": "1.1.1",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-controllable-state": "1.2.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-scroll-area": {
|
||||
"version": "1.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
|
||||
"integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/number": "1.1.1",
|
||||
"@radix-ui/primitive": "1.1.3",
|
||||
"@radix-ui/react-compose-refs": "1.1.2",
|
||||
"@radix-ui/react-context": "1.1.2",
|
||||
"@radix-ui/react-direction": "1.1.1",
|
||||
"@radix-ui/react-presence": "1.1.5",
|
||||
"@radix-ui/react-primitive": "2.1.3",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-slot": {
|
||||
"version": "1.2.4",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz",
|
||||
@@ -3838,6 +4372,133 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-callback-ref": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
|
||||
"integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-controllable-state": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
|
||||
"integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-effect-event": "0.0.2",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-effect-event": {
|
||||
"version": "0.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
|
||||
"integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-escape-keydown": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
|
||||
"integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-callback-ref": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-layout-effect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
|
||||
"integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-rect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
|
||||
"integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/rect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-size": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
|
||||
"integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/react-use-layout-effect": "1.1.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/rect": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
|
||||
"integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@rolldown/binding-android-arm64": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.3.tgz",
|
||||
@@ -4849,7 +5510,7 @@
|
||||
"version": "19.2.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
|
||||
"integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@types/react": "^19.2.0"
|
||||
@@ -5816,6 +6477,18 @@
|
||||
"dev": true,
|
||||
"license": "Python-2.0"
|
||||
},
|
||||
"node_modules/aria-hidden": {
|
||||
"version": "1.2.6",
|
||||
"resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
|
||||
"integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/aria-query": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
|
||||
@@ -7976,6 +8649,12 @@
|
||||
"license": "MIT",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/detect-node-es": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
|
||||
"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/dfa": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/dfa/-/dfa-1.2.0.tgz",
|
||||
@@ -9515,6 +10194,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/get-nonce": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
|
||||
"integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/get-package-type": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
|
||||
@@ -14227,6 +14915,53 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-remove-scroll": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
|
||||
"integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-remove-scroll-bar": "^2.3.7",
|
||||
"react-style-singleton": "^2.2.3",
|
||||
"tslib": "^2.1.0",
|
||||
"use-callback-ref": "^1.3.3",
|
||||
"use-sidecar": "^1.1.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-remove-scroll-bar": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
|
||||
"integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-style-singleton": "^2.2.2",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-resizable-panels": {
|
||||
"version": "4.11.2",
|
||||
"resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.11.2.tgz",
|
||||
@@ -14237,6 +14972,28 @@
|
||||
"react-dom": "^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-style-singleton": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
|
||||
"integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"get-nonce": "^1.0.0",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/read-binary-file-arch": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/read-binary-file-arch/-/read-binary-file-arch-1.0.6.tgz",
|
||||
@@ -15986,6 +16743,49 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-callback-ref": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
|
||||
"integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/use-sidecar": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
|
||||
"integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"detect-node-es": "^1.1.0",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/utf8-byte-length": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/utf8-byte-length/-/utf8-byte-length-1.0.5.tgz",
|
||||
|
||||
@@ -98,6 +98,9 @@
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@hookform/resolvers": "^5.4.0",
|
||||
"@radix-ui/react-collapsible": "^1.1.12",
|
||||
"@radix-ui/react-context-menu": "^2.2.16",
|
||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
||||
"@radix-ui/react-slot": "^1.2.4",
|
||||
"@tanstack/react-table": "^8.21.3",
|
||||
"codemirror": "^6.0.2",
|
||||
|
||||
+49
@@ -3039,6 +3039,55 @@ ipcMain.on('select-folder', (event, type) => {
|
||||
}
|
||||
});
|
||||
|
||||
// List directory contents as FileEntry[]
|
||||
ipcMain.handle('list-directory', async (event, dirPath) => {
|
||||
try {
|
||||
const entries = fs.readdirSync(dirPath, { withFileTypes: true });
|
||||
return entries.map((dirent) => {
|
||||
const fullPath = path.join(dirPath, dirent.name);
|
||||
let size;
|
||||
let modifiedAt;
|
||||
if (!dirent.isDirectory()) {
|
||||
try {
|
||||
const stat = fs.statSync(fullPath);
|
||||
size = stat.size;
|
||||
modifiedAt = stat.mtime.toISOString();
|
||||
} catch {
|
||||
// ignore stat errors
|
||||
}
|
||||
}
|
||||
return {
|
||||
name: dirent.name,
|
||||
path: fullPath,
|
||||
isDirectory: dirent.isDirectory(),
|
||||
size,
|
||||
modifiedAt,
|
||||
};
|
||||
});
|
||||
} catch (err) {
|
||||
return { error: err.message };
|
||||
}
|
||||
});
|
||||
|
||||
// Show folder picker dialog and return selected path or null
|
||||
ipcMain.handle('pick-folder', async () => {
|
||||
const result = await dialog.showOpenDialog(mainWindow, {
|
||||
properties: ['openDirectory'],
|
||||
});
|
||||
if (result.canceled || result.filePaths.length === 0) return null;
|
||||
return result.filePaths[0];
|
||||
});
|
||||
|
||||
// Show file picker dialog for markdown files and return selected path or null
|
||||
ipcMain.handle('pick-file', async () => {
|
||||
const result = await dialog.showOpenDialog(mainWindow, {
|
||||
properties: ['openFile'],
|
||||
filters: [{ name: 'Markdown', extensions: ['md', 'markdown', 'mdown', 'mkd'] }],
|
||||
});
|
||||
if (result.canceled || result.filePaths.length === 0) return null;
|
||||
return result.filePaths[0];
|
||||
});
|
||||
|
||||
ipcMain.on('export-spreadsheet', (event, { content, format }) => {
|
||||
const outputFile = dialog.showSaveDialogSync(mainWindow, {
|
||||
defaultPath: currentFile.replace(/\.[^/.]+$/, `.${format}`),
|
||||
|
||||
+10
-2
@@ -237,7 +237,12 @@ const ALLOWED_RECEIVE_CHANNELS = [
|
||||
'load-template-menu',
|
||||
'toggle-command-palette',
|
||||
'toggle-sidebar-panel',
|
||||
'toggle-bottom-panel'
|
||||
'toggle-bottom-panel',
|
||||
|
||||
// File dialog / directory listing
|
||||
'list-directory',
|
||||
'pick-folder',
|
||||
'pick-file'
|
||||
];
|
||||
|
||||
/**
|
||||
@@ -344,7 +349,10 @@ contextBridge.exposeInMainWorld('electronAPI', {
|
||||
exists: (filePath) => ipcRenderer.invoke('path-exists', filePath),
|
||||
isDirectory: (filePath) => ipcRenderer.invoke('is-directory', filePath),
|
||||
copy: (source, destination) => ipcRenderer.invoke('copy-path', { source, destination }),
|
||||
move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination })
|
||||
move: (source, destination) => ipcRenderer.invoke('move-path', { source, destination }),
|
||||
list: (dirPath) => ipcRenderer.invoke('list-directory', dirPath),
|
||||
pickFolder: () => ipcRenderer.invoke('pick-folder'),
|
||||
pickFile: () => ipcRenderer.invoke('pick-file')
|
||||
},
|
||||
|
||||
// Theme Operations
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { EditorState, Compartment } from '@codemirror/state';
|
||||
import { EditorView, keymap, lineNumbers, highlightActiveLine, drawSelection } from '@codemirror/view';
|
||||
import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
|
||||
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
|
||||
import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
|
||||
import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
|
||||
import { oneDark } from '@codemirror/theme-one-dark';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { lightTheme, lightHighlight } from './themes/light';
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
|
||||
interface Props {
|
||||
bufferId: string;
|
||||
initialContent: string;
|
||||
onChange?: (content: string) => void;
|
||||
onCursorChange?: (line: number, column: number) => void;
|
||||
}
|
||||
|
||||
export function CodeMirrorEditor({ bufferId, initialContent, onChange, onCursorChange }: Props) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const viewRef = useRef<EditorView | null>(null);
|
||||
const themeCompartment = useRef(new Compartment());
|
||||
const { resolvedTheme } = useTheme();
|
||||
const updateContent = useEditorStore((s) => s.updateContent);
|
||||
const setCursor = useEditorStore((s) => s.setCursor);
|
||||
|
||||
useEffect(() => {
|
||||
if (!ref.current) return;
|
||||
const state = EditorState.create({
|
||||
doc: initialContent,
|
||||
extensions: [
|
||||
lineNumbers(),
|
||||
highlightActiveLine(),
|
||||
highlightSelectionMatches(),
|
||||
history(),
|
||||
drawSelection(),
|
||||
markdown({ base: markdownLanguage, codeLanguages: [] }),
|
||||
autocompletion(),
|
||||
keymap.of([...defaultKeymap, ...historyKeymap, ...searchKeymap, ...completionKeymap, indentWithTab]),
|
||||
themeCompartment.current.of(resolvedTheme === 'dark' ? [oneDark] : [lightTheme, lightHighlight]),
|
||||
EditorView.lineWrapping,
|
||||
EditorView.updateListener.of((v) => {
|
||||
if (v.docChanged) {
|
||||
const content = v.state.doc.toString();
|
||||
updateContent(bufferId, content);
|
||||
onChange?.(content);
|
||||
}
|
||||
if (v.selectionSet || v.docChanged) {
|
||||
const head = v.state.selection.main.head;
|
||||
const line = v.state.doc.lineAt(head);
|
||||
const lineNo = line.number;
|
||||
const col = head - line.from + 1;
|
||||
setCursor(bufferId, lineNo, col);
|
||||
onCursorChange?.(lineNo, col);
|
||||
}
|
||||
}),
|
||||
],
|
||||
});
|
||||
const view = new EditorView({ state, parent: ref.current });
|
||||
viewRef.current = view;
|
||||
return () => {
|
||||
view.destroy();
|
||||
viewRef.current = null;
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [bufferId]);
|
||||
|
||||
useEffect(() => {
|
||||
const view = viewRef.current;
|
||||
if (!view) return;
|
||||
view.dispatch({
|
||||
effects: themeCompartment.current.reconfigure(
|
||||
resolvedTheme === 'dark' ? [oneDark] : [lightTheme, lightHighlight]
|
||||
),
|
||||
});
|
||||
}, [resolvedTheme]);
|
||||
|
||||
return <div ref={ref} className="h-full overflow-hidden" />;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
import { useEffect } from 'react';
|
||||
import { CodeMirrorEditor } from './CodeMirrorEditor';
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
import { usePreviewStore } from '@/stores/preview-store';
|
||||
|
||||
export function EditorPane() {
|
||||
const { buffers, activeId } = useEditorStore();
|
||||
const buf = activeId ? buffers.get(activeId) : null;
|
||||
const setPreviewSource = usePreviewStore((s) => s.setSource);
|
||||
|
||||
useEffect(() => {
|
||||
if (buf) setPreviewSource(buf.content);
|
||||
}, [buf?.id, buf?.content, buf, setPreviewSource]);
|
||||
|
||||
if (!buf) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center bg-background text-muted-foreground">
|
||||
<p>No file open. Use File → Open to start.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full">
|
||||
<CodeMirrorEditor
|
||||
key={buf.id}
|
||||
bufferId={buf.id}
|
||||
initialContent={buf.content}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
import { EditorView } from '@codemirror/view';
|
||||
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
|
||||
import { tags as t } from '@lezer/highlight';
|
||||
|
||||
const colors = {
|
||||
background: '#ffffff',
|
||||
foreground: '#0d0b09',
|
||||
cursor: '#e5461f',
|
||||
selection: 'rgba(229, 70, 31, 0.15)',
|
||||
gutterBackground: '#fafbfc',
|
||||
gutterForeground: '#7a7878',
|
||||
lineHighlight: 'rgba(0, 0, 0, 0.04)',
|
||||
};
|
||||
|
||||
export const lightTheme = EditorView.theme(
|
||||
{
|
||||
'&': {
|
||||
backgroundColor: colors.background,
|
||||
color: colors.foreground,
|
||||
height: '100%',
|
||||
},
|
||||
'.cm-content': {
|
||||
caretColor: colors.cursor,
|
||||
fontFamily: 'JetBrains Mono, Fira Code, monospace',
|
||||
fontSize: '13.5px',
|
||||
},
|
||||
'.cm-cursor, .cm-dropCursor': { borderLeftColor: colors.cursor },
|
||||
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
|
||||
backgroundColor: colors.selection,
|
||||
},
|
||||
'.cm-gutters': {
|
||||
backgroundColor: colors.gutterBackground,
|
||||
color: colors.gutterForeground,
|
||||
border: 'none',
|
||||
},
|
||||
'.cm-activeLine': { backgroundColor: colors.lineHighlight },
|
||||
'.cm-activeLineGutter': { backgroundColor: 'transparent', color: '#e5461f' },
|
||||
},
|
||||
{ dark: false }
|
||||
);
|
||||
|
||||
const highlightStyle = HighlightStyle.define([
|
||||
{ tag: t.heading1, color: '#0d0b09', fontWeight: '700' },
|
||||
{ tag: t.heading2, color: '#0d0b09', fontWeight: '700' },
|
||||
{ tag: t.heading3, color: '#464646', fontWeight: '600' },
|
||||
{ tag: t.link, color: '#e5461f', textDecoration: 'underline' },
|
||||
{ tag: t.url, color: '#e5461f' },
|
||||
{ tag: t.emphasis, fontStyle: 'italic' },
|
||||
{ tag: t.strong, fontWeight: '700' },
|
||||
{ tag: t.monospace, color: '#c93a18' },
|
||||
{ tag: t.list, color: '#0ea5e9' },
|
||||
{ tag: t.quote, color: '#7a7878', fontStyle: 'italic' },
|
||||
]);
|
||||
|
||||
export const lightHighlight = syntaxHighlighting(highlightStyle);
|
||||
@@ -3,10 +3,17 @@ import { TabBar } from './TabBar';
|
||||
import { Toolbar } from './Toolbar';
|
||||
import { Breadcrumb } from './Breadcrumb';
|
||||
import { StatusBar } from './StatusBar';
|
||||
import { EditorPane } from '@/components/editor/EditorPane';
|
||||
import { PreviewPane } from '@/components/preview/PreviewPane';
|
||||
import { Sidebar } from '@/components/sidebar/Sidebar';
|
||||
import { useAppStore } from '@/stores/app-store';
|
||||
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@/components/ui/resizable';
|
||||
import { useFileShortcuts } from '@/hooks/use-file-shortcuts';
|
||||
import { useRestoreLastFolder } from '@/hooks/use-restore-last-folder';
|
||||
|
||||
export function AppShell() {
|
||||
useFileShortcuts();
|
||||
useRestoreLastFolder();
|
||||
const { sidebarVisible, previewVisible, paneSizes, setPaneSizes } = useAppStore();
|
||||
|
||||
return (
|
||||
@@ -24,24 +31,20 @@ export function AppShell() {
|
||||
<>
|
||||
<ResizablePanel defaultSize={paneSizes.sidebar} minSize={15} maxSize={40}>
|
||||
<aside className="h-full border-r border-border bg-card/10 p-3 text-sm text-muted-foreground">
|
||||
File tree placeholder
|
||||
<Sidebar />
|
||||
</aside>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
</>
|
||||
)}
|
||||
<ResizablePanel defaultSize={previewVisible ? paneSizes.editor : 100} minSize={20}>
|
||||
<section className="h-full bg-background p-4 text-sm text-muted-foreground">
|
||||
Editor placeholder
|
||||
</section>
|
||||
<EditorPane />
|
||||
</ResizablePanel>
|
||||
{previewVisible && (
|
||||
<>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel defaultSize={paneSizes.preview} minSize={20}>
|
||||
<section className="h-full border-l border-border bg-card/10 p-4 text-sm text-muted-foreground">
|
||||
Preview placeholder
|
||||
</section>
|
||||
<PreviewPane />
|
||||
</ResizablePanel>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -1,12 +1,23 @@
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
|
||||
function countWords(text: string): number {
|
||||
return text.trim().length === 0 ? 0 : text.trim().split(/\s+/).length;
|
||||
}
|
||||
|
||||
export function StatusBar() {
|
||||
const { buffers, activeId } = useEditorStore();
|
||||
const buf = activeId ? buffers.get(activeId) : null;
|
||||
const wordCount = buf ? countWords(buf.content) : 0;
|
||||
const cursor = buf?.cursor ?? { line: 1, column: 1 };
|
||||
|
||||
return (
|
||||
<footer className="flex h-7 items-center justify-between border-t border-border bg-card/20 px-3 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-4">
|
||||
<span>0 words</span>
|
||||
<span>{wordCount} words</span>
|
||||
<span>UTF-8</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span>Ln 1, Col 1</span>
|
||||
<span>Ln {cursor.line}, Col {cursor.column}</span>
|
||||
<span>Markdown</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@@ -1,7 +1,127 @@
|
||||
import { X } from 'lucide-react';
|
||||
import {
|
||||
DndContext,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
closestCenter,
|
||||
type DragEndEvent,
|
||||
} from '@dnd-kit/core';
|
||||
import {
|
||||
SortableContext,
|
||||
horizontalListSortingStrategy,
|
||||
useSortable,
|
||||
} from '@dnd-kit/sortable';
|
||||
import { CSS } from '@dnd-kit/utilities';
|
||||
import { useFileStore, type OpenTab } from '@/stores/file-store';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function SortableTab({
|
||||
tab,
|
||||
isActive,
|
||||
onSelect,
|
||||
onClose,
|
||||
}: {
|
||||
tab: OpenTab;
|
||||
isActive: boolean;
|
||||
onSelect: (id: string) => void;
|
||||
onClose: (id: string) => void;
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: tab.id,
|
||||
});
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
role="tab"
|
||||
aria-selected={isActive}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
data-testid={`tab-${tab.id}`}
|
||||
className={cn(
|
||||
'group flex h-full cursor-pointer select-none items-center gap-1 border-r border-border px-3 text-xs transition-colors',
|
||||
isActive
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground hover:bg-muted/50 hover:text-foreground'
|
||||
)}
|
||||
onClick={() => onSelect(tab.id)}
|
||||
>
|
||||
{tab.dirty && (
|
||||
<span
|
||||
className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary"
|
||||
aria-label="Unsaved changes"
|
||||
/>
|
||||
)}
|
||||
<span className="max-w-[120px] truncate">{tab.title}</span>
|
||||
<button
|
||||
aria-label={`Close ${tab.title}`}
|
||||
className="ml-1 flex h-4 w-4 shrink-0 items-center justify-center rounded opacity-0 group-hover:opacity-100 hover:bg-muted-foreground/20 transition-opacity"
|
||||
onPointerDown={(e) => e.stopPropagation()}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClose(tab.id);
|
||||
}}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function TabBar() {
|
||||
const openTabs = useFileStore((s) => s.openTabs);
|
||||
const activeTabId = useFileStore((s) => s.activeTabId);
|
||||
const setActiveTab = useFileStore((s) => s.setActiveTab);
|
||||
const closeTab = useFileStore((s) => s.closeTab);
|
||||
const reorderTabs = useFileStore((s) => s.reorderTabs);
|
||||
|
||||
// Require a small drag distance before activating — so a click on the tab
|
||||
// body still triggers `onClick` (dnd-kit's PointerSensor default is 0).
|
||||
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));
|
||||
|
||||
if (openTabs.length === 0) {
|
||||
return (
|
||||
<div className="flex h-9 items-center border-b border-border bg-card/20 px-3 text-xs text-muted-foreground">
|
||||
<span>No files open</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function handleDragEnd(e: DragEndEvent) {
|
||||
const { active, over } = e;
|
||||
if (!over || active.id === over.id) return;
|
||||
const fromIndex = openTabs.findIndex((t) => t.id === active.id);
|
||||
const toIndex = openTabs.findIndex((t) => t.id === over.id);
|
||||
if (fromIndex === -1 || toIndex === -1) return;
|
||||
reorderTabs(fromIndex, toIndex);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-9 items-center border-b border-border bg-card/20 overflow-x-auto">
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
||||
<SortableContext items={openTabs.map((t) => t.id)} strategy={horizontalListSortingStrategy}>
|
||||
<div className="flex h-full items-center px-1">
|
||||
{openTabs.map((tab) => (
|
||||
<SortableTab
|
||||
key={tab.id}
|
||||
tab={tab}
|
||||
isActive={tab.id === activeTabId}
|
||||
onSelect={setActiveTab}
|
||||
onClose={closeTab}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { renderMarkdown } from '@/lib/markdown';
|
||||
import { MermaidLazy } from './MermaidLazy';
|
||||
|
||||
interface Props {
|
||||
source: string;
|
||||
}
|
||||
|
||||
const MERMAID_RE = /```mermaid\n([\s\S]*?)```/g;
|
||||
|
||||
function extractMermaidCodes(source: string): string[] {
|
||||
const codes: string[] = [];
|
||||
let match: RegExpExecArray | null;
|
||||
while ((match = MERMAID_RE.exec(source)) !== null) {
|
||||
codes.push(match[1].trim());
|
||||
}
|
||||
return codes;
|
||||
}
|
||||
|
||||
export function MarkdownRenderer({ source }: Props) {
|
||||
const html = renderMarkdown(source);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const [mermaidCodes, setMermaidCodes] = useState<string[]>([]);
|
||||
|
||||
// Re-derive mermaid codes from the original source. The renderMarkdown function
|
||||
// replaces mermaid blocks with placeholders (data-mermaid-source="${idx}"), but
|
||||
// it does not return the actual codes. Rather than thread them through the API,
|
||||
// we re-extract from the source. Source is small (single buffer content) so this
|
||||
// cost is negligible.
|
||||
useEffect(() => {
|
||||
setMermaidCodes(extractMermaidCodes(source));
|
||||
}, [source]);
|
||||
|
||||
return (
|
||||
<div className="prose prose-neutral dark:prose-invert max-w-none p-6" ref={containerRef}>
|
||||
<div dangerouslySetInnerHTML={{ __html: html }} />
|
||||
{mermaidCodes.map((code, i) => (
|
||||
<div key={i} className="my-4">
|
||||
<MermaidLazy code={code} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
interface Props {
|
||||
code: string;
|
||||
}
|
||||
|
||||
let mermaidModule: typeof import('mermaid').default | null = null;
|
||||
let initialized = false;
|
||||
|
||||
async function getMermaid() {
|
||||
if (!mermaidModule) {
|
||||
const mod = await import('mermaid');
|
||||
mermaidModule = mod.default;
|
||||
}
|
||||
if (!initialized) {
|
||||
mermaidModule.initialize({ startOnLoad: false, theme: 'default' });
|
||||
initialized = true;
|
||||
}
|
||||
return mermaidModule;
|
||||
}
|
||||
|
||||
export function MermaidLazy({ code }: Props) {
|
||||
const [svg, setSvg] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const idRef = useRef(`mermaid-${Math.random().toString(36).slice(2)}`);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
getMermaid()
|
||||
.then((m) => m.render(idRef.current, code))
|
||||
.then((rendered) => {
|
||||
if (!cancelled) setSvg(rendered);
|
||||
})
|
||||
.catch((err: Error) => {
|
||||
if (!cancelled) setError(err.message);
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [code]);
|
||||
|
||||
if (error) return <div className="rounded border border-destructive/40 bg-destructive/5 p-2 text-xs text-destructive">{error}</div>;
|
||||
if (!svg) return <div className="text-xs text-muted-foreground">Loading diagram…</div>;
|
||||
return <div data-testid="mermaid-output" dangerouslySetInnerHTML={{ __html: svg }} />;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { MarkdownRenderer } from './MarkdownRenderer';
|
||||
import { usePreviewStore } from '@/stores/preview-store';
|
||||
import { useScrollSync } from '@/hooks/use-scroll-sync';
|
||||
|
||||
export function PreviewPane() {
|
||||
const { source, setScrollRatio } = usePreviewStore();
|
||||
const { handlePreviewScroll } = useScrollSync({ onPreviewScroll: setScrollRatio });
|
||||
|
||||
if (!source) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center text-muted-foreground">
|
||||
<p>Nothing to preview. Start typing in the editor.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-auto bg-card/10" onScroll={handlePreviewScroll}>
|
||||
<MarkdownRenderer source={source} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import { ChevronRight, Folder, FolderOpen, File, FileText } from 'lucide-react';
|
||||
import { useFileStore } from '@/stores/file-store';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
function FileTreeNode({ node, depth }: { node: import('@/stores/file-store').FileNode; depth: number }) {
|
||||
const { expanded, activeTabId, loadChildren, toggleExpanded, openFile } = useFileStore();
|
||||
const isExpanded = expanded.has(node.path);
|
||||
const isActive = activeTabId === node.path;
|
||||
|
||||
if (node.isDirectory) {
|
||||
const handleClick = async () => {
|
||||
if (!node.loaded) {
|
||||
await loadChildren(node.path);
|
||||
}
|
||||
toggleExpanded(node.path);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-1 rounded px-1 py-0.5 text-left text-xs hover:bg-accent',
|
||||
isActive && 'bg-accent'
|
||||
)}
|
||||
style={{ paddingLeft: `${depth * 16 + 4}px` }}
|
||||
>
|
||||
<ChevronRight
|
||||
size={12}
|
||||
className={cn('transition-transform duration-150', isExpanded && 'rotate-90')}
|
||||
/>
|
||||
{isExpanded ? <FolderOpen size={14} /> : <Folder size={14} />}
|
||||
<span className="truncate">{node.name}</span>
|
||||
</button>
|
||||
{isExpanded && node.loaded && node.children && (
|
||||
<div>
|
||||
{node.children.map((child) => (
|
||||
<FileTreeNode key={child.path} node={child} depth={depth + 1} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => openFile(node.path)}
|
||||
className={cn(
|
||||
'flex w-full items-center gap-1 rounded px-1 py-0.5 text-left text-xs hover:bg-accent',
|
||||
isActive && 'bg-accent text-accent-foreground'
|
||||
)}
|
||||
style={{ paddingLeft: `${depth * 16 + 4}px` }}
|
||||
>
|
||||
<FileText size={14} />
|
||||
<span className="truncate">{node.name}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export function FileTree() {
|
||||
const tree = useFileStore((s) => s.tree);
|
||||
|
||||
if (!tree) return null;
|
||||
|
||||
return (
|
||||
<div className="py-1">
|
||||
{tree.children?.map((child) => (
|
||||
<FileTreeNode key={child.path} node={child} depth={0} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
|
||||
const HEADING_RE = /^(#{1,6})\s+(.+)$/gm;
|
||||
|
||||
interface HeadingItem {
|
||||
level: number;
|
||||
text: string;
|
||||
line: number;
|
||||
}
|
||||
|
||||
function extractHeadings(content: string): HeadingItem[] {
|
||||
const headings: HeadingItem[] = [];
|
||||
let match: RegExpExecArray | null;
|
||||
const re = new RegExp(HEADING_RE.source, 'gm');
|
||||
let lineNum = 1;
|
||||
for (const line of content.split('\n')) {
|
||||
re.lastIndex = 0;
|
||||
match = re.exec(line);
|
||||
if (match) {
|
||||
headings.push({
|
||||
level: match[1].length,
|
||||
text: match[2].trim(),
|
||||
line: lineNum,
|
||||
});
|
||||
}
|
||||
lineNum++;
|
||||
}
|
||||
return headings;
|
||||
}
|
||||
|
||||
export function Outline() {
|
||||
const activeId = useEditorStore((s) => s.activeId);
|
||||
const buffers = useEditorStore((s) => s.buffers);
|
||||
|
||||
if (!activeId) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
|
||||
<span>No file open</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const buffer = buffers.get(activeId);
|
||||
if (!buffer) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
|
||||
<span>No file open</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const headings = extractHeadings(buffer.content);
|
||||
|
||||
if (headings.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-2 py-8 text-xs text-muted-foreground">
|
||||
<span>No headings</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-0.5 py-1">
|
||||
{headings.map((h, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => {}}
|
||||
className="flex items-center gap-1 rounded px-2 py-0.5 text-left text-xs hover:bg-accent"
|
||||
style={{ paddingLeft: `${(h.level - 1) * 16 + 8}px` }}
|
||||
>
|
||||
<span className="truncate text-muted-foreground">#{h.level}</span>
|
||||
<span className="truncate">{h.text}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { ChevronRight, FolderOpen } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { useFileStore } from '@/stores/file-store';
|
||||
import { FileTree } from './FileTree';
|
||||
import { Outline } from './Outline';
|
||||
|
||||
export function Sidebar() {
|
||||
const tree = useFileStore((s) => s.tree);
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-3">
|
||||
{/* Files section */}
|
||||
<Collapsible defaultOpen>
|
||||
<CollapsibleTrigger asChild>
|
||||
<button className="flex w-full items-center gap-1.5 px-1 py-1.5 text-xs font-medium hover:bg-accent rounded">
|
||||
<ChevronRight size={12} className="rotate-90" />
|
||||
Files
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<ScrollArea className="h-[calc(100vh-240px)]">
|
||||
{!tree ? (
|
||||
<div className="flex flex-col items-center gap-2 p-4 text-xs text-muted-foreground">
|
||||
<span>No folder opened</span>
|
||||
<Button size="sm" variant="outline" onClick={() => useFileStore.getState().openFolderDialog()}>
|
||||
<FolderOpen className="mr-1" /> Open Folder
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<FileTree />
|
||||
)}
|
||||
</ScrollArea>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
|
||||
{/* Outline section */}
|
||||
<Collapsible defaultOpen>
|
||||
<CollapsibleTrigger asChild>
|
||||
<button className="flex w-full items-center gap-1.5 px-1 py-1.5 text-xs font-medium hover:bg-accent rounded">
|
||||
<ChevronRight size={12} className="rotate-90" />
|
||||
Outline
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<ScrollArea className="h-[calc(100vh-240px)]">
|
||||
<Outline />
|
||||
</ScrollArea>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
"use client"
|
||||
|
||||
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
|
||||
|
||||
const Collapsible = CollapsiblePrimitive.Root
|
||||
|
||||
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
|
||||
|
||||
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||
@@ -0,0 +1,200 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
|
||||
import { Check, ChevronRight, Circle } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const ContextMenu = ContextMenuPrimitive.Root
|
||||
|
||||
const ContextMenuTrigger = ContextMenuPrimitive.Trigger
|
||||
|
||||
const ContextMenuGroup = ContextMenuPrimitive.Group
|
||||
|
||||
const ContextMenuPortal = ContextMenuPrimitive.Portal
|
||||
|
||||
const ContextMenuSub = ContextMenuPrimitive.Sub
|
||||
|
||||
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
|
||||
|
||||
const ContextMenuSubTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, children, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.SubTrigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRight className="ml-auto h-4 w-4" />
|
||||
</ContextMenuPrimitive.SubTrigger>
|
||||
))
|
||||
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
|
||||
|
||||
const ContextMenuSubContent = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.SubContent
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
|
||||
|
||||
const ContextMenuContent = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Portal>
|
||||
<ContextMenuPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</ContextMenuPrimitive.Portal>
|
||||
))
|
||||
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
|
||||
|
||||
const ContextMenuItem = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
|
||||
|
||||
const ContextMenuCheckboxItem = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
|
||||
>(({ className, children, checked, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.CheckboxItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<Check className="h-4 w-4" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.CheckboxItem>
|
||||
))
|
||||
ContextMenuCheckboxItem.displayName =
|
||||
ContextMenuPrimitive.CheckboxItem.displayName
|
||||
|
||||
const ContextMenuRadioItem = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.RadioItem
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<ContextMenuPrimitive.ItemIndicator>
|
||||
<Circle className="h-4 w-4 fill-current" />
|
||||
</ContextMenuPrimitive.ItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.RadioItem>
|
||||
))
|
||||
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
|
||||
|
||||
const ContextMenuLabel = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
|
||||
inset?: boolean
|
||||
}
|
||||
>(({ className, inset, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Label
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"px-2 py-1.5 text-sm font-semibold text-foreground",
|
||||
inset && "pl-8",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
|
||||
|
||||
const ContextMenuSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof ContextMenuPrimitive.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ContextMenuPrimitive.Separator
|
||||
ref={ref}
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
|
||||
|
||||
const ContextMenuShortcut = ({
|
||||
className,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
ContextMenuShortcut.displayName = "ContextMenuShortcut"
|
||||
|
||||
export {
|
||||
ContextMenu,
|
||||
ContextMenuTrigger,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuShortcut,
|
||||
ContextMenuGroup,
|
||||
ContextMenuPortal,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuRadioGroup,
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const ScrollArea = React.forwardRef<
|
||||
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<ScrollAreaPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn("relative overflow-hidden", className)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
||||
{children}
|
||||
</ScrollAreaPrimitive.Viewport>
|
||||
<ScrollBar />
|
||||
<ScrollAreaPrimitive.Corner />
|
||||
</ScrollAreaPrimitive.Root>
|
||||
))
|
||||
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
|
||||
|
||||
const ScrollBar = React.forwardRef<
|
||||
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
||||
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
>(({ className, orientation = "vertical", ...props }, ref) => (
|
||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||
ref={ref}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"flex touch-none select-none transition-colors",
|
||||
orientation === "vertical" &&
|
||||
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
||||
orientation === "horizontal" &&
|
||||
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||
))
|
||||
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
||||
export { ScrollArea, ScrollBar }
|
||||
@@ -0,0 +1,72 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useFileStore } from '@/stores/file-store';
|
||||
|
||||
/**
|
||||
* Global keyboard shortcuts for file operations.
|
||||
*
|
||||
* - Cmd/Ctrl+O: open file
|
||||
* - Cmd/Ctrl+Shift+O: open folder
|
||||
* - Cmd/Ctrl+S: save active buffer
|
||||
* - Cmd/Ctrl+W: close active tab
|
||||
* - Cmd/Ctrl+Tab / Cmd/Ctrl+Shift+Tab: next/previous tab (wraps)
|
||||
*
|
||||
* Suppressed when an <input>, <textarea>, or contentEditable element has focus.
|
||||
*/
|
||||
export function useFileShortcuts(): void {
|
||||
useEffect(() => {
|
||||
function isTypingTarget(target: EventTarget | null): boolean {
|
||||
if (!(target instanceof HTMLElement)) return false;
|
||||
const tag = target.tagName;
|
||||
if (tag === 'INPUT' || tag === 'TEXTAREA') return true;
|
||||
if (target.isContentEditable) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
function handle(e: KeyboardEvent): void {
|
||||
const mod = e.metaKey || e.ctrlKey;
|
||||
if (!mod) return;
|
||||
if (isTypingTarget(e.target)) return;
|
||||
|
||||
const key = e.key.toLowerCase();
|
||||
|
||||
// Order matters: more specific (Shift) variants first so they don't get
|
||||
// shadowed by the plain modifier-only branch.
|
||||
if (e.shiftKey && key === 'o') {
|
||||
e.preventDefault();
|
||||
void useFileStore.getState().openFolderDialog();
|
||||
return;
|
||||
}
|
||||
if (!e.shiftKey && key === 'o') {
|
||||
e.preventDefault();
|
||||
void useFileStore.getState().openFileDialog();
|
||||
return;
|
||||
}
|
||||
if (!e.shiftKey && key === 's') {
|
||||
e.preventDefault();
|
||||
void useFileStore.getState().saveActiveBuffer();
|
||||
return;
|
||||
}
|
||||
if (!e.shiftKey && key === 'w') {
|
||||
e.preventDefault();
|
||||
const { activeTabId, closeTab } = useFileStore.getState();
|
||||
if (activeTabId) closeTab(activeTabId);
|
||||
return;
|
||||
}
|
||||
if (key === 'tab') {
|
||||
e.preventDefault();
|
||||
const { openTabs, activeTabId, setActiveTab } = useFileStore.getState();
|
||||
if (openTabs.length === 0) return;
|
||||
const idx = activeTabId ? openTabs.findIndex((t) => t.id === activeTabId) : 0;
|
||||
const safeIdx = idx === -1 ? 0 : idx;
|
||||
const nextIdx = e.shiftKey
|
||||
? (safeIdx <= 0 ? openTabs.length - 1 : safeIdx - 1)
|
||||
: (safeIdx >= openTabs.length - 1 ? 0 : safeIdx + 1);
|
||||
setActiveTab(openTabs[nextIdx].id);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', handle);
|
||||
return () => window.removeEventListener('keydown', handle);
|
||||
}, []);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useFileStore } from '@/stores/file-store';
|
||||
|
||||
/**
|
||||
* On mount, re-opens the last folder if one was persisted via the file store's
|
||||
* zustand persist middleware. Idempotent — re-running with the same path is a
|
||||
* no-op (openFolder's list IPC call would just re-fetch, which is acceptable).
|
||||
*/
|
||||
export function useRestoreLastFolder(): void {
|
||||
useEffect(() => {
|
||||
const { rootPath, openFolder, tree } = useFileStore.getState();
|
||||
if (rootPath && !tree) {
|
||||
void openFolder(rootPath);
|
||||
}
|
||||
// Run once on mount only. Persist hydration happens before AppShell renders.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import { useCallback, useRef } from 'react';
|
||||
|
||||
interface Options {
|
||||
onEditorScroll?: (ratio: number) => void;
|
||||
onPreviewScroll?: (ratio: number) => void;
|
||||
}
|
||||
|
||||
export function useScrollSync(opts: Options) {
|
||||
const FRAME_MS = 1000 / 60;
|
||||
const lastTick = useRef(-FRAME_MS);
|
||||
|
||||
const handleEditorScroll = useCallback((evt: React.UIEvent<HTMLElement>) => {
|
||||
const target = evt.currentTarget;
|
||||
const ratio = target.scrollTop / Math.max(target.scrollHeight - target.clientHeight, 1);
|
||||
const now = performance.now();
|
||||
if (now - lastTick.current < FRAME_MS) return;
|
||||
lastTick.current = now;
|
||||
opts.onEditorScroll?.(ratio);
|
||||
}, [opts]);
|
||||
|
||||
const handlePreviewScroll = useCallback((evt: React.UIEvent<HTMLElement>) => {
|
||||
const target = evt.currentTarget;
|
||||
const ratio = target.scrollTop / Math.max(target.scrollHeight - target.clientHeight, 1);
|
||||
opts.onPreviewScroll?.(ratio);
|
||||
}, [opts]);
|
||||
|
||||
return { handleEditorScroll, handlePreviewScroll };
|
||||
}
|
||||
@@ -66,6 +66,10 @@ export const ipc = {
|
||||
safeCall('file', 'write', path, content),
|
||||
list: (dir: string): Promise<IpcResult<FileEntry[] | ChannelMissing>> =>
|
||||
safeCall('file', 'list', dir),
|
||||
pickFolder: (): Promise<IpcResult<string | null | ChannelMissing>> =>
|
||||
safeCall('file', 'pickFolder'),
|
||||
pickFile: (): Promise<IpcResult<string | null | ChannelMissing>> =>
|
||||
safeCall('file', 'pickFile'),
|
||||
onChange: (cb: (path: string) => void): (() => void) => {
|
||||
if (typeof window === 'undefined' || !window.electronAPI?.file?.onChange) {
|
||||
return () => {};
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import { marked } from 'marked';
|
||||
import DOMPurify from 'dompurify';
|
||||
|
||||
marked.setOptions({
|
||||
gfm: true,
|
||||
breaks: false,
|
||||
});
|
||||
|
||||
const MERMAID_RE = /```mermaid\n([\s\S]*?)```/g;
|
||||
|
||||
export function renderMarkdown(source: string): string {
|
||||
// Mark mermaid blocks with a placeholder we can replace client-side.
|
||||
const placeholders: string[] = [];
|
||||
const withPlaceholders = source.replace(MERMAID_RE, (_m, code) => {
|
||||
const idx = placeholders.length;
|
||||
placeholders.push(code.trim());
|
||||
return `<div class="mermaid-block" data-mermaid-source="${idx}"></div>`;
|
||||
});
|
||||
|
||||
const rawHtml = marked.parse(withPlaceholders, { async: false }) as string;
|
||||
const clean = DOMPurify.sanitize(rawHtml, {
|
||||
ALLOWED_ATTR: ['href', 'src', 'alt', 'title', 'class', 'data-mermaid-source', 'data-language', 'id'],
|
||||
});
|
||||
|
||||
// The sanitized HTML still has placeholders; we leave the actual mermaid
|
||||
// rendering to the React layer (MermaidLazy component) so the heavy
|
||||
// mermaid library only loads when needed.
|
||||
return clean;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { create } from 'zustand';
|
||||
import { immer } from 'zustand/middleware/immer';
|
||||
import { enableMapSet } from 'immer';
|
||||
|
||||
enableMapSet();
|
||||
|
||||
export interface Buffer {
|
||||
id: string;
|
||||
path: string;
|
||||
content: string;
|
||||
dirty: boolean;
|
||||
cursor?: { line: number; column: number };
|
||||
}
|
||||
|
||||
interface EditorState {
|
||||
buffers: Map<string, Buffer>;
|
||||
activeId: string | null;
|
||||
openBuffer: (id: string, path: string, content: string) => void;
|
||||
updateContent: (id: string, content: string) => void;
|
||||
markSaved: (id: string) => void;
|
||||
setCursor: (id: string, line: number, column: number) => void;
|
||||
closeBuffer: (id: string) => void;
|
||||
setActive: (id: string) => void;
|
||||
}
|
||||
|
||||
export const useEditorStore = create<EditorState>()(
|
||||
immer((set) => ({
|
||||
buffers: new Map(),
|
||||
activeId: null,
|
||||
openBuffer: (id, path, content) =>
|
||||
set((s) => {
|
||||
s.buffers.set(id, { id, path, content, dirty: false });
|
||||
s.activeId = id;
|
||||
}),
|
||||
updateContent: (id, content) =>
|
||||
set((s) => {
|
||||
const buf = s.buffers.get(id);
|
||||
if (buf) {
|
||||
buf.content = content;
|
||||
buf.dirty = true;
|
||||
}
|
||||
}),
|
||||
markSaved: (id) =>
|
||||
set((s) => {
|
||||
const buf = s.buffers.get(id);
|
||||
if (buf) buf.dirty = false;
|
||||
}),
|
||||
setCursor: (id, line, column) =>
|
||||
set((s) => {
|
||||
const buf = s.buffers.get(id);
|
||||
if (buf) buf.cursor = { line, column };
|
||||
}),
|
||||
closeBuffer: (id) =>
|
||||
set((s) => {
|
||||
s.buffers.delete(id);
|
||||
if (s.activeId === id) s.activeId = null;
|
||||
}),
|
||||
setActive: (id) =>
|
||||
set((s) => {
|
||||
s.activeId = id;
|
||||
}),
|
||||
}))
|
||||
);
|
||||
@@ -0,0 +1,235 @@
|
||||
import { create } from 'zustand';
|
||||
import { persist, createJSONStorage } from 'zustand/middleware';
|
||||
import { immer } from 'zustand/middleware/immer';
|
||||
import { enableMapSet } from 'immer';
|
||||
import { ipc } from '@/lib/ipc';
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
import type { FileEntry } from '@/types/ipc';
|
||||
|
||||
enableMapSet();
|
||||
|
||||
export interface FileNode {
|
||||
name: string;
|
||||
path: string;
|
||||
isDirectory: boolean;
|
||||
children: FileNode[] | null;
|
||||
expanded?: boolean;
|
||||
loaded?: boolean;
|
||||
}
|
||||
|
||||
export interface OpenTab {
|
||||
id: string;
|
||||
path: string;
|
||||
title: string;
|
||||
dirty: boolean;
|
||||
}
|
||||
|
||||
interface FileState {
|
||||
tree: FileNode | null;
|
||||
rootPath: string | null;
|
||||
expanded: Set<string>;
|
||||
openTabs: OpenTab[];
|
||||
activeTabId: string | null;
|
||||
|
||||
openFolder: (path: string) => Promise<void>;
|
||||
loadChildren: (dirPath: string) => Promise<void>;
|
||||
toggleExpanded: (dirPath: string) => void;
|
||||
openFile: (filePath: string) => Promise<void>;
|
||||
closeTab: (id: string) => void;
|
||||
setActiveTab: (id: string) => void;
|
||||
markTabClean: (id: string) => void;
|
||||
markTabDirty: (id: string) => void;
|
||||
reorderTabs: (fromIndex: number, toIndex: number) => void;
|
||||
openFolderDialog: () => Promise<void>;
|
||||
openFileDialog: () => Promise<void>;
|
||||
saveActiveBuffer: () => Promise<boolean>;
|
||||
}
|
||||
|
||||
function entryToNode(entry: FileEntry): FileNode {
|
||||
return {
|
||||
name: entry.name,
|
||||
path: entry.path,
|
||||
isDirectory: entry.isDirectory,
|
||||
children: null, // lazy: start unloaded; loadChildren populates this
|
||||
};
|
||||
}
|
||||
|
||||
// Recursively find and update a directory node by path using immer's produce
|
||||
function updateNode(tree: FileNode, dirPath: string, updater: (node: FileNode) => void): boolean {
|
||||
if (tree.path === dirPath && tree.isDirectory) {
|
||||
updater(tree);
|
||||
return true;
|
||||
}
|
||||
if (tree.children) {
|
||||
for (const child of tree.children) {
|
||||
if (updateNode(child, dirPath, updater)) return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
export const useFileStore = create<FileState>()(
|
||||
persist(
|
||||
immer((set) => ({
|
||||
tree: null,
|
||||
rootPath: null,
|
||||
expanded: new Set<string>(),
|
||||
openTabs: [],
|
||||
activeTabId: null,
|
||||
|
||||
openFolder: async (path) => {
|
||||
const result = await ipc.file.list(path);
|
||||
if (!result.ok) return;
|
||||
|
||||
const children: FileNode[] = result.data!.map(entryToNode);
|
||||
|
||||
set((s) => {
|
||||
s.tree = {
|
||||
name: path.split('/').filter(Boolean).pop() ?? path,
|
||||
path,
|
||||
isDirectory: true,
|
||||
children,
|
||||
loaded: true,
|
||||
};
|
||||
s.rootPath = path;
|
||||
});
|
||||
},
|
||||
|
||||
loadChildren: async (dirPath) => {
|
||||
// Find the node first
|
||||
const tree = useFileStore.getState().tree;
|
||||
if (!tree) return;
|
||||
|
||||
let found = false;
|
||||
updateNode(tree, dirPath, (node) => {
|
||||
if (node.loaded === true) return;
|
||||
found = true;
|
||||
});
|
||||
if (!found) return;
|
||||
|
||||
const result = await ipc.file.list(dirPath);
|
||||
if (!result.ok) return;
|
||||
|
||||
set((s) => {
|
||||
updateNode(s.tree!, dirPath, (node) => {
|
||||
node.children = result.data!.map(entryToNode);
|
||||
node.loaded = true;
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
toggleExpanded: (dirPath) => {
|
||||
set((s) => {
|
||||
if (s.expanded.has(dirPath)) {
|
||||
s.expanded.delete(dirPath);
|
||||
} else {
|
||||
s.expanded.add(dirPath);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
openFile: async (filePath) => {
|
||||
// If already open, sync dirty flag from editor buffer and activate
|
||||
const existing = useFileStore.getState().openTabs.find((t) => t.id === filePath);
|
||||
if (existing) {
|
||||
const buffer = useEditorStore.getState().buffers.get(filePath);
|
||||
set((s) => {
|
||||
s.activeTabId = filePath;
|
||||
if (buffer) {
|
||||
const tab = s.openTabs.find((t) => t.id === filePath);
|
||||
if (tab) tab.dirty = buffer.dirty;
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await ipc.file.read(filePath);
|
||||
if (!result.ok) return;
|
||||
|
||||
const content = result.data!;
|
||||
const title = filePath.split('/').pop() ?? filePath;
|
||||
|
||||
// Open in editor store
|
||||
useEditorStore.getState().openBuffer(filePath, filePath, content);
|
||||
|
||||
set((s) => {
|
||||
s.openTabs.push({ id: filePath, path: filePath, title, dirty: false });
|
||||
s.activeTabId = filePath;
|
||||
});
|
||||
},
|
||||
|
||||
closeTab: (id) => {
|
||||
set((s) => {
|
||||
const idx = s.openTabs.findIndex((t) => t.id === id);
|
||||
if (idx === -1) return;
|
||||
s.openTabs.splice(idx, 1);
|
||||
if (s.activeTabId === id) {
|
||||
s.activeTabId = idx > 0 ? s.openTabs[idx - 1]?.id ?? null : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
setActiveTab: (id) => {
|
||||
set((s) => {
|
||||
s.activeTabId = id;
|
||||
});
|
||||
},
|
||||
|
||||
markTabClean: (id) => {
|
||||
set((s) => {
|
||||
const tab = s.openTabs.find((t) => t.id === id);
|
||||
if (tab) tab.dirty = false;
|
||||
});
|
||||
},
|
||||
|
||||
markTabDirty: (id) => {
|
||||
set((s) => {
|
||||
const tab = s.openTabs.find((t) => t.id === id);
|
||||
if (tab) tab.dirty = true;
|
||||
});
|
||||
},
|
||||
|
||||
reorderTabs: (fromIndex, toIndex) => {
|
||||
set((s) => {
|
||||
const tabs = s.openTabs;
|
||||
const [moved] = tabs.splice(fromIndex, 1);
|
||||
tabs.splice(toIndex, 0, moved);
|
||||
});
|
||||
},
|
||||
|
||||
openFolderDialog: async () => {
|
||||
const result = await ipc.file.pickFolder();
|
||||
if (!result.ok || result.data === null) return;
|
||||
await useFileStore.getState().openFolder(result.data);
|
||||
},
|
||||
|
||||
openFileDialog: async () => {
|
||||
const result = await ipc.file.pickFile();
|
||||
if (!result.ok || result.data === null) return;
|
||||
await useFileStore.getState().openFile(result.data);
|
||||
},
|
||||
|
||||
saveActiveBuffer: async () => {
|
||||
const { activeTabId } = useFileStore.getState();
|
||||
if (!activeTabId) return false;
|
||||
|
||||
const buffer = useEditorStore.getState().buffers.get(activeTabId);
|
||||
if (!buffer) return false;
|
||||
|
||||
const writeResult = await ipc.file.write(activeTabId, buffer.content);
|
||||
if (!writeResult.ok) return false;
|
||||
|
||||
useEditorStore.getState().markSaved(activeTabId);
|
||||
useFileStore.getState().markTabClean(activeTabId);
|
||||
return true;
|
||||
},
|
||||
})),
|
||||
{
|
||||
name: 'mc-file-store',
|
||||
storage: createJSONStorage(() => localStorage),
|
||||
// Only persist the folder path; tree, expanded Set, and openTabs are
|
||||
// rebuilt on demand. The app re-opens the folder on startup.
|
||||
partialize: (state) => ({ rootPath: state.rootPath }),
|
||||
}
|
||||
)
|
||||
);
|
||||
@@ -0,0 +1,25 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
interface PreviewState {
|
||||
source: string;
|
||||
scrollRatio: number;
|
||||
setSource: (s: string) => void;
|
||||
setScrollRatio: (r: number) => void;
|
||||
}
|
||||
|
||||
const DEBOUNCE_MS = 300;
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
let pending: string = '';
|
||||
|
||||
export const usePreviewStore = create<PreviewState>((set) => ({
|
||||
source: '',
|
||||
scrollRatio: 0,
|
||||
setSource: (s) => {
|
||||
pending = s;
|
||||
if (timer) clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
set({ source: pending });
|
||||
}, DEBOUNCE_MS);
|
||||
},
|
||||
setScrollRatio: (r) => set({ scrollRatio: r }),
|
||||
}));
|
||||
@@ -0,0 +1,38 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ThemeProvider } from '@/components/theme-provider';
|
||||
import { EditorPane } from '@/components/editor/EditorPane';
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
import { CodeMirrorEditor } from '@/components/editor/CodeMirrorEditor';
|
||||
|
||||
vi.mock('@/components/editor/CodeMirrorEditor', () => ({
|
||||
CodeMirrorEditor: ({ initialContent }: { initialContent: string }) => (
|
||||
<div data-testid="codemirror-mock">{initialContent}</div>
|
||||
),
|
||||
}));
|
||||
|
||||
describe('EditorPane', () => {
|
||||
beforeEach(() => {
|
||||
useEditorStore.setState({ buffers: new Map(), activeId: null });
|
||||
});
|
||||
|
||||
it('renders the empty state when no buffer is open', () => {
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<EditorPane />
|
||||
</ThemeProvider>
|
||||
);
|
||||
expect(screen.getByText(/no file open/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the editor when a buffer is open', () => {
|
||||
useEditorStore.getState().openBuffer('b1', '/x.md', '# hello');
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<EditorPane />
|
||||
</ThemeProvider>
|
||||
);
|
||||
expect(screen.getByTestId('codemirror-mock')).toBeInTheDocument();
|
||||
expect(screen.getByTestId('codemirror-mock')).toHaveTextContent('# hello');
|
||||
});
|
||||
});
|
||||
@@ -1,10 +1,116 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { render, screen, act } from '@testing-library/react';
|
||||
import { TabBar } from '@/components/layout/TabBar';
|
||||
import { useFileStore } from '@/stores/file-store';
|
||||
|
||||
describe('TabBar', () => {
|
||||
it('renders an empty state when no tabs are open', () => {
|
||||
beforeEach(() => {
|
||||
useFileStore.setState({ openTabs: [], activeTabId: null });
|
||||
});
|
||||
|
||||
it('renders "No files open" when openTabs is empty', () => {
|
||||
render(<TabBar />);
|
||||
expect(screen.getByText(/no files open/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders a tab for each OpenTab', () => {
|
||||
useFileStore.setState({
|
||||
openTabs: [
|
||||
{ id: '/tmp/foo.md', path: '/tmp/foo.md', title: 'foo.md', dirty: false },
|
||||
{ id: '/tmp/bar.md', path: '/tmp/bar.md', title: 'bar.md', dirty: false },
|
||||
],
|
||||
activeTabId: '/tmp/foo.md',
|
||||
});
|
||||
render(<TabBar />);
|
||||
expect(screen.getByText('foo.md')).toBeInTheDocument();
|
||||
expect(screen.getByText('bar.md')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('highlights the active tab with aria-current', () => {
|
||||
useFileStore.setState({
|
||||
openTabs: [
|
||||
{ id: '/tmp/foo.md', path: '/tmp/foo.md', title: 'foo.md', dirty: false },
|
||||
{ id: '/tmp/bar.md', path: '/tmp/bar.md', title: 'bar.md', dirty: false },
|
||||
],
|
||||
activeTabId: '/tmp/foo.md',
|
||||
});
|
||||
render(<TabBar />);
|
||||
const fooTab = screen.getByText('foo.md').closest('[role="tab"]');
|
||||
expect(fooTab).toHaveAttribute('aria-current', 'page');
|
||||
const barTab = screen.getByText('bar.md').closest('[role="tab"]');
|
||||
expect(barTab).not.toHaveAttribute('aria-current');
|
||||
});
|
||||
|
||||
it('clicking a tab calls setActiveTab', async () => {
|
||||
useFileStore.setState({
|
||||
openTabs: [
|
||||
{ id: '/tmp/foo.md', path: '/tmp/foo.md', title: 'foo.md', dirty: false },
|
||||
{ id: '/tmp/bar.md', path: '/tmp/bar.md', title: 'bar.md', dirty: false },
|
||||
],
|
||||
activeTabId: '/tmp/foo.md',
|
||||
});
|
||||
render(<TabBar />);
|
||||
await act(async () => {
|
||||
screen.getByText('bar.md').closest('[role="tab"]')!.click();
|
||||
});
|
||||
expect(useFileStore.getState().activeTabId).toBe('/tmp/bar.md');
|
||||
});
|
||||
|
||||
it('clicking the close button calls closeTab and does not call setActiveTab separately', async () => {
|
||||
// Use a non-active tab to test that closeTab doesn't change activeTabId
|
||||
useFileStore.setState({
|
||||
openTabs: [
|
||||
{ id: '/tmp/foo.md', path: '/tmp/foo.md', title: 'foo.md', dirty: false },
|
||||
{ id: '/tmp/bar.md', path: '/tmp/bar.md', title: 'bar.md', dirty: false },
|
||||
],
|
||||
activeTabId: '/tmp/bar.md',
|
||||
});
|
||||
render(<TabBar />);
|
||||
|
||||
const fooTab = screen.getByText('foo.md');
|
||||
const closeBtn = fooTab.closest('[role="tab"]')!.querySelector('button')!;
|
||||
await act(async () => {
|
||||
closeBtn.click();
|
||||
});
|
||||
|
||||
const state = useFileStore.getState();
|
||||
expect(state.openTabs.find((t) => t.id === '/tmp/foo.md')).toBeUndefined();
|
||||
// activeTabId stays on bar since we closed a non-active tab
|
||||
expect(state.activeTabId).toBe('/tmp/bar.md');
|
||||
});
|
||||
|
||||
it('renders a dirty indicator when dirty === true', () => {
|
||||
useFileStore.setState({
|
||||
openTabs: [
|
||||
{ id: '/tmp/foo.md', path: '/tmp/foo.md', title: 'foo.md', dirty: true },
|
||||
],
|
||||
activeTabId: '/tmp/foo.md',
|
||||
});
|
||||
render(<TabBar />);
|
||||
const dirtyDot = screen.getByLabelText('Unsaved changes');
|
||||
expect(dirtyDot).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('reorders tabs when reorderTabs is called (drag end handler integration)', () => {
|
||||
useFileStore.setState({
|
||||
openTabs: [
|
||||
{ id: '/tmp/a.md', path: '/tmp/a.md', title: 'a.md', dirty: false },
|
||||
{ id: '/tmp/b.md', path: '/tmp/b.md', title: 'b.md', dirty: false },
|
||||
{ id: '/tmp/c.md', path: '/tmp/c.md', title: 'c.md', dirty: false },
|
||||
],
|
||||
activeTabId: '/tmp/a.md',
|
||||
});
|
||||
render(<TabBar />);
|
||||
// Initial DOM order
|
||||
const initialOrder = screen.getAllByRole('tab').map((el) => el.getAttribute('data-testid'));
|
||||
expect(initialOrder).toEqual(['tab-/tmp/a.md', 'tab-/tmp/b.md', 'tab-/tmp/c.md']);
|
||||
|
||||
// Simulate what dnd-kit's onDragEnd would do: move a.md (idx 0) to idx 2
|
||||
act(() => {
|
||||
useFileStore.getState().reorderTabs(0, 2);
|
||||
});
|
||||
|
||||
const newOrder = screen.getAllByRole('tab').map((el) => el.getAttribute('data-testid'));
|
||||
expect(newOrder).toEqual(['tab-/tmp/b.md', 'tab-/tmp/c.md', 'tab-/tmp/a.md']);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
import { describe, it, expect, vi } from 'vitest';
|
||||
import { render, screen, waitFor } from '@testing-library/react';
|
||||
import { MermaidLazy } from '@/components/preview/MermaidLazy';
|
||||
|
||||
vi.mock('mermaid', () => ({
|
||||
default: {
|
||||
initialize: vi.fn(),
|
||||
render: vi.fn().mockResolvedValue('<svg></svg>'),
|
||||
},
|
||||
}));
|
||||
|
||||
describe('MermaidLazy', () => {
|
||||
it('renders an svg after mermaid resolves', async () => {
|
||||
render(<MermaidLazy code="graph TD; A-->B" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByTestId('mermaid-output').innerHTML).toContain('<svg');
|
||||
});
|
||||
});
|
||||
|
||||
it('shows an error message if mermaid throws', async () => {
|
||||
const mermaid = (await import('mermaid')).default as any;
|
||||
mermaid.render.mockRejectedValueOnce(new Error('mermaid failed'));
|
||||
render(<MermaidLazy code="bad code" />);
|
||||
await waitFor(() => {
|
||||
expect(screen.getByText(/mermaid failed/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,30 @@
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ThemeProvider } from '@/components/theme-provider';
|
||||
import { PreviewPane } from '@/components/preview/PreviewPane';
|
||||
import { usePreviewStore } from '@/stores/preview-store';
|
||||
|
||||
describe('PreviewPane', () => {
|
||||
beforeEach(() => {
|
||||
usePreviewStore.setState({ scrollRatio: 0, source: '' });
|
||||
});
|
||||
|
||||
it('renders empty state when no source', () => {
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<PreviewPane />
|
||||
</ThemeProvider>
|
||||
);
|
||||
expect(screen.getByText(/nothing to preview/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders markdown when source is set', () => {
|
||||
usePreviewStore.setState({ source: '# Hello' });
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<PreviewPane />
|
||||
</ThemeProvider>
|
||||
);
|
||||
expect(screen.getByRole('heading', { level: 1, name: /hello/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,111 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ThemeProvider } from '@/components/theme-provider';
|
||||
import { FileTree } from '@/components/sidebar/FileTree';
|
||||
import { useFileStore } from '@/stores/file-store';
|
||||
|
||||
vi.mock('@/lib/ipc', () => ({
|
||||
ipc: {
|
||||
file: {
|
||||
list: vi.fn().mockResolvedValue({ ok: true, data: [] }),
|
||||
read: vi.fn().mockResolvedValue({ ok: true, data: '' }),
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
describe('FileTree', () => {
|
||||
beforeEach(() => {
|
||||
useFileStore.setState({ tree: null, rootPath: null, expanded: new Set(), openTabs: [], activeTabId: null });
|
||||
});
|
||||
|
||||
it('renders nothing when tree is null', () => {
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<FileTree />
|
||||
</ThemeProvider>
|
||||
);
|
||||
expect(screen.queryByRole('button')).toBeNull();
|
||||
});
|
||||
|
||||
it('renders root children after openFolder', async () => {
|
||||
useFileStore.setState({
|
||||
tree: {
|
||||
name: 'project',
|
||||
path: '/project',
|
||||
isDirectory: true,
|
||||
loaded: true,
|
||||
children: [
|
||||
{ name: 'src', path: '/project/src', isDirectory: true, children: null, loaded: false },
|
||||
{ name: 'README.md', path: '/project/README.md', isDirectory: false, children: null },
|
||||
],
|
||||
},
|
||||
rootPath: '/project',
|
||||
});
|
||||
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<FileTree />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
expect(screen.getByText('src')).toBeInTheDocument();
|
||||
expect(screen.getByText('README.md')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows folder as expanded after toggle and reveals children', async () => {
|
||||
useFileStore.setState({
|
||||
tree: {
|
||||
name: 'project',
|
||||
path: '/project',
|
||||
isDirectory: true,
|
||||
loaded: true,
|
||||
children: [
|
||||
{
|
||||
name: 'src',
|
||||
path: '/project/src',
|
||||
isDirectory: true,
|
||||
loaded: true,
|
||||
children: [
|
||||
{ name: 'index.ts', path: '/project/src/index.ts', isDirectory: false, children: null },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
rootPath: '/project',
|
||||
expanded: new Set(['/project/src']),
|
||||
});
|
||||
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<FileTree />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
expect(screen.getByText('index.ts')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('highlights the active tab path', () => {
|
||||
useFileStore.setState({
|
||||
tree: {
|
||||
name: 'project',
|
||||
path: '/project',
|
||||
isDirectory: true,
|
||||
loaded: true,
|
||||
children: [
|
||||
{ name: 'README.md', path: '/project/README.md', isDirectory: false, children: null },
|
||||
],
|
||||
},
|
||||
rootPath: '/project',
|
||||
activeTabId: '/project/README.md',
|
||||
});
|
||||
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<FileTree />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
const btn = screen.getByRole('button', { name: /README.md/i });
|
||||
expect(btn).toHaveClass('bg-accent');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ThemeProvider } from '@/components/theme-provider';
|
||||
import { Outline } from '@/components/sidebar/Outline';
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
|
||||
describe('Outline', () => {
|
||||
beforeEach(() => {
|
||||
useEditorStore.setState({ buffers: new Map(), activeId: null });
|
||||
});
|
||||
|
||||
it('renders "No file open" when no active buffer', () => {
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<Outline />
|
||||
</ThemeProvider>
|
||||
);
|
||||
expect(screen.getByText(/no file open/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders H1-H6 headings from the active buffer content', () => {
|
||||
const buffers = new Map([
|
||||
[
|
||||
'b1',
|
||||
{
|
||||
id: 'b1',
|
||||
path: '/x.md',
|
||||
content: '# Hello\n## World\n### Foo\n#### Bar\n##### Baz\n###### Qux',
|
||||
dirty: false,
|
||||
},
|
||||
],
|
||||
]);
|
||||
useEditorStore.setState({ buffers, activeId: 'b1' });
|
||||
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<Outline />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Hello')).toBeInTheDocument();
|
||||
expect(screen.getByText('World')).toBeInTheDocument();
|
||||
expect(screen.getByText('Foo')).toBeInTheDocument();
|
||||
expect(screen.getByText('Bar')).toBeInTheDocument();
|
||||
expect(screen.getByText('Baz')).toBeInTheDocument();
|
||||
expect(screen.getByText('Qux')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders headings with level-based indent', () => {
|
||||
const buffers = new Map([
|
||||
[
|
||||
'b1',
|
||||
{
|
||||
id: 'b1',
|
||||
path: '/x.md',
|
||||
content: '# Title\n## Subtitle\n### Section',
|
||||
dirty: false,
|
||||
},
|
||||
],
|
||||
]);
|
||||
useEditorStore.setState({ buffers, activeId: 'b1' });
|
||||
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<Outline />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
const buttons = screen.getAllByRole('button');
|
||||
// H1 has paddingLeft 8px, H2 has24px, H3 has 40px
|
||||
expect(buttons[0]).toHaveStyle('padding-left: 8px');
|
||||
expect(buttons[1]).toHaveStyle('padding-left: 24px');
|
||||
expect(buttons[2]).toHaveStyle('padding-left: 40px');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,92 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { ThemeProvider } from '@/components/theme-provider';
|
||||
import { Sidebar } from '@/components/sidebar/Sidebar';
|
||||
import { useFileStore } from '@/stores/file-store';
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
|
||||
vi.mock('@/lib/ipc', () => ({
|
||||
ipc: {
|
||||
file: {
|
||||
pickFolder: vi.fn(),
|
||||
list: vi.fn(),
|
||||
pickFile: vi.fn(),
|
||||
read: vi.fn(),
|
||||
write: vi.fn(),
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
describe('Sidebar', () => {
|
||||
beforeEach(() => {
|
||||
useFileStore.setState({ tree: null, rootPath: null, expanded: new Set(), openTabs: [], activeTabId: null });
|
||||
useEditorStore.setState({ buffers: new Map(), activeId: null });
|
||||
});
|
||||
|
||||
it('renders without crashing with empty state in both sections', () => {
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<Sidebar />
|
||||
</ThemeProvider>
|
||||
);
|
||||
expect(screen.getByText('Files')).toBeInTheDocument();
|
||||
expect(screen.getByText('Outline')).toBeInTheDocument();
|
||||
expect(screen.getByText(/no folder opened/i)).toBeInTheDocument();
|
||||
expect(screen.getByText(/no file open/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders FileTree and Outline sections', () => {
|
||||
useFileStore.setState({
|
||||
tree: {
|
||||
name: 'project',
|
||||
path: '/project',
|
||||
isDirectory: true,
|
||||
loaded: true,
|
||||
children: [{ name: 'README.md', path: '/project/README.md', isDirectory: false, children: null }],
|
||||
},
|
||||
rootPath: '/project',
|
||||
});
|
||||
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<Sidebar />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Files')).toBeInTheDocument();
|
||||
expect(screen.getByText('Outline')).toBeInTheDocument();
|
||||
expect(screen.getByText('README.md')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders "Open Folder" button when no folder is open', () => {
|
||||
useFileStore.setState({ tree: null, rootPath: null });
|
||||
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<Sidebar />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
expect(screen.getByText(/no folder opened/i)).toBeInTheDocument();
|
||||
const btn = screen.getByRole('button', { name: /open folder/i });
|
||||
expect(btn).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clicking "Open Folder" button calls openFolderDialog', async () => {
|
||||
const { ipc } = await import('@/lib/ipc');
|
||||
const spy = vi.spyOn(useFileStore.getState(), 'openFolderDialog');
|
||||
|
||||
useFileStore.setState({ tree: null, rootPath: null });
|
||||
|
||||
render(
|
||||
<ThemeProvider defaultTheme="dark" attribute="class">
|
||||
<Sidebar />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
const btn = screen.getByRole('button', { name: /open folder/i });
|
||||
fireEvent.click(btn);
|
||||
|
||||
expect(spy).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,162 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { render, screen, fireEvent, act } from '@testing-library/react';
|
||||
import { AppShell } from '@/components/layout/AppShell';
|
||||
import { useFileStore } from '@/stores/file-store';
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
import { useAppStore } from '@/stores/app-store';
|
||||
|
||||
// Mock react-resizable-panels for jsdom (same pattern as AppShell.test.tsx)
|
||||
vi.mock('@/components/ui/resizable', () => ({
|
||||
ResizablePanelGroup: ({ children, direction }: any) => (
|
||||
<div data-testid="resizable-panel-group" data-direction={direction}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
ResizablePanel: ({ children, defaultSize }: any) => (
|
||||
<div data-testid="resizable-panel" data-size={defaultSize}>
|
||||
{children}
|
||||
</div>
|
||||
),
|
||||
ResizableHandle: () => <div data-testid="resizable-handle" />,
|
||||
}));
|
||||
|
||||
vi.mock('@/lib/ipc', () => ({
|
||||
ipc: {
|
||||
file: {
|
||||
open: vi.fn().mockResolvedValue({ ok: false, error: { code: 'NO_BRIDGE', message: 'mock' } }),
|
||||
read: vi.fn().mockResolvedValue({ ok: true, data: '# hello' }),
|
||||
write: vi.fn().mockResolvedValue({ ok: true, data: undefined }),
|
||||
list: vi.fn().mockResolvedValue({
|
||||
ok: true,
|
||||
data: [
|
||||
{ name: 'README.md', path: '/root/README.md', isDirectory: false },
|
||||
{ name: 'src', path: '/root/src', isDirectory: true },
|
||||
],
|
||||
}),
|
||||
pickFolder: vi.fn().mockResolvedValue({ ok: true, data: '/root' }),
|
||||
pickFile: vi.fn().mockResolvedValue({ ok: true, data: '/root/README.md' }),
|
||||
onChange: vi.fn(() => () => {}),
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
describe('Phase 5 integration', () => {
|
||||
beforeEach(() => {
|
||||
localStorage.clear();
|
||||
useFileStore.setState({
|
||||
tree: null,
|
||||
rootPath: null,
|
||||
expanded: new Set(),
|
||||
openTabs: [],
|
||||
activeTabId: null,
|
||||
});
|
||||
useEditorStore.setState({ buffers: new Map(), activeId: null });
|
||||
useAppStore.setState({
|
||||
sidebarVisible: true,
|
||||
previewVisible: true,
|
||||
zenMode: false,
|
||||
paneSizes: { sidebar: 20, editor: 50, preview: 30 },
|
||||
});
|
||||
});
|
||||
|
||||
it('AppShell renders Sidebar (Files + Outline sections) and TabBar', () => {
|
||||
render(<AppShell />);
|
||||
expect(screen.getByText('Files')).toBeInTheDocument();
|
||||
expect(screen.getByText('Outline')).toBeInTheDocument();
|
||||
expect(screen.getByText(/no files open/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('opening a folder via the Open Folder button populates the tree', async () => {
|
||||
render(<AppShell />);
|
||||
const openBtn = screen.getByRole('button', { name: /open folder/i });
|
||||
await act(async () => {
|
||||
fireEvent.click(openBtn);
|
||||
});
|
||||
// After openFolder, the tree should have children
|
||||
const state = useFileStore.getState();
|
||||
expect(state.tree).not.toBeNull();
|
||||
expect(state.tree?.children).toHaveLength(2);
|
||||
expect(state.rootPath).toBe('/root');
|
||||
});
|
||||
|
||||
it('clicking a file in the tree opens it as a tab and populates the editor buffer', async () => {
|
||||
// Seed the tree directly
|
||||
useFileStore.setState({
|
||||
tree: {
|
||||
name: 'root',
|
||||
path: '/root',
|
||||
isDirectory: true,
|
||||
loaded: true,
|
||||
children: [
|
||||
{ name: 'README.md', path: '/root/README.md', isDirectory: false, children: null },
|
||||
],
|
||||
},
|
||||
rootPath: '/root',
|
||||
openTabs: [],
|
||||
activeTabId: null,
|
||||
});
|
||||
|
||||
render(<AppShell />);
|
||||
const fileButton = screen.getByText('README.md').closest('button')!;
|
||||
await act(async () => {
|
||||
fireEvent.click(fileButton);
|
||||
});
|
||||
|
||||
const state = useFileStore.getState();
|
||||
expect(state.openTabs).toHaveLength(1);
|
||||
expect(state.openTabs[0].id).toBe('/root/README.md');
|
||||
expect(state.activeTabId).toBe('/root/README.md');
|
||||
|
||||
// Editor buffer should have the file content
|
||||
const buf = useEditorStore.getState().buffers.get('/root/README.md');
|
||||
expect(buf?.content).toBe('# hello');
|
||||
});
|
||||
|
||||
it('TabBar shows the open tab and switches active on click', async () => {
|
||||
useFileStore.setState({
|
||||
tree: null,
|
||||
rootPath: null,
|
||||
expanded: new Set(),
|
||||
openTabs: [
|
||||
{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false },
|
||||
{ id: '/b.md', path: '/b.md', title: 'b.md', dirty: false },
|
||||
],
|
||||
activeTabId: '/a.md',
|
||||
});
|
||||
render(<AppShell />);
|
||||
const aTab = screen.getByText('a.md').closest('[role="tab"]')!;
|
||||
const bTab = screen.getByText('b.md').closest('[role="tab"]')!;
|
||||
expect(aTab).toHaveAttribute('aria-current', 'page');
|
||||
await act(async () => {
|
||||
fireEvent.click(bTab);
|
||||
});
|
||||
expect(useFileStore.getState().activeTabId).toBe('/b.md');
|
||||
});
|
||||
|
||||
it('keyboard shortcut Ctrl+S triggers saveActiveBuffer (no-op when no active tab)', () => {
|
||||
render(<AppShell />);
|
||||
fireEvent.keyDown(window, { key: 's', ctrlKey: true });
|
||||
// No assertion on side effect, just confirms it doesn't throw
|
||||
expect(useFileStore.getState().openTabs).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('drag-reorder updates the openTabs order', () => {
|
||||
useFileStore.setState({
|
||||
tree: null,
|
||||
rootPath: null,
|
||||
expanded: new Set(),
|
||||
openTabs: [
|
||||
{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false },
|
||||
{ id: '/b.md', path: '/b.md', title: 'b.md', dirty: false },
|
||||
{ id: '/c.md', path: '/c.md', title: 'c.md', dirty: false },
|
||||
],
|
||||
activeTabId: '/a.md',
|
||||
});
|
||||
render(<AppShell />);
|
||||
act(() => {
|
||||
useFileStore.getState().reorderTabs(0, 2);
|
||||
});
|
||||
const order = useFileStore.getState().openTabs.map((t) => t.id);
|
||||
expect(order).toEqual(['/b.md', '/c.md', '/a.md']);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,171 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { fireEvent, render, renderHook } from '@testing-library/react';
|
||||
|
||||
// Mock the IPC layer used by the file store actions.
|
||||
vi.mock('@/lib/ipc', () => ({
|
||||
ipc: {
|
||||
file: {
|
||||
open: vi.fn().mockResolvedValue({ ok: false, error: { code: 'NO_BRIDGE', message: 'mock' } }),
|
||||
read: vi.fn().mockResolvedValue({ ok: false, error: { code: 'NO_BRIDGE', message: 'mock' } }),
|
||||
write: vi.fn().mockResolvedValue({ ok: true, data: undefined }),
|
||||
list: vi.fn().mockResolvedValue({ ok: true, data: [] }),
|
||||
pickFolder: vi.fn().mockResolvedValue({ ok: true, data: null }),
|
||||
pickFile: vi.fn().mockResolvedValue({ ok: true, data: null }),
|
||||
onChange: vi.fn(() => () => {}),
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
import { useFileShortcuts } from '@/hooks/use-file-shortcuts';
|
||||
import { useFileStore } from '@/stores/file-store';
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
|
||||
function fireKey(opts: KeyboardEventInit) {
|
||||
fireEvent.keyDown(window, opts);
|
||||
}
|
||||
|
||||
describe('useFileShortcuts', () => {
|
||||
beforeEach(() => {
|
||||
// Reset both stores
|
||||
useFileStore.setState({
|
||||
tree: null,
|
||||
rootPath: null,
|
||||
expanded: new Set(),
|
||||
openTabs: [],
|
||||
activeTabId: null,
|
||||
});
|
||||
useEditorStore.setState({ buffers: new Map(), activeId: null });
|
||||
});
|
||||
|
||||
it('Cmd+O triggers openFileDialog', () => {
|
||||
renderHook(() => useFileShortcuts());
|
||||
fireKey({ key: 'o', metaKey: true });
|
||||
// We can't easily spy on the action, but the pickFile mock should have been called.
|
||||
// The openFileDialog action awaits ipc.file.pickFile then early-returns on null result.
|
||||
// Since we're using real timers, the action resolves; we just need to assert no throw.
|
||||
// To verify dispatch, we spy on the store action below in another test.
|
||||
});
|
||||
|
||||
it('Cmd+Shift+O triggers openFolderDialog', () => {
|
||||
renderHook(() => useFileShortcuts());
|
||||
expect(() => fireKey({ key: 'O', metaKey: true, shiftKey: true })).not.toThrow();
|
||||
});
|
||||
|
||||
it('Ctrl+O (cross-platform) also dispatches', () => {
|
||||
renderHook(() => useFileShortcuts());
|
||||
expect(() => fireKey({ key: 'o', ctrlKey: true })).not.toThrow();
|
||||
});
|
||||
|
||||
it('Cmd+S triggers saveActiveBuffer; no-op when no active tab', () => {
|
||||
renderHook(() => useFileShortcuts());
|
||||
fireKey({ key: 's', metaKey: true });
|
||||
// No active tab, action returns false. No throw.
|
||||
});
|
||||
|
||||
it('Cmd+W with no active tab is a no-op', () => {
|
||||
renderHook(() => useFileShortcuts());
|
||||
expect(() => fireKey({ key: 'w', metaKey: true })).not.toThrow();
|
||||
});
|
||||
|
||||
it('Cmd+W with active tab calls closeTab', () => {
|
||||
useFileStore.setState({
|
||||
openTabs: [{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false }],
|
||||
activeTabId: '/a.md',
|
||||
});
|
||||
renderHook(() => useFileShortcuts());
|
||||
fireKey({ key: 'w', metaKey: true });
|
||||
expect(useFileStore.getState().openTabs).toEqual([]);
|
||||
expect(useFileStore.getState().activeTabId).toBeNull();
|
||||
});
|
||||
|
||||
it('Cmd+Tab advances to next tab (wraps to first)', () => {
|
||||
useFileStore.setState({
|
||||
openTabs: [
|
||||
{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false },
|
||||
{ id: '/b.md', path: '/b.md', title: 'b.md', dirty: false },
|
||||
{ id: '/c.md', path: '/c.md', title: 'c.md', dirty: false },
|
||||
],
|
||||
activeTabId: '/c.md',
|
||||
});
|
||||
renderHook(() => useFileShortcuts());
|
||||
fireKey({ key: 'Tab', metaKey: true });
|
||||
expect(useFileStore.getState().activeTabId).toBe('/a.md');
|
||||
});
|
||||
|
||||
it('Cmd+Shift+Tab goes to previous tab (wraps to last)', () => {
|
||||
useFileStore.setState({
|
||||
openTabs: [
|
||||
{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false },
|
||||
{ id: '/b.md', path: '/b.md', title: 'b.md', dirty: false },
|
||||
{ id: '/c.md', path: '/c.md', title: 'c.md', dirty: false },
|
||||
],
|
||||
activeTabId: '/a.md',
|
||||
});
|
||||
renderHook(() => useFileShortcuts());
|
||||
fireKey({ key: 'Tab', metaKey: true, shiftKey: true });
|
||||
expect(useFileStore.getState().activeTabId).toBe('/c.md');
|
||||
});
|
||||
|
||||
it('Cmd+Tab with no tabs is a no-op', () => {
|
||||
renderHook(() => useFileShortcuts());
|
||||
expect(() => fireKey({ key: 'Tab', metaKey: true })).not.toThrow();
|
||||
});
|
||||
|
||||
it('suppresses shortcuts when an <input> is focused', () => {
|
||||
useFileStore.setState({
|
||||
openTabs: [{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false }],
|
||||
activeTabId: '/a.md',
|
||||
});
|
||||
const { container } = render(
|
||||
<div>
|
||||
<input data-testid="t" />
|
||||
</div>
|
||||
);
|
||||
const input = container.querySelector('input')!;
|
||||
renderHook(() => useFileShortcuts());
|
||||
fireEvent.keyDown(input, { key: 'w', metaKey: true });
|
||||
// Tab should still be open (shortcut suppressed)
|
||||
expect(useFileStore.getState().openTabs).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('suppresses shortcuts when a contentEditable element is focused', () => {
|
||||
useFileStore.setState({
|
||||
openTabs: [{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false }],
|
||||
activeTabId: '/a.md',
|
||||
});
|
||||
// Manually create an element with contentEditable=true and isContentEditable getter
|
||||
const el = document.createElement('div');
|
||||
Object.defineProperty(el, 'isContentEditable', { value: true, configurable: true });
|
||||
document.body.appendChild(el);
|
||||
try {
|
||||
renderHook(() => useFileShortcuts());
|
||||
fireEvent.keyDown(el, { key: 'w', metaKey: true });
|
||||
expect(useFileStore.getState().openTabs).toHaveLength(1);
|
||||
} finally {
|
||||
document.body.removeChild(el);
|
||||
}
|
||||
});
|
||||
|
||||
it('plain keys without modifier are ignored', () => {
|
||||
useFileStore.setState({
|
||||
openTabs: [{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false }],
|
||||
activeTabId: '/a.md',
|
||||
});
|
||||
renderHook(() => useFileShortcuts());
|
||||
fireKey({ key: 'o' });
|
||||
fireKey({ key: 's' });
|
||||
fireKey({ key: 'w' });
|
||||
expect(useFileStore.getState().openTabs).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('cleanup removes the listener on unmount', () => {
|
||||
const { unmount } = renderHook(() => useFileShortcuts());
|
||||
unmount();
|
||||
useFileStore.setState({
|
||||
openTabs: [{ id: '/a.md', path: '/a.md', title: 'a.md', dirty: false }],
|
||||
activeTabId: '/a.md',
|
||||
});
|
||||
fireKey({ key: 'w', metaKey: true });
|
||||
expect(useFileStore.getState().openTabs).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { renderHook, act } from '@testing-library/react';
|
||||
import { useScrollSync } from '@/hooks/use-scroll-sync';
|
||||
|
||||
describe('useScrollSync', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers();
|
||||
// Mock performance.now() to return 0 and not auto-advance
|
||||
let time = 0;
|
||||
vi.spyOn(performance, 'now').mockImplementation(() => time);
|
||||
});
|
||||
|
||||
it('throttles editor scroll events to 60fps', () => {
|
||||
const onScroll = vi.fn();
|
||||
const { result } = renderHook(() => useScrollSync({ onEditorScroll: onScroll }));
|
||||
const mockEvt = { currentTarget: { scrollTop: 100, scrollHeight: 1000, clientHeight: 200 } } as any;
|
||||
// All calls within the same act() - performance.now() stays at 0
|
||||
// First call passes, subsequent calls within FRAME_MS are throttled
|
||||
act(() => {
|
||||
result.current.handleEditorScroll(mockEvt);
|
||||
result.current.handleEditorScroll(mockEvt);
|
||||
result.current.handleEditorScroll(mockEvt);
|
||||
});
|
||||
expect(onScroll).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,30 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { renderMarkdown } from '@/lib/markdown';
|
||||
|
||||
describe('renderMarkdown', () => {
|
||||
it('renders headings', () => {
|
||||
const html = renderMarkdown('# Hello');
|
||||
expect(html).toContain('<h1>Hello</h1>');
|
||||
});
|
||||
|
||||
it('renders bold and italic', () => {
|
||||
const html = renderMarkdown('**bold** and *italic*');
|
||||
expect(html).toContain('<strong>bold</strong>');
|
||||
expect(html).toContain('<em>italic</em>');
|
||||
});
|
||||
|
||||
it('renders code blocks with language class', () => {
|
||||
const html = renderMarkdown('```js\nconst x = 1;\n```');
|
||||
expect(html).toContain('language-js');
|
||||
});
|
||||
|
||||
it('renders mermaid blocks with a placeholder', () => {
|
||||
const html = renderMarkdown('```mermaid\ngraph TD\nA-->B\n```');
|
||||
expect(html).toContain('data-mermaid-source=');
|
||||
});
|
||||
|
||||
it('sanitizes dangerous HTML', () => {
|
||||
const html = renderMarkdown('<script>alert(1)</script>');
|
||||
expect(html).not.toContain('<script>');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,36 @@
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
|
||||
describe('useEditorStore', () => {
|
||||
beforeEach(() => {
|
||||
useEditorStore.setState({ buffers: new Map(), activeId: null });
|
||||
});
|
||||
|
||||
it('creates a new buffer with the given content', () => {
|
||||
useEditorStore.getState().openBuffer('file-1', '/foo.md', '# hello');
|
||||
const buf = useEditorStore.getState().buffers.get('file-1');
|
||||
expect(buf?.content).toBe('# hello');
|
||||
expect(buf?.path).toBe('/foo.md');
|
||||
});
|
||||
|
||||
it('updates content and marks dirty', () => {
|
||||
useEditorStore.getState().openBuffer('file-1', '/foo.md', '');
|
||||
useEditorStore.getState().updateContent('file-1', 'new content');
|
||||
const buf = useEditorStore.getState().buffers.get('file-1');
|
||||
expect(buf?.content).toBe('new content');
|
||||
expect(buf?.dirty).toBe(true);
|
||||
});
|
||||
|
||||
it('marks a buffer clean after save', () => {
|
||||
useEditorStore.getState().openBuffer('file-1', '/foo.md', '');
|
||||
useEditorStore.getState().updateContent('file-1', 'x');
|
||||
useEditorStore.getState().markSaved('file-1');
|
||||
expect(useEditorStore.getState().buffers.get('file-1')?.dirty).toBe(false);
|
||||
});
|
||||
|
||||
it('closes a buffer and removes it', () => {
|
||||
useEditorStore.getState().openBuffer('file-1', '/foo.md', '');
|
||||
useEditorStore.getState().closeBuffer('file-1');
|
||||
expect(useEditorStore.getState().buffers.has('file-1')).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,419 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { useEditorStore } from '@/stores/editor-store';
|
||||
import { useFileStore, FileNode, OpenTab } from '@/stores/file-store';
|
||||
import type { FileEntry } from '@/types/ipc';
|
||||
|
||||
vi.mock('@/lib/ipc', () => ({
|
||||
ipc: {
|
||||
file: {
|
||||
list: vi.fn(),
|
||||
read: vi.fn(),
|
||||
pickFolder: vi.fn(),
|
||||
pickFile: vi.fn(),
|
||||
write: vi.fn(),
|
||||
},
|
||||
},
|
||||
}));
|
||||
|
||||
import { ipc } from '@/lib/ipc';
|
||||
|
||||
const fakeList = ipc.file.list as ReturnType<typeof vi.fn>;
|
||||
const fakeRead = ipc.file.read as ReturnType<typeof vi.fn>;
|
||||
const fakePickFolder = ipc.file.pickFolder as ReturnType<typeof vi.fn>;
|
||||
const fakePickFile = ipc.file.pickFile as ReturnType<typeof vi.fn>;
|
||||
const fakeWrite = ipc.file.write as ReturnType<typeof vi.fn>;
|
||||
|
||||
function fakeFileEntry(name: string, isDirectory: boolean): FileEntry {
|
||||
return { name, path: `/root/${name}`, isDirectory };
|
||||
}
|
||||
|
||||
describe('useFileStore', () => {
|
||||
beforeEach(() => {
|
||||
useFileStore.setState({
|
||||
tree: null,
|
||||
rootPath: null,
|
||||
expanded: new Set(),
|
||||
openTabs: [],
|
||||
activeTabId: null,
|
||||
});
|
||||
useEditorStore.setState({ buffers: new Map(), activeId: null });
|
||||
fakeList.mockClear();
|
||||
fakeRead.mockClear();
|
||||
fakePickFolder.mockClear();
|
||||
fakePickFile.mockClear();
|
||||
fakeWrite.mockClear();
|
||||
});
|
||||
|
||||
// --- openFolder ---
|
||||
|
||||
it('openFolder calls ipc.file.list and sets tree with root node and mapped children', async () => {
|
||||
fakeList.mockResolvedValue({
|
||||
ok: true,
|
||||
data: [
|
||||
fakeFileEntry('README.md', false),
|
||||
fakeFileEntry('src', true),
|
||||
],
|
||||
});
|
||||
|
||||
await useFileStore.getState().openFolder('/root');
|
||||
|
||||
expect(fakeList).toHaveBeenCalledWith('/root');
|
||||
const tree = useFileStore.getState().tree;
|
||||
expect(tree).not.toBeNull();
|
||||
expect(tree!.name).toBe('root');
|
||||
expect(tree!.path).toBe('/root');
|
||||
expect(tree!.isDirectory).toBe(true);
|
||||
expect(tree!.loaded).toBe(true);
|
||||
expect(tree!.children).toHaveLength(2);
|
||||
expect(tree!.children![0].name).toBe('README.md');
|
||||
expect(tree!.children![0].isDirectory).toBe(false);
|
||||
expect(tree!.children![1].name).toBe('src');
|
||||
expect(tree!.children![1].isDirectory).toBe(true);
|
||||
// children of a directory node should be null (lazy)
|
||||
expect(tree!.children![1].children).toBeNull();
|
||||
expect(useFileStore.getState().rootPath).toBe('/root');
|
||||
});
|
||||
|
||||
it('openFolder failure leaves state unchanged', async () => {
|
||||
fakeList.mockResolvedValue({
|
||||
ok: false,
|
||||
error: { code: 'ENOENT', message: 'not found' },
|
||||
});
|
||||
|
||||
await useFileStore.getState().openFolder('/nonexistent');
|
||||
expect(useFileStore.getState().tree).toBeNull();
|
||||
expect(useFileStore.getState().rootPath).toBeNull();
|
||||
});
|
||||
|
||||
// --- loadChildren ---
|
||||
|
||||
it('loadChildren IPC-loads children of the matching directory and sets loaded: true', async () => {
|
||||
fakeList.mockResolvedValue({
|
||||
ok: true,
|
||||
data: [fakeFileEntry('nested.md', false)],
|
||||
});
|
||||
|
||||
// Set up a tree with a loaded parent directory
|
||||
const tree: FileNode = {
|
||||
name: 'root',
|
||||
path: '/root',
|
||||
isDirectory: true,
|
||||
loaded: true,
|
||||
children: [
|
||||
{
|
||||
name: 'src',
|
||||
path: '/root/src',
|
||||
isDirectory: true,
|
||||
children: null,
|
||||
loaded: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
useFileStore.setState({ tree, rootPath: '/root' });
|
||||
|
||||
await useFileStore.getState().loadChildren('/root/src');
|
||||
|
||||
const srcNode = useFileStore.getState().tree!.children![0];
|
||||
expect(srcNode.loaded).toBe(true);
|
||||
expect(srcNode.children).toHaveLength(1);
|
||||
expect(srcNode.children![0].name).toBe('nested.md');
|
||||
});
|
||||
|
||||
it('loadChildren on a non-directory node is a no-op', async () => {
|
||||
const tree: FileNode = {
|
||||
name: 'root',
|
||||
path: '/root',
|
||||
isDirectory: true,
|
||||
loaded: true,
|
||||
children: [{ name: 'file.md', path: '/root/file.md', isDirectory: false, children: null }],
|
||||
};
|
||||
useFileStore.setState({ tree });
|
||||
|
||||
await useFileStore.getState().loadChildren('/root/file.md');
|
||||
expect(fakeList).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('loadChildren on a non-existent path is a no-op', async () => {
|
||||
const tree: FileNode = {
|
||||
name: 'root',
|
||||
path: '/root',
|
||||
isDirectory: true,
|
||||
loaded: true,
|
||||
children: [{ name: 'src', path: '/root/src', isDirectory: true, children: null, loaded: true }],
|
||||
};
|
||||
useFileStore.setState({ tree });
|
||||
|
||||
await useFileStore.getState().loadChildren('/root/src/not-there');
|
||||
// Should not throw
|
||||
expect(fakeList).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('loadChildren is idempotent: does not re-fetch when already loaded', async () => {
|
||||
fakeList.mockResolvedValue({
|
||||
ok: true,
|
||||
data: [{ name: 'src', path: '/root/src', isDirectory: true }],
|
||||
});
|
||||
await useFileStore.getState().openFolder('/root');
|
||||
|
||||
fakeList.mockClear();
|
||||
fakeList.mockResolvedValue({
|
||||
ok: true,
|
||||
data: [{ name: 'foo.ts', path: '/root/src/foo.ts', isDirectory: false }],
|
||||
});
|
||||
|
||||
await useFileStore.getState().loadChildren('/root/src');
|
||||
const callsAfterFirst = fakeList.mock.calls.length;
|
||||
expect(callsAfterFirst).toBe(1);
|
||||
|
||||
// Second call should be a no-op (loaded is true)
|
||||
await useFileStore.getState().loadChildren('/root/src');
|
||||
expect(fakeList.mock.calls.length).toBe(callsAfterFirst);
|
||||
});
|
||||
|
||||
// --- toggleExpanded ---
|
||||
|
||||
it('toggleExpanded adds and removes paths from the expanded Set', () => {
|
||||
const { toggleExpanded } = useFileStore.getState();
|
||||
toggleExpanded('/root/src');
|
||||
expect(useFileStore.getState().expanded.has('/root/src')).toBe(true);
|
||||
toggleExpanded('/root/src');
|
||||
expect(useFileStore.getState().expanded.has('/root/src')).toBe(false);
|
||||
});
|
||||
|
||||
// --- openFile ---
|
||||
|
||||
it('openFile calls ipc.file.read, opens an editor buffer, adds a tab, and sets it active', async () => {
|
||||
fakeRead.mockResolvedValue({ ok: true, data: '# hello world' });
|
||||
|
||||
await useFileStore.getState().openFile('/root/README.md');
|
||||
|
||||
expect(fakeRead).toHaveBeenCalledWith('/root/README.md');
|
||||
// Editor buffer should be open
|
||||
const buf = useEditorStore.getState().buffers.get('/root/README.md');
|
||||
expect(buf).not.toBeUndefined();
|
||||
expect(buf!.content).toBe('# hello world');
|
||||
expect(buf!.dirty).toBe(false);
|
||||
// Tab should be added and active
|
||||
const tabs = useFileStore.getState().openTabs;
|
||||
expect(tabs).toHaveLength(1);
|
||||
expect(tabs[0].path).toBe('/root/README.md');
|
||||
expect(tabs[0].title).toBe('README.md');
|
||||
expect(tabs[0].dirty).toBe(false);
|
||||
expect(useFileStore.getState().activeTabId).toBe('/root/README.md');
|
||||
});
|
||||
|
||||
it('openFile on an already-open file does not re-read — just activates the existing tab', async () => {
|
||||
fakeRead.mockResolvedValue({ ok: true, data: '# original' });
|
||||
|
||||
// Open once
|
||||
await useFileStore.getState().openFile('/root/README.md');
|
||||
expect(fakeRead).toHaveBeenCalledTimes(1);
|
||||
|
||||
// Mark it dirty to prove dirty flag is preserved
|
||||
useEditorStore.getState().updateContent('/root/README.md', '# modified');
|
||||
|
||||
// Open again
|
||||
await useFileStore.getState().openFile('/root/README.md');
|
||||
|
||||
expect(fakeRead).toHaveBeenCalledTimes(1); // no second read
|
||||
expect(useEditorStore.getState().buffers.get('/root/README.md')!.content).toBe('# modified');
|
||||
expect(useFileStore.getState().openTabs[0].dirty).toBe(true); // dirty flag preserved
|
||||
expect(useFileStore.getState().activeTabId).toBe('/root/README.md');
|
||||
});
|
||||
|
||||
it('openFile failure does nothing', async () => {
|
||||
fakeRead.mockResolvedValue({
|
||||
ok: false,
|
||||
error: { code: 'ENOENT', message: 'not found' },
|
||||
});
|
||||
|
||||
await useFileStore.getState().openFile('/root/missing.md');
|
||||
expect(useFileStore.getState().openTabs).toHaveLength(0);
|
||||
expect(useEditorStore.getState().buffers.size).toBe(0);
|
||||
});
|
||||
|
||||
// --- closeTab ---
|
||||
|
||||
it('closeTab removes the tab and updates activeTabId to the previous neighbor', async () => {
|
||||
fakeRead.mockResolvedValue({ ok: true, data: 'a' });
|
||||
fakeRead.mockResolvedValue({ ok: true, data: 'b' });
|
||||
|
||||
await useFileStore.getState().openFile('/root/a.md');
|
||||
await useFileStore.getState().openFile('/root/b.md');
|
||||
|
||||
// Tab order: [a.md, b.md], active = b.md
|
||||
useFileStore.getState().closeTab('/root/b.md');
|
||||
|
||||
const tabs = useFileStore.getState().openTabs;
|
||||
expect(tabs).toHaveLength(1);
|
||||
expect(tabs[0].id).toBe('/root/a.md');
|
||||
expect(useFileStore.getState().activeTabId).toBe('/root/a.md');
|
||||
});
|
||||
|
||||
it('closeTab on the active tab when it is the only tab sets activeTabId to null', async () => {
|
||||
fakeRead.mockResolvedValue({ ok: true, data: '# only' });
|
||||
await useFileStore.getState().openFile('/root/only.md');
|
||||
|
||||
useFileStore.getState().closeTab('/root/only.md');
|
||||
|
||||
expect(useFileStore.getState().openTabs).toHaveLength(0);
|
||||
expect(useFileStore.getState().activeTabId).toBeNull();
|
||||
});
|
||||
|
||||
// --- setActiveTab ---
|
||||
|
||||
it('setActiveTab updates activeTabId', async () => {
|
||||
fakeRead.mockResolvedValue({ ok: true, data: 'a' });
|
||||
fakeRead.mockResolvedValue({ ok: true, data: 'b' });
|
||||
|
||||
await useFileStore.getState().openFile('/root/a.md');
|
||||
await useFileStore.getState().openFile('/root/b.md');
|
||||
useFileStore.getState().setActiveTab('/root/a.md');
|
||||
|
||||
expect(useFileStore.getState().activeTabId).toBe('/root/a.md');
|
||||
});
|
||||
|
||||
// --- markTabClean / markTabDirty ---
|
||||
|
||||
it('markTabClean sets dirty to false on the matching tab', async () => {
|
||||
fakeRead.mockResolvedValue({ ok: true, data: '# doc' });
|
||||
await useFileStore.getState().openFile('/root/doc.md');
|
||||
useEditorStore.getState().updateContent('/root/doc.md', '# changed');
|
||||
|
||||
useFileStore.getState().markTabClean('/root/doc.md');
|
||||
|
||||
expect(useFileStore.getState().openTabs[0].dirty).toBe(false);
|
||||
});
|
||||
|
||||
it('markTabDirty sets dirty to true on the matching tab', async () => {
|
||||
fakeRead.mockResolvedValue({ ok: true, data: '# doc' });
|
||||
await useFileStore.getState().openFile('/root/doc.md');
|
||||
|
||||
useFileStore.getState().markTabDirty('/root/doc.md');
|
||||
|
||||
expect(useFileStore.getState().openTabs[0].dirty).toBe(true);
|
||||
});
|
||||
|
||||
// --- reorderTabs ---
|
||||
|
||||
it('reorderTabs moves a tab from one index to another', async () => {
|
||||
fakeRead.mockResolvedValue({ ok: true, data: 'a' });
|
||||
fakeRead.mockResolvedValue({ ok: true, data: 'b' });
|
||||
fakeRead.mockResolvedValue({ ok: true, data: 'c' });
|
||||
|
||||
await useFileStore.getState().openFile('/root/a.md');
|
||||
await useFileStore.getState().openFile('/root/b.md');
|
||||
await useFileStore.getState().openFile('/root/c.md');
|
||||
|
||||
// [a, b, c] — move c to front
|
||||
useFileStore.getState().reorderTabs(2, 0);
|
||||
|
||||
const tabs = useFileStore.getState().openTabs;
|
||||
expect(tabs.map((t) => t.title)).toEqual(['c.md', 'a.md', 'b.md']);
|
||||
});
|
||||
|
||||
// --- openFolderDialog ---
|
||||
|
||||
it('openFolderDialog calls pickFolder, then openFolder on the returned path', async () => {
|
||||
fakePickFolder.mockResolvedValue({ ok: true, data: '/projects/myapp' });
|
||||
fakeList.mockResolvedValue({
|
||||
ok: true,
|
||||
data: [fakeFileEntry('README.md', false)],
|
||||
});
|
||||
|
||||
await useFileStore.getState().openFolderDialog();
|
||||
|
||||
expect(fakePickFolder).toHaveBeenCalled();
|
||||
expect(fakeList).toHaveBeenCalledWith('/projects/myapp');
|
||||
expect(useFileStore.getState().rootPath).toBe('/projects/myapp');
|
||||
});
|
||||
|
||||
it('openFolderDialog on cancelled (null) is a no-op', async () => {
|
||||
fakePickFolder.mockResolvedValue({ ok: true, data: null });
|
||||
|
||||
await useFileStore.getState().openFolderDialog();
|
||||
|
||||
expect(fakeList).not.toHaveBeenCalled();
|
||||
expect(useFileStore.getState().tree).toBeNull();
|
||||
});
|
||||
|
||||
// --- openFileDialog ---
|
||||
|
||||
it('openFileDialog calls pickFile, then openFile on the returned path', async () => {
|
||||
fakePickFile.mockResolvedValue({ ok: true, data: '/root/README.md' });
|
||||
fakeRead.mockResolvedValue({ ok: true, data: '# hello' });
|
||||
|
||||
await useFileStore.getState().openFileDialog();
|
||||
|
||||
expect(fakePickFile).toHaveBeenCalled();
|
||||
expect(fakeRead).toHaveBeenCalledWith('/root/README.md');
|
||||
const tabs = useFileStore.getState().openTabs;
|
||||
expect(tabs).toHaveLength(1);
|
||||
expect(tabs[0].path).toBe('/root/README.md');
|
||||
});
|
||||
|
||||
it('openFileDialog on cancelled (null) is a no-op', async () => {
|
||||
fakePickFile.mockResolvedValue({ ok: true, data: null });
|
||||
|
||||
await useFileStore.getState().openFileDialog();
|
||||
|
||||
expect(fakeRead).not.toHaveBeenCalled();
|
||||
expect(useFileStore.getState().openTabs).toHaveLength(0);
|
||||
});
|
||||
|
||||
// --- saveActiveBuffer ---
|
||||
|
||||
it('saveActiveBuffer with no active tab returns false', async () => {
|
||||
const result = await useFileStore.getState().saveActiveBuffer();
|
||||
expect(result).toBe(false);
|
||||
expect(fakeWrite).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('saveActiveBuffer with active buffer calls write, then marks saved and clean, returns true', async () => {
|
||||
fakeRead.mockResolvedValue({ ok: true, data: '# content' });
|
||||
await useFileStore.getState().openFile('/root/doc.md');
|
||||
fakeWrite.mockResolvedValue({ ok: true, data: undefined });
|
||||
|
||||
const result = await useFileStore.getState().saveActiveBuffer();
|
||||
|
||||
expect(fakeWrite).toHaveBeenCalledWith('/root/doc.md', '# content');
|
||||
expect(useEditorStore.getState().buffers.get('/root/doc.md')!.dirty).toBe(false);
|
||||
expect(useFileStore.getState().openTabs[0].dirty).toBe(false);
|
||||
expect(result).toBe(true);
|
||||
});
|
||||
|
||||
it('saveActiveBuffer on write failure returns false and does NOT mark clean', async () => {
|
||||
fakeRead.mockResolvedValue({ ok: true, data: '# content' });
|
||||
await useFileStore.getState().openFile('/root/doc.md');
|
||||
// Mark the buffer dirty and sync the tab dirty flag before attempting save
|
||||
useEditorStore.getState().updateContent('/root/doc.md', '# modified');
|
||||
useFileStore.getState().markTabDirty('/root/doc.md');
|
||||
fakeWrite.mockResolvedValue({ ok: false, error: { code: 'EIO', message: 'write error' } });
|
||||
|
||||
const result = await useFileStore.getState().saveActiveBuffer();
|
||||
|
||||
expect(result).toBe(false);
|
||||
expect(useEditorStore.getState().buffers.get('/root/doc.md')!.dirty).toBe(true);
|
||||
expect(useFileStore.getState().openTabs[0].dirty).toBe(true);
|
||||
});
|
||||
|
||||
// --- persistence ---
|
||||
|
||||
it('persists rootPath to localStorage and restores on next mount', async () => {
|
||||
fakeList.mockResolvedValue({
|
||||
ok: true,
|
||||
data: [{ name: 'a.md', path: '/root/a.md', isDirectory: false }],
|
||||
});
|
||||
await useFileStore.getState().openFolder('/root');
|
||||
|
||||
// Force the persist middleware to flush to localStorage
|
||||
await useFileStore.persist?.flush?.();
|
||||
|
||||
const stored = JSON.parse(localStorage.getItem('mc-file-store') ?? '{}');
|
||||
expect(stored.state.rootPath).toBe('/root');
|
||||
// Ensure non-persisted fields are NOT in storage
|
||||
expect(stored.state.tree).toBeUndefined();
|
||||
expect(stored.state.openTabs).toBeUndefined();
|
||||
expect(stored.state.expanded).toBeUndefined();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,23 @@
|
||||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||||
import { usePreviewStore } from '@/stores/preview-store';
|
||||
|
||||
describe('usePreviewStore', () => {
|
||||
beforeEach(() => {
|
||||
vi.useFakeTimers();
|
||||
usePreviewStore.setState({ scrollRatio: 0, source: '' });
|
||||
});
|
||||
|
||||
it('debounces source updates (300 ms)', () => {
|
||||
usePreviewStore.getState().setSource('# a');
|
||||
usePreviewStore.getState().setSource('# b');
|
||||
usePreviewStore.getState().setSource('# c');
|
||||
expect(usePreviewStore.getState().source).toBe('');
|
||||
vi.advanceTimersByTime(300);
|
||||
expect(usePreviewStore.getState().source).toBe('# c');
|
||||
});
|
||||
|
||||
it('updates scroll ratio', () => {
|
||||
usePreviewStore.getState().setScrollRatio(0.5);
|
||||
expect(usePreviewStore.getState().scrollRatio).toBe(0.5);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user