From e816dbebaca273c30c9e1a9a61b4b427c52789c6 Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Fri, 21 Jun 2024 16:23:41 +0800 Subject: [PATCH 1/4] chore: update local storage key prefix --- packages/playground/src/lib/env-vars.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/playground/src/lib/env-vars.ts b/packages/playground/src/lib/env-vars.ts index 0372c1d..440821c 100644 --- a/packages/playground/src/lib/env-vars.ts +++ b/packages/playground/src/lib/env-vars.ts @@ -1,4 +1,4 @@ -const keyPrefix = (import.meta.env.VITE_STORAGE_KEY_PREFIX ?? 'v1') + '.' +const keyPrefix = (import.meta.env.VITE_STORAGE_KEY_PREFIX ?? 'v2') + '.' export function getLocalStorageItem(key: string) { return localStorage.getItem(keyPrefix + key) From 7c8a8bcb60c4811e51ef3814cb59509f5b786b56 Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Fri, 21 Jun 2024 17:39:28 +0800 Subject: [PATCH 2/4] feat(playground): update theme --- packages/playground/src/index.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/playground/src/index.css b/packages/playground/src/index.css index cb03946..6292c83 100644 --- a/packages/playground/src/index.css +++ b/packages/playground/src/index.css @@ -13,7 +13,7 @@ --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; + --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; @@ -30,7 +30,7 @@ --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; + --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } @@ -45,7 +45,7 @@ --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; - --primary: 210 40% 98%; + --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; @@ -62,7 +62,7 @@ --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; + --ring: 224.3 76.3% 48%; } } From dcef487ad089ee4390c82c0924e0f6238ffb40d3 Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Fri, 21 Jun 2024 18:42:37 +0800 Subject: [PATCH 3/4] feat(playground): show gutter --- packages/core/src/editor-instance.ts | 15 +++++++---- .../extensions/cur-sql-gutter/src/index.ts | 27 ++++++++++--------- packages/extensions/themes/src/bbedit.ts | 3 ++- packages/playground/package.json | 1 + .../components/biz/editor-panel/editor.tsx | 8 +++++- pnpm-lock.yaml | 3 +++ 6 files changed, 37 insertions(+), 20 deletions(-) diff --git a/packages/core/src/editor-instance.ts b/packages/core/src/editor-instance.ts index 29387e2..96c6187 100644 --- a/packages/core/src/editor-instance.ts +++ b/packages/core/src/editor-instance.ts @@ -81,6 +81,15 @@ export const createSQLEditorInstance = ({ const sqlCompartment = new Compartment() const extensions = [ + // make it full height default + // you can override it by theme and extraExts + EditorView.theme({ + '&': { height: '100%' }, + '.cm-line': { + paddingLeft: '8px' + } + }), + basicSetup({ foldGutter: false, foldKeymap: false, @@ -95,12 +104,8 @@ export const createSQLEditorInstance = ({ sqlCompartment.of(langSql(sqlConfig)), sqlParser(), curSql(), - extraExts, - // make it full height default - EditorView.theme({ - '&': { height: '100%' } - }) + extraExts ] const editorView = new EditorView({ state: EditorState.create({ diff --git a/packages/extensions/cur-sql-gutter/src/index.ts b/packages/extensions/cur-sql-gutter/src/index.ts index 61b0c03..32433f9 100644 --- a/packages/extensions/cur-sql-gutter/src/index.ts +++ b/packages/extensions/cur-sql-gutter/src/index.ts @@ -7,18 +7,18 @@ export interface CurSqlGutterConfig { backgroundColor?: string width?: number className?: string - shouldGutterDisplay?: (view: EditorView) => boolean + shouldDisplay?: (view: EditorView) => boolean } function getMarkers( view: EditorView, - config: CurSqlGutterConfig, - curSqlMarker: GutterMarker + curSqlMarker: GutterMarker, + config?: CurSqlGutterConfig ) { let markers = RangeSet.empty - // when something happend, hide the gutter - if (config.shouldGutterDisplay && !config.shouldGutterDisplay(view)) { + // when something happens, hide the gutter + if (config?.shouldDisplay && !config.shouldDisplay(view)) { return markers } @@ -54,34 +54,35 @@ function getMarkers( /** * gutter style */ -const baseTheme = (config: CurSqlGutterConfig) => { +const baseTheme = (config?: CurSqlGutterConfig) => { return EditorView.baseTheme({ '.cm-sql-gutter .cm-gutterElement': { - width: config.width || '2px' + width: `${config?.width ?? 2}px` }, '.cm-lineNumbers .cm-gutterElement': { + paddingLeft: '8px', paddingRight: '8px' } }) } -const sqlGutter = (config: CurSqlGutterConfig, curSqlMarker: GutterMarker) => { +const sqlGutter = (curSqlMarker: GutterMarker, config?: CurSqlGutterConfig) => { return gutter({ - class: `cm-sql-gutter ${config.className || ''}`, + class: `cm-sql-gutter ${config?.className || ''}`, initialSpacer: () => curSqlMarker, - markers: (view: EditorView) => getMarkers(view, config, curSqlMarker) + markers: (view: EditorView) => getMarkers(view, curSqlMarker, config) }) } -export const curSqlGutter = (config: CurSqlGutterConfig) => { +export const curSqlGutter = (config?: CurSqlGutterConfig) => { const curSqlMarker = new (class extends GutterMarker { toDOM() { const el = document.createElement('div') - el.style.background = config.backgroundColor || '#0CA6F2' + el.style.background = config?.backgroundColor || '#0CA6F2' el.style.height = '100%' return el } })() - return [baseTheme(config), sqlGutter(config, curSqlMarker)] + return [baseTheme(config), sqlGutter(curSqlMarker, config)] } diff --git a/packages/extensions/themes/src/bbedit.ts b/packages/extensions/themes/src/bbedit.ts index 7b8d0cf..1095a58 100644 --- a/packages/extensions/themes/src/bbedit.ts +++ b/packages/extensions/themes/src/bbedit.ts @@ -42,7 +42,8 @@ export const bbeditTheme = EditorView.theme( // gutter '.cm-gutters': { backgroundColor: '#FFFFFF', - color: '#999' + color: '#999', + border: 'none' } }, { dark: false } diff --git a/packages/playground/package.json b/packages/playground/package.json index e9d054f..97d6cd6 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -22,6 +22,7 @@ "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-tabs": "^1.0.4", "@tanstack/react-query": "^5.45.1", + "@tidbcloud/tisqleditor-extension-cur-sql-gutter": "workspace:^", "@tidbcloud/tisqleditor-extension-save-helper": "workspace:^", "@tidbcloud/tisqleditor-extension-sql-parser": "workspace:^", "@tidbcloud/tisqleditor-extension-themes": "workspace:^", diff --git a/packages/playground/src/components/biz/editor-panel/editor.tsx b/packages/playground/src/components/biz/editor-panel/editor.tsx index 6c65132..80e7933 100644 --- a/packages/playground/src/components/biz/editor-panel/editor.tsx +++ b/packages/playground/src/components/biz/editor-panel/editor.tsx @@ -6,6 +6,7 @@ import { SQLConfig } from '@codemirror/lang-sql' import { SQLEditor } from '@tidbcloud/tisqleditor-react' import { saveHelper } from '@tidbcloud/tisqleditor-extension-save-helper' import { bbedit, oneDark } from '@tidbcloud/tisqleditor-extension-themes' +import { curSqlGutter } from '@tidbcloud/tisqleditor-extension-cur-sql-gutter' import { useFilesContext } from '@/contexts/files-context' import { useTheme } from '@/components/darkmode-toggle/theme-provider' @@ -67,7 +68,12 @@ export function Editor() { saveFile(activeFile.id, view.state.doc.toString()) } }), - autocompletion() + autocompletion(), + curSqlGutter({ + shouldDisplay: (_view) => { + return true + } + }) ] } return [] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index da846d8..00c224b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -404,6 +404,9 @@ importers: '@tanstack/react-query': specifier: ^5.45.1 version: 5.45.1(react@18.3.1) + '@tidbcloud/tisqleditor-extension-cur-sql-gutter': + specifier: workspace:^ + version: link:../extensions/cur-sql-gutter '@tidbcloud/tisqleditor-extension-save-helper': specifier: workspace:^ version: link:../extensions/save-helper From 68dfe0de82ae95f66b9a988aa140ffbc880e27f2 Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Fri, 21 Jun 2024 18:46:41 +0800 Subject: [PATCH 4/4] feat(playground): fix run sql action --- .../components/biz/editor-panel/actions.tsx | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) diff --git a/packages/playground/src/components/biz/editor-panel/actions.tsx b/packages/playground/src/components/biz/editor-panel/actions.tsx index 756eeb6..343d587 100644 --- a/packages/playground/src/components/biz/editor-panel/actions.tsx +++ b/packages/playground/src/components/biz/editor-panel/actions.tsx @@ -20,24 +20,23 @@ export function EditorActions() { const activeEditor = cacheCtx.getEditor(activeFileId) if (!activeEditor) return - const curStatements = activeEditor.getCurStatements() - if (curStatements[0].content === '') return + const nearbyStatement = activeEditor.getNearbyStatement() + if (!nearbyStatement) { + return + } - const lastStatement = curStatements.at(-1) - if (lastStatement) { - setRunResult({ statement: lastStatement.content, status: 'running' }) - try { - const res = await runStatement(activeFileId, lastStatement) - console.log('res:', res) - setRunResult(res) - } catch (error: any) { - console.log('error:', error) - setRunResult({ - statement: lastStatement.content, - status: 'error', - message: error.message ?? 'unknown error' - }) - } + setRunResult({ statement: nearbyStatement.content, status: 'running' }) + try { + const res = await runStatement(activeFileId, nearbyStatement) + console.log('res:', res) + setRunResult(res) + } catch (error: any) { + console.log('error:', error) + setRunResult({ + statement: nearbyStatement.content, + status: 'error', + message: error.message ?? 'unknown error' + }) } }