jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-20 02:37:41 -05:00
Code Issues Projects Releases Wiki Activity

Fix #1445 - Move the EditorView into ShadowDOM (#1449)

Browse Source
This commit is contained in:
Andrea Giammarchi
2023-05-05 10:41:05 +02:00
committed by GitHub
parent ee345a5206
commit 5086c23d47
2 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
pyscriptjs/src/components/pyrepl.ts
View File

@@ -48,9 +48,12 @@ export function make_PyRepl(interpreter: InterpreterClient, app: PyScriptApp) {
const pySrc = htmlDecode(this.innerHTML).trim();
this.innerHTML = '';
this.editor = this.makeEditor(pySrc);
const boxDiv = this.makeBoxDiv();
const shadowRoot = $('.py-repl-editor > div', boxDiv).attachShadow({ mode: 'open' });
// avoid inheriting styles from the outer component
shadowRoot.innerHTML = `<style> :host { all: initial; }</style>`;
this.appendChild(boxDiv);
this.editor = this.makeEditor(pySrc, shadowRoot);
this.editor.focus();
logger.debug(`element ${this.id} successfully connected`);
}
@@ -80,7 +83,7 @@ export function make_PyRepl(interpreter: InterpreterClient, app: PyScriptApp) {
if (!response.ok) {
return;
}
const cmcontentElement = $('div[class="cm-content"]', this);
const cmcontentElement = $('div.cm-content', this.editor.dom);
const { lastElementChild } = cmcontentElement;
cmcontentElement.replaceChildren(lastElementChild);
lastElementChild.textContent = await response.text();
@@ -93,7 +96,7 @@ export function make_PyRepl(interpreter: InterpreterClient, app: PyScriptApp) {
/** Create and configure the codemirror editor
*/
makeEditor(pySrc: string): EditorView {
makeEditor(pySrc: string, parent: ShadowRoot): EditorView {
const languageConf = new Compartment();
const extensions = [
indentUnit.of(' '),
@@ -113,6 +116,7 @@ export function make_PyRepl(interpreter: InterpreterClient, app: PyScriptApp) {
return new EditorView({
doc: pySrc,
extensions,
parent,
});
}
@@ -138,10 +142,16 @@ export function make_PyRepl(interpreter: InterpreterClient, app: PyScriptApp) {
const editorDiv = document.createElement('div');
editorDiv.className = 'py-repl-editor';
editorDiv.setAttribute('aria-label', 'Python Script Area');
editorDiv.appendChild(this.editor.dom);
const runButton = this.makeRunButton();
editorDiv.appendChild(runButton);
const editorShadowContainer = document.createElement('div');
// avoid outer elements intercepting key events (reveal as example)
editorShadowContainer.addEventListener('keydown', event => {
event.stopPropagation();
});
editorDiv.append(editorShadowContainer, runButton);
return editorDiv;
}