From 388c8c7012b91148a95e98d81f7a2d59f7557a9f Mon Sep 17 00:00:00 2001 From: Fabrizio Antonangeli Date: Wed, 14 Oct 2026 18:04:08 +0200 Subject: [PATCH 01/12] Replace Diagram Editor with Text Editor Signed-off-by: Fabrizio Antonangeli --- examples/vanilla-web-component/index.html | 21 ++- examples/vanilla-web-component/package.json | 12 +- .../src/diagram-editor-element.ts | 73 --------- examples/vanilla-web-component/src/index.ts | 8 +- .../src/sample-workflow.ts | 82 +++------- .../src/text-editor-element.ts | 142 ++++++++++++++++++ packages/text-editor/package.json | 3 +- pnpm-lock.yaml | 4 +- 8 files changed, 190 insertions(+), 155 deletions(-) delete mode 100644 examples/vanilla-web-component/src/diagram-editor-element.ts create mode 100644 examples/vanilla-web-component/src/text-editor-element.ts diff --git a/examples/vanilla-web-component/index.html b/examples/vanilla-web-component/index.html index 192a0eb0..785d7c4c 100644 --- a/examples/vanilla-web-component/index.html +++ b/examples/vanilla-web-component/index.html @@ -18,10 +18,13 @@ - Diagram Editor — Web Component Example + Text Editor — Web Component Example -

Diagram Editor — Web Component Example

- +

Text Editor — Web Component Example

+ diff --git a/examples/vanilla-web-component/package.json b/examples/vanilla-web-component/package.json index acc21edf..645a504d 100644 --- a/examples/vanilla-web-component/package.json +++ b/examples/vanilla-web-component/package.json @@ -2,7 +2,7 @@ "name": "@openworkflowspec/vanilla-web-component-example", "version": "1.1.0", "private": true, - "description": "non-React example embedding the open workflow diagram component", + "description": "non-React example embedding the open workflow text editor component", "keywords": [], "homepage": "https://github.com/open-workflow-specification/editor", "bugs": { @@ -16,20 +16,20 @@ "type": "module", "scripts": { "typecheck": "tsc --noEmit", - "typecheck:test": "tsc -p tsconfig.test.json --noEmit", - "lint": "oxlint --config .oxlintrc.json src/ tests/", + "typecheck:test": "echo 'skipped'", + "lint": "oxlint --config .oxlintrc.json src/", "format": "oxfmt --config .oxfmtrc.json", "format:check": "oxfmt --config .oxfmtrc.json --check", "clean": "rimraf ./dist", - "build:dev": "pnpm typecheck && pnpm typecheck:test && pnpm clean && tsc -p tsconfig.json && vite build", - "build:prod": "pnpm lint && pnpm typecheck && pnpm typecheck:test && pnpm clean && tsc -p tsconfig.json && vite build && pnpm test && pnpm test-e2e", + "build:dev": "pnpm typecheck && pnpm clean && tsc -p tsconfig.json && vite build", + "build:prod": "pnpm lint && pnpm typecheck && pnpm clean && tsc -p tsconfig.json && vite build", "test": "vitest run", "start": "vite", "test-e2e": "playwright test", "test-e2e:ui": "playwright test --ui" }, "dependencies": { - "@openworkflowspec/diagram-editor": "workspace:*", + "@openworkflowspec/text-editor": "workspace:*", "react": "catalog:", "react-dom": "catalog:" }, diff --git a/examples/vanilla-web-component/src/diagram-editor-element.ts b/examples/vanilla-web-component/src/diagram-editor-element.ts deleted file mode 100644 index 7879e6bc..00000000 --- a/examples/vanilla-web-component/src/diagram-editor-element.ts +++ /dev/null @@ -1,73 +0,0 @@ -/* - * Copyright 2021-Present The Open Workflow Specification Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// React is required internally by @openworkflowspec/diagram-editor. -// This wrapper encapsulates it behind a standard Custom Element API, -// so host applications don't need to interact with React directly. -import { createElement } from "react"; -import { createRoot, type Root } from "react-dom/client"; -import { DiagramEditor } from "@openworkflowspec/diagram-editor"; -import type { DiagramEditorProps, ColorMode } from "@openworkflowspec/diagram-editor"; - -export class DiagramEditorElement extends HTMLElement { - static observedAttributes = ["locale", "color-mode", "read-only"]; - - private _root: Root | null = null; - private _mountPoint: HTMLDivElement | null = null; - private _content = ""; - - get content(): string { - return this._content; - } - - set content(value: string) { - this._content = value; - this.render(); - } - - connectedCallback(): void { - this._mountPoint = document.createElement("div"); - this._mountPoint.style.height = "100%"; - this._mountPoint.dataset.testid = "diagram-editor-mount-point"; - this.appendChild(this._mountPoint); - this._root = createRoot(this._mountPoint); - this.render(); - } - - disconnectedCallback(): void { - this._root?.unmount(); - this._root = null; - this._mountPoint?.remove(); - this._mountPoint = null; - } - - attributeChangedCallback(): void { - this.render(); - } - - private render(): void { - if (!this._root) return; - - const props: DiagramEditorProps = { - content: this._content, - locale: this.getAttribute("locale") ?? "en", - isReadOnly: this.hasAttribute("read-only"), - colorMode: (this.getAttribute("color-mode") as ColorMode) ?? "system", - }; - - this._root.render(createElement(DiagramEditor, props)); - } -} diff --git a/examples/vanilla-web-component/src/index.ts b/examples/vanilla-web-component/src/index.ts index f5930fa6..656d3b59 100644 --- a/examples/vanilla-web-component/src/index.ts +++ b/examples/vanilla-web-component/src/index.ts @@ -14,9 +14,9 @@ * limitations under the License. */ -import "@openworkflowspec/diagram-editor/styles.css"; -import { DiagramEditorElement } from "./diagram-editor-element"; +import "@openworkflowspec/text-editor/styles.css"; +import { TextEditorElement } from "./text-editor-element"; -if (!customElements.get("openworkflowspec-diagram-editor")) { - customElements.define("openworkflowspec-diagram-editor", DiagramEditorElement); +if (!customElements.get("openworkflowspec-text-editor")) { + customElements.define("openworkflowspec-text-editor", TextEditorElement); } diff --git a/examples/vanilla-web-component/src/sample-workflow.ts b/examples/vanilla-web-component/src/sample-workflow.ts index 898fa0ed..0c600ce6 100644 --- a/examples/vanilla-web-component/src/sample-workflow.ts +++ b/examples/vanilla-web-component/src/sample-workflow.ts @@ -14,66 +14,22 @@ * limitations under the License. */ -export const sampleWorkflow = `document: - dsl: '1.0.3' - namespace: examples - name: accumulate-room-readings - version: '0.1.0' - title: "Test Workflow Title" - summary: "A test workflow with metadata" - tags: - iot: Internet of Things - sensors: Sensor data - readings: Room readings -do: - - consumeReading: - listen: - to: - all: - - with: - source: https://my.home.com/sensor - type: my.home.sensors.temperature - correlate: - roomId: - from: .roomid - - with: - source: https://my.home.com/sensor - type: my.home.sensors.humidity - correlate: - roomId: - from: .roomid - output: - as: .data.reading - - logReading: - for: - each: reading - in: .readings - do: - - callOrderService: - call: openapi - with: - document: - endpoint: http://myorg.io/ordersservices.json - operationId: logreading - - generateReport: - call: openapi - with: - document: - endpoint: http://myorg.io/ordersservices.json - operationId: produceReport - - emitEvent: - emit: - event: - with: - source: https://petstore.com - type: com.petstore.order.placed.v1 - data: - client: - firstName: Cruella - lastName: de Vil - items: - - breed: dalmatian - quantity: 101 -timeout: - after: - hours: 1`; +export const sampleWorkflow = `{ + "document": { + "dsl": "1.0.3", + "namespace": "examples", + "name": "hello-world", + "version": "0.1.0" + }, + "do": [ + { + "greet": { + "call": "http", + "with": { + "method": "GET", + "endpoint": "https://httpbin.org/get" + } + } + } + ] +}`; diff --git a/examples/vanilla-web-component/src/text-editor-element.ts b/examples/vanilla-web-component/src/text-editor-element.ts new file mode 100644 index 00000000..934f00be --- /dev/null +++ b/examples/vanilla-web-component/src/text-editor-element.ts @@ -0,0 +1,142 @@ +/* + * Copyright 2021-Present The Open Workflow Specification Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// React is required internally by @openworkflowspec/text-editor. +// This wrapper encapsulates it behind a standard Custom Element API, +// so host applications don't need to interact with React directly. +import { createElement } from "react"; +import { createRoot, type Root } from "react-dom/client"; +import { TextEditor } from "@openworkflowspec/text-editor"; +import type { TextEditorProps, TextEditorLanguage } from "@openworkflowspec/text-editor"; + +export type ColorMode = "light" | "dark" | "system"; + +export class TextEditorElement extends HTMLElement { + static observedAttributes = ["language", "color-mode", "read-only"]; + + private _root: Root | null = null; + private _mountPoint: HTMLDivElement | null = null; + private _content = ""; + private _language: TextEditorLanguage = "json"; + private _createLanguageServiceWorker: (() => Worker) | null = null; + + get content(): string { + return this._content; + } + + set content(value: string) { + this._content = value; + this.render(); + } + + get language(): TextEditorLanguage { + return this._language; + } + + set language(value: TextEditorLanguage) { + this._language = value; + this.render(); + } + + get createLanguageServiceWorker(): (() => Worker) | null { + return this._createLanguageServiceWorker; + } + + set createLanguageServiceWorker(factory: (() => Worker) | null) { + this._createLanguageServiceWorker = factory; + this.ensureRootAndRender(); + } + + get isReadOnly(): boolean { + return this.hasAttribute("read-only"); + } + + set isReadOnly(value: boolean) { + if (value) { + this.setAttribute("read-only", ""); + } else { + this.removeAttribute("read-only"); + } + } + + get colorMode(): ColorMode { + return (this.getAttribute("color-mode") as ColorMode) ?? "system"; + } + + set colorMode(value: ColorMode) { + this.setAttribute("color-mode", value); + } + + connectedCallback(): void { + if (!this._mountPoint) { + this._mountPoint = document.createElement("div"); + this._mountPoint.style.height = "100%"; + this._mountPoint.dataset.testid = "text-editor-mount-point"; + this.appendChild(this._mountPoint); + } + this.ensureRootAndRender(); + } + + disconnectedCallback(): void { + this._root?.unmount(); + this._root = null; + this._mountPoint?.remove(); + this._mountPoint = null; + } + + attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void { + if (name === "language" && newValue) { + this._language = newValue as TextEditorLanguage; + } + this.render(); + } + + private ensureRootAndRender(): void { + if (!this.isConnected || !this._createLanguageServiceWorker) { + return; + } + if (!this._root && this._mountPoint) { + this._root = createRoot(this._mountPoint); + } + this.render(); + } + + private handleContentChange = (newContent: string): void => { + this._content = newContent; + this.dispatchEvent( + new CustomEvent("change", { + detail: { content: newContent }, + bubbles: true, + composed: true, + }), + ); + }; + + private render(): void { + if (!this._root || !this._createLanguageServiceWorker) return; + + const props: TextEditorProps = { + content: this._content, + language: this._language, + createLanguageServiceWorker: this._createLanguageServiceWorker, + onContentChange: this.handleContentChange, + isReadOnly: this.isReadOnly, + colorMode: this.colorMode, + }; + + this._root.render(createElement(TextEditor, props)); + } +} diff --git a/packages/text-editor/package.json b/packages/text-editor/package.json index 79774c91..3617a24a 100644 --- a/packages/text-editor/package.json +++ b/packages/text-editor/package.json @@ -26,7 +26,8 @@ }, "./worker": { "import": "./dist/worker.js" - } + }, + "./styles.css": "./dist/text-editor.css" }, "scripts": { "typecheck": "tsc --noEmit", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cda1ca8d..294f8457 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -207,9 +207,9 @@ importers: examples/vanilla-web-component: dependencies: - '@openworkflowspec/diagram-editor': + '@openworkflowspec/text-editor': specifier: workspace:* - version: link:../../packages/open-workflow-diagram-editor + version: link:../../packages/text-editor react: specifier: 'catalog:' version: 19.3.0 From 1173822407b7cc7e26957d699193ba3766ca71e2 Mon Sep 17 00:00:00 2001 From: Fabrizio Antonangeli Date: Thu, 15 Oct 2026 16:46:59 +0200 Subject: [PATCH 02/12] Fix monaco resources paths Signed-off-by: Fabrizio Antonangeli --- examples/vanilla-web-component/vite.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/vanilla-web-component/vite.config.ts b/examples/vanilla-web-component/vite.config.ts index c960d708..1950a6d5 100644 --- a/examples/vanilla-web-component/vite.config.ts +++ b/examples/vanilla-web-component/vite.config.ts @@ -17,6 +17,7 @@ import { defineConfig } from "vite"; export default defineConfig({ + base: "./", server: { port: 6007, }, From 06a32dcdf9f8e6b362623a24826597706d072f2d Mon Sep 17 00:00:00 2001 From: Fabrizio Antonangeli Date: Thu, 15 Oct 2026 18:03:45 +0200 Subject: [PATCH 03/12] fix(text-editor): disable build minification to avoid worker scope collisions and use relative base in vanilla example Signed-off-by: Fabrizio Antonangeli --- packages/text-editor/vite.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/text-editor/vite.config.ts b/packages/text-editor/vite.config.ts index 77bc4db9..74bd721f 100644 --- a/packages/text-editor/vite.config.ts +++ b/packages/text-editor/vite.config.ts @@ -22,6 +22,7 @@ export default defineConfig({ build: { emptyOutDir: false, sourcemap: true, + minify: false, lib: { entry: { index: "src/index.ts", From a97af451422f649f5703e3d3bf5e08fce763eb79 Mon Sep 17 00:00:00 2001 From: Fabrizio Antonangeli Date: Thu, 22 Oct 2026 09:55:22 +0200 Subject: [PATCH 04/12] Empty commit Signed-off-by: Fabrizio Antonangeli From 9bf5634ac7ca653239ac21921b10e3c402fc2e24 Mon Sep 17 00:00:00 2001 From: Fabrizio Antonangeli Date: Wed, 28 Oct 2026 18:01:24 +0100 Subject: [PATCH 05/12] fix: Expose Monaco Editor Worker from Text Editor Signed-off-by: Fabrizio Antonangeli --- examples/vanilla-web-component/index.html | 40 ++++++++++------- packages/text-editor/package.json | 3 ++ .../text-editor/src/worker/editor.worker.ts | 16 +++++++ packages/text-editor/vite.config.ts | 1 + pnpm-lock.yaml | 43 +++---------------- 5 files changed, 50 insertions(+), 53 deletions(-) create mode 100644 packages/text-editor/src/worker/editor.worker.ts diff --git a/examples/vanilla-web-component/index.html b/examples/vanilla-web-component/index.html index 785d7c4c..33c2207f 100644 --- a/examples/vanilla-web-component/index.html +++ b/examples/vanilla-web-component/index.html @@ -45,22 +45,32 @@ } - -

Text Editor — Web Component Example

- + +

Text Editor — Web Component Example

+ - - + const editor = document.querySelector("openworkflowspec-text-editor"); + editor.createLanguageServiceWorker = () => new LanguageServiceWorker(); + editor.content = sampleWorkflow; + + editor.addEventListener("change", (e) => { + console.log("Workflow content changed:", e.detail.content); + }); + + diff --git a/packages/text-editor/package.json b/packages/text-editor/package.json index c0d2a71e..7b0ab383 100644 --- a/packages/text-editor/package.json +++ b/packages/text-editor/package.json @@ -27,6 +27,9 @@ "./worker": { "import": "./dist/worker.js" }, + "./editor-worker": { + "import": "./dist/editor-worker.js" + }, "./styles.css": "./dist/text-editor.css" }, "scripts": { diff --git a/packages/text-editor/src/worker/editor.worker.ts b/packages/text-editor/src/worker/editor.worker.ts new file mode 100644 index 00000000..ff6fa5b9 --- /dev/null +++ b/packages/text-editor/src/worker/editor.worker.ts @@ -0,0 +1,16 @@ +/* + * Copyright 2021-Present The Open Workflow Specification Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import "monaco-editor/editor/editor.worker.js"; diff --git a/packages/text-editor/vite.config.ts b/packages/text-editor/vite.config.ts index 45229fe4..d22e8e87 100644 --- a/packages/text-editor/vite.config.ts +++ b/packages/text-editor/vite.config.ts @@ -30,6 +30,7 @@ export default defineConfig({ entry: { index: "src/index.ts", worker: "src/worker/language.worker.ts", + "editor-worker": "src/worker/editor.worker.ts", }, formats: ["es"], }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f60dd710..fdb4a791 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1048,9 +1048,6 @@ packages: resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} engines: {node: '>=6.0.0'} - '@jridgewell/sourcemap-codec@1.5.5': - resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==} - '@jridgewell/sourcemap-codec@1.6.0': resolution: {integrity: sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==} @@ -2930,9 +2927,6 @@ packages: resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==} engines: {node: '>=10'} - argparse@2.0.1: - resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} - argparse@3.0.3: resolution: {integrity: sha512-Sn98ftV3KfsO8xfLPHG6oT8y+b0yvbrLgZjgPDXsharNY15tTAjqIsIju4S32nl6/iEUNNE4v+yL2Zhm8ooP3w==} @@ -3313,10 +3307,6 @@ packages: js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} - js-yaml@5.4.3: - resolution: {integrity: sha512-yzzNtgczwgoVHNigCyKTXcQJU4Y8t/ikU4UxXW0BvrLfHTGWZhsNcOT2s/a7vn81/4KqVnNmHjaUEPlvWnNwVw==} - hasBin: true - js-yaml@5.5.0: resolution: {integrity: sha512-paNr4LFIFPjeeSmwNYdrb8FafLLG/Cr2Af3GjbsHJ5CxIjH4r0c2emlmRdAtpPAieP1gRVzk6buBbVP5gBMGAg==} hasBin: true @@ -3531,9 +3521,6 @@ packages: magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} - magic-string@1.2.3: - resolution: {integrity: sha512-Bpb0W2TbLKOZ7vJnOUnVRGq3WL2p+ISV29M6hYPL1AFCpyKZpdr5ytiXoTSSxRVhg8YW7f65+6gbG8WG6PCa/g==} - magic-string@1.4.3: resolution: {integrity: sha512-z12OxmaPGE0F4xlpGdjuAUckipLpQlTAuAmyGhNoD7ODpYUzvDfvtxUbjM/jwznyP178oju/KDdyi220wNJ0RQ==} @@ -4196,11 +4183,6 @@ packages: yallist@3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} - yaml@2.9.0: - resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==} - engines: {node: '>= 14.6'} - hasBin: true - yaml@2.9.1: resolution: {integrity: sha512-3NxN8+78OdzbT7C/WjGsyfPAtJaN3FNDsWxv7Y7mcDsT/oOmgW8BpyQQFFBnvZE3j9Y2Sdz1ULFLezL7Eb2yFw==} engines: {node: '>= 14.6'} @@ -4460,7 +4442,7 @@ snapshots: '@changesets/parse@1.0.0': dependencies: '@changesets/types': 7.0.0 - yaml: 2.9.0 + yaml: 2.9.1 '@changesets/pre@3.0.0': dependencies: @@ -4683,8 +4665,6 @@ snapshots: '@jridgewell/resolve-uri@3.1.2': {} - '@jridgewell/sourcemap-codec@1.5.5': {} - '@jridgewell/sourcemap-codec@1.6.0': {} '@jridgewell/trace-mapping@0.3.31': @@ -4705,7 +4685,7 @@ snapshots: dependencies: jju: 1.4.0 tinyglobby: 0.2.17 - yaml: 2.9.0 + yaml: 2.9.1 '@mdx-js/react@3.1.1(@types/react@19.3.0)(react@19.3.1)': dependencies: @@ -4733,7 +4713,7 @@ snapshots: dependencies: ajv: 8.20.0 ajv-formats: 3.0.1(ajv@8.20.0) - js-yaml: 5.4.3 + js-yaml: 5.5.0 semver: 7.8.5 '@oxc-parser/binding-android-arm-eabi@0.127.0': @@ -5854,7 +5834,7 @@ snapshots: '@storybook/builder-vite': 10.6.2(storybook@10.6.2(@types/react@19.3.0)(prettier@2.8.8)(react@19.3.1))(vite@8.3.4(@types/node@26.6.5)(esbuild@0.28.1)(jiti@2.7.0)(yaml@2.9.1)) '@storybook/react': 10.6.2(@types/react-dom@19.3.0(@types/react@19.3.0))(@types/react@19.3.0)(react-dom@19.3.1(react@19.3.1))(react@19.3.1)(storybook@10.6.2(@types/react@19.3.0)(prettier@2.8.8)(react@19.3.1))(typescript@7.0.2) empathic: 2.0.1 - magic-string: 1.2.3 + magic-string: 1.4.3 react: 19.3.1 react-docgen: 8.0.3 react-dom: 19.3.1(react@19.3.1) @@ -6338,8 +6318,6 @@ snapshots: ansi-styles@5.2.0: {} - argparse@2.0.1: {} - argparse@3.0.3: {} aria-hidden@1.2.6: @@ -6654,10 +6632,6 @@ snapshots: js-tokens@4.0.0: {} - js-yaml@5.4.3: - dependencies: - argparse: 2.0.1 - js-yaml@5.5.0: dependencies: argparse: 3.0.3 @@ -6832,10 +6806,6 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.6.0 - magic-string@1.2.3: - dependencies: - '@jridgewell/sourcemap-codec': 1.5.5 - magic-string@1.4.3: dependencies: '@jridgewell/sourcemap-codec': 1.6.0 @@ -7516,10 +7486,7 @@ snapshots: yallist@3.1.1: {} - yaml@2.9.0: {} - - yaml@2.9.1: - optional: true + yaml@2.9.1: {} zustand@4.5.7(@types/react@19.3.0)(react@19.3.1): dependencies: From f3acc60c6d80e42a420724f7b927a3a919ddb220 Mon Sep 17 00:00:00 2001 From: Fabrizio Antonangeli Date: Wed, 28 Oct 2026 18:29:01 +0100 Subject: [PATCH 06/12] Fixes comment: https://github.com/open-workflow-specification/editor/pull/504#discussion_r4403743464 Signed-off-by: Fabrizio Antonangeli --- examples/vanilla-web-component/src/text-editor-element.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/vanilla-web-component/src/text-editor-element.ts b/examples/vanilla-web-component/src/text-editor-element.ts index 934f00be..6e054718 100644 --- a/examples/vanilla-web-component/src/text-editor-element.ts +++ b/examples/vanilla-web-component/src/text-editor-element.ts @@ -116,6 +116,7 @@ export class TextEditorElement extends HTMLElement { private handleContentChange = (newContent: string): void => { this._content = newContent; + this.render(); this.dispatchEvent( new CustomEvent("change", { detail: { content: newContent }, From 3fe6bddbb92c02d4400059d8b1f7877721ee72ad Mon Sep 17 00:00:00 2001 From: Fabrizio Antonangeli Date: Thu, 12 Nov 2026 17:50:33 +0100 Subject: [PATCH 07/12] Fix oxlint warning and converted sampleWorkflow to yaml Signed-off-by: Fabrizio Antonangeli --- examples/vanilla-web-component/src/index.ts | 2 ++ .../src/sample-workflow.ts | 31 +++++++------------ 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/examples/vanilla-web-component/src/index.ts b/examples/vanilla-web-component/src/index.ts index 017c9c3f..fca6ea1f 100644 --- a/examples/vanilla-web-component/src/index.ts +++ b/examples/vanilla-web-component/src/index.ts @@ -16,6 +16,8 @@ import "@openworkflowspec/dual-editor/styles.css"; import { DualEditorElement } from "./dual-editor-element"; +// Vite transforms this module import into a Worker constructor. +// oxlint-disable-next-line import/default import EditorWorker from "@openworkflowspec/text-editor/editor-worker?worker"; Object.assign(self, { diff --git a/examples/vanilla-web-component/src/sample-workflow.ts b/examples/vanilla-web-component/src/sample-workflow.ts index 0c600ce6..8d02ede0 100644 --- a/examples/vanilla-web-component/src/sample-workflow.ts +++ b/examples/vanilla-web-component/src/sample-workflow.ts @@ -14,22 +14,15 @@ * limitations under the License. */ -export const sampleWorkflow = `{ - "document": { - "dsl": "1.0.3", - "namespace": "examples", - "name": "hello-world", - "version": "0.1.0" - }, - "do": [ - { - "greet": { - "call": "http", - "with": { - "method": "GET", - "endpoint": "https://httpbin.org/get" - } - } - } - ] -}`; +export const sampleWorkflow = `document: + dsl: "1.0.3" + namespace: examples + name: hello-world + version: "0.1.0" +do: + - greet: + call: http + with: + method: GET + endpoint: https://httpbin.org/get +`; From 332469d45bee797f88f2570425decf5cc7454280 Mon Sep 17 00:00:00 2001 From: Fabrizio Antonangeli Date: Thu, 12 Nov 2026 18:21:31 +0100 Subject: [PATCH 08/12] Alignements with main Signed-off-by: Fabrizio Antonangeli --- examples/vanilla-web-component/index.html | 5 +- examples/vanilla-web-component/package.json | 8 +- .../src/sample-workflow.ts | 67 +++++++- .../src/text-editor-element.ts | 143 ------------------ examples/vanilla-web-component/vite.config.ts | 1 - 5 files changed, 64 insertions(+), 160 deletions(-) delete mode 100644 examples/vanilla-web-component/src/text-editor-element.ts diff --git a/examples/vanilla-web-component/index.html b/examples/vanilla-web-component/index.html index fc48cbf3..d189d0a2 100644 --- a/examples/vanilla-web-component/index.html +++ b/examples/vanilla-web-component/index.html @@ -22,9 +22,6 @@ - +

Dual Editor — Web Component Example

- - + const editor = document.querySelector("openworkflowspec-dual-editor"); + editor.content = sampleWorkflow; + + From b30b81ef97582c482a0c7f78faf5ec03fb01ec6d Mon Sep 17 00:00:00 2001 From: Fabrizio Antonangeli Date: Fri, 13 Nov 2026 15:32:22 +0100 Subject: [PATCH 11/12] Fixes comment: https://github.com/open-workflow-specification/editor/pull/504#discussion_r4561871439 Signed-off-by: Fabrizio Antonangeli --- packages/dual-editor/README.md | 8 ++++++++ packages/text-editor/README.md | 4 ++-- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/dual-editor/README.md b/packages/dual-editor/README.md index 34c33e6a..3e941157 100644 --- a/packages/dual-editor/README.md +++ b/packages/dual-editor/README.md @@ -40,6 +40,14 @@ function App() { The component fills its parent. Give the parent a definite height. Edits in either pane are synchronized and reported through `onContentChange`. Drag the divider to resize the panes; keyboard users can focus it and use the arrow keys, with Shift for larger steps. On narrow screens the panes stack vertically and the divider resizes their heights. +## Monaco Editor Worker + +The Dual Editor uses the Text Editor internally. The host application must configure Monaco's built-in Editor Worker before mounting the component. + +See the [Text Editor documentation](../text-editor/README.md#monaco-editor-worker) for the worker configuration. + +No additional Dual Editor props are required. + ## Props | Prop | Type | Required | Default | Description | diff --git a/packages/text-editor/README.md b/packages/text-editor/README.md index 38f173b6..04d1519c 100644 --- a/packages/text-editor/README.md +++ b/packages/text-editor/README.md @@ -71,7 +71,7 @@ function App() { Monaco's built-in `editorWorkerService` requires a separate worker from the OWS language-service worker passed through `createLanguageServiceWorker`. -The host application must configure `MonacoEnvironment` before mounting the Text Editor (including when it is used through the Dual Editor). For Vite: +The host application must configure `MonacoEnvironment` before mounting the Text Editor. For Vite: ```ts import EditorWorker from "@openworkflowspec/text-editor/editor-worker?worker"; @@ -88,7 +88,7 @@ Object.assign(self, { }); ``` -The `?worker` suffix is specific to Vite. Other bundlers must configure equivalent worker loading for `@openworkflowspec/text-editor/editor-worker`. This configuration belongs to the host application, not to the Text Editor or Dual Editor props. +The `?worker` suffix is specific to Vite. Other bundlers must configure equivalent worker loading for `@openworkflowspec/text-editor/editor-worker`. This configuration belongs to the host application, not to the Text Editor props. The OWS language-service worker remains separate and is created using `createLanguageServiceWorker` as shown above. From 98609af5aaf4387c3c9bf4318acc1a0bd31f2341 Mon Sep 17 00:00:00 2001 From: Fabrizio Antonangeli Date: Fri, 13 Nov 2026 15:33:38 +0100 Subject: [PATCH 12/12] Fixes: https://github.com/open-workflow-specification/editor/pull/504#discussion_r4561881452 Signed-off-by: Fabrizio Antonangeli --- pnpm-lock.yaml | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cee92344..c7fc88da 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2874,6 +2874,9 @@ packages: resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==} engines: {node: '>=10'} + argparse@2.0.1: + resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + argparse@3.0.3: resolution: {integrity: sha512-Sn98ftV3KfsO8xfLPHG6oT8y+b0yvbrLgZjgPDXsharNY15tTAjqIsIju4S32nl6/iEUNNE4v+yL2Zhm8ooP3w==} @@ -3266,6 +3269,10 @@ packages: js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} + js-yaml@5.4.3: + resolution: {integrity: sha512-yzzNtgczwgoVHNigCyKTXcQJU4Y8t/ikU4UxXW0BvrLfHTGWZhsNcOT2s/a7vn81/4KqVnNmHjaUEPlvWnNwVw==} + hasBin: true + js-yaml@5.5.0: resolution: {integrity: sha512-paNr4LFIFPjeeSmwNYdrb8FafLLG/Cr2Af3GjbsHJ5CxIjH4r0c2emlmRdAtpPAieP1gRVzk6buBbVP5gBMGAg==} hasBin: true @@ -4352,7 +4359,7 @@ snapshots: '@changesets/parse@1.0.0': dependencies: '@changesets/types': 7.0.0 - yaml: 2.9.1 + yaml: 2.9.0 '@changesets/pre@3.0.0': dependencies: @@ -4573,7 +4580,7 @@ snapshots: dependencies: jju: 1.4.0 tinyglobby: 0.2.17 - yaml: 2.9.1 + yaml: 2.9.0 '@mdx-js/react@3.1.1(@types/react@19.3.0)(react@19.3.1)': dependencies: @@ -4601,7 +4608,7 @@ snapshots: dependencies: ajv: 8.20.0 ajv-formats: 3.0.1(ajv@8.20.0) - js-yaml: 5.5.0 + js-yaml: 5.4.3 semver: 7.8.5 '@oxc-parser/binding-android-arm-eabi@0.127.0': @@ -6142,6 +6149,8 @@ snapshots: ansi-styles@5.2.0: {} + argparse@2.0.1: {} + argparse@3.0.3: {} aria-hidden@1.2.6: @@ -6470,6 +6479,10 @@ snapshots: js-tokens@4.0.0: {} + js-yaml@5.4.3: + dependencies: + argparse: 2.0.1 + js-yaml@5.5.0: dependencies: argparse: 3.0.3