From 02f9c3385ccd20e54ce85310bd3b89d399f7d882 Mon Sep 17 00:00:00 2001 From: Jeet Mandaliya <45892659+sereneinserenade@users.noreply.github.com> Date: Fri, 25 Mar 2022 18:23:01 +0100 Subject: [PATCH] style update and following react style of writing code --- package-lock.json | 761 ++++++++++++++- package.json | 2 +- .../Newtab/components/editor/Menubar.scss | 22 +- .../Newtab/components/editor/Menubar.tsx | 871 ++++++++++-------- .../components/editor/MenubarTableButtons.tsx | 2 +- 5 files changed, 1201 insertions(+), 457 deletions(-) diff --git a/package-lock.json b/package-lock.json index 036aba7..70250ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1321,6 +1321,50 @@ "rxjs": "^6.5.5 || ^7.1.0" } }, + "@formatjs/ecma402-abstract": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.3.tgz", + "integrity": "sha512-kP/Buv5vVFMAYLHNvvUzr0lwRTU0u2WTy44Tqwku1X3C3lJ5dKqDCYVqA8wL+Y19Bq+MwHgxqd5FZJRCIsLRyQ==", + "requires": { + "@formatjs/intl-localematcher": "0.2.24", + "tslib": "^2.1.0" + } + }, + "@formatjs/fast-memoize": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz", + "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==", + "requires": { + "tslib": "^2.1.0" + } + }, + "@formatjs/icu-messageformat-parser": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.18.tgz", + "integrity": "sha512-vquIzsAJJmZ5jWVH8dEgUKcbG4yu3KqtyPet+q35SW5reLOvblkfeCXTRW2TpIwNXzdVqsJBwjbTiRiSU9JxwQ==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.3", + "@formatjs/icu-skeleton-parser": "1.3.5", + "tslib": "^2.1.0" + } + }, + "@formatjs/icu-skeleton-parser": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.5.tgz", + "integrity": "sha512-Nhyo2/6kG7ZfgeEfo02sxviOuBcvtzH6SYUharj3DLCDJH3A/4OxkKcmx/2PWGX4bc6iSieh+FA94CsKDxnZBQ==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.3", + "tslib": "^2.1.0" + } + }, + "@formatjs/intl-localematcher": { + "version": "0.2.24", + "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.24.tgz", + "integrity": "sha512-K/HRGo6EMnCbhpth/y3u4rW4aXkmQNqRe1L2G+Y5jNr3v0gYhvaucV8WixNju/INAMbPBlbsRBRo/nfjnoOnxQ==", + "requires": { + "tslib": "^2.1.0" + } + }, "@hot-loader/react-dom": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/@hot-loader/react-dom/-/react-dom-17.0.2.tgz", @@ -1348,6 +1392,31 @@ "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==", "dev": true }, + "@internationalized/date": { + "version": "3.0.0-alpha.3", + "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.0.0-alpha.3.tgz", + "integrity": "sha512-lfUzsXEXNLSR5zmBlwBlNcawrJ8V+u9+JCyoTX76KAEuiHlKtk5wE7S0fMf1WllFHWdrENqy7LbN00FC3HhADQ==", + "requires": { + "@babel/runtime": "^7.6.2" + } + }, + "@internationalized/message": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.0.5.tgz", + "integrity": "sha512-DMQ9nQHr9XlP8Z0gCCaQ1j8ReuVGW5YrV+ZEMQLoGlHAg+mVILlZPIAgwB/5l3hi6xUIGQovMqpnGT3AypX1ig==", + "requires": { + "@babel/runtime": "^7.6.2", + "intl-messageformat": "^9.6.12" + } + }, + "@internationalized/number": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.0.6.tgz", + "integrity": "sha512-6rKYYY/7V2rm45gg9ugV7VAV/1p5mHudgc1QJxJAdSddRWKz9RmSemV02pwE4k0mbsgvRRsqin7NgEb3LQFX9A==", + "requires": { + "@babel/runtime": "^7.6.2" + } + }, "@jridgewell/resolve-uri": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.4.tgz", @@ -1371,15 +1440,25 @@ } }, "@nextui-org/react": { - "version": "1.0.2-beta.4", - "resolved": "https://registry.npmjs.org/@nextui-org/react/-/react-1.0.2-beta.4.tgz", - "integrity": "sha512-14QFPOJwVn6c6WWmLyud/458DoVolWDBhq1wpMCe3o0dWdtNoOr/YwxiuZjSNwtypeDrroMbXcEIY4AoGzLV1w==", + "version": "1.0.4-beta.5", + "resolved": "https://registry.npmjs.org/@nextui-org/react/-/react-1.0.4-beta.5.tgz", + "integrity": "sha512-9Evj2nHATu3t8LMKRl/Bdwi0GtOo2R3l1PTdpZ1yueIIp9Hc8WR6L8PnJrcrhOxYJosy02n2qTTEANKLvbBn9A==", "requires": { "@babel/runtime": "7.9.6", - "@react-aria/focus": "3.5.0", - "@react-aria/label": "3.2.1", - "@react-aria/ssr": "3.1.0", - "@react-aria/utils": "3.11.0", + "@react-aria/checkbox": "3.3.0", + "@react-aria/focus": "3.5.1", + "@react-aria/i18n": "3.3.6", + "@react-aria/interactions": "3.8.0", + "@react-aria/label": "3.2.2", + "@react-aria/ssr": "3.1.2", + "@react-aria/table": "3.2.1", + "@react-aria/utils": "3.11.1", + "@react-aria/visually-hidden": "3.2.4", + "@react-stately/data": "3.4.5", + "@react-stately/table": "3.1.1", + "@react-stately/toggle": "3.2.4", + "@react-types/grid": "3.0.1", + "@react-types/shared": "3.11.0", "@stitches/react": "1.2.6" } }, @@ -1414,79 +1493,664 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz", "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==" }, + "@react-aria/checkbox": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/@react-aria/checkbox/-/checkbox-3.3.0.tgz", + "integrity": "sha512-0PVUYoflY4iVnFkn/fFKUDZSluNCZ8wO4M2bXhklbc7LneOw6uZbx9DkRrbk1bqLFLlJzoTAXmy1eXtNASZ9Gg==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/label": "^3.2.2", + "@react-aria/toggle": "^3.2.0", + "@react-aria/utils": "^3.11.1", + "@react-stately/checkbox": "^3.0.4", + "@react-stately/toggle": "^3.2.4", + "@react-types/checkbox": "^3.2.4" + } + }, "@react-aria/focus": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.5.0.tgz", - "integrity": "sha512-Eib75Q6QgQdn8VVVByg5Vipaaj/C//8Bs++sQY7nkomRx4sdArOnXbDppul3YHP6mRfU9VRLvAigEUlReQF/Xw==", + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.5.1.tgz", + "integrity": "sha512-8TTlxekumLxFZo0GELVUDCv6olQTMlGtobeGNaf0MVoonGz5oukjjPa3DB+PZRxMduTotRlniqpejnZi4fzMDw==", "requires": { "@babel/runtime": "^7.6.2", - "@react-aria/interactions": "^3.6.0", - "@react-aria/utils": "^3.9.0", - "@react-types/shared": "^3.9.0", + "@react-aria/interactions": "^3.8.0", + "@react-aria/utils": "^3.11.1", + "@react-types/shared": "^3.11.0", "clsx": "^1.1.1" } }, + "@react-aria/grid": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/@react-aria/grid/-/grid-3.2.5.tgz", + "integrity": "sha512-wtE+ufepg96bZW2pAEQD2MpBg0VMo0BrAuN4LDoviP3gqc9ViEUxIUu1hoSgsQqkCJI4ZIKrS+2ITH/G60W9lw==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/focus": "^3.5.4", + "@react-aria/i18n": "^3.3.8", + "@react-aria/interactions": "^3.8.3", + "@react-aria/live-announcer": "^3.0.5", + "@react-aria/selection": "^3.8.1", + "@react-aria/utils": "^3.11.3", + "@react-stately/grid": "^3.1.3", + "@react-stately/selection": "^3.9.3", + "@react-stately/virtualizer": "^3.1.8", + "@react-types/checkbox": "^3.2.6", + "@react-types/grid": "^3.0.3", + "@react-types/shared": "^3.11.2" + }, + "dependencies": { + "@internationalized/date": { + "version": "3.0.0-alpha.4", + "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.0.0-alpha.4.tgz", + "integrity": "sha512-kOJh6ugw8xraC46MLIQq8Cu+FyeCJKuHfY4eQPHkz4rPJmOiPGT0xYTYXqQHWcdFiwYSLNGvk/1DAMN7qRY1EA==", + "requires": { + "@babel/runtime": "^7.6.2" + } + }, + "@react-aria/focus": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.5.4.tgz", + "integrity": "sha512-N70J6boUPUKjBfGnYDwUXi1r0HKjvo7RmD381QbDBqZNy/j5v/pgQ+aauSuIlsHa/TmmiRuynIm4Q0sWN4/hbQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/interactions": "^3.8.3", + "@react-aria/utils": "^3.11.3", + "@react-types/shared": "^3.11.2", + "clsx": "^1.1.1" + } + }, + "@react-aria/i18n": { + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.3.8.tgz", + "integrity": "sha512-9yEaBRJ6Lxd20mUPvzorIJraYp3TD1yKRo4BTTuO/Om9BPSp1VW8JhUuyMZNouo1oQffxddFXqppuayLPwhJlQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@internationalized/date": "3.0.0-alpha.4", + "@internationalized/message": "^3.0.5", + "@internationalized/number": "^3.0.6", + "@react-aria/ssr": "^3.1.2", + "@react-aria/utils": "^3.11.3", + "@react-types/shared": "^3.11.2" + } + }, + "@react-aria/interactions": { + "version": "3.8.3", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.8.3.tgz", + "integrity": "sha512-zffWRqhEk4SQNbr5sv3BnMIsmQjtdhXvv3FLn9Ch0HxxGb8VStjrVPEv7r9OtVodab+ThcUehL4NJ8zU/U/4ew==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/utils": "^3.11.3", + "@react-types/shared": "^3.11.2" + } + }, + "@react-aria/utils": { + "version": "3.11.3", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.11.3.tgz", + "integrity": "sha512-EH3SyA3FtbhuOj1cgGveiEYidKe3CgGYkP8D57O46rlTWcgTxhGHUEibGeJw3PFXxmbgm5RIOdBo29YwItvtcQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/ssr": "^3.1.2", + "@react-stately/utils": "^3.4.1", + "@react-types/shared": "^3.11.2", + "clsx": "^1.1.1" + } + }, + "@react-stately/virtualizer": { + "version": "3.1.8", + "resolved": "https://registry.npmjs.org/@react-stately/virtualizer/-/virtualizer-3.1.8.tgz", + "integrity": "sha512-tqOv9UiDgP8y9XJFFmV5tyuiJGmM5rMH4p8VpqNl/1ZgCmqt0XEPEVybYo1RsZoEcVVnZNXeYSLckCxXA307yg==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/utils": "^3.11.3", + "@react-types/shared": "^3.11.2" + } + }, + "@react-types/grid": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.0.3.tgz", + "integrity": "sha512-zIzRV7HULy0FlzWUQLaq6Mwr0bk3+s6+ZwzJeTq+dm1wYIcWr47AK4GsDUzHZo06CDEZBBIEvEU6sN29AzF8EQ==", + "requires": { + "@react-types/shared": "^3.11.2" + } + }, + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } + }, + "@react-aria/i18n": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.3.6.tgz", + "integrity": "sha512-GOogCx5UR3RpkJSceQwwenLctaK7tbDP0DKzmaWQv1ZNUg9nr35w65VMq46WIGz2dIQhqydTagZP1Exci1KhkQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@internationalized/date": "3.0.0-alpha.3", + "@internationalized/message": "^3.0.5", + "@internationalized/number": "^3.0.5", + "@react-aria/ssr": "^3.1.2", + "@react-aria/utils": "^3.11.2", + "@react-types/shared": "^3.11.1" + }, + "dependencies": { + "@react-aria/utils": { + "version": "3.11.3", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.11.3.tgz", + "integrity": "sha512-EH3SyA3FtbhuOj1cgGveiEYidKe3CgGYkP8D57O46rlTWcgTxhGHUEibGeJw3PFXxmbgm5RIOdBo29YwItvtcQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/ssr": "^3.1.2", + "@react-stately/utils": "^3.4.1", + "@react-types/shared": "^3.11.2", + "clsx": "^1.1.1" + } + }, + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } + }, "@react-aria/interactions": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.7.0.tgz", - "integrity": "sha512-Xomchjb9bqvh3ocil+QCEYFSxsTy8PHEz43mNP6z2yuu3UqTpl2FsWfyKgF/Yy0WKVkyV2dO2uz758KJTCLZhw==", + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.8.0.tgz", + "integrity": "sha512-2NPyk9JM/Obd49+xm9pnSq8dGbe9t1YtQDZprOs/2hyyP6kZEfvQX1NruXcC+SuAMUPwI4R2eiCgLuMfkeUYrA==", "requires": { "@babel/runtime": "^7.6.2", - "@react-aria/utils": "^3.10.0", - "@react-types/shared": "^3.10.0" + "@react-aria/utils": "^3.11.1", + "@react-types/shared": "^3.11.0" } }, "@react-aria/label": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@react-aria/label/-/label-3.2.1.tgz", - "integrity": "sha512-QZ5/dpJKRjB1JtFZfOVd5GUiCpA2yMgmNA6ky6jT5XNAo7H14QqGRFUGDTLAQYGd+Bc3s+NayOT3NKUYur/3Xw==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@react-aria/label/-/label-3.2.2.tgz", + "integrity": "sha512-boOXJJGp2+Rqmvqwj/ElfVGsK37/rLUcTZ9fzvN261TAj5mk8QITQ0ii9t6ueNJuuTVDucvOO6NtDhgWRYc4+A==", "requires": { "@babel/runtime": "^7.6.2", - "@react-aria/utils": "^3.10.0", - "@react-types/label": "^3.5.0", - "@react-types/shared": "^3.10.0" + "@react-aria/utils": "^3.11.1", + "@react-types/label": "^3.5.1", + "@react-types/shared": "^3.11.0" + } + }, + "@react-aria/live-announcer": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@react-aria/live-announcer/-/live-announcer-3.0.5.tgz", + "integrity": "sha512-soIfCI8koNu3ZFlXzeYFnw3nzYqXt/yMDq9lhGXe/XbJ7Zq8m5Q4f+JhMhnAMN2OmazysJafXuq7rLp8wCv/TA==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/utils": "^3.11.3", + "@react-aria/visually-hidden": "^3.2.7" + }, + "dependencies": { + "@react-aria/interactions": { + "version": "3.8.3", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.8.3.tgz", + "integrity": "sha512-zffWRqhEk4SQNbr5sv3BnMIsmQjtdhXvv3FLn9Ch0HxxGb8VStjrVPEv7r9OtVodab+ThcUehL4NJ8zU/U/4ew==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/utils": "^3.11.3", + "@react-types/shared": "^3.11.2" + } + }, + "@react-aria/utils": { + "version": "3.11.3", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.11.3.tgz", + "integrity": "sha512-EH3SyA3FtbhuOj1cgGveiEYidKe3CgGYkP8D57O46rlTWcgTxhGHUEibGeJw3PFXxmbgm5RIOdBo29YwItvtcQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/ssr": "^3.1.2", + "@react-stately/utils": "^3.4.1", + "@react-types/shared": "^3.11.2", + "clsx": "^1.1.1" + } + }, + "@react-aria/visually-hidden": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.2.7.tgz", + "integrity": "sha512-rvE0N91nBa7DxcH6KyapjttWQJFhRqeFBfGA9oCeGgTYLsn5CBvnKMLQEm2Z7ZlUcl08Xh2nB2KxKrRQ4ldYlw==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/interactions": "^3.8.3", + "@react-aria/utils": "^3.11.3", + "clsx": "^1.1.1" + } + }, + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } + }, + "@react-aria/selection": { + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/@react-aria/selection/-/selection-3.8.1.tgz", + "integrity": "sha512-Nt6CtP+fZw4/oj/x9Ql+y41uaRGCA8qtyLIthFWorj+zniP4j0EPgT3iWuePgjk5mBxW5rQPdIJbg1pFFuEU8w==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/focus": "^3.5.4", + "@react-aria/i18n": "^3.3.8", + "@react-aria/interactions": "^3.8.3", + "@react-aria/utils": "^3.11.3", + "@react-stately/collections": "^3.3.7", + "@react-stately/selection": "^3.9.3", + "@react-types/shared": "^3.11.2" + }, + "dependencies": { + "@internationalized/date": { + "version": "3.0.0-alpha.4", + "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.0.0-alpha.4.tgz", + "integrity": "sha512-kOJh6ugw8xraC46MLIQq8Cu+FyeCJKuHfY4eQPHkz4rPJmOiPGT0xYTYXqQHWcdFiwYSLNGvk/1DAMN7qRY1EA==", + "requires": { + "@babel/runtime": "^7.6.2" + } + }, + "@react-aria/focus": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.5.4.tgz", + "integrity": "sha512-N70J6boUPUKjBfGnYDwUXi1r0HKjvo7RmD381QbDBqZNy/j5v/pgQ+aauSuIlsHa/TmmiRuynIm4Q0sWN4/hbQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/interactions": "^3.8.3", + "@react-aria/utils": "^3.11.3", + "@react-types/shared": "^3.11.2", + "clsx": "^1.1.1" + } + }, + "@react-aria/i18n": { + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.3.8.tgz", + "integrity": "sha512-9yEaBRJ6Lxd20mUPvzorIJraYp3TD1yKRo4BTTuO/Om9BPSp1VW8JhUuyMZNouo1oQffxddFXqppuayLPwhJlQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@internationalized/date": "3.0.0-alpha.4", + "@internationalized/message": "^3.0.5", + "@internationalized/number": "^3.0.6", + "@react-aria/ssr": "^3.1.2", + "@react-aria/utils": "^3.11.3", + "@react-types/shared": "^3.11.2" + } + }, + "@react-aria/interactions": { + "version": "3.8.3", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.8.3.tgz", + "integrity": "sha512-zffWRqhEk4SQNbr5sv3BnMIsmQjtdhXvv3FLn9Ch0HxxGb8VStjrVPEv7r9OtVodab+ThcUehL4NJ8zU/U/4ew==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/utils": "^3.11.3", + "@react-types/shared": "^3.11.2" + } + }, + "@react-aria/utils": { + "version": "3.11.3", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.11.3.tgz", + "integrity": "sha512-EH3SyA3FtbhuOj1cgGveiEYidKe3CgGYkP8D57O46rlTWcgTxhGHUEibGeJw3PFXxmbgm5RIOdBo29YwItvtcQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/ssr": "^3.1.2", + "@react-stately/utils": "^3.4.1", + "@react-types/shared": "^3.11.2", + "clsx": "^1.1.1" + } + }, + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } } }, "@react-aria/ssr": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.0.tgz", - "integrity": "sha512-RxqQKmE8sO7TGdrcSlHTcVzMP450hqowtBSd2bBS9oPlcokVkaGq28c3Rwa8ty5ctw4EBCjXqjP7xdcKMGDzug==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.1.2.tgz", + "integrity": "sha512-amXY11ImpokvkTMeKRHjsSsG7v1yzzs6yeqArCyBIk60J3Yhgxwx9Cah+Uu/804ATFwqzN22AXIo7SdtIaMP+g==", "requires": { "@babel/runtime": "^7.6.2" } }, + "@react-aria/table": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@react-aria/table/-/table-3.2.1.tgz", + "integrity": "sha512-wFWpgMGzF8fcsYfl6etbAv8V7minb1AnF/vnOZrmHwqec+/QpxMm8B4ZIUH8JqNR9bAo9Rt+HF+8xsbOjZHj2g==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/focus": "^3.5.1", + "@react-aria/grid": "^3.2.1", + "@react-aria/i18n": "^3.3.5", + "@react-aria/interactions": "^3.8.0", + "@react-aria/live-announcer": "^3.0.2", + "@react-aria/selection": "^3.7.2", + "@react-aria/utils": "^3.11.1", + "@react-stately/table": "^3.1.1", + "@react-stately/virtualizer": "3.1.7-alpha.0", + "@react-types/checkbox": "^3.2.4", + "@react-types/grid": "^3.0.1", + "@react-types/shared": "^3.11.0", + "@react-types/table": "^3.1.1" + } + }, + "@react-aria/toggle": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/@react-aria/toggle/-/toggle-3.2.3.tgz", + "integrity": "sha512-cB3gGV0pAEP6iDq4HLDQwW/6TTswOUyGbZBTXAjJNJRUa+RsZl/uO3odBoQBo4ToohsLHvL6OcrZxWFlbZsUbw==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/focus": "^3.5.4", + "@react-aria/interactions": "^3.8.3", + "@react-aria/utils": "^3.11.3", + "@react-stately/toggle": "^3.2.6", + "@react-types/checkbox": "^3.2.6", + "@react-types/shared": "^3.11.2", + "@react-types/switch": "^3.1.5" + }, + "dependencies": { + "@react-aria/focus": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.5.4.tgz", + "integrity": "sha512-N70J6boUPUKjBfGnYDwUXi1r0HKjvo7RmD381QbDBqZNy/j5v/pgQ+aauSuIlsHa/TmmiRuynIm4Q0sWN4/hbQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/interactions": "^3.8.3", + "@react-aria/utils": "^3.11.3", + "@react-types/shared": "^3.11.2", + "clsx": "^1.1.1" + } + }, + "@react-aria/interactions": { + "version": "3.8.3", + "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.8.3.tgz", + "integrity": "sha512-zffWRqhEk4SQNbr5sv3BnMIsmQjtdhXvv3FLn9Ch0HxxGb8VStjrVPEv7r9OtVodab+ThcUehL4NJ8zU/U/4ew==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/utils": "^3.11.3", + "@react-types/shared": "^3.11.2" + } + }, + "@react-aria/utils": { + "version": "3.11.3", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.11.3.tgz", + "integrity": "sha512-EH3SyA3FtbhuOj1cgGveiEYidKe3CgGYkP8D57O46rlTWcgTxhGHUEibGeJw3PFXxmbgm5RIOdBo29YwItvtcQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/ssr": "^3.1.2", + "@react-stately/utils": "^3.4.1", + "@react-types/shared": "^3.11.2", + "clsx": "^1.1.1" + } + }, + "@react-stately/toggle": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.2.6.tgz", + "integrity": "sha512-M/+iX6eHYZScKfaOQvp3KqityOuRTWLOgskCNlnQBTq5VSszuD2p4uWxJQWXq3DbU+q872Fz4vJ7eTc2l9YA/Q==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-stately/utils": "^3.4.1", + "@react-types/checkbox": "^3.2.6", + "@react-types/shared": "^3.11.2" + } + }, + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } + }, "@react-aria/utils": { - "version": "3.11.0", - "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.11.0.tgz", - "integrity": "sha512-4yFA8E9xqDCUlolYSsoyp/qxrkiQrnEqx1BQOrKDuicpW7MBJ39pJC23YFMpyK2a6xEptc6xJEeIEFJXp57jJw==", + "version": "3.11.1", + "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.11.1.tgz", + "integrity": "sha512-sD/9EVinZIvuvzAjJMs2YYOz74DELolU0pDBHWuFAAOffJw9gBy8X/HxkmG91X4gwxRzy9jlJAFEEChoqtmHFA==", "requires": { "@babel/runtime": "^7.6.2", - "@react-aria/ssr": "^3.1.0", - "@react-stately/utils": "^3.3.0", - "@react-types/shared": "^3.10.1", + "@react-aria/ssr": "^3.1.1", + "@react-stately/utils": "^3.4.0", + "@react-types/shared": "^3.11.0", "clsx": "^1.1.1" } }, + "@react-aria/visually-hidden": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@react-aria/visually-hidden/-/visually-hidden-3.2.4.tgz", + "integrity": "sha512-o1ToUW+/kQ8+PWOuEFxW77eT9ZhLjws+Ynik1ew4ocgJGQyPpFQ0P2riM9idopXOzLmuUyHeBMGPN1JnTwQ4ZQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/interactions": "^3.8.0", + "@react-aria/utils": "^3.11.1", + "clsx": "^1.1.1" + } + }, + "@react-stately/checkbox": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@react-stately/checkbox/-/checkbox-3.0.6.tgz", + "integrity": "sha512-RrXJlEtp2q3g6Yex9QI8/tRJhIDmG1oKc5+VyVvdxp0NXtK0Zz+ycIlXuzcI5gwlBemv5ETxbIG4p5gdNXVeKA==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-stately/toggle": "^3.2.6", + "@react-stately/utils": "^3.4.1", + "@react-types/checkbox": "^3.2.6" + }, + "dependencies": { + "@react-stately/toggle": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.2.6.tgz", + "integrity": "sha512-M/+iX6eHYZScKfaOQvp3KqityOuRTWLOgskCNlnQBTq5VSszuD2p4uWxJQWXq3DbU+q872Fz4vJ7eTc2l9YA/Q==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-stately/utils": "^3.4.1", + "@react-types/checkbox": "^3.2.6", + "@react-types/shared": "^3.11.2" + } + }, + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } + }, + "@react-stately/collections": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/@react-stately/collections/-/collections-3.3.7.tgz", + "integrity": "sha512-SbXFsImuxzKed6tzIZeKnkO4631PPoR+apSv2J42qbUEZ0tuyD6a+vQ9lkB1P06bZ0zAjDg5oNOwqGo4yUvp/Q==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-types/shared": "^3.11.2" + }, + "dependencies": { + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } + }, + "@react-stately/data": { + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/@react-stately/data/-/data-3.4.5.tgz", + "integrity": "sha512-IbAuoG6iuO52eKLhB7lvo3i7nAk76i8Q8eqkAkyx2w6Yi68cruUyQ2kmx/FoNyCSfKyGCGT8VOSSYBR3mxjpvw==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-types/shared": "^3.11.1" + }, + "dependencies": { + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } + }, + "@react-stately/grid": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@react-stately/grid/-/grid-3.1.3.tgz", + "integrity": "sha512-NDNCxq+6f2wxoA+i/Rp99GCieMwFwSjWJU9eVTQCYCA5gp6mp7occnlh5840xTDtkJbb9uAsm6Ikv5+I5a42gA==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-stately/selection": "^3.9.3", + "@react-types/grid": "^3.0.3", + "@react-types/shared": "^3.11.2" + }, + "dependencies": { + "@react-types/grid": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.0.3.tgz", + "integrity": "sha512-zIzRV7HULy0FlzWUQLaq6Mwr0bk3+s6+ZwzJeTq+dm1wYIcWr47AK4GsDUzHZo06CDEZBBIEvEU6sN29AzF8EQ==", + "requires": { + "@react-types/shared": "^3.11.2" + } + }, + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } + }, + "@react-stately/selection": { + "version": "3.9.3", + "resolved": "https://registry.npmjs.org/@react-stately/selection/-/selection-3.9.3.tgz", + "integrity": "sha512-Bg3qa6zuQcTbkQFwNr8e3WjyOBNRSf0ql9qn5HeQvDxnH8z65oqm0MKQ7FOiKSj7XEc/agZK8/yd8fQoeAHnXg==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-stately/collections": "^3.3.7", + "@react-stately/utils": "^3.4.1", + "@react-types/shared": "^3.11.2" + }, + "dependencies": { + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } + }, + "@react-stately/table": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@react-stately/table/-/table-3.1.1.tgz", + "integrity": "sha512-4sLTv88xd/sM4utcbCB/WS9LawblzLWThOuKKMxllkR/QrMQklH9FLiLVs20doSVN/CdNvER5IFkl0+NNFYMjg==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-stately/collections": "^3.3.5", + "@react-stately/grid": "^3.1.1", + "@react-stately/selection": "^3.9.1", + "@react-types/grid": "^3.0.1", + "@react-types/shared": "^3.11.0", + "@react-types/table": "^3.1.1" + } + }, + "@react-stately/toggle": { + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.2.4.tgz", + "integrity": "sha512-WMyrs20vBPIkaP0PFjWQiZSaZoWQDNvtbCVAf6UH/0MTPMqJDR+r4dH8q9C+aOqM4UHiR3wQa2JjiwAxj5rSXQ==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-stately/utils": "^3.4.0", + "@react-types/checkbox": "^3.2.4", + "@react-types/shared": "^3.11.0" + } + }, "@react-stately/utils": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.3.0.tgz", - "integrity": "sha512-f//Y8q0+FFcS04xvCNvbba7WWRLHzj2AegLgdgwTxsnk9Gb+AyuasdRrRY7bGQhdHuEJ7OIiQZ9EQWndDbrTcg==", + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.4.1.tgz", + "integrity": "sha512-mjFbKklj/W8KRw1CQSpUJxHd7lhUge4i00NwJTwGxbzmiJgsTWlKKS/1rBf48ey9hUBopXT5x5vG/AxQfWTQug==", "requires": { "@babel/runtime": "^7.6.2" } }, + "@react-stately/virtualizer": { + "version": "3.1.7-alpha.0", + "resolved": "https://registry.npmjs.org/@react-stately/virtualizer/-/virtualizer-3.1.7-alpha.0.tgz", + "integrity": "sha512-0M7HUIJclA20wAdHslMlSrzsyI5TidZXBNVj8xz49CUAwIl+MHp4vCY+IsitnFvtvB0dSvax9XfD9Rnr23Tzlw==", + "requires": { + "@babel/runtime": "^7.6.2", + "@react-aria/utils": "^3.11.1", + "@react-types/shared": "^3.11.0" + } + }, + "@react-types/checkbox": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.2.6.tgz", + "integrity": "sha512-bOQAnnDEpXL1P4oRBiwjnOskKQtawc+JcRZzQk/9k7NwKWfv5MHG/MFDJsW057GPm9Ks0onNATohtw6LFvzAQA==", + "requires": { + "@react-types/shared": "^3.11.2" + }, + "dependencies": { + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } + }, + "@react-types/grid": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.0.1.tgz", + "integrity": "sha512-D5pEItMhT3Khz9xDdkC5hi6gAKVjjuSSCD8VxzDxd885Kk1xWJZjsYPCDKNFaifmt7LZEXo4JiAMg2M2WRqiQA==", + "requires": { + "@react-types/shared": "^3.11.0" + } + }, "@react-types/label": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/@react-types/label/-/label-3.5.0.tgz", - "integrity": "sha512-a9lpQUyV4XwsZv0gV1jPjPWicSSa+DRliuXLTwORirxNLF0kMk89DLYf0a9CZhiEniJYqoqR3laJDvLAFW1x/Q==", + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/@react-types/label/-/label-3.5.3.tgz", + "integrity": "sha512-YleKhsN2j17tQx2B8W6Hq8bVzIY/Q5b5YS/8oyey4WfsbIZXWJNXFH8DgQ4hVUxxAplwsRnxOmtiBYLWFMeXQg==", "requires": { - "@react-types/shared": "^3.9.0" + "@react-types/shared": "^3.11.2" + }, + "dependencies": { + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } } }, "@react-types/shared": { - "version": "3.10.1", - "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.10.1.tgz", - "integrity": "sha512-U3dLJtstvOiZ8XLrWdNv9WXuruoDyfIfSXguTs9N0naDdO+M0MIbt/1Hg7Toe43ueAe56GM14IFL+S0/jhv8ow==" + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.0.tgz", + "integrity": "sha512-BLKHwS94m+/731RZ4tgsr0uT7oJCioCNIfzFmZBZuZtASqpXJVsRhn2omweMD0e3uH2atxuwIZbf0WUW3Y6CRw==" + }, + "@react-types/switch": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@react-types/switch/-/switch-3.1.5.tgz", + "integrity": "sha512-ZCqMGg0NievmgMuzCuW3f/6cHO6PXbFNULd1DXaPxSxKitiDrNFrE0Y6ui3LtYhKosICJ/Z7EeEDGb8FAyyT9g==", + "requires": { + "@react-types/checkbox": "^3.2.6", + "@react-types/shared": "^3.11.2" + }, + "dependencies": { + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } + }, + "@react-types/table": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@react-types/table/-/table-3.1.3.tgz", + "integrity": "sha512-l5ZmoPEnnMNUOW/mC7x/HDXC0CmHGz5IpWBPbV1aJtQCxRD42yosMaP8pT48EPZjupSeEuUGVFW2sZQlEjHbwg==", + "requires": { + "@react-types/grid": "^3.0.3", + "@react-types/shared": "^3.11.2" + }, + "dependencies": { + "@react-types/grid": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@react-types/grid/-/grid-3.0.3.tgz", + "integrity": "sha512-zIzRV7HULy0FlzWUQLaq6Mwr0bk3+s6+ZwzJeTq+dm1wYIcWr47AK4GsDUzHZo06CDEZBBIEvEU6sN29AzF8EQ==", + "requires": { + "@react-types/shared": "^3.11.2" + } + }, + "@react-types/shared": { + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.11.2.tgz", + "integrity": "sha512-MIjjjkFi/DTzMVmeFJJrpc51eS/PLNzLZEv6o/QJPhQ9uOMElYqA790qAcG75u3tR0XGU2Vv9RyeOC7+ppw8/Q==" + } + } }, "@stitches/react": { "version": "1.2.6", @@ -5412,6 +6076,17 @@ "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==", "dev": true }, + "intl-messageformat": { + "version": "9.11.4", + "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.11.4.tgz", + "integrity": "sha512-77TSkNubIy/hsapz6LQpyR6OADcxhWdhSaboPb5flMaALCVkPvAIxr48AlPqaMl4r1anNcvR9rpLWVdwUY1IKg==", + "requires": { + "@formatjs/ecma402-abstract": "1.11.3", + "@formatjs/fast-memoize": "1.2.1", + "@formatjs/icu-messageformat-parser": "2.0.18", + "tslib": "^2.1.0" + } + }, "ip": { "version": "1.1.5", "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz", diff --git a/package.json b/package.json index 875bf53..7661b71 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "dependencies": { "@extend-chrome/storage": "^1.5.0", "@hot-loader/react-dom": "^17.0.1", - "@nextui-org/react": "^1.0.2-beta.4", + "@nextui-org/react": "^1.0.4-beta.5", "@tiptap/extension-character-count": "^2.0.0-beta.24", "@tiptap/extension-link": "^2.0.0-beta.36", "@tiptap/extension-placeholder": "^2.0.0-beta.47", diff --git a/src/pages/Newtab/components/editor/Menubar.scss b/src/pages/Newtab/components/editor/Menubar.scss index cc3e309..20927dc 100644 --- a/src/pages/Newtab/components/editor/Menubar.scss +++ b/src/pages/Newtab/components/editor/Menubar.scss @@ -1,9 +1,12 @@ .menubar { gap: 5px; - margin: 2em 0; + margin: 1em 0; align-items: center; flex-wrap: wrap; - justify-content: center; + padding: var(--nextui-space-6); + box-shadow: var(--nextui-shadows-sm); + border-radius: var(--nextui-radii-sm); + width: fit-content; .divider { height: 1.5em; @@ -16,6 +19,7 @@ .menubar, .bubble-menu, .table-controls-buttons-section { + .menubar-button { align-items: center; justify-content: center; @@ -60,8 +64,16 @@ } .dark-theme { - .menubar-button { - box-shadow: 0 0 4px 1px rgba($color: white, $alpha: 0.2); + .menubar { + background: rgba(white, 0.1); + } + + .menubar-button:not(.active) { + box-shadow: 0 0 0 1px rgba(white, 0.25); + } + + .menubar-button.active { + box-shadow: 0 0 0 1px var(--nextui-colors-primary); } .divider { @@ -78,7 +90,7 @@ } .bubble-menu { - background: var(--nextui-colors-background); + background: var(--nextui-colors-background) !important; border-radius: 14px; box-shadow: var(--nextui-shadows-md); padding: 0.65em; diff --git a/src/pages/Newtab/components/editor/Menubar.tsx b/src/pages/Newtab/components/editor/Menubar.tsx index aefc2b8..22220e0 100644 --- a/src/pages/Newtab/components/editor/Menubar.tsx +++ b/src/pages/Newtab/components/editor/Menubar.tsx @@ -22,7 +22,15 @@ type MenubarProps = { onSearchTooltipClose: () => any } -type ActionType = (editor: Editor) => boolean + +const stopPrevent = (e: T) => { + (e as Event).stopPropagation(); + (e as Event).preventDefault() + + return e +} + +type ActionType = ((editor: Editor) => boolean) | any interface Button { name: string @@ -32,6 +40,451 @@ interface Button { icon?: IconType } + +const buttons: Button[] = [ + { + name: 'bold', + label: 'Bold', + action: (editor: Editor) => editor.chain().focus().toggleBold().run(), + isActive: (editor: Editor) => editor.isActive('bold'), + icon: RiBold, + }, + { + name: 'italic', + label: 'Italic', + action: (editor: Editor) => editor.chain().focus().toggleItalic().run(), + isActive: (editor: Editor) => editor.isActive('italic'), + icon: RiItalic, + }, + { + name: 'underline', + label: 'Underline', + action: (editor: Editor) => editor.chain().focus().toggleUnderline().run(), + isActive: (editor: Editor) => editor.isActive('underline'), + icon: RiUnderline, + }, + { + name: 'strike', + label: 'Strike', + action: (editor: Editor) => editor.chain().focus().toggleStrike().run(), + isActive: (editor: Editor) => editor.isActive('strike'), + icon: RiStrikethrough, + }, + { + name: 'divider', + }, + { + name: 'link', + label: 'Link', + action: (openLinkModal: Function) => openLinkModal(), + isActive: (editor: Editor) => editor.isActive('link'), + icon: RiLink, + }, + { + name: 'code', + label: 'Code', + action: (editor: Editor) => editor.chain().focus().toggleCode().run(), + isActive: (editor: Editor) => editor.isActive('code'), + icon: RiCodeSSlashLine, + }, + { + name: 'divider', + }, + { + name: 'alignLeft', + label: 'Align Left', + action: (editor: Editor) => editor.chain().focus().setTextAlign('left').run(), + isActive: (editor: Editor) => editor.isActive({ textAlign: 'left' }), + icon: RiAlignLeft, + }, + { + name: 'alignCenter', + label: 'Align Center', + action: (editor: Editor) => editor.chain().focus().setTextAlign('center').run(), + isActive: (editor: Editor) => editor.isActive({ textAlign: 'center' }), + icon: RiAlignCenter, + }, + { + name: 'alignRight', + label: 'Align Right', + action: (editor: Editor) => editor.chain().focus().setTextAlign('right').run(), + isActive: (editor: Editor) => editor.isActive({ textAlign: 'right' }), + icon: RiAlignRight, + }, + { + name: 'alignJustify', + label: 'Align Justify', + action: (editor: Editor) => editor.chain().focus().setTextAlign('justify').run(), + isActive: (editor: Editor) => editor.isActive({ textAlign: 'justify' }), + icon: RiAlignJustify, + }, + { + name: 'divider', + }, + { + name: 'h1', + label: 'H1', + action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(), + isActive: (editor: Editor) => editor.isActive('heading', { level: 1 }), + icon: RiH1, + }, + { + name: 'h2', + label: 'H2', + action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(), + isActive: (editor: Editor) => editor.isActive('heading', { level: 2 }), + icon: RiH2, + }, + { + name: 'h3', + label: 'H3', + action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(), + isActive: (editor: Editor) => editor.isActive('heading', { level: 3 }), + icon: RiH3, + }, + { + name: 'divider', + }, + // { + // name: 'h4', + // label: 'H4', + // action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 4 }).run(), + // isActive: (editor: Editor) => editor.isActive('heading', { level: 4 }), + // icon: RiH4 + // }, + // { + // name: 'h5', + // label: 'H5', + // action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 5 }).run(), + // isActive: (editor: Editor) => editor.isActive('heading', { level: 5 }), + // icon: RiH5, + // }, + // { + // name: 'h6', + // label: 'H6', + // action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 6 }).run(), + // isActive: (editor: Editor) => editor.isActive('heading', { level: 6 }), + // icon: RiH6, + // }, + { + name: 'orderedList', + label: 'Ordered List', + action: (editor: Editor) => editor.chain().focus().toggleOrderedList().run(), + isActive: (editor: Editor) => editor.isActive('orderedList'), + icon: RiListOrdered, + }, + { + name: 'bulletList', + label: 'Bullet List', + action: (editor: Editor) => editor.chain().focus().toggleBulletList().run(), + isActive: (editor: Editor) => editor.isActive('bulletList'), + icon: RiListUnordered, + }, + { + name: 'taskList', + label: 'Task List', + action: (editor: Editor) => editor.chain().focus().toggleTaskList().run(), + isActive: (editor: Editor) => editor.isActive('taskList'), + icon: RiListCheck2, + }, + { + name: 'divider', + }, + { + name: 'table', + label: 'Table', + action: () => null, + isActive: (editor: Editor) => editor.can().deleteTable(), + icon: RiTableLine, + }, + { + name: 'blockquote', + label: 'Blockquote', + action: (editor: Editor) => editor.chain().focus().toggleBlockquote().run(), + isActive: (editor: Editor) => editor.isActive('blockquote'), + icon: RiDoubleQuotesL, + }, + { + name: 'codeBlock', + label: 'Code Block', + action: (editor: Editor) => editor.chain().focus().toggleCodeBlock().run(), + isActive: (editor: Editor) => editor.isActive('codeBlock'), + icon: RiCodeBoxLine, + }, + { + name: 'divider', + }, + // { + // name: 'horizontalRule', + // label: 'Horizontal Rule', + // action: (editor: Editor) => editor.chain().focus().setHorizontalRule().run(), + // icon: RiSeparator, + // }, + // { + // name: 'hardBreak', + // label: 'Hard Break', + // action: (editor: Editor) => editor.chain().focus().setHardBreak().run(), + // icon: RiTextWrap, + // }, + // { + // name: 'divider', + // }, + // { + // name: 'undo', + // label: 'Undo', + // action: (editor: Editor) => editor.chain().focus().undo().run(), + // icon: RiArrowGoBackLine, + // }, + // { + // name: 'redo', + // label: 'Redo', + // action: (editor: Editor) => editor.chain().focus().redo().run(), + // icon: RiArrowGoForwardLine, + // } +] + +const isMac = navigator.userAgent.toLowerCase().includes('mac') + +interface SearchSectionProps { + editor: Editor, + localSearchTerm: string, + replaceTerm: string, + setLocalSearchTerm: (val: string) => void + setReplaceTerm: (val: string) => void +} + +const SearchSection = ({ editor, localSearchTerm, setLocalSearchTerm, replaceTerm, setReplaceTerm }: SearchSectionProps) => ( +
+
+ stopPrevent(e) && setLocalSearchTerm((e.target as HTMLInputElement).value)} + id="search-input" + animated={false} + shadow={false} + /> + stopPrevent(e) && setReplaceTerm((e.target as HTMLInputElement).value)} + onKeyPress={e => e.key === 'Enter' && editor.commands.replace()} + animated={false} + shadow={false} + /> +
+ +
+ + + +
+
+) + + +const linuxButtonKeys: Record = { + bold: "ctrl+B", + italic: "ctrl+I", + underline: "ctrl+U", + strike: "ctrl+shift+X", + link: "ctrl+k", + code: "ctrl+E", + alignLeft: "ctrl+shift+L", + alignCenter: "ctrl+shift+E", + alignRight: "ctrl+shift+R", + alignJustify: "ctrl+shift+J", + h1: "ctrl+alt+1", + h2: "ctrl+alt+2", + h3: "ctrl+alt+3", + orderedList: "ctrl+shift+7", + bulletList: "ctrl+shift+8", + taskList: "ctrl+shift+9", + //table: isMac?"":"", + blockquote: "ctrl+shift+B", + codeBlock: "ctrl+alt+C", + //horizontalRule: isMac?"":"", + //hardBreak: isMac?"":"", + undo: "ctrl+Z", + redo: "ctrl+shift+z", +} + +const macButtonKeys: Record = { + bold: "⌘+B", + italic: "⌘+I", + underline: "⌘+U", + strike: "⌘+shift+X", + link: "⌘+K", + code: "⌘+E", + alignLeft: "⌘+shift+L", + alignCenter: "⌘+shift+E", + alignRight: "⌘+shift+R", + alignJustify: "⌘+shift+J", + h1: "⌘+⌥+1", + h2: "⌘+⌥+2", + h3: "⌘+⌥+3", + orderedList: "⌘+shift+7", + bulletList: "⌘+shift+8", + taskList: "⌘+shift+9", + //table:isMac?"":"", + blockquote: "⌘+shift+B", + codeBlock: "⌘+⌥+C", + //horizontalRule:isMac?"":"", + //hardBreak:isMac?"":"", + undo: "⌘+Z", + redo: "⌘+shift+Z", +} + +const buttonKeys = isMac ? macButtonKeys : linuxButtonKeys + +const GimmeTooltip = (tooltip: string, name: string) => { + if (buttonKeys[name]) return {tooltip} ({buttonKeys[name]}) + + return {tooltip} +} + + +interface BubbleMenuProps { + editor: Editor, + isActiveStates: Record, + debouncedCalculateIsActiveStates: (editor: Editor) => void, + openLinkModal: () => void +} +const GimmeBubbleMenu = ({ editor, isActiveStates, debouncedCalculateIsActiveStates, openLinkModal }: BubbleMenuProps) => { + const nameOfButtons = ['bold', 'italic', 'underline', 'strike', 'link', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'code'] + + return BubbleMenu({ + editor, + className: `bubble-menu menubar flex ${isActiveStates['codeBlock'] && 'hide'}`, + tippyOptions: { placement: 'top' }, + children: ( + <> + { + buttons.filter(b => nameOfButtons.some(n => b.name === n)) + .map((btn) => { + return ( + + + + ) + }) + } + + ) + }) +} + + + +type CodeBlockLanguageSelectorProps = { + editor: Editor, + currentLang: string, + setCurrentLang: (val: string) => void +} + +const CodeBlockLanguageSelector = ({ editor, currentLang, setCurrentLang }: CodeBlockLanguageSelectorProps) => { + const reverseLangAlias = useMemo(gimmeReverseLangAlias, []) + + const langs = lowlight.listLanguages() || [] + + langs.unshift('') + + const [val, setVal] = useState('') + + useEffect(() => { setVal(reverseLangAlias[currentLang] || currentLang) }, [currentLang]) + + + const updateVal = (e: React.ChangeEvent) => { + const { value } = e.target + + editor.chain().updateAttributes('codeBlock', { language: value }).focus().run() + + setTimeout(() => setCurrentLang(editor.getAttributes('codeBlock').language)); + } + + return ( +
+ { + langs.length && editor.isActive('codeBlock') + ? ( + <> + Select Language: + + + + ) + : ( Not inside a code block. ) + } +
+ ) +} + + +type TableGridProps = { + tableGridHeight: number, + tableGridWidth: number, + setActiveCell: ({ x, y }: { x: number, y: number }) => void, + insertTable: ({ rows, cols, e }: { rows: number, cols: number, e: Event }) => void, + activeCell: { x: number, y: number } +} + +const TableGrid = ({ tableGridHeight, tableGridWidth, setActiveCell, insertTable, activeCell }: TableGridProps) => { + return ( +
+ { + new Array(tableGridHeight).fill(0).map((h, i) => { + return ( +
+ { + new Array(tableGridWidth) + .fill(0) + .map((w, j) => ( +
setActiveCell({ x: j + 1, y: i + 1 })} + > +
+ )) + } +
+ ) + }) + } + { +
+ + {activeCell.y} Rows x {activeCell.x} Cols + +
+ } +
+ ) +} + + const Menubar = ({ editor, isLocalSearchVisible, onSearchTooltipClose }: MenubarProps) => { if (!editor) return null @@ -112,242 +565,6 @@ const Menubar = ({ editor, isLocalSearchVisible, onSearchTooltipClose }: Menubar url && editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run() } - const buttons: Button[] = [ - { - name: 'bold', - label: 'Bold', - action: (editor: Editor) => editor.chain().focus().toggleBold().run(), - isActive: (editor: Editor) => editor.isActive('bold'), - icon: RiBold, - }, - { - name: 'italic', - label: 'Italic', - action: (editor: Editor) => editor.chain().focus().toggleItalic().run(), - isActive: (editor: Editor) => editor.isActive('italic'), - icon: RiItalic, - }, - { - name: 'underline', - label: 'Underline', - action: (editor: Editor) => editor.chain().focus().toggleUnderline().run(), - isActive: (editor: Editor) => editor.isActive('underline'), - icon: RiUnderline, - }, - { - name: 'strike', - label: 'Strike', - action: (editor: Editor) => editor.chain().focus().toggleStrike().run(), - isActive: (editor: Editor) => editor.isActive('strike'), - icon: RiStrikethrough, - }, - { - name: 'divider', - }, - { - name: 'link', - label: 'Link', - action: openLinkModal, - isActive: (editor: Editor) => editor.isActive('link'), - icon: RiLink, - }, - { - name: 'code', - label: 'Code', - action: (editor: Editor) => editor.chain().focus().toggleCode().run(), - isActive: (editor: Editor) => editor.isActive('code'), - icon: RiCodeSSlashLine, - }, - { - name: 'divider', - }, - { - name: 'alignLeft', - label: 'Align Left', - action: (editor: Editor) => editor.chain().focus().setTextAlign('left').run(), - isActive: (editor: Editor) => editor.isActive({ textAlign: 'left' }), - icon: RiAlignLeft, - }, - { - name: 'alignCenter', - label: 'Align Center', - action: (editor: Editor) => editor.chain().focus().setTextAlign('center').run(), - isActive: (editor: Editor) => editor.isActive({ textAlign: 'center' }), - icon: RiAlignCenter, - }, - { - name: 'alignRight', - label: 'Align Right', - action: (editor: Editor) => editor.chain().focus().setTextAlign('right').run(), - isActive: (editor: Editor) => editor.isActive({ textAlign: 'right' }), - icon: RiAlignRight, - }, - { - name: 'alignJustify', - label: 'Align Justify', - action: (editor: Editor) => editor.chain().focus().setTextAlign('justify').run(), - isActive: (editor: Editor) => editor.isActive({ textAlign: 'justify' }), - icon: RiAlignJustify, - }, - { - name: 'divider', - }, - { - name: 'h1', - label: 'H1', - action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 1 }).run(), - isActive: (editor: Editor) => editor.isActive('heading', { level: 1 }), - icon: RiH1, - }, - { - name: 'h2', - label: 'H2', - action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 2 }).run(), - isActive: (editor: Editor) => editor.isActive('heading', { level: 2 }), - icon: RiH2, - }, - { - name: 'h3', - label: 'H3', - action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 3 }).run(), - isActive: (editor: Editor) => editor.isActive('heading', { level: 3 }), - icon: RiH3, - }, - { - name: 'divider', - }, - // { - // name: 'h4', - // label: 'H4', - // action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 4 }).run(), - // isActive: (editor: Editor) => editor.isActive('heading', { level: 4 }), - // icon: RiH4 - // }, - // { - // name: 'h5', - // label: 'H5', - // action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 5 }).run(), - // isActive: (editor: Editor) => editor.isActive('heading', { level: 5 }), - // icon: RiH5, - // }, - // { - // name: 'h6', - // label: 'H6', - // action: (editor: Editor) => editor.chain().focus().toggleHeading({ level: 6 }).run(), - // isActive: (editor: Editor) => editor.isActive('heading', { level: 6 }), - // icon: RiH6, - // }, - { - name: 'orderedList', - label: 'Ordered List', - action: (editor: Editor) => editor.chain().focus().toggleOrderedList().run(), - isActive: (editor: Editor) => editor.isActive('orderedList'), - icon: RiListOrdered, - }, - { - name: 'bulletList', - label: 'Bullet List', - action: (editor: Editor) => editor.chain().focus().toggleBulletList().run(), - isActive: (editor: Editor) => editor.isActive('bulletList'), - icon: RiListUnordered, - }, - { - name: 'taskList', - label: 'Task List', - action: (editor: Editor) => editor.chain().focus().toggleTaskList().run(), - isActive: (editor: Editor) => editor.isActive('taskList'), - icon: RiListCheck2, - }, - { - name: 'divider', - }, - { - name: 'table', - label: 'Table', - action: () => null, - isActive: (editor: Editor) => editor.can().deleteTable(), - icon: RiTableLine, - }, - { - name: 'blockquote', - label: 'Blockquote', - action: (editor: Editor) => editor.chain().focus().toggleBlockquote().run(), - isActive: (editor: Editor) => editor.isActive('blockquote'), - icon: RiDoubleQuotesL, - }, - { - name: 'codeBlock', - label: 'Code Block', - action: (editor: Editor) => editor.chain().focus().toggleCodeBlock().run(), - isActive: (editor: Editor) => editor.isActive('codeBlock'), - icon: RiCodeBoxLine, - }, - { - name: 'divider', - }, - // { - // name: 'horizontalRule', - // label: 'Horizontal Rule', - // action: (editor: Editor) => editor.chain().focus().setHorizontalRule().run(), - // icon: RiSeparator, - // }, - // { - // name: 'hardBreak', - // label: 'Hard Break', - // action: (editor: Editor) => editor.chain().focus().setHardBreak().run(), - // icon: RiTextWrap, - // }, - // { - // name: 'divider', - // }, - // { - // name: 'undo', - // label: 'Undo', - // action: (editor: Editor) => editor.chain().focus().undo().run(), - // icon: RiArrowGoBackLine, - // }, - // { - // name: 'redo', - // label: 'Redo', - // action: (editor: Editor) => editor.chain().focus().redo().run(), - // icon: RiArrowGoForwardLine, - // } - ] - - const isMac = useMemo(() => navigator.userAgent.toLowerCase().includes('mac'), []) - - const buttonKeys = useMemo>(() => ({ - bold: isMac ? "⌘+B" : "ctrl+B", - italic: isMac ? "⌘+I" : "ctrl+I", - underline: isMac ? "⌘+U" : "ctrl+U", - strike: isMac ? "⌘+shift+X" : "ctrl+shift+X", - link: isMac ? "⌘+K" : "ctrl+k", - code: isMac ? "⌘+E" : "ctrl+E", - alignLeft: isMac ? "⌘+shift+L" : "ctrl+shift+L", - alignCenter: isMac ? "⌘+shift+E" : "ctrl+shift+E", - alignRight: isMac ? "⌘+shift+R" : "ctrl+shift+R", - alignJustify: isMac ? "⌘+shift+J" : "ctrl+shift+J", - h1: isMac ? "⌘+⌥+1" : "ctrl+alt+1", - h2: isMac ? "⌘+⌥+2" : "ctrl+alt+2", - h3: isMac ? "⌘+⌥+3" : "ctrl+alt+3", - orderedList: isMac ? "⌘+shift+7" : "ctrl+shift+7", - bulletList: isMac ? "⌘+shift+8" : "ctrl+shift+8", - taskList: isMac ? "⌘+shift+9" : "ctrl+shift+9", - //table:isMac?"":"", - blockquote: isMac ? "⌘+shift+B" : "ctrl+shift+B", - codeBlock: isMac ? "⌘+⌥+C" : "ctrl+alt+C", - //horizontalRule:isMac?"":"", - //hardBreak:isMac?"":"", - undo: isMac ? "⌘+Z" : "ctrl+Z", - redo: isMac ? "⌘+shift+Z" : "ctrl+shift+z", - }), [isMac]) - - const GimmeTooltip = (tooltip: string, name: string) => { - if (buttonKeys[name]) return {tooltip} ({buttonKeys[name]}) - - return {tooltip} - } - const calculateIsActiveStates = (editor: Editor) => { const states: Record = {} @@ -380,170 +597,6 @@ const Menubar = ({ editor, isLocalSearchVisible, onSearchTooltipClose }: Menubar useEffect(() => { onMounted() }, []) - const stopPrevent = (e: T) => { - (e as Event).stopPropagation(); - (e as Event).preventDefault() - - return e - } - - const SearchSection = () => ( -
-
- stopPrevent(e) && setLocalSearchTerm((e.target as HTMLInputElement).value)} - id="search-input" - animated={false} - shadow={false} - /> - stopPrevent(e) && setReplaceTerm((e.target as HTMLInputElement).value)} - onKeyPress={e => e.key === 'Enter' && editor.commands.replace()} - animated={false} - shadow={false} - /> -
- -
- - - -
-
- ) - - - const GimmeBubbleMenu = ({ editor }: { editor: Editor }) => { - const nameOfButtons = ['bold', 'italic', 'underline', 'strike', 'link', 'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', 'code'] - - return BubbleMenu({ - editor, - className: `bubble-menu menubar flex ${isActiveStates['codeBlock'] && 'hide'}`, - tippyOptions: { placement: 'top' }, - children: ( - <> - { - buttons.filter(b => nameOfButtons.some(n => b.name === n)) - .map((btn) => { - return ( - - - - ) - }) - } - - ) - }) - } - - type TableGridProps = { - tableGridHeight: number, - tableGridWidth: number - } - - const TableGrid = ({ tableGridHeight, tableGridWidth }: TableGridProps) => { - return ( -
- { - new Array(tableGridHeight).fill(0).map((h, i) => { - return ( -
- { - new Array(tableGridWidth) - .fill(0) - .map((w, j) => ( -
setActiveCell({ x: j + 1, y: i + 1 })} - > -
- )) - } -
- ) - }) - } - { -
- - {activeCell.y} Rows x {activeCell.x} Cols - -
- } -
- ) - } - - type CodeBlockLanguageSelectorProps = { - editor: Editor, - currentLang: string - } - - const CodeBlockLanguageSelector = ({ editor, currentLang }: CodeBlockLanguageSelectorProps) => { - const reverseLangAlias = useMemo(gimmeReverseLangAlias, []) - - const langs = lowlight.listLanguages() || [] - - langs.unshift('') - - const [val, setVal] = useState('') - - useEffect(() => { setVal(reverseLangAlias[currentLang] || currentLang) }, [currentLang]) - - - const updateVal = (e: React.ChangeEvent) => { - const { value } = e.target - - editor.chain().updateAttributes('codeBlock', { language: value }).focus().run() - - setTimeout(() => setCurrentLang(editor.getAttributes('codeBlock').language)); - } - - return ( -
- { - langs.length && editor.isActive('codeBlock') - ? ( - <> - Select Language: - - - - ) - : ( Not inside a code block. ) - } -
- ) - } - return (
{ @@ -560,7 +613,7 @@ const Menubar = ({ editor, isLocalSearchVisible, onSearchTooltipClose }: Menubar !val && setTimeout(() => `${setTableGridHeight(6)} ${setTableGridWidth(6)}`, 500)} > @@ -584,7 +637,11 @@ const Menubar = ({ editor, isLocalSearchVisible, onSearchTooltipClose }: Menubar if (btn.name === 'codeBlock') { return ( - + @@ -616,7 +673,7 @@ const Menubar = ({ editor, isLocalSearchVisible, onSearchTooltipClose }: Menubar visible={!!globalSearchTerm.length || isLocalSearchVisible} trigger='click' placement='bottom' - content={SearchSection()} + content={SearchSection({ editor, localSearchTerm, replaceTerm, setLocalSearchTerm, setReplaceTerm })} onVisibleChange={(val) => val ? null : onSearchTooltipClose()} >