@fails-components/jupyter-react-edit 0.0.1-alpha.10

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2024, Marten Richter
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -0,0 +1,65 @@
+!["FAILS logo"](failslogo.svg)
+
+# Fancy automated internet lecture system (**FAILS**) - components (jupyter react edit)
+
+(c) 2024 Marten Richter
+
+The package provides a React component to include jupyter within FAILS, but may be usuable outside of fails.
+
+This package is part of FAILS.
+A web-based lecture system developed out of university lectures.
+
+While FAILS as a whole is licensed via GNU Affero GPL version 3.0, this package is licensed under a BSD-style license that can be found in the LICENSE file.
+This package is licensed more permissive since it can be useful outside of the FAILS environment, esspecially if you want to integrate Jupyter Lite into your application.
+So the default license from Jupyter is used to be license compatible.
+
+## Installation and usage
+
+### Installation
+
+You can install the package directly via npm from node.js:
+
+For installation simply run:
+
+```
+npm install @fails-components/jupyter-react-edit
+```
+
+### Usage
+
+You can integrate the React component via
+
+```
+import { JupyterEdit } from '@fails-components/jupyter-react-edit'
+
+...
+
+<JupyterEdit
+  editActivated={/* true or false, to control activation */}
+  jupyterurl={window.location.origin + '/jupyter/index.html' /* provides the URL of your jupyter lite deployment */}
+  pointerOff={
+   /* turn off and on mouse pointer inter actzion*/
+  }
+  rerunAtStartup={/* if true rerun all cells at startup*/}
+  installScreenShotPatches={
+    /* if true patches are installed within jupyter to allow for screenshots of applets*/
+  }
+  ref={/* you may want to track the reference to interact with the control*/}
+  document={/* initial javascript object representing the jupyter file */}
+  filename={/* file name */}
+  appid={/* you can set an id to show only a specific applet, instead of full editing */}
+  stateCallback={/* call back to process changes of the state of the jupyter applets */}
+  appletSizeChanged={(appid, width, height) => {
+    /* callback invoked if the size of an applet changes */
+  }}
+  kernelStatusCallback={status => {
+    /* callback, if the kernel status changed */
+  }}
+  receiveInterceptorUpdate={({ path, mime, state }) => {
+   /* information from the interceptor about a state update */
+  }}
+/>;
+
+```
+
+For more information please look at the usuage of the componenent inside fails, notably inside `@fails-components\app` and `@fails-components\lectureapp`.

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './jupyteredit.js';

package/lib/index.js

@@ -0,0 +1 @@
+export * from './jupyteredit.js';

package/lib/jupyteredit.d.ts

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+import { IFailsToJupyterMessage, IInterceptorUpdate, IScreenShotOpts, IFailsAppletSize, IGDPRProxyInfo } from '@fails-components/jupyter-launcher';
+import { JSONObject } from '@lumino/coreutils';
+import '../style/index.css';
+interface IJupyterState {
+    dirty?: boolean;
+    failsApp?: JSONObject;
+    kernelspec?: JSONObject;
+}
+interface IJupyterEditProps {
+    stateCallback?: (state: IJupyterState) => void;
+    receiveInterceptorUpdate?: (update: IInterceptorUpdate) => void;
+    kernelStatusCallback?: (status: string) => void;
+    appletSizeChanged?: (appid: string, width: number, height: number) => void;
+    jupyterurl: string;
+    filename: string;
+    document: JSONObject | undefined;
+    appid?: string;
+    rerunAtStartup: boolean;
+    installScreenShotPatches: boolean;
+    GDPRProxy?: IGDPRProxyInfo;
+    editActivated?: boolean;
+    pointerOff?: boolean;
+}
+interface IJupyterEditState {
+    appletSizes?: {
+        [key: string]: IFailsAppletSize;
+    } | undefined;
+    dirty: boolean;
+    appLoading: boolean;
+}
+export declare class JupyterEdit extends Component<IJupyterEditProps, IJupyterEditState> {
+    constructor(props: IJupyterEditProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: IJupyterEditProps): void;
+    componentWillUnmount(): void;
+    loadJupyter(): void;
+    saveJupyter(): Promise<any>;
+    screenShot({ dpi }: IScreenShotOpts): Promise<any>;
+    activateApp(): Promise<any>;
+    getLicenses(): Promise<any>;
+    restartKernelAndRunCells(): Promise<any>;
+    activateInterceptor(activate: boolean): Promise<any>;
+    sendInterceptorUpdate({ path, mime, state }: IInterceptorUpdate): Promise<any>;
+    onMessage(event: MessageEvent): void;
+    sendToIFrame(message: IFailsToJupyterMessage): void;
+    sendToIFrameAndReceive(message: IFailsToJupyterMessage): Promise<any>;
+    render(): React.JSX.Element;
+    private _iframe;
+    private _requestId;
+    private _requests;
+}
+export {};

package/lib/jupyteredit.js

@@ -0,0 +1,288 @@
+/*
+    BSD 3-Clause License
+
+    Copyright (c) 2024, Marten Richter
+    All rights reserved.
+
+    Redistribution and use in source and binary forms, with or without
+    modification, are permitted provided that the following conditions are met:
+
+    1. Redistributions of source code must retain the above copyright notice, this
+      list of conditions and the following disclaimer.
+
+    2. Redistributions in binary form must reproduce the above copyright notice,
+      this list of conditions and the following disclaimer in the documentation
+      and/or other materials provided with the distribution.
+
+    3. Neither the name of the copyright holder nor the names of its
+      contributors may be used to endorse or promote products derived from
+      this software without specific prior written permission.
+
+    THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+    AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+    IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+    DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+    FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+    DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+    SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+    CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+    OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+    OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+import React, { Component, Fragment } from 'react';
+import '../style/index.css';
+export class JupyterEdit extends Component {
+    constructor(props) {
+        super(props);
+        this._iframe = null;
+        this._requestId = 1; // id, if we request something
+        this._requests = new Map();
+        this.state = { dirty: false, appLoading: true };
+        this.onMessage = this.onMessage.bind(this);
+        if (props.stateCallback) {
+            props.stateCallback({ dirty: false });
+        }
+    }
+    componentDidMount() {
+        if (!this.props.jupyterurl) {
+            throw new Error('No jupyter url passed');
+        }
+        window.addEventListener('message', this.onMessage);
+        if (this.props.receiveInterceptorUpdate) {
+            this.activateInterceptor(true);
+        }
+    }
+    componentDidUpdate(prevProps) {
+        if (!this.props.jupyterurl) {
+            throw new Error('No jupyter url passed');
+        }
+        if (this.props.appid !== prevProps.appid) {
+            this.activateApp();
+        }
+        if (this.props.receiveInterceptorUpdate !== prevProps.receiveInterceptorUpdate) {
+            this.activateInterceptor(!!this.props.receiveInterceptorUpdate);
+        }
+    }
+    componentWillUnmount() {
+        window.removeEventListener('message', this.onMessage);
+    }
+    loadJupyter() {
+        var _a, _b, _c;
+        const data = this.props.document;
+        const metadata = data === null || data === void 0 ? void 0 : data.metadata;
+        if (metadata === null || metadata === void 0 ? void 0 : metadata.kernelspec) {
+            const kernelspec = metadata === null || metadata === void 0 ? void 0 : metadata.kernelspec;
+            if ((kernelspec === null || kernelspec === void 0 ? void 0 : kernelspec.name) !== 'python' && (kernelspec === null || kernelspec === void 0 ? void 0 : kernelspec.name) !== 'xpython') {
+                // replace the kernel
+                kernelspec.name = 'python';
+                kernelspec.display_name = 'Python (Pyodide)';
+                kernelspec.language = 'python';
+                kernelspec.name = 'python';
+            }
+        }
+        this.sendToIFrame({
+            type: 'loadJupyter',
+            inLecture: !!this.props.appid,
+            rerunAtStartup: !!this.props.rerunAtStartup,
+            installScreenShotPatches: !!this.props.installScreenShotPatches,
+            installGDPRProxy: this.props.GDPRProxy,
+            appid: this.props.appid,
+            fileName: this.props.filename || 'example.ipynb',
+            fileData: data,
+            kernelName: (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.metadata) === null || _a === void 0 ? void 0 : _a.kernelspec) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : 'python'
+        });
+    }
+    async saveJupyter() {
+        const fileToSaveObj = await this.sendToIFrameAndReceive({
+            type: 'saveJupyter',
+            fileName: this.props.filename || 'example.ipynb'
+        });
+        if (!fileToSaveObj.fileData) {
+            throw new Error('Empty saveJupyter response');
+        }
+        return fileToSaveObj.fileData;
+    }
+    async screenShot({ dpi }) {
+        const { screenshot } = await this.sendToIFrameAndReceive({
+            type: 'screenshotApp',
+            dpi
+        });
+        return screenshot;
+    }
+    activateApp() {
+        const appid = this.props.appid;
+        return this.sendToIFrameAndReceive({
+            type: 'activateApp',
+            inLecture: !!appid,
+            appid
+        });
+    }
+    async getLicenses() {
+        return this.sendToIFrameAndReceive({
+            type: 'getLicenses'
+        });
+    }
+    async restartKernelAndRunCells() {
+        return this.sendToIFrameAndReceive({
+            type: 'restartKernelAndRerunCells'
+        });
+    }
+    activateInterceptor(activate) {
+        return this.sendToIFrameAndReceive({
+            type: 'activateInterceptor',
+            activate
+        });
+    }
+    sendInterceptorUpdate({ path, mime, state }) {
+        return this.sendToIFrameAndReceive({
+            type: 'receiveInterceptorUpdate',
+            path,
+            mime,
+            state
+        });
+    }
+    onMessage(event) {
+        var _a, _b, _c, _d, _e, _f;
+        if (event.source === window) {
+            return;
+        }
+        if (event.source !== ((_a = this._iframe) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
+            return;
+        }
+        if (event.origin !== new URL(this.props.jupyterurl).origin) {
+            return;
+        }
+        const data = event.data;
+        if (event.data.requestId) {
+            const requestId = event.data.requestId;
+            if (this._requests.has(requestId)) {
+                const request = this._requests.get(requestId);
+                this._requests.delete(requestId);
+                if (event.data.error) {
+                    request.reject(new Error(event.data.error));
+                    return;
+                }
+                request.resolve(event.data);
+                return;
+            }
+        }
+        switch (data === null || data === void 0 ? void 0 : data.task) {
+            case 'appLoaded':
+                this.setState({ appLoading: false });
+                this.loadJupyter();
+                break;
+            case 'docDirty':
+                {
+                    const { dirty = undefined } = data;
+                    if (this.props.stateCallback && typeof dirty !== 'undefined') {
+                        this.props.stateCallback({ dirty });
+                    }
+                }
+                break;
+            case 'reportMetadata':
+                {
+                    const { failsApp = undefined, kernelspec = undefined } = (_b = data === null || data === void 0 ? void 0 : data.metadata) !== null && _b !== void 0 ? _b : {};
+                    if (this.props.stateCallback &&
+                        (typeof failsApp !== 'undefined' ||
+                            typeof kernelspec !== 'undefined')) {
+                        this.props.stateCallback({ failsApp, kernelspec });
+                    }
+                }
+                break;
+            case 'reportFailsAppletSizes':
+                {
+                    const { appletSizes = undefined } = data;
+                    if (typeof appletSizes !== 'undefined') {
+                        this.setState(state => {
+                            var _a, _b, _c;
+                            const retState = {};
+                            for (const appletSize of Object.values(appletSizes)) {
+                                const { appid, height, width } = appletSize;
+                                if ((_a = state === null || state === void 0 ? void 0 : state.appletSizes) === null || _a === void 0 ? void 0 : _a[appid]) {
+                                    const oldsize = state.appletSizes[appid];
+                                    if (oldsize.height === height && oldsize.width === width) {
+                                        continue;
+                                    }
+                                }
+                                if (!retState.appletSizes) {
+                                    retState.appletSizes = {};
+                                }
+                                retState.appletSizes[appid] = { width, height, appid };
+                                (_c = (_b = this.props) === null || _b === void 0 ? void 0 : _b.appletSizeChanged) === null || _c === void 0 ? void 0 : _c.call(_b, appid, width, height);
+                            }
+                            return retState;
+                        });
+                    }
+                }
+                break;
+            case 'reportKernelStatus':
+                (_d = (_c = this.props) === null || _c === void 0 ? void 0 : _c.kernelStatusCallback) === null || _d === void 0 ? void 0 : _d.call(_c, data.status);
+                break;
+            case 'sendInterceptorUpdate':
+                {
+                    const { path, mime, state } = data;
+                    (_f = (_e = this.props) === null || _e === void 0 ? void 0 : _e.receiveInterceptorUpdate) === null || _f === void 0 ? void 0 : _f.call(_e, { path, mime, state });
+                }
+                break;
+            default:
+        }
+    }
+    sendToIFrame(message) {
+        var _a;
+        if (this._iframe) {
+            (_a = this._iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(message, this.props.jupyterurl);
+        }
+    }
+    async sendToIFrameAndReceive(message) {
+        const requestId = this._requestId++;
+        return new Promise((resolve, reject) => {
+            this._requests.set(requestId, {
+                requestId,
+                resolve,
+                reject
+            });
+            this.sendToIFrame({
+                // @ts-expect-error requestId is not included in type
+                requestId,
+                ...message
+            });
+        });
+    }
+    render() {
+        // launch debugging in the following way:
+        // jupyter lab --allow-root --ServerApp.allow_origin='*' --ServerApp.tornado_settings="{'headers': {'Content-Security-Policy': 'frame-ancestors self *'}}" --ServerApp.allow_websocket_origin='*' --ServerApp.cookie_options="{'samesite': 'None', 'secure': True}"
+        // jupyter lab --allow-root --ServerApp.allow_origin='*' --ServerApp.tornado_settings="{'headers': {'Content-Security-Policy': 'frame-ancestors self *'}}" --ServerApp.allow_websocket_origin='*' --ServerApp.cookie_options="{'samesite': 'None', 'secure': True}" --LabServerApp.app_settings_dir=/workspaces/jupyterfails/development/config/app-edit
+        // do it only in a container!
+        if (!this.props.editActivated) {
+            return React.createElement(Fragment, null, "JupyterEdit is not activated");
+        }
+        let width = '100%';
+        let height = '99%';
+        if (this.props.appid) {
+            const appletSize = this.state.appletSizes && this.state.appletSizes[this.props.appid];
+            if (appletSize) {
+                width = Math.ceil(appletSize.width * 1.01) + 'px';
+                height = Math.ceil(appletSize.height * 1.01) + 'px';
+            }
+        }
+        let className = 'jpt-edit-iframe';
+        if (this.props.pointerOff) {
+            className += ' jpyt-edit-iframe-pointeroff';
+        }
+        return (React.createElement(Fragment, null,
+            React.createElement("iframe", { style: { width, height }, className: className, src: this.props.jupyterurl, ref: el => {
+                    this._iframe = el;
+                }, onLoad: () => {
+                    console.log('Jupyter iframe loaded');
+                }, allow: "", 
+                // @ts-expect-error credentialless
+                credentialless: "true", sandbox: "allow-scripts allow-downloads allow-same-origin allow-popups" // we need allow-forms for a local jupyter server, remove for jupyterlite
+                , title: "jupyteredit" }),
+            this.state.appLoading && (React.createElement("h2", { style: {
+                    position: 'absolute',
+                    top: '50%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)'
+                } }, "Jupyter is loading, be patient..."))));
+    }
+}

package/package.json

@@ -0,0 +1,185 @@
+{
+    "name": "@fails-components/jupyter-react-edit",
+    "version": "0.0.1-alpha.10",
+    "description": "A react control, that lets you embed jupyter lite in your application including applets with screenshots etc.",
+    "keywords": [
+        "jupyter",
+        "jupyterlab",
+        "react",
+        "iframe"
+    ],
+    "homepage": "https://github.com/fails-components/jupyterfails",
+    "bugs": {
+        "url": "https://github.com/fails-components/jupyterfails/issues"
+    },
+    "license": "BSD-3-Clause",
+    "author": {
+        "name": "Marten Richter",
+        "email": "marten.richter@freenet.de"
+    },
+    "files": [
+        "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+        "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}",
+        "src/**/*.{ts,tsx}",
+        "LICENSE",
+        "README.md"
+    ],
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "style": "style/index.css",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/fails-components/jupyterfails.git"
+    },
+    "scripts": {
+        "build": "jlpm build:lib",
+        "build:prod": "jlpm clean && jlpm build:lib:prod",
+        "build:lib": "tsc --sourceMap",
+        "build:lib:prod": "tsc",
+        "clean": "jlpm clean:lib",
+        "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
+        "clean:lintcache": "rimraf .eslintcache .stylelintcache",
+        "clean:all": "jlpm clean:lib && jlpm clean:lintcache",
+        "eslint": "jlpm eslint:check --fix",
+        "eslint:check": "eslint . --cache --ext .ts,.tsx",
+        "lint": "jlpm stylelint && jlpm prettier && jlpm eslint",
+        "lint:check": "jlpm stylelint:check && jlpm prettier:check && jlpm eslint:check",
+        "prepublishOnly": "npm run build",
+        "prettier": "jlpm prettier:base --write --list-different",
+        "prettier:base": "prettier \"**/*{.ts,.tsx,.js,.jsx,.css,.json,.md}\"",
+        "prettier:check": "jlpm prettier:base --check",
+        "stylelint": "jlpm stylelint:check --fix",
+        "stylelint:check": "stylelint --cache \"style/**/*.css\"",
+        "test": "jest --coverage --passWithNoTests",
+        "watch": "run-p watch:src",
+        "watch:src": "tsc -w --sourceMap"
+    },
+    "devDependencies": {
+        "@fails-components/jupyter-launcher": "^0.0.1-alpha.10",
+        "@types/jest": "^29.2.0",
+        "@types/json-schema": "^7.0.11",
+        "@types/react": "^18.0.26",
+        "@types/react-addons-linked-state-mixin": "^0.14.22",
+        "@typescript-eslint/eslint-plugin": "^6.1.0",
+        "@typescript-eslint/parser": "^6.1.0",
+        "css-loader": "^6.7.1",
+        "eslint": "^8.36.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-prettier": "^5.0.0",
+        "jest": "^29.2.0",
+        "npm-run-all": "^4.1.5",
+        "prettier": "^3.0.0",
+        "rimraf": "^5.0.1",
+        "source-map-loader": "^1.0.2",
+        "style-loader": "^3.3.1",
+        "stylelint": "^15.10.1",
+        "stylelint-config-recommended": "^13.0.0",
+        "stylelint-config-standard": "^34.0.0",
+        "stylelint-csstree-validator": "^3.0.0",
+        "stylelint-prettier": "^4.0.0",
+        "typescript": "~5.0.2",
+        "yjs": "^13.5.0"
+    },
+    "sideEffects": [
+        "style/*.css",
+        "style/index.js"
+    ],
+    "styleModule": "style/index.js",
+    "publishConfig": {
+        "access": "public"
+    },
+    "eslintIgnore": [
+        "node_modules",
+        "dist",
+        "coverage",
+        "**/*.d.ts",
+        "tests",
+        "**/__tests__",
+        "ui-tests"
+    ],
+    "eslintConfig": {
+        "extends": [
+            "eslint:recommended",
+            "plugin:@typescript-eslint/eslint-recommended",
+            "plugin:@typescript-eslint/recommended",
+            "plugin:prettier/recommended"
+        ],
+        "parser": "@typescript-eslint/parser",
+        "parserOptions": {
+            "project": "tsconfig.json",
+            "sourceType": "module"
+        },
+        "plugins": [
+            "@typescript-eslint"
+        ],
+        "rules": {
+            "@typescript-eslint/naming-convention": [
+                "error",
+                {
+                    "selector": "interface",
+                    "format": [
+                        "PascalCase"
+                    ],
+                    "custom": {
+                        "regex": "^I[A-Z]",
+                        "match": true
+                    }
+                }
+            ],
+            "@typescript-eslint/no-unused-vars": [
+                "warn",
+                {
+                    "args": "none"
+                }
+            ],
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-namespace": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/quotes": [
+                "error",
+                "single",
+                {
+                    "avoidEscape": true,
+                    "allowTemplateLiterals": false
+                }
+            ],
+            "curly": [
+                "error",
+                "all"
+            ],
+            "eqeqeq": "error",
+            "prefer-arrow-callback": "error"
+        }
+    },
+    "prettier": {
+        "singleQuote": true,
+        "trailingComma": "none",
+        "arrowParens": "avoid",
+        "endOfLine": "auto",
+        "overrides": [
+            {
+                "files": "package.json",
+                "options": {
+                    "tabWidth": 4
+                }
+            }
+        ]
+    },
+    "stylelint": {
+        "extends": [
+            "stylelint-config-recommended",
+            "stylelint-config-standard",
+            "stylelint-prettier/recommended"
+        ],
+        "plugins": [
+            "stylelint-csstree-validator"
+        ],
+        "rules": {
+            "csstree/validator": true,
+            "property-no-vendor-prefix": null,
+            "selector-class-pattern": "^([a-z][A-z\\d]*)(-[A-z\\d]+)*$",
+            "selector-no-vendor-prefix": null,
+            "value-no-vendor-prefix": null
+        }
+    }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './jupyteredit.js';

package/src/jupyteredit.tsx

@@ -0,0 +1,385 @@
+/*
+    BSD 3-Clause License
+
+    Copyright (c) 2024, Marten Richter
+    All rights reserved.
+
+    Redistribution and use in source and binary forms, with or without
+    modification, are permitted provided that the following conditions are met:
+
+    1. Redistributions of source code must retain the above copyright notice, this
+      list of conditions and the following disclaimer.
+
+    2. Redistributions in binary form must reproduce the above copyright notice,
+      this list of conditions and the following disclaimer in the documentation
+      and/or other materials provided with the distribution.
+
+    3. Neither the name of the copyright holder nor the names of its
+      contributors may be used to endorse or promote products derived from
+      this software without specific prior written permission.
+
+    THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+    AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+    IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+    DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+    FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+    DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+    SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+    CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+    OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+    OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+import React, { Component, Fragment } from 'react';
+import {
+  IJupyterToFailsMessage,
+  IFailsToJupyterMessage,
+  IInterceptorUpdate,
+  IReportFailsAppletSizes,
+  IScreenShotOpts,
+  IDocDirty,
+  IFailsAppletSize,
+  IGDPRProxyInfo
+} from '@fails-components/jupyter-launcher';
+import { JSONObject, PartialJSONObject } from '@lumino/coreutils';
+import '../style/index.css';
+
+interface IJupyterState {
+  dirty?: boolean;
+  failsApp?: JSONObject;
+  kernelspec?: JSONObject;
+}
+
+interface IJupyterEditProps {
+  stateCallback?: (state: IJupyterState) => void;
+  receiveInterceptorUpdate?: (update: IInterceptorUpdate) => void;
+  kernelStatusCallback?: (status: string) => void;
+  appletSizeChanged?: (appid: string, width: number, height: number) => void;
+  jupyterurl: string; // url of the jupyter lite distribution
+  filename: string; // filename of the document
+  document: JSONObject | undefined; // the document as javascript object
+  appid?: string; // id of the applet or undefined if not in applet mode
+  rerunAtStartup: boolean;
+  installScreenShotPatches: boolean; // install patches to allow screenshots of plotly
+  GDPRProxy?: IGDPRProxyInfo;
+  editActivated?: boolean; // whether the jupyter edit is activated.
+  pointerOff?: boolean; // if true, no pointer interaction with jupyter is possible
+}
+
+interface IJupyterEditState {
+  appletSizes?:
+    | {
+        [key: string]: IFailsAppletSize;
+      }
+    | undefined;
+  dirty: boolean;
+  appLoading: boolean;
+}
+
+interface IDocumentMetadata extends PartialJSONObject {
+  kernelspec?: JSONObject;
+}
+
+export class JupyterEdit extends Component<
+  IJupyterEditProps,
+  IJupyterEditState
+> {
+  constructor(props: IJupyterEditProps) {
+    super(props);
+    this.state = { dirty: false, appLoading: true };
+    this.onMessage = this.onMessage.bind(this);
+    if (props.stateCallback) {
+      props.stateCallback({ dirty: false });
+    }
+  }
+
+  componentDidMount() {
+    if (!this.props.jupyterurl) {
+      throw new Error('No jupyter url passed');
+    }
+    window.addEventListener('message', this.onMessage);
+    if (this.props.receiveInterceptorUpdate) {
+      this.activateInterceptor(true);
+    }
+  }
+
+  componentDidUpdate(prevProps: IJupyterEditProps) {
+    if (!this.props.jupyterurl) {
+      throw new Error('No jupyter url passed');
+    }
+    if (this.props.appid !== prevProps.appid) {
+      this.activateApp();
+    }
+    if (
+      this.props.receiveInterceptorUpdate !== prevProps.receiveInterceptorUpdate
+    ) {
+      this.activateInterceptor(!!this.props.receiveInterceptorUpdate);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('message', this.onMessage);
+  }
+
+  loadJupyter() {
+    const data = this.props.document;
+    const metadata = data?.metadata as IDocumentMetadata | null;
+    if (metadata?.kernelspec) {
+      const kernelspec = metadata?.kernelspec;
+      if (kernelspec?.name !== 'python' && kernelspec?.name !== 'xpython') {
+        // replace the kernel
+        kernelspec.name = 'python';
+        kernelspec.display_name = 'Python (Pyodide)';
+        kernelspec.language = 'python';
+        kernelspec.name = 'python';
+      }
+    }
+    this.sendToIFrame({
+      type: 'loadJupyter',
+      inLecture: !!this.props.appid,
+      rerunAtStartup: !!this.props.rerunAtStartup,
+      installScreenShotPatches: !!this.props.installScreenShotPatches,
+      installGDPRProxy: this.props.GDPRProxy,
+      appid: this.props.appid,
+      fileName: this.props.filename || 'example.ipynb',
+      fileData: data,
+      kernelName:
+        ((data?.metadata as IDocumentMetadata)?.kernelspec?.name as
+          | 'python'
+          | 'xpython'
+          | undefined) ?? 'python'
+    });
+  }
+
+  async saveJupyter() {
+    const fileToSaveObj = await this.sendToIFrameAndReceive({
+      type: 'saveJupyter',
+      fileName: this.props.filename || 'example.ipynb'
+    });
+    if (!fileToSaveObj.fileData) {
+      throw new Error('Empty saveJupyter response');
+    }
+    return fileToSaveObj.fileData;
+  }
+
+  async screenShot({ dpi }: IScreenShotOpts) {
+    const { screenshot } = await this.sendToIFrameAndReceive({
+      type: 'screenshotApp',
+      dpi
+    });
+    return screenshot;
+  }
+
+  activateApp() {
+    const appid = this.props.appid;
+    return this.sendToIFrameAndReceive({
+      type: 'activateApp',
+      inLecture: !!appid,
+      appid
+    });
+  }
+
+  async getLicenses() {
+    return this.sendToIFrameAndReceive({
+      type: 'getLicenses'
+    });
+  }
+
+  async restartKernelAndRunCells() {
+    return this.sendToIFrameAndReceive({
+      type: 'restartKernelAndRerunCells'
+    });
+  }
+
+  activateInterceptor(activate: boolean) {
+    return this.sendToIFrameAndReceive({
+      type: 'activateInterceptor',
+      activate
+    });
+  }
+
+  sendInterceptorUpdate({ path, mime, state }: IInterceptorUpdate) {
+    return this.sendToIFrameAndReceive({
+      type: 'receiveInterceptorUpdate',
+      path,
+      mime,
+      state
+    });
+  }
+
+  onMessage(event: MessageEvent) {
+    if (event.source === window) {
+      return;
+    }
+    if (event.source !== this._iframe?.contentWindow) {
+      return;
+    }
+    if (event.origin !== new URL(this.props.jupyterurl).origin) {
+      return;
+    }
+    const data = event.data as IJupyterToFailsMessage;
+    if (event.data.requestId) {
+      const requestId = event.data.requestId;
+      if (this._requests.has(requestId)) {
+        const request = this._requests.get(requestId);
+        this._requests.delete(requestId);
+        if (event.data.error) {
+          request.reject(new Error(event.data.error));
+          return;
+        }
+        request.resolve(event.data);
+        return;
+      }
+    }
+    switch (data?.task) {
+      case 'appLoaded':
+        this.setState({ appLoading: false });
+        this.loadJupyter();
+        break;
+      case 'docDirty':
+        {
+          const { dirty = undefined } = data as IDocDirty;
+          if (this.props.stateCallback && typeof dirty !== 'undefined') {
+            this.props.stateCallback({ dirty });
+          }
+        }
+        break;
+      case 'reportMetadata':
+        {
+          const { failsApp = undefined, kernelspec = undefined } =
+            data?.metadata ?? {};
+          if (
+            this.props.stateCallback &&
+            (typeof failsApp !== 'undefined' ||
+              typeof kernelspec !== 'undefined')
+          ) {
+            this.props.stateCallback({ failsApp, kernelspec });
+          }
+        }
+        break;
+      case 'reportFailsAppletSizes':
+        {
+          const { appletSizes = undefined } = data as IReportFailsAppletSizes;
+          if (typeof appletSizes !== 'undefined') {
+            this.setState(state => {
+              const retState: {
+                appletSizes?: {
+                  [key: string]: IFailsAppletSize;
+                };
+              } = {};
+              for (const appletSize of Object.values(appletSizes)) {
+                const { appid, height, width } = appletSize;
+                if (state?.appletSizes?.[appid]) {
+                  const oldsize = state.appletSizes[appid];
+                  if (oldsize.height === height && oldsize.width === width) {
+                    continue;
+                  }
+                }
+                if (!retState.appletSizes) {
+                  retState.appletSizes = {};
+                }
+                retState.appletSizes[appid] = { width, height, appid };
+                this.props?.appletSizeChanged?.(appid, width, height);
+              }
+              return retState;
+            });
+          }
+        }
+        break;
+      case 'reportKernelStatus':
+        this.props?.kernelStatusCallback?.(data.status);
+        break;
+      case 'sendInterceptorUpdate':
+        {
+          const { path, mime, state } = data;
+          this.props?.receiveInterceptorUpdate?.({ path, mime, state });
+        }
+        break;
+      default:
+    }
+  }
+
+  sendToIFrame(message: IFailsToJupyterMessage) {
+    if (this._iframe) {
+      this._iframe.contentWindow?.postMessage(message, this.props.jupyterurl);
+    }
+  }
+
+  async sendToIFrameAndReceive(message: IFailsToJupyterMessage): Promise<any> {
+    const requestId = this._requestId++;
+    return new Promise((resolve, reject) => {
+      this._requests.set(requestId, {
+        requestId,
+        resolve,
+        reject
+      });
+      this.sendToIFrame({
+        // @ts-expect-error requestId is not included in type
+        requestId,
+        ...message
+      });
+    });
+  }
+
+  render() {
+    // launch debugging in the following way:
+    // jupyter lab --allow-root --ServerApp.allow_origin='*' --ServerApp.tornado_settings="{'headers': {'Content-Security-Policy': 'frame-ancestors self *'}}" --ServerApp.allow_websocket_origin='*' --ServerApp.cookie_options="{'samesite': 'None', 'secure': True}"
+    // jupyter lab --allow-root --ServerApp.allow_origin='*' --ServerApp.tornado_settings="{'headers': {'Content-Security-Policy': 'frame-ancestors self *'}}" --ServerApp.allow_websocket_origin='*' --ServerApp.cookie_options="{'samesite': 'None', 'secure': True}" --LabServerApp.app_settings_dir=/workspaces/jupyterfails/development/config/app-edit
+    // do it only in a container!
+
+    if (!this.props.editActivated) {
+      return <Fragment>JupyterEdit is not activated</Fragment>;
+    }
+    let width = '100%';
+    let height = '99%';
+
+    if (this.props.appid) {
+      const appletSize =
+        this.state.appletSizes && this.state.appletSizes[this.props.appid];
+      if (appletSize) {
+        width = Math.ceil(appletSize.width * 1.01) + 'px';
+        height = Math.ceil(appletSize.height * 1.01) + 'px';
+      }
+    }
+    let className = 'jpt-edit-iframe';
+    if (this.props.pointerOff) {
+      className += ' jpyt-edit-iframe-pointeroff';
+    }
+
+    return (
+      <Fragment>
+        <iframe
+          style={{ width, height }}
+          className={className}
+          src={this.props.jupyterurl}
+          ref={el => {
+            this._iframe = el;
+          }}
+          onLoad={() => {
+            console.log('Jupyter iframe loaded');
+          }}
+          allow=""
+          // @ts-expect-error credentialless
+          credentialless="true"
+          sandbox="allow-scripts allow-downloads allow-same-origin allow-popups" // we need allow-forms for a local jupyter server, remove for jupyterlite
+          title="jupyteredit"
+        ></iframe>
+        {this.state.appLoading && (
+          <h2
+            style={{
+              position: 'absolute',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)'
+            }}
+          >
+            Jupyter is loading, be patient...
+          </h2>
+        )}
+      </Fragment>
+    );
+  }
+
+  private _iframe: HTMLIFrameElement | null = null;
+  private _requestId: number = 1; // id, if we request something
+  private _requests = new Map();
+}

package/style/index.css

@@ -0,0 +1,7 @@
+.jpt-edit-iframe {
+  box-sizing: content-box;
+}
+
+.jpyt-edit-iframe-pointeroff {
+  pointer-events: none;
+}