185 lines
8.5 KiB
JavaScript
185 lines
8.5 KiB
JavaScript
ace.define("ace/ext/menu_tools/settings_menu.css",["require","exports","module"], function(require, exports, module){module.exports = "#ace_settingsmenu, #kbshortcutmenu {\n background-color: #F7F7F7;\n color: black;\n box-shadow: -5px 4px 5px rgba(126, 126, 126, 0.55);\n padding: 1em 0.5em 2em 1em;\n overflow: auto;\n position: absolute;\n margin: 0;\n bottom: 0;\n right: 0;\n top: 0;\n z-index: 9991;\n cursor: default;\n}\n\n.ace_dark #ace_settingsmenu, .ace_dark #kbshortcutmenu {\n box-shadow: -20px 10px 25px rgba(126, 126, 126, 0.25);\n background-color: rgba(255, 255, 255, 0.6);\n color: black;\n}\n\n.ace_optionsMenuEntry:hover {\n background-color: rgba(100, 100, 100, 0.1);\n transition: all 0.3s\n}\n\n.ace_closeButton {\n background: rgba(245, 146, 146, 0.5);\n border: 1px solid #F48A8A;\n border-radius: 50%;\n padding: 7px;\n position: absolute;\n right: -8px;\n top: -8px;\n z-index: 100000;\n}\n.ace_closeButton{\n background: rgba(245, 146, 146, 0.9);\n}\n.ace_optionsMenuKey {\n color: darkslateblue;\n font-weight: bold;\n}\n.ace_optionsMenuCommand {\n color: darkcyan;\n font-weight: normal;\n}\n.ace_optionsMenuEntry input, .ace_optionsMenuEntry button {\n vertical-align: middle;\n}\n\n.ace_optionsMenuEntry button[ace_selected_button=true] {\n background: #e7e7e7;\n box-shadow: 1px 0px 2px 0px #adadad inset;\n border-color: #adadad;\n}\n.ace_optionsMenuEntry button {\n background: white;\n border: 1px solid lightgray;\n margin: 0px;\n}\n.ace_optionsMenuEntry button:hover{\n background: #f0f0f0;\n}";
|
|
|
|
});
|
|
|
|
ace.define("ace/ext/menu_tools/overlay_page",["require","exports","module","ace/ext/menu_tools/overlay_page","ace/lib/dom","ace/ext/menu_tools/settings_menu.css"], function(require, exports, module){/**
|
|
* ## Overlay Page utility
|
|
*
|
|
* Provides modal overlay functionality for displaying editor extension interfaces. Creates a full-screen overlay with
|
|
* configurable backdrop behavior, keyboard navigation (ESC to close), and focus management. Used by various extensions
|
|
* to display menus, settings panels, and other interactive content over the editor interface.
|
|
*
|
|
* **Usage:**
|
|
* ```javascript
|
|
* var overlayPage = require('./overlay_page').overlayPage;
|
|
* var contentElement = document.createElement('div');
|
|
* contentElement.innerHTML = '<h1>Settings</h1>';
|
|
*
|
|
* var overlay = overlayPage(editor, contentElement, function() {
|
|
* console.log('Overlay closed');
|
|
* });
|
|
* ```
|
|
*
|
|
* @module
|
|
*/
|
|
'use strict';
|
|
var dom = require("../../lib/dom");
|
|
var cssText = require("./settings_menu.css");
|
|
dom.importCssString(cssText, "settings_menu.css", false);
|
|
module.exports.overlayPage = function overlayPage(editor, contentElement, callback) {
|
|
var closer = document.createElement('div');
|
|
var ignoreFocusOut = false;
|
|
function documentEscListener(e) {
|
|
if (e.keyCode === 27) {
|
|
close();
|
|
}
|
|
}
|
|
function close() {
|
|
if (!closer)
|
|
return;
|
|
document.removeEventListener('keydown', documentEscListener);
|
|
closer.parentNode.removeChild(closer);
|
|
if (editor) {
|
|
editor.focus();
|
|
}
|
|
closer = null;
|
|
callback && callback();
|
|
}
|
|
function setIgnoreFocusOut(ignore) {
|
|
ignoreFocusOut = ignore;
|
|
if (ignore) {
|
|
closer.style.pointerEvents = "none";
|
|
contentElement.style.pointerEvents = "auto";
|
|
}
|
|
}
|
|
closer.style.cssText = 'margin: 0; padding: 0; ' +
|
|
'position: fixed; top:0; bottom:0; left:0; right:0;' +
|
|
'z-index: 9990; ' +
|
|
(editor ? 'background-color: rgba(0, 0, 0, 0.3);' : '');
|
|
closer.addEventListener('click', function (e) {
|
|
if (!ignoreFocusOut) {
|
|
close();
|
|
}
|
|
});
|
|
document.addEventListener('keydown', documentEscListener);
|
|
contentElement.addEventListener('click', function (e) {
|
|
e.stopPropagation();
|
|
});
|
|
closer.appendChild(contentElement);
|
|
document.body.appendChild(closer);
|
|
if (editor) {
|
|
editor.blur();
|
|
}
|
|
return {
|
|
close: close,
|
|
setIgnoreFocusOut: setIgnoreFocusOut
|
|
};
|
|
};
|
|
|
|
});
|
|
|
|
ace.define("ace/ext/menu_tools/get_editor_keyboard_shortcuts",["require","exports","module","ace/ext/menu_tools/get_editor_keyboard_shortcuts","ace/lib/keys"], function(require, exports, module){/**
|
|
* ## Editor Keyboard Shortcuts Utility
|
|
*
|
|
* Provides functionality to extract and format keyboard shortcuts from an Ace editor instance. Analyzes all registered
|
|
* command handlers and their key bindings to generate a list of available keyboard shortcuts for the
|
|
* current platform. Returns formatted key combinations with proper modifier key representations and handles multiple
|
|
* bindings per command with pipe-separated notation.
|
|
*
|
|
* **Usage:**
|
|
* ```javascript
|
|
* var getKbShortcuts = require('ace/ext/menu_tools/get_editor_keyboard_shortcuts');
|
|
* var shortcuts = getKbShortcuts.getEditorKeybordShortcuts(editor);
|
|
* console.log(shortcuts);
|
|
* // [
|
|
* // {'command': 'selectall', 'key': 'Ctrl-A'},
|
|
* // {'command': 'copy', 'key': 'Ctrl-C|Ctrl-Insert'}
|
|
* // ]
|
|
* ```
|
|
*
|
|
* @module
|
|
*/
|
|
"use strict"; var keys = require("../../lib/keys");
|
|
module.exports.getEditorKeybordShortcuts = function (editor) {
|
|
var KEY_MODS = keys.KEY_MODS;
|
|
var keybindings = [];
|
|
var commandMap = {};
|
|
editor.keyBinding.$handlers.forEach(function (handler) {
|
|
var ckb = handler["commandKeyBinding"];
|
|
for (var i in ckb) {
|
|
var key = i.replace(/(^|-)\w/g, function (x) { return x.toUpperCase(); });
|
|
var commands = ckb[i];
|
|
if (!Array.isArray(commands))
|
|
commands = [commands];
|
|
commands.forEach(function (command) {
|
|
if (typeof command != "string")
|
|
command = command.name;
|
|
if (commandMap[command]) {
|
|
commandMap[command].key += "|" + key;
|
|
}
|
|
else {
|
|
commandMap[command] = { key: key, command: command };
|
|
keybindings.push(commandMap[command]);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
return keybindings;
|
|
};
|
|
|
|
});
|
|
|
|
ace.define("ace/ext/keybinding_menu",["require","exports","module","ace/editor","ace/ext/menu_tools/overlay_page","ace/ext/menu_tools/get_editor_keyboard_shortcuts"], function(require, exports, module){/**
|
|
* ## Show Keyboard Shortcuts extension
|
|
*
|
|
* Provides a keyboard shortcuts display overlay for the Ace editor. Creates an interactive menu that shows all available
|
|
* keyboard shortcuts with their corresponding commands, organized in a searchable and navigable format. The menu
|
|
* appears as an overlay page and can be triggered via keyboard shortcut (Ctrl-Alt-H/Cmd-Alt-H) or programmatically.
|
|
*
|
|
* @author <a href="mailto:matthewkastor@gmail.com">
|
|
* Matthew Christopher Kastor-Inare III </a><br />
|
|
* @module
|
|
*/
|
|
"use strict";
|
|
var Editor = require("../editor").Editor;
|
|
function showKeyboardShortcuts(editor) {
|
|
if (!document.getElementById('kbshortcutmenu')) {
|
|
var overlayPage = require('./menu_tools/overlay_page').overlayPage;
|
|
var getEditorKeybordShortcuts = require('./menu_tools/get_editor_keyboard_shortcuts').getEditorKeybordShortcuts;
|
|
var kb = getEditorKeybordShortcuts(editor);
|
|
var el = document.createElement('div');
|
|
var commands = kb.reduce(function (previous, current) {
|
|
return previous + '<div class="ace_optionsMenuEntry"><span class="ace_optionsMenuCommand">'
|
|
+ current.command + '</span> : '
|
|
+ '<span class="ace_optionsMenuKey">' + current.key + '</span></div>';
|
|
}, '');
|
|
el.id = 'kbshortcutmenu';
|
|
el.innerHTML = '<h1>Keyboard Shortcuts</h1>' + commands + '</div>';
|
|
overlayPage(editor, el);
|
|
}
|
|
}
|
|
module.exports.init = function (editor) {
|
|
Editor.prototype.showKeyboardShortcuts = function () {
|
|
showKeyboardShortcuts(this);
|
|
};
|
|
editor.commands.addCommands([{
|
|
name: "showKeyboardShortcuts",
|
|
bindKey: {
|
|
win: "Ctrl-Alt-h",
|
|
mac: "Command-Alt-h"
|
|
},
|
|
exec:
|
|
function (editor, line) {
|
|
editor.showKeyboardShortcuts();
|
|
}
|
|
}]);
|
|
};
|
|
|
|
}); (function() {
|
|
ace.require(["ace/ext/keybinding_menu"], function(m) {
|
|
if (typeof module == "object" && typeof exports == "object" && module) {
|
|
module.exports = m;
|
|
}
|
|
});
|
|
})();
|
|
|