LiveCodes Broadcast
readonly: true, }); if (config.activeEditor) { - const { lineNumber = 1, column = 1 } = config[config.activeEditor]?.position || {}; + const editor = config.files?.length + ? config.files.find((f) => f.filename === config.activeEditor) + : config[config.activeEditor]; + const { lineNumber = 1, column = 1 } = editor?.position || {}; await playground.show(config.activeEditor, { line: lineNumber, column, diff --git a/server/src/broadcast/index.ts b/server/src/broadcast/index.ts index c2a30c59d2..ae6d590281 100644 --- a/server/src/broadcast/index.ts +++ b/server/src/broadcast/index.ts @@ -7,6 +7,12 @@ import path from 'node:path'; import * as socketio from 'socket.io'; import { dirname, generateId } from '../utils.ts'; +interface Channel { + channelToken: string; + result: string; + data: Record
`;
@@ -471,11 +519,174 @@ const createCopyButtons = () => {
});
};
+const checkFileName = (filename: string, config: Config, currentName?: string) => {
+ const name = getValidFileName(filename, config);
+ if (typeof name === 'string') {
+ if (name !== currentName && config.files?.some((f) => f.filename === name)) {
+ alert(window.deps.translateString('core.file.exists', 'File already exists!'));
+ return null;
+ }
+ return name;
+ }
+ if (name.error === 'invalid name') {
+ alert(window.deps.translateString('core.file.invalidName', 'Invalid file name!'));
+ return null;
+ }
+ if (name.error === 'invalid type') {
+ alert(window.deps.translateString('core.file.invalidType', 'Invalid file type!'));
+ return null;
+ }
+ return null;
+};
+
+const addFile = async (
+ filename: string,
+ editorOptions: Omit => {
@@ -5435,7 +6161,7 @@ const createApi = (): API => {
if (!cacheIsValid(getCache(), getContentConfig(getConfig()))) {
await getResultPage({ forExport: true });
}
- return JSON.parse(JSON.stringify(getCachedCode()));
+ return cloneObject(getCachedCode());
};
const apiShow: API['show'] = async (
@@ -5459,7 +6185,7 @@ const createApi = (): API => {
split?.show('code', full);
} else if (panel === 'console' || panel === 'compiled' || panel === 'tests') {
split?.show('output');
- toolsPane?.setActiveTool(panel);
+ toolsPane?.setActiveTool(panel as 'console' | 'compiled' | 'tests');
if (full) {
toolsPane?.maximize();
} else {
@@ -5470,8 +6196,8 @@ const createApi = (): API => {
split?.show('code', full);
if (typeof line === 'number' && line > 0) {
const col = typeof column === 'number' && column > -1 ? column : 0;
- getActiveEditor().setPosition({ lineNumber: line, column: col });
- getActiveEditor().focus();
+ getActiveEditor()?.setPosition({ lineNumber: line, column: col });
+ getActiveEditor()?.focus();
}
} else {
throw new Error(window.deps.translateString('core.error.invalidPanelId', 'Invalid panel id'));
@@ -5516,7 +6242,9 @@ const createApi = (): API => {
}
const token = args[0];
if (typeof token !== 'string') {
- return { error: window.deps.translateString('core.error.invalidToken', 'Invalid token!') };
+ return {
+ error: window.deps.translateString('core.error.invalidToken', 'Invalid token!'),
+ };
}
setAppData({
broadcast: {
@@ -5535,7 +6263,9 @@ const createApi = (): API => {
const output = getVersion();
return { output };
}
- return { error: window.deps.translateString('core.error.invalidCommand', 'Invalid command!') };
+ return {
+ error: window.deps.translateString('core.error.invalidCommand', 'Invalid command!'),
+ };
};
const apiDestroy = async () => {
@@ -5573,7 +6303,7 @@ const createApi = (): API => {
};
};
-const initApp = async (config: Partial, baseUrl: string) => {
+const initApp = async (config: Partial, baseUrl: string) => {
window.deps = {
showMode,
translateString: translateStringMock,
@@ -5588,7 +6318,7 @@ const initApp = async (config: Partial, baseUrl: string) => {
return createApi();
};
-const initEmbed = async (config: Partial, baseUrl: string) => {
+const initEmbed = async (config: Partial, baseUrl: string) => {
window.deps = {
showMode,
translateString: translateStringMock,
@@ -5604,7 +6334,7 @@ const initEmbed = async (config: Partial, baseUrl: string) => {
return createApi();
};
-const initHeadless = async (config: Partial, baseUrl: string) => {
+const initHeadless = async (config: Partial, baseUrl: string) => {
window.deps = {
showMode: () => undefined,
translateString: translateStringMock,
diff --git a/src/livecodes/editor/binary-file-editor.ts b/src/livecodes/editor/binary-file-editor.ts
new file mode 100644
index 0000000000..046e0029e4
--- /dev/null
+++ b/src/livecodes/editor/binary-file-editor.ts
@@ -0,0 +1,120 @@
+import type { CodeEditor, EditorOptions } from '../models';
+import { createFakeEditor } from './fake-editor';
+
+export const createBinaryFileEditor = (options: EditorOptions): CodeEditor => {
+ if (!options.container) return createFakeEditor(options);
+ const container = document.createElement('div');
+ container.classList.add('binary-file-editor');
+ options.container.appendChild(container);
+
+ const editor = createFakeEditor(options);
+
+ type Listener = () => void;
+ const listeners: Listener[] = [];
+ const onContentChanged = (fn: Listener) => {
+ listeners.push(fn);
+ };
+
+ const setValue = (value: string = '') => {
+ editor.setValue(value);
+ listeners.forEach((fn) => fn());
+ if (value) {
+ showFile();
+ } else {
+ showFileSelector();
+ }
+ };
+
+ const fileSelector = document.createElement('input');
+ fileSelector.type = 'file';
+ fileSelector.onchange = (ev) => {
+ const file = (ev.target as HTMLInputElement).files?.[0];
+ if (!file) return;
+
+ // Max 2 MB allowed
+ const maxSizeAllowed = 2 * 1024 * 1024;
+ if (file.size > maxSizeAllowed) {
+ alert(
+ window.deps.translateString(
+ 'generic.error.exceededSize',
+ 'Error: Exceeded size {{size}} MB',
+ { size: 2 },
+ ),
+ );
+ return;
+ }
+
+ const reader = new FileReader();
+ reader.onload = () => {
+ setValue(reader.result as string);
+ showFile();
+ };
+ reader.readAsDataURL(file);
+ };
+
+ const showFileSelector = () => {
+ const btn = document.createElement('button');
+ btn.innerHTML = window.deps.translateString('app.binaryFileEditor.selectFile', 'Select file');
+ btn.onclick = () => fileSelector.click();
+ container.innerHTML = '';
+ container.appendChild(btn);
+ };
+
+ const showFile = () => {
+ const src = editor.getValue();
+
+ if (!src) {
+ showFileSelector();
+ return;
+ }
+
+ let display;
+ if (src.startsWith('data:video')) {
+ display = document.createElement('video');
+ display.src = src;
+ } else {
+ display = document.createElement('img');
+ if (src.startsWith('data:image')) {
+ display.src = src;
+ } else if (src.startsWith('data:audio')) {
+ display.src = options.baseUrl + 'assets/images/audio.svg';
+ display.classList.add('icon');
+ } else if (src.startsWith('data:font')) {
+ display.src = options.baseUrl + 'assets/images/font.svg';
+ display.classList.add('icon');
+ } else {
+ display.src = options.baseUrl + 'assets/images/file.svg';
+ display.classList.add('icon');
+ }
+ }
+
+ const link = document.createElement('a');
+ link.title = window.deps.translateString('app.binaryFileEditor.selectFile', 'Select file');
+ link.onclick = (ev) => {
+ ev.preventDefault();
+ fileSelector.click();
+ };
+ link.appendChild(display);
+
+ container.innerHTML = '';
+ container.appendChild(link);
+ };
+
+ if (!editor.getValue()) {
+ showFileSelector();
+ } else {
+ showFile();
+ }
+
+ const destroy = () => {
+ listeners.length = 0;
+ container.remove();
+ };
+
+ return {
+ ...editor,
+ setValue,
+ onContentChanged,
+ destroy,
+ };
+};
diff --git a/src/livecodes/editor/codejar/codejar.ts b/src/livecodes/editor/codejar/codejar.ts
index 7fbc1f45f5..282569bb78 100644
--- a/src/livecodes/editor/codejar/codejar.ts
+++ b/src/livecodes/editor/codejar/codejar.ts
@@ -10,6 +10,7 @@ import 'prismjs/components/prism-typescript';
import 'prismjs/plugins/autoloader/prism-autoloader';
import 'prismjs/plugins/line-numbers/prism-line-numbers';
+import { getFileLanguage } from '../../languages';
import type {
CodeEditor,
CodejarTheme,
@@ -32,13 +33,17 @@ Prism.manual = true;
Prism.plugins.autoloader.languages_path = prismBaseUrl;
export const createEditor = async (options: EditorOptions): Promise => {
- const { container, mode, editorId, readonly, isEmbed, getFormatterConfig, getFontFamily } =
- options;
+ const { container, mode, readonly, isEmbed, getFormatterConfig, getFontFamily } = options;
if (!container) throw new Error('editor container not found');
- let { value, language } = options;
+ let { value, language, editorId } = options;
let currentPosition: EditorPosition = { lineNumber: 1 };
- const mapLanguage = (lang: Language) => options.mapLanguage?.(lang, 'codejar');
+ const mapLanguage = (lang: Language) => {
+ if (!lang) return 'html';
+ if (editorId.endsWith('.js')) return 'javascript';
+ if (editorId.endsWith('.ts')) return 'typescript';
+ return options.mapLanguage?.(lang, 'codejar') || lang;
+ };
let mappedLanguage = mapLanguage(language);
let editorOptions: ReturnType;
@@ -135,6 +140,13 @@ export const createEditor = async (options: EditorOptions): Promise
// codejar?.onPaste(handleUpdate);
const getEditorId = () => editorId;
+ const setEditorId = (filename: string, lang?: Language) => {
+ editorId = filename;
+ const newLang = lang || getFileLanguage(filename, {});
+ if (newLang && newLang !== language) {
+ setLanguage(newLang);
+ }
+ };
const getValue = () => (codejar ? codejar.toString() : value);
const setValue = (newValue = '\n') => {
value = newValue;
@@ -157,6 +169,7 @@ export const createEditor = async (options: EditorOptions): Promise
const getLanguage = () => language;
const setLanguage = (lang: Language, newValue?: string) => {
+ if (!lang) return;
language = lang;
mappedLanguage = mapLanguage(language);
codeElement.className = 'language-' + mappedLanguage;
@@ -430,6 +443,7 @@ export const createEditor = async (options: EditorOptions): Promise
getLanguage,
setLanguage,
getEditorId,
+ setEditorId,
focus,
getPosition,
setPosition: (position) => setPosition(position),
diff --git a/src/livecodes/editor/codemirror/codemirror.ts b/src/livecodes/editor/codemirror/codemirror.ts
index a947789215..a129c30cf7 100644
--- a/src/livecodes/editor/codemirror/codemirror.ts
+++ b/src/livecodes/editor/codemirror/codemirror.ts
@@ -31,7 +31,7 @@ import { rainbowbrackets } from 'rainbowbrackets';
// these are imported normally
import { getEditorModeNode } from '../../UI/selectors';
-import { getLanguageSpecs } from '../../languages';
+import { getFileLanguage, getLanguageSpecs } from '../../languages';
import type {
CodeEditor,
CodemirrorTheme,
@@ -48,7 +48,6 @@ import { ctrl, debounce, getRandomString } from '../../utils/utils';
import { codeMirrorBaseUrl, codemirrorMinimapUrl, comlinkBaseUrl } from '../../vendors';
import { getEditorTheme } from '../themes';
import { codemirrorThemes, customThemes } from './codemirror-themes';
-import { editorLanguages } from './editor-languages';
// export type CodeiumEditor = Pick & {
// editorId: EditorOptions['editorId'];
@@ -59,23 +58,15 @@ let tabFocusMode = false;
const changeTabFocusMode = debounce(() => (tabFocusMode = !tabFocusMode), 50);
export const createEditor = async (options: EditorOptions): Promise => {
- const {
- container,
- readonly,
- isEmbed,
- editorId,
- getFormatterConfig,
- getFontFamily,
- getLanguageExtension,
- } = options;
+ const { container, readonly, isEmbed, getFormatterConfig, getFontFamily, getLanguageExtension } =
+ options;
+ let { editorId, language } = options;
let editorSettings: EditorConfig = { ...options };
if (!container) throw new Error('editor container not found');
const getLanguageSupport = async (lang: Language): Promise => {
const langSupport = getLanguageSpecs(lang)?.editorSupport?.codemirror?.languageSupport;
- if (!langSupport) {
- return editorLanguages[lang]?.() || editorLanguages.html?.() || [];
- }
+ if (!langSupport) return [];
const loadLanguage: () => Promise =
typeof langSupport === 'string'
? (await import(langSupport)).default
@@ -85,10 +76,10 @@ export const createEditor = async (options: EditorOptions): Promise
return loadLanguage();
};
- const mapLanguage = (lang: Language) => {
- if (lang.startsWith('vue')) return 'vue';
- if (lang.startsWith('svelte')) return 'svelte';
- if (lang === 'liquid') return 'liquid';
+ const mapLanguage = (lang: Language | undefined) => {
+ if (!lang) return 'html';
+ if (editorId.endsWith('.ts')) return 'typescript';
+ if (editorId.endsWith('.js')) return 'javascript';
return options.mapLanguage?.(lang, 'codemirror') || lang;
};
@@ -108,7 +99,6 @@ export const createEditor = async (options: EditorOptions): Promise
};
const getActiveTheme = () => themes[theme] || themes[defaultThemes[options.theme]] || [];
- let language = options.language;
let mappedLanguage = mapLanguage(language);
let mappedLanguageSupport = await getLanguageSupport(mappedLanguage);
let theme: CodemirrorTheme = await loadTheme(options.theme, options.editorTheme);
@@ -176,7 +166,7 @@ export const createEditor = async (options: EditorOptions): Promise
mappedLanguage === 'typescript' && !ext?.endsWith('ts') && !ext?.endsWith('tsx')
? ext + '.tsx'
: ext;
- const path = `/${editorId}.${random}.${extension}`;
+ const path = editorId.includes('.') ? `/${editorId}` : `/${editorId}.${random}.${extension}`;
codemirrorTS = codemirrorTS || [
tsFacetWorker.of({ worker: tsWorker, path }),
@@ -340,6 +330,14 @@ export const createEditor = async (options: EditorOptions): Promise
showEditorMode(options.editorMode);
const getEditorId = () => editorId;
+ const setEditorId = (filename: string, lang?: Language) => {
+ editorId = filename;
+ const newLang = lang || getFileLanguage(filename, {});
+ if (newLang && newLang !== language) {
+ setLanguage(newLang);
+ }
+ tsLoaded.then(() => loadTS(true));
+ };
const getValue = () => view.state.doc.toString();
const setValue = (value = '', newState = true) => {
if (newState) {
@@ -357,6 +355,7 @@ export const createEditor = async (options: EditorOptions): Promise
const focus = () => view.focus();
const getLanguage = () => language;
const setLanguage = (lang: Language, value?: string) => {
+ if (!lang) return;
language = lang;
mappedLanguage = mapLanguage(language);
getLanguageSupport(mappedLanguage).then((langSupport) => {
@@ -365,9 +364,7 @@ export const createEditor = async (options: EditorOptions): Promise
effects: [languageExtension.reconfigure(mappedLanguageSupport)],
});
});
- tsLoaded.then(() => {
- loadTS(true);
- });
+ tsLoaded.then(() => loadTS(true));
if (value != null) {
setValue(value);
}
@@ -559,6 +556,7 @@ export const createEditor = async (options: EditorOptions): Promise
getLanguage,
setLanguage,
getEditorId,
+ setEditorId,
focus,
getPosition,
setPosition,
diff --git a/src/livecodes/editor/codemirror/editor-languages.ts b/src/livecodes/editor/codemirror/editor-languages.ts
deleted file mode 100644
index b921ceb36b..0000000000
--- a/src/livecodes/editor/codemirror/editor-languages.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/* eslint-disable import/no-unresolved */
-// @ts-ignore
-import type { LanguageSupport } from '@codemirror/language';
-// @ts-ignore
-import { json } from '@codemirror/lang-json';
-
-import type { Language } from '../../models';
-
-export const editorLanguages: Partial<{ [key in Language]: () => Promise }> = {
- json: async () => json(),
-};
diff --git a/src/livecodes/editor/create-editor.ts b/src/livecodes/editor/create-editor.ts
index 5fa27664b0..85dffde055 100644
--- a/src/livecodes/editor/create-editor.ts
+++ b/src/livecodes/editor/create-editor.ts
@@ -1,5 +1,7 @@
+import { getFileLanguage } from '../languages/utils';
import type { CodeEditor, Config, EditorOptions } from '../models';
import { isMobile, loadStylesheet } from '../utils';
+import { createBinaryFileEditor } from './binary-file-editor';
import { createFakeEditor } from './fake-editor';
import { fonts } from './fonts';
@@ -30,21 +32,23 @@ const selectEditor = (options: EditorOptions & { activeEditor?: Config['activeEd
const { editor, mode, editorId, activeEditor, isLite, isHeadless } = options;
const auto = isMobile() ? 'codemirror' : 'monaco';
return (
- (isHeadless
- ? 'fake'
- : mode === 'result' && editorId !== 'console' && editorId !== 'compiled'
+ (getFileLanguage(editorId, {}) === 'binary'
+ ? 'binary'
+ : isHeadless
? 'fake'
- : mode === 'simple' && editorId !== activeEditor
+ : mode === 'result' && editorId !== 'console' && editorId !== 'compiled'
? 'fake'
- : ['codemirror', 'monaco', 'codejar'].includes(editor || '')
- ? editor
- : editor === 'auto'
- ? auto
- : mode === 'simple' && editorId === activeEditor
- ? 'codemirror'
- : mode === 'codeblock' || isLite
- ? 'codejar'
- : auto) || 'monaco'
+ : mode === 'simple' && editorId !== activeEditor
+ ? 'fake'
+ : ['codemirror', 'monaco', 'codejar'].includes(editor || '')
+ ? editor
+ : editor === 'auto'
+ ? auto
+ : mode === 'simple' && editorId === activeEditor
+ ? 'codemirror'
+ : mode === 'codeblock' || isLite
+ ? 'codejar'
+ : auto) || 'monaco'
);
};
@@ -93,9 +97,11 @@ export const createEditor = async (
if (!options) throw new Error();
const editorOptions = getEditorOptions(options);
+ if (!options.language) return createFakeEditor(editorOptions);
const editorName = selectEditor(editorOptions);
if (editorName === 'fake') return createFakeEditor(editorOptions);
+ if (editorName === 'binary') return createBinaryFileEditor(editorOptions);
if (editorOptions.fontFamily) {
loadFont(editorOptions.fontFamily);
diff --git a/src/livecodes/editor/fake-editor.ts b/src/livecodes/editor/fake-editor.ts
index ef354afcf3..862a6ffbd4 100644
--- a/src/livecodes/editor/fake-editor.ts
+++ b/src/livecodes/editor/fake-editor.ts
@@ -1,9 +1,8 @@
-import { getLanguageEditorId } from '../languages';
+import { getFileLanguage } from '../languages';
import type { CodeEditor, EditorOptions } from '../models';
export const createFakeEditor = (options: EditorOptions): CodeEditor => {
- let value = options.value;
- let language = options.language;
+ let { value, language, editorId } = options;
return {
getValue: () => value,
setValue: (v = '') => {
@@ -16,7 +15,11 @@ export const createFakeEditor = (options: EditorOptions): CodeEditor => {
value = v;
}
},
- getEditorId: () => getLanguageEditorId(language) || 'markup',
+ getEditorId: () => editorId,
+ setEditorId: (fileName) => {
+ editorId = fileName;
+ language = getFileLanguage(fileName, {}) || language;
+ },
focus: () => undefined,
getPosition: () => ({ lineNumber: 1, column: 1 }),
setPosition: () => undefined,
diff --git a/src/livecodes/editor/monaco/monaco-languages.ts b/src/livecodes/editor/monaco/monaco-languages.ts
new file mode 100644
index 0000000000..5135d08be5
--- /dev/null
+++ b/src/livecodes/editor/monaco/monaco-languages.ts
@@ -0,0 +1,38 @@
+import type * as Monaco from 'monaco-editor';
+
+import type { Language } from '../../models';
+import { monacoLanguagesBaseUrl } from '../../vendors';
+
+export interface CustomLanguageDefinition {
+ config?: Monaco.languages.LanguageConfiguration;
+ tokens?: Monaco.languages.IMonarchLanguage;
+ completions?: Monaco.languages.CompletionItemProvider;
+ definitions?: Monaco.languages.DefinitionProvider;
+ init?: (monaco: typeof Monaco) => void;
+}
+
+export const customLanguages: Partial> = {
+ astro: monacoLanguagesBaseUrl + 'astro.js',
+ clio: monacoLanguagesBaseUrl + 'clio.js',
+ imba: monacoLanguagesBaseUrl + 'imba.js',
+ json5: monacoLanguagesBaseUrl + 'json5.js',
+ minizinc: monacoLanguagesBaseUrl + 'minizinc.js',
+ prolog: monacoLanguagesBaseUrl + 'prolog.js',
+ // sql: monacoLanguagesBaseUrl + 'sql.js', // TODO: add autocomplete
+ vue: monacoLanguagesBaseUrl + 'vue.js',
+ svelte: monacoLanguagesBaseUrl + 'svelte.js',
+ wat: monacoLanguagesBaseUrl + 'wat.js',
+
+ dotenv: {
+ config: { comments: { lineComment: '#' } },
+ tokens: {
+ tokenizer: {
+ root: [
+ [/#.*$/, 'comment'],
+ [/([a-zA-Z_][a-zA-Z0-9_]*)(=)([^#]*)(#.*)$/, ['key', 'delimiter', 'value', 'comment']],
+ [/([a-zA-Z_][a-zA-Z0-9_]*)(=)(.*)$/, ['key', 'delimiter', 'value']],
+ ],
+ },
+ },
+ },
+};
diff --git a/src/livecodes/editor/monaco/monaco.ts b/src/livecodes/editor/monaco/monaco.ts
index 473e0dc253..d289b73078 100644
--- a/src/livecodes/editor/monaco/monaco.ts
+++ b/src/livecodes/editor/monaco/monaco.ts
@@ -1,8 +1,9 @@
import type * as Monaco from 'monaco-editor';
-import { getEditorModeNode } from '../../UI/selectors';
+import { getEditorModeNode, getEditorTab } from '../../UI/selectors';
import { getImports } from '../../compiler/import-map';
import { getLanguageSpecs, hasJsx } from '../../languages';
+import { getFileLanguage } from '../../languages/utils';
import type {
APIError,
CodeEditor,
@@ -52,14 +53,20 @@ export const createEditor = async (options: EditorOptions): Promise
editorTheme,
isEmbed,
getLanguageExtension,
- mapLanguage,
getFormatterConfig,
getFontFamily,
} = options;
- let language = options.language;
+ let { editorId, language } = options;
if (!container) throw new Error('editor container not found');
+ const mapLanguage = (lang: Language | undefined) => {
+ if (!lang) return 'html';
+ if (editorId.endsWith('.ts')) return 'typescript';
+ if (editorId.endsWith('.js')) return 'javascript';
+ return options.mapLanguage?.(lang, 'monaco') || lang;
+ };
+
const loadMonaco = () => import(monacoBaseUrl + 'monaco.js');
let editorMode: any | undefined;
@@ -186,7 +193,6 @@ export const createEditor = async (options: EditorOptions): Promise
...consoleOptions,
};
- const editorId = options.editorId;
const initOptions =
editorId === 'console'
? consoleOptions
@@ -202,10 +208,7 @@ export const createEditor = async (options: EditorOptions): Promise
const configureTypeScriptFeatures = () => {
const JSLangs = ['javascript', 'jsx', 'react', 'flow', 'solid', 'react-native'];
const isJSLang = JSLangs.includes(language);
- if (
- !['script', 'tests', 'editorSettings'].includes(editorId) ||
- !['javascript', 'typescript'].includes(mapLanguage(language, 'monaco'))
- ) {
+ if (!['javascript', 'typescript'].includes(mapLanguage(language))) {
return;
}
@@ -257,7 +260,7 @@ export const createEditor = async (options: EditorOptions): Promise
const getOrCreateModel = (value: string, lang: string | undefined, uri: Monaco.Uri) => {
const model = monaco.editor.getModel(uri);
if (model) {
- if (model.getLanguageId() === mapLanguage(lang as Language, 'monaco')) {
+ if (model.getLanguageId() === mapLanguage(lang as Language)) {
model.setValue(value);
return model;
}
@@ -275,20 +278,14 @@ export const createEditor = async (options: EditorOptions): Promise
const random = getRandomString();
const ext = getLanguageExtension(language);
const extension =
- mapLanguage(language, 'monaco') === 'typescript' &&
- !ext?.endsWith('ts') &&
- !ext?.endsWith('tsx')
+ mapLanguage(language) === 'typescript' && !ext?.endsWith('ts') && !ext?.endsWith('tsx')
? ext + '.tsx'
: ext;
modelUri = editorId.includes('.')
? `file:///${editorId}`
: `file:///${editorId}.${random}.${extension}`;
const oldModel = editor.getModel();
- const model = getOrCreateModel(
- value || '',
- mapLanguage(language, 'monaco'),
- monaco.Uri.parse(modelUri),
- );
+ const model = getOrCreateModel(value || '', mapLanguage(language), monaco.Uri.parse(modelUri));
editor.setModel(model);
setTimeout(() => oldModel?.dispose(), 1000); // avoid race https://github.com/microsoft/monaco-editor/issues/1715
updateListeners();
@@ -297,9 +294,9 @@ export const createEditor = async (options: EditorOptions): Promise
const editor = monaco.editor.create(container, {
...editorOptions,
- language: mapLanguage(language, 'monaco'),
+ language: mapLanguage(language),
});
- setModel(editor, options.value, mapLanguage(language, 'monaco'));
+ setModel(editor, options.value, mapLanguage(language));
if (editorId.includes('.')) {
editors.push(editor);
@@ -317,6 +314,11 @@ export const createEditor = async (options: EditorOptions): Promise
}
const getEditorId = () => editorId;
+ const setEditorId = (filename: string, lang?: Language) => {
+ editorId = filename;
+ language = lang || getFileLanguage(filename, {}) || language;
+ setModel(editor, editor.getValue(), language);
+ };
const getValue = () => editor.getValue();
const setValue = (value = '') => {
editor.getModel()?.setValue(value);
@@ -504,7 +506,7 @@ export const createEditor = async (options: EditorOptions): Promise
const registerFormatter = (formatFn: FormatFn | undefined) => {
if (!formatFn) return;
- monaco.languages.registerDocumentFormattingEditProvider(mapLanguage(language, 'monaco'), {
+ monaco.languages.registerDocumentFormattingEditProvider(mapLanguage(language), {
provideDocumentFormattingEdits: async (model) => {
if (!model || model.isDisposed()) return [];
const val = model.getValue() || '';
@@ -681,8 +683,8 @@ export const createEditor = async (options: EditorOptions): Promise
const model = editor.getModel();
if (
!model ||
- !addCloseLanguages.includes(mapLanguage(language, 'monaco')) ||
- (mapLanguage(language, 'monaco') === 'typescript' && !hasJsx(language)) || // avoid autocompleting TS generics
+ !addCloseLanguages.includes(mapLanguage(language)) ||
+ (mapLanguage(language) === 'typescript' && !hasJsx(language)) || // avoid autocompleting TS generics
editorOptions.autoClosingBrackets === 'never'
) {
return;
@@ -871,8 +873,8 @@ export const createEditor = async (options: EditorOptions): Promise
const targetEditorId = resource.path.slice(1); // remove leading slash
if (targetEditorId) {
- // const targetEditorTab = getEditorTab(targetEditorId);
- // targetEditorTab?.click();
+ const targetEditorTab = getEditorTab(targetEditorId);
+ targetEditorTab?.click();
if (monaco.Range.isIRange(selectionOrPosition)) {
targetEditor?.revealRangeInCenterIfOutsideViewport(
@@ -908,6 +910,7 @@ export const createEditor = async (options: EditorOptions): Promise
getLanguage,
setLanguage,
getEditorId,
+ setEditorId,
focus,
getPosition,
setPosition,
diff --git a/src/livecodes/export/export-src.ts b/src/livecodes/export/export-src.ts
index 7e4c085ff0..4159d01a91 100644
--- a/src/livecodes/export/export-src.ts
+++ b/src/livecodes/export/export-src.ts
@@ -1,4 +1,4 @@
-import type { getLanguageExtension as getLanguageExtensionFn } from '../languages';
+import { getFileLanguage, type getLanguageExtension as getLanguageExtensionFn } from '../languages';
import type { Config, EditorId } from '../models';
import { downloadFile, loadScript } from '../utils/utils';
import { jsZipUrl } from '../vendors';
@@ -22,7 +22,12 @@ export const exportSrc = async (
const files = getFilesFromConfig(config, deps);
(Object.keys(files) as EditorId[]).forEach((filename) => {
- zip.file(filename, files[filename]?.content);
+ const content = files[filename]?.content || '';
+ if (getFileLanguage(filename, config) === 'binary') {
+ zip.file(filename, content.split('base64,')[1] || '', { base64: true });
+ } else {
+ zip.file(filename, content);
+ }
});
zip.file('result.html', html);
zip.file('livecodes.json', JSON.stringify(config, null, 2));
diff --git a/src/livecodes/export/utils.ts b/src/livecodes/export/utils.ts
index b08352c5f6..32e516246e 100644
--- a/src/livecodes/export/utils.ts
+++ b/src/livecodes/export/utils.ts
@@ -1,4 +1,5 @@
import { replaceImports } from '../compiler/import-map';
+import { getSource, isEditorId } from '../config/utils';
import type {
getLanguageCompiler as getLanguageCompilerFn,
getLanguageExtension as getLanguageExtensionFn,
@@ -22,16 +23,28 @@ export const getFilesFromConfig = (
style: 'style',
script: 'script',
};
- const codeFiles = (Object.keys(filenames) as EditorId[]).reduce((files, editorId) => {
- const filename = filenames[editorId];
- const language = config[editorId].language;
- const extension = getLanguageExtension?.(language) || 'md';
- const content = config[editorId].content || '';
- return {
- ...files,
- ...(content ? { [filename + '.' + extension]: { content } } : {}),
- };
- }, {});
+ const codeFiles =
+ config.files.length > 0
+ ? config.files.reduce(
+ (files, file) => ({
+ ...files,
+ [file.filename]: { content: file.content },
+ }),
+ {},
+ )
+ : (Object.keys(filenames) as EditorId[]).reduce((files, editorId) => {
+ if (!isEditorId(editorId)) {
+ return files;
+ }
+ const filename = filenames[editorId];
+ const language = config[editorId].language;
+ const extension = getLanguageExtension?.(language) || 'md';
+ const content = config[editorId].content || '';
+ return {
+ ...files,
+ ...(content ? { [filename + '.' + extension]: { content } } : {}),
+ };
+ }, {});
const externalStyles =
config.stylesheets.length > 0
@@ -106,10 +119,10 @@ export const getCompilerScripts = ({
supportedLanguages: { [key in EditorId]: Language[] };
getLanguageCompiler: typeof getLanguageCompilerFn;
}) => {
- if (supportedLanguages[editorId].includes(config[editorId].language)) return [];
- const compilerScripts = getLanguageCompiler?.(config[editorId].language)?.scripts;
- const compiledCode =
- config[editorId].language === 'python' ? config[editorId].content || '' : compiled[editorId];
+ const src = getSource(editorId, config);
+ if (!src || supportedLanguages[editorId].includes(src.language)) return [];
+ const compilerScripts = getLanguageCompiler?.(src.language)?.scripts;
+ const compiledCode = src.language === 'python' ? src.content || '' : compiled[editorId];
const scripts =
typeof compilerScripts === 'function'
? compilerScripts({ compiled: compiledCode, baseUrl, config })
@@ -126,7 +139,7 @@ export const getContent = ({
}: {
editorId: EditorId;
config: Config;
- compiled: { [key in EditorId]: string };
+ compiled: Partial<{ [key in EditorId]: string }>;
supportedLanguages: { [key in EditorId]: Language[] };
getLanguageCompiler: typeof getLanguageCompilerFn;
}) => {
@@ -137,19 +150,23 @@ export const getContent = ({
const content = {
markup: ['html', ...supportedLanguages.markup].includes(config.markup.language)
? config.markup.content
- : compiled.markup,
+ : compiled.markup || '',
style: ['css', ...supportedLanguages.style].includes(config.style.language)
? config.style.content
- : compiled.style,
+ : compiled.style || '',
script:
config.script.language === 'php'
? config.script.content?.replace(/<\?php/g, '') || ''
: config.script.language === 'python'
? config.script.content
: replaceImports(
- (isScriptSupported ? config.script.content : compiled.script) || '',
+ (isScriptSupported ? config.script.content : compiled.script || '') || '',
config,
),
+ files: config.files.map((file) => ({
+ ...file,
+ content: replaceImports(file.content, config),
+ })),
};
const scriptType = getLanguageCompiler?.(config.script.language)?.scriptType;
@@ -171,5 +188,5 @@ ${escapeScript(content.script || '')}
return '';
}
}
- return content[editorId] || '';
+ return getSource(editorId, content as any)?.content || '';
};
diff --git a/src/livecodes/handlers/keyboard-shortcuts.ts b/src/livecodes/handlers/keyboard-shortcuts.ts
index 0164d7fb28..1c0923a40e 100644
--- a/src/livecodes/handlers/keyboard-shortcuts.ts
+++ b/src/livecodes/handlers/keyboard-shortcuts.ts
@@ -1,5 +1,6 @@
import type { createSplitPanes } from '../UI';
import * as UI from '../UI/selectors';
+import { getSource } from '../config/utils';
import type { CodeEditor, Config, EditorId, EventsManager, ToolsPane } from '../models';
import { ctrl } from '../utils';
@@ -8,7 +9,7 @@ import { ctrl } from '../utils';
*/
export interface KeyboardShortcutDeps {
eventsManager: EventsManager;
- getActiveEditor: () => CodeEditor;
+ getActiveEditor: () => CodeEditor | undefined;
getConfig: () => Config;
showEditor: (editorId: EditorId) => void;
run: () => Promise;
@@ -27,7 +28,7 @@ let lastkeys = '';
*/
const createCommandPaletteHandler = (deps: KeyboardShortcutDeps) => (e: KeyboardEvent) => {
const activeEditor = deps.getActiveEditor();
- if (ctrl(e) && e.code === 'KeyP' && activeEditor.monaco) {
+ if (ctrl(e) && e.code === 'KeyP' && activeEditor?.monaco) {
e.preventDefault();
activeEditor.monaco.trigger('anyString', 'editor.action.quickCommand');
lastkeys = 'Ctrl + P';
@@ -108,7 +109,7 @@ const createZoomToggleHandler = () => (e: KeyboardEvent) => {
const createFocusEditorHandler = (deps: KeyboardShortcutDeps) => (e: KeyboardEvent) => {
if (ctrl(e) && e.altKey && e.code === 'KeyE') {
e.preventDefault();
- deps.getActiveEditor().focus();
+ deps.getActiveEditor()?.focus();
lastkeys = 'Ctrl + Alt + E';
return true;
}
@@ -152,25 +153,26 @@ const createEscapeHandler = (deps: KeyboardShortcutDeps) => (e: KeyboardEvent) =
// Ctrl + Alt + (1-3) activates editor 1-3
// Ctrl + Alt + (ArrowLeft/ArrowRight) activates previous/next editor
const createEditorSwitchHandler = (deps: KeyboardShortcutDeps) => (e: KeyboardEvent) => {
- if (ctrl(e) && e.altKey && ['1', '2', '3', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
- const editorIds = (['markup', 'style', 'script'] as const).filter(
- (id) => deps.getConfig()[id].hideTitle !== true,
- );
-
+ const config = deps.getConfig();
+ const editorIds = (
+ config.files.length
+ ? config.files.map((f) => f.filename)
+ : (['markup', 'style', 'script'] as EditorId[])
+ ).filter((id) => getSource(id, config)?.hidden !== true);
+ const editorNumbers = editorIds.map((_, id) => String(id + 1));
+
+ if (ctrl(e) && e.altKey && [...editorNumbers, 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
e.preventDefault();
deps.split?.show('code');
-
- const index = ['1', '2', '3'].includes(e.key)
+ const index = editorNumbers.includes(e.key)
? Number(e.key) - 1
: e.key === 'ArrowLeft'
- ? editorIds.findIndex((id) => id === deps.getConfig().activeEditor) - 1 || 0
+ ? editorIds.findIndex((id) => id === config.activeEditor) - 1 || 0
: e.key === 'ArrowRight'
- ? editorIds.findIndex((id) => id === deps.getConfig().activeEditor) + 1 || 0
+ ? editorIds.findIndex((id) => id === config.activeEditor) + 1 || 0
: 0;
-
const editorIndex =
index === editorIds.length ? 0 : index === -1 ? editorIds.length - 1 : index;
-
deps.showEditor(editorIds[editorIndex]);
lastkeys = 'Ctrl + Alt + ' + e.key;
return true;
diff --git a/src/livecodes/html/app.html b/src/livecodes/html/app.html
index b342695951..a5310a1643 100644
--- a/src/livecodes/html/app.html
+++ b/src/livecodes/html/app.html
@@ -133,7 +133,15 @@
+
+
+
+