.github/ISSUE_TEMPLATE/add-to-website.yml

@@ -0,0 +1,51 @@
+---
+name: "🌐 Add a project to the list of project using Ace on its website."
+description: Add a project to the list of projects using Ace, displayed on the website.
+title: "Add project (project name) to the list of projects using Ace on its website"
+labels: [website, needs-triage]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        The fastest way to get your project to be displayed on the website is to create a PR. 
+        Examples: https://github.com/ajaxorg/ace/pull/5014, https://github.com/ajaxorg/ace/pull/5222.
+        If for any reason creating a PR is not an option for you, please proceed with filling out this issue. Thanks!
+  - type: input
+    id: name
+    attributes:
+      label: Project name
+      description: A name of the project to be used on Ace website.
+    validations:
+      required: true
+  - type: input
+    id: project-link
+    attributes:
+      label: Project link
+      description: A link to the project's website.
+    validations:
+      required: true
+  - type: input
+    id: logo-link
+    attributes:
+      label: Logo link
+      description: |
+        A link to the logo image to be used on the website for the project. If not provided, only the name of the project will be displayed.
+
+        By submitting this link, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.
+    validations:
+      required: false
+  - type: textarea
+    id: info
+    attributes:
+      label: Additional information
+      description: Any additional information you would like to share.
+    validations:
+      required: false
+  - type: checkboxes
+    id: ack
+    attributes:
+      label: Acknowledgements
+      options:
+        - label: I may be able to implement this request.
+          required: false

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.23.2](https://github.com/ajaxorg/ace/compare/v1.23.1...v1.23.2) (2023-07-07)
+
+
+### Bug Fixes
+
+* **autocomplete:** fix a11y violations ([#5241](https://github.com/ajaxorg/ace/issues/5241)) ([decb615](https://github.com/ajaxorg/ace/commit/decb6154198105289170303b7434c524eaf9fda8))
+* bug in guttertooltip when `tooltipsFollowsMouse` set to false ([#5217](https://github.com/ajaxorg/ace/issues/5217)) ([67d318e](https://github.com/ajaxorg/ace/commit/67d318ed25d5b45789462850e6b96aac2931591f))
+* typo in function name ([#5229](https://github.com/ajaxorg/ace/issues/5229)) ([6e99055](https://github.com/ajaxorg/ace/commit/6e99055c46f443271161e40fe15372d1d8ae9f42))
+
 ### [1.23.1](https://github.com/ajaxorg/ace/compare/v1.23.0...v1.23.1) (2023-06-27)
 
 ## [1.23.0](https://github.com/ajaxorg/ace/compare/v1.22.1...v1.23.0) (2023-06-21)

index.html

@@ -1135,20 +1135,24 @@ <h1>Projects Using Ace</h1>
                                     <div class="text-logo">trinket</div>
                                      <a href="https://trinket.io/">trinket</a>
                                 </li>
-				 <li>
+                                <li>
                                     <a href="https://goonlinetools.com/">GoOnlineTools</a>
                                 </li>
-				<li>
+                                <li>
                                     <img lazy-src="https://sqlize.online/favicons/sqlize/android-chrome-192x192.png" style="width: 72px; left: 15px; top: 0px;">
                                     <a href="https://sqlize.online/">SQLize.online</a>
                                 </li>
-				<li>
+                                <li>
                                     <img lazy-src="https://phpize.online/favicons/phpize/android-chrome-192x192.png" style="width: 72px; left: 15px; top: 0px;">
                                     <a href="https://phpize.online/">PHPize.online</a>
                                 </li>
+                                <li>
+                                    <div class="text-logo">Domoticz</div>
+                                    <a href="https://www.domoticz.com/">Domoticz</a>
+                                </li>
                                 <li id="add_your_site">
                                     <p>+</p>
-                                    <a href="mailto:ace@c9.io?subject=Put%20me%20on%20the%20Ace%20site!&body=Please include a link to a logo hosted on your site!">Your Site Here</a>
+                                    <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>
                                 </li>
                             </ul>
                         </div>

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.23.1",
+    "version": "1.23.2",
     "homepage": "http://github.com/ajaxorg/ace",
     "engines": {
         "node": ">= 0.6.0"

src/autocomplete/popup.js

@@ -50,8 +50,9 @@ class AcePopup {
         popup.renderer.setStyle("ace_autocomplete");
 
         // Set aria attributes for the popup
-        popup.renderer.container.setAttribute("role", "listbox");
-        popup.renderer.container.setAttribute("aria-label", nls("Autocomplete suggestions"));
+        popup.renderer.$textLayer.element.setAttribute("role", "listbox");
+        popup.renderer.$textLayer.element.setAttribute("aria-label", nls("Autocomplete suggestions"));
+        popup.renderer.textarea.setAttribute("aria-hidden", "true");
 
         popup.setOption("displayIndentGuides", false);
         popup.setOption("dragDelay", 150);
@@ -133,12 +134,12 @@ class AcePopup {
                 dom.addCssClass(selected, "ace_selected");
                 var ariaId = getAriaId(row);
                 selected.id = ariaId;
-                popup.renderer.container.setAttribute("aria-activedescendant", ariaId);
+                t.element.setAttribute("aria-activedescendant", ariaId);
                 el.setAttribute("aria-activedescendant", ariaId);
                 selected.setAttribute("role", "option");
                 selected.setAttribute("aria-label", popup.getData(row).value);
                 selected.setAttribute("aria-setsize", popup.data.length);
-                selected.setAttribute("aria-posinset", row);
+                selected.setAttribute("aria-posinset", row+1);
                 selected.setAttribute("aria-describedby", "doc-tooltip");
             }
         });

src/autocomplete_test.js

@@ -48,16 +48,16 @@ module.exports = {
         assert.ok(!editor.container.querySelector("style"));
 
         sendKey("a");
-        checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="2" aria-posinset="0" aria-describedby="doc-tooltip"><s "ace_completion-highlight">a</s><s "ace_">rraysort</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d><d "ace_line"><s "ace_completion-highlight">a</s><s "ace_">looooooooooooooooooooooooooooong_word</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
+        checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="2" aria-posinset="1" aria-describedby="doc-tooltip"><s "ace_completion-highlight">a</s><s "ace_">rraysort</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d><d "ace_line"><s "ace_completion-highlight">a</s><s "ace_">looooooooooooooooooooooooooooong_word</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
             sendKey("rr");
-            checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="1" aria-posinset="0" aria-describedby="doc-tooltip"><s "ace_completion-highlight">arr</s><s "ace_">aysort</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
+            checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="1" aria-posinset="1" aria-describedby="doc-tooltip"><s "ace_completion-highlight">arr</s><s "ace_">aysort</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
                 sendKey("r");
-                checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="1" aria-posinset="0" aria-describedby="doc-tooltip"><s "ace_completion-highlight">arr</s><s "ace_">ayso</s><s "ace_completion-highlight">r</s><s "ace_">t</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
+                checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="arraysort" aria-setsize="1" aria-posinset="1" aria-describedby="doc-tooltip"><s "ace_completion-highlight">arr</s><s "ace_">ayso</s><s "ace_completion-highlight">r</s><s "ace_">t</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
 
                     sendKey("Return");
                     assert.equal(editor.getValue(), "arraysort\narraysort alooooooooooooooooooooooooooooong_word");
                     editor.execCommand("insertstring", " looooooooooooooooooooooooooooong_");
-                    checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="alooooooooooooooooooooooooooooong_word" aria-setsize="1" aria-posinset="0" aria-describedby="doc-tooltip"><s "ace_">a</s><s "ace_completion-highlight">looooooooooooooooooooooooooooong_</s><s "ace_">word</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
+                    checkInnerHTML('<d "ace_line ace_selected" id="suggest-aria-id:0" role="option" aria-label="alooooooooooooooooooooooooooooong_word" aria-setsize="1" aria-posinset="1" aria-describedby="doc-tooltip"><s "ace_">a</s><s "ace_completion-highlight">looooooooooooooooooooooooooooong_</s><s "ace_">word</s><s "ace_completion-spacer"> </s><s "ace_completion-meta">local</s></d>', function() {
                         sendKey("Return");
                         editor.destroy();
                         editor.container.remove();

src/config.js

@@ -168,6 +168,6 @@ var reportErrorIfPathIsNotConfigured = function() {
     }
 };
 
-exports.version = "1.23.1";
+exports.version = "1.23.2";
 
 

src/ext/options.js

@@ -203,6 +203,10 @@ var optionGroups = {
         },
         "Keyboard Accessibility Mode": {
             path: "enableKeyboardAccessibility"
+        },
+        "Gutter tooltip follows mouse": {
+            path: "tooltipFollowsMouse",
+            defaultValue: true
         }
     }
 };

src/mode/nsis_highlight_rules.js

@@ -10,7 +10,7 @@ var NSISHighlightRules = function() {
     this.$rules = {
         start: [{
             token: "keyword.compiler.nsis",
-            regex: /^\s*!(?:include|addincludedir|addplugindir|appendfile|cd|delfile|echo|error|execute|packhdr|pragma|finalize|getdllversion|gettlbversion|system|tempfile|warning|verbose|define|undef|insertmacro|macro|macroend|makensis|searchparse|searchreplace|uninstfinalize)\b/,
+            regex: /^\s*!(?:include|addincludedir|addplugindir|appendfile|assert|cd|delfile|echo|error|execute|packhdr|pragma|finalize|getdllversion|gettlbversion|system|tempfile|warning|verbose|define|undef|insertmacro|macro|macroend|makensis|searchparse|searchreplace|uninstfinalize)\b/,
             caseInsensitive: true
         }, {
             token: "keyword.command.nsis",

src/mouse/default_gutter_handler.js

@@ -57,11 +57,17 @@ function GutterHandler(mouseHandler) {
         if (mouseHandler.$tooltipFollowsMouse) {
             moveTooltip(mouseEvent);
         } else {
-            var gutterElement = gutter.$lines.cells[row].element.querySelector("[class*=ace_icon]");
-            var rect = gutterElement.getBoundingClientRect();
-            var style = tooltip.getElement().style;
-            style.left = rect.right + "px";
-            style.top = rect.bottom + "px";
+            var gutterRow = mouseEvent.getGutterRow();
+            var gutterCell = gutter.$lines.get(gutterRow);
+            if (gutterCell) {
+                var gutterElement = gutterCell.element.querySelector(".ace_gutter_annotation");
+                var rect = gutterElement.getBoundingClientRect();
+                var style = tooltip.getElement().style;
+                style.left = rect.right + "px";
+                style.top = rect.bottom + "px";
+            } else {
+                moveTooltip(mouseEvent);
+            }
         }
     }
 

src/mouse/default_gutter_handler_test.js

@@ -217,6 +217,33 @@ module.exports = {
         // Annotation node should NOT have fold class.
         var annotation = lines.cells[0].element.children[2];
         assert.notOk(/fold/.test(annotation.className));
+    },"test: sets position correctly when tooltipFollowsMouse false" : function(done) {
+        var editor = this.editor;
+        var value = "";
+
+        editor.session.setMode(new Mode());
+        editor.setValue(value, -1);
+        editor.session.setAnnotations([{row: 0, column: 0, text: "error test", type: "error"}]);
+        editor.setOption("tooltipFollowsMouse", false);
+        editor.setOption("useSvgGutterIcons", true);
+        editor.renderer.$loop._flush();
+
+        var lines = editor.renderer.$gutterLayer.$lines;
+        var annotation = lines.cells[0].element.childNodes[2].firstChild;
+        assert.ok(/ace_error/.test(annotation.className));
+
+        var rect = annotation.getBoundingClientRect();
+        annotation.dispatchEvent(new MouseEvent("move", {x: rect.left, y: rect.top}));
+
+        // Wait for the tooltip to appear after its timeout.
+        setTimeout(function() {
+            editor.renderer.$loop._flush();
+            var tooltip = editor.container.querySelector(".ace_tooltip");
+            assert.ok(/error test/.test(tooltip.textContent));
+            assert.equal(tooltip.style.left, `${rect.right}px`);
+            assert.equal(tooltip.style.top, `${rect.bottom}px`);
+            done();
+        }, 100); 
     },
 
     tearDown : function() {

src/mouse/mouse_event.js

@@ -48,6 +48,18 @@ class MouseEvent {
         this.$pos = this.editor.renderer.screenToTextCoordinates(this.clientX, this.clientY);
         return this.$pos;
     }
+
+    /**
+     * Get the relative position within the gutter.
+     * 
+     * @return {Number} 'row' within the gutter. 
+     */
+    getGutterRow() {
+        var documentRow = this.getDocumentPosition().row;
+        var screenRow = this.editor.session.documentToScreenRow(documentRow, 0);
+        var screenTopRow = this.editor.session.documentToScreenRow(this.editor.renderer.$gutterLayer.$lines.get(0).row, 0);
+        return screenRow - screenTopRow;
+    }
 
     /**
      * Check if the mouse cursor is inside of the text selection

src/virtual_renderer.js

@@ -462,7 +462,7 @@ class VirtualRenderer {
     getShowInvisibles() {
         return this.getOption("showInvisibles");
     }
-    getDisplayIndentGuide() {
+    getDisplayIndentGuides() {
         return this.getOption("displayIndentGuides");
     }