@knime/kds-code-editor 6.8.0 → 6.8.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

package/dist/index.js

@@ -5695,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") {