Merge pull request #273 from XRPLF/fix/renaming-ext

Update file language on renaming.

components/HooksEditor.tsx

@@ -200,15 +200,15 @@ const HooksEditor = () => {
             defaultValue={file?.content}
             // onChange={val => (state.files[snap.active].content = val)} // Auto save?
             beforeMount={monaco => {
-              if (!snap.editorCtx) {
-                snap.files.forEach(file =>
-                  monaco.editor.createModel(
-                    file.content,
-                    file.language,
-                    monaco.Uri.parse(`file:///work/c/${file.name}`)
-                  )
-                )
-              }
+              // if (!snap.editorCtx) {
+              //   snap.files.forEach(file =>
+              //     monaco.editor.createModel(
+              //       file.content,
+              //       file.language,
+              //       monaco.Uri.parse(`file:///work/c/${file.name}`)
+              //     )
+              //   )
+              // }
 
               // create the web socket
               if (!subscriptionRef.current) {
@@ -218,6 +218,11 @@ const HooksEditor = () => {
                   aliases: ['C', 'c', 'H', 'h'],
                   mimetypes: ['text/plain']
                 })
+                monaco.languages.register({
+                  id: 'text',
+                  extensions: ['.txt'],
+                  mimetypes: ['text/plain'],
+                })
                 MonacoServices.install(monaco)
                 const webSocket = createWebSocket(
                   process.env.NEXT_PUBLIC_LANGUAGE_SERVER_API_ENDPOINT || ''

components/Tabs.tsx

@@ -11,7 +11,7 @@ import {
 } from './Dialog'
 import { Plus, X } from 'phosphor-react'
 import { styled } from '../stitches.config'
-import { capitalize } from '../utils/helpers'
+import { capitalize, getFileExtention } from '../utils/helpers'
 import ContextMenu, { ContentMenuOption } from './ContextMenu'
 
 const ErrorText = styled(Text, {
@@ -97,7 +97,7 @@ export const Tabs = ({
       if (!tabname) {
         return { error: `Please enter ${label.toLocaleLowerCase()} name.` }
       }
-      let ext = (tabname.includes('.') && tabname.split('.').pop()) || ''
+      let ext = getFileExtention(tabname)
 
       if (!ext && defaultExtension) {
         ext = defaultExtension
@@ -109,7 +109,7 @@ export const Tabs = ({
       if (extensionRequired && !ext) {
         return { error: 'File extension is required!' }
       }
-      if (allowedExtensions && !allowedExtensions.includes(ext)) {
+      if (allowedExtensions && ext && !allowedExtensions.includes(ext)) {
         return { error: 'This file extension is not allowed!' }
       }
       if (headerExtraValidation && !tabname.match(headerExtraValidation.regex)) {

pages/develop/[[...slug]].tsx

@@ -10,10 +10,11 @@ import Box from '../../components/Box'
 import Button from '../../components/Button'
 import Popover from '../../components/Popover'
 import RunScript from '../../components/RunScript'
-import state from '../../state'
+import state, { IFile } from '../../state'
 import { compileCode } from '../../state/actions'
 import { getSplit, saveSplit } from '../../state/actions/persistSplits'
 import { styled } from '../../stitches.config'
+import { getFileExtention } from '../../utils/helpers'
 
 const HooksEditor = dynamic(() => import('../../components/HooksEditor'), {
   ssr: false
@@ -147,6 +148,8 @@ const CompilerSettings = () => {
 const Home: NextPage = () => {
   const snap = useSnapshot(state)
 
+  const activeFile = snap.files[snap.active] as IFile | undefined
+  const activeFileExt = getFileExtention(activeFile?.name)
   return (
     <Split
       direction="vertical"
@@ -159,7 +162,7 @@ const Home: NextPage = () => {
     >
       <main style={{ display: 'flex', flex: 1, position: 'relative' }}>
         <HooksEditor />
-        {snap.files[snap.active]?.name?.split('.')?.[1]?.toLowerCase() === 'c' && (
+        {activeFileExt === 'c' && (
           <Hotkeys
             keyName="command+b,ctrl+b"
             onKeyDown={() => !snap.compiling && snap.files.length && compileCode(snap.active)}
@@ -193,7 +196,7 @@ const Home: NextPage = () => {
             </Flex>
           </Hotkeys>
         )}
-        {snap.files[snap.active]?.name?.split('.')?.[1]?.toLowerCase() === 'js' && (
+        {activeFileExt === 'js' && (
           <Hotkeys
             keyName="command+b,ctrl+b"
             onKeyDown={() => !snap.compiling && snap.files.length && compileCode(snap.active)}
@@ -209,7 +212,7 @@ const Home: NextPage = () => {
                 gap: '$2'
               }}
             >
-              <RunScript file={snap.files[snap.active]} />
+              <RunScript file={activeFile as IFile} />
             </Flex>
           </Hotkeys>
         )}
@@ -225,7 +228,7 @@ const Home: NextPage = () => {
         >
           <LogBox title="Development Log" clearLog={() => (state.logs = [])} logs={snap.logs} />
         </Flex>
-        {snap.files[snap.active]?.name?.split('.')?.[1]?.toLowerCase() === 'js' && (
+        {activeFileExt === 'js' && (
           <Flex
             css={{
               flex: 1

state/actions/createNewFile.ts

@@ -1,21 +1,19 @@
+import { getFileExtention } from '../../utils/helpers'
 import state, { IFile } from '../index'
 
-const languageMapping = {
+const languageMapping: Record<string, string | undefined> = {
   ts: 'typescript',
   js: 'javascript',
   md: 'markdown',
   c: 'c',
   h: 'c',
-  other: ''
-} /* Initializes empty file to global state */
+  txt: 'text'
+}
+
 export const createNewFile = (name: string) => {
-  const tempName = name.split('.')
-  const fileExt = tempName[tempName.length - 1] || 'other'
-  const emptyFile: IFile = {
-    name,
-    language: languageMapping[fileExt as 'ts' | 'js' | 'md' | 'c' | 'h' | 'other'],
-    content: ''
-  }
+  const ext = getFileExtention(name) || ''
+
+  const emptyFile: IFile = { name, language: languageMapping[ext] || 'text', content: '' }
   state.files.push(emptyFile)
   state.active = state.files.length - 1
 }
@@ -24,5 +22,8 @@ export const renameFile = (oldName: string, nwName: string) => {
   const file = state.files.find(file => file.name === oldName)
   if (!file) throw Error(`No file exists with name ${oldName}`)
 
+  const ext = getFileExtention(nwName) || ''
+  const language = languageMapping[ext] || 'text'
   file.name = nwName
+  file.language = language
 }

utils/helpers.ts

@@ -13,3 +13,9 @@ export const capitalize = (value?: string) => {
 
   return value[0].toLocaleUpperCase() + value.slice(1)
 }
+
+export const getFileExtention = (filename?: string): string | undefined => {
+  if (!filename) return
+  const ext = (filename.includes('.') && filename.split('.').pop()) || undefined
+  return ext
+}