Fix #1890 - Apply latest patch that was lost (#1891)

pyscript.core/src/core.css

@@ -4,3 +4,41 @@ mpy-script,
 mpy-config {
     display: none;
 }
+
+/* PyEditor */
+.py-editor-box,
+.mpy-editor-box {
+    padding: 0.5rem;
+}
+.py-editor-input,
+.mpy-editor-input {
+    position: relative;
+}
+.py-editor-box::before,
+.mpy-editor-box::before {
+    content: attr(data-env);
+    display: block;
+    font-size: x-small;
+    text-align: end;
+}
+.py-editor-output,
+.mpy-editor-output {
+    white-space: pre;
+}
+.py-editor-run-button,
+.mpy-editor-run-button {
+    position: absolute;
+    right: 0.5rem;
+    bottom: 0.5rem;
+    opacity: 0;
+    transition: opacity 0.25s;
+    z-index: 1;
+}
+.py-editor-box:hover .py-editor-run-button,
+.mpy-editor-box:hover .mpy-editor-run-button,
+.py-editor-run-button:focus,
+.py-editor-run-button:disabled,
+.mpy-editor-run-button:focus,
+.mpy-editor-run-button:disabled {
+    opacity: 1;
+}

pyscript.core/src/plugins/py-editor.js

@@ -48,8 +48,8 @@ async function execute({ currentTarget }) {
         xworker.onerror = ({ error }) => {
             outDiv.innerHTML += `<span style='color:red'>${
                 error.message || error
-            }</span>`;
-            console.log(error);
+            }</span>\n`;
+            console.error(error);
         };
 
         const enable = () => {
@@ -57,10 +57,10 @@ async function execute({ currentTarget }) {
         };
         const { sync } = xworker;
         sync.write = (str) => {
-            outDiv.innerText += str;
+            outDiv.innerText += `${str}\n`;
         };
         sync.writeErr = (str) => {
-            outDiv.innerHTML += `<span style='color:red'>${str}</span>`;
+            outDiv.innerHTML += `<span style='color:red'>${str}</span>\n`;
         };
         sync.runAsync(pySrc).then(enable, enable);
     });
@@ -88,7 +88,7 @@ const makeEditorDiv = (listener, type) => {
         event.stopPropagation();
     });
 
-    editorDiv.append(editorShadowContainer, runButton);
+    editorDiv.append(runButton, editorShadowContainer);
 
     return editorDiv;
 };
@@ -164,6 +164,7 @@ const init = async (script, type, interpreter) => {
     // @see https://github.com/JeffersGlass/mkdocs-pyscript/blob/main/mkdocs_pyscript/js/makeblocks.js
     const listener = execute.bind(context);
     const [boxDiv, outDiv] = makeBoxDiv(listener, type);
+    boxDiv.dataset.env = script.hasAttribute("env") ? env : interpreter;
 
     const inputChild = boxDiv.querySelector(`.${type}-editor-input > div`);
     const parent = inputChild.attachShadow({ mode: "open" });