alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

updated css for the codemirror cm-editor

Browse Source
This commit is contained in:
Princiya Sequeira
2022-04-25 13:54:11 +02:00
parent 67bfff6698
commit 0d3d64eab9
1 changed files with 58 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,7 +50,7 @@ export class PyRepl extends BaseEvalElement {
// add an extra div where we can attach the codemirror editor // add an extra div where we can attach the codemirror editor
this.editorNode = document.createElement('div'); this.editorNode = document.createElement('div');
addClasses(this.editorNode, ['editor-box']); addClasses(this.editorNode, ["editor-box", "border", "border-gray-300"]);
this.shadow.appendChild(this.wrapper); this.shadow.appendChild(this.wrapper);
} }
@@ -64,8 +64,8 @@ export class PyRepl extends BaseEvalElement {
languageConf.of(python()), languageConf.of(python()),
keymap.of([ keymap.of([
...defaultKeymap, ...defaultKeymap,
{ key: 'Ctrl-Enter', run: createCmdHandler(this) }, { key: "Ctrl-Enter", run: createCmdHandler(this) },
{ key: 'Shift-Enter', run: createCmdHandler(this) }, { key: "Shift-Enter", run: createCmdHandler(this) }
]), ]),
// Event listener function that is called every time an user types something on this editor // Event listener function that is called every time an user types something on this editor
@@ -76,65 +76,54 @@ export class PyRepl extends BaseEvalElement {
// } // }
// }) // })
]; ];
const customTheme = EditorView.theme({
'.cm-focused .cm-editor, .cm-editor ::selection': { outline: '0px' },
'.cm-scroller': { lineHeight: 2.5 },
'.cm-activeLine': { backgroundColor: '#fff' },
'.cm-content': { padding: 0, backgroundColor: '#f5f5f5' },
'&.cm-focused .cm-content': { border: '1px solid #1876d2' }
});
if (!this.hasAttribute('theme')) { if (!this.hasAttribute('theme')) {
this.theme = this.getAttribute('theme'); this.theme = this.getAttribute('theme');
if (this.theme == 'dark'){ if (this.theme == 'dark'){
extensions.push(oneDarkTheme); extensions.push(oneDarkTheme);
} }
extensions.push(customTheme);
} }
const startState = EditorState.create({ let startState = EditorState.create({
doc: this.code.trim(), doc: this.code.trim(),
extensions: extensions, extensions: extensions
}); })
this.editor = new EditorView({ this.editor = new EditorView({
state: startState, state: startState,
parent: this.editorNode, parent: this.editorNode
}); })
const mainDiv = document.createElement('div'); let mainDiv = document.createElement('div');
addClasses(mainDiv, [ addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "mx-8"])
'parentBox',
'group',
'flex',
'flex-col',
'mt-2',
'border-2',
'border-gray-200',
'rounded-lg',
'mx-8',
]);
// add Editor to main PyScript div // add Editor to main PyScript div
// Butons DIV // Butons DIV
const eDiv = document.createElement('div'); var eDiv = document.createElement('div');
addClasses( addClasses(eDiv, "buttons-box opacity-0 group-hover:opacity-100 relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group -mt-2 first-of-type:m-0".split(" "))
eDiv, eDiv.setAttribute("role", "group");
'buttons-box opacity-0 group-hover:opacity-100 relative top-0 right-0 flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group'.split(
' ',
),
);
eDiv.setAttribute('role', 'group');
// Play Button // Play Button
this.btnRun = document.createElement('button'); this.btnRun = document.createElement('button');
this.btnRun.innerHTML = this.btnRun.innerHTML = '<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
'<svg id="" class="svelte-fa svelte-ps5qeg" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>'; let buttonClasses = ["mr-2", "block", "py-2", "px-4", "rounded-full"];
const buttonClasses = ['mr-2', 'block', 'py-2', 'px-4', 'rounded-full'];
addClasses(this.btnRun, buttonClasses); addClasses(this.btnRun, buttonClasses);
addClasses(this.btnRun, ['bg-green-500']); addClasses(this.btnRun, ["bg-green-500"])
eDiv.appendChild(this.btnRun); eDiv.appendChild(this.btnRun);
this.btnRun.onclick = wrap(this); this.btnRun.onclick = wrap(this);
function wrap(el: any){ function wrap(el: any){
async function evaluatePython() { async function evaluatePython() {
await el.evaluate(); el.evaluate()
}
return evaluatePython;
} }
// Settings button // Settings button
@@ -188,7 +177,7 @@ export class PyRepl extends BaseEvalElement {
// In this case neither output or std-out have been provided so we need // In this case neither output or std-out have been provided so we need
// to create a new output div to output to // to create a new output div to output to
this.outputElement = document.createElement('div'); this.outputElement = document.createElement('div');
this.outputElement.classList.add('output'); this.outputElement.classList.add('output', 'font-mono', 'ml-8', 'mt-4','text-sm');
this.outputElement.hidden = true; this.outputElement.hidden = true;
this.outputElement.id = this.id + '-' + this.getAttribute('exec-id'); this.outputElement.id = this.id + '-' + this.getAttribute('exec-id');
@@ -208,7 +197,7 @@ export class PyRepl extends BaseEvalElement {
console.log('connected'); console.log('connected');
} }
addToOutput(s: string) { addToOutput(s: string): void {
this.outputElement.innerHTML += '<div>' + s + '</div>'; this.outputElement.innerHTML += '<div>' + s + '</div>';
this.outputElement.hidden = false; this.outputElement.hidden = false;
} }