ajaxorg · nightwing · Jul 24, 2025 · Jul 25, 2025 · Feb 22, 2026 · Feb 22, 2026
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -19,7 +19,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
 
     steps:
     - uses: actions/checkout@v2

diff --git a/ace-internal.d.ts b/ace-internal.d.ts
@@ -85,6 +85,16 @@ export namespace Ace {
         offset: number,
         height: number,
         gutterOffset: number
+        fontMetrics: {
+            textWidth: (row: number, column: number) => number,
+            getRects: (start: Position, end: Position) => Rect[]
+        }
+    }
+    interface Rect {
+        left: number,
+        top: number,
+        width: number,
+        height: number,
     }
 
     interface HardWrapOptions {
@@ -1449,6 +1459,7 @@ declare module "./src/edit_session" {
         _changedWidgets?: any,
         $options: any,
         $wrapMethod?: any,
+        $fontMetrics?: FontMetrics|null,
         $enableVarChar?: any,
         $wrap?: any,
         $navigateWithinSoftTabs?: boolean,

diff --git a/ace.d.ts b/ace.d.ts
@@ -84,6 +84,16 @@ declare module "ace-code" {
             offset: number;
             height: number;
             gutterOffset: number;
+            fontMetrics: {
+                textWidth: (row: number, column: number) => number;
+                getRects: (start: Position, end: Position) => Rect[];
+            };
+        }
+        interface Rect {
+            left: number;
+            top: number;
+            width: number;
+            height: number;
         }
         interface HardWrapOptions {
             /** First row of the range to process */

diff --git a/demo/kitchen-sink/demo.js b/demo/kitchen-sink/demo.js
@@ -673,6 +673,16 @@ optionsPanelContainer.insertBefore(
             "Open Dialog ",
             ["button",  {onclick: openTestDialog.bind(null, false)}, "Scale"],
             ["button",  {onclick: openTestDialog.bind(null, true)}, "Height"]
+        ],
+        ["div", {},
+            ["button",  {onclick: function() {
+                editor.setOption("fontFamily", "cursive");
+                session.setValue( session.getValue() + "שלום עולם בעברית123" +"\n" + "ジャパン + 八洲\n" + "𒐫𒈙⸻ဪ", 1);
+            }}, "cursive"],
+            ["button",  {onclick: function() {
+                editor.setOption("fontFamily", "Tahoma");
+                session.setValue( session.getValue() + "שלום עולם בעברית123" +"\n" + "ジャパン + 八洲", 1);
+            }}, "Tahoma"],
         ]
     ]),
     optionsPanelContainer.children[1]

diff --git a/demo/kitchen-sink/inline_editor.js b/demo/kitchen-sink/inline_editor.js
@@ -21,7 +21,7 @@ require("ace/commands/default_commands").commands.push({
             return;
         }
 
-        var rowCount = 10;
+        var rowCount = 5.5;
         var w = {
             row: row, 
            // rowCount: rowCount, 

diff --git a/experiments/bidi.html b/experiments/bidi.html
@@ -0,0 +1,146 @@
+<html lang="en">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
+</head>
+<body>
+
+
+<script type="text/javascript" charset="utf-8">
+
+function renderDomPointsPlot(text) {
+    // 1. Create measurement container
+    var measureDiv = document.createElement('div');
+    measureDiv.style.font = '24px monospace';
+    measureDiv.style.position = 'absolute';
+    measureDiv.style.visibility = 'hidden';
+    measureDiv.innerText = text;
+    document.body.appendChild(measureDiv);
+
+    var range = document.createRange();
+    var textNode = measureDiv.firstChild;
+    var data = [];
+
+    // 2. Measure each character's X position
+    for (let i = 0; i <= text.length; i++) {
+        // Skip measuring the invisible control characters
+        // if (text[i].charCodeAt(0) > 0x2000) continue; 
+
+        range.setStart(textNode, i);
+        range.setEnd(textNode, i);
+        data.push({
+            char: text[i],
+            x: range.getBoundingClientRect().left
+        });
+    }
+    document.body.removeChild(measureDiv);
+
+    // 3. Create a container for the DOM plot
+    var plotArea = document.createElement('div');
+    plotArea.style.position = 'relative';
+    plotArea.style.width = '100%';
+    plotArea.style.height = '500px';
+    plotArea.style.border = '2px solid #333';
+    plotArea.style.backgroundColor = '#f4f4f9';
+    plotArea.style.margin = '20px 0';
+    plotArea.style.fontFamily = 'sans-serif';
+    plotArea.style.overflow = 'hidden';
+
+    // Add informative header
+    // var header = document.createElement('div');
+    // header.style.padding = '10px';
+    // header.style.fontSize = '13px';
+    // header.style.color = '#333';
+    // header.textContent = text
+    // plotArea.appendChild(header);
+
+    // Scaling variables to fit points nicely inside the 650x250 container
+    var spacingX = 35; 
+    var scaleY = 0.8;  
+
+    // 4. Create DOM elements for each point
+    data.forEach((item, index) => {
+        var point = document.createElement('div');
+
+        // Style as a dot
+        point.style.position = 'absolute';
+        point.style.width = '12px';
+        point.style.height = '12px';
+        point.style.borderRadius = '50%';
+        point.style.backgroundColor = '#ff5722';
+        point.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
+
+        // Tooltip showing data
+        point.title = `Character: '${item.char}' | Index: ${index} | Visual X: ${item.x.toFixed(1)}px`;
+
+        // Position: left corresponds to index, bottom corresponds to visual coordinate
+        var leftPos = (index * spacingX) + 25;
+        var bottomPos = (item.x * scaleY) + 30; 
+
+        point.style.left = `${leftPos}px`;
+        point.style.bottom = `${bottomPos}px`;
+
+        // Add the character label directly beneath the point
+        var charLabel = document.createElement('span');
+        charLabel.innerText = item.char;
+        charLabel.style.position = 'absolute';
+        charLabel.style.top = '15px';
+        charLabel.style.left = '20px';
+        charLabel.style.fontSize = '14px';
+        charLabel.style.fontWeight = 'bold';
+        charLabel.style.color = '#333';
+        point.appendChild(charLabel);
+
+        point.className = "point"
+
+
+        vline = document.createElement('div');
+        vline.style.cssText = `
+            position: absolute;
+            width: 100vw;
+            height: 1px;
+            background-color: #007bff;
+            left: -${point.style.left};
+            top: 5px;
+        `;
+        point.appendChild(vline)
+        hline = document.createElement('div');
+        hline.style.cssText = `
+            position: absolute;
+            width: 1px;
+            height: 100vh;
+            background-color: #007bff;
+            top: -${point.style.top};
+            left: 5px;
+        `;
+        point.appendChild(hline)
+
+        plotArea.appendChild(point);
+    });
+
+    // Append the whole plot to the main document body
+    document.body.appendChild(plotArea);
+}
+
+// Execute function with your nested isolate string
+var nestedString = "abc\u2067d123ef\u2066ghk\u2067lmn\u2069\u2069\u2069opqrst";
+var nestedString= 'a 八洲שלום ע1ולם בעברית124e443ジ'
+
+document.body.innerHTML=``
+var ta = document.createElement('textarea');
+ta.id = 'input';
+ta.style.width = '100%';
+document.documentElement.insertBefore(ta, document.body);
+
+
+ta.value = nestedString;
+ta.oninput = () => {
+    document.body.innerHTML=``
+    document.querySelectorAll('.point').forEach(p => p.remove());
+    renderDomPointsPlot(ta.value);
+}
+renderDomPointsPlot(nestedString);
+
+</script>
+
+</body>
+</html>