@knime/kds-code-editor 6.7.1 → 6.8.1

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @knime/kds-code-editor
 
+## 6.8.1
+
+### Patch Changes
+
+- f98f6e3: `KdsCodeEditor` / `KdsCodeDiffEditor`: fixed cursor placement and selection
+  width being offset from the rendered text. Monaco measured the character width
+  before the code font was loaded and kept the fallback font's metrics for the
+  whole page; the code font is now loaded explicitly and the fonts are
+  re-measured once it arrived.
+- Updated dependencies [2d8e635]
+  - @knime/kds-components@6.8.1
+  - @knime/kds-styles@6.8.1
+
+## 6.8.0
+
+### Minor Changes
+
+- de14193: - `KdsCodeEditor`:
+  - added `highlighted` prop — keeps the focus highlight on while the code area
+    is not focused and marks the editor as the current one via `aria-current`,
+    for lists of editors where one stays the target of outside actions after the
+    focus has moved on. At most one editor of a list may set it; enforcing that
+    is the caller's job.
+  - added `preserveSubTextSpace` prop — reserves the sub-text line while no
+    `subText` is shown, preventing layout shifts when a validation message
+    appears or disappears.
+  - `KdsCodeDiffEditor`: added `preserveSubTextSpace` prop — reserves the
+    sub-text line while no `subText` is shown, preventing layout shifts when a
+    validation message appears or disappears.
+
+### Patch Changes
+
+- Updated dependencies [de14193]
+  - @knime/kds-components@6.8.0
+  - @knime/kds-styles@6.8.0
+
 ## 6.7.1
 
 ### Patch Changes

package/dist/index.css

@@ -1,13 +1,13 @@
 
 .kds-code-editor {
-&[data-v-81449d1b] {
+&[data-v-03dd8fb6] {
   display: flex;
   flex-direction: column;
 
   /* No row bounds set: fill the width and height of the container. */
 }
 .editor {
-&[data-v-81449d1b] {
+&[data-v-03dd8fb6] {
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -15,18 +15,19 @@
     border: var(--kds-border-base-subtle);
     border-radius: var(--kds-border-radius-container-0-50x);
 
-    /* Only outline the whole editor when the code area (Monaco) is focused —
-       header buttons keep their own focus ring. */
+    /* Outline the whole editor while the code area (Monaco) is focused, or
+       while the owning component keeps the highlight on without it — header
+       buttons keep their own focus ring either way. */
 
     /* Keeps its natural height — in fill mode only the code area grows /
        shrinks with the container. */
 }
-&.focused[data-v-81449d1b] {
+&.focused[data-v-03dd8fb6] {
       outline: var(--kds-border-action-focused);
       outline-offset: var(--kds-spacing-offset-focus);
 }
 .header {
-&[data-v-81449d1b] {
+&[data-v-03dd8fb6] {
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -36,7 +37,7 @@
 
       /* Visually hidden, still announced by screen readers. */
 }
-.left-block[data-v-81449d1b] {
+.left-block[data-v-03dd8fb6] {
         display: flex;
         flex: 1;
         gap: var(--kds-spacing-container-0-25x);
@@ -47,13 +48,13 @@
            buttons are present (matches the small button height). */
         min-height: var(--kds-dimension-component-height-1-5x);
 }
-.action-buttons[data-v-81449d1b] {
+.action-buttons[data-v-03dd8fb6] {
         display: flex;
         flex-shrink: 0;
         gap: var(--kds-spacing-container-0-12x);
         align-items: center;
 }
-.title[data-v-81449d1b] {
+.title[data-v-03dd8fb6] {
         overflow: hidden;
         text-overflow: ellipsis;
         font: var(--kds-font-base-interactive-small);
@@ -61,7 +62,7 @@
         white-space: nowrap;
 }
 .change-counts {
-&[data-v-81449d1b] {
+&[data-v-03dd8fb6] {
         display: flex;
         flex-shrink: 0;
         gap: var(--kds-spacing-container-0-12x);
@@ -72,14 +73,14 @@
         margin-left: var(--kds-spacing-container-0-25x);
         font: var(--kds-font-base-interactive-small);
 }
-.added-lines[data-v-81449d1b] {
+.added-lines[data-v-03dd8fb6] {
           color: var(--kds-color-text-and-icon-success);
 }
-.removed-lines[data-v-81449d1b] {
+.removed-lines[data-v-03dd8fb6] {
           color: var(--kds-color-text-and-icon-danger);
 }
 }
-.change-counts-for-screen-readers[data-v-81449d1b] {
+.change-counts-for-screen-readers[data-v-03dd8fb6] {
         position: absolute;
         width: 1px;
         height: 1px;
@@ -91,33 +92,33 @@
         clip-path: inset(50%);
 }
 }
-&.error .header[data-v-81449d1b] {
+&.error .header[data-v-03dd8fb6] {
       background-color: var(--kds-color-background-static-danger-muted);
 }
-&.warning .header[data-v-81449d1b] {
+&.warning .header[data-v-03dd8fb6] {
       background-color: var(--kds-color-background-static-warning-muted);
 }
-.code[data-v-81449d1b] {
+.code[data-v-03dd8fb6] {
       width: 100%;
 }
-.footer[data-v-81449d1b] {
+.footer[data-v-03dd8fb6] {
       flex-shrink: 0;
       width: 100%;
 }
 }
 &.fill {
-&[data-v-81449d1b] {
+&[data-v-03dd8fb6] {
     width: 100%;
     height: 100%;
 
     /* A collapsed editor keeps its header height instead of stretching. */
 }
-.editor[data-v-81449d1b],
-    .code[data-v-81449d1b] {
+.editor[data-v-03dd8fb6],
+    .code[data-v-03dd8fb6] {
       flex: 1 1 auto;
       min-height: 0;
 }
-.editor.collapsed[data-v-81449d1b] {
+.editor.collapsed[data-v-03dd8fb6] {
       flex: 0 0 auto;
 }
 }

package/dist/index.js

@@ -52,6 +52,10 @@ var BaseCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			default: false
 		},
 		subText: { default: () => void 0 },
+		preserveSubTextSpace: {
+			type: Boolean,
+			default: false
+		},
 		copyable: {
 			type: Boolean,
 			default: true
@@ -62,7 +66,7 @@ var BaseCodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 		},
 		copyButtonAriaLabel: { default: "" },
 		editorActions: { default: () => void 0 },
-		focused: {
+		showFocusHighlight: {
 			type: Boolean,
 			default: false
 		},
@@ -92,7 +96,7 @@ getCodeContainer: () => codeContainer.value });
 				"editor",
 				__props.state,
 				{
-					focused: __props.focused,
+					focused: __props.showFocusHighlight,
 					collapsed: __props.collapsed
 				}
 			]) }, [
@@ -146,18 +150,19 @@ getCodeContainer: () => codeContainer.value });
 					style: normalizeStyle(__props.codeHeight ? { height: __props.codeHeight } : void 0)
 				}, null, 12, _hoisted_10), [[vShow, !__props.collapsed]]),
 				_ctx.$slots.footer ? withDirectives((openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "footer", {}, void 0, true)], 512)), [[vShow, !__props.collapsed]]) : createCommentVNode("", true)
-			], 2), __props.subText ? (openBlock(), createBlock(unref(KdsSubText), {
-				key: 0,
+			], 2), createVNode(unref(KdsSubText), {
 				id: __props.subTextId,
 				"sub-text": __props.subText,
+				"preserve-sub-text-space": __props.preserveSubTextSpace,
 				error: __props.state === unref(kdsCodeEditorState).ERROR,
 				warning: __props.state === unref(kdsCodeEditorState).WARNING
 			}, null, 8, [
 				"id",
 				"sub-text",
+				"preserve-sub-text-space",
 				"error",
 				"warning"
-			])) : createCommentVNode("", true)], 2);
+			])], 2);
 		};
 	}
 });
@@ -170,7 +175,7 @@ var _plugin_vue_export_helper_default = (sfc, props) => {
 };
 //#endregion
 //#region src/_helper/BaseCodeEditor.vue
-var BaseCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-81449d1b"]]);
+var BaseCodeEditor_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseCodeEditor_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-03dd8fb6"]]);
 //#endregion
 //#region ../styles/dist/tokens/ts/color.js
 /**
@@ -5690,11 +5695,30 @@ var registerTomlLanguage = () => {
 };
 //#endregion
 //#region src/CodeEditor/monacoEnvironment.ts
-document.fonts?.ready.then(() => {
-	editor.remeasureFonts();
-});
+var MEASURED_CHARACTERS = "n 0123456789|/-_ilm%·";
+var fontRemeasureScheduled = false;
+/**
+* Monaco measures character widths when an editor is created, caches them for
+* the whole page, and derives cursor placement and selection width from them.
+* That measurement is also the first use of the code font, so it happens
+* before the font is loaded and keeps the fallback font's metrics — cursor and
+* selection then drift away from the glyphs (KDS-1002).
+*
+* `document.fonts.ready` does not help: it resolves while nothing is pending,
+* which is the case before any editor exists. So load the code font explicitly
+* and re-measure once it is there — also when loading failed, in which case
+* the fallback metrics are at least measured consistently.
+*/
+var remeasureFontsWhenCodeFontLoaded = () => {
+	if (fontRemeasureScheduled || !document.fonts) return;
+	fontRemeasureScheduled = true;
+	document.fonts.load(codeFont.css.value, MEASURED_CHARACTERS).catch(() => []).then(() => {
+		editor.remeasureFonts();
+	});
+};
 var setupMonacoEnvironment = () => {
 	registerTomlLanguage();
+	remeasureFontsWhenCodeFontLoaded();
 	if (self.MonacoEnvironment) return;
 	self.MonacoEnvironment = { getWorker: async (_workerId, label) => {
 		if (label === "json") {
@@ -5725,7 +5749,15 @@ var KdsCodeEditor_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: false
 		},
+		highlighted: {
+			type: Boolean,
+			default: false
+		},
 		subText: { default: () => void 0 },
+		preserveSubTextSpace: {
+			type: Boolean,
+			default: false
+		},
 		copyable: {
 			type: Boolean,
 			default: true
@@ -5746,6 +5778,7 @@ var KdsCodeEditor_default = /* @__PURE__ */ defineComponent({
 		let editorInstance;
 		let overflowWidgetsDomNode;
 		const isEditorFocused = ref(false);
+		const showFocusHighlight = computed(() => isEditorFocused.value || __props.highlighted);
 		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.`);
 		const fillContainer = computed(() => __props.minRows === void 0 && __props.maxRows === void 0);
@@ -5767,8 +5800,14 @@ var KdsCodeEditor_default = /* @__PURE__ */ defineComponent({
 			else input.removeAttribute("aria-describedby");
 			if (__props.state === kdsCodeEditorState.ERROR) input.setAttribute("aria-invalid", "true");
 			else input.removeAttribute("aria-invalid");
+			if (__props.highlighted) input.setAttribute("aria-current", "true");
+			else input.removeAttribute("aria-current");
 		};
-		watch([() => __props.subText, () => __props.state], syncEditorInputAria);
+		watch([
+			() => __props.subText,
+			() => __props.state,
+			() => __props.highlighted
+		], syncEditorInputAria);
 		const { copy, copied } = useClipboard({ copiedDuring: 2e3 });
 		const copyButtonAriaLabel = computed(() => copied.value ? `Copied ${headerLabel.value} to clipboard` : `Copy ${headerLabel.value} to clipboard`);
 		const copyToClipboard = () => {
@@ -5846,11 +5885,12 @@ getEditor: () => editorInstance });
 				state: __props.state,
 				"read-only": __props.readOnly,
 				"sub-text": __props.subText,
+				"preserve-sub-text-space": __props.preserveSubTextSpace,
 				copyable: __props.copyable,
 				copied: unref(copied),
 				"copy-button-aria-label": copyButtonAriaLabel.value,
 				"editor-actions": __props.editorActions,
-				focused: isEditorFocused.value,
+				"show-focus-highlight": showFocusHighlight.value,
 				fill: fillContainer.value,
 				"code-height": editorHeight.value,
 				onCopy: copyToClipboard
@@ -5865,11 +5905,12 @@ getEditor: () => editorInstance });
 				"state",
 				"read-only",
 				"sub-text",
+				"preserve-sub-text-space",
 				"copyable",
 				"copied",
 				"copy-button-aria-label",
 				"editor-actions",
-				"focused",
+				"show-focus-highlight",
 				"fill",
 				"code-height"
 			]);
@@ -5905,6 +5946,10 @@ var KdsCodeDiffEditor_default = /* @__PURE__ */ defineComponent({
 			default: false
 		},
 		subText: { default: () => void 0 },
+		preserveSubTextSpace: {
+			type: Boolean,
+			default: false
+		},
 		editorActions: { default: () => void 0 },
 		minRows: { default: () => void 0 },
 		maxRows: { default: () => void 0 },
@@ -6085,9 +6130,10 @@ getEditor: () => diffEditorInstance });
 				state: __props.state,
 				"read-only": __props.readOnly,
 				"sub-text": __props.subText,
+				"preserve-sub-text-space": __props.preserveSubTextSpace,
 				copyable: false,
 				"editor-actions": __props.editorActions,
-				focused: isEditorFocused.value,
+				"show-focus-highlight": isEditorFocused.value,
 				fill: fillContainer.value,
 				"code-height": editorHeight.value,
 				"change-summary": __props.changeSummary,
@@ -6102,8 +6148,9 @@ getEditor: () => diffEditorInstance });
 				"state",
 				"read-only",
 				"sub-text",
+				"preserve-sub-text-space",
 				"editor-actions",
-				"focused",
+				"show-focus-highlight",
 				"fill",
 				"code-height",
 				"change-summary",