c0ckp1t 1.0.0

package/js_ext/ace-editor/ext-options.js

@@ -0,0 +1,859 @@
+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/settings_menu",["require","exports","module","ace/ext/options","ace/ext/menu_tools/overlay_page","ace/editor"], function(require, exports, module){/**
+ * ## Interactive Settings Menu Extension
+ *
+ * Provides settings interface for the Ace editor that displays dynamically generated configuration options based on
+ * the current editor state. The menu appears as an overlay panel allowing users to modify editor options, themes,
+ * modes, and other settings through an intuitive graphical interface.
+ *
+ * **Usage:**
+ * ```javascript
+ * editor.showSettingsMenu();
+ * ```
+ *
+ * The extension automatically registers the `showSettingsMenu` command and method
+ * on the editor instance when initialized.
+ *
+ * @author <a href="mailto:matthewkastor@gmail.com">
+ *  Matthew Christopher Kastor-Inare III </a><br />
+ *
+ * @module
+ */
+"use strict";
+var OptionPanel = require("./options").OptionPanel;
+var overlayPage = require('./menu_tools/overlay_page').overlayPage;
+function showSettingsMenu(editor) {
+    if (!document.getElementById('ace_settingsmenu')) {
+        var options = new OptionPanel(editor);
+        options.render();
+        options.container.id = "ace_settingsmenu";
+        overlayPage(editor, options.container);
+        options.container.querySelector("select,input,button,checkbox").focus();
+    }
+}
+module.exports.init = function () {
+    var Editor = require("../editor").Editor;
+    Editor.prototype.showSettingsMenu = function () {
+        showSettingsMenu(this);
+    };
+};
+
+});
+
+ace.define("ace/ext/modelist",["require","exports","module"], function(require, exports, module){/**
+ * ## File mode detection utility
+ *
+ * Provides automatic detection of editor syntax modes based on file paths and extensions. Maps file extensions to
+ * appropriate Ace Editor syntax highlighting modes for over 100 programming languages and file formats including
+ * JavaScript, TypeScript, HTML, CSS, Python, Java, C++, and many others. Supports complex extension patterns and
+ * provides fallback mechanisms for unknown file types.
+ *
+ * @module
+ */
+"use strict";
+var modes = [];
+function getModeForPath(path) {
+    var mode = modesByName.text;
+    var fileName = path.split(/[\/\\]/).pop();
+    for (var i = 0; i < modes.length; i++) {
+        if (modes[i].supportsFile(fileName)) {
+            mode = modes[i];
+            break;
+        }
+    }
+    return mode;
+}
+var Mode = /** @class */ (function () {
+    function Mode(name, caption, extensions) {
+        this.name = name;
+        this.caption = caption;
+        this.mode = "ace/mode/" + name;
+        this.extensions = extensions;
+        var re;
+        if (/\^/.test(extensions)) {
+            re = extensions.replace(/\|(\^)?/g, function (a, b) {
+                return "$|" + (b ? "^" : "^.*\\.");
+            }) + "$";
+        }
+        else {
+            re = "\\.(" + extensions + ")$";
+        }
+        this.extRe = new RegExp(re, "gi");
+    }
+    Mode.prototype.supportsFile = function (filename) {
+        return filename.match(this.extRe);
+    };
+    return Mode;
+}());
+var supportedModes = {
+    ABAP: ["abap"],
+    ABC: ["abc"],
+    ActionScript: ["as"],
+    ADA: ["ada|adb"],
+    Alda: ["alda"],
+    Apache_Conf: ["^htaccess|^htgroups|^htpasswd|^conf|htaccess|htgroups|htpasswd"],
+    Apex: ["apex|cls|trigger|tgr"],
+    AQL: ["aql"],
+    AsciiDoc: ["asciidoc|adoc"],
+    ASL: ["dsl|asl|asl.json"],
+    Assembly_ARM32: ["s"],
+    Assembly_x86: ["asm|a"],
+    Astro: ["astro"],
+    AutoHotKey: ["ahk"],
+    Basic: ["bas|bak"],
+    BatchFile: ["bat|cmd"],
+    BibTeX: ["bib"],
+    C_Cpp: ["cpp|c|cc|cxx|h|hh|hpp|ino"],
+    C9Search: ["c9search_results"],
+    Cirru: ["cirru|cr"],
+    Clojure: ["clj|cljs"],
+    Clue: ["clue"],
+    Cobol: ["CBL|COB"],
+    coffee: ["coffee|cf|cson|^Cakefile"],
+    ColdFusion: ["cfm|cfc"],
+    Crystal: ["cr"],
+    CSharp: ["cs"],
+    Csound_Document: ["csd"],
+    Csound_Orchestra: ["orc"],
+    Csound_Score: ["sco"],
+    CSS: ["css"],
+    CSV: ["csv"],
+    Curly: ["curly"],
+    Cuttlefish: ["conf"],
+    D: ["d|di"],
+    Dart: ["dart"],
+    Diff: ["diff|patch"],
+    Django: ["djt|html.djt|dj.html|djhtml"],
+    Dockerfile: ["^Dockerfile"],
+    Dot: ["dot"],
+    Drools: ["drl"],
+    Edifact: ["edi"],
+    Eiffel: ["e|ge"],
+    EJS: ["ejs"],
+    Elixir: ["ex|exs"],
+    Elm: ["elm"],
+    Erlang: ["erl|hrl"],
+    Flix: ["flix"],
+    Forth: ["frt|fs|ldr|fth|4th"],
+    Fortran: ["f|f90"],
+    FSharp: ["fsi|fs|ml|mli|fsx|fsscript"],
+    FSL: ["fsl"],
+    FTL: ["ftl"],
+    Gcode: ["gcode"],
+    Gherkin: ["feature"],
+    Gitignore: ["^.gitignore"],
+    Glsl: ["glsl|frag|vert"],
+    Gobstones: ["gbs"],
+    golang: ["go"],
+    GraphQLSchema: ["gql"],
+    Groovy: ["groovy"],
+    HAML: ["haml"],
+    Handlebars: ["hbs|handlebars|tpl|mustache"],
+    Haskell: ["hs"],
+    Haskell_Cabal: ["cabal"],
+    haXe: ["hx"],
+    Hjson: ["hjson"],
+    HTML: ["html|htm|xhtml|we|wpy"],
+    HTML_Elixir: ["eex|html.eex"],
+    HTML_Ruby: ["erb|rhtml|html.erb"],
+    INI: ["ini|conf|cfg|prefs"],
+    Io: ["io"],
+    Ion: ["ion"],
+    Jack: ["jack"],
+    Jade: ["jade|pug"],
+    Java: ["java"],
+    JavaScript: ["js|jsm|cjs|mjs"],
+    JEXL: ["jexl"],
+    JSON: ["json"],
+    JSON5: ["json5"],
+    JSONiq: ["jq"],
+    JSP: ["jsp"],
+    JSSM: ["jssm|jssm_state"],
+    JSX: ["jsx"],
+    Julia: ["jl"],
+    Kotlin: ["kt|kts"],
+    LaTeX: ["tex|latex|ltx|bib"],
+    Latte: ["latte"],
+    LESS: ["less"],
+    Liquid: ["liquid"],
+    Lisp: ["lisp"],
+    LiveScript: ["ls"],
+    Log: ["log"],
+    LogiQL: ["logic|lql"],
+    Logtalk: ["lgt"],
+    LSL: ["lsl"],
+    Lua: ["lua"],
+    LuaPage: ["lp"],
+    Lucene: ["lucene"],
+    Makefile: ["^Makefile|^GNUmakefile|^makefile|^OCamlMakefile|make"],
+    Markdown: ["md|markdown"],
+    Mask: ["mask"],
+    MATLAB: ["matlab"],
+    Maze: ["mz"],
+    MediaWiki: ["wiki|mediawiki"],
+    MEL: ["mel"],
+    MIPS: ["s|asm"],
+    MIXAL: ["mixal"],
+    MUSHCode: ["mc|mush"],
+    MySQL: ["mysql"],
+    Nasal: ["nas"],
+    Nginx: ["nginx|conf"],
+    Nim: ["nim"],
+    Nix: ["nix"],
+    NSIS: ["nsi|nsh"],
+    Nunjucks: ["nunjucks|nunjs|nj|njk"],
+    ObjectiveC: ["m|mm"],
+    OCaml: ["ml|mli"],
+    Odin: ["odin"],
+    PartiQL: ["partiql|pql"],
+    Pascal: ["pas|p"],
+    Perl: ["pl|pm"],
+    pgSQL: ["pgsql"],
+    PHP: ["php|inc|phtml|shtml|php3|php4|php5|phps|phpt|aw|ctp|module"],
+    PHP_Laravel_blade: ["blade.php"],
+    Pig: ["pig"],
+    PLSQL: ["plsql"],
+    Powershell: ["ps1"],
+    Praat: ["praat|praatscript|psc|proc"],
+    Prisma: ["prisma"],
+    Prolog: ["plg|prolog"],
+    Properties: ["properties"],
+    Protobuf: ["proto"],
+    PRQL: ["prql"],
+    Puppet: ["epp|pp"],
+    Python: ["py"],
+    QML: ["qml"],
+    R: ["r"],
+    Raku: ["raku|rakumod|rakutest|p6|pl6|pm6"],
+    Razor: ["cshtml|asp"],
+    RDoc: ["Rd"],
+    Red: ["red|reds"],
+    RHTML: ["Rhtml"],
+    Robot: ["robot|resource"],
+    RST: ["rst"],
+    Ruby: ["rb|ru|gemspec|rake|^Guardfile|^Rakefile|^Gemfile"],
+    Rust: ["rs"],
+    SaC: ["sac"],
+    SASS: ["sass"],
+    SCAD: ["scad"],
+    Scala: ["scala|sbt"],
+    Scheme: ["scm|sm|rkt|oak|scheme"],
+    Scrypt: ["scrypt"],
+    SCSS: ["scss"],
+    SH: ["sh|bash|^.bashrc"],
+    SJS: ["sjs"],
+    Slim: ["slim|skim"],
+    Smarty: ["smarty|tpl"],
+    Smithy: ["smithy"],
+    snippets: ["snippets"],
+    Soy_Template: ["soy"],
+    Space: ["space"],
+    SPARQL: ["rq"],
+    SQL: ["sql"],
+    SQLServer: ["sqlserver"],
+    Stylus: ["styl|stylus"],
+    SVG: ["svg"],
+    Swift: ["swift"],
+    Tcl: ["tcl"],
+    Terraform: ["tf", "tfvars", "terragrunt"],
+    Tex: ["tex"],
+    Text: ["txt"],
+    Textile: ["textile"],
+    Toml: ["toml"],
+    TSV: ["tsv"],
+    TSX: ["tsx"],
+    Turtle: ["ttl"],
+    Twig: ["twig|swig"],
+    Typescript: ["ts|mts|cts|typescript|str"],
+    Vala: ["vala"],
+    VBScript: ["vbs|vb"],
+    Velocity: ["vm"],
+    Verilog: ["v|vh|sv|svh"],
+    VHDL: ["vhd|vhdl"],
+    Visualforce: ["vfp|component|page"],
+    Vue: ["vue"],
+    Wollok: ["wlk|wpgm|wtest"],
+    XML: ["xml|rdf|rss|wsdl|xslt|atom|mathml|mml|xul|xbl|xaml"],
+    XQuery: ["xq"],
+    YAML: ["yaml|yml"],
+    Zeek: ["zeek|bro"],
+    Zig: ["zig"]
+};
+var nameOverrides = {
+    ObjectiveC: "Objective-C",
+    CSharp: "C#",
+    golang: "Go",
+    C_Cpp: "C and C++",
+    Csound_Document: "Csound Document",
+    Csound_Orchestra: "Csound",
+    Csound_Score: "Csound Score",
+    coffee: "CoffeeScript",
+    HTML_Ruby: "HTML (Ruby)",
+    HTML_Elixir: "HTML (Elixir)",
+    FTL: "FreeMarker",
+    PHP_Laravel_blade: "PHP (Blade Template)",
+    Perl6: "Perl 6",
+    AutoHotKey: "AutoHotkey / AutoIt"
+};
+var modesByName = {};
+for (var name in supportedModes) {
+    var data = supportedModes[name];
+    var displayName = (nameOverrides[name] || name).replace(/_/g, " ");
+    var filename = name.toLowerCase();
+    var mode = new Mode(filename, displayName, data[0]);
+    modesByName[filename] = mode;
+    modes.push(mode);
+}
+exports.getModeForPath = getModeForPath;
+exports.modes = modes;
+exports.modesByName = modesByName;
+
+});
+
+ace.define("ace/ext/themelist",["require","exports","module"], function(require, exports, module){/**
+ * ## Theme enumeration utility
+ *
+ * Provides theme management for the Ace Editor by generating and organizing available themes into
+ * categorized collections. Automatically maps theme data into structured objects containing theme metadata including
+ * display captions, theme paths, brightness classification (dark/light), and normalized names. Exports both an
+ * indexed theme collection and a complete themes array for easy integration with theme selection components
+ * and configuration systems.
+ *
+ * @author <a href="mailto:matthewkastor@gmail.com">
+ *  Matthew Christopher Kastor-Inare III </a><br />
+ * @module
+ */
+"use strict";
+var themeData = [
+    ["Chrome"],
+    ["Clouds"],
+    ["Crimson Editor"],
+    ["Dawn"],
+    ["Dreamweaver"],
+    ["Eclipse"],
+    ["GitHub Light Default"],
+    ["GitHub (Legacy)", "github", "light"],
+    ["IPlastic"],
+    ["Solarized Light"],
+    ["TextMate"],
+    ["Tomorrow"],
+    ["XCode"],
+    ["Kuroir"],
+    ["KatzenMilch"],
+    ["SQL Server", "sqlserver", "light"],
+    ["CloudEditor", "cloud_editor", "light"],
+    ["Ambiance", "ambiance", "dark"],
+    ["Chaos", "chaos", "dark"],
+    ["Clouds Midnight", "clouds_midnight", "dark"],
+    ["Dracula", "", "dark"],
+    ["Cobalt", "cobalt", "dark"],
+    ["Gruvbox", "gruvbox", "dark"],
+    ["Green on Black", "gob", "dark"],
+    ["idle Fingers", "idle_fingers", "dark"],
+    ["krTheme", "kr_theme", "dark"],
+    ["Merbivore", "merbivore", "dark"],
+    ["Merbivore Soft", "merbivore_soft", "dark"],
+    ["Mono Industrial", "mono_industrial", "dark"],
+    ["Monokai", "monokai", "dark"],
+    ["Nord Dark", "nord_dark", "dark"],
+    ["One Dark", "one_dark", "dark"],
+    ["Pastel on dark", "pastel_on_dark", "dark"],
+    ["Solarized Dark", "solarized_dark", "dark"],
+    ["Terminal", "terminal", "dark"],
+    ["Tomorrow Night", "tomorrow_night", "dark"],
+    ["Tomorrow Night Blue", "tomorrow_night_blue", "dark"],
+    ["Tomorrow Night Bright", "tomorrow_night_bright", "dark"],
+    ["Tomorrow Night 80s", "tomorrow_night_eighties", "dark"],
+    ["Twilight", "twilight", "dark"],
+    ["Vibrant Ink", "vibrant_ink", "dark"],
+    ["GitHub Dark", "github_dark", "dark"],
+    ["CloudEditor Dark", "cloud_editor_dark", "dark"]
+];
+exports.themesByName = {};
+exports.themes = themeData.map(function (data) {
+    var name = data[1] || data[0].replace(/ /g, "_").toLowerCase();
+    var theme = {
+        caption: data[0],
+        theme: "ace/theme/" + name,
+        isDark: data[2] == "dark",
+        name: name
+    };
+    exports.themesByName[name] = theme;
+    return theme;
+});
+
+});
+
+ace.define("ace/ext/options",["require","exports","module","ace/ext/settings_menu","ace/ext/menu_tools/overlay_page","ace/lib/dom","ace/lib/oop","ace/config","ace/lib/event_emitter","ace/ext/modelist","ace/ext/themelist"], function(require, exports, module){/**
+ * ## Settings Menu extension
+ *
+ * Provides a settings panel for configuring editor options through an interactive UI.
+ * Creates a tabular interface with grouped configuration options including themes, modes, keybindings,
+ * font settings, display preferences, and advanced editor behaviors. Supports dynamic option rendering
+ * with various input types (dropdowns, checkboxes, number inputs, button bars) and real-time updates.
+ *
+ * **Usage:**
+ * ```javascript
+ * var OptionPanel = require("ace/ext/settings_menu").OptionPanel;
+ * var panel = new OptionPanel(editor);
+ * panel.render();
+ * ```
+ *
+ * @module
+ */
+"use strict";
+require("./menu_tools/overlay_page");
+var dom = require("../lib/dom");
+var oop = require("../lib/oop");
+var config = require("../config");
+var EventEmitter = require("../lib/event_emitter").EventEmitter;
+var buildDom = dom.buildDom;
+var modelist = require("./modelist");
+var themelist = require("./themelist");
+var themes = { Bright: [], Dark: [] };
+themelist.themes.forEach(function (x) {
+    themes[x.isDark ? "Dark" : "Bright"].push({ caption: x.caption, value: x.theme });
+});
+var modes = modelist.modes.map(function (x) {
+    return { caption: x.caption, value: x.mode };
+});
+var optionGroups = {
+    Main: {
+        Mode: {
+            path: "mode",
+            type: "select",
+            items: modes
+        },
+        Theme: {
+            path: "theme",
+            type: "select",
+            items: themes
+        },
+        "Keybinding": {
+            type: "buttonBar",
+            path: "keyboardHandler",
+            items: [
+                { caption: "Ace", value: null },
+                { caption: "Vim", value: "ace/keyboard/vim" },
+                { caption: "Emacs", value: "ace/keyboard/emacs" },
+                { caption: "Sublime", value: "ace/keyboard/sublime" },
+                { caption: "VSCode", value: "ace/keyboard/vscode" }
+            ]
+        },
+        "Font Size": {
+            path: "fontSize",
+            type: "number",
+            defaultValue: 12,
+            defaults: [
+                { caption: "12px", value: 12 },
+                { caption: "24px", value: 24 }
+            ]
+        },
+        "Soft Wrap": {
+            type: "buttonBar",
+            path: "wrap",
+            items: [
+                { caption: "Off", value: "off" },
+                { caption: "View", value: "free" },
+                { caption: "margin", value: "printMargin" },
+                { caption: "40", value: "40" }
+            ]
+        },
+        "Cursor Style": {
+            path: "cursorStyle",
+            items: [
+                { caption: "Ace", value: "ace" },
+                { caption: "Slim", value: "slim" },
+                { caption: "Smooth", value: "smooth" },
+                { caption: "Smooth And Slim", value: "smooth slim" },
+                { caption: "Wide", value: "wide" }
+            ]
+        },
+        "Folding": {
+            path: "foldStyle",
+            items: [
+                { caption: "Manual", value: "manual" },
+                { caption: "Mark begin", value: "markbegin" },
+                { caption: "Mark begin and end", value: "markbeginend" }
+            ]
+        },
+        "Soft Tabs": [{
+                path: "useSoftTabs"
+            }, {
+                ariaLabel: "Tab Size",
+                path: "tabSize",
+                type: "number",
+                values: [2, 3, 4, 8, 16]
+            }],
+        "Overscroll": {
+            type: "buttonBar",
+            path: "scrollPastEnd",
+            items: [
+                { caption: "None", value: 0 },
+                { caption: "Half", value: 0.5 },
+                { caption: "Full", value: 1 }
+            ]
+        }
+    },
+    More: {
+        "Atomic soft tabs": {
+            path: "navigateWithinSoftTabs"
+        },
+        "Enable Behaviours": {
+            path: "behavioursEnabled"
+        },
+        "Wrap with quotes": {
+            path: "wrapBehavioursEnabled"
+        },
+        "Enable Auto Indent": {
+            path: "enableAutoIndent"
+        },
+        "Full Line Selection": {
+            type: "checkbox",
+            values: "text|line",
+            path: "selectionStyle"
+        },
+        "Highlight Active Line": {
+            path: "highlightActiveLine"
+        },
+        "Show Invisibles": {
+            path: "showInvisibles"
+        },
+        "Show Indent Guides": {
+            path: "displayIndentGuides"
+        },
+        "Highlight Indent Guides": {
+            path: "highlightIndentGuides"
+        },
+        "Persistent HScrollbar": {
+            path: "hScrollBarAlwaysVisible"
+        },
+        "Persistent VScrollbar": {
+            path: "vScrollBarAlwaysVisible"
+        },
+        "Animate scrolling": {
+            path: "animatedScroll"
+        },
+        "Show Gutter": {
+            path: "showGutter"
+        },
+        "Show Line Numbers": {
+            path: "showLineNumbers"
+        },
+        "Relative Line Numbers": {
+            path: "relativeLineNumbers"
+        },
+        "Fixed Gutter Width": {
+            path: "fixedWidthGutter"
+        },
+        "Show Print Margin": [{
+                path: "showPrintMargin"
+            }, {
+                ariaLabel: "Print Margin",
+                type: "number",
+                path: "printMarginColumn"
+            }],
+        "Indented Soft Wrap": {
+            path: "indentedSoftWrap"
+        },
+        "Highlight selected word": {
+            path: "highlightSelectedWord"
+        },
+        "Fade Fold Widgets": {
+            path: "fadeFoldWidgets"
+        },
+        "Use textarea for IME": {
+            path: "useTextareaForIME"
+        },
+        "Merge Undo Deltas": {
+            path: "mergeUndoDeltas",
+            items: [
+                { caption: "Always", value: "always" },
+                { caption: "Never", value: "false" },
+                { caption: "Timed", value: "true" }
+            ]
+        },
+        "Elastic Tabstops": {
+            path: "useElasticTabstops"
+        },
+        "Incremental Search": {
+            path: "useIncrementalSearch"
+        },
+        "Read-only": {
+            path: "readOnly"
+        },
+        "Copy without selection": {
+            path: "copyWithEmptySelection"
+        },
+        "Live Autocompletion": {
+            path: "enableLiveAutocompletion"
+        },
+        "Custom scrollbar": {
+            path: "customScrollbar"
+        },
+        "Use SVG gutter icons": {
+            path: "useSvgGutterIcons"
+        },
+        "Annotations for folded lines": {
+            path: "showFoldedAnnotations"
+        },
+        "Keyboard Accessibility Mode": {
+            path: "enableKeyboardAccessibility"
+        }
+    }
+};
+var OptionPanel = /** @class */ (function () {
+    function OptionPanel(editor, element) {
+        this.editor = editor;
+        this.container = element || document.createElement("div");
+        this.groups = [];
+        this.options = {};
+    }
+    OptionPanel.prototype.add = function (config) {
+        if (config.Main)
+            oop.mixin(optionGroups.Main, config.Main);
+        if (config.More)
+            oop.mixin(optionGroups.More, config.More);
+    };
+    OptionPanel.prototype.render = function () {
+        this.container.innerHTML = "";
+        buildDom(["table", { role: "presentation", id: "controls" },
+            this.renderOptionGroup(optionGroups.Main),
+            ["tr", null, ["td", { colspan: 2 },
+                    ["table", { role: "presentation", id: "more-controls" },
+                        this.renderOptionGroup(optionGroups.More)
+                    ]
+                ]],
+            ["tr", null, ["td", { colspan: 2 }, "version " + config.version]]
+        ], this.container);
+    };
+    OptionPanel.prototype.renderOptionGroup = function (group) {
+        return Object.keys(group).map(function (key, i) {
+            var item = group[key];
+            if (!item.position)
+                item.position = i / 10000;
+            if (!item.label)
+                item.label = key;
+            return item;
+        }).sort(function (a, b) {
+            return a.position - b.position;
+        }).map(function (item) {
+            return this.renderOption(item.label, item);
+        }, this);
+    };
+    OptionPanel.prototype.renderOptionControl = function (key, option) {
+        var self = this;
+        if (Array.isArray(option)) {
+            return option.map(function (x) {
+                return self.renderOptionControl(key, x);
+            });
+        }
+        var control;
+        var value = self.getOption(option);
+        if (option.values && option.type != "checkbox") {
+            if (typeof option.values == "string")
+                option.values = option.values.split("|");
+            option.items = option.values.map(function (v) {
+                return { value: v, name: v };
+            });
+        }
+        if (option.type == "buttonBar") {
+            control = ["div", { role: "group", "aria-labelledby": option.path + "-label" }, option.items.map(function (item) {
+                    return ["button", {
+                            value: item.value,
+                            ace_selected_button: value == item.value,
+                            'aria-pressed': value == item.value,
+                            onclick: function () {
+                                self.setOption(option, item.value);
+                                var nodes = this.parentNode.querySelectorAll("[ace_selected_button]");
+                                for (var i = 0; i < nodes.length; i++) {
+                                    nodes[i].removeAttribute("ace_selected_button");
+                                    nodes[i].setAttribute("aria-pressed", false);
+                                }
+                                this.setAttribute("ace_selected_button", true);
+                                this.setAttribute("aria-pressed", true);
+                            }
+                        }, item.desc || item.caption || item.name];
+                })];
+        }
+        else if (option.type == "number") {
+            control = ["input", { type: "number", value: value || option.defaultValue, style: "width:3em", oninput: function () {
+                        self.setOption(option, parseInt(this.value));
+                    } }];
+            if (option.ariaLabel) {
+                control[1]["aria-label"] = option.ariaLabel;
+            }
+            else {
+                control[1].id = key;
+            }
+            if (option.defaults) {
+                control = [control, option.defaults.map(function (item) {
+                        return ["button", { onclick: function () {
+                                    var input = this.parentNode.firstChild;
+                                    input.value = item.value;
+                                    input.oninput();
+                                } }, item.caption];
+                    })];
+            }
+        }
+        else if (option.items) {
+            var buildItems = function (items) {
+                return items.map(function (item) {
+                    return ["option", { value: item.value || item.name }, item.desc || item.caption || item.name];
+                });
+            };
+            var items = Array.isArray(option.items)
+                ? buildItems(option.items)
+                : Object.keys(option.items).map(function (key) {
+                    return ["optgroup", { "label": key }, buildItems(option.items[key])];
+                });
+            control = ["select", { id: key, value: value, onchange: function () {
+                        self.setOption(option, this.value);
+                    } }, items];
+        }
+        else {
+            if (typeof option.values == "string")
+                option.values = option.values.split("|");
+            if (option.values)
+                value = value == option.values[1];
+            control = ["input", { type: "checkbox", id: key, checked: value || null, onchange: function () {
+                        var value = this.checked;
+                        if (option.values)
+                            value = option.values[value ? 1 : 0];
+                        self.setOption(option, value);
+                    } }];
+            if (option.type == "checkedNumber") {
+                control = [control, []];
+            }
+        }
+        return control;
+    };
+    OptionPanel.prototype.renderOption = function (key, option) {
+        if (option.path && !option.onchange && !this.editor.$options[option.path])
+            return;
+        var path = Array.isArray(option) ? option[0].path : option.path;
+        this.options[path] = option;
+        var safeKey = "-" + path;
+        var safeId = path + "-label";
+        var control = this.renderOptionControl(safeKey, option);
+        return ["tr", { class: "ace_optionsMenuEntry" }, ["td",
+                ["label", { for: safeKey, id: safeId }, key]
+            ], ["td", control]];
+    };
+    OptionPanel.prototype.setOption = function (option, value) {
+        if (typeof option == "string")
+            option = this.options[option];
+        if (value == "false")
+            value = false;
+        if (value == "true")
+            value = true;
+        if (value == "null")
+            value = null;
+        if (value == "undefined")
+            value = undefined;
+        if (typeof value == "string" && parseFloat(value).toString() == value)
+            value = parseFloat(value);
+        if (option.onchange)
+            option.onchange(value);
+        else if (option.path)
+            this.editor.setOption(option.path, value);
+        this._signal("setOption", { name: option.path, value: value });
+    };
+    OptionPanel.prototype.getOption = function (option) {
+        if (option.getValue)
+            return option.getValue();
+        return this.editor.getOption(option.path);
+    };
+    return OptionPanel;
+}());
+oop.implement(OptionPanel.prototype, EventEmitter);
+exports.OptionPanel = OptionPanel;
+exports.optionGroups = optionGroups;
+
+});                (function() {
+                    ace.require(["ace/ext/options"], function(m) {
+                        if (typeof module == "object" && typeof exports == "object" && module) {
+                            module.exports = m;
+                        }
+                    });
+                })();
+