CHANGELOG.md

@@ -2,6 +2,14 @@
 
 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.20.0](https://github.com/ajaxorg/ace/compare/v1.19.0...v1.20.0) (2023-05-10)
+
+
+### Features
+
+* Add gutter controls to keyboard accessibility mode ([#5146](https://github.com/ajaxorg/ace/issues/5146)) ([5f2face](https://github.com/ajaxorg/ace/commit/5f2face8febe7c260a42bc30c67195f6a5a46085))
+* Inline autocomplete tooltip UX redesign ([#5149](https://github.com/ajaxorg/ace/issues/5149)) ([8d56c84](https://github.com/ajaxorg/ace/commit/8d56c841ef980527a1ebe4cf73442766f5f97208))
+
 ## [1.19.0](https://github.com/ajaxorg/ace/compare/v1.18.1...v1.19.0) (2023-05-03)
 
 

ace-modules.d.ts

@@ -2,6 +2,7 @@ declare module 'ace-builds/webpack-resolver';
 declare module 'ace-builds/src-noconflict/ace';
 declare module 'ace-builds/src-noconflict/ext-beautify';
 declare module 'ace-builds/src-noconflict/ext-code_lens';
+declare module 'ace-builds/src-noconflict/ext-command_bar';
 declare module 'ace-builds/src-noconflict/ext-elastic_tabstops_lite';
 declare module 'ace-builds/src-noconflict/ext-emmet';
 declare module 'ace-builds/src-noconflict/ext-error_marker';

ace.d.ts

@@ -1102,39 +1102,44 @@ export const Range: {
 
 type InlineAutocompleteAction = "prev" | "next" | "first" | "last";
 
-type TooltipCommandEnabledFunction = (editor: Ace.Editor) => boolean;
+type TooltipCommandFunction<T> = (editor: Ace.Editor) => T;
 
 interface TooltipCommand extends Ace.Command {
-  enabled: TooltipCommandEnabledFunction | boolean,
-  position?: number;
+  enabled: TooltipCommandFunction<boolean> | boolean,
+  getValue?: TooltipCommandFunction<any>,
+  type: "button" | "text" | "checkbox"
+  iconCssClass: string,
+  cssClass: string
 }
 
 export class InlineAutocomplete {
   constructor();
   getInlineRenderer(): Ace.AceInline;
-  getInlineTooltip(): InlineTooltip;
+  getInlineTooltip(): CommandBarTooltip;
   getCompletionProvider(): Ace.CompletionProvider;
   show(editor: Ace.Editor): void;
   isOpen(): boolean;
   detach(): void;
   destroy(): void;
   goTo(action: InlineAutocompleteAction): void;
   tooltipEnabled: boolean;
-  commands: Record<string, TooltipCommand>
+  commands: Record<string, Ace.Command>
   getIndex(): number;
   setIndex(value: number): void;
   getLength(): number;
   getData(index?: number): Ace.Completion | undefined;
   updateCompletions(options: Ace.CompletionOptions): void;
 }
 
-export class InlineTooltip {
+export class CommandBarTooltip {
   constructor(parentElement: HTMLElement);
-  setCommands(commands: Record<string, TooltipCommand>): void;
-  show(editor: Ace.Editor): void;
+  registerCommand(id: string, command: TooltipCommand): void;
+  attach(editor: Ace.Editor): void;
   updatePosition(): void;
-  updateButtons(force?: boolean): void;
+  update(): void;
   isShown(): boolean;
+  getAlwaysShow(): boolean;
+  setAlwaysShow(alwaysShow: boolean): void;
   detach(): void;
   destroy(): void;
 }

css/ace.css

@@ -138,12 +138,12 @@ padding-left: 19px;
 padding-right: 6px;
 background-repeat: no-repeat;
 }
-.ace_gutter-cell_svg-icons .ace_icon_svg {
+.ace_gutter-cell_svg-icons .ace_gutter_annotation {
 margin-left: -14px;
 float: left;
 }
-.ace_gutter-cell .ace_icon {
-margin-left: -18px;
+.ace_gutter-cell .ace_gutter_annotation {
+margin-left: -19px;
 float: left;
 }
 .ace_gutter-cell.ace_error, .ace_icon.ace_error, .ace_icon.ace_error_fold {
@@ -773,6 +773,98 @@ text-decoration: underline;
 .ace_dark > .ace_codeLens > a:hover {
 color: #4e94ce;
 }
+/*commandbar.css*/
+.ace_tooltip.command_bar_tooltip_wrapper {
+padding: 0;
+}
+.ace_tooltip .command_bar_tooltip {
+padding: 1px 5px;
+display: flex;
+pointer-events: auto;
+}
+.ace_tooltip .command_bar_tooltip.tooltip_more_options {
+padding: 1px;
+flex-direction: column;
+}
+div.command_bar_tooltip_button {
+display: inline-flex;
+cursor: pointer;
+margin: 1px;
+border-radius: 2px;
+padding: 2px 5px;
+align-items: center;
+}
+div.command_bar_tooltip_button.ace_selected,
+div.command_bar_tooltip_button:hover:not(.ace_disabled) {
+background-color: rgba(0, 0, 0, 0.1);
+}
+div.command_bar_tooltip_button.ace_disabled {
+color: #777;
+pointer-events: none;
+}
+div.command_bar_tooltip_button .ace_icon_svg {
+height: 12px;
+background-color: #000;
+}
+div.command_bar_tooltip_button.ace_disabled .ace_icon_svg {
+background-color: #777;
+}
+.command_bar_tooltip.tooltip_more_options .command_bar_tooltip_button {
+display: flex;
+}
+.command_bar_tooltip.command_bar_button_value {
+display: none;
+}
+.command_bar_tooltip.tooltip_more_options .command_bar_button_value {
+display: inline-block;
+width: 12px;
+}
+.command_bar_button_caption {
+display: inline-block;
+}
+.command_bar_keybinding {
+margin: 0 2px;
+display: inline-block;
+font-size: 8px;
+}
+.command_bar_tooltip.tooltip_more_options .command_bar_keybinding {
+margin-left: auto;
+}
+.command_bar_keybinding div {
+display: inline-block;
+min-width: 8px;
+padding: 2px;
+margin: 0 1px;
+border-radius: 2px;
+background-color: #ccc;
+text-align: center;
+}
+.ace_dark.ace_tooltip .command_bar_tooltip {
+background-color: #373737;
+color: #eee;
+}
+.ace_dark div.command_bar_tooltip_button.ace_disabled {
+color: #979797;
+}
+.ace_dark div.command_bar_tooltip_button.ace_selected,
+.ace_dark div.command_bar_tooltip_button:hover:not(.ace_disabled) {
+background-color: rgba(255, 255, 255, 0.1);
+}
+.ace_dark div.command_bar_tooltip_button .ace_icon_svg {
+background-color: #eee;
+}
+.ace_dark div.command_bar_tooltip_button.ace_disabled .ace_icon_svg {
+background-color: #979797;
+}
+.ace_dark .command_bar_tooltip_button.ace_disabled {
+color: #979797;
+}
+.ace_dark .command_bar_keybinding div {
+background-color: #575757;
+}
+.ace_checkmark::before {
+content: '✓';
+}
 /*snippets.css*/
 .ace_snippet-marker {
 -moz-box-sizing: border-box;
@@ -840,27 +932,16 @@ display: flex;
 flex: 1;
 text-align: right;
 }
-/*inlinetooltip.css*/
-.ace_inline_autocomplete_tooltip {
-display: inline-block;
-}
-.inline_autocomplete_tooltip_entry {
-display: inline-block;
-padding: 0 5px;
-}
-.inline_autocomplete_tooltip_button {
-display: inline-block;
-cursor: pointer;
-padding: 5px;
+/*inlineautocomplete.css*/
+.ace_icon_svg.ace_arrow,
+.ace_icon_svg.ace_arrow_rotated {
+-webkit-mask-image: url("./main-22.svg");
 }
-.inline_autocomplete_tooltip_button:hover {
-background-color: rgba(0, 0, 0, 0.1);
+.ace_icon_svg.ace_arrow_rotated {
+transform: rotate(180deg);
 }
-div.inline_autocomplete_tooltip_button_disabled {
-display: inline-block;
-padding: 5px;
-cursor: default;
-color: #777;
+div.command_bar_tooltip_button.completion_position {
+padding: 0;
 }
 /*settings_menu.css*/
 #ace_settingsmenu, #kbshortcutmenu {
@@ -1028,7 +1109,7 @@ transform: rotate(-45deg);
 border-width: 0 2px 2px 0 ;
 }
 .ace_searchbtn_close {
-background: url("./main-22.png") no-repeat 50% 0;
+background: url("./main-23.png") no-repeat 50% 0;
 border-radius: 50%;
 border: 0 none;
 color: #656565;

demo/i18n.html

@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <title>ACE Editor StatusBar Demo</title>
+  <style type="text/css" media="screen">
+    body {
+        overflow: hidden;
+    }
+
+    #editor { 
+        margin: 0;
+        position: absolute;
+        top: 2em;
+        bottom: 0;
+        left: 0;
+        right: 0;
+    }
+    #statusBar {
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 20px;
+        background-color: rgb(245, 245, 245);
+        color: gray;
+    }
+    .ace_status-indicator {
+        color: gray;
+        position: absolute;
+        right: 0;
+        border-left: 1px solid;
+    }
+  </style>
+</head>
+<body>
+<a href="?lang=Ru"/>Russian</a> &nbsp;
+<a href="?lang=Am"/>Armenian</a>&nbsp; 
+<a href="?lang=En"/>English</a>&nbsp;
+<pre id="editor"></pre>
+
+<!-- load ace -->
+<script src="../src/ace.js"></script>
+<!-- load ace searchbox extension -->
+<script src="../src/ext-searchbox.js"></script>
+<script>
+    var messagesRussian = {
+        "$id": "ru",
+
+        "Search for": "Найти",
+        "All": "Все",
+        "Replace with": "Заменить",
+        "Replace": "Заменить",
+        "Toggle Replace mode": "Перейти в режим поиска",
+        "RegExp Search": "Поиск по регулярному выражению",
+        "CaseSensitive Search": "",
+        "Whole Word Search": "",
+        "Search In Selection": "Искать в выделенном",
+        "$0 of $1": "$0 из $1",
+
+        "Looks good!": "Нет ошибок",
+
+        "Recently used": "Недавно использованные",
+        "Other commands": "Другие команды",
+        "No matching commands": "Нет подходящих команд",
+
+        "Autocomplete suggestions": "Предложения автозаполнения",
+
+        "Cursor at row $0": "",
+        "Unfold rows $0 to $1": "",
+        "Unfold code": "",
+        "Fold at row $0": "",
+        "Fold code": "",
+        "Read annotations row $0": "",
+
+        "error": "ошибка",
+        "errors": "ошибки",
+        "warning": "предупреждение",
+        "warnings": "предупреждения",
+        "information message": "информационное сообщение",
+        "information messages": "информационные сообщения"
+    };
+    var messagesArmenian = {
+        "$id": "am",
+
+        "Search for": "Փնտրել",
+        "All": "Բոլորը",
+        "Replace with": "Փոխարինել",
+        "Replace": "Փոխարինել",
+        "Toggle Replace mode": "",
+        "RegExp Search": "Փնտրել ռեգեքսպով",
+        "CaseSensitive Search": "",
+        "Whole Word Search": "Ամբողջ բառեր",
+        "Search In Selection": "Փնտրել նշվածում",
+        "$0 of $1": "$1-ից $0",
+
+        "Looks good!": "Սխալ չկա",
+
+        "Recently used": "Վերջերս օգտագործված",
+        "Other commands": "Այլ հրամաններ",
+        "No matching commands": "Չկան համապատասխան հրամաններ",
+
+        "Autocomplete suggestions": "Ավտոմատ լրացման առաջարկներ",
+
+        "Cursor at row $0": "",
+        "Unfold rows $0 to $1": "",
+        "Unfold code": "",
+        "Fold at row $0": "",
+        "Fold code": "",
+        "Read annotations row $0": "",
+
+        "error": "սխալ",
+        "errors": "սխալներ",
+        "warning": "նախազգուշացում",
+        "warnings": "նախազգուշացումներ",
+        "information message": "տեղեկատվություն",
+        "information messages": "տեղեկատվություններ"
+    };
+
+    if (/lang=ru/i.test(location.href)) {
+        ace.config.setMessages(messagesRussian);
+    } else if (/lang=en/i.test(location.href)) {
+        ace.config.setMessages();
+    } else {
+        ace.config.setMessages(messagesArmenian);
+    }
+    var editor = ace.edit("editor", {
+        mode: "ace/mode/html"
+    });
+
+    editor.execCommand("find");
+    setTimeout(function() {
+        editor.execCommand("goToNextError");
+    }, 2000);
+</script>
+
+<script src="./show_own_source.js"></script>
+</body>
+</html>