@knime/kds-code-editor 2.9.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @knime/kds-code-editor
 
+## 3.0.0
+
+### Patch Changes
+
+- 615020a: `KdsCodeEditor`: add a "Copy to clipboard" tooltip to the copy button
+- ced1a3a: `KdsCodeEditor`: fix monaco popovers appearing in the wrong place when the editor is rendered inside a container with a CSS `transform`
+- Updated dependencies [13cbb42]
+- Updated dependencies [356af93]
+- Updated dependencies [356af93]
+- Updated dependencies [e366f77]
+- Updated dependencies [e26e15d]
+  - @knime/kds-styles@3.0.0
+  - @knime/kds-components@3.0.0
+
 ## 2.9.0
 
 ### Patch Changes

package/dist/index.css

@@ -1,13 +1,13 @@
 
 .kds-code-editor {
-&[data-v-c9256fb0] {
+&[data-v-26f569f5] {
   display: flex;
   flex-direction: column;
 
   /* No row bounds set: fill the width and height of the container. */
 }
 .editor {
-&[data-v-c9256fb0] {
+&[data-v-26f569f5] {
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -21,12 +21,12 @@
     /* Keeps its natural height — in fill mode only the code area grows /
        shrinks with the container. */
 }
-&.focused[data-v-c9256fb0] {
+&.focused[data-v-26f569f5] {
       outline: var(--kds-border-action-focused);
       outline-offset: var(--kds-spacing-offset-focus);
 }
 .header {
-&[data-v-c9256fb0] {
+&[data-v-26f569f5] {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -34,7 +34,7 @@
         var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-25x)
         var(--kds-spacing-container-0-75x);
 }
-.left-block[data-v-c9256fb0] {
+.left-block[data-v-26f569f5] {
         display: flex;
         flex: 1;
         gap: var(--kds-spacing-container-0-25x);
@@ -45,13 +45,13 @@
            buttons are present (matches the small button height). */
         min-height: var(--kds-dimension-component-height-1-5x);
 }
-.action-buttons[data-v-c9256fb0] {
+.action-buttons[data-v-26f569f5] {
         display: flex;
         flex-shrink: 0;
         gap: var(--kds-spacing-container-0-12x);
         align-items: center;
 }
-.title[data-v-c9256fb0] {
+.title[data-v-26f569f5] {
         overflow: hidden;
         text-overflow: ellipsis;
         font: var(--kds-font-base-interactive-small);
@@ -59,27 +59,27 @@
         white-space: nowrap;
 }
 }
-&.error .header[data-v-c9256fb0] {
+&.error .header[data-v-26f569f5] {
       background-color: var(--kds-color-background-static-danger-muted);
 }
-&.warning .header[data-v-c9256fb0] {
+&.warning .header[data-v-26f569f5] {
       background-color: var(--kds-color-background-static-warning-muted);
 }
-.code[data-v-c9256fb0] {
+.code[data-v-26f569f5] {
       width: 100%;
 }
-.footer[data-v-c9256fb0] {
+.footer[data-v-26f569f5] {
       flex-shrink: 0;
       width: 100%;
 }
 }
 &.fill {
-&[data-v-c9256fb0] {
+&[data-v-26f569f5] {
     width: 100%;
     height: 100%;
 }
-.editor[data-v-c9256fb0],
-    .code[data-v-c9256fb0] {
+.editor[data-v-26f569f5],
+    .code[data-v-26f569f5] {
       flex: 1 1 auto;
       min-height: 0;
 }

package/dist/index.js

@@ -4604,27 +4604,27 @@ var font = {
 		code: {
 			xsmall: {
 				fontFamily: "Roboto Mono",
-				fontWeight: 400,
+				fontWeight: 300,
 				fontSize: {
 					value: 10,
 					unit: "px"
 				},
 				lineHeight: "normal",
 				css: {
-					value: "400 10px/normal 'Roboto Mono', monospace",
+					value: "300 10px/normal 'Roboto Mono', monospace",
 					variable: "var(--kds-font-base-code-xsmall)"
 				}
 			},
 			small: {
 				fontFamily: "Roboto Mono",
-				fontWeight: 400,
+				fontWeight: 300,
 				fontSize: {
-					value: 11,
+					value: 12,
 					unit: "px"
 				},
 				lineHeight: "normal",
 				css: {
-					value: "400 11px/normal 'Roboto Mono', monospace",
+					value: "300 12px/normal 'Roboto Mono', monospace",
 					variable: "var(--kds-font-base-code-small)"
 				}
 			}
@@ -5169,6 +5169,7 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		const subTextId = useId();
 		const container = useTemplateRef("editor-container");
 		let editorInstance;
+		let overflowWidgetsDomNode;
 		const isEditorFocused = ref(false);
 		const headerLabel = computed(() => __props.languageLabel ?? __props.language.toUpperCase());
 		const editorAriaLabel = computed(() => `${headerLabel.value} code editor${__props.readOnly ? ", read-only" : ""}. Press Escape followed by Tab to move focus out of the editor.`);
@@ -5202,6 +5203,9 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		};
 		onMounted(() => {
 			if (!container.value) return;
+			overflowWidgetsDomNode = document.createElement("div");
+			overflowWidgetsDomNode.classList.add("monaco-editor");
+			document.body.appendChild(overflowWidgetsDomNode);
 			editorInstance = editor.create(container.value, {
 				value: modelValue.value,
 				language: __props.language,
@@ -5214,6 +5218,7 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 				fontWeight: `${codeFont.fontWeight}`,
 				fontSize: codeFont.fontSize.value,
 				fixedOverflowWidgets: true,
+				overflowWidgetsDomNode,
 				scrollbar: { alwaysConsumeMouseWheel: false },
 				readOnly: __props.readOnly,
 				theme: getMonacoTheme(isDarkMode.value),
@@ -5282,6 +5287,7 @@ var KdsCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ de
 		});
 		onUnmounted(() => {
 			editorInstance?.dispose();
+			overflowWidgetsDomNode?.remove();
 		});
 		__expose({ 
 		/** The underlying Monaco editor instance, available after mount. */
@@ -5317,6 +5323,7 @@ getEditor: () => editorInstance });
 					state: unref(copied) ? "success" : "default",
 					size: "small",
 					variant: "transparent",
+					tooltip: "Copy to clipboard",
 					onClick: copyToClipboard
 				}), null, 16, ["leading-icon", "state"])) : createCommentVNode("", true)])])) : createCommentVNode("", true),
 				createElementVNode("div", {
@@ -5349,7 +5356,7 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/CodeEditor/KdsCodeEditor.vue
-var KdsCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(KdsCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-c9256fb0"]]);
+var KdsCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(KdsCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-26f569f5"]]);
 //#endregion
 //#region src/Console/utils/buildTheme.ts
 /**