paulmataruso/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2025-11-05 06:23:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(dbml-editor): add dbml editor in side pannel (#534)

Browse Source 
* add dbml mode

* add dark theme to dbml editor

* add the same sort logic to the dbml

* add comments to dbml

* fix colors + filtering

* fix(dbml-editor): add read-only toast for dbml editor

* update toast location

* fix(translations): add dbml translations

* dbml ui improvements

* dbml ui improvements

---------

Co-authored-by: Guy Ben-Aharon <baguy3@gmail.com>
This commit is contained in:
Jonathan Fishner
2025-01-27 20:32:39 +02:00
committed by GitHub
parent 0dcc9b9568
commit 88be6c1fd4
27 changed files with 325 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/code-snippet/code-snippet.tsx
View File

@@ -12,6 +12,14 @@ import { DarkTheme } from './themes/dark';
import { LightTheme } from './themes/light';
import './config.ts';
export const Editor = lazy(() =>
import('./code-editor').then((module) => ({
default: module.Editor,
}))
);
type EditorType = typeof Editor;
export interface CodeSnippetProps {
className?: string;
code: string;
@@ -19,14 +27,9 @@ export interface CodeSnippetProps {
loading?: boolean;
autoScroll?: boolean;
isComplete?: boolean;
editorProps?: React.ComponentProps<EditorType>;
}
export const Editor = lazy(() =>
import('./code-editor').then((module) => ({
default: module.Editor,
}))
);
export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
({
className,
@@ -35,6 +38,7 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
language = 'sql',
autoScroll = false,
isComplete = true,
editorProps,
}) => {
const { t } = useTranslation();
const monaco = useMonaco();
@@ -144,27 +148,32 @@ export const CodeSnippet: React.FC<CodeSnippetProps> = React.memo(
language={language}
loading={<Spinner />}
theme={effectiveTheme}
{...editorProps}
options={{
minimap: {
enabled: false,
},
readOnly: true,
automaticLayout: true,
scrollbar: {
vertical: 'hidden',
horizontal: 'hidden',
alwaysConsumeMouseWheel: false,
},
scrollBeyondLastLine: false,
renderValidationDecorations: 'off',
lineDecorationsWidth: 0,
overviewRulerBorder: false,
overviewRulerLanes: 0,
hideCursorInOverviewRuler: true,
contextmenu: false,
...editorProps?.options,
guides: {
indentation: false,
...editorProps?.options?.guides,
},
scrollbar: {
vertical: 'hidden',
horizontal: 'hidden',
alwaysConsumeMouseWheel: false,
...editorProps?.options?.scrollbar,
},
minimap: {
enabled: false,
...editorProps?.options?.minimap,
},
contextmenu: false,
}}
/>
{!isComplete ? (