fix #493 - Expose Monaco Editor Worker from Text Editor

.changeset/fix-monaco-editor-worker.md

@@ -0,0 +1,6 @@
+---
+"@openworkflowspec/text-editor": patch
+"@openworkflowspec/vanilla-web-component-example": patch
+---
+
+Expose the Monaco Editor Worker from the Text Editor package and configure it in the Vanilla Web Component example to prevent `editorWorkerService` errors.

examples/vanilla-web-component/src/index.ts

@@ -16,6 +16,20 @@
 
 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, {
+  MonacoEnvironment: {
+    getWorker(_workerId: string, label: string) {
+      if (label === "editorWorkerService") {
+        return new EditorWorker();
+      }
+      throw new Error(`Unexpected Monaco worker: ${label}`);
+    },
+  },
+});
 
 if (!customElements.get("openworkflowspec-dual-editor")) {
   customElements.define("openworkflowspec-dual-editor", DualEditorElement);

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                                                   |

packages/text-editor/README.md

@@ -67,6 +67,31 @@ function App() {
 }
 ```
 
+## Monaco Editor Worker
+
+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. For Vite:
+
+```ts
+import EditorWorker from "@openworkflowspec/text-editor/editor-worker?worker";
+
+Object.assign(self, {
+  MonacoEnvironment: {
+    getWorker(_workerId: string, label: string) {
+      if (label === "editorWorkerService") {
+        return new EditorWorker();
+      }
+      throw new Error(`Unexpected Monaco worker: ${label}`);
+    },
+  },
+});
+```
+
+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.
+
 ## Language service
 
 ### Lifecycle and ownership

packages/text-editor/package.json

@@ -27,6 +27,9 @@
     "./styles.css": "./dist/text-editor.css",
     "./worker": {
       "import": "./dist/worker.js"
+    },
+    "./editor-worker": {
+      "import": "./dist/editor-worker.js"
     }
   },
   "scripts": {

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";

packages/text-editor/vite.config.ts

@@ -33,6 +33,7 @@ export default defineConfig({
       entry: {
         index: "src/index.ts",
         worker: "src/worker/language.worker.ts",
+        "editor-worker": "src/worker/editor.worker.ts",
       },
       formats: ["es"],
     },