diff --git a/.changeset/fix-monaco-editor-worker.md b/.changeset/fix-monaco-editor-worker.md new file mode 100644 index 00000000..9848aac7 --- /dev/null +++ b/.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. diff --git a/examples/vanilla-web-component/src/index.ts b/examples/vanilla-web-component/src/index.ts index c8bfa88c..fca6ea1f 100644 --- a/examples/vanilla-web-component/src/index.ts +++ b/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); 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 644b4680..04d1519c 100644 --- a/packages/text-editor/README.md +++ b/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 diff --git a/packages/text-editor/package.json b/packages/text-editor/package.json index 88353ce2..7ccb0636 100644 --- a/packages/text-editor/package.json +++ b/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": { 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 52fe0f30..936bfb26 100644 --- a/packages/text-editor/vite.config.ts +++ b/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"], },