@codenotch/codenotch.react 1.0.82 → 2.0.0

package/dist/models/Codenotch.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { ProjectManifest, IAppManifest } from "@codenotch/codenotch.core";
 import { ICodenotchSignal, IDisposable } from "./Misc";
 /**
@@ -119,7 +120,11 @@ export interface IProcessResult<T = any> {
     errorMessage: string;
 }
 /**
- * The Codenotch client API, obtained by calling `useCodenotch()`.
+ * The Codenotch client API.
+ *
+ * Obtained with the `useCodenotch()` hook in function components, through the
+ * `cn` prop injected by `withCodenotch()` in class components, or with the
+ * plain `getCodenotch()` function anywhere else (handlers, modules, services).
  *
  * It is the bridge between a React app and the Codenotch runtime: it starts
  * server-side BPMN processes, runs CNQL queries, translates i18n keys,
@@ -196,7 +201,7 @@ export interface ICodenotchApi {
      *     </div>
      * );
      */
-    readonly showDialog: (node: JSX.Element) => ICodenotchDialog;
+    readonly showDialog: (node: ReactNode) => ICodenotchDialog;
     /**
      * Fetch the text content of a file of the deployed Codenotch project.
      * @param relativePath Path of the file relative to the project root (e.g. `'readme.md'`).
@@ -243,6 +248,19 @@ export interface ICodenotchApi {
     /** Manifest of the current application, if any. */
     readonly getAppManifest: () => IAppManifest | undefined;
 }
+/**
+ * Props injected by the `withCodenotch()` higher-order component.
+ * Extend it in the props of a class component wrapped by `withCodenotch`.
+ *
+ * @example
+ * interface Props extends WithCodenotchProps { userId: string }
+ * class TodoList extends React.Component<Props> { ... }
+ * export default withCodenotch(TodoList);
+ */
+export interface WithCodenotchProps {
+    /** The Codenotch client API; refreshed (new reference) whenever the environment changes. */
+    cn: ICodenotchApi;
+}
 /**
  * Handle on a dialog opened with {@link ICodenotchApi.showDialog}.
  */

package/dist/models/Codenotch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Codenotch.d.ts","sourceRoot":"","sources":["../../src/models/Codenotch.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Codenotch.d.ts","sourceRoot":"","sources":["../../src/models/Codenotch.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,44 +1,46 @@
-{
-    "name": "@codenotch/codenotch.react",
-    "version": "1.0.82",
-    "description": "React bindings for Codenotch applications: start BPMN processes, run cnql queries, translate i18n keys, listen to real-time signals, manage theme and language.",
-    "keywords": [
-        "codenotch",
-        "react"
-    ],
-    "publishConfig": {
-        "access": "public"
-    },
-    "homepage": "https://codenotch.com",
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "author": "Codenotch SA",
-    "license": "MIT",
-    "scripts": {
-        "build": "tsc",
-        "dev": "tsc --watch",
-        "prepublishOnly": "npm run build",
-        "clean": "rm -rf dist"
-    },
-    "files": [
-        "dist/**/*",
-        "src/**/*"
-    ],
-    "dependencies": {
-        "@codenotch/codenotch.core": "1.0.21",
-        "@microsoft/signalr": "^5.0.6",
-        "uuid": "^8.2.0"
-    },
-    "devDependencies": {
-        "@types/node": "^25.3.2",
-        "@types/react": "^16.14.69",
-        "@types/react-dom": "^16.9.25",
-        "@types/uuid": "8.0.0",
-        "@types/json-schema": "^7.0.6",
-        "react-dom": "^16.14.0",
-        "typescript": "^5.9.3"
-    },
-    "peerDependencies": {
-        "react": ">=16.0.0"
-    }
-}
+{
+    "name": "@codenotch/codenotch.react",
+    "version": "2.0.0",
+    "description": "React bindings for Codenotch applications: start BPMN processes, run cnql queries, translate i18n keys, listen to real-time signals, manage theme and language.",
+    "keywords": [
+        "codenotch",
+        "react"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "homepage": "https://codenotch.com",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "author": "Codenotch SA",
+    "license": "MIT",
+    "scripts": {
+        "build": "tsc",
+        "dev": "tsc --watch",
+        "prepublishOnly": "npm run build",
+        "clean": "rm -rf dist"
+    },
+    "files": [
+        "dist/**/*",
+        "src/**/*"
+    ],
+    "dependencies": {
+        "@codenotch/codenotch.core": "1.0.21",
+        "@microsoft/signalr": "^5.0.6",
+        "uuid": "^8.2.0"
+    },
+    "devDependencies": {
+        "@types/node": "^25.3.2",
+        "@types/react": "^19.1.0",
+        "@types/react-dom": "^19.1.0",
+        "@types/uuid": "8.0.0",
+        "@types/json-schema": "^7.0.6",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "typescript": "^5.9.3"
+    },
+    "peerDependencies": {
+        "react": ">=19.0.0",
+        "react-dom": ">=19.0.0"
+    }
+}

package/src/components/CodeEditor.tsx

@@ -1,203 +1,204 @@
-import React from "react";
-import { ICodenotchEnv } from "..";
-
-interface ICodeEditorProps {
-    /** Codenotch environment; only used to follow the current theme (`vs`/`vs-dark`). */
-    env?: ICodenotchEnv;
-    style?: React.CSSProperties;
-    className?: string;
-    /** Text content of the editor. */
-    value?: string;
-    /** Monaco language id (e.g. `'typescript'`, `'json'`, `'xml'`). Defaults to `'plaintext'`. */
-    language?: string;
-    readOnly?: boolean;
-    /** Called (debounced, 300 ms) when the user edits the content. */
-    onChange?: (value: string) => void;
-}
-
-/**
- * Light Monaco code editor embedded in a sandboxed iframe
- * (Monaco is loaded from the jsdelivr CDN — requires network access).
- *
- * @example
- * <CodeEditor env={cn.env} language="json" value={text} onChange={setText} />
- */
-export default class CodeEditor extends React.Component<ICodeEditorProps> {
-    private isIframeReady = false;
-    private onChangeTimeoutHandle: any = null;
-    private onMessageHandler: any;
-    refFrame = React.createRef<HTMLIFrameElement>();
-
-    constructor(props: ICodeEditorProps) {
-        super(props);
-        this.onMessageHandler = this.handleMessage.bind(this);
-    }
-
-    setValue(value: string) {
-        if (this.isIframeReady) {
-            this.postToIframe({
-                type: 'update',
-                value: value,
-            });
-        }
-    }
-
-    componentDidMount(): void {
-        window.addEventListener('message', this.onMessageHandler);
-        this.writeIframe();
-    }
-
-    componentWillUnmount(): void {
-        window.removeEventListener('message', this.onMessageHandler);
-    }
-
-    componentDidUpdate(prevProps: ICodeEditorProps): void {
-        const changed = (
-            prevProps.value !== this.props.value ||
-            prevProps.language !== this.props.language ||
-            prevProps.readOnly !== this.props.readOnly
-        );
-
-        if (changed && this.isIframeReady) {
-            let isDark = this.props.env?.theme === 'dark';
-            this.postToIframe({
-                type: 'update',
-                value: this.props.value ?? '',
-                language: this.props.language || 'plaintext',
-                readOnly: !!this.props.readOnly,
-                theme: isDark ? 'vs-dark' : 'vs'
-            });
-        }
-
-    }
-
-    private handleMessage(event: MessageEvent) {
-        const data = event.data as any;
-        if (!data || typeof data !== 'object') return;
-        if (data.__from !== 'MonacoIframe') return;
-
-        switch (data.type) {
-            case 'ready': {
-                this.isIframeReady = true;
-                // send initial payload
-                this.postToIframe({
-                    type: 'init',
-                    value: this.props.value ?? '',
-                    language: this.props.language || 'plaintext',
-                    readOnly: !!this.props.readOnly,
-                    theme: this.props.env?.theme === 'dark' ? 'vs-dark' : 'vs'
-                });
-                break;
-            }
-            case 'change': {
-                const next = String(data.value ?? '');
-                if (this.onChangeTimeoutHandle) {
-                    clearTimeout(this.onChangeTimeoutHandle);
-                }
-                this.onChangeTimeoutHandle = setTimeout(() => {
-                    this.props.onChange?.(next);
-                }, 300);
-                break;
-            }
-        }
-    };
-
-
-    private postToIframe(message: any) {
-        const w = this.refFrame.current?.contentWindow;
-        if (!w) return;
-        w.postMessage({ __from: 'MonacoIframe', ...message }, '*');
-    }
-
-    private writeIframe() {
-        const iframe = this.refFrame.current;
-        if (!iframe) return;
-
-        const vsBase = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs';
-        const html = `<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style>
-      html, body, #container { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }
-    </style>
-    <script>
-      (function(){
-        var vsBase = ${JSON.stringify(vsBase)};
-        // AMD loader
-        var s = document.createElement('script');
-        s.src = vsBase + '/loader.js';
-        s.onload = function(){
-          // Configure and load monaco
-          window.require.config({ paths: { vs: vsBase } });
-          window.require(['vs/editor/editor.main'], function(){
-            var editor;
-
-            function post(msg){ parent.postMessage(Object.assign({__from:'MonacoIframe'}, msg), '*'); }
-
-            function ensureEditor(){
-              if (editor) return editor;
-              editor = monaco.editor.create(document.getElementById('container'), {
-                value: '',
-                language: 'plaintext',
-                theme: 'vs',
-                automaticLayout: true,
-                minimap: { enabled: false },
-                scrollBeyondLastLine: true,
-                wordWrap: "on"
-              });
-              editor.onDidChangeModelContent(function(){
-                var v = editor.getValue();
-                post({ type: 'change', value: v });
-              });
-              return editor;
-            }
-
-            window.addEventListener('message', function(ev){
-              var data = ev.data || {}; if (data.__from !== 'MonacoIframe') return;
-              if (data.type === 'init' || data.type === 'update'){
-                var ed = ensureEditor();
-                if (typeof data.value === 'string' && ed.getValue() !== data.value){ ed.setValue(data.value); }
-                if (typeof data.language === 'string') { monaco.editor.setModelLanguage(ed.getModel(), data.language); }
-                if (typeof data.theme === 'string') { monaco.editor.setTheme(data.theme); }
-                if (typeof data.readOnly === 'boolean') { ed.updateOptions({ readOnly: data.readOnly }); }
-              }
-            });
-
-            // Signal ready after monaco is loaded
-            post({ type: 'ready' });
-          });
-        };
-        document.head.appendChild(s);
-      })();
-    </script>
-  </head>
-  <body>
-    <div id="container"></div>
-  </body>
-</html>`;
-
-        const doc = iframe.contentWindow?.document;
-        if (!doc) return;
-        doc.open();
-        doc.write(html);
-        doc.close();
-    }
-
-    render() {
-        let style = this.props.style || {};
-        style.width = style.width || '100%';
-        style.height = style.height || '100%';
-        style.border = style.border || '0';
-        style.outline = style.outline || '0';
-
-        return <iframe
-            style={style}
-            title="Codenotch"
-            ref={this.refFrame}
-            className={this.props.className}
-            sandbox="allow-scripts allow-same-origin"
-        />
-    }
-}
+import React from "react";
+import { ICodenotchEnv } from "..";
+
+interface ICodeEditorProps {
+    /** Codenotch environment; only used to follow the current theme (`vs`/`vs-dark`). */
+    env?: ICodenotchEnv;
+    style?: React.CSSProperties;
+    className?: string;
+    /** Text content of the editor. */
+    value?: string;
+    /** Monaco language id (e.g. `'typescript'`, `'json'`, `'xml'`). Defaults to `'plaintext'`. */
+    language?: string;
+    readOnly?: boolean;
+    /** Called (debounced, 300 ms) when the user edits the content. */
+    onChange?: (value: string) => void;
+}
+
+/**
+ * Light Monaco code editor embedded in a sandboxed iframe
+ * (Monaco is loaded from the jsdelivr CDN — requires network access).
+ *
+ * @example
+ * <CodeEditor env={cn.env} language="json" value={text} onChange={setText} />
+ */
+export default class CodeEditor extends React.Component<ICodeEditorProps> {
+    private isIframeReady = false;
+    private onChangeTimeoutHandle: any = null;
+    private onMessageHandler: any;
+    refFrame = React.createRef<HTMLIFrameElement>();
+
+    constructor(props: ICodeEditorProps) {
+        super(props);
+        this.onMessageHandler = this.handleMessage.bind(this);
+    }
+
+    setValue(value: string) {
+        if (this.isIframeReady) {
+            this.postToIframe({
+                type: 'update',
+                value: value,
+            });
+        }
+    }
+
+    componentDidMount(): void {
+        window.addEventListener('message', this.onMessageHandler);
+        this.writeIframe();
+    }
+
+    componentWillUnmount(): void {
+        window.removeEventListener('message', this.onMessageHandler);
+    }
+
+    componentDidUpdate(prevProps: ICodeEditorProps): void {
+        const changed = (
+            prevProps.value !== this.props.value ||
+            prevProps.language !== this.props.language ||
+            prevProps.readOnly !== this.props.readOnly
+        );
+
+        if (changed && this.isIframeReady) {
+            let isDark = this.props.env?.theme === 'dark';
+            this.postToIframe({
+                type: 'update',
+                value: this.props.value ?? '',
+                language: this.props.language || 'plaintext',
+                readOnly: !!this.props.readOnly,
+                theme: isDark ? 'vs-dark' : 'vs'
+            });
+        }
+
+    }
+
+    private handleMessage(event: MessageEvent) {
+        const data = event.data as any;
+        if (!data || typeof data !== 'object') return;
+        if (data.__from !== 'MonacoIframe') return;
+
+        switch (data.type) {
+            case 'ready': {
+                this.isIframeReady = true;
+                // send initial payload
+                this.postToIframe({
+                    type: 'init',
+                    value: this.props.value ?? '',
+                    language: this.props.language || 'plaintext',
+                    readOnly: !!this.props.readOnly,
+                    theme: this.props.env?.theme === 'dark' ? 'vs-dark' : 'vs'
+                });
+                break;
+            }
+            case 'change': {
+                const next = String(data.value ?? '');
+                if (this.onChangeTimeoutHandle) {
+                    clearTimeout(this.onChangeTimeoutHandle);
+                }
+                this.onChangeTimeoutHandle = setTimeout(() => {
+                    this.props.onChange?.(next);
+                }, 300);
+                break;
+            }
+        }
+    };
+
+
+    private postToIframe(message: any) {
+        const w = this.refFrame.current?.contentWindow;
+        if (!w) return;
+        w.postMessage({ __from: 'MonacoIframe', ...message }, '*');
+    }
+
+    private writeIframe() {
+        const iframe = this.refFrame.current;
+        if (!iframe) return;
+
+        const vsBase = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.55.1/min/vs';
+        const html = `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      html, body, #container { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }
+    </style>
+    <script>
+      (function(){
+        var vsBase = ${JSON.stringify(vsBase)};
+        // AMD loader
+        var s = document.createElement('script');
+        s.src = vsBase + '/loader.js';
+        s.onload = function(){
+          // Configure and load monaco
+          window.require.config({ paths: { vs: vsBase } });
+          window.require(['vs/editor/editor.main'], function(){
+            var editor;
+
+            function post(msg){ parent.postMessage(Object.assign({__from:'MonacoIframe'}, msg), '*'); }
+
+            function ensureEditor(){
+              if (editor) return editor;
+              editor = monaco.editor.create(document.getElementById('container'), {
+                value: '',
+                language: 'plaintext',
+                theme: 'vs',
+                automaticLayout: true,
+                minimap: { enabled: false },
+                scrollBeyondLastLine: true,
+                wordWrap: "on"
+              });
+              editor.onDidChangeModelContent(function(){
+                var v = editor.getValue();
+                post({ type: 'change', value: v });
+              });
+              return editor;
+            }
+
+            window.addEventListener('message', function(ev){
+              var data = ev.data || {}; if (data.__from !== 'MonacoIframe') return;
+              if (data.type === 'init' || data.type === 'update'){
+                var ed = ensureEditor();
+                if (typeof data.value === 'string' && ed.getValue() !== data.value){ ed.setValue(data.value); }
+                if (typeof data.language === 'string') { monaco.editor.setModelLanguage(ed.getModel(), data.language); }
+                if (typeof data.theme === 'string') { monaco.editor.setTheme(data.theme); }
+                if (typeof data.readOnly === 'boolean') { ed.updateOptions({ readOnly: data.readOnly }); }
+              }
+            });
+
+            // Signal ready after monaco is loaded
+            post({ type: 'ready' });
+          });
+        };
+        document.head.appendChild(s);
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="container"></div>
+  </body>
+</html>`;
+
+        const doc = iframe.contentWindow?.document;
+        if (!doc) return;
+        doc.open();
+        doc.write(html);
+        doc.close();
+    }
+
+    render() {
+        // Never mutate props: copy the style object before applying defaults.
+        const style: React.CSSProperties = { ...this.props.style };
+        style.width = style.width || '100%';
+        style.height = style.height || '100%';
+        style.border = style.border || '0';
+        style.outline = style.outline || '0';
+
+        return <iframe
+            style={style}
+            title="Codenotch"
+            ref={this.refFrame}
+            className={this.props.className}
+            sandbox="allow-scripts allow-same-origin"
+        />
+    }
+}