Skip to content

Commit

Permalink
feat: add vim support for monaco/webeditor
Browse files Browse the repository at this point in the history
  • Loading branch information
rubenfiszel committed Aug 26, 2024
1 parent 6e592a2 commit 1ec45e5
Show file tree
Hide file tree
Showing 24 changed files with 250 additions and 104 deletions.
2 changes: 1 addition & 1 deletion .github/DockerfileBackendTests
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
ARG DEBIAN_IMAGE=debian:bookworm-slim
ARG RUST_IMAGE=rust:1.79-slim-bookworm
ARG RUST_IMAGE=rust:1.80-slim-bookworm
ARG PYTHON_IMAGE=python:3.11.4-slim-bookworm

FROM ${DEBIAN_IMAGE} as downloader
Expand Down
2 changes: 1 addition & 1 deletion backend/windmill-worker/src/python_executor.rs
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,7 @@ def to_b_64(v: bytes):
b64 = base64.b64encode(v)
return b64.decode('ascii')
replace_nan = re.compile(r'(?:\bNaN\b|\\u0000)')
replace_nan = re.compile(r'(?:\bNaN\b|\\*\\u0000)')
result_json = os.path.join(os.path.abspath(os.path.dirname(__file__)), "result.json")
Expand Down
26 changes: 26 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 3 additions & 2 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
"filter-classes": "node filterTailwindClasses.js"
},
"devDependencies": {
"@windmill-labs/esbuild-import-meta-url-plugin": "0.0.0-semantic-release",
"@floating-ui/core": "^1.3.1",
"@hey-api/openapi-ts": "^0.43.0",
"@playwright/test": "^1.34.3",
Expand All @@ -35,6 +34,7 @@
"@types/vscode": "^1.83.5",
"@typescript-eslint/eslint-plugin": "^5.59.8",
"@typescript-eslint/parser": "^5.60.0",
"@windmill-labs/esbuild-import-meta-url-plugin": "0.0.0-semantic-release",
"@zerodevx/svelte-toast": "^0.9.5",
"autoprefixer": "^10.4.13",
"cssnano": "^6.0.1",
Expand Down Expand Up @@ -88,9 +88,9 @@
"@codingame/monaco-vscode-keybindings-service-override": "~8.0.2",
"@codingame/monaco-vscode-lifecycle-service-override": "~8.0.2",
"@codingame/monaco-vscode-localization-service-override": "~8.0.2",
"@codingame/monaco-vscode-standalone-css-language-features": "~8.0.2",
"@codingame/monaco-vscode-standalone-json-language-features": "~8.0.2",
"@codingame/monaco-vscode-standalone-languages": "~8.0.2",
"@codingame/monaco-vscode-standalone-css-language-features": "~8.0.2",
"@codingame/monaco-vscode-standalone-typescript-language-features": "~8.0.2",
"@json2csv/plainjs": "^7.0.6",
"@leeoniya/ufuzzy": "^1.0.8",
Expand Down Expand Up @@ -122,6 +122,7 @@
"monaco-editor-wrapper": "^5.5.2",
"monaco-graphql": "^1.6.0",
"monaco-languageclient": "~8.8.2",
"monaco-vim": "^0.4.1",
"ol": "^7.4.0",
"openai": "^4.47.1",
"p-limit": "^6.1.0",
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/lib/assets/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -120,3 +120,7 @@ svelte-virtual-list-contents > * + * {
@apply bg-surface;
@apply disabled:placeholder:text-gray-200 disabled:placeholder:dark:text-gray-500 disabled:text-gray-200 disabled:dark:text-gray-500 disabled:border-gray-200 disabled:dark:border-gray-600;
}

.nonmain-editor .cursor.monaco-mouse-cursor-text {
width: 1px !important;
}
6 changes: 5 additions & 1 deletion frontend/src/lib/components/DiffEditor.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -125,5 +125,9 @@

{#if open}
<EditorTheme />
<div bind:this={diffDivEl} class="{$$props.class} editor" bind:clientWidth={editorWidth} />
<div
bind:this={diffDivEl}
class="{$$props.class} editor nonmain-editor"
bind:clientWidth={editorWidth}
/>
{/if}
34 changes: 31 additions & 3 deletions frontend/src/lib/components/Editor.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<script context="module">
import '@codingame/monaco-vscode-standalone-languages'
import '@codingame/monaco-vscode-standalone-typescript-language-features'
import processStdContent from '$lib/process.d.ts.txt?raw'
import windmillFetchContent from '$lib/windmill_fetch.d.ts.txt?raw'
Expand Down Expand Up @@ -129,7 +128,8 @@
copilotInfo,
codeCompletionSessionEnabled,
lspTokenStore,
formatOnSave
formatOnSave,
vimMode
} from '$lib/stores'
import {
Expand All @@ -155,7 +155,8 @@
KeyCode,
KeyMod,
Uri as mUri,
type IRange
type IRange,
type IDisposable
} from 'monaco-editor'
import type { MonacoGraphQLAPI } from 'monaco-graphql/esm/api.js'
Expand All @@ -169,6 +170,7 @@
} from '$lib/consts'
import { setupTypeAcquisition } from '$lib/ata/index'
import { initWasm, parseDeps } from '$lib/infer'
import { initVim } from './monaco_keybindings'
// import EditorTheme from './EditorTheme.svelte'
Expand Down Expand Up @@ -1042,6 +1044,26 @@
let initialized = false
let ata: ((s: string) => void) | undefined = undefined
let statusDiv: Element | null = null
function saveDraft() {
dispatch('saveDraft', code)
}
let vimDisposable: IDisposable | undefined = undefined
$: editor && $vimMode && statusDiv && onVimMode()
$: !$vimMode && vimDisposable && onVimDisable()
function onVimDisable() {
vimDisposable?.dispose()
}
function onVimMode() {
if (editor && statusDiv) {
vimDisposable = initVim(editor, statusDiv, saveDraft)
}
}
async function loadMonaco() {
try {
console.log("Loading Monaco's language client")
Expand Down Expand Up @@ -1077,6 +1099,8 @@
folding
})
// updateEditorKeybindingsMode(editor, 'vim', undefined)
let timeoutModel: NodeJS.Timeout | undefined = undefined
let ataModel: NodeJS.Timeout | undefined = undefined
Expand Down Expand Up @@ -1140,6 +1164,7 @@
ata = undefined
try {
closeWebsockets()
vimDisposable?.dispose()
model?.dispose()
editor && editor.dispose()
console.log('disposed editor')
Expand Down Expand Up @@ -1289,6 +1314,9 @@

<EditorTheme />
<div bind:this={divEl} class="{$$props.class} editor {disabled ? 'disabled' : ''}" />
{#if $vimMode}
<div class="fixed bottom-0 z-30" bind:this={statusDiv} />
{/if}

<style global lang="postcss">
.editor {
Expand Down
13 changes: 4 additions & 9 deletions frontend/src/lib/components/EditorBar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
import Button from './common/button/Button.svelte'
import HighlightCode from './HighlightCode.svelte'
import DrawerContent from './common/drawer/DrawerContent.svelte'
import { Drawer } from './common'
import { Drawer, Popup } from './common'
import WorkspaceScriptPicker from './flows/pickers/WorkspaceScriptPicker.svelte'
import PickHubScript from './flows/pickers/PickHubScript.svelte'
import ToggleHubWorkspace from './ToggleHubWorkspace.svelte'
Expand All @@ -23,7 +23,6 @@
import { sendUserToast } from '$lib/toast'
import { getScriptByPath, scriptLangToEditorLang } from '$lib/scripts'
import Toggle from './Toggle.svelte'
import FormatOnSave from './FormatOnSave.svelte'
import {
DollarSign,
Expand All @@ -42,10 +41,10 @@
import ScriptGen from './copilot/ScriptGen.svelte'
import type DiffEditor from './DiffEditor.svelte'
import { getResetCode } from '$lib/script_helpers'
import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte'
import Popover from './Popover.svelte'
import ResourceEditorDrawer from './ResourceEditorDrawer.svelte'
import type { EditorBarUi } from './custom_ui'
import EditorSettings from './EditorSettings.svelte'
export let lang: SupportedLanguage | 'bunnative' | undefined
export let editor: Editor | undefined
Expand Down Expand Up @@ -655,15 +654,11 @@ $res = json_decode(curl_exec($ch));`)
</div>
{/if}

{#if customUi?.autoformatting != false}
<FormatOnSave />
{/if}
{#if customUi?.aiGen != false}
<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
{/if}
{#if customUi?.aiFix != false}
<CodeCompletionStatus />
{/if}

<EditorSettings {customUi} />
</div>
</div>

Expand Down
47 changes: 47 additions & 0 deletions frontend/src/lib/components/EditorSettings.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<script lang="ts">
import { Settings } from 'lucide-svelte'
import FormatOnSave from './FormatOnSave.svelte'
import VimMode from './VimMode.svelte'
import { Button, Popup } from './common'
import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte'
import type { EditorBarUi } from './custom_ui'
export let customUi: EditorBarUi = {}
</script>

{#if customUi?.autoformatting != false || customUi?.vimMode != false || customUi?.aiCompletion != false}
<Popup
floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
>
<svelte:fragment slot="button">
<Button
btnClasses="text-tertiary"
color="light"
size="xs"
nonCaptureEvent={true}
startIcon={{ icon: Settings }}
iconOnly
title="Editor settings"
/>
</svelte:fragment>

<div class="flex flex-col gap-y-2">
{#if customUi?.autoformatting != false}
<div>
<FormatOnSave />
</div>
{/if}
{#if customUi?.vimMode != false}
<div>
<VimMode />
</div>
{/if}
{#if customUi?.aiCompletion != false}
<div>
<CodeCompletionStatus />
</div>
{/if}
</div>
</Popup>
{/if}
43 changes: 12 additions & 31 deletions frontend/src/lib/components/FormatOnSave.svelte
Original file line number Diff line number Diff line change
@@ -1,37 +1,18 @@
<script lang="ts">
import { Paintbrush } from 'lucide-svelte'
import Button from './common/button/Button.svelte'
import { formatOnSave } from '$lib/stores'
import Popover from './Popover.svelte'
import { getLocalSetting, storeLocalSetting } from '$lib/utils'
import PaintbrushOff from './icons/PaintbrushOff.svelte'
const SETTING_NAME = 'formatOnSave'
function loadSetting() {
$formatOnSave = (getLocalSetting(SETTING_NAME) ?? 'true') == 'true'
}
import { FORMAT_ON_SAVE_SETTING_NAME, formatOnSave } from '$lib/stores'
import { storeLocalSetting } from '$lib/utils'
import Toggle from './Toggle.svelte'
function storeSetting() {
$formatOnSave = !$formatOnSave
storeLocalSetting(SETTING_NAME, $formatOnSave.toString())
storeLocalSetting(FORMAT_ON_SAVE_SETTING_NAME, $formatOnSave.toString())
}
loadSetting()
</script>

<Popover>
<svelte:fragment slot="text"
>{$formatOnSave ? 'Disable' : 'Enable'} auto-formatting</svelte:fragment
>
<Button
size="xs"
color="light"
startIcon={{
icon: !$formatOnSave ? PaintbrushOff : Paintbrush
}}
btnClasses="text-tertiary"
on:click={() => {
storeSetting()
}}
/>
</Popover>
<Toggle
size="xs"
bind:checked={$formatOnSave}
on:change={() => {
storeSetting()
}}
options={{ right: 'auto-formatting' }}
/>
3 changes: 3 additions & 0 deletions frontend/src/lib/components/ScriptBuilder.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -1184,6 +1184,9 @@
on:format={() => {
saveDraft()
}}
on:saveDraft={() => {
saveDraft()
}}
bind:editor
bind:this={scriptEditor}
bind:schema={script.schema}
Expand Down
1 change: 1 addition & 0 deletions frontend/src/lib/components/ScriptEditor.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -297,6 +297,7 @@
on:change={(e) => {
inferSchema(e.detail)
}}
on:saveDraft
cmdEnterAction={async () => {
await inferSchema(code)
runTest()
Expand Down
Loading

0 comments on commit 1ec45e5

Please sign in to comment.