language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-09-29 13:24:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Fix biome formatting with codemirror JS

Browse source
This commit is contained in:
Simon Hausmann 2024-10-14 16:45:41 +02:00 • committed by Simon Hausmann
parent 3b9a2027f7
commit 84aabae54d
2 changed files with 107 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

155
docs/editor/codemirror.js
View file

@ -1,28 +1,59 @@
// Copyright © SixtyFPS GmbH <info@slint.dev> // Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import { EditorState } from '@codemirror/state'; import { EditorState } from "@codemirror/state";
import { highlightSelectionMatches } from '@codemirror/search'; import { highlightSelectionMatches } from "@codemirror/search";
import { indentWithTab, history, defaultKeymap, historyKeymap } from '@codemirror/commands'; import {
import { foldGutter, indentOnInput, indentUnit, bracketMatching, foldKeymap, syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language'; indentWithTab,
import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete'; history,
import { lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap, EditorView, showPanel } from '@codemirror/view'; defaultKeymap,
historyKeymap,
} from "@codemirror/commands";
import {
foldGutter,
indentOnInput,
indentUnit,
bracketMatching,
foldKeymap,
syntaxHighlighting,
defaultHighlightStyle,
} from "@codemirror/language";
import {
closeBrackets,
autocompletion,
closeBracketsKeymap,
completionKeymap,
} from "@codemirror/autocomplete";
import {
lineNumbers,
highlightActiveLineGutter,
highlightSpecialChars,
drawSelection,
dropCursor,
rectangularSelection,
crosshairCursor,
highlightActiveLine,
keymap,
EditorView,
showPanel,
} from "@codemirror/view";
// Theme // Theme
import { dracula } from '@uiw/codemirror-theme-dracula'; import { dracula } from "@uiw/codemirror-theme-dracula";
// Language // Language
import { javascript } from '@codemirror/lang-javascript'; import { javascript } from "@codemirror/lang-javascript";
import { python } from '@codemirror/lang-python'; import { python } from "@codemirror/lang-python";
import { rust } from '@codemirror/lang-rust'; import { rust } from "@codemirror/lang-rust";
import { cpp } from '@codemirror/lang-cpp'; import { cpp } from "@codemirror/lang-cpp";
import { languageNameFacet } from './language-facets'; import { languageNameFacet } from "./language-facets";
const editor_url = "https://snapshots.slint.dev/master/editor/"; const editor_url = "https://snapshots.slint.dev/master/editor/";
const wasm_url = "https://snapshots.slint.dev/master/wasm-interpreter/slint_wasm_interpreter.js"; const wasm_url =
"https://snapshots.slint.dev/master/wasm-interpreter/slint_wasm_interpreter.js";
let slint_wasm_module = null; let slint_wasm_module = null;
// keep them alive // keep them alive
var all_instances = new Array; var all_instances = new Array();
// Function to create the Copy button and add it to the panel // Function to create the Copy button and add it to the panel
function createCopyButton(view) { function createCopyButton(view) {
@ -37,11 +68,14 @@ function createCopyButton(view) {
button.onclick = () => { button.onclick = () => {
const content = view.state.doc.toString(); const content = view.state.doc.toString();
navigator.clipboard.writeText(content).then(() => { navigator.clipboard.writeText(content).then(
alert("Content copied to clipboard!"); () => {
}, (err) => { alert("Content copied to clipboard!");
console.error('Could not copy text: ', err); },
}); (err) => {
console.error("Could not copy text: ", err);
},
);
}; };
return button; return button;
@ -58,7 +92,10 @@ function createRunButton(view) {
button.onclick = () => { button.onclick = () => {
const content = view.state.doc.toString(); const content = view.state.doc.toString();
window.open(`${editor_url}?snippet=${encodeURIComponent(content)}`, "_blank"); window.open(
`${editor_url}?snippet=${encodeURIComponent(content)}`,
"_blank",
);
}; };
return button; return button;
@ -97,14 +134,17 @@ function debounce(func, wait) {
} }
async function updateWasmPreview(previewContainer, content) { async function updateWasmPreview(previewContainer, content) {
const { component, error_string } =
const { component, error_string } = await slint_wasm_module.compile_from_string(content, ""); await slint_wasm_module.compile_from_string(content, "");
var error_div = previewContainer.parentNode.querySelector(".error-status"); var error_div = previewContainer.parentNode.querySelector(".error-status");
if (error_string !== "") { if (error_string !== "") {
var text = document.createTextNode(error_string); var text = document.createTextNode(error_string);
var p = document.createElement('pre'); var p = document.createElement("pre");
p.appendChild(text); p.appendChild(text);
error_div.innerHTML = "<pre style='color: red; background-color:#fee; margin:0'>" + p.innerHTML + "</pre>"; error_div.innerHTML =
"<pre style='color: red; background-color:#fee; margin:0'>" +
p.innerHTML +
"</pre>";
} else { } else {
error_div.innerHTML = ""; error_div.innerHTML = "";
} }
@ -120,7 +160,7 @@ async function updateWasmPreview(previewContainer, content) {
const debouncedUpdateWasmPreview = debounce(updateWasmPreview, 500); const debouncedUpdateWasmPreview = debounce(updateWasmPreview, 500);
async function initializePreviewContainers(previewContainer, content) { async function initializePreviewContainers(previewContainer, content) {
const canvas_id = 'canvas_' + Math.random().toString(36).substr(2, 9); const canvas_id = "canvas_" + Math.random().toString(36).substr(2, 9);
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
canvas.id = canvas_id; canvas.id = canvas_id;
previewContainer.appendChild(canvas); previewContainer.appendChild(canvas);
@ -148,14 +188,16 @@ async function loadSlintWasmInterpreter(editor) {
return; return;
} catch (error) { } catch (error) {
console.error("Error during Slint WASM interpreter initialization:", error); console.error(
"Error during Slint WASM interpreter initialization:",
error,
);
throw error; // Re-throw error to handle it in the calling context throw error; // Re-throw error to handle it in the calling context
} }
} }
// Initialize CodeMirror based on the language passed as a data attribute // Initialize CodeMirror based on the language passed as a data attribute
window.initCodeMirror = function (editorDiv, language, content) { window.initCodeMirror = function (editorDiv, language, content) {
const editorDiv_id = editorDiv.getAttribute("id"); const editorDiv_id = editorDiv.getAttribute("id");
const extensions = [ const extensions = [
@ -186,7 +228,7 @@ window.initCodeMirror = function (editorDiv, language, content) {
syntaxHighlighting(defaultHighlightStyle, { fallback: true }), syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
languageNameFacet.of(language), languageNameFacet.of(language),
dracula, dracula,
showPanel.of(statusPanel) showPanel.of(statusPanel),
]; ];
// Get the appropriate language extension // Get the appropriate language extension
@ -194,34 +236,41 @@ window.initCodeMirror = function (editorDiv, language, content) {
let previewContainer; let previewContainer;
switch (language.toLowerCase()) { switch (language.toLowerCase()) {
case 'javascript': case "javascript":
extensions.push(javascript()); extensions.push(javascript());
break; break;
case 'python': case "python":
extensions.push(python()); extensions.push(python());
break; break;
case 'cpp': case "cpp":
extensions.push(cpp()); extensions.push(cpp());
break; break;
case 'rust': case "rust":
extensions.push(rust()); extensions.push(rust());
break; break;
case 'slint': case "slint":
isReadOnly = false; isReadOnly = false;
extensions.push(javascript()); extensions.push(javascript());
if (editorDiv.getAttribute("data-readonly") === 'true' if (
|| editorDiv.getAttribute("data-ignore") === 'true') { editorDiv.getAttribute("data-readonly") === "true" ||
editorDiv.getAttribute("data-ignore") === "true"
) {
break; break;
} }
previewContainer = document.createElement("div"); previewContainer = document.createElement("div");
previewContainer.classList.add('preview-container'); previewContainer.classList.add("preview-container");
editorDiv.classList.add('show-preview'); editorDiv.classList.add("show-preview");
extensions.push(EditorView.updateListener.of(async (editor) => { extensions.push(
if (editor.docChanged) { EditorView.updateListener.of(async (editor) => {
const newContent = editor.state.doc.toString(); if (editor.docChanged) {
debouncedUpdateWasmPreview(previewContainer, newContent); const newContent = editor.state.doc.toString();
} debouncedUpdateWasmPreview(
})); previewContainer,
newContent,
);
}
}),
);
break; break;
default: default:
} }
@ -233,7 +282,7 @@ window.initCodeMirror = function (editorDiv, language, content) {
doc: content, doc: content,
extensions: extensions, extensions: extensions,
}), }),
parent: editorDiv parent: editorDiv,
}); });
if (previewContainer) { if (previewContainer) {
@ -243,7 +292,7 @@ window.initCodeMirror = function (editorDiv, language, content) {
initializePreviewContainers(previewContainer, content); initializePreviewContainers(previewContainer, content);
updateWasmPreview(previewContainer, content); updateWasmPreview(previewContainer, content);
}) })
.catch(error => { .catch((error) => {
console.error("Error loading Slint WASM interpreter:", error); console.error("Error loading Slint WASM interpreter:", error);
}); });
} }
@ -251,10 +300,14 @@ window.initCodeMirror = function (editorDiv, language, content) {
document.addEventListener("DOMContentLoaded", async function () { document.addEventListener("DOMContentLoaded", async function () {
// Find all the divs that need a CodeMirror editor // Find all the divs that need a CodeMirror editor
document.querySelectorAll('.codemirror-editor').forEach(function (editorDiv) { document
const editorContent = editorDiv.querySelector('.codemirror-content'); .querySelectorAll(".codemirror-editor")
const language = editorDiv.getAttribute('data-lang'); .forEach(function (editorDiv) {
const content = editorContent.textContent.trim(); const editorContent = editorDiv.querySelector(
window.initCodeMirror(editorDiv, language, content); ".codemirror-content",
}); );
const language = editorDiv.getAttribute("data-lang");
const content = editorContent.textContent.trim();
window.initCodeMirror(editorDiv, language, content);
});
}); });

6
docs/editor/language-facets.js
View file

@ -1,11 +1,11 @@
// Copyright © SixtyFPS GmbH <info@slint.dev> // Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import { Facet } from '@codemirror/state'; import { Facet } from "@codemirror/state";
// Define a custom facet to hold the language name // Define a custom facet to hold the language name
export const languageNameFacet = Facet.define({ export const languageNameFacet = Facet.define({
combine(languages) { combine(languages) {
return languages.length ? languages[0] : null; // Combine to get the first language if set return languages.length ? languages[0] : null; // Combine to get the first language if set
} },
}); });