From c5b5e07a98afb4eea15755431cb1dda04399c783 Mon Sep 17 00:00:00 2001 From: Andrew Date: Fri, 18 Oct 2024 00:48:44 -0700 Subject: [PATCH 01/10] monaco comment --- extensions/void/package-lock.json | 47 ++++++++++-- extensions/void/package.json | 1 + .../void/src/sidebar/markdown/BlockCode.tsx | 72 ++++++++++++++++++- 3 files changed, 112 insertions(+), 8 deletions(-) diff --git a/extensions/void/package-lock.json b/extensions/void/package-lock.json index a7f8924e..4dc634b3 100644 --- a/extensions/void/package-lock.json +++ b/extensions/void/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.1", "dependencies": { "@anthropic-ai/sdk": "^0.27.1", + "@monaco-editor/react": "^4.6.0", "openai": "^4.57.0" }, "devDependencies": { @@ -556,6 +557,32 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@monaco-editor/loader": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz", + "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==", + "license": "MIT", + "dependencies": { + "state-local": "^1.0.6" + }, + "peerDependencies": { + "monaco-editor": ">= 0.21.0 < 1" + } + }, + "node_modules/@monaco-editor/react": { + "version": "4.6.0", + "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz", + "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==", + "license": "MIT", + "dependencies": { + "@monaco-editor/loader": "^1.4.0" + }, + "peerDependencies": { + "monaco-editor": ">= 0.25.0 < 1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4410,8 +4437,7 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "node_modules/js-yaml": { "version": "4.1.0", @@ -4582,7 +4608,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -5532,6 +5557,13 @@ "node": ">=10" } }, + "node_modules/monaco-editor": { + "version": "0.52.0", + "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.0.tgz", + "integrity": "sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==", + "license": "MIT", + "peer": true + }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -6498,7 +6530,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -6510,7 +6541,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", @@ -7075,7 +7105,6 @@ "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0" @@ -7254,6 +7283,12 @@ "node": ">=8" } }, + "node_modules/state-local": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", + "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==", + "license": "MIT" + }, "node_modules/stdin-discarder": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/stdin-discarder/-/stdin-discarder-0.1.0.tgz", diff --git a/extensions/void/package.json b/extensions/void/package.json index 32d9b22e..7f507c86 100644 --- a/extensions/void/package.json +++ b/extensions/void/package.json @@ -146,6 +146,7 @@ }, "dependencies": { "@anthropic-ai/sdk": "^0.27.1", + "@monaco-editor/react": "^4.6.0", "openai": "^4.57.0" } } diff --git a/extensions/void/src/sidebar/markdown/BlockCode.tsx b/extensions/void/src/sidebar/markdown/BlockCode.tsx index 5da01e10..c1113b57 100644 --- a/extensions/void/src/sidebar/markdown/BlockCode.tsx +++ b/extensions/void/src/sidebar/markdown/BlockCode.tsx @@ -10,7 +10,9 @@ enum CopyButtonState { Error = "Could not copy", } -const COPY_FEEDBACK_TIMEOUT = 1000 +const COPY_FEEDBACK_TIMEOUT = 1000 // amount of time to say 'Copied!' + + // code block with toolbar (Apply, Copy, etc) at top const BlockCode = ({ @@ -74,8 +76,73 @@ const BlockCode = ({ ) - return ( + return (<> + + {/* { + + + const model = editor.getModel() + model?.setEOL(monaco.editor.EndOfLineSequence.LF) + if (modelRef) + modelRef.current = model + + // model?.updateOptions({ tabSize: 4 }) // apparently this should get set on the model, not the editor () + + monaco?.editor.setTheme('whatever') + + + }} + loading='' + defaultValue={initValue} + defaultLanguage={'python'} + + onChange={() => { onChangeText?.() }} + height={'100%'} // 100% or the exact pixel height + theme={'whatever'} + + + options={{ + matchBrackets: 'always', + detectIndentation: false, // we always want a tab size of 4 + tabSize: 4, + insertSpaces: true, + + // glyphMargin: false, + // renderIndentGuides: false, + + + + // fontSize: 15, + wordWrapColumn: 10000, // we want this to be infinity + // automaticLayout: true, + wordWrap: 'bounded', // 'off' + // wordBreak: 'keepAll', + // automaticLayout: true, + // lineDecorationsWidth: 0, + lineNumbersMinChars: 4, + lineNumbers: isPseudocode ? 'off' : 'on', + renderLineHighlight: 'none', + minimap: { enabled: false }, + scrollBeyondLastColumn: 0, + scrollBeyondLastLine: false, + scrollbar: { + alwaysConsumeMouseWheel: false, //height !== undefined + // vertical: 'hidden', + // horizontal: 'hidden' + }, + + overviewRulerLanes: 0, + readOnly: !onChangeText, + quickSuggestions: false, + + ...options + }} + /> */} + +
+ {!hideToolbar && (
{toolbar || defaultToolbar}
@@ -94,6 +161,7 @@ const BlockCode = ({
+ ) } From 8538caeffc205b86978ce95c63b32acf22646def Mon Sep 17 00:00:00 2001 From: Andrew Date: Sat, 19 Oct 2024 18:49:43 -0700 Subject: [PATCH 02/10] start adding monaco --- extensions/void/package-lock.json | 59 +++++++++++++++---- extensions/void/package.json | 8 +-- extensions/void/src/sidebar/SidebarChat.tsx | 5 +- .../void/src/sidebar/markdown/BlockCode.tsx | 35 +++++------ 4 files changed, 70 insertions(+), 37 deletions(-) diff --git a/extensions/void/package-lock.json b/extensions/void/package-lock.json index 4dc634b3..cef3eea9 100644 --- a/extensions/void/package-lock.json +++ b/extensions/void/package-lock.json @@ -7,13 +7,10 @@ "": { "name": "void", "version": "0.0.1", - "dependencies": { - "@anthropic-ai/sdk": "^0.27.1", - "@monaco-editor/react": "^4.6.0", - "openai": "^4.57.0" - }, "devDependencies": { + "@anthropic-ai/sdk": "^0.29.2", "@eslint/js": "^9.9.1", + "@monaco-editor/react": "^4.6.0", "@types/diff": "^5.2.2", "@types/diff-match-patch": "^1.0.36", "@types/jest": "^29.5.12", @@ -37,6 +34,7 @@ "globals": "^15.9.0", "marked": "^14.1.0", "ollama": "^0.5.9", + "openai": "^4.68.1", "postcss": "^8.4.41", "posthog-js": "^1.174.0", "react": "^18.3.1", @@ -67,9 +65,10 @@ } }, "node_modules/@anthropic-ai/sdk": { - "version": "0.27.3", - "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.27.3.tgz", - "integrity": "sha512-IjLt0gd3L4jlOfilxVXTifn42FnVffMgDC04RJK1KDZpmkBWLv0XC92MVVmkxrFZNS/7l3xWgP/I3nqtX1sQHw==", + "version": "0.29.2", + "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.29.2.tgz", + "integrity": "sha512-5dwiOPO/AZvhY4bJIG9vjFKU9Kza3hA6VEsbIQg6L9vny2RQIpCFhV50nB9IrG2edZaHZb4HuQ9Wmsn5zgWyZg==", + "dev": true, "license": "MIT", "dependencies": { "@types/node": "^18.11.18", @@ -85,6 +84,7 @@ "version": "18.19.50", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.50.tgz", "integrity": "sha512-xonK+NRrMBRtkL1hVCc3G+uXtjh1Al4opBLjqVmipe5ZAaBYWW6cNAiBVZ1BvmkBhep698rP3UM3aRAdSALuhg==", + "dev": true, "license": "MIT", "dependencies": { "undici-types": "~5.26.4" @@ -94,6 +94,7 @@ "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true, "license": "MIT" }, "node_modules/@babel/code-frame": { @@ -561,6 +562,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz", "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==", + "dev": true, "license": "MIT", "dependencies": { "state-local": "^1.0.6" @@ -573,6 +575,7 @@ "version": "4.6.0", "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz", "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==", + "dev": true, "license": "MIT", "dependencies": { "@monaco-editor/loader": "^1.4.0" @@ -755,6 +758,7 @@ "version": "22.6.1", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.6.1.tgz", "integrity": "sha512-V48tCfcKb/e6cVUigLAaJDAILdMP0fUW6BidkPK4GpGjXcfbnoHasCZDwz3N3yVt5we2RHm4XTQCpv0KJz9zqw==", + "dev": true, "license": "MIT", "dependencies": { "undici-types": "~6.19.2" @@ -764,6 +768,7 @@ "version": "2.6.11", "resolved": "https://registry.npmjs.org/@types/node-fetch/-/node-fetch-2.6.11.tgz", "integrity": "sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==", + "dev": true, "license": "MIT", "dependencies": { "@types/node": "*", @@ -1095,6 +1100,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==", + "dev": true, "license": "MIT", "dependencies": { "event-target-shim": "^5.0.0" @@ -1143,6 +1149,7 @@ "version": "4.5.0", "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.5.0.tgz", "integrity": "sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==", + "dev": true, "license": "MIT", "dependencies": { "humanize-ms": "^1.2.1" @@ -1380,6 +1387,7 @@ "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "dev": true, "license": "MIT" }, "node_modules/autoprefixer": { @@ -1947,6 +1955,7 @@ "version": "1.0.8", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dev": true, "license": "MIT", "dependencies": { "delayed-stream": "~1.0.0" @@ -2190,6 +2199,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.4.0" @@ -2848,6 +2858,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz", "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -3115,6 +3126,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dev": true, "license": "MIT", "dependencies": { "asynckit": "^0.4.0", @@ -3129,6 +3141,7 @@ "version": "1.7.2", "resolved": "https://registry.npmjs.org/form-data-encoder/-/form-data-encoder-1.7.2.tgz", "integrity": "sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==", + "dev": true, "license": "MIT" }, "node_modules/format": { @@ -3144,6 +3157,7 @@ "version": "4.4.1", "resolved": "https://registry.npmjs.org/formdata-node/-/formdata-node-4.4.1.tgz", "integrity": "sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==", + "dev": true, "license": "MIT", "dependencies": { "node-domexception": "1.0.0", @@ -3641,6 +3655,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==", + "dev": true, "license": "MIT", "dependencies": { "ms": "^2.0.0" @@ -4437,7 +4452,8 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", + "dev": true }, "node_modules/js-yaml": { "version": "4.1.0", @@ -4608,6 +4624,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "dev": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -5317,6 +5334,7 @@ "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "dev": true, "license": "MIT", "engines": { "node": ">= 0.6" @@ -5326,6 +5344,7 @@ "version": "2.1.35", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dev": true, "license": "MIT", "dependencies": { "mime-db": "1.52.0" @@ -5561,6 +5580,7 @@ "version": "0.52.0", "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.0.tgz", "integrity": "sha512-OeWhNpABLCeTqubfqLMXGsqf6OmPU6pHM85kF3dhy6kq5hnhuVS1p3VrEW/XhWHc71P2tHyS5JFySD8mgs1crw==", + "dev": true, "license": "MIT", "peer": true }, @@ -5568,6 +5588,7 @@ "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true, "license": "MIT" }, "node_modules/mz": { @@ -5612,6 +5633,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz", "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==", + "dev": true, "funding": [ { "type": "github", @@ -5631,6 +5653,7 @@ "version": "2.7.0", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "dev": true, "license": "MIT", "dependencies": { "whatwg-url": "^5.0.0" @@ -5825,9 +5848,10 @@ } }, "node_modules/openai": { - "version": "4.63.0", - "resolved": "https://registry.npmjs.org/openai/-/openai-4.63.0.tgz", - "integrity": "sha512-Y9V4KODbmrOpqiOmCDVnPfMxMqKLOx8Hwcdn/r8mePq4yv7FSXGnxCs8/jZKO7zCB/IVPWihpJXwJNAIOEiZ2g==", + "version": "4.68.1", + "resolved": "https://registry.npmjs.org/openai/-/openai-4.68.1.tgz", + "integrity": "sha512-C9XmYRHgra1U1G4GGFNqRHQEjxhoOWbQYR85IibfJ0jpHUhOm4/lARiKaC/h3zThvikwH9Dx/XOKWPNVygIS3g==", + "dev": true, "license": "Apache-2.0", "dependencies": { "@types/node": "^18.11.18", @@ -5854,6 +5878,7 @@ "version": "18.19.50", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.19.50.tgz", "integrity": "sha512-xonK+NRrMBRtkL1hVCc3G+uXtjh1Al4opBLjqVmipe5ZAaBYWW6cNAiBVZ1BvmkBhep698rP3UM3aRAdSALuhg==", + "dev": true, "license": "MIT", "dependencies": { "undici-types": "~5.26.4" @@ -5863,6 +5888,7 @@ "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==", + "dev": true, "license": "MIT" }, "node_modules/optionator": { @@ -6530,6 +6556,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "dev": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -6541,6 +6568,7 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", @@ -7105,6 +7133,7 @@ "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.1.0" @@ -7287,6 +7316,7 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz", "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==", + "dev": true, "license": "MIT" }, "node_modules/stdin-discarder": { @@ -7776,6 +7806,7 @@ "version": "0.0.3", "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", + "dev": true, "license": "MIT" }, "node_modules/trim-lines": { @@ -7981,6 +8012,7 @@ "version": "6.19.8", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz", "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==", + "dev": true, "license": "MIT" }, "node_modules/unified": { @@ -8187,6 +8219,7 @@ "version": "4.0.0-beta.3", "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz", "integrity": "sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==", + "dev": true, "license": "MIT", "engines": { "node": ">= 14" @@ -8203,6 +8236,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", + "dev": true, "license": "BSD-2-Clause" }, "node_modules/whatwg-fetch": { @@ -8216,6 +8250,7 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "dev": true, "license": "MIT", "dependencies": { "tr46": "~0.0.3", diff --git a/extensions/void/package.json b/extensions/void/package.json index 7f507c86..ad63c2e2 100644 --- a/extensions/void/package.json +++ b/extensions/void/package.json @@ -108,7 +108,9 @@ "test": "vscode-test" }, "devDependencies": { + "@anthropic-ai/sdk": "^0.29.2", "@eslint/js": "^9.9.1", + "@monaco-editor/react": "^4.6.0", "@types/diff": "^5.2.2", "@types/diff-match-patch": "^1.0.36", "@types/jest": "^29.5.12", @@ -132,6 +134,7 @@ "globals": "^15.9.0", "marked": "^14.1.0", "ollama": "^0.5.9", + "openai": "^4.68.1", "postcss": "^8.4.41", "posthog-js": "^1.174.0", "react": "^18.3.1", @@ -143,10 +146,5 @@ "typescript": "5.5.4", "typescript-eslint": "^8.3.0", "uuid": "^10.0.0" - }, - "dependencies": { - "@anthropic-ai/sdk": "^0.27.1", - "@monaco-editor/react": "^4.6.0", - "openai": "^4.57.0" } } diff --git a/extensions/void/src/sidebar/SidebarChat.tsx b/extensions/void/src/sidebar/SidebarChat.tsx index 01014564..1caf783f 100644 --- a/extensions/void/src/sidebar/SidebarChat.tsx +++ b/extensions/void/src/sidebar/SidebarChat.tsx @@ -285,7 +285,10 @@ export const SidebarChat = () => { - {latestError} + {/* error message */} + {!latestError ? null :
+ {latestError} +
} } diff --git a/extensions/void/src/sidebar/markdown/BlockCode.tsx b/extensions/void/src/sidebar/markdown/BlockCode.tsx index c1113b57..af08deba 100644 --- a/extensions/void/src/sidebar/markdown/BlockCode.tsx +++ b/extensions/void/src/sidebar/markdown/BlockCode.tsx @@ -3,6 +3,9 @@ import { getVSCodeAPI } from "../getVscodeApi" import SyntaxHighlighter from "react-syntax-highlighter"; import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs"; +import MonacoEditor from '@monaco-editor/react' +import { editor } from 'monaco-editor' + enum CopyButtonState { Copy = "Copy", @@ -78,28 +81,27 @@ const BlockCode = ({ return (<> - {/* { - const model = editor.getModel() model?.setEOL(monaco.editor.EndOfLineSequence.LF) - if (modelRef) - modelRef.current = model // model?.updateOptions({ tabSize: 4 }) // apparently this should get set on the model, not the editor () - monaco?.editor.setTheme('whatever') + monaco?.editor.setTheme('dark') }} loading='' - defaultValue={initValue} - defaultLanguage={'python'} + value={text} + defaultValue={text} + language={language} + defaultLanguage={language} - onChange={() => { onChangeText?.() }} + // onChange={() => { onChangeText?.() }} height={'100%'} // 100% or the exact pixel height - theme={'whatever'} + theme={'dark'} options={{ @@ -108,11 +110,6 @@ const BlockCode = ({ tabSize: 4, insertSpaces: true, - // glyphMargin: false, - // renderIndentGuides: false, - - - // fontSize: 15, wordWrapColumn: 10000, // we want this to be infinity // automaticLayout: true, @@ -121,7 +118,7 @@ const BlockCode = ({ // automaticLayout: true, // lineDecorationsWidth: 0, lineNumbersMinChars: 4, - lineNumbers: isPseudocode ? 'off' : 'on', + lineNumbers: 'off', renderLineHighlight: 'none', minimap: { enabled: false }, scrollBeyondLastColumn: 0, @@ -133,18 +130,18 @@ const BlockCode = ({ }, overviewRulerLanes: 0, - readOnly: !onChangeText, + readOnly: true, + readOnlyMessage: undefined, quickSuggestions: false, - ...options }} - /> */} + />
{!hideToolbar && ( -
+
{toolbar || defaultToolbar}
)} From 09d84044b55c0415bdb1d9c1a2fe3c443fa8ccac Mon Sep 17 00:00:00 2001 From: Andrew Date: Sat, 19 Oct 2024 21:38:17 -0700 Subject: [PATCH 03/10] monaco loads... need to adjust height --- extensions/void/build-tsx.js | 7 + extensions/void/package.json | 2 +- extensions/void/src/common/shared_types.ts | 3 +- extensions/void/src/extension.ts | 3 +- extensions/void/src/sidebar/SidebarChat.tsx | 85 ++++++-- .../src/sidebar/SidebarThreadSelector.tsx | 2 +- .../src/sidebar/components/SelectedFiles.tsx | 48 ----- .../void/src/sidebar/contextForThreads.tsx | 15 +- .../void/src/sidebar/markdown/BlockCode.tsx | 200 +++++------------- .../src/sidebar/markdown/MarkdownRender.tsx | 59 +++++- 10 files changed, 199 insertions(+), 225 deletions(-) delete mode 100644 extensions/void/src/sidebar/components/SelectedFiles.tsx diff --git a/extensions/void/build-tsx.js b/extensions/void/build-tsx.js index 3faf04f0..d47616d0 100644 --- a/extensions/void/build-tsx.js +++ b/extensions/void/build-tsx.js @@ -5,6 +5,13 @@ esbuild.build({ entryPoints: ['src/sidebar/index.tsx'], bundle: true, minify: true, + loader: { + '.ttf': 'file', + '.woff': 'file', + '.woff2': 'file', + '.eot': 'file', + '.svg': 'file', + }, sourcemap: true, outfile: 'dist/sidebar/index.js', format: 'iife', // apparently iife is safe for browsers (safer than cjs) diff --git a/extensions/void/package.json b/extensions/void/package.json index ad63c2e2..531357e1 100644 --- a/extensions/void/package.json +++ b/extensions/void/package.json @@ -101,7 +101,7 @@ } }, "scripts": { - "vscode:prepublish": "npm run compile", + "vscode:prepublish": "echo \"running prepublish\"", "watch": "tsc -watch -p ./", "build": "rimraf dist && node build-tsx.js && node build-css.js", "pretest": "tsc -p ./ && eslint src --ext ts", diff --git a/extensions/void/src/common/shared_types.ts b/extensions/void/src/common/shared_types.ts index 3c59f888..ae8363d6 100644 --- a/extensions/void/src/common/shared_types.ts +++ b/extensions/void/src/common/shared_types.ts @@ -65,7 +65,8 @@ type MessageFromSidebar = ( type ChatThreads = { [id: string]: { id: string; // store the id here too - createdAt: string; + createdAt: string; // ISO string + lastModified: string; // ISO string messages: ChatMessage[]; } } diff --git a/extensions/void/src/extension.ts b/extensions/void/src/extension.ts index 961d585c..7a55caa8 100644 --- a/extensions/void/src/extension.ts +++ b/extensions/void/src/extension.ts @@ -83,7 +83,8 @@ export function activate(context: vscode.ExtensionContext) { // send contents to webview webview.postMessage({ type: 'files', files, } satisfies MessageToSidebar) - } else if (m.type === 'applyChanges') { + } + else if (m.type === 'applyChanges') { const editor = vscode.window.activeTextEditor if (!editor) { diff --git a/extensions/void/src/sidebar/SidebarChat.tsx b/extensions/void/src/sidebar/SidebarChat.tsx index bfd89da1..be668c40 100644 --- a/extensions/void/src/sidebar/SidebarChat.tsx +++ b/extensions/void/src/sidebar/SidebarChat.tsx @@ -4,7 +4,6 @@ import React, { FormEvent, useCallback, useEffect, useRef, useState } from "reac import { marked } from 'marked'; import MarkdownRender from "./markdown/MarkdownRender"; import BlockCode from "./markdown/BlockCode"; -import { SelectedFiles } from "./components/SelectedFiles"; import { File, ChatMessage, CodeSelection } from "../common/shared_types"; import * as vscode from 'vscode' import { awaitVSCodeResponse, getVSCodeAPI, onMessageFromVSCode, useOnVSCodeMessage } from "./getVscodeApi"; @@ -63,6 +62,55 @@ Please edit the selected code following these instructions: return str; }; + + + + +const getBasename = (pathStr: string) => { + // "unixify" path + pathStr = pathStr.replace(/[/\\]+/g, "/") // replace any / or \ or \\ with / + const parts = pathStr.split("/") // split on / + return parts[parts.length - 1] +} + +export const SelectedFiles = ({ files, setFiles, }: { files: vscode.Uri[], setFiles: null | ((files: vscode.Uri[]) => void) }) => { + return ( + files.length !== 0 && ( +
+ {files.map((filename, i) => ( + + ))} +
+ ) + ) +} + + const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => { const role = chatMessage.role @@ -76,16 +124,17 @@ const ChatBubble = ({ chatMessage }: { chatMessage: ChatMessage }) => { if (role === 'user') { chatbubbleContents = <> - {chatMessage.selection?.selectionStr && } + {chatMessage.selection?.selectionStr && } {children} } else if (role === 'assistant') { - chatbubbleContents = // sectionsHTML } - return
{chatbubbleContents} @@ -224,8 +273,8 @@ export const SidebarChat = () => { abortFnRef.current?.() // if messageStream was not empty, add it to the history - const llmContent = messageStream || '(canceled)' - const newHistoryElt: ChatMessage = { role: 'assistant', displayContent: messageStream, content: llmContent } + const llmContent = messageStream || '(null)' + const newHistoryElt: ChatMessage = { role: 'assistant', content: llmContent, displayContent: messageStream, } addMessageToHistory(newHistoryElt) setMessageStream('') @@ -233,14 +282,9 @@ export const SidebarChat = () => { }, [captureChatEvent, messageStream, addMessageToHistory]) - //Clear code selection - const clearSelection = () => { - setSelection(null); - }; - return <> -
+
{/* previous messages */} {currentThread !== null && currentThread.messages.map((message, i) => @@ -261,14 +305,15 @@ export const SidebarChat = () => { {/* selected code */} {!!selection?.selectionStr && ( - - Remove - - )} /> + setSelection(null)} + className="btn btn-secondary btn-sm border border-vscode-input-border rounded" + > + Remove + + )} /> )}
} diff --git a/extensions/void/src/sidebar/SidebarThreadSelector.tsx b/extensions/void/src/sidebar/SidebarThreadSelector.tsx index 323d66e5..5f88eac8 100644 --- a/extensions/void/src/sidebar/SidebarThreadSelector.tsx +++ b/extensions/void/src/sidebar/SidebarThreadSelector.tsx @@ -15,7 +15,7 @@ export const SidebarThreadSelector = ({ onClose }: { onClose: () => void }) => { const { allThreads, currentThread, switchToThread } = useThreads() // sorted by most recent to least recent - const sortedThreadIds = Object.keys(allThreads ?? {}).sort((threadId1, threadId2) => allThreads![threadId1].createdAt > allThreads![threadId2].createdAt ? -1 : 1) + const sortedThreadIds = Object.keys(allThreads ?? {}).sort((threadId1, threadId2) => allThreads![threadId1].lastModified > allThreads![threadId2].lastModified ? 1 : -1) return (
diff --git a/extensions/void/src/sidebar/components/SelectedFiles.tsx b/extensions/void/src/sidebar/components/SelectedFiles.tsx deleted file mode 100644 index 0d5b478e..00000000 --- a/extensions/void/src/sidebar/components/SelectedFiles.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from "react" -import * as vscode from "vscode" - -const getBasename = (pathStr: string) => { - // "unixify" path - pathStr = pathStr.replace(/[/\\]+/g, "/") // replace any / or \ or \\ with / - const parts = pathStr.split("/") // split on / - return parts[parts.length - 1] -} - -export const SelectedFiles = ({ files, setFiles, }: { files: vscode.Uri[], setFiles: null | ((files: vscode.Uri[]) => void) }) => { - return ( - files.length !== 0 && ( -
- {files.map((filename, i) => ( - - ))} -
- ) - ) -} - - diff --git a/extensions/void/src/sidebar/contextForThreads.tsx b/extensions/void/src/sidebar/contextForThreads.tsx index 41cd6d48..b8b1bfe9 100644 --- a/extensions/void/src/sidebar/contextForThreads.tsx +++ b/extensions/void/src/sidebar/contextForThreads.tsx @@ -14,11 +14,15 @@ type ConfigForThreadsValueType = { const ThreadsContext = createContext(undefined as unknown as ConfigForThreadsValueType) -const createNewThread = () => ({ - id: new Date().getTime().toString(), - createdAt: new Date().toISOString(), - messages: [], -}) +const createNewThread = () => { + const now = new Date().toISOString() + return { + id: new Date().getTime().toString(), + createdAt: now, + lastModified: now, + messages: [], + } +} // const [stateRef, setState] = useInstantState(initVal) @@ -67,6 +71,7 @@ export function ThreadsProvider({ children }: { children: ReactNode }) { ...allThreads.current, [currentThread.id]: { ...currentThread, + lastModified: new Date().toISOString(), messages: [...currentThread.messages, message], } }) diff --git a/extensions/void/src/sidebar/markdown/BlockCode.tsx b/extensions/void/src/sidebar/markdown/BlockCode.tsx index af08deba..811810b5 100644 --- a/extensions/void/src/sidebar/markdown/BlockCode.tsx +++ b/extensions/void/src/sidebar/markdown/BlockCode.tsx @@ -1,162 +1,70 @@ import React, { ReactNode, useCallback, useEffect, useState } from "react" -import { getVSCodeAPI } from "../getVscodeApi" - -import SyntaxHighlighter from "react-syntax-highlighter"; -import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs"; import MonacoEditor from '@monaco-editor/react' -import { editor } from 'monaco-editor' +import * as monaco from 'monaco-editor'; +import { loader } from '@monaco-editor/react'; -enum CopyButtonState { - Copy = "Copy", - Copied = "Copied!", - Error = "Could not copy", -} - -const COPY_FEEDBACK_TIMEOUT = 1000 // amount of time to say 'Copied!' - +loader.config({ monaco }); // code block with toolbar (Apply, Copy, etc) at top -const BlockCode = ({ - text, - language, - toolbar, - hideToolbar = false, - className, -}: { - text: string - language?: string - toolbar?: ReactNode - hideToolbar?: boolean - className?: string -}) => { - const [copyButtonState, setCopyButtonState] = useState(CopyButtonState.Copy) - - const customStyle = { - ...atomOneDarkReasonable, - 'code[class*="language-"]': { - ...atomOneDarkReasonable['code[class*="language-"]'], - background: "none", - }, - } - - useEffect(() => { - if (copyButtonState !== CopyButtonState.Copy) { - setTimeout(() => { - setCopyButtonState(CopyButtonState.Copy) - }, COPY_FEEDBACK_TIMEOUT) - } - }, [copyButtonState]) - - const onCopy = useCallback(() => { - navigator.clipboard.writeText(text).then( - () => { - setCopyButtonState(CopyButtonState.Copied) - }, - () => { - setCopyButtonState(CopyButtonState.Error) - } - ) - }, [text]) - - const defaultToolbar = ( - <> - - - - ) +const BlockCode = ({ text, language, buttonsOnHover, }: { text: string, language?: string, buttonsOnHover?: ReactNode, }) => { return (<> +
- { - - const model = editor.getModel() - model?.setEOL(monaco.editor.EndOfLineSequence.LF) - - // model?.updateOptions({ tabSize: 4 }) // apparently this should get set on the model, not the editor () - - monaco?.editor.setTheme('dark') - - - }} - loading='' - value={text} - defaultValue={text} - language={language} - defaultLanguage={language} - - // onChange={() => { onChangeText?.() }} - height={'100%'} // 100% or the exact pixel height - theme={'dark'} - - - options={{ - matchBrackets: 'always', - detectIndentation: false, // we always want a tab size of 4 - tabSize: 4, - insertSpaces: true, - - // fontSize: 15, - wordWrapColumn: 10000, // we want this to be infinity - // automaticLayout: true, - wordWrap: 'bounded', // 'off' - // wordBreak: 'keepAll', - // automaticLayout: true, - // lineDecorationsWidth: 0, - lineNumbersMinChars: 4, - lineNumbers: 'off', - renderLineHighlight: 'none', - minimap: { enabled: false }, - scrollBeyondLastColumn: 0, - scrollBeyondLastLine: false, - scrollbar: { - alwaysConsumeMouseWheel: false, //height !== undefined - // vertical: 'hidden', - // horizontal: 'hidden' - }, - - overviewRulerLanes: 0, - readOnly: true, - readOnlyMessage: undefined, - quickSuggestions: false, - - }} - /> - - -
- - {!hideToolbar && ( -
-
{toolbar || defaultToolbar}
+ {!toolbar ? null : ( +
+
{buttonsOnHover === null ? null : buttonsOnHover}
)} -
- - {text} - -
+ { + const model = editor.getModel() + model?.setEOL(monaco.editor.EndOfLineSequence.LF) + monaco?.editor.setTheme('vs-dark') + }} + loading='loading' + value={text} + language={language} + + // onChange={() => { onChangeText?.() }} + height={'100%'} // 100% or the exact pixel height + theme={'vs-dark'} + + options={{ + matchBrackets: 'always', + detectIndentation: false, // we always want a tab size of 4 + tabSize: 4, + insertSpaces: true, + + // fontSize: 15, + wordWrapColumn: 10000, // we want this to be infinity + // automaticLayout: true, + wordWrap: 'bounded', // 'off' + // wordBreak: 'keepAll', + // automaticLayout: true, + // lineDecorationsWidth: 0, + lineNumbersMinChars: 4, + lineNumbers: 'off', + renderLineHighlight: 'none', + minimap: { enabled: false }, + scrollBeyondLastColumn: 0, + scrollBeyondLastLine: false, + scrollbar: { + alwaysConsumeMouseWheel: true, // height !== undefined + // vertical: 'hidden', + // horizontal: 'hidden' + }, + + overviewRulerLanes: 0, + readOnly: true, + readOnlyMessage: undefined, + quickSuggestions: false, + + }} + />
) diff --git a/extensions/void/src/sidebar/markdown/MarkdownRender.tsx b/extensions/void/src/sidebar/markdown/MarkdownRender.tsx index 79e6e91d..bc02ebf4 100644 --- a/extensions/void/src/sidebar/markdown/MarkdownRender.tsx +++ b/extensions/void/src/sidebar/markdown/MarkdownRender.tsx @@ -1,6 +1,57 @@ -import React, { JSX } from "react" +import React, { JSX, useCallback, useEffect, useState } from "react" import { marked, MarkedToken, Token, TokensList } from "marked" import BlockCode from "./BlockCode" +import { getVSCodeAPI } from "../getVscodeApi" + + +enum CopyButtonState { + Copy = "Copy", + Copied = "Copied!", + Error = "Could not copy", +} + +const COPY_FEEDBACK_TIMEOUT = 1000 // amount of time to say 'Copied!' + +const CodeButtonsOnHover = ({ text }: { text: string }) => { + const [copyButtonState, setCopyButtonState] = useState(CopyButtonState.Copy) + + useEffect(() => { + if (copyButtonState !== CopyButtonState.Copy) { + setTimeout(() => { + setCopyButtonState(CopyButtonState.Copy) + }, COPY_FEEDBACK_TIMEOUT) + } + }, [copyButtonState]) + + const onCopy = useCallback(() => { + navigator.clipboard.writeText(text).then( + () => { + setCopyButtonState(CopyButtonState.Copied) + }, + () => { + setCopyButtonState(CopyButtonState.Error) + } + ) + }, [text]) + + return <> + + + +} + const RenderToken = ({ token, nested = false }: { token: Token | string, nested?: boolean }): JSX.Element => { @@ -12,7 +63,11 @@ const RenderToken = ({ token, nested = false }: { token: Token | string, nested? } if (t.type === "code") { - return + return } + /> } if (t.type === "heading") { From 572e9f07eaf967d87ca08a9503ae6125f1dd1639 Mon Sep 17 00:00:00 2001 From: Andrew Date: Sun, 20 Oct 2024 17:14:10 -0700 Subject: [PATCH 04/10] misc --- .../void/src/sidebar/markdown/BlockCode.tsx | 33 +++++++------------ 1 file changed, 12 insertions(+), 21 deletions(-) diff --git a/extensions/void/src/sidebar/markdown/BlockCode.tsx b/extensions/void/src/sidebar/markdown/BlockCode.tsx index 811810b5..3ba7b5a0 100644 --- a/extensions/void/src/sidebar/markdown/BlockCode.tsx +++ b/extensions/void/src/sidebar/markdown/BlockCode.tsx @@ -6,12 +6,13 @@ import { loader } from '@monaco-editor/react'; loader.config({ monaco }); - // code block with toolbar (Apply, Copy, etc) at top -const BlockCode = ({ text, language, buttonsOnHover, }: { text: string, language?: string, buttonsOnHover?: ReactNode, }) => { +const BlockCode = ({ text, buttonsOnHover, }: { text: string, buttonsOnHover?: ReactNode, }) => { + + const [editorHeight, setEditorHeight] = useState(0) return (<> -
+
{!toolbar ? null : (
@@ -20,33 +21,25 @@ const BlockCode = ({ text, language, buttonsOnHover, }: { text: string, language )} { - const model = editor.getModel() - model?.setEOL(monaco.editor.EndOfLineSequence.LF) - monaco?.editor.setTheme('vs-dark') + // const model = editor.getModel() + const fn = () => setEditorHeight!(editor.getContentHeight()) + editor.onDidContentSizeChange(fn) + fn() }} loading='loading' value={text} - language={language} + language={'python'} // onChange={() => { onChangeText?.() }} - height={'100%'} // 100% or the exact pixel height + height={editorHeight} theme={'vs-dark'} options={{ - matchBrackets: 'always', - detectIndentation: false, // we always want a tab size of 4 - tabSize: 4, - insertSpaces: true, - // fontSize: 15, wordWrapColumn: 10000, // we want this to be infinity - // automaticLayout: true, wordWrap: 'bounded', // 'off' - // wordBreak: 'keepAll', - // automaticLayout: true, - // lineDecorationsWidth: 0, - lineNumbersMinChars: 4, lineNumbers: 'off', renderLineHighlight: 'none', minimap: { enabled: false }, @@ -54,13 +47,11 @@ const BlockCode = ({ text, language, buttonsOnHover, }: { text: string, language scrollBeyondLastLine: false, scrollbar: { alwaysConsumeMouseWheel: true, // height !== undefined - // vertical: 'hidden', - // horizontal: 'hidden' }, overviewRulerLanes: 0, readOnly: true, - readOnlyMessage: undefined, + readOnlyMessage: { value: "" }, quickSuggestions: false, }} From f2342bee2de9c4215c8aeef52a4ee5b819f7ae4e Mon Sep 17 00:00:00 2001 From: Andrew Date: Sun, 20 Oct 2024 18:39:53 -0700 Subject: [PATCH 05/10] add back syntax highlighter --- .../void/src/sidebar/markdown/BlockCode.tsx | 64 ++++++------------- 1 file changed, 21 insertions(+), 43 deletions(-) diff --git a/extensions/void/src/sidebar/markdown/BlockCode.tsx b/extensions/void/src/sidebar/markdown/BlockCode.tsx index 3ba7b5a0..e40a8549 100644 --- a/extensions/void/src/sidebar/markdown/BlockCode.tsx +++ b/extensions/void/src/sidebar/markdown/BlockCode.tsx @@ -1,15 +1,17 @@ import React, { ReactNode, useCallback, useEffect, useState } from "react" -import MonacoEditor from '@monaco-editor/react' +import SyntaxHighlighter from "react-syntax-highlighter"; +import { atomOneDarkReasonable } from "react-syntax-highlighter/dist/esm/styles/hljs"; -import * as monaco from 'monaco-editor'; -import { loader } from '@monaco-editor/react'; -loader.config({ monaco }); +const BlockCode = ({ text, buttonsOnHover, language }: { text: string, buttonsOnHover?: ReactNode, language?: string }) => { -// code block with toolbar (Apply, Copy, etc) at top -const BlockCode = ({ text, buttonsOnHover, }: { text: string, buttonsOnHover?: ReactNode, }) => { - - const [editorHeight, setEditorHeight] = useState(0) + const customStyle = { + ...atomOneDarkReasonable, + 'code[class*="language-"]': { + ...atomOneDarkReasonable['code[class*="language-"]'], + background: "none", + }, + } return (<>
@@ -20,42 +22,18 @@ const BlockCode = ({ text, buttonsOnHover, }: { text: string, buttonsOnHover?: R
)} - { - // const model = editor.getModel() - const fn = () => setEditorHeight!(editor.getContentHeight()) - editor.onDidContentSizeChange(fn) - fn() - }} - loading='loading' - value={text} - language={'python'} +
+ + {text} + - // onChange={() => { onChangeText?.() }} - height={editorHeight} - theme={'vs-dark'} - - options={{ - // fontSize: 15, - wordWrapColumn: 10000, // we want this to be infinity - wordWrap: 'bounded', // 'off' - lineNumbers: 'off', - renderLineHighlight: 'none', - minimap: { enabled: false }, - scrollBeyondLastColumn: 0, - scrollBeyondLastLine: false, - scrollbar: { - alwaysConsumeMouseWheel: true, // height !== undefined - }, - - overviewRulerLanes: 0, - readOnly: true, - readOnlyMessage: { value: "" }, - quickSuggestions: false, - - }} - /> +
) From 7072933a88b0b73b951686311815a98d104993d7 Mon Sep 17 00:00:00 2001 From: Andrew Pareles <43356051+andrewpareles@users.noreply.github.com> Date: Sun, 20 Oct 2024 19:20:03 -0700 Subject: [PATCH 06/10] Update build-tsx.js --- extensions/void/build-tsx.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/extensions/void/build-tsx.js b/extensions/void/build-tsx.js index d47616d0..3faf04f0 100644 --- a/extensions/void/build-tsx.js +++ b/extensions/void/build-tsx.js @@ -5,13 +5,6 @@ esbuild.build({ entryPoints: ['src/sidebar/index.tsx'], bundle: true, minify: true, - loader: { - '.ttf': 'file', - '.woff': 'file', - '.woff2': 'file', - '.eot': 'file', - '.svg': 'file', - }, sourcemap: true, outfile: 'dist/sidebar/index.js', format: 'iife', // apparently iife is safe for browsers (safer than cjs) From bcb0c33616a308017d1781e8787580e5e43b7934 Mon Sep 17 00:00:00 2001 From: Andrew Date: Sun, 20 Oct 2024 19:23:42 -0700 Subject: [PATCH 07/10] amend --- extensions/void/src/sidebar/SidebarSettings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extensions/void/src/sidebar/SidebarSettings.tsx b/extensions/void/src/sidebar/SidebarSettings.tsx index 27e2cdde..209b1232 100644 --- a/extensions/void/src/sidebar/SidebarSettings.tsx +++ b/extensions/void/src/sidebar/SidebarSettings.tsx @@ -11,7 +11,7 @@ const SettingOfFieldAndParam = ({ field, param }: { field: VoidConfigField, para const resetButton =