ziko 0.0.17 → 0.0.19

package/src/ui/elements/derived/code-note/SubElements.js.txt

@@ -1,105 +1,105 @@
-import { html } from "../../../Misc";
-import { Flex } from "../../Flex";
-import { text } from "../../../Text";
-import { ZikoUICodeNote } from "./CodeNote";
-import {EditorView, basicSetup} from "codemirror"
-import {javascript} from "@codemirror/lang-javascript"
-import {keymap} from "@codemirror/view"
-import {indentWithTab} from "@codemirror/commands"
-import { style } from "../../../Utils";
-
-// const Input=(codeText="")=>html("code",codeText).style({
-//     width:"100%",
-//     height:"auto",
-//     padding:"10px",
-//     boxSizing:"border-box",
-//     border: "1px solid #ccc", 
-//     outline: "none",
-//     fontSize: "1rem", 
-//     fontFamily: "Lucida Console, Courier New, monospace", 
-//     padding: "1rem 0.5rem", 
-//     wordBreak:"break-all",
-//     background:"#f6f8fa",
-//     color:"#0062C3"
-// }).setAttr("contenteditable",true).setAttr("spellcheck",false);
-
-const Input = (codeText = "") => {
-    // Create the code element with styles
-    const inputElement = html("code", codeText)
-    .style({
-        // width: "100%",
-        // height: "auto",
-        // padding: "10px",
-        // boxSizing: "border-box",
-        // border: "1px solid #ccc",
-        outline: "none",
-        fontSize: "1rem",
-        fontFamily: "Lucida Console, Courier New, monospace",
-        // padding: "1rem 0.5rem",
-        // wordBreak: "break-all",
-        // background: "#f6f8fa",
-        // color: "#0062C3",
-    })
-    // .setAttr("contenteditable", true).setAttr("spellcheck", false);
-
-    // Initialize CodeMirror editor view on the created element
-    let editor=new EditorView({
-        extensions: [
-            basicSetup, 
-            javascript(),
-            keymap.of([indentWithTab])
-        ],
-        parent: inputElement.element // Use the element for CodeMirror's parent
-    });
-    window.editor = editor
-    // Return the element to be used elsewhere
-    return inputElement;
-};
-
-
-const Output=()=>html("output").style({
-    width:"100%",
-    height:"auto",
-    padding:"5px 0",
-})
-const Left=(ctx)=>Flex(
-    text("[ ]")
-    ).style({
-        width:"50px",
-        //height:getComputedStyle(ctx.Input.element).height,
-        height:"50px",
-        margin:"10px 4px",
-        padding:"5px",
-        color:"darkblue",
-        borderBottom:"4px solid gold",
-    }).horizontal(0,0);
-const BTN_STYLE={
-    background:"none",
-    width:"25px",
-    height:"25px",
-    fontSize:"1.2rem",
-    cursor:"pointer"
-}
-const Right=(ctx)=>Flex(
-    text('▶️').style(BTN_STYLE).onClick(e=>{
-        if(ctx.parent instanceof ZikoUICodeNote)ctx.parent.setCurrentNote(ctx);
-        ctx.execute();
-        globalThis.__Ziko__.__Config__.default.target=e.target.parent.parent[1][1];
-    }),
-    text('📋').style(BTN_STYLE).onClick(()=>{
-        navigator.clipboard.writeText(ctx.codeText)
-    }),
-    text('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
-    text('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
-).style({
-    width:"70px",
-    height:"50px",
-    //background:"cyan",
-    margin:"10px 0"
-}).horizontal(0,0).wrap(true);
-export{
-    Input,
-    Output,
-    Right,
-    Left
+import { html } from "../../../Misc";
+import { Flex } from "../../Flex";
+import { text } from "../../../Text";
+import { ZikoUICodeNote } from "./CodeNote";
+import {EditorView, basicSetup} from "codemirror"
+import {javascript} from "@codemirror/lang-javascript"
+import {keymap} from "@codemirror/view"
+import {indentWithTab} from "@codemirror/commands"
+import { style } from "../../../Utils";
+
+// const Input=(codeText="")=>html("code",codeText).style({
+//     width:"100%",
+//     height:"auto",
+//     padding:"10px",
+//     boxSizing:"border-box",
+//     border: "1px solid #ccc", 
+//     outline: "none",
+//     fontSize: "1rem", 
+//     fontFamily: "Lucida Console, Courier New, monospace", 
+//     padding: "1rem 0.5rem", 
+//     wordBreak:"break-all",
+//     background:"#f6f8fa",
+//     color:"#0062C3"
+// }).setAttr("contenteditable",true).setAttr("spellcheck",false);
+
+const Input = (codeText = "") => {
+    // Create the code element with styles
+    const inputElement = html("code", codeText)
+    .style({
+        // width: "100%",
+        // height: "auto",
+        // padding: "10px",
+        // boxSizing: "border-box",
+        // border: "1px solid #ccc",
+        outline: "none",
+        fontSize: "1rem",
+        fontFamily: "Lucida Console, Courier New, monospace",
+        // padding: "1rem 0.5rem",
+        // wordBreak: "break-all",
+        // background: "#f6f8fa",
+        // color: "#0062C3",
+    })
+    // .setAttr("contenteditable", true).setAttr("spellcheck", false);
+
+    // Initialize CodeMirror editor view on the created element
+    let editor=new EditorView({
+        extensions: [
+            basicSetup, 
+            javascript(),
+            keymap.of([indentWithTab])
+        ],
+        parent: inputElement.element // Use the element for CodeMirror's parent
+    });
+    window.editor = editor
+    // Return the element to be used elsewhere
+    return inputElement;
+};
+
+
+const Output=()=>html("output").style({
+    width:"100%",
+    height:"auto",
+    padding:"5px 0",
+})
+const Left=(ctx)=>Flex(
+    text("[ ]")
+    ).style({
+        width:"50px",
+        //height:getComputedStyle(ctx.Input.element).height,
+        height:"50px",
+        margin:"10px 4px",
+        padding:"5px",
+        color:"darkblue",
+        borderBottom:"4px solid gold",
+    }).horizontal(0,0);
+const BTN_STYLE={
+    background:"none",
+    width:"25px",
+    height:"25px",
+    fontSize:"1.2rem",
+    cursor:"pointer"
+}
+const Right=(ctx)=>Flex(
+    text('▶️').style(BTN_STYLE).onClick(e=>{
+        if(ctx.parent instanceof ZikoUICodeNote)ctx.parent.setCurrentNote(ctx);
+        ctx.execute();
+        globalThis.__Ziko__.__Config__.default.target=e.target.parent.parent[1][1];
+    }),
+    text('📋').style(BTN_STYLE).onClick(()=>{
+        navigator.clipboard.writeText(ctx.codeText)
+    }),
+    text('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
+    text('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
+).style({
+    width:"70px",
+    height:"50px",
+    //background:"cyan",
+    margin:"10px 0"
+}).horizontal(0,0).wrap(true);
+export{
+    Input,
+    Output,
+    Right,
+    Left
 }

package/src/ui/elements/derived/code-note/code-cell.js

@@ -1,195 +1,195 @@
-import { Flex, ZikoUIFlex } from "../Flex";
-import { ZikoUICodeNote } from "./code-note";
-import { 
-    Input,
-    Output,
-    Right,
-    Left
- } from "./sub-elements";
-class ZikoUICodeCell extends ZikoUIFlex{
-    constructor(code="",{type="js",order=null}={}){
-        super("section")
-        Object.assign(this.cache,{
-            state:null,
-            order,
-            type,
-            metadata:{
-                created:Date.now(),
-                updated:null
-            }
-        })
-        this.Input=Input(code);
-        this.Output=Output();
-        this.InOut=Flex(
-            this.Input,
-            this.Output
-        ).vertical().style({
-            width:"100%",
-            margin:"10px auto"
-        });
-        this.RightControl=Right(this);
-        this.LeftControl=Left(this)
-        this.append(
-            this.LeftControl,
-            this.InOut,
-            this.RightControl
-        )
-        this.horizontal(-1,1).style({
-            //background:"#444",
-            width:"95vw",
-            margin:"0 auto",
-            border:"1px darkblue dotted"
-        })
-        let cm_content = this.Input.element.getElementsByClassName("cm-content")[0];
-        if( cm_content ){
-            cm_content.addEventListener("keydown",e=>{
-                if(e.key === "Enter" && e.shiftKey){
-                    e.preventDefault();
-                    this.execute(this.cache.order);   
-                }
-            })
-        }
-        else{
-            this.Input.onKeyDown(e=>{
-                if(e.kd==="Enter"){
-                    if(e.event.shiftKey){
-                        e.event.preventDefault();
-                        this.execute(this.cache.order);
-                    }
-                    else {
-                        //console.log(this.Input.element.firstChild.firstChild.textContent.at(-1))
-                    }
-                }
-                if(this.cache.parent instanceof ZikoUICodeNote){
-                    if(e.kd==="ArrowDown" && e.event.shiftKey ){
-                        this.cache.parent.next();
-                    }
-                    if(e.kd==="ArrowUp" && e.event.shiftKey){
-                        this.cache.parent.previous();
-                    }
-                }
-            }
-            )
-            this.Input.onFocus(()=>{
-                if(this.cache.parent instanceof ZikoUICodeNote){
-                    this.cache.parent.cache.currentNote=this;
-                    this.cache.parent.setCurrentNote(this);
-                }
-            })
-            this.Input.onPaste((e)=>{
-                //e.event.preventDefault();
-                //this.setValue(this.codeText.trim())
-            })
-            // this.Input.onKeyPress(e=>{
-            //     if(e.kp==="(")a.Input.element.textContent+=")";
-            //     if(e.kp==="[")a.Input.element.textContent+="]";
-            //     if(e.kp==="{")a.Input.element.textContent+="}";
-            // })    
-        }
-        }
-    get isCodeCell(){
-        return true;
-    }
-    // space &nbsp
-    get codeText() {
-        return (this.Input.element.getElementsByClassName("cm-content")[0])
-        ?this.Input.element.getElementsByClassName("cm-content")[0].innerText.trim()
-        :this.Input.element.innerText.trim()
-        // return this.Input.element.innerText.trim();
-    }
-    get codeHTML() {
-        return this.Input.element.innerHTML;
-    }
-    get outputHTML(){
-        return this.Output.element.innerHTML;
-    }
-    setValue(codeText){
-        this.Input[0].setValue(codeText);
-        return this;
-    }
-    cellData(){
-        return {
-            input:this.codeText,
-            output:this.outputHTML,
-            order:this.cache.order,
-            type:this.cache.type     
-        }
-    }
-    execute(order){
-        this.clearOutput();
-        this.evaluate(order);
-        this.cache.metadata.updated=Date.now();
-        return this;
-    }
-    #evaluateJs(order){
-        try{
-            this.LeftControl[0].setValue("pending");
-            this.cache.state="pending";  
-            // globalThis.eval(this.Input.element.innerText);
-            globalThis.eval(this.codeText);
-
-        }
-        catch(err){
-            console.log(err)
-            text(`Error : ${err.message}`).style({
-                color:"red",
-                background:"gold",
-                border:"2px red solid",
-                padding:"10px",
-                margin:"10px 0",
-                display:"flex",
-                justifyContent: "center",
-            });
-            this.LeftControl[0].setValue("Err");
-            this.cache.state="Error";            
-        }
-        finally{
-            if(this.cache.state==="pending"){
-                this.cache.state="success";
-                this.setOrder(order);
-                if(this.cache.parent instanceof ZikoUICodeNote){
-                    this.cache.parent.incrementOrder();
-                    this.cache.parent.next();
-                }
-            }
-        }
-    }
-    #evaluateMd(){
-
-    }
-    #evaluateHtml(){
-
-    }
-    evaluate(order){
-        globalThis.__Ziko__.__Config__.default.target=this.Output.element;
-        switch(this.cache.type){
-            case "js":this.#evaluateJs(order);break;
-        }
-        return this;
-    }
-    clearInput(){
-        this.Output.element.innerText="";
-        return this;
-    }
-    clearOutput(){
-        this.Output.element.innerText="";
-        return this;
-    }
-    setOrder(order,render=true){
-        this.cache.order=order;
-        if(render){
-            (typeof order === "number")?this.LeftControl[0].setValue(`[${order}]`):this.LeftControl[0].setValue("[-]");
-        }
-        return this;
-    }
-    focus(){
-        this.Input.element.focus();
-        return this;
-    }
-}
-
-
-const CodeCell=(codeText,{type,order}={})=>new ZikoUICodeCell(codeText,{type,order});
-export{
-    CodeCell
+import { Flex, ZikoUIFlex } from "../Flex";
+import { ZikoUICodeNote } from "./code-note";
+import { 
+    Input,
+    Output,
+    Right,
+    Left
+ } from "./sub-elements";
+class ZikoUICodeCell extends ZikoUIFlex{
+    constructor(code="",{type="js",order=null}={}){
+        super("section")
+        Object.assign(this.cache,{
+            state:null,
+            order,
+            type,
+            metadata:{
+                created:Date.now(),
+                updated:null
+            }
+        })
+        this.Input=Input(code);
+        this.Output=Output();
+        this.InOut=Flex(
+            this.Input,
+            this.Output
+        ).vertical().style({
+            width:"100%",
+            margin:"10px auto"
+        });
+        this.RightControl=Right(this);
+        this.LeftControl=Left(this)
+        this.append(
+            this.LeftControl,
+            this.InOut,
+            this.RightControl
+        )
+        this.horizontal(-1,1).style({
+            //background:"#444",
+            width:"95vw",
+            margin:"0 auto",
+            border:"1px darkblue dotted"
+        })
+        let cm_content = this.Input.element.getElementsByClassName("cm-content")[0];
+        if( cm_content ){
+            cm_content.addEventListener("keydown",e=>{
+                if(e.key === "Enter" && e.shiftKey){
+                    e.preventDefault();
+                    this.execute(this.cache.order);   
+                }
+            })
+        }
+        else{
+            this.Input.onKeyDown(e=>{
+                if(e.kd==="Enter"){
+                    if(e.event.shiftKey){
+                        e.event.preventDefault();
+                        this.execute(this.cache.order);
+                    }
+                    else {
+                        //console.log(this.Input.element.firstChild.firstChild.textContent.at(-1))
+                    }
+                }
+                if(this.cache.parent instanceof ZikoUICodeNote){
+                    if(e.kd==="ArrowDown" && e.event.shiftKey ){
+                        this.cache.parent.next();
+                    }
+                    if(e.kd==="ArrowUp" && e.event.shiftKey){
+                        this.cache.parent.previous();
+                    }
+                }
+            }
+            )
+            this.Input.onFocus(()=>{
+                if(this.cache.parent instanceof ZikoUICodeNote){
+                    this.cache.parent.cache.currentNote=this;
+                    this.cache.parent.setCurrentNote(this);
+                }
+            })
+            this.Input.onPaste((e)=>{
+                //e.event.preventDefault();
+                //this.setValue(this.codeText.trim())
+            })
+            // this.Input.onKeyPress(e=>{
+            //     if(e.kp==="(")a.Input.element.textContent+=")";
+            //     if(e.kp==="[")a.Input.element.textContent+="]";
+            //     if(e.kp==="{")a.Input.element.textContent+="}";
+            // })    
+        }
+        }
+    get isCodeCell(){
+        return true;
+    }
+    // space &nbsp
+    get codeText() {
+        return (this.Input.element.getElementsByClassName("cm-content")[0])
+        ?this.Input.element.getElementsByClassName("cm-content")[0].innerText.trim()
+        :this.Input.element.innerText.trim()
+        // return this.Input.element.innerText.trim();
+    }
+    get codeHTML() {
+        return this.Input.element.innerHTML;
+    }
+    get outputHTML(){
+        return this.Output.element.innerHTML;
+    }
+    setValue(codeText){
+        this.Input[0].setValue(codeText);
+        return this;
+    }
+    cellData(){
+        return {
+            input:this.codeText,
+            output:this.outputHTML,
+            order:this.cache.order,
+            type:this.cache.type     
+        }
+    }
+    execute(order){
+        this.clearOutput();
+        this.evaluate(order);
+        this.cache.metadata.updated=Date.now();
+        return this;
+    }
+    #evaluateJs(order){
+        try{
+            this.LeftControl[0].setValue("pending");
+            this.cache.state="pending";  
+            // globalThis.eval(this.Input.element.innerText);
+            globalThis.eval(this.codeText);
+
+        }
+        catch(err){
+            console.log(err)
+            text(`Error : ${err.message}`).style({
+                color:"red",
+                background:"gold",
+                border:"2px red solid",
+                padding:"10px",
+                margin:"10px 0",
+                display:"flex",
+                justifyContent: "center",
+            });
+            this.LeftControl[0].setValue("Err");
+            this.cache.state="Error";            
+        }
+        finally{
+            if(this.cache.state==="pending"){
+                this.cache.state="success";
+                this.setOrder(order);
+                if(this.cache.parent instanceof ZikoUICodeNote){
+                    this.cache.parent.incrementOrder();
+                    this.cache.parent.next();
+                }
+            }
+        }
+    }
+    #evaluateMd(){
+
+    }
+    #evaluateHtml(){
+
+    }
+    evaluate(order){
+        globalThis.__Ziko__.__Config__.default.target=this.Output.element;
+        switch(this.cache.type){
+            case "js":this.#evaluateJs(order);break;
+        }
+        return this;
+    }
+    clearInput(){
+        this.Output.element.innerText="";
+        return this;
+    }
+    clearOutput(){
+        this.Output.element.innerText="";
+        return this;
+    }
+    setOrder(order,render=true){
+        this.cache.order=order;
+        if(render){
+            (typeof order === "number")?this.LeftControl[0].setValue(`[${order}]`):this.LeftControl[0].setValue("[-]");
+        }
+        return this;
+    }
+    focus(){
+        this.Input.element.focus();
+        return this;
+    }
+}
+
+
+const CodeCell=(codeText,{type,order}={})=>new ZikoUICodeCell(codeText,{type,order});
+export{
+    CodeCell
 }