From 13a4570080503b389511d31c801a847de1e11f4a Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Sat, 29 Jun 2024 18:09:11 +0800 Subject: [PATCH 1/2] feat(example): remove theme toggle, add theme select --- packages/playground/src/App.tsx | 14 ++- .../examples/editor-example-with-select.tsx | 75 +++++++++++----- .../src/examples/editor-example.tsx | 88 +++++++++---------- 3 files changed, 98 insertions(+), 79 deletions(-) diff --git a/packages/playground/src/App.tsx b/packages/playground/src/App.tsx index de6c9c9..f1594ca 100644 --- a/packages/playground/src/App.tsx +++ b/packages/playground/src/App.tsx @@ -20,7 +20,7 @@ const queryClient = new QueryClient({ } }) -function FullPlayground() { +function FullFeaturedPlayground() { return ( @@ -43,22 +43,18 @@ function FullPlayground() { function App() { const params = new URLSearchParams(window.location.search) const example = params.get('example') - const isDark = params.get('theme') === 'dark' + const theme = params.get('theme') ?? 'bbedit' const withSelect = params.get('with_select') if (example !== null) { if (withSelect !== null) { - return ( - - - - ) + return } - return + return } - return + return } export default App diff --git a/packages/playground/src/examples/editor-example-with-select.tsx b/packages/playground/src/examples/editor-example-with-select.tsx index 5934c8d..2a46877 100644 --- a/packages/playground/src/examples/editor-example-with-select.tsx +++ b/packages/playground/src/examples/editor-example-with-select.tsx @@ -13,9 +13,6 @@ import { } from '@/components/ui/select' import { Button } from '@/components/ui/button' -import { DarkModeToggle } from '@/components/darkmode-toggle/toggle' -import { useTheme } from '@/components/darkmode-toggle/theme-provider' - import { EditorExample } from './editor-example' function ExampleSelect({ @@ -27,7 +24,7 @@ function ExampleSelect({ }) { return ( + + + + + + Themes + bbedit + oneDark + default + + + + ) +} + +function updateUrlParam(key: string, value: string) { + const url = new URL(window.location.href) + const params = new URLSearchParams(url.search) + params.set(key, value) + window.history.replaceState({}, '', `${url.pathname}?${params.toString()}`) +} + export function EditorExampleWithSelect({ - initExample + defExample, + defTheme }: { - initExample: string + defExample: string + defTheme: string }) { - const [example, setExample] = useState(initExample) - const { isDark } = useTheme() + const [example, setExample] = useState(defExample) + const [theme, setTheme] = useState(defTheme) - function onSelectValueChange(v: string) { + function onExampleChange(v: string) { setExample(v) + updateUrlParam('example', v) + } - // update url - const url = new URL(window.location.href) - const params = new URLSearchParams(url.search) - params.set('example', v) - window.history.replaceState({}, '', `${url.pathname}?${params.toString()}`) + function onThemeChange(v: string) { + setTheme(v) + updateUrlParam('theme', v) } return ( @@ -74,25 +104,22 @@ export function EditorExampleWithSelect({ TiSQLEditor - diff --git a/packages/playground/src/examples/editor-example.tsx b/packages/playground/src/examples/editor-example.tsx index ab135ab..8c80cca 100644 --- a/packages/playground/src/examples/editor-example.tsx +++ b/packages/playground/src/examples/editor-example.tsx @@ -15,6 +15,7 @@ import { isUnifiedMergeViewActive } from '@tidbcloud/codemirror-extension-ai-widget' import { delay } from '@/lib/delay' +import { Extension } from '@codemirror/state' const EXAMPLE_SQL = ` USE sp500insight; @@ -35,12 +36,49 @@ const ALL_EXAMPLES = [ 'full-width-char-linter' ] +const EXAMPLE_EXTS: { [key: string]: Extension } = { + 'ai-widget': aiWidget({ + chat: async () => { + await delay(2000) + return { + status: 'success', + message: + 'select * from test;\n-- the data is mocked, replace by your own api when using' + } + }, + cancelChat: () => {}, + getDbList: () => { + return ['test1', 'test2'] + } + }), + 'save-helper': saveHelper({ + save: (view: EditorView) => { + console.log('save content:', view.state.doc.toString()) + } + }), + autocomplete: autoCompletion(), + 'cur-sql-gutter': curSqlGutter({ + whenHide(view) { + return isUnifiedMergeViewActive(view.state) + } + }), + 'use-db-linter': useDbLinter(), + 'full-width-char-linter': fullWidthCharLinter() +} + +const THEME_EXTS: { [key: string]: Extension } = { + light: bbedit, + bbedit: bbedit, + dark: oneDark, + oneDark: oneDark +} + export function EditorExample({ example = '', - isDark = false + theme = '' }: { example?: string - isDark?: boolean + theme?: string }) { const extraExts = useMemo(() => { let exampleArr = example.split(',') @@ -53,49 +91,7 @@ export function EditorExample({ ]) } exampleArr = [...new Set(exampleArr)] - - return exampleArr.map((item) => { - if (item === 'ai-widget') { - return aiWidget({ - chat: async () => { - await delay(2000) - return { - status: 'success', - message: - 'select * from test;\n-- the data is mocked, replace by your own api when using' - } - }, - cancelChat: () => {}, - getDbList: () => { - return ['test1', 'test2'] - } - }) - } - if (item === 'save-helper') { - return saveHelper({ - save: (view: EditorView) => { - console.log('save content:', view.state.doc.toString()) - } - }) - } - if (item === 'autocomplete') { - return autoCompletion() - } - if (item === 'cur-sql-gutter') { - return curSqlGutter({ - whenHide(view) { - return isUnifiedMergeViewActive(view.state) - } - }) - } - if (item === 'use-db-linter') { - return useDbLinter() - } - if (item === 'full-width-char-linter') { - return fullWidthCharLinter() - } - return [] - }) + return exampleArr.map((item) => EXAMPLE_EXTS[item]) }, [example]) return ( @@ -103,7 +99,7 @@ export function EditorExample({ className="h-full" editorId={example || 'default'} doc={EXAMPLE_SQL} - theme={isDark ? oneDark : bbedit} + theme={THEME_EXTS[theme]} extraExts={extraExts} /> ) From f781a1704757520494ba9ec988b30b181285e776 Mon Sep 17 00:00:00 2001 From: baurine <2008.hbl@gmail.com> Date: Sat, 29 Jun 2024 18:31:52 +0800 Subject: [PATCH 2/2] feat(example): use different doc for each extension --- .../src/examples/editor-example.tsx | 39 +++++++++++++------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/packages/playground/src/examples/editor-example.tsx b/packages/playground/src/examples/editor-example.tsx index 8c80cca..eac7091 100644 --- a/packages/playground/src/examples/editor-example.tsx +++ b/packages/playground/src/examples/editor-example.tsx @@ -17,9 +17,10 @@ import { import { delay } from '@/lib/delay' import { Extension } from '@codemirror/state' -const EXAMPLE_SQL = ` -USE sp500insight; - +const DOC_1 = `USE sp500insight;` +const DOC_2 = `-- USE sp500insight;` +const DOC_3 = `-- USE sp500insight；` +const DOC_4 = ` SELECT sector, industry, COUNT(*) AS companies FROM companies c WHERE c.stock_symbol IN (SELECT stock_symbol FROM index_compositions WHERE index_symbol = "SP500") @@ -73,6 +74,11 @@ const THEME_EXTS: { [key: string]: Extension } = { oneDark: oneDark } +const EXAMPLE_DOCS: { [key: string]: string } = { + 'use-db-linter': DOC_2, + 'full-width-char-linter': DOC_3 +} + export function EditorExample({ example = '', theme = '' @@ -80,25 +86,34 @@ export function EditorExample({ example?: string theme?: string }) { - const extraExts = useMemo(() => { + const exampleArr = useMemo(() => { let exampleArr = example.split(',') if (exampleArr.includes('all')) { exampleArr = ALL_EXAMPLES - } else if (exampleArr.includes('linters')) { - exampleArr = exampleArr.concat([ - 'use-db-linter', - 'full-width-char-linter' - ]) } - exampleArr = [...new Set(exampleArr)] - return exampleArr.map((item) => EXAMPLE_EXTS[item]) + return [...new Set(exampleArr)] }, [example]) + const extraExts = useMemo(() => { + return exampleArr.map((item) => EXAMPLE_EXTS[item]) + }, [exampleArr]) + + const doc = useMemo(() => { + let str = exampleArr + .map((item) => EXAMPLE_DOCS[item]) + .filter((s) => !!s) + .join('\n') + if (str === '') { + str = DOC_1 + } + return [str, DOC_4].join('\n') + }, [exampleArr]) + return (