Skip to content

Commit

Permalink
fix: small fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
gearonix committed Jul 27, 2023
1 parent 00b85ce commit 5db04c7
Show file tree
Hide file tree
Showing 14 changed files with 50 additions and 37 deletions.
4 changes: 2 additions & 2 deletions libs/client-shared/src/lib/components/common.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { WithReactChildren } from '@code-gear/client-shared'
import { WithChildren } from '../../types'

type DisplayProps<T> = WithReactChildren<{ when: T }>
type DisplayProps<T> = WithChildren<{ when: T }>

export const Display = <T>({ when, children }: DisplayProps<T>) => {
return when ? children : null
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import EditorGetters from './editor.getters'
import EditorServices from './editor.services'

import { Hex, LocalStorageClient } from '$/client-shared'
import { defaultCodeLang, defaultCodeTemplate } from '../lib/default-code-template';

class EditorStore {
activeKey = ''
Expand Down Expand Up @@ -58,7 +59,9 @@ class EditorStore {
)

if (savedContent.length === 0) {
this.actions.tabs.createTab()
const newTab = this.actions.tabs.createTab()
newTab!.lang = defaultCodeLang
newTab?.setTabContent(defaultCodeTemplate)
}

for (const instance of savedContent) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { LanguagesValues } from '@/shared/consts'

export const defaultCodeTemplate = `// Hello World! Here you can edit the code in 10 different languages. 😎
const camel = 'I like apples'
// Run the code and look in the terminal.
console.log(camel)
// You can edit and run the code in real time
// and your friends will see it! Sign in if you want to see more features.
`
export const defaultCodeLang: LanguagesValues = 'javascript'
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const ModalsContextProvider = ({ children }: WithChildren) => {
const initialState: ModalsState = useMemo<ModalsState>(
() => ({
isSettingsOpened: false,
isHtmlPreviewOpened: true,
isHtmlPreviewOpened: false,
isTerminalOpened: true,
selectedTerminalTab: 'terminal'
}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const useCustomTheme = () => {
const monaco = useMonaco()

return ({ background, color }: CustomTheme) => {
monaco.editor.defineTheme(CUSTOM_THEME, {
monaco?.editor.defineTheme(CUSTOM_THEME, {
base: 'vs',
inherit: true,
rules: [],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const useThemeLoader = () => {

assertThemeObject(json)

monaco.editor.defineTheme(theme, json)
monaco?.editor.defineTheme(theme, json)
} catch (error) {
console.log(EditorErrors.ThemeUpload(theme))
}
Expand All @@ -35,7 +35,7 @@ export const useThemeLoader = () => {

if (processed === themes.length) {
defineCustomTheme({ background: customBackground, color: customColor })
monaco.editor.setTheme(selectedTheme)
monaco?.editor.setTheme(selectedTheme)

loader.on()
}
Expand Down
21 changes: 0 additions & 21 deletions libs/editor/src/components/tabs/store/content-tab.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,29 +55,8 @@ export class ContentTab {
return this._label
}

private updateLabel() {
// TODO: refactor

if (this._fileHandle) {
if (!this.wasChanged) {
this.setLabel(`${this.getLabel()} •`)
}
this.wasChanged = true

return
}
const firstLine = this._content.split('\n')[0].slice(0, 10)
const cropped = firstLine.replace(' ', '').replace('\n', '')
const newLabel = `${cropped.length > 1 ? firstLine : 'Untitled'} •`
this.wasChanged = true

this.setLabel(newLabel)
}

public setTabContent(content: string) {
this._content = content

this.updateLabel()
}

public getContent() {
Expand Down
7 changes: 5 additions & 2 deletions libs/editor/src/components/tabs/store/tabs.actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { makeAutoObservable } from 'mobx'
import { EditorStore } from '@/app'
import { ContentTab, isMaxTabsLength } from '@/components/tabs/lib'
import { FileHandlerData } from '@/modules/editor-content/types'
import { Nullable } from '$/client-shared';

class TabsActions {
private state: EditorStore
Expand All @@ -12,18 +13,20 @@ class TabsActions {
this.state = root
}

createTab(fileData?: FileHandlerData): void {
createTab(fileData?: FileHandlerData): Nullable<ContentTab> {
const content = this.state.content

if (isMaxTabsLength(content)) {
return
return null
}
const lastNumber = content.at(-1)?.idx

const newTab = new ContentTab({ fileData, lastNumber })

this.state.activeKey = newTab.getKeyId()
this.state.content.push(newTab)

return newTab
}

removeTab(targetKey?: string): void {
Expand Down
3 changes: 3 additions & 0 deletions libs/editor/src/components/tabs/ui/tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@ const Tabs = observer(() => {
if (action === 'add') {
actions.tabs.createTab()
} else {
if (content.length === 1) {
return
}
confirm.on(targetKey as string)
}
}
Expand Down
6 changes: 6 additions & 0 deletions libs/editor/src/components/terminal/ui/ui/terminal.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,9 @@ export const Navigation = styled(Tabs)`
font-size: ${({ theme }) => theme.fz6};
`

export const TerminalTitle = styled.h3`
color: ${color('light')};
font-size: ${({ theme }) => theme.fz7};
`
6 changes: 4 additions & 2 deletions libs/editor/src/components/terminal/ui/ui/terminal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
} from '@/components/terminal-output'
import { useActions, useModalsContext } from '@/shared/hooks'

import { Navigation, TerminalButtons } from './terminal.styles'
import { Navigation, TerminalButtons, TerminalTitle } from './terminal.styles'

import { Display, Popover } from '$/client-shared'
import { AiOutlineClose, GrClear } from '$/icons'
Expand Down Expand Up @@ -46,7 +46,9 @@ const Terminal = observer(() => {
<Display when={terminalTabs.key === 'terminal'}>
<TerminalOutput ref={terminalOutputRef} />
</Display>
<Display when={terminalTabs.key === 'test_cases'}>test cases</Display>
<Display when={terminalTabs.key === 'test_cases'}>
<TerminalTitle>Test cases are not supported yet.</TerminalTitle>
</Display>

<TerminalButtons>
<GrClear onClick={clearTerminal} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export const EditorContent = observer(() => {
}

useEffect(() => {
monaco.editor.setTheme(theme)
monaco?.editor.setTheme(theme)
}, [theme])

useEffect(() => {
Expand Down
10 changes: 7 additions & 3 deletions libs/editor/src/shared/consts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,12 @@ export const languages = {
html: 'html',
htm: 'html',
txt: 'text',
css: 'css'
css: 'css',
py: 'python',
cpp: 'cpp',
go: 'go',
c: 'c',
java: 'java'
} as const

export type LanguagesValues = ValueOf<typeof languages>
Expand All @@ -36,13 +41,12 @@ export type LanguagesKeys = keyof typeof languages

export const maxTabsLength = 9 as const

export const executorAllowedLanguages = [
export const executorAllowedLanguages: LanguagesValues[] = [
'java',
'python',
'cpp',
'c',
'go',
'cs',
'javascript'
]

Expand Down
2 changes: 1 addition & 1 deletion libs/editor/src/shared/hooks/use-editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@ import { useMonaco } from '@monaco-editor/react'
export const useEditor = () => {
const monaco = useMonaco()

return monaco.editor.getEditors()[0] as editor.ICodeEditor
return monaco?.editor.getEditors()[0] as editor.ICodeEditor
}

0 comments on commit 5db04c7

Please sign in to comment.