@knime/kds-code-editor 2.6.3

package/dist/json.worker-B5MqtfsC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json.worker-B5MqtfsC.js","names":[],"sources":[],"mappings":""}

package/dist/src/CodeEditor/KdsCodeEditor.vue.d.ts

@@ -0,0 +1,18 @@
+import { editor } from 'monaco-editor';
+import { KdsCodeEditorProps } from './types';
+type __VLS_Props = KdsCodeEditorProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    /** The underlying Monaco editor instance, available after mount. */
+    getEditor: () => editor.IStandaloneCodeEditor | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=KdsCodeEditor.vue.d.ts.map

package/dist/src/CodeEditor/KdsCodeEditor.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KdsCodeEditor.vue.d.ts","sourceRoot":"","sources":["../../../src/CodeEditor/KdsCodeEditor.vue"],"names":[],"mappings":"AAqbA,OAAO,EAAW,MAAM,EAAE,MAAM,eAAe,CAAC;AAchD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAIlD,KAAK,WAAW,GAAG,kBAAkB,CAAC;AAkQtC,KAAK,gBAAgB,GAAG;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAKF,KAAK,iBAAiB,GAAG,WAAW,GAAG,gBAAgB,CAAC;AAyNxD,QAAA,MAAM,YAAY;IAzOhB,oEAAoE;;;;;;kFA6OpE,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/src/CodeEditor/enums.d.ts

@@ -0,0 +1,7 @@
+export declare const kdsCodeEditorState: {
+    readonly DEFAULT: "default";
+    readonly ERROR: "error";
+    readonly WARNING: "warning";
+};
+export declare const kdsCodeEditorStates: ("warning" | "default" | "error")[];
+//# sourceMappingURL=enums.d.ts.map

package/dist/src/CodeEditor/enums.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enums.d.ts","sourceRoot":"","sources":["../../../src/CodeEditor/enums.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB;;;;CAIrB,CAAC;AAEX,eAAO,MAAM,mBAAmB,qCAAoC,CAAC"}

package/dist/src/CodeEditor/index.d.ts

@@ -0,0 +1,5 @@
+export { default as KdsCodeEditor } from './KdsCodeEditor.vue';
+export { setupMonacoEnvironment } from './monacoEnvironment';
+export * from './enums';
+export type * from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/CodeEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CodeEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC7D,cAAc,SAAS,CAAC;AACxB,mBAAmB,SAAS,CAAC"}

package/dist/src/CodeEditor/monacoEnvironment.d.ts

@@ -0,0 +1,2 @@
+export declare const setupMonacoEnvironment: () => void;
+//# sourceMappingURL=monacoEnvironment.d.ts.map

package/dist/src/CodeEditor/monacoEnvironment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"monacoEnvironment.d.ts","sourceRoot":"","sources":["../../../src/CodeEditor/monacoEnvironment.ts"],"names":[],"mappings":"AAGA,OAAO,gBAAgB,CAAC;AAexB,eAAO,MAAM,sBAAsB,YAgBlC,CAAC"}

package/dist/src/CodeEditor/tomlLanguage.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=tomlLanguage.d.ts.map

package/dist/src/CodeEditor/tomlLanguage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tomlLanguage.d.ts","sourceRoot":"","sources":["../../../src/CodeEditor/tomlLanguage.ts"],"names":[],"mappings":""}

package/dist/src/CodeEditor/types.d.ts

@@ -0,0 +1,101 @@
+import { KdsButtonProps, KdsMenuButtonProps, KdsToggleButtonProps } from '@knime/kds-components';
+import { kdsCodeEditorState } from './enums';
+export type KdsCodeEditorState = (typeof kdsCodeEditorState)[keyof typeof kdsCodeEditorState];
+/**
+ * Distributive `Omit` that preserves discriminated unions when removing a key.
+ */
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+/**
+ * Renders a `KdsButton`. Provide `onClick` to react to clicks.
+ */
+export type KdsCodeEditorButtonAction = {
+    type: "button";
+    props: DistributiveOmit<KdsButtonProps, "size">;
+    onClick?: (event: MouseEvent) => void;
+};
+/**
+ * Renders a `KdsToggleButton`. Provide `onUpdateModelValue` to react to
+ * toggle changes.
+ */
+export type KdsCodeEditorToggleButtonAction = {
+    type: "toggleButton";
+    props: DistributiveOmit<KdsToggleButtonProps, "size"> & {
+        modelValue?: boolean;
+    };
+    onUpdateModelValue?: (value: boolean) => void;
+};
+/**
+ * Renders a `KdsMenuButton`. Provide `onItemClick` to react to menu item
+ * selection.
+ */
+export type KdsCodeEditorMenuButtonAction = {
+    type: "menuButton";
+    props: DistributiveOmit<KdsMenuButtonProps, "size">;
+    onItemClick?: (id: string) => void;
+};
+/**
+ * A header action button. Rendered at a fixed `small` size.
+ */
+export type KdsCodeEditorAction = KdsCodeEditorButtonAction | KdsCodeEditorToggleButtonAction | KdsCodeEditorMenuButtonAction;
+export type KdsCodeEditorProps = {
+    /**
+     * The Monaco language id used for syntax highlighting (e.g. `python`,
+     * `json`, `sql`). In addition to Monaco's built-in languages, `toml` is
+     * supported via a bundled custom grammar. Defaults to `plaintext`.
+     */
+    language?: string;
+    /**
+     * The label shown on the left of the header. Defaults to the uppercased
+     * `language` value.
+     */
+    languageLabel?: string;
+    /**
+     * Hides the entire header (language label, read-only hint, action buttons,
+     * copy button), leaving the bare code editor. The editor's accessible name
+     * still announces the language. Defaults to `false`.
+     */
+    hideHeader?: boolean;
+    /**
+     * Visual state of the editor. `error` and `warning` tint the header and the
+     * sub-text below the editor.
+     */
+    state?: KdsCodeEditorState;
+    /**
+     * Shows the overview ruler — the coloured error / warning / selection
+     * markers painted on the scrollbar. Defaults to `false`.
+     */
+    overviewRuler?: boolean;
+    /**
+     * Renders the editor read-only (still focusable, selectable and copyable)
+     * and greys out its content.
+     */
+    readOnly?: boolean;
+    /**
+     * Optional helper / validation message shown below the editor. Its colour
+     * follows the `state`.
+     */
+    subText?: string;
+    /**
+     * Shows the built-in copy-to-clipboard action button in the header.
+     */
+    copyable?: boolean;
+    /**
+     * Header action buttons, rendered right-aligned before the built-in copy
+     * button. Rendered at a fixed `small` size.
+     */
+    editorActions?: KdsCodeEditorAction[];
+    /**
+     * Minimum number of visible rows the editor grows from. When neither
+     * `minRows` nor `maxRows` is set, the editor fills its container's height
+     * instead.
+     */
+    minRows?: number;
+    /**
+     * Maximum number of visible rows. When set, the editor caps at this height
+     * and scrolls past it. When unset (but `minRows` is set), the editor grows
+     * with its content to avoid nested scrollbars.
+     */
+    maxRows?: number;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/CodeEditor/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/CodeEditor/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE7C,MAAM,MAAM,kBAAkB,GAC5B,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,OAAO,kBAAkB,CAAC,CAAC;AAE/D;;GAEG;AAKH,KAAK,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,WAAW,IAAI,CAAC,SAAS,OAAO,GAC/D,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GACV,KAAK,CAAC;AAEV;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,gBAAgB,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,+BAA+B,GAAG;IAC5C,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG;QACtD,UAAU,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;IACF,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC/C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,6BAA6B,GAAG;IAC1C,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,gBAAgB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;IACpD,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAC3B,yBAAyB,GACzB,+BAA+B,GAC/B,6BAA6B,CAAC;AAElC,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACtC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './CodeEditor';
+export type * from './CodeEditor';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,mBAAmB,cAAc,CAAC"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@knime/kds-code-editor",
+  "type": "module",
+  "version": "2.6.3",
+  "description": "Package containing the code editor component of the KNIME Design System",
+  "license": "See LICENSE file",
+  "author": "KNIME AG, Zurich, Switzerland",
+  "dependencies": {
+    "@knime/kds-components": "^2.6.3",
+    "@knime/kds-styles": "^2.6.3"
+  },
+  "devDependencies": {
+    "@storybook/vue3-vite": "^10.4.6",
+    "@tsconfig/node24": "^24.0.4",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vue/test-utils": "^2.4.11",
+    "@vueuse/core": "~14.3.0",
+    "monaco-editor": "^0.55.1",
+    "storybook": "^10.4.6",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.3",
+    "vite-plugin-dts": "^5.0.3",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vite-svg-loader": "^5.1.1",
+    "vue": "3.5.39"
+  },
+  "peerDependencies": {
+    "@vueuse/core": "~13.8.0",
+    "monaco-editor": "^0.55.1",
+    "vue": "~3.5.0"
+  },
+  "files": [
+    "dist",
+    "patches",
+    "CHANGELOG.md"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "engines": {
+    "node": "24.10.0",
+    "npm": "please-use-pnpm"
+  },
+  "sideEffects": [
+    "dist/*.css"
+  ],
+  "scripts": {
+    "build": "pnpm run type-check && vite build",
+    "type-check": "vue-tsc --build"
+  }
+}

package/patches/monaco-editor@0.55.1.patch

@@ -0,0 +1,85 @@
+diff --git a/esm/vs/editor/browser/controller/mouseHandler.js b/esm/vs/editor/browser/controller/mouseHandler.js
+index be17f497db57379c0e5f5fc4d87b3a38ffe55a44..8092c6b4d2b5e988fc66ac82a178443761bb3c3a 100644
+--- a/esm/vs/editor/browser/controller/mouseHandler.js
++++ b/esm/vs/editor/browser/controller/mouseHandler.js
+@@ -38,7 +38,7 @@ class MouseHandler extends ViewEventHandler {
+             // remove this listener
+             if (!this._mouseLeaveMonitor) {
+                 this._mouseLeaveMonitor = addDisposableListener(this.viewHelper.viewDomNode.ownerDocument, 'mousemove', (e) => {
+-                    if (!this.viewHelper.viewDomNode.contains(e.target)) {
++                    if (!this.viewHelper.viewDomNode.contains(e.composedPath()[0] ?? e.target)) {
+                         // went outside the editor!
+                         this._onMouseLeave(new EditorMouseEvent(e, false, this.viewHelper.viewDomNode));
+                     }
+diff --git a/esm/vs/editor/contrib/suggest/browser/suggestWidget.js b/esm/vs/editor/contrib/suggest/browser/suggestWidget.js
+index 7ff8f73fee8c7f5643ca75879553e024f765db28..76f74d535944cce983036f90b7729b0e190b01d7 100644
+--- a/esm/vs/editor/contrib/suggest/browser/suggestWidget.js
++++ b/esm/vs/editor/contrib/suggest/browser/suggestWidget.js
+@@ -1,4 +1,4 @@
+-import { Dimension, append, $, addStandardDisposableListener, hide, show, runAtThisOrScheduleAtNextAnimationFrame, getWindow, getClientArea, getDomNodePagePosition } from '../../../../base/browser/dom.js';
++import { Dimension, append, $, addStandardDisposableListener, hide, show, runAtThisOrScheduleAtNextAnimationFrame, getWindow, getClientArea, getDomNodePagePosition, getShadowRoot } from '../../../../base/browser/dom.js';
+ import '../../../../base/browser/ui/codicons/codicon/codicon.css';
+ import '../../../../base/browser/ui/codicons/codicon/codicon-modifiers.css';
+ import { List } from '../../../../base/browser/ui/list/listWidget.js';
+@@ -692,7 +692,16 @@ let SuggestWidget = class SuggestWidget {
+             // happens when running tests
+             return;
+         }
+-        const bodyBox = getClientArea(this.element.domNode.ownerDocument.body);
++        const shadowRoot = getShadowRoot(this.element.domNode);
++        let bodyBox;
++        let containerTop = 0;
++        if (shadowRoot) {
++            const hostRect = shadowRoot.host.getBoundingClientRect();
++            bodyBox = new Dimension(hostRect.width, hostRect.bottom);
++            containerTop = hostRect.top;
++        } else {
++            bodyBox = getClientArea(this.element.domNode.ownerDocument.body);
++        }
+         const info = this.getLayoutInfo();
+         if (!size) {
+             size = info.defaultSize;
+@@ -724,7 +733,7 @@ let SuggestWidget = class SuggestWidget {
+             const cursorBox = this.editor.getScrolledVisiblePosition(this.editor.getPosition());
+             const cursorBottom = editorBox.top + cursorBox.top + cursorBox.height;
+             const maxHeightBelow = Math.min(bodyBox.height - cursorBottom - info.verticalPadding, fullHeight);
+-            const availableSpaceAbove = editorBox.top + cursorBox.top - info.verticalPadding;
++            const availableSpaceAbove = editorBox.top + cursorBox.top - containerTop - info.verticalPadding;
+             const maxHeightAbove = Math.min(availableSpaceAbove, fullHeight);
+             let maxHeight = Math.min(Math.max(maxHeightAbove, maxHeightBelow) + info.borderHeight, fullHeight);
+             if (height === this._cappedHeight?.capped) {
+diff --git a/esm/vs/editor/contrib/suggest/browser/suggestWidgetDetails.js b/esm/vs/editor/contrib/suggest/browser/suggestWidgetDetails.js
+index ed1335210aceda06699ef061a8c23934222b5806..7519e203e37de4eaab8bdcd0afe1bc297c00bf6d 100644
+--- a/esm/vs/editor/contrib/suggest/browser/suggestWidgetDetails.js
++++ b/esm/vs/editor/contrib/suggest/browser/suggestWidgetDetails.js
+@@ -1,4 +1,4 @@
+-import { Dimension, $, append, show, clearNode, hide, size, getClientArea } from '../../../../base/browser/dom.js';
++import { Dimension, $, append, show, clearNode, hide, size, getClientArea, getShadowRoot } from '../../../../base/browser/dom.js';
+ import { ResizableHTMLElement } from '../../../../base/browser/ui/resizable/resizable.js';
+ import { DomScrollableElement } from '../../../../base/browser/ui/scrollbar/scrollableElement.js';
+ import { Codicon } from '../../../../base/common/codicons.js';
+@@ -307,7 +307,10 @@ class SuggestDetailsOverlay {
+         this._placeAtAnchor(this._anchorBox, this._userSize ?? this.widget.size, preferAlignAtTop);
+     }
+     _placeAtAnchor(anchorBox, size, preferAlignAtTop) {
+-        const bodyBox = getClientArea(this.getDomNode().ownerDocument.body);
++        const shadowRoot = getShadowRoot(this.getDomNode());
++        const bodyBox = shadowRoot
++            ? (() => { const r = shadowRoot.host.getBoundingClientRect(); return new Dimension(r.right, r.bottom); })()
++            : getClientArea(this.getDomNode().ownerDocument.body);
+         const info = this.widget.getLayoutInfo();
+         const defaultMinSize = new Dimension(220, 2 * info.lineHeight);
+         const defaultTop = anchorBox.top;
+diff --git a/esm/vs/platform/actionWidget/browser/actionList.js b/esm/vs/platform/actionWidget/browser/actionList.js
+index 414405319ded9b3671a070b7405b7150afaa8321..cd2b620945f5ac6a2fb4594e9394277296051018 100644
+--- a/esm/vs/platform/actionWidget/browser/actionList.js
++++ b/esm/vs/platform/actionWidget/browser/actionList.js
+@@ -254,7 +254,7 @@ let ActionList = class ActionList extends Disposable {
+             // For finding width dynamically (not using resize observer)
+             const itemWidths = this._allMenuItems.map((_, index) => {
+                 // eslint-disable-next-line no-restricted-syntax
+-                const element = this.domNode.ownerDocument.getElementById(this._list.getElementID(index));
++                const element = this.domNode.getRootNode().getElementById(this._list.getElementID(index));
+                 if (element) {
+                     element.style.width = 'auto';
+                     const width = element.getBoundingClientRect().width;