Merge branch 'master' into dts-generator

# Conflicts:
#	ace-modes.d.ts

CHANGELOG.md

@@ -2,6 +2,32 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.32.5](https://github.com/ajaxorg/ace/compare/v1.32.4...v1.32.5) (2024-01-30)
+
+### [1.32.4](https://github.com/ajaxorg/ace/compare/v1.32.3...v1.32.4) (2024-01-29)
+
+
+### Bug Fixes
+
+* Improve contrast of completion popup in CloudEditor theme ([#5473](https://github.com/ajaxorg/ace/issues/5473)) ([273c7f1](https://github.com/ajaxorg/ace/commit/273c7f159ded7dc9403266c6501e16a35e4101c6))
+* update JSX mode to reflect React JSX ([#5451](https://github.com/ajaxorg/ace/issues/5451)) ([66789a7](https://github.com/ajaxorg/ace/commit/66789a79ce1b7791c65886d8aecddd7efc0415e8))
+
+### [1.32.3](https://github.com/ajaxorg/ace/compare/v1.32.2...v1.32.3) (2023-12-29)
+
+
+### Bug Fixes
+
+* improve prefixing for inline preview ([#5439](https://github.com/ajaxorg/ace/issues/5439)) ([51006bb](https://github.com/ajaxorg/ace/commit/51006bba9c60b97251ddb04ed74f68ba4e7f6b54))
+* update ghost text if on same line popup ([12f4664](https://github.com/ajaxorg/ace/commit/12f466460d7187cfe37593dab1fbe275403fedd3))
+* updated red color in cloud-editor dark theme ([#5432](https://github.com/ajaxorg/ace/issues/5432)) ([142b607](https://github.com/ajaxorg/ace/commit/142b607578f5d071a5026691ff6662c11e9f186b))
+
+### [1.32.2](https://github.com/ajaxorg/ace/compare/v1.32.1...v1.32.2) (2023-12-14)
+
+
+### Bug Fixes
+
+* **themes:** changed the solarized theme primary color from `[#93](https://github.com/ajaxorg/ace/issues/93)A1A1` to `[#839496](https://github.com/ajaxorg/ace/issues/839496)`. ([#5422](https://github.com/ajaxorg/ace/issues/5422)) ([114a5c1](https://github.com/ajaxorg/ace/commit/114a5c163fd875b4fab332dadfadeeae41e4097a)), closes [#93A1A1](https://github.com/ajaxorg/ace/issues/93A1A1)
+
 ### [1.32.1](https://github.com/ajaxorg/ace/compare/v1.32.0...v1.32.1) (2023-12-11)
 
 

Readme.md

@@ -50,6 +50,7 @@ The easiest version is simply:
     var editor = ace.edit("editor");
 </script>
 ```
+*Exploring configration options [Configuring-Ace](https://github.com/ajaxorg/ace/wiki/Configuring-Ace/)*
 
 With "editor" being the id of the DOM element, which should be converted to an editor. Note that this element must be explicitly sized and positioned `absolute` or `relative` for Ace to work. e.g.
 
@@ -154,7 +155,7 @@ You can also run the tests in your browser by serving:
 
     http://localhost:8888/src/test/tests.html
 
-This makes debugging failing tests way more easier.
+This makes debugging failing tests much easier.
 
 Contributing
 -----------------------------

ace-internal.d.ts

@@ -370,7 +370,7 @@ export namespace Ace {
         fontFamily: string;
         maxLines: number;
         minLines: number;
-        scrollPastEnd: boolean;
+        scrollPastEnd: number;
         fixedWidthGutter: boolean;
         customScrollbar: boolean;
         theme: string;
@@ -1203,6 +1203,12 @@ export const Range: {
 export type InlineAutocomplete = Ace.InlineAutocomplete;
 export type CommandBarTooltip = Ace.CommandBarTooltip;
 
+declare global {
+    interface Element {
+        setAttribute(name: string, value: boolean): void;
+        setAttribute(name: string, value: number): void;
+    }
+}
 
 declare module "./src/anchor" {
     export interface Anchor extends Ace.EventEmitter<Ace.AnchorEvents> {
@@ -1434,7 +1440,8 @@ declare module "./src/autocomplete/popup" {
         getTextLeftOffset: () => number,
         $imageSize: number,
         anchorPos: any,
-        isMouseOver?: boolean
+        isMouseOver?: boolean,
+        selectedNode?: HTMLElement,
     }
 }
 
@@ -1453,6 +1460,7 @@ declare module "./src/layer/gutter" {
 
 declare module "./src/layer/text" {
     export interface Text extends Ace.EventEmitter<Ace.TextEvents> {
+        config?: Ace.LayerConfig
     }
 }
 

ace-modes.d.ts

@@ -550,9 +550,6 @@ declare module "ace-code/src/mode/jssm_highlight_rules" {
 declare module "ace-code/src/mode/jsx" {
   export const Mode: new () => import("ace-code").Ace.SyntaxMode;
 }
-declare module "ace-code/src/mode/jsx_highlight_rules" {
-  export const JsxHighlightRules: new () => import("ace-code").Ace.HighlightRules;
-}
 declare module "ace-code/src/mode/julia" {
   export const Mode: new () => import("ace-code").Ace.SyntaxMode;
 }

ace.d.ts

@@ -191,7 +191,7 @@ export namespace Ace {
     fontFamily: string;
     maxLines: number;
     minLines: number;
-    scrollPastEnd: boolean;
+    scrollPastEnd: number;
     fixedWidthGutter: boolean;
     customScrollbar: boolean;
     theme: string;

demo/kitchen-sink/docs/jsx.jsx

@@ -1,9 +1,9 @@
-/*EXPECTED
-hello world!
-*/
-class Test {
-    static function run() : void {
-        // console.log("hello world!");
-        log "hello world!";
-    }
+import * as React from "react";
+
+export default () => {
+  return (
+    <div variant="p">
+      Keywords here are not highlighted, for example class or instance.
+    </div>
+  );
 }

demo/kitchen-sink/docs/zig.zig

@@ -0,0 +1,6 @@
+const std = @import("std");
+
+pub fn main() !void {
+    const stdout = std.io.getStdOut().writer();
+    try stdout.print("Hello, {s}!\n", .{"world"});
+}

index.html

@@ -1162,6 +1162,14 @@ <h1>Projects Using Ace</h1>
                                     <img lazy-src="https://k8studio.io/static/images/logo.png" style="width: 85px; left: 7px; top: -7px;">
                                     <a href="https://k8studio.io/">K8Studio</a>
                                 </li>
+                                <li>
+                                    <img lazy-src="https://hardcoder.xyz/favicon.ico" style="width: 72px; left: 15px; top: -2px;">
+                                    <a href="https://hardcoder.xyz/?mkp=fncd">Funcdown</a>
+                                </li>
+				<li>
+                                    <img lazy-src="https://sqltest.online/favicons/android-chrome-192x192.png" style="width: 72px; left: 15px; top: 0px;">
+                                    <a href="https://sqltest.online/">SQLtest.online</a>
+                                </li>
                                 <li id="add_your_site">
                                     <p>+</p>
                                     <a href="https://github.com/ajaxorg/ace/issues/new?assignees=&labels=website%2Cneeds-triage&projects=&template=add-to-website.yml&title=Add+project+%28project+name%29+to+the+list+of+projects+using+Ace+on+its+website">Your Site Here</a>

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ace-code",
     "description": "Ajax.org Code Editor is a full featured source code highlighting editor that powers the Cloud9 IDE",
-    "version": "1.32.1",
+    "version": "1.32.5",
     "homepage": "http://github.com/ajaxorg/ace",
     "engines": {
         "node": ">= 0.6.0"

src/autocomplete.js

@@ -176,12 +176,7 @@ class Autocomplete {
     $onPopupChange(hide) {
         if (this.inlineRenderer && this.inlineEnabled) {
             var completion = hide ? null : this.popup.getData(this.popup.getRow());
-            var prefix = util.getCompletionPrefix(this.editor);
-            if (!this.inlineRenderer.show(this.editor, completion, prefix)) {
-                this.inlineRenderer.hide();
-            } else {
-                this.$seen(completion);
-            }
+            this.$updateGhostText(completion);
             // If the mouse is over the tooltip, and we're changing selection on hover don't
             // move the tooltip while hovering over the popup.
             if (this.popup.isMouseOver && this.setSelectOnHover) {
@@ -201,6 +196,22 @@ class Autocomplete {
         }
     }
 
+    $updateGhostText(completion) {
+        // Ghost text can include characters normally not part of the prefix (e.g. whitespace).
+        // When typing ahead with ghost text however, we want to simply prefix with respect to the
+        // base of the completion.
+        var row = this.base.row;
+        var column = this.base.column;
+        var cursorColumn = this.editor.getCursorPosition().column;
+        var prefix = this.editor.session.getLine(row).slice(column, cursorColumn);
+
+        if (!this.inlineRenderer.show(this.editor, completion, prefix)) {
+            this.inlineRenderer.hide();
+        } else {
+            this.$seen(completion);
+        }
+    }
+
     $onPopupRender() {
         const inlineEnabled = this.inlineRenderer && this.inlineEnabled;
         if (this.completions && this.completions.filtered && this.completions.filtered.length > 0) {
@@ -335,6 +346,14 @@ class Autocomplete {
         if (newRow === oldRow && previousSelectedItem !== this.completions.filtered[newRow]) 
             this.$onPopupChange();
 
+        // If we stay on the same line and have inlinePreview enabled, we want to make sure the
+        // ghost text remains up-to-date.
+        const inlineEnabled = this.inlineRenderer && this.inlineEnabled;
+        if (newRow === oldRow && inlineEnabled) {
+            var completion = this.popup.getData(this.popup.getRow());
+            this.$updateGhostText(completion);
+        }
+
         if (!keepPopupPosition) {
             this.popup.setTheme(editor.getTheme());
             this.popup.setFontSize(editor.getFontSize());
@@ -517,6 +536,7 @@ class Autocomplete {
             this.base = this.editor.session.doc.createAnchor(pos.row, pos.column);
             this.base.$insertRight = true;
             this.completions = new FilteredList(options.matches);
+            this.getCompletionProvider().completions = this.completions;
             return this.openPopup(this.editor, "", keepPopupPosition);
         }
 

src/autocomplete/popup.js

@@ -135,17 +135,16 @@ class AcePopup {
         });
         popup.renderer.on("afterRender", function () {
             var row = popup.getRow();
-            /**@type {any}*/
             var t = popup.renderer.$textLayer;
-            var selected = t.element.childNodes[row - t.config.firstRow];
+            var selected = /** @type {HTMLElement|null} */(t.element.childNodes[row - t.config.firstRow]);
             var el = document.activeElement; // Active element is textarea of main editor
-            if (selected !== t.selectedNode && t.selectedNode) {
-                dom.removeCssClass(t.selectedNode, "ace_selected");
+            if (selected !== popup.selectedNode && popup.selectedNode) {
+                dom.removeCssClass(popup.selectedNode, "ace_selected");
                 el.removeAttribute("aria-activedescendant");
-                selected.removeAttribute(ariaActiveState);
-                t.selectedNode.removeAttribute("id");
+                popup.selectedNode.removeAttribute(ariaActiveState);
+                popup.selectedNode.removeAttribute("id");
             }
-            t.selectedNode = selected;
+            popup.selectedNode = selected;
             if (selected) {
                 dom.addCssClass(selected, "ace_selected");
                 var ariaId = getAriaId(row);
@@ -154,7 +153,7 @@ class AcePopup {
                 el.setAttribute("aria-activedescendant", ariaId);
                 selected.setAttribute("role", optionAriaRole);
                 selected.setAttribute("aria-roledescription", nls("item"));
-                selected.setAttribute("aria-label", popup.getData(row).value);
+                selected.setAttribute("aria-label", popup.getData(row).caption || popup.getData(row).value);
                 selected.setAttribute("aria-setsize", popup.data.length);
                 selected.setAttribute("aria-posinset", row + 1);
                 selected.setAttribute("aria-describedby", "doc-tooltip");

src/autocomplete_test.js

@@ -858,16 +858,15 @@ module.exports = {
         var inline = completer.inlineRenderer;
 
         // Popup should be open, with inline text renderered.
-        assert.equal(editor.completer.popup.isOpen, true);  
+        assert.equal(completer.popup.isOpen, true);  
         assert.equal(completer.popup.getRow(), 0);
         assert.strictEqual(inline.isOpen(), true);
         assert.strictEqual(editor.renderer.$ghostText.text, "function\nthat does something\ncool");
 
-        editor.completer.popup.renderer.$loop._flush();
-        var popupTextLayer = completer.popup.renderer.$textLayer;
+        completer.popup.renderer.$loop._flush();
 
         // aria-describedby of selected popup item should have aria-describedby set to the offscreen inline screen reader div and doc-tooltip.
-        assert.strictEqual(popupTextLayer.selectedNode.getAttribute("aria-describedby"), "doc-tooltip ace-inline-screenreader-line-0 ace-inline-screenreader-line-1 ace-inline-screenreader-line-2 ");
+        assert.strictEqual(completer.popup.selectedNode.getAttribute("aria-describedby"), "doc-tooltip ace-inline-screenreader-line-0 ace-inline-screenreader-line-1 ace-inline-screenreader-line-2 ");
 
         // The elements with these IDs should have the correct content.
         assert.strictEqual(document.getElementById("ace-inline-screenreader-line-0").textContent,"function");
@@ -1341,6 +1340,115 @@ module.exports = {
         assert.ok(!(completer.popup && completer.popup.isOpen));
 
         done();
+    },
+    "test: should update inline preview when typing when it's the only item in the popup": function(done) {
+        var editor = initEditor("");
+
+        editor.completers = [
+            {
+                getCompletions: function (editor, session, pos, prefix, callback) {
+                    var completions = [
+                        {
+                            caption: "function",
+                            value: "function\nthat does something\ncool"
+                        }
+                    ];
+                    callback(null, completions);
+                }
+            }
+        ];
+
+        var completer = Autocomplete.for(editor);
+        completer.inlineEnabled = true;
+
+        user.type("f");
+        var inline = completer.inlineRenderer;
+
+        // Popup should be open, with inline text renderered.
+        assert.equal(completer.popup.isOpen, true);  
+        assert.equal(completer.popup.getRow(), 0);
+        assert.strictEqual(inline.isOpen(), true);
+        assert.strictEqual(editor.renderer.$ghostText.text, "unction\nthat does something\ncool");
+
+        // when you keep typing, the ghost text should update accordingly
+        user.type("unc");
+
+        setTimeout(() => {
+            assert.strictEqual(inline.isOpen(), true);
+            assert.strictEqual(editor.renderer.$ghostText.text, "tion\nthat does something\ncool");
+
+            user.type("tio");
+
+            setTimeout(() => {
+                assert.strictEqual(inline.isOpen(), true);
+                assert.strictEqual(editor.renderer.$ghostText.text, "n\nthat does something\ncool");
+
+                done();
+            }, 100);
+        }, 100);
+    },
+    "test: should keep showing ghost text when typing ahead with whitespace": function(done) {
+        var editor = initEditor("");
+
+        editor.completers = [
+            {
+                getCompletions: function (editor, session, pos, prefix, callback) {
+                    var completions = [
+                        {
+                            value: "function that does something cool"
+                        }
+                    ];
+                    callback(null, completions);
+                }
+            }
+        ];
+
+        var completer = Autocomplete.for(editor);
+        completer.inlineEnabled = true;
+
+        user.type("f");
+        var inline = completer.inlineRenderer;
+
+        // Popup should be open, with inline text renderered.
+        assert.equal(completer.popup.isOpen, true);  
+        assert.equal(completer.popup.getRow(), 0);
+        assert.strictEqual(inline.isOpen(), true);
+        assert.strictEqual(editor.renderer.$ghostText.text, "unction that does something cool");
+
+        // when you keep typing, the ghost text should update accordingly
+        user.type("unction th");
+
+        setTimeout(() => {
+            assert.strictEqual(inline.isOpen(), true);
+            assert.strictEqual(editor.renderer.$ghostText.text, "at does something cool");
+
+            user.type("at do");
+
+            setTimeout(() => {
+                assert.strictEqual(inline.isOpen(), true);
+                assert.strictEqual(editor.renderer.$ghostText.text, "es something cool");
+
+                done();
+            }, 100);
+        }, 100);
+    },
+    "test: passing matches from execCommand": function() {
+        var editor = initEditor("");
+        editor.execCommand('startAutocomplete', {
+            matches: [
+                { value: 'example value' }
+            ]
+        });
+        user.type("\n");
+
+        assert.equal(editor.getValue(), "example value");
+
+        editor.resize(true);
+        editor.insertSnippet("<$1-${1|a1,b2,c3|}>");
+        user.type("Down");
+        user.type("\n");
+
+        assert.equal(editor.getValue(), "example value<b2-b2>");
     }
 };
 

src/commands/default_commands.js

@@ -729,7 +729,6 @@ exports.commands = [{
     description: "Auto Indent",
     bindKey: bindKey(null, null),
     exec: function(editor) { editor.autoIndent(); },
-    multiSelectAction: "forEachLine",
     scrollIntoView: "animate"
 }, {
     name: "expandtoline",