Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0d3d64e

Browse files
committed
updated css for the codemirror cm-editor
1 parent67bfff6 commit0d3d64e

File tree

1 file changed

+61
-72
lines changed

1 file changed

+61
-72
lines changed

‎pyscriptjs/src/components/pyrepl.ts

Lines changed: 61 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export class PyRepl extends BaseEvalElement {
5050

5151
// add an extra div where we can attach the codemirror editor
5252
this.editorNode=document.createElement('div');
53-
addClasses(this.editorNode,['editor-box']);
53+
addClasses(this.editorNode,["editor-box","border","border-gray-300"]);
5454
this.shadow.appendChild(this.wrapper);
5555
}
5656

@@ -64,77 +64,66 @@ export class PyRepl extends BaseEvalElement {
6464
languageConf.of(python()),
6565
keymap.of([
6666
...defaultKeymap,
67-
{key:'Ctrl-Enter',run:createCmdHandler(this)},
68-
{key:'Shift-Enter',run:createCmdHandler(this)},
69-
]),
70-
71-
// Event listener function that is called every time an user types something on this editor
72-
// EditorView.updateListener.of((v:ViewUpdate) => {
73-
// if (v.docChanged) {
74-
// console.log(v.changes);
75-
76-
// }
77-
// })
78-
];
79-
67+
{key:"Ctrl-Enter",run:createCmdHandler(this)},
68+
{key:"Shift-Enter",run:createCmdHandler(this)}
69+
]),
70+
71+
// Event listener function that is called every time an user types something on this editor
72+
// EditorView.updateListener.of((v:ViewUpdate) => {
73+
// if (v.docChanged) {
74+
// console.log(v.changes);
75+
76+
// }
77+
// })
78+
];
79+
constcustomTheme=EditorView.theme({
80+
'.cm-focused .cm-editor, .cm-editor ::selection':{outline:'0px'},
81+
'.cm-scroller':{lineHeight:2.5},
82+
'.cm-activeLine':{backgroundColor:'#fff'},
83+
'.cm-content':{padding:0,backgroundColor:'#f5f5f5'},
84+
'&.cm-focused .cm-content':{border:'1px solid #1876d2'}
85+
});
86+
8087
if(!this.hasAttribute('theme')){
81-
this.theme=this.getAttribute('theme');
82-
if(this.theme=='dark'){
83-
extensions.push(oneDarkTheme);
84-
}
88+
this.theme=this.getAttribute('theme');
89+
if(this.theme=='dark'){
90+
extensions.push(oneDarkTheme);
91+
}
92+
extensions.push(customTheme);
8593
}
86-
87-
conststartState=EditorState.create({
88-
doc:this.code.trim(),
89-
extensions:extensions,
90-
});
91-
92-
this.editor=newEditorView({
93-
state:startState,
94-
parent:this.editorNode,
95-
});
96-
97-
constmainDiv=document.createElement('div');
98-
addClasses(mainDiv,[
99-
'parentBox',
100-
'group',
101-
'flex',
102-
'flex-col',
103-
'mt-2',
104-
'border-2',
105-
'border-gray-200',
106-
'rounded-lg',
107-
'mx-8',
108-
]);
109-
// add Editor to main PyScript div
110-
111-
// Butons DIV
112-
consteDiv=document.createElement('div');
113-
addClasses(
114-
eDiv,
115-
'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(
116-
' ',
117-
),
118-
);
119-
eDiv.setAttribute('role','group');
120-
121-
// Play Button
122-
this.btnRun=document.createElement('button');
123-
this.btnRun.innerHTML=
124-
'<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>';
125-
constbuttonClasses=['mr-2','block','py-2','px-4','rounded-full'];
126-
addClasses(this.btnRun,buttonClasses);
127-
addClasses(this.btnRun,['bg-green-500']);
128-
eDiv.appendChild(this.btnRun);
129-
130-
this.btnRun.onclick=wrap(this);
131-
132-
functionwrap(el:any){
133-
asyncfunctionevaluatePython(){
134-
awaitel.evaluate();
135-
}
136-
137-
returnevaluatePython;
94+
95+
letstartState=EditorState.create({
96+
doc:this.code.trim(),
97+
extensions:extensions
98+
})
99+
100+
this.editor=newEditorView({
101+
state:startState,
102+
parent:this.editorNode
103+
})
104+
105+
letmainDiv=document.createElement('div');
106+
addClasses(mainDiv,["parentBox","group","flex","flex-col","mt-2","mx-8"])
107+
// add Editor to main PyScript div
108+
109+
// Butons DIV
110+
vareDiv=document.createElement('div');
111+
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(" "))
112+
eDiv.setAttribute("role","group");
113+
114+
// Play Button
115+
this.btnRun=document.createElement('button');
116+
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>';
117+
letbuttonClasses=["mr-2","block","py-2","px-4","rounded-full"];
118+
addClasses(this.btnRun,buttonClasses);
119+
addClasses(this.btnRun,["bg-green-500"])
120+
eDiv.appendChild(this.btnRun);
121+
122+
this.btnRun.onclick=wrap(this);
123+
124+
functionwrap(el:any){
125+
asyncfunctionevaluatePython(){
126+
el.evaluate()
138127
}
139128

140129
// Settings button
@@ -188,7 +177,7 @@ export class PyRepl extends BaseEvalElement {
188177
// In this case neither output or std-out have been provided so we need
189178
// to create a new output div to output to
190179
this.outputElement=document.createElement('div');
191-
this.outputElement.classList.add('output');
180+
this.outputElement.classList.add('output','font-mono','ml-8','mt-4','text-sm');
192181
this.outputElement.hidden=true;
193182
this.outputElement.id=this.id+'-'+this.getAttribute('exec-id');
194183

@@ -208,7 +197,7 @@ export class PyRepl extends BaseEvalElement {
208197
console.log('connected');
209198
}
210199

211-
addToOutput(s:string){
200+
addToOutput(s:string):void{
212201
this.outputElement.innerHTML+='<div>'+s+'</div>';
213202
this.outputElement.hidden=false;
214203
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp