Notify editor about editor type changes

This commit is contained in:
Konrad Borowski 2019-10-30 19:25:35 +01:00
parent f46d6df29b
commit ef2bd4f528
4 changed files with 16 additions and 6 deletions

View File

@ -26,10 +26,18 @@ export const types = {
},
}
export async function getCurrentEditor() {
return sessionStorage.getItem('editorType') || 'codemirror'
export function getCurrentEditor() {
return localStorage.getItem('editorType') || 'codemirror'
}
export function setCurrentEditor(newEditor) {
return sessionStorage.setItem('editorType', newEditor)
return localStorage.setItem('editorType', newEditor)
}
export function onChange(callback: (createEditor: (textArea: HTMLTextAreaElement, onChange: () => void) => EditorType) => void) {
addEventListener('storage', async ({ key, newValue }) => {
if (key === 'editorType') {
callback(await types[newValue].createView())
}
})
}

View File

@ -3,7 +3,7 @@ import './config-page.css'
export default async function createSettings(node) {
node.textContent = 'Loading settings\u2026'
const currentEditor = await getCurrentEditor()
const currentEditor = getCurrentEditor()
node.textContent = 'Editor type: '
for (const id in types) {
const label = document.createElement('label')

View File

@ -74,6 +74,7 @@ class MonacoEditor {
}
unload() {
this.textarea.value = this.getValue()
this.editor.dispose()
this.container.remove()
this.textarea.style.display = 'inline'

View File

@ -2,7 +2,7 @@ import createTextareaEditor from '../editor-types/textarea'
import getLanguage from './get-language'
import Output from './output'
import WrapperButtons from './wrapper-buttons'
import { EditorType, types, getCurrentEditor } from '../../editor-types'
import { EditorType, types, getCurrentEditor, onChange } from '../../editor-types'
class Editor {
languageSelector: HTMLSelectElement
@ -21,6 +21,7 @@ class Editor {
this.wrapperButtons = new WrapperButtons(form.querySelector('#wrapper-buttons'), this.run.bind(this))
this.codeElement = form.querySelector('#code')
this.initializeEditor(createTextareaEditor)
onChange(editor => this.changeEditor(editor))
this.initConfiguredEditor()
this.output = new Output(form.querySelector('#output'))
this.autodeleteText = form.querySelector('#autodelete-text')
@ -35,7 +36,7 @@ class Editor {
}
async initConfiguredEditor() {
this.changeEditor(await types[await getCurrentEditor()].createView())
this.changeEditor(await types[getCurrentEditor()].createView())
}
changeEditor(createEditor) {