implement copilot suggestions

Author: SharonStrats

src/SourceEditor.ts …/components/sourceEditor/SourceEditor.tssrc/SourceEditor.ts renamed to src/components/sourceEditor/SourceEditor.ts src/SourceEditor.ts renamed to src/components/sourceEditor/SourceEditor.ts

@@ -2,6 +2,7 @@
 import { Compartment } from '@codemirror/state'
 import { EditorView } from '@codemirror/view'
 import type { ThemeMode } from 'pane-registry'
+import { darkThemeExtension } from './themes/dark'
 
 export class SourceEditor {
   private _view: EditorView | null = null
@@ -41,7 +42,7 @@ export class SourceEditor {
     const state = EditorState.create({
       doc: initialDoc,
       extensions: [
-        theme === 'dark' ? oneDark : [],
+        theme === 'dark' ? darkThemeExtension : [],
         this._languageCompartment.of(languageExtension),
         this._editableCompartment.of(EditorView.editable.of(true)),
         syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
@@ -62,6 +63,11 @@ export class SourceEditor {
     })
   }
 
+  destroy() {
+    this._view?.destroy()
+    this._view = null
+  }
+
   getValue(): string {
     return this._view ? this._view.state.doc.toString() : '';
   }

src/components/sourceEditor/SourceEditorCard.ts

@@ -6,13 +6,13 @@ import { fetchContentAndMetadata, setUnedited } from '../../helpers'
 import styles from './SourceEditorCard.styles.css'
 import WebComponent from '../../primitives/WebComponent'
 import { SourcePaneState } from '../../types'
-import { SourceEditor } from '../../SourceEditor'
+import { SourceEditor } from './SourceEditor'
 import { getStatusSection } from '../../StatusSection'
 
 @customElement('source-editor-card')
 export default class SourceEditorCard extends WebComponent {
   static styles = styles
-  private _editor!: SourceEditor
+  private _editor?: SourceEditor
   private _editorMount = createRef<HTMLDivElement>()
 
   @property({ attribute: false })
@@ -24,25 +24,26 @@ export default class SourceEditorCard extends WebComponent {
   @property({ attribute: false })
   accessor sourcePaneState!: SourcePaneState
 
-  private _getFileName (uri: string) {
+  private _getFileName (uri?: string) {
+    if (!uri) return ''
     const url = new URL(uri).pathname // remove #me and #this
     return url.substring(url.lastIndexOf('/') + 1)
   }
 
   getValue () {
-    return this._editor.getValue()
+    return this._editor?.getValue()
   }
 
   focusEditor () {
-    this._editor.focusEditor()
+    this._editor?.focusEditor()
   }
 
   setReadOnly (readOnly: boolean) {
-    this._editor.setReadOnly(readOnly)
+    this._editor?.setReadOnly(readOnly)
   }
 
   setValue (text: string) {
-    this._editor.replaceContent(text)
+    this._editor?.replaceContent(text)
   }
 
   private async _initializeEditor () {
@@ -66,7 +67,7 @@ export default class SourceEditorCard extends WebComponent {
   disconnectedCallback() {
     super.disconnectedCallback()
     if (this._editor) {
-      // this._editor.destroy?.() need to write a destroy method.
+      this._editor.destroy()
       this._editor = undefined
     }
   }

src/components/sourceEditor/themes/dark.ts

@@ -0,0 +1,72 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { tags as t } from '@lezer/highlight';
+
+/* The base styles were copied from google 
+   highlighting was modified to fit our design and needs */
+const darkTheme = EditorView.theme({
+  // Targets the outermost editor container
+  '&': {
+    color: '#e0e0e0',
+    backgroundColor: '#1e1e1e',
+    height: '100%'
+  },
+  
+  // Targets the active editing area where text lives
+  '.cm-content': {
+    caretColor: '#ff0055', // Custom cursor color
+    fontFamily: 'monospace'
+  },
+  
+  // Targets the line that the cursor is currently on
+  '.cm-activeLine': { 
+    backgroundColor: '#2a2a2a' 
+  },
+  
+  // Targets the line numbers sidebar panel
+  '.cm-gutters': {
+    backgroundColor: '#1e1e1e',
+    color: '#858585',
+    border: 'none'
+  },
+  
+  // Targets the active line number specifically
+  '.cm-activeLineGutter': {
+    color: '#fff',
+    backgroundColor: '#2a2a2a'
+  },
+  
+  // Targets text highlighted/selected by the user
+  '.cm-selectionBackground, ::selection': {
+    backgroundColor: '#3e4451 !important'
+  }
+}, { dark: true })
+
+const darkHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: '#FFFF8A', fontWeight: 'bold' },
+  { tag: t.string, color: '#FF5CFF' },
+  { tag: t.comment, color: '#6272a4', fontStyle: 'italic' },
+  { tag: t.function(t.variableName), color: '#50fa7b' },
+  { tag: t.variableName, color: '#f8f8f2' },
+  { tag: t.number, color: '#bd93f9' },
+  { tag: t.integer, color: '#bd93f9' },
+  { tag: t.float, color: '#bd93f9' },
+  { tag: t.url, color: '#FFFF00'},
+  { tag: t.className, color: '#ff5555' },
+  { tag: t.namespace, color: '#9b59b6' },
+  { tag: t.meta, color: '#c678dd' },
+  { tag: t.propertyName, color: '#00D100' },
+  { tag: t.unit, color: '#9b59b6'},
+  { tag: t.punctuation, color: '#ffffff' },
+  { tag: t.literal, color: '#f1fa8c' },
+  { tag: t.docString, color: '#6272a4', fontStyle: 'italic' },
+  { tag: t.processingInstruction, color: '#ffffff' },
+  { tag: t.angleBracket, color: '#f65353' },
+  { tag: t.tagName, color: '#f65353' },
+  { tag: t.attributeName, color: '#66d9ef' },
+])
+
+export const darkThemeExtension = [
+  darkTheme,
+  syntaxHighlighting(darkHighlightStyle)
+]

src/helpers.ts

@@ -140,9 +140,10 @@ export function setUnedited (subject: NamedNode, sourcePaneState: SourcePaneStat
   const saveButton = document.querySelector('.sourcePaneSaveButton') as HTMLElement
   const myEditButton = document.querySelector('.sourcePaneEditButton') as HTMLElement
   const myCompactButton = document.querySelector('.sourcePaneCompactButton') as HTMLElement
-  const { broken, contentType } = sourcePaneState
+  const { broken, contentType, allowed } = sourcePaneState
   if (broken) return
-  setControlVisible(myEditButton, !subject.uri.endsWith('/'))
+  const canEdit = !subject.uri.endsWith('/') && (!allowed || allowed.includes('PUT'))
+  setControlVisible(myEditButton, canEdit)
   setControlVisible(saveButton, false)
   setControlVisible(myCompactButton, !!(contentType && compactable[contentType.split(';')[0]]))
   editorCard?.setReadOnly(true)

test/helpers.test.js

@@ -96,7 +96,7 @@ describe('helpers', () => {
 
     expect(editorCard.setReadOnly).toHaveBeenCalledWith(true)
     expect(saveButton.className).toContain('sourcePaneControlHidden')
-    expect(editButton.className).toContain('sourcePaneControlVisible')
+    expect(editButton.className).toContain('sourcePaneControlHidden')
     expect(compactButton.className).toContain('sourcePaneControlVisible')
   })
 })

test/sourceEditorCard.test.js

@@ -11,6 +11,7 @@ jest.mock('../src/components/sourceEditor/SourceEditor', () => {
       focusEditor: jest.fn(),
       setReadOnly: jest.fn(),
       replaceContent: jest.fn(),
+      destroy: jest.fn(),
     })),
   }
 })