diff --git a/package-lock.json b/package-lock.json index f5a82f07..c6a5590c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,11 +24,13 @@ "@radix-ui/react-popover": "1.0.3", "@radix-ui/react-scroll-area": "^1.0.2", "@radix-ui/react-separator": "^1.0.1", + "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e", "@tanstack/react-query": "^4.24.10", "@tauri-apps/api": "^1.2.0", "classnames": "^2.3.2", "codemirror": "^6.0.1", "framer-motion": "^9.0.4", + "lodash": "^4.17.21", "parse-color": "^1.0.0", "parse-json": "^6.0.2", "react": "^18.2.0", @@ -38,6 +40,7 @@ }, "devDependencies": { "@tauri-apps/cli": "^1.2.2", + "@types/lodash": "^4.14.191", "@types/node": "^18.7.10", "@types/parse-color": "^1.0.1", "@types/parse-json": "^4.0.0", @@ -1934,6 +1937,35 @@ "node": ">=10" } }, + "node_modules/@tailwindcss/nesting": { + "version": "0.0.0-insiders.565cd3e", + "resolved": "https://registry.npmjs.org/@tailwindcss/nesting/-/nesting-0.0.0-insiders.565cd3e.tgz", + "integrity": "sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==", + "dependencies": { + "postcss-nested": "^5.0.5" + }, + "peerDependencies": { + "postcss": "^8.2.15" + } + }, + "node_modules/@tailwindcss/nesting/node_modules/postcss-nested": { + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz", + "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==", + "dependencies": { + "postcss-selector-parser": "^6.0.6" + }, + "engines": { + "node": ">=12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, "node_modules/@tanstack/query-core": { "version": "4.24.10", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.24.10.tgz", @@ -2181,6 +2213,12 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "node_modules/@types/lodash": { + "version": "4.14.191", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", + "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==", + "dev": true + }, "node_modules/@types/node": { "version": "18.13.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz", @@ -3358,7 +3396,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", - "dev": true, "bin": { "cssesc": "bin/cssesc" }, @@ -5270,8 +5307,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.merge": { "version": "4.6.2", @@ -5397,7 +5433,6 @@ "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", - "dev": true, "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -5729,8 +5764,7 @@ "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -5768,7 +5802,6 @@ "version": "8.4.21", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", - "dev": true, "funding": [ { "type": "opencollective", @@ -5896,7 +5929,6 @@ "version": "6.0.11", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz", "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==", - "dev": true, "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -6505,7 +6537,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -7035,8 +7066,7 @@ "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", - "dev": true + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, "node_modules/uuid": { "version": "9.0.0", @@ -8786,6 +8816,24 @@ "dev": true, "optional": true }, + "@tailwindcss/nesting": { + "version": "0.0.0-insiders.565cd3e", + "resolved": "https://registry.npmjs.org/@tailwindcss/nesting/-/nesting-0.0.0-insiders.565cd3e.tgz", + "integrity": "sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==", + "requires": { + "postcss-nested": "^5.0.5" + }, + "dependencies": { + "postcss-nested": { + "version": "5.0.6", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz", + "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==", + "requires": { + "postcss-selector-parser": "^6.0.6" + } + } + } + }, "@tanstack/query-core": { "version": "4.24.10", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.24.10.tgz", @@ -8912,6 +8960,12 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "dev": true }, + "@types/lodash": { + "version": "4.14.191", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz", + "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==", + "dev": true + }, "@types/node": { "version": "18.13.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.13.0.tgz", @@ -9750,8 +9804,7 @@ "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", - "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", - "dev": true + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==" }, "csstype": { "version": "3.1.1", @@ -11170,8 +11223,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.merge": { "version": "4.6.2", @@ -11274,8 +11326,7 @@ "nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", - "dev": true + "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==" }, "natural-compare": { "version": "1.4.0", @@ -11516,8 +11567,7 @@ "picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", - "dev": true + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" }, "picomatch": { "version": "2.3.1", @@ -11546,7 +11596,6 @@ "version": "8.4.21", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", - "dev": true, "requires": { "nanoid": "^3.3.4", "picocolors": "^1.0.0", @@ -11606,7 +11655,6 @@ "version": "6.0.11", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz", "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==", - "dev": true, "requires": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -12017,8 +12065,7 @@ "source-map-js": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==" }, "spawn-command": { "version": "0.0.2-1", @@ -12404,8 +12451,7 @@ "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", - "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", - "dev": true + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==" }, "uuid": { "version": "9.0.0", diff --git a/package.json b/package.json index 601cea57..871a0c84 100644 --- a/package.json +++ b/package.json @@ -31,11 +31,13 @@ "@radix-ui/react-popover": "1.0.3", "@radix-ui/react-scroll-area": "^1.0.2", "@radix-ui/react-separator": "^1.0.1", + "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e", "@tanstack/react-query": "^4.24.10", "@tauri-apps/api": "^1.2.0", "classnames": "^2.3.2", "codemirror": "^6.0.1", "framer-motion": "^9.0.4", + "lodash": "^4.17.21", "parse-color": "^1.0.0", "parse-json": "^6.0.2", "react": "^18.2.0", @@ -45,6 +47,7 @@ }, "devDependencies": { "@tauri-apps/cli": "^1.2.2", + "@types/lodash": "^4.14.191", "@types/node": "^18.7.10", "@types/parse-color": "^1.0.1", "@types/parse-json": "^4.0.0", diff --git a/postcss.config.cjs b/postcss.config.cjs index 5de80456..540e3127 100644 --- a/postcss.config.cjs +++ b/postcss.config.cjs @@ -1,7 +1,7 @@ module.exports = { plugins: [ + require('@tailwindcss/nesting')(require('postcss-nesting')), require('tailwindcss'), require('autoprefixer'), - require('postcss-nesting') ] } diff --git a/src-tauri/icons/icon.icns b/src-tauri/icons/icon.icns index 97dcfacd..9f19513b 100644 Binary files a/src-tauri/icons/icon.icns and b/src-tauri/icons/icon.icns differ diff --git a/src-web/components/Editor/Editor.tsx b/src-web/components/Editor/Editor.tsx index ba8a1f34..8a209d1a 100644 --- a/src-web/components/Editor/Editor.tsx +++ b/src-web/components/Editor/Editor.tsx @@ -67,7 +67,7 @@ export default function Editor({ // Create codemirror instance when ref initializes useEffect(() => { if (ref.current === null) return; - console.log('INIT EDITOR'); + // console.log('INIT EDITOR'); let view: EditorView | null = null; try { const langHolder = new Compartment(); @@ -102,7 +102,7 @@ export default function Editor({ // Update language extension when contentType changes useEffect(() => { if (cm === null) return; - console.log('UPDATE LANG'); + // console.log('UPDATE LANG'); const ext = getLanguageExtension({ contentType, useTemplating }); cm.view.dispatch({ effects: cm.langHolder.reconfigure(ext) }); }, [contentType]); @@ -110,6 +110,7 @@ export default function Editor({ return (
{ + // const completions = currentCompletions(view.state); + // const status = completionStatus(view.state); + + // If the document hasn't changed, we don't need to do anything + if (!docChanged) return; + + if (view.state.doc.length === 0) { + debouncedStartCompletion.cancel(); + closeCompletion(view); + return; + } + + debouncedStartCompletion(view); + }); +} diff --git a/src-web/components/Editor/extensions.ts b/src-web/components/Editor/extensions.ts index f86c4bdc..99ac63e8 100644 --- a/src-web/components/Editor/extensions.ts +++ b/src-web/components/Editor/extensions.ts @@ -33,6 +33,7 @@ import { rectangularSelection, } from '@codemirror/view'; import { tags as t } from '@lezer/highlight'; +import { debouncedAutocompletionDisplay } from './autocomplete'; import { twig } from './twig/extension'; import { url } from './url/extension'; @@ -107,7 +108,8 @@ export const baseExtensions = [ drawSelection(), dropCursor(), bracketMatching(), - autocompletion({ closeOnBlur: true, interactionDelay: 200 }), + debouncedAutocompletionDisplay({ millis: 1000 }), + autocompletion({ closeOnBlur: true, interactionDelay: 200, activateOnTyping: false }), syntaxHighlighting(myHighlightStyle), EditorState.allowMultipleSelections.of(true), ]; diff --git a/src-web/components/Editor/twig/completion.ts b/src-web/components/Editor/twig/completion.ts index 8f9aae22..9807f1d0 100644 --- a/src-web/components/Editor/twig/completion.ts +++ b/src-web/components/Editor/twig/completion.ts @@ -47,6 +47,7 @@ export function completions(context: CompletionContext) { label: toStartOfVariable ? `${openTag}${v.name}${closeTag}` : v.name, apply: `${openTag}${v.name}${closeTag}`, type: 'variable', + matchLen, })) // Filter out exact matches .filter((o) => o.label !== toMatch.text), diff --git a/src-web/components/HeaderEditor.tsx b/src-web/components/HeaderEditor.tsx index bba0056d..36a09df5 100644 --- a/src-web/components/HeaderEditor.tsx +++ b/src-web/components/HeaderEditor.tsx @@ -37,7 +37,7 @@ export function HeaderEditor() { }; return ( -
+ {headers.map((header, i) => ( diff --git a/src-web/components/Sidebar.tsx b/src-web/components/Sidebar.tsx index ae661dee..a6e77008 100644 --- a/src-web/components/Sidebar.tsx +++ b/src-web/components/Sidebar.tsx @@ -22,7 +22,6 @@ export function Sidebar({ className, activeRequestId, workspaceId, requests, ... const createRequest = useRequestCreate({ workspaceId, navigateAfter: true }); const { appearance, toggleAppearance } = useTheme(); const [open, setOpen] = useState(false); - console.log('OPEN', open); return (