From 28e301efd630faf3b443057fef42ad81bcb1a42b Mon Sep 17 00:00:00 2001 From: Shevil Mistry Date: Sat, 19 Jul 2025 13:15:03 +0530 Subject: [PATCH 1/4] feat(): Toggle component --- package-lock.json | 794 +++++++++++++++++++++++++++++++++++- package.json | 4 + src/Button/Toggle.story.tsx | 67 +++ src/Button/Toggle.tsx | 102 +++++ 4 files changed, 964 insertions(+), 3 deletions(-) create mode 100644 src/Button/Toggle.story.tsx create mode 100644 src/Button/Toggle.tsx diff --git a/package-lock.json b/package-lock.json index 7407566..9118bcb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,11 @@ "@react-aria/i18n": "^3.12.10", "@react-stately/calendar": "^3.8.2", "@react-types/overlays": "^3.8.16", + "@tiptap/pm": "^3.0.1", + "@tiptap/react": "^3.0.1", + "@tiptap/starter-kit": "^3.0.1", "@trivago/prettier-plugin-sort-imports": "^5.2.2", + "lucide-react": "^0.525.0", "motion": "^12.23.0", "react-aria-components": "^1.10.1", "react-stately": "^3.39.0", @@ -1355,6 +1359,34 @@ "node": ">=18" } }, + "node_modules/@floating-ui/core": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.2.tgz", + "integrity": "sha512-wNB5ooIKHQc+Kui96jE/n69rHFWAVoxn5CAzL1Xdd8FG03cgY3MLO+GF9U3W737fYDSgPWA6MReKhBQBop6Pcw==", + "license": "MIT", + "optional": true, + "dependencies": { + "@floating-ui/utils": "^0.2.10" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.2.tgz", + "integrity": "sha512-7cfaOQuCS27HD7DX+6ib2OrnW+b4ZBwDNnCcT0uTyidcmyWb03FnQqJybDBoCnpdxwBSfA94UAYlRCt7mV+TbA==", + "license": "MIT", + "optional": true, + "dependencies": { + "@floating-ui/core": "^1.7.2", + "@floating-ui/utils": "^0.2.10" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.10", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz", + "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==", + "license": "MIT", + "optional": true + }, "node_modules/@formatjs/ecma402-abstract": { "version": "2.3.4", "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.4.tgz", @@ -4169,6 +4201,12 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, + "node_modules/@remirror/core-constants": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz", + "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==", + "license": "MIT" + }, "node_modules/@rollup/pluginutils": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.2.0.tgz", @@ -5424,6 +5462,438 @@ "@testing-library/dom": ">=7.21.4" } }, + "node_modules/@tiptap/core": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.0.1.tgz", + "integrity": "sha512-H0xOnDE5TF3bsCLq2FiFg69TWTzyHxyJdQ9D5m/P++QgLN8t2olGGznk4s1I+lxI3FB1YtIKMwBggRQuSQsclg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/pm": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-blockquote": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-3.0.1.tgz", + "integrity": "sha512-JBfSIkZP8PIEHQoOL8ZQlCUgf8JzfnQU+sifMc/cSBtLSteKN2xq6SOv+B9Fcdz7TMmyUGA2SQ9/MYBm7IoaUw==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-bold": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-3.0.1.tgz", + "integrity": "sha512-f/1n4MEp0DyBuH+kVlFsVJKzo+zhIJUgkuFtchDjPJQSIdumlWllOpNdS6FsNRfjWEGPAh8qSE04SRVYxCGUFw==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-bubble-menu": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-3.0.1.tgz", + "integrity": "sha512-+5aoGSemFbpVRJGbd5jdiHbCzUU63UbPkjK4rgmgvvGUvT+g51LiOYxzoGtTg3DAcSDFTtJ6bAq3TDSr+5GIVA==", + "license": "MIT", + "optional": true, + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1", + "@tiptap/pm": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-bullet-list": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-3.0.1.tgz", + "integrity": "sha512-7o9xcLCOfZWEE9dPdF/9TWt0LykIohmPA2VCApWWHMTB5EmSmbK9JWxHXiezpvN4dmW+pmdcepMKwxTBLrGQhA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/extension-list": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-code": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-3.0.1.tgz", + "integrity": "sha512-CJOjCkNs0MCCJtjbgVify3gl47+imkKeDEyAQh+GRoORmBl2Vpn7sE0JJVvno0xyKX5thQ7qKgQwU7W1p2h+Ow==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-code-block": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-3.0.1.tgz", + "integrity": "sha512-TyuR5qJsjZ9K/GbEJgzFylsUOdwSQVSWTcQMyJShWi0eI9dqg1mkVqfaTlPn4AV334PreaNj2VAl6U7AfYZLfA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1", + "@tiptap/pm": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-document": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-3.0.1.tgz", + "integrity": "sha512-93JuaoT3QfdTvLr8frtBS7DczXHKToU5WDpzEefUtMNCnJCKhnTMcDGSGuU8aKq5zNNzppNywEL/2+KyGwLS1A==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-dropcursor": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-3.0.1.tgz", + "integrity": "sha512-LC2WsyBQ6TuGgf5E/mAUmgLei+v9la1RzD352G4LEhi1Y23P+jlo35ZQNhZ0AiqQn3XaJa8rq8uqQjveyTwGZA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/extensions": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-floating-menu": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.0.1.tgz", + "integrity": "sha512-V5eFIZ/L3rNKltG6m96BelMKa5Fjhg0BnqHWVOXulfWAqv9BzW2CrFqwmM4da0KA0OntYqZMKeQf0WsVoiRe7Q==", + "license": "MIT", + "optional": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@floating-ui/dom": "^1.0.0", + "@tiptap/core": "^3.0.1", + "@tiptap/pm": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-gapcursor": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-3.0.1.tgz", + "integrity": "sha512-1C2RKMcKGB61BGKiEETnScc+C7pCpAQeYs+NhXPCw5bGiQifO206RAtaRAQWjNZXeKNLPB7GBsxX6gVRQf/8gA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/extensions": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-hard-break": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-3.0.1.tgz", + "integrity": "sha512-nikWW56U/TGRomS3YjiIC2OjDjYoQxyqbBR4HpTzBzH8DJha2J57V9JPGebLMp1+Mlyo8+pHBg5oxzd0+W1fUw==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-heading": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-3.0.1.tgz", + "integrity": "sha512-o3sQGa2GegbJX+ieBrKBKya9+OD89knKXrVv6TCB6XzZUCLjyz6xxaQyEvkK7IqX7e6W/2/qYcTdPZotmq6UAA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-horizontal-rule": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-3.0.1.tgz", + "integrity": "sha512-NEsKQEEjbZqHw/JtvWiK3+EtjoQV/aLy8RqohPHjOIUIVYO/u203nozwXDOrMd/ERxPSWNe7QA9pblnYBKEEVw==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1", + "@tiptap/pm": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-italic": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.0.1.tgz", + "integrity": "sha512-zE/GzzyMpwzu/qfH0JlnoBd7DjemS3RgZq/scdeJuNrr3TPkUTm6WPpgTGClJ17Ao1AFPOHFmSmssBBpB9GjfA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-link": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-3.0.1.tgz", + "integrity": "sha512-3s3MEnGmyP01wxmdubLn7SDkUJfxtl1kvyxK4MGKHVuqd9X0/JWKb4taLIRFVezri5UgfbmiYqt2XQLlSoR3Tw==", + "license": "MIT", + "dependencies": { + "linkifyjs": "^4.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1", + "@tiptap/pm": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-list": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-list/-/extension-list-3.0.1.tgz", + "integrity": "sha512-dLla05A9yp2owQYGKsE0ZMDdgieZXQANOHt4zHzqG97Ttnt7PD4reNNqyvbKQsgHqzmZ1w7HwBgP12D4NDACmw==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1", + "@tiptap/pm": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-list-item": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-3.0.1.tgz", + "integrity": "sha512-52gmKwCTXi4imQruim1AraJILuYRZyqkdEN4DAIv7af1O4kjhjMNGFCas2IJ6Larw1HZEAR0+18isf58Ki03BA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/extension-list": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-list-keymap": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-list-keymap/-/extension-list-keymap-3.0.1.tgz", + "integrity": "sha512-+ZMehjAbeIg5z/hawQftDZMH/xntCfAEglFqAnAkhAm//pEzN1rAoK4EpknOLptU5j6f/hinYIu5+Z3ct97KYA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/extension-list": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-ordered-list": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-3.0.1.tgz", + "integrity": "sha512-LT6LUjcEdLshT62k4QCnkXm/6ZjMYZ3z58mrcX93IpIbQi5J/8wIqgODR+a6Rm5YcQm3HkXoSU8RTzANVCloag==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/extension-list": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-paragraph": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-3.0.1.tgz", + "integrity": "sha512-+kr6F67+LSDdbRfdPtuAJQj4MWVWEoKQSahsP1w29qScHXGBAjzadGcgm5mqyagywKL8tE5EcAZOObIffA73EQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-strike": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-3.0.1.tgz", + "integrity": "sha512-ZYC/yLBtVtaABxj49jbM2uFmV2qM4RnpB52bMbFgL/5zlLaD1lGLPYgZkU1ZVaWhxLqx9lodXyEfRdNJSQnqrg==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-text": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.0.1.tgz", + "integrity": "sha512-biaqRKuXOEu2fkVVya0LNLf8UnNFuGkF2zFiwaDUJkPSF+0BXg9nAeGKcmTwThgsllQbQzOuHNXWWS0slDi6SQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1" + } + }, + "node_modules/@tiptap/extension-underline": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.0.1.tgz", + "integrity": "sha512-0y1hBw451WCcdTKhZJHAPNgBzerXFOFDxMsZ0i2gzKveJNGCGj1LIz4JXKVEOEOz8NS8Y5hqD0GWOI53f17kag==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1" + } + }, + "node_modules/@tiptap/extensions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/extensions/-/extensions-3.0.1.tgz", + "integrity": "sha512-A5SrGDFDn230ucTWh1eByimHHc4THPP5No0+ptqLkc2LzWgxlNT1dUbyILoGqjsVjZdkgJravPPDXH6u/h/o2w==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1", + "@tiptap/pm": "^3.0.1" + } + }, + "node_modules/@tiptap/pm": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.0.1.tgz", + "integrity": "sha512-G6eusuS7BMFVNQvA1irkJtSeJCoj6GczalJifRnukklfd2ZD18ZDx+xmzu25oLISQH9cPKmKIREmTTuMt+s2og==", + "license": "MIT", + "dependencies": { + "prosemirror-changeset": "^2.3.0", + "prosemirror-collab": "^1.3.1", + "prosemirror-commands": "^1.6.2", + "prosemirror-dropcursor": "^1.8.1", + "prosemirror-gapcursor": "^1.3.2", + "prosemirror-history": "^1.4.1", + "prosemirror-inputrules": "^1.4.0", + "prosemirror-keymap": "^1.2.2", + "prosemirror-markdown": "^1.13.1", + "prosemirror-menu": "^1.2.4", + "prosemirror-model": "^1.24.1", + "prosemirror-schema-basic": "^1.2.3", + "prosemirror-schema-list": "^1.5.0", + "prosemirror-state": "^1.4.3", + "prosemirror-tables": "^1.6.4", + "prosemirror-trailing-node": "^3.0.0", + "prosemirror-transform": "^1.10.2", + "prosemirror-view": "^1.38.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + } + }, + "node_modules/@tiptap/react": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-3.0.1.tgz", + "integrity": "sha512-486f8iJ9apMC/cDuYi3eRNPNYshao8yF/maSnl8aTVsuW1Eby+Z9Poocf3OvWatgFkNx4cOOq978cBqhiSzJbQ==", + "license": "MIT", + "dependencies": { + "@types/use-sync-external-store": "^0.0.6", + "fast-deep-equal": "^3.1.3", + "use-sync-external-store": "^1.4.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "optionalDependencies": { + "@tiptap/extension-bubble-menu": "^3.0.1", + "@tiptap/extension-floating-menu": "^3.0.1" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.1", + "@tiptap/pm": "^3.0.1", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, + "node_modules/@tiptap/starter-kit": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-3.0.1.tgz", + "integrity": "sha512-Guqa/AKpOLVl1ig4w6+XKeXycp2bp+hPv/LK3xAvpzwbirkfmdmKp0uAfQudUQMSC4ccZUuNCXKhKSDzr8FpgA==", + "license": "MIT", + "dependencies": { + "@tiptap/core": "^3.0.1", + "@tiptap/extension-blockquote": "^3.0.1", + "@tiptap/extension-bold": "^3.0.1", + "@tiptap/extension-bullet-list": "^3.0.1", + "@tiptap/extension-code": "^3.0.1", + "@tiptap/extension-code-block": "^3.0.1", + "@tiptap/extension-document": "^3.0.1", + "@tiptap/extension-dropcursor": "^3.0.1", + "@tiptap/extension-gapcursor": "^3.0.1", + "@tiptap/extension-hard-break": "^3.0.1", + "@tiptap/extension-heading": "^3.0.1", + "@tiptap/extension-horizontal-rule": "^3.0.1", + "@tiptap/extension-italic": "^3.0.1", + "@tiptap/extension-link": "^3.0.1", + "@tiptap/extension-list": "^3.0.1", + "@tiptap/extension-list-item": "^3.0.1", + "@tiptap/extension-list-keymap": "^3.0.1", + "@tiptap/extension-ordered-list": "^3.0.1", + "@tiptap/extension-paragraph": "^3.0.1", + "@tiptap/extension-strike": "^3.0.1", + "@tiptap/extension-text": "^3.0.1", + "@tiptap/extension-underline": "^3.0.1", + "@tiptap/extensions": "^3.0.1", + "@tiptap/pm": "^3.0.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + } + }, "node_modules/@trivago/prettier-plugin-sort-imports": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-5.2.2.tgz", @@ -5653,6 +6123,28 @@ "license": "MIT", "peer": true }, + "node_modules/@types/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", + "license": "MIT" + }, + "node_modules/@types/markdown-it": { + "version": "14.1.2", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", + "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==", + "license": "MIT", + "dependencies": { + "@types/linkify-it": "^5", + "@types/mdurl": "^2" + } + }, + "node_modules/@types/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==", + "license": "MIT" + }, "node_modules/@types/mdx": { "version": "2.0.13", "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz", @@ -5701,6 +6193,12 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/use-sync-external-store": { + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz", + "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==", + "license": "MIT" + }, "node_modules/@vitest/expect": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz", @@ -6148,7 +6646,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true, "license": "Python-2.0" }, "node_modules/aria-query": { @@ -6882,6 +7379,12 @@ } } }, + "node_modules/crelt": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz", + "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==", + "license": "MIT" + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -7184,7 +7687,6 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", - "dev": true, "license": "BSD-2-Clause", "engines": { "node": ">=0.12" @@ -7324,6 +7826,18 @@ "dev": true, "license": "MIT" }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/eslint-scope": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz", @@ -7586,7 +8100,6 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true, "license": "MIT" }, "node_modules/fast-glob": { @@ -9040,6 +9553,21 @@ "dev": true, "license": "MIT" }, + "node_modules/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==", + "license": "MIT", + "dependencies": { + "uc.micro": "^2.0.0" + } + }, + "node_modules/linkifyjs": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.1.tgz", + "integrity": "sha512-DRSlB9DKVW04c4SUdGvKK5FR6be45lTU9M76JnngqPeeGDqPwYc0zdUErtsNVMtxPXgUWV4HbXbnC4sNyBxkYg==", + "license": "MIT" + }, "node_modules/loader-runner": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz", @@ -9130,6 +9658,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "0.525.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.525.0.tgz", + "integrity": "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/lz-string": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz", @@ -9176,6 +9713,23 @@ "semver": "bin/semver.js" } }, + "node_modules/markdown-it": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", + "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1", + "entities": "^4.4.0", + "linkify-it": "^5.0.0", + "mdurl": "^2.0.0", + "punycode.js": "^2.3.1", + "uc.micro": "^2.1.0" + }, + "bin": { + "markdown-it": "bin/markdown-it.mjs" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", @@ -9186,6 +9740,12 @@ "node": ">= 0.4" } }, + "node_modules/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==", + "license": "MIT" + }, "node_modules/media-typer": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-1.1.0.tgz", @@ -9829,6 +10389,12 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/orderedmap": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz", + "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==", + "license": "MIT" + }, "node_modules/outvariant": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.3.tgz", @@ -10174,6 +10740,201 @@ "node": ">=6" } }, + "node_modules/prosemirror-changeset": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.3.1.tgz", + "integrity": "sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==", + "license": "MIT", + "dependencies": { + "prosemirror-transform": "^1.0.0" + } + }, + "node_modules/prosemirror-collab": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz", + "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==", + "license": "MIT", + "dependencies": { + "prosemirror-state": "^1.0.0" + } + }, + "node_modules/prosemirror-commands": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz", + "integrity": "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==", + "license": "MIT", + "dependencies": { + "prosemirror-model": "^1.0.0", + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.10.2" + } + }, + "node_modules/prosemirror-dropcursor": { + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz", + "integrity": "sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==", + "license": "MIT", + "dependencies": { + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.1.0", + "prosemirror-view": "^1.1.0" + } + }, + "node_modules/prosemirror-gapcursor": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz", + "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==", + "license": "MIT", + "dependencies": { + "prosemirror-keymap": "^1.0.0", + "prosemirror-model": "^1.0.0", + "prosemirror-state": "^1.0.0", + "prosemirror-view": "^1.0.0" + } + }, + "node_modules/prosemirror-history": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz", + "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==", + "license": "MIT", + "dependencies": { + "prosemirror-state": "^1.2.2", + "prosemirror-transform": "^1.0.0", + "prosemirror-view": "^1.31.0", + "rope-sequence": "^1.3.0" + } + }, + "node_modules/prosemirror-inputrules": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.5.0.tgz", + "integrity": "sha512-K0xJRCmt+uSw7xesnHmcn72yBGTbY45vm8gXI4LZXbx2Z0jwh5aF9xrGQgrVPu0WbyFVFF3E/o9VhJYz6SQWnA==", + "license": "MIT", + "dependencies": { + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.0.0" + } + }, + "node_modules/prosemirror-keymap": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz", + "integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==", + "license": "MIT", + "dependencies": { + "prosemirror-state": "^1.0.0", + "w3c-keyname": "^2.2.0" + } + }, + "node_modules/prosemirror-markdown": { + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.2.tgz", + "integrity": "sha512-FPD9rHPdA9fqzNmIIDhhnYQ6WgNoSWX9StUZ8LEKapaXU9i6XgykaHKhp6XMyXlOWetmaFgGDS/nu/w9/vUc5g==", + "license": "MIT", + "dependencies": { + "@types/markdown-it": "^14.0.0", + "markdown-it": "^14.0.0", + "prosemirror-model": "^1.25.0" + } + }, + "node_modules/prosemirror-menu": { + "version": "1.2.5", + "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.5.tgz", + "integrity": "sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ==", + "license": "MIT", + "dependencies": { + "crelt": "^1.0.0", + "prosemirror-commands": "^1.0.0", + "prosemirror-history": "^1.0.0", + "prosemirror-state": "^1.0.0" + } + }, + "node_modules/prosemirror-model": { + "version": "1.25.2", + "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.2.tgz", + "integrity": "sha512-BVypCAJ4SL6jOiTsDffP3Wp6wD69lRhI4zg/iT8JXjp3ccZFiq5WyguxvMKmdKFC3prhaig7wSr8dneDToHE1Q==", + "license": "MIT", + "dependencies": { + "orderedmap": "^2.0.0" + } + }, + "node_modules/prosemirror-schema-basic": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.4.tgz", + "integrity": "sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==", + "license": "MIT", + "dependencies": { + "prosemirror-model": "^1.25.0" + } + }, + "node_modules/prosemirror-schema-list": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz", + "integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==", + "license": "MIT", + "dependencies": { + "prosemirror-model": "^1.0.0", + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.7.3" + } + }, + "node_modules/prosemirror-state": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz", + "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==", + "license": "MIT", + "dependencies": { + "prosemirror-model": "^1.0.0", + "prosemirror-transform": "^1.0.0", + "prosemirror-view": "^1.27.0" + } + }, + "node_modules/prosemirror-tables": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.7.1.tgz", + "integrity": "sha512-eRQ97Bf+i9Eby99QbyAiyov43iOKgWa7QCGly+lrDt7efZ1v8NWolhXiB43hSDGIXT1UXgbs4KJN3a06FGpr1Q==", + "license": "MIT", + "dependencies": { + "prosemirror-keymap": "^1.2.2", + "prosemirror-model": "^1.25.0", + "prosemirror-state": "^1.4.3", + "prosemirror-transform": "^1.10.3", + "prosemirror-view": "^1.39.1" + } + }, + "node_modules/prosemirror-trailing-node": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz", + "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==", + "license": "MIT", + "dependencies": { + "@remirror/core-constants": "3.0.0", + "escape-string-regexp": "^4.0.0" + }, + "peerDependencies": { + "prosemirror-model": "^1.22.1", + "prosemirror-state": "^1.4.2", + "prosemirror-view": "^1.33.8" + } + }, + "node_modules/prosemirror-transform": { + "version": "1.10.4", + "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.4.tgz", + "integrity": "sha512-pwDy22nAnGqNR1feOQKHxoFkkUtepoFAd3r2hbEDsnf4wp57kKA36hXsB3njA9FtONBEwSDnDeCiJe+ItD+ykw==", + "license": "MIT", + "dependencies": { + "prosemirror-model": "^1.21.0" + } + }, + "node_modules/prosemirror-view": { + "version": "1.40.0", + "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.40.0.tgz", + "integrity": "sha512-2G3svX0Cr1sJjkD/DYWSe3cfV5VPVTBOxI9XQEGWJDFEpsZb/gh4MV29ctv+OJx2RFX4BLt09i+6zaGM/ldkCw==", + "license": "MIT", + "dependencies": { + "prosemirror-model": "^1.20.0", + "prosemirror-state": "^1.0.0", + "prosemirror-transform": "^1.1.0" + } + }, "node_modules/proxy-addr": { "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", @@ -10218,6 +10979,15 @@ "dev": true, "license": "MIT" }, + "node_modules/punycode.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz", + "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/pure-rand": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz", @@ -10763,6 +11533,12 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/rope-sequence": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz", + "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==", + "license": "MIT" + }, "node_modules/router": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz", @@ -12265,6 +13041,12 @@ "node": ">=14.17" } }, + "node_modules/uc.micro": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz", + "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==", + "license": "MIT" + }, "node_modules/undici": { "version": "7.11.0", "resolved": "https://registry.npmjs.org/undici/-/undici-7.11.0.tgz", @@ -12447,6 +13229,12 @@ "node": ">= 0.8" } }, + "node_modules/w3c-keyname": { + "version": "2.2.8", + "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", + "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==", + "license": "MIT" + }, "node_modules/watchpack": { "version": "2.4.4", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.4.tgz", diff --git a/package.json b/package.json index 65d563a..8c5509c 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,11 @@ "@react-aria/i18n": "^3.12.10", "@react-stately/calendar": "^3.8.2", "@react-types/overlays": "^3.8.16", + "@tiptap/pm": "^3.0.1", + "@tiptap/react": "^3.0.1", + "@tiptap/starter-kit": "^3.0.1", "@trivago/prettier-plugin-sort-imports": "^5.2.2", + "lucide-react": "^0.525.0", "motion": "^12.23.0", "react-aria-components": "^1.10.1", "react-stately": "^3.39.0", diff --git a/src/Button/Toggle.story.tsx b/src/Button/Toggle.story.tsx new file mode 100644 index 0000000..0d53607 --- /dev/null +++ b/src/Button/Toggle.story.tsx @@ -0,0 +1,67 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Toggle } from './Toggle.js'; + +const meta = { + title: 'Button/Toggle', + component: Toggle, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta; + +export default meta; +export type Story = StoryObj; + +export const Primary: Story = { + render: () => { + return ( + {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + ); + }, +}; + +export const Intent: Story = { + render: () => { + return ( +
+ + {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + + + {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + +
+ ); + }, +}; + +export const Size: Story = { + render: () => { + return ( +
+ + {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + + + {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + + + {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + + + {({ isSelected }) => <>{isSelected ? 'Unpin' : 'Pin'}} + +
+ ); + }, +}; + +export const Disabled: Story = { + args: { + children: <>Pin, + isDisabled: true, + }, +}; diff --git a/src/Button/Toggle.tsx b/src/Button/Toggle.tsx new file mode 100644 index 0000000..48d1de7 --- /dev/null +++ b/src/Button/Toggle.tsx @@ -0,0 +1,102 @@ +'use client'; + +import type { ToggleButtonProps } from 'react-aria-components'; +import { ToggleButton, composeRenderProps } from 'react-aria-components'; +import { twMerge } from 'tailwind-merge'; +import { type VariantProps, tv } from 'tailwind-variants'; + +const toggleStyles = tv({ + base: [ + 'relative inset-ring inset-ring-fg/15 isolate inline-flex items-center justify-center font-medium', + 'focus-visible:outline focus-visible:outline-offset-2 focus-visible:ring-2 focus-visible:ring-offset-3 focus-visible:ring-offset-bg', + '*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:my-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) pressed:*:data-[slot=icon]:text-(--btn-icon-active) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 hover:*:data-[slot=icon]:text-(--btn-icon-active)/90 sm:*:data-[slot=icon]:my-1 forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]', + '*:data-[slot=loader]:-mx-0.5 *:data-[slot=loader]:my-0.5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center *:data-[slot=loader]:text-(--btn-icon) sm:*:data-[slot=loader]:my-1', + ], + variants: { + intent: { + outline: [ + 'bg-transparent selected:bg-secondary outline-secondary-fg ring-secondary-fg/25 hover:bg-secondary', + '[--toggle-icon:color-mix(in_oklab,var(--secondary-fg)_50%,var(--secondary))] pressed:[--toggle-icon:var(--secondary-fg)] selected:[--toggle-icon:var(--secondary-fg)] hover:[--toggle-icon:var(--secondary-fg)]', + ], + plain: [ + 'inset-ring-transparent bg-transparent selected:bg-secondary outline-secondary-fg ring-secondary-fg/25 hover:bg-secondary', + '[--toggle-icon:color-mix(in_oklab,var(--secondary-fg)_50%,var(--secondary))] pressed:[--toggle-icon:var(--secondary-fg)] selected:[--toggle-icon:var(--secondary-fg)] hover:[--toggle-icon:var(--secondary-fg)]', + ], + }, + size: { + xs: [ + 'gap-x-1 px-2.5 py-1.5 text-sm sm:px-2 sm:py-[--spacing(1.4)] sm:text-xs/4', + '*:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3', + '*:data-[slot=loader]:size-3.5 sm:*:data-[slot=loader]:size-3', + ], + sm: [ + 'gap-x-1.5 px-3 py-2 sm:px-2.5 sm:py-1.5 sm:text-sm/5', + '*:data-[slot=icon]:size-4.5 sm:*:data-[slot=icon]:size-4', + '*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4', + ], + md: [ + 'gap-x-2 px-3.5 py-2 sm:px-3 sm:py-1.5 sm:text-sm/6', + '*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4', + '*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4', + ], + lg: [ + 'gap-x-2 px-4 py-2.5 sm:px-3.5 sm:py-2 sm:text-sm/6', + '*:data-[slot=icon]:size-5 sm:*:data-[slot=icon]:size-4.5', + '*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4.5', + ], + 'sq-xs': + 'size-8 *:data-[slot=icon]:size-3.5 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=icon]:size-3 sm:*:data-[slot=loader]:size-3', + 'sq-sm': + 'size-9 *:data-[slot=icon]:size-4.5 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=icon]:size-4 sm:*:data-[slot=loader]:size-4', + 'sq-md': + 'size-10 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=icon]:size-4 sm:*:data-[slot=loader]:size-4', + 'sq-lg': + 'size-11 *:data-[slot=icon]:size-5 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=icon]:size-4.5 sm:*:data-[slot=loader]:size-4.5', + }, + + isCircle: { + true: 'rounded-full', + false: 'rounded-lg', + }, + isDisabled: { + true: 'inset-ring-0 opacity-50 forced-colors:text-[GrayText]', + }, + }, + defaultVariants: { + intent: 'plain', + size: 'md', + isCircle: false, + }, + compoundVariants: [ + { + size: ['xs', 'sq-xs'], + className: + 'rounded-md *:data-[slot=icon]:size-3.5 sm:*:data-[slot=icon]:size-3', + }, + ], +}); + +export interface ToggleProps + extends ToggleButtonProps, + VariantProps { + ref?: React.Ref; +} +export function Toggle(props: ToggleProps) { + const { className, size, intent, ref, ...rest } = props; + return ( + + twMerge( + toggleStyles({ + ...renderProps, + size, + intent, + className, + }) + ) + )} + {...rest} + /> + ); +} From a0be9273f655eff4aa38b86fcc01dcc38b5e8012 Mon Sep 17 00:00:00 2001 From: Shevil Mistry Date: Sat, 19 Jul 2025 13:17:32 +0530 Subject: [PATCH 2/4] feat(): Toolbar for Editor --- src/Editor/Toolbar.story.tsx | 42 +++++++++++++ src/Editor/Toolbar.tsx | 110 +++++++++++++++++++++++++++++++++++ 2 files changed, 152 insertions(+) create mode 100644 src/Editor/Toolbar.story.tsx create mode 100644 src/Editor/Toolbar.tsx diff --git a/src/Editor/Toolbar.story.tsx b/src/Editor/Toolbar.story.tsx new file mode 100644 index 0000000..9dd81ee --- /dev/null +++ b/src/Editor/Toolbar.story.tsx @@ -0,0 +1,42 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { EditorContent, useEditor } from '@tiptap/react'; +import StarterKit from '@tiptap/starter-kit'; + +import { Toolbar } from './Toolbar.js'; + +const meta = { + title: 'Toolbar', + component: Toolbar, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta; + +export default meta; +export type Story = StoryObj; + +export const Primary: Story = { + render: () => { + const editor = useEditor({ + extensions: [StarterKit], + content: '

Type here...

', + }); + + return ( +
+ +
+ +
+
+ ); + }, +}; diff --git a/src/Editor/Toolbar.tsx b/src/Editor/Toolbar.tsx new file mode 100644 index 0000000..b5e518f --- /dev/null +++ b/src/Editor/Toolbar.tsx @@ -0,0 +1,110 @@ +import { Editor } from '@tiptap/react'; +import { + BoldIcon, + Code2Icon, + ItalicIcon, + StrikethroughIcon, + UnderlineIcon, +} from 'lucide-react'; + +import { Toggle } from '../Button/Toggle.js'; +import { Tooltip } from '../Overlay/Tooltip.js'; + +export interface ToolbarProps { + editor?: Editor; +} + +export function Toolbar(props: ToolbarProps) { + const { editor } = props; + + if (!editor) return null; + + return ( +
+ {/* Bold */} + + + editor.chain().focus().toggleBold().run()} + intent='outline' + > + + + + +

Bold

+

ctrl/cmd + b

+ + + + {/* Italic */} + + + editor.chain().focus().toggleItalic().run()} + > + + + + +

Italic

+

ctrl/cmd + i

+ + + + {/* Underline */} + + + editor.chain().focus().toggleUnderline().run()} + > + + + + +

Underline

+

ctrl/cmd + u

+ + + + {/* Strike Through */} + + + editor.chain().focus().toggleStrike().run()} + > + + + + +

\Strike

+

ctrl/cmd + shift + s

+ + + + {/* Code */} + + + editor.chain().focus().toggleCode().run()} + > + + + + +

Code

+

ctrl/cmd + e

+ + +
+ ); +} From 0dc32ce3d1a87fc39b9034cb767b037844b5bb04 Mon Sep 17 00:00:00 2001 From: Shevil Mistry Date: Thu, 24 Jul 2025 01:51:29 +0530 Subject: [PATCH 3/4] feat(): Added subscript and super script along with nodes - code block, ordered list and unordered list --- package-lock.json | 44 +++++++-- package.json | 2 + src/Editor/Toolbar.story.tsx | 24 ++++- src/Editor/Toolbar.tsx | 171 +++++++++++++++++++++++++---------- 4 files changed, 182 insertions(+), 59 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9118bcb..571b471 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,8 @@ "@react-aria/i18n": "^3.12.10", "@react-stately/calendar": "^3.8.2", "@react-types/overlays": "^3.8.16", + "@tiptap/extension-subscript": "^3.0.7", + "@tiptap/extension-superscript": "^3.0.7", "@tiptap/pm": "^3.0.1", "@tiptap/react": "^3.0.1", "@tiptap/starter-kit": "^3.0.1", @@ -5463,16 +5465,16 @@ } }, "node_modules/@tiptap/core": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.0.1.tgz", - "integrity": "sha512-H0xOnDE5TF3bsCLq2FiFg69TWTzyHxyJdQ9D5m/P++QgLN8t2olGGznk4s1I+lxI3FB1YtIKMwBggRQuSQsclg==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-3.0.7.tgz", + "integrity": "sha512-/NC0BbekWzi5sC+s7gRrGIv33cUfuiZUG5DWx8TNedA6b6aTFPHUe+2wKRPaPQ0pfGdOWU0nsOkboUJ9dAjl4g==", "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/ueberdosis" }, "peerDependencies": { - "@tiptap/pm": "^3.0.1" + "@tiptap/pm": "^3.0.7" } }, "node_modules/@tiptap/extension-blockquote": { @@ -5763,6 +5765,34 @@ "@tiptap/core": "^3.0.1" } }, + "node_modules/@tiptap/extension-subscript": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@tiptap/extension-subscript/-/extension-subscript-3.0.7.tgz", + "integrity": "sha512-u+RGXNGs9H20JWKgduMA9zKUiRCpuuwZrTNY1yi5Xj881zzdVbUmLiAv1Op/3q1x1dWaAKPw65Bhg9590GvkcA==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.7", + "@tiptap/pm": "^3.0.7" + } + }, + "node_modules/@tiptap/extension-superscript": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@tiptap/extension-superscript/-/extension-superscript-3.0.7.tgz", + "integrity": "sha512-Ey424AdkKWBITNCxj9gmgaShgjlbdCy9jWTVRKRALLFlYKcXP2iUqN/OjYfIz/e468ZR1hl8XZigMWC5wQCyEQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.7", + "@tiptap/pm": "^3.0.7" + } + }, "node_modules/@tiptap/extension-text": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-3.0.1.tgz", @@ -5804,9 +5834,9 @@ } }, "node_modules/@tiptap/pm": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.0.1.tgz", - "integrity": "sha512-G6eusuS7BMFVNQvA1irkJtSeJCoj6GczalJifRnukklfd2ZD18ZDx+xmzu25oLISQH9cPKmKIREmTTuMt+s2og==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-3.0.7.tgz", + "integrity": "sha512-f8PnWjYqbMCxny8cyjbFNeIyeOYLECTa/7gj8DJr53Ns+P94b4kYIt/GkveR5KoOxsbmXi8Uc4mjcR1giQPaIQ==", "license": "MIT", "dependencies": { "prosemirror-changeset": "^2.3.0", diff --git a/package.json b/package.json index 8c5509c..12e5e89 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,8 @@ "@react-aria/i18n": "^3.12.10", "@react-stately/calendar": "^3.8.2", "@react-types/overlays": "^3.8.16", + "@tiptap/extension-subscript": "^3.0.7", + "@tiptap/extension-superscript": "^3.0.7", "@tiptap/pm": "^3.0.1", "@tiptap/react": "^3.0.1", "@tiptap/starter-kit": "^3.0.1", diff --git a/src/Editor/Toolbar.story.tsx b/src/Editor/Toolbar.story.tsx index 9dd81ee..2333a11 100644 --- a/src/Editor/Toolbar.story.tsx +++ b/src/Editor/Toolbar.story.tsx @@ -1,6 +1,9 @@ import type { Meta, StoryObj } from '@storybook/react'; +import Subscript from '@tiptap/extension-subscript'; +import Superscript from '@tiptap/extension-superscript'; import { EditorContent, useEditor } from '@tiptap/react'; import StarterKit from '@tiptap/starter-kit'; +import { useEffect } from 'react'; import { Toolbar } from './Toolbar.js'; @@ -20,12 +23,27 @@ export type Story = StoryObj; export const Primary: Story = { render: () => { const editor = useEditor({ - extensions: [StarterKit], + extensions: [StarterKit, Subscript, Superscript], content: '

Type here...

', }); return (
+
- +
+ +
); diff --git a/src/Editor/Toolbar.tsx b/src/Editor/Toolbar.tsx index b5e518f..931c270 100644 --- a/src/Editor/Toolbar.tsx +++ b/src/Editor/Toolbar.tsx @@ -2,10 +2,16 @@ import { Editor } from '@tiptap/react'; import { BoldIcon, Code2Icon, + CodeIcon, ItalicIcon, + ListIcon, + ListOrderedIcon, StrikethroughIcon, + SubscriptIcon, + SuperscriptIcon, UnderlineIcon, } from 'lucide-react'; +import { twMerge } from 'tailwind-merge'; import { Toggle } from '../Button/Toggle.js'; import { Tooltip } from '../Overlay/Tooltip.js'; @@ -23,86 +29,151 @@ export function Toolbar(props: ToolbarProps) {
{/* Bold */} - - editor.chain().focus().toggleBold().run()} - intent='outline' - > - - - + editor.chain().focus().toggleBold().run()} + intent='outline' + > + +

Bold

-

ctrl/cmd + b

+

ctrl/cmd + B

 {/* Italic */} - - editor.chain().focus().toggleItalic().run()} - > - - - + editor.chain().focus().toggleItalic().run()} + > + +

Italic

-

ctrl/cmd + i

+

ctrl/cmd + I

 {/* Underline */} - - editor.chain().focus().toggleUnderline().run()} - > - - - + editor.chain().focus().toggleUnderline().run()} + > + +

Underline

-

ctrl/cmd + u

+

ctrl/cmd + U

 {/* Strike Through */} - - editor.chain().focus().toggleStrike().run()} - > - - - + editor.chain().focus().toggleStrike().run()} + > + +

\Strike

-

ctrl/cmd + shift + s

+

ctrl/cmd + shift + S

 {/* Code */} - - editor.chain().focus().toggleCode().run()} - > - - - + editor.chain().focus().toggleCode().run()} + > + +

Code

-

ctrl/cmd + e

+

ctrl/cmd + E

+ + + + {/* Subscript */} + + editor.chain().focus().toggleSubscript().run()} + > + + + +

Subscript

+

ctrl/cmd + ,

+ + + + {/* Superscript */} + + editor.chain().focus().toggleSuperscript().run()} + > + + + +

Superscript

+

ctrl/cmd + .

+ + + + {/* BulletList */} + + editor.chain().focus().toggleBulletList().run()} + > + + + +

Bullet List

+

ctrl/cmd + shift + 8

+ + + + {/* Numbered List */} + + editor.chain().focus().toggleOrderedList().run()} + > + + + +

Numbered List

+

ctrl/cmd + shift + 7

+ + + + {/* Code Block */} + + editor.chain().focus().toggleCodeBlock().run()} + > + + + +

Code Block

+

ctrl/cmd + alt + C
From 843af5baec0e329fc92e8d49d39a73546ab19b6d Mon Sep 17 00:00:00 2001 From: Shevil Mistry Date: Mon, 28 Jul 2025 01:12:26 +0530 Subject: [PATCH 4/4] feat(): image/file import, paste in editor --- package-lock.json | 44 +++++++++++++++++++++++++ package.json | 2 ++ src/Editor/Toolbar.story.tsx | 63 ++++++++++++++++++++++++++++++++++-- 3 files changed, 107 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 571b471..151bb3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,8 @@ "@react-aria/i18n": "^3.12.10", "@react-stately/calendar": "^3.8.2", "@react-types/overlays": "^3.8.16", + "@tiptap/extension-file-handler": "^3.0.7", + "@tiptap/extension-image": "^3.0.7", "@tiptap/extension-subscript": "^3.0.7", "@tiptap/extension-superscript": "^3.0.7", "@tiptap/pm": "^3.0.1", @@ -5587,6 +5589,21 @@ "@tiptap/extensions": "^3.0.1" } }, + "node_modules/@tiptap/extension-file-handler": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@tiptap/extension-file-handler/-/extension-file-handler-3.0.7.tgz", + "integrity": "sha512-eNJOqLaM91erqm6W7k+ocG09fuiVI4B+adWhv97sFim9TboF0sEIWEYdl68z06N1/+tXv6w8S4zUYQCOzxlVtw==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.7", + "@tiptap/extension-text-style": "^3.0.7", + "@tiptap/pm": "^3.0.7" + } + }, "node_modules/@tiptap/extension-floating-menu": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-3.0.1.tgz", @@ -5656,6 +5673,19 @@ "@tiptap/pm": "^3.0.1" } }, + "node_modules/@tiptap/extension-image": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@tiptap/extension-image/-/extension-image-3.0.7.tgz", + "integrity": "sha512-hs6TiSmefwvAqxwhy4+ZFCbmAXiAeWq4v5Zd65kQ7dvN7epeV0NM7ME5su/oscQgoKvNAy1r/4sJVaTnHomYMQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.7" + } + }, "node_modules/@tiptap/extension-italic": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-3.0.1.tgz", @@ -5806,6 +5836,20 @@ "@tiptap/core": "^3.0.1" } }, + "node_modules/@tiptap/extension-text-style": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-3.0.7.tgz", + "integrity": "sha512-naJ1XxlbFJ1qlpA+i54lQYKuhWP1dnkUslM86OT0TZt0zJBeu7LIrqSOVGmMB++lF/btnQLMnYkYSSnkLgIw3A==", + "license": "MIT", + "peer": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "peerDependencies": { + "@tiptap/core": "^3.0.7" + } + }, "node_modules/@tiptap/extension-underline": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-3.0.1.tgz", diff --git a/package.json b/package.json index 12e5e89..6c2d6e0 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,8 @@ "@react-aria/i18n": "^3.12.10", "@react-stately/calendar": "^3.8.2", "@react-types/overlays": "^3.8.16", + "@tiptap/extension-file-handler": "^3.0.7", + "@tiptap/extension-image": "^3.0.7", "@tiptap/extension-subscript": "^3.0.7", "@tiptap/extension-superscript": "^3.0.7", "@tiptap/pm": "^3.0.1", diff --git a/src/Editor/Toolbar.story.tsx b/src/Editor/Toolbar.story.tsx index 2333a11..b9be6a7 100644 --- a/src/Editor/Toolbar.story.tsx +++ b/src/Editor/Toolbar.story.tsx @@ -1,9 +1,10 @@ import type { Meta, StoryObj } from '@storybook/react'; +import FileHandler from '@tiptap/extension-file-handler'; +import Image from '@tiptap/extension-image'; import Subscript from '@tiptap/extension-subscript'; import Superscript from '@tiptap/extension-superscript'; import { EditorContent, useEditor } from '@tiptap/react'; import StarterKit from '@tiptap/starter-kit'; -import { useEffect } from 'react'; import { Toolbar } from './Toolbar.js'; @@ -23,7 +24,65 @@ export type Story = StoryObj; export const Primary: Story = { render: () => { const editor = useEditor({ - extensions: [StarterKit, Subscript, Superscript], + extensions: [ + StarterKit, + Subscript, + Superscript, + Image, + FileHandler.configure({ + allowedMimeTypes: [ + 'image/png', + 'image/jpeg', + 'image/gif', + 'image/webp', + ], + onDrop: (currentEditor, files, pos) => { + files.forEach((file) => { + const fileReader = new FileReader(); + + fileReader.readAsDataURL(file); + fileReader.onload = () => { + currentEditor + .chain() + .insertContentAt(pos, { + type: 'image', + attrs: { + src: fileReader.result, + }, + }) + .focus() + .run(); + }; + }); + }, + onPaste: (currentEditor, files, htmlContent) => { + files.forEach((file) => { + if (htmlContent) { + // if there is htmlContent, stop manual insertion & let other extensions handle insertion via inputRule + // you could extract the pasted file from this url string and upload it to a server for example + console.log(htmlContent); // eslint-disable-line no-console + return false; + } + + const fileReader = new FileReader(); + + fileReader.readAsDataURL(file); + fileReader.onload = () => { + currentEditor + .chain() + .insertContentAt(currentEditor.state.selection.anchor, { + type: 'image', + attrs: { + src: fileReader.result, + }, + }) + .focus() + .run(); + }; + }); + }, + }), + ], content: '

Type here...

', });