feat: implement file editing capabilities with CodeMirror integration

- Added CodeMirror editor for file content editing in FilesView. - Introduced draft saving functionality with unsaved changes confirmation dialog. - Implemented file writing API to persist changes to the filesystem. - Enhanced language support for syntax highlighting based on file extensions. - Updated UI components to support new editing features, including save and discard options. - Refactored line selection logic for improved user experience on both desktop and mobile. - Added new utility functions for language detection by file extension. - Introduced a new theme for CodeMirror to align with the application's design.
2026-01-18 17:29:31 +02:00
parent 934df2b7e6
commit 24969ba856
11 changed files with 1151 additions and 189 deletions
@@ -0,0 +1,191 @@
+import type { Extension } from '@codemirror/state';
+
+import { javascript } from '@codemirror/lang-javascript';
+import { json } from '@codemirror/lang-json';
+import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
+import { markdown } from '@codemirror/lang-markdown';
+import { languages } from '@codemirror/language-data';
+import { python } from '@codemirror/lang-python';
+import { sql } from '@codemirror/lang-sql';
+import { xml } from '@codemirror/lang-xml';
+import { yaml as yamlLanguage } from '@codemirror/lang-yaml';
+import { rust } from '@codemirror/lang-rust';
+
+import { Language, LanguageDescription, StreamLanguage } from '@codemirror/language';
+import { shell } from '@codemirror/legacy-modes/mode/shell';
+import { toml } from '@codemirror/legacy-modes/mode/toml';
+import { diff } from '@codemirror/legacy-modes/mode/diff';
+import { dockerFile } from '@codemirror/legacy-modes/mode/dockerfile';
+import { ruby } from '@codemirror/legacy-modes/mode/ruby';
+import { properties } from '@codemirror/legacy-modes/mode/properties';
+
+const shellLanguage = StreamLanguage.define(shell);
+const tomlLanguage = StreamLanguage.define(toml);
+const diffLanguage = StreamLanguage.define(diff);
+const dockerfileLanguage = StreamLanguage.define(dockerFile);
+const rubyLanguage = StreamLanguage.define(ruby);
+const propertiesLanguage = StreamLanguage.define(properties);
+
+function codeBlockLanguageResolver(info: string): Language | LanguageDescription | null {
+  const normalized = info.trim().toLowerCase();
+
+  switch (normalized) {
+    case 'bash':
+    case 'sh':
+    case 'zsh':
+    case 'shell':
+    case 'shellsession':
+    case 'console':
+      return shellLanguage;
+    case 'toml':
+      return tomlLanguage;
+    case 'diff':
+    case 'patch':
+      return diffLanguage;
+    case 'json':
+    case 'jsonc':
+    case 'json5':
+      return json().language;
+    case 'js':
+    case 'javascript':
+      return javascript().language;
+    case 'jsx':
+      return javascript({ jsx: true }).language;
+    case 'ts':
+    case 'typescript':
+      return javascript({ typescript: true }).language;
+    case 'tsx':
+      return javascript({ typescript: true, jsx: true }).language;
+    case 'yaml':
+    case 'yml':
+      return yamlLanguage().language;
+    case 'html':
+      return html().language;
+    case 'css':
+      return css().language;
+    case 'xml':
+    case 'svg':
+      return xml().language;
+    case 'py':
+    case 'python':
+      return python().language;
+    case 'sql':
+      return sql().language;
+    case 'rs':
+    case 'rust':
+      return rust().language;
+    default:
+      return LanguageDescription.matchLanguageName(languages, normalized, true);
+  }
+}
+
+const normalizeFileName = (filePath: string) => filePath.split('/').pop()?.toLowerCase() ?? '';
+
+export function languageByExtension(filePath: string): Extension | null {
+  const normalized = filePath.toLowerCase();
+  const filename = normalizeFileName(normalized);
+
+  // Special filenames
+  switch (filename) {
+    case 'dockerfile':
+      return dockerfileLanguage;
+    case 'makefile':
+    case 'gnumakefile':
+      // No dedicated mode; shell is a decent fallback for Make-ish files.
+      return shellLanguage;
+  }
+
+  const idx = normalized.lastIndexOf('.');
+  const ext = idx >= 0 ? normalized.slice(idx + 1) : '';
+
+  switch (ext) {
+    // JavaScript/TypeScript
+    case 'ts':
+    case 'tsx':
+    case 'mts':
+    case 'cts':
+      return javascript({ typescript: true, jsx: ext === 'tsx' });
+    case 'js':
+    case 'jsx':
+    case 'mjs':
+    case 'cjs':
+      return javascript({ typescript: false, jsx: ext === 'jsx' });
+
+    // Web
+    case 'json':
+    case 'jsonc':
+    case 'json5':
+    case 'jsonl':
+    case 'ndjson':
+    case 'geojson':
+      return json();
+    case 'css':
+    case 'scss':
+    case 'sass':
+    case 'less':
+      return css();
+    case 'html':
+    case 'htm':
+      return html();
+    case 'md':
+    case 'mdx':
+    case 'markdown':
+    case 'mdown':
+    case 'mkd':
+      return markdown({
+        codeLanguages: codeBlockLanguageResolver,
+      });
+
+    // Data/config
+    case 'yml':
+    case 'yaml':
+      return yamlLanguage();
+    case 'toml':
+      return tomlLanguage;
+    case 'ini':
+    case 'cfg':
+    case 'conf':
+    case 'config':
+    case 'properties':
+      return propertiesLanguage;
+
+    // Shell
+    case 'sh':
+    case 'bash':
+    case 'zsh':
+    case 'fish':
+    case 'env':
+      return shellLanguage;
+
+    // Languages we already ship
+    case 'py':
+    case 'pyw':
+    case 'pyi':
+      return python();
+    case 'sql':
+    case 'psql':
+    case 'plsql':
+      return sql();
+    case 'xml':
+    case 'xsl':
+    case 'xslt':
+    case 'xsd':
+    case 'dtd':
+    case 'plist':
+    case 'svg':
+      return xml();
+    case 'rs':
+      return rust();
+
+    // Legacy modes
+    case 'rb':
+    case 'erb':
+    case 'rake':
+    case 'gemspec':
+      return rubyLanguage;
+
+    default:
+      return null;
+  }
+}