@openui5/sap.ui.codeeditor 1.133.1 → 1.135.0

package/src/sap/ui/codeeditor/js/ace/ext-searchbox.js

@@ -14,28 +14,29 @@ var MAX_COUNT = 999;
 dom.importCssString(searchboxCss, "ace_searchbox", false);
 var SearchBox = /** @class */ (function () {
     function SearchBox(editor, range, showReplaceForm) {
+        this.activeInput;
         var div = dom.createElement("div");
         dom.buildDom(["div", { class: "ace_search right" },
             ["span", { action: "hide", class: "ace_searchbtn_close" }],
             ["div", { class: "ace_search_form" },
-                ["input", { class: "ace_search_field", placeholder: nls("Search for"), spellcheck: "false" }],
+                ["input", { class: "ace_search_field", placeholder: nls("search-box.find.placeholder", "Search for"), spellcheck: "false" }],
                 ["span", { action: "findPrev", class: "ace_searchbtn prev" }, "\u200b"],
                 ["span", { action: "findNext", class: "ace_searchbtn next" }, "\u200b"],
-                ["span", { action: "findAll", class: "ace_searchbtn", title: "Alt-Enter" }, nls("All")]
+                ["span", { action: "findAll", class: "ace_searchbtn", title: "Alt-Enter" }, nls("search-box.find-all.text", "All")]
             ],
             ["div", { class: "ace_replace_form" },
-                ["input", { class: "ace_search_field", placeholder: nls("Replace with"), spellcheck: "false" }],
-                ["span", { action: "replaceAndFindNext", class: "ace_searchbtn" }, nls("Replace")],
-                ["span", { action: "replaceAll", class: "ace_searchbtn" }, nls("All")]
+                ["input", { class: "ace_search_field", placeholder: nls("search-box.replace.placeholder", "Replace with"), spellcheck: "false" }],
+                ["span", { action: "replaceAndFindNext", class: "ace_searchbtn" }, nls("search-box.replace-next.text", "Replace")],
+                ["span", { action: "replaceAll", class: "ace_searchbtn" }, nls("search-box.replace-all.text", "All")]
             ],
             ["div", { class: "ace_search_options" },
-                ["span", { action: "toggleReplace", class: "ace_button", title: nls("Toggle Replace mode"),
+                ["span", { action: "toggleReplace", class: "ace_button", title: nls("search-box.toggle-replace.title", "Toggle Replace mode"),
                         style: "float:left;margin-top:-2px;padding:0 5px;" }, "+"],
                 ["span", { class: "ace_search_counter" }],
-                ["span", { action: "toggleRegexpMode", class: "ace_button", title: nls("RegExp Search") }, ".*"],
-                ["span", { action: "toggleCaseSensitive", class: "ace_button", title: nls("CaseSensitive Search") }, "Aa"],
-                ["span", { action: "toggleWholeWords", class: "ace_button", title: nls("Whole Word Search") }, "\\b"],
-                ["span", { action: "searchInSelection", class: "ace_button", title: nls("Search In Selection") }, "S"]
+                ["span", { action: "toggleRegexpMode", class: "ace_button", title: nls("search-box.toggle-regexp.title", "RegExp Search") }, ".*"],
+                ["span", { action: "toggleCaseSensitive", class: "ace_button", title: nls("search-box.toggle-case.title", "CaseSensitive Search") }, "Aa"],
+                ["span", { action: "toggleWholeWords", class: "ace_button", title: nls("search-box.toggle-whole-word.title", "Whole Word Search") }, "\\b"],
+                ["span", { action: "searchInSelection", class: "ace_button", title: nls("search-box.toggle-in-selection.title", "Search In Selection") }, "S"]
             ]
         ], div);
         this.element = div.firstChild;
@@ -153,6 +154,7 @@ var SearchBox = /** @class */ (function () {
     SearchBox.prototype.updateCounter = function () {
         var editor = this.editor;
         var regex = editor.$search.$options.re;
+        var supportsUnicodeFlag = regex.unicode;
         var all = 0;
         var before = 0;
         if (regex) {
@@ -172,13 +174,13 @@ var SearchBox = /** @class */ (function () {
                 if (all > MAX_COUNT)
                     break;
                 if (!m[0]) {
-                    regex.lastIndex = last += 1;
+                    regex.lastIndex = last += lang.skipEmptyMatch(value, last, supportsUnicodeFlag);
                     if (last >= value.length)
                         break;
                 }
             }
         }
-        this.searchCounter.textContent = nls("$0 of $1", [before, (all > MAX_COUNT ? MAX_COUNT + "+" : all)]);
+        this.searchCounter.textContent = nls("search-box.search-counter", "$0 of $1", [before, (all > MAX_COUNT ? MAX_COUNT + "+" : all)]);
     };
     SearchBox.prototype.findNext = function () {
         this.find(true, false);

package/src/sap/ui/codeeditor/js/ace/ext-settings_menu.js

@@ -105,10 +105,12 @@ var supportedModes = {
     AQL: ["aql"],
     AsciiDoc: ["asciidoc|adoc"],
     ASL: ["dsl|asl|asl.json"],
+    Assembly_ARM32: ["s"],
     Assembly_x86: ["asm|a"],
     Astro: ["astro"],
     AutoHotKey: ["ahk"],
     BatchFile: ["bat|cmd"],
+    Basic: ["bas|bak"],
     BibTeX: ["bib"],
     C_Cpp: ["cpp|c|cc|cxx|h|hh|hpp|ino"],
     C9Search: ["c9search_results"],
@@ -158,7 +160,7 @@ var supportedModes = {
     Haskell_Cabal: ["cabal"],
     haXe: ["hx"],
     Hjson: ["hjson"],
-    HTML: ["html|htm|xhtml|vue|we|wpy"],
+    HTML: ["html|htm|xhtml|we|wpy"],
     HTML_Elixir: ["eex|html.eex"],
     HTML_Ruby: ["erb|rhtml|html.erb"],
     INI: ["ini|conf|cfg|prefs"],
@@ -167,7 +169,7 @@ var supportedModes = {
     Jack: ["jack"],
     Jade: ["jade|pug"],
     Java: ["java"],
-    JavaScript: ["js|jsm|jsx|cjs|mjs"],
+    JavaScript: ["js|jsm|cjs|mjs"],
     JEXL: ["jexl"],
     JSON: ["json"],
     JSON5: ["json5"],
@@ -275,11 +277,13 @@ var supportedModes = {
     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"]
+    Zeek: ["zeek|bro"],
+    Zig: ["zig"]
 };
 var nameOverrides = {
     ObjectiveC: "Objective-C",
@@ -329,7 +333,8 @@ var themeData = [
     ["Dawn"],
     ["Dreamweaver"],
     ["Eclipse"],
-    ["GitHub"],
+    ["GitHub Light Default"],
+    ["GitHub (Legacy)", "github", "light"],
     ["IPlastic"],
     ["Solarized Light"],
     ["TextMate"],
@@ -338,6 +343,7 @@ var themeData = [
     ["Kuroir"],
     ["KatzenMilch"],
     ["SQL Server", "sqlserver", "light"],
+    ["CloudEditor", "cloud_editor", "light"],
     ["Ambiance", "ambiance", "dark"],
     ["Chaos", "chaos", "dark"],
     ["Clouds Midnight", "clouds_midnight", "dark"],
@@ -362,7 +368,8 @@ var themeData = [
     ["Tomorrow Night 80s", "tomorrow_night_eighties", "dark"],
     ["Twilight", "twilight", "dark"],
     ["Vibrant Ink", "vibrant_ink", "dark"],
-    ["GitHub Dark", "github_dark", "dark"]
+    ["GitHub Dark", "github_dark", "dark"],
+    ["CloudEditor Dark", "cloud_editor_dark", "dark"]
 ];
 exports.themesByName = {};
 exports.themes = themeData.map(function (data) {

package/src/sap/ui/codeeditor/js/ace/ext-split.js

@@ -5,7 +5,8 @@ var EventEmitter = require("./lib/event_emitter").EventEmitter;
 var Editor = require("./editor").Editor;
 var Renderer = require("./virtual_renderer").VirtualRenderer;
 var EditSession = require("./edit_session").EditSession;
-var Split = function (container, theme, splits) {
+var Split;
+Split = function (container, theme, splits) {
     this.BELOW = 1;
     this.BESIDE = 0;
     this.$container = container;

package/src/sap/ui/codeeditor/js/ace/ext-textarea.js

@@ -1,3 +1,476 @@
-// ##### BEGIN MODIFIED BY SAP
-throw new Error("Module 'ace/ext/textarea' can not be used due to CSP inline styles violations");
-// ##### END MODIFIED BY SAP
+"use strict";
+
+var event = require("../lib/event");
+var UA = require("../lib/useragent");
+var ace = require("../ace");
+
+module.exports = exports = ace;
+
+/*
+ * Returns the CSS property of element.
+ *   1) If the CSS property is on the style object of the element, use it, OR
+ *   2) Compute the CSS property
+ *
+ * If the property can't get computed, is 'auto' or 'intrinsic', the former
+ * calculated property is used (this can happen in cases where the textarea
+ * is hidden and has no dimension styles).
+ */
+var getCSSProperty = function (element, container, property) {
+	var ret = element.style[property];
+
+	if (!ret) {
+		if (window.getComputedStyle) {
+			ret = window.getComputedStyle(element, '').getPropertyValue(property);
+		} else {
+			ret = element.currentStyle[property];
+		}
+	}
+
+	if (!ret || ret == 'auto' || ret == 'intrinsic') {
+		ret = container.style[property];
+	}
+	return ret;
+};
+
+function applyStyles(elm, styles) {
+	for (var style in styles) {
+		elm.style[style] = styles[style];
+	}
+}
+
+function setupContainer(element, getValue) {
+	if (element.type != 'textarea') {
+		throw new Error("Textarea required!");
+	}
+
+	var parentNode = element.parentNode;
+
+	// This will hold the editor.
+	var container = document.createElement('div');
+
+	// To put Ace in the place of the textarea, we have to copy a few of the
+	// textarea's style attributes to the div container.
+	//
+	// The problem is that the properties have to get computed (they might be
+	// defined by a CSS file on the page - you can't access such rules that
+	// apply to an element via elm.style). Computed properties are converted to
+	// pixels although the dimension might be given as percentage. When the
+	// window resizes, the dimensions defined by percentages changes, so the
+	// properties have to get recomputed to get the new/true pixels.
+	var resizeEvent = function () {
+		var style = 'position:relative;';
+		[
+			'margin-top', 'margin-left', 'margin-right', 'margin-bottom'
+		].forEach(function (item) {
+			style += item + ':' +
+				getCSSProperty(element, container, item) + ';';
+		});
+
+		// Calculating the width/height of the textarea is somewhat tricky. To
+		// do it right, you have to include the paddings to the sides as well
+		// (eg. width = width + padding-left, -right).  This works well, as
+		// long as the width of the element is not set or given in pixels. In
+		// this case and after the textarea is hidden, getCSSProperty(element,
+		// container, 'width') will still return pixel value. If the element
+		// has realtiv dimensions (e.g. width='95<percent>')
+		// getCSSProperty(...) will return pixel values only as long as the
+		// textarea is visible. After it is hidden getCSSProperty will return
+		// the relative dimensions as they are set on the element (in the case
+		// of width, 95<percent>).
+		// Making the sum of pixel vaules (e.g. padding) and realtive values
+		// (e.g. <percent>) is not possible. As such the padding styles are
+		// ignored.
+
+		// The complete width is the width of the textarea + the padding
+		// to the left and right.
+		var width = getCSSProperty(element, container, 'width') || (element.clientWidth + "px");
+		var height = getCSSProperty(element, container, 'height') || (element.clientHeight + "px");
+		style += 'height:' + height + ';width:' + width + ';';
+
+		// Set the display property to 'inline-block'.
+		style += 'display:inline-block;';
+		container.style.cssText = style;
+	};
+	event.addListener(window, 'resize', resizeEvent);
+
+	// Call the resizeEvent once, so that the size of the container is
+	// calculated.
+	resizeEvent();
+
+	// Insert the div container after the element.
+	parentNode.insertBefore(container, element.nextSibling);
+
+	// Override the forms onsubmit function. Set the innerHTML and value
+	// of the textarea before submitting.
+	while (parentNode !== document) {
+		if (parentNode.tagName.toUpperCase() === 'FORM') {
+			var oldSumit = parentNode.onsubmit;
+			// Override the onsubmit function of the form.
+			parentNode.onsubmit = function (evt) {
+				element.value = getValue();
+				// If there is a onsubmit function already, then call
+				// it with the current context and pass the event.
+				if (oldSumit) {
+					oldSumit.call(this, evt);
+				}
+			};
+			break;
+		}
+		parentNode = parentNode.parentNode;
+	}
+	return container;
+}
+
+exports.transformTextarea = function (element, options) {
+	var isFocused = element.autofocus || document.activeElement == element;
+	var session;
+	var container = setupContainer(element, function () {
+		return session.getValue();
+	});
+
+	// Hide the element.
+	element.style.display = 'none';
+	container.style.background = 'white';
+
+	//
+	var editorDiv = document.createElement("div");
+	applyStyles(editorDiv, {
+		top: "0px",
+		left: "0px",
+		right: "0px",
+		bottom: "0px",
+		border: "1px solid gray",
+		position: "absolute"
+	});
+	container.appendChild(editorDiv);
+
+	var settingOpener = document.createElement("div");
+	applyStyles(settingOpener, {
+		position: "absolute",
+		right: "0px",
+		bottom: "0px",
+		cursor: "nw-resize",
+		border: "solid 9px",
+		borderColor: "lightblue gray gray #ceade6",
+		zIndex: 101
+	});
+
+	var settingDiv = document.createElement("div");
+	var settingDivStyles = {
+		top: "0px",
+		left: "20%",
+		right: "0px",
+		bottom: "0px",
+		position: "absolute",
+		padding: "5px",
+		zIndex: 100,
+		color: "white",
+		display: "none",
+		overflow: "auto",
+		fontSize: "14px",
+		boxShadow: "-5px 2px 3px gray"
+	};
+	if (!UA.isOldIE) {
+		settingDivStyles.backgroundColor = "rgba(0, 0, 0, 0.6)";
+	} else {
+		settingDivStyles.backgroundColor = "#333";
+	}
+
+	applyStyles(settingDiv, settingDivStyles);
+	container.appendChild(settingDiv);
+
+	options = options || exports.defaultOptions;
+	// Power up ace on the textarea:
+	var editor = ace.edit(editorDiv);
+	session = editor.getSession();
+
+	session.setValue(element.value || element.innerHTML);
+	if (isFocused)
+		editor.focus();
+
+	// Add the settingPanel opener to the editor's div.
+	container.appendChild(settingOpener);
+
+	// Create the API.
+	setupApi(editor, editorDiv, settingDiv, ace, options);
+
+	// Create the setting's panel.
+	setupSettingPanel(settingDiv, settingOpener, editor);
+
+	var state = "";
+	event.addListener(settingOpener, "mousemove", function (e) {
+		var rect = this.getBoundingClientRect();
+		var x = e.clientX - rect.left, y = e.clientY - rect.top;
+		if (x + y < (rect.width + rect.height) / 2) {
+			this.style.cursor = "pointer";
+			state = "toggle";
+		} else {
+			state = "resize";
+			this.style.cursor = "nw-resize";
+		}
+	});
+
+	event.addListener(settingOpener, "mousedown", function (e) {
+		e.preventDefault();
+		if (state == "toggle") {
+			editor.setDisplaySettings();
+			return;
+		}
+		container.style.zIndex = 100000;
+		var rect = container.getBoundingClientRect();
+		var startX = rect.width + rect.left - e.clientX;
+		var startY = rect.height + rect.top - e.clientY;
+		event.capture(settingOpener, function (e) {
+			container.style.width = e.clientX - rect.left + startX + "px";
+			container.style.height = e.clientY - rect.top + startY + "px";
+			editor.resize();
+		}, function () { });
+	});
+
+	return editor;
+};
+
+function setupApi(editor, editorDiv, settingDiv, ace, options) {
+	function toBool(value) {
+		return value === "true" || value == true;
+	}
+
+	editor.setDisplaySettings = function (display) {
+		if (display == null)
+			display = settingDiv.style.display == "none";
+		if (display) {
+			settingDiv.style.display = "block";
+			settingDiv.hideButton.focus();
+			editor.on("focus", function onFocus() {
+				editor.removeListener("focus", onFocus);
+				settingDiv.style.display = "none";
+			});
+		} else {
+			editor.focus();
+		}
+	};
+
+	editor.$setOption = editor.setOption;
+	editor.$getOption = editor.getOption;
+	editor.setOption = function (key, value) {
+		switch (key) {
+			case "mode":
+				editor.$setOption("mode", "ace/mode/" + value);
+				break;
+			case "theme":
+				editor.$setOption("theme", "ace/theme/" + value);
+				break;
+			case "keybindings":
+				switch (value) {
+					case "vim":
+						editor.setKeyboardHandler("ace/keyboard/vim");
+						break;
+					case "emacs":
+						editor.setKeyboardHandler("ace/keyboard/emacs");
+						break;
+					default:
+						editor.setKeyboardHandler(null);
+				}
+				break;
+
+			case "wrap":
+			case "fontSize":
+				editor.$setOption(key, value);
+				break;
+
+			default:
+				editor.$setOption(key, toBool(value));
+		}
+	};
+
+	editor.getOption = function (key) {
+		switch (key) {
+			case "mode":
+				return editor.$getOption("mode").substr("ace/mode/".length);
+				break;
+
+			case "theme":
+				return editor.$getOption("theme").substr("ace/theme/".length);
+				break;
+
+			case "keybindings":
+				var value = editor.getKeyboardHandler();
+				switch (value && value.$id) {
+					case "ace/keyboard/vim":
+						return "vim";
+					case "ace/keyboard/emacs":
+						return "emacs";
+					default:
+						return "ace";
+				}
+				break;
+
+			default:
+				return editor.$getOption(key);
+		}
+	};
+
+	editor.setOptions(options);
+	return editor;
+}
+
+function setupSettingPanel(settingDiv, settingOpener, editor) {
+	var BOOL = null;
+
+	var desc = {
+		mode: "Mode:",
+		wrap: "Soft Wrap:",
+		theme: "Theme:",
+		fontSize: "Font Size:",
+		showGutter: "Display Gutter:",
+		keybindings: "Keyboard",
+		showPrintMargin: "Show Print Margin:",
+		useSoftTabs: "Use Soft Tabs:",
+		showInvisibles: "Show Invisibles"
+	};
+
+	var optionValues = {
+		mode: {
+			text: "Plain",
+			javascript: "JavaScript",
+			xml: "XML",
+			html: "HTML",
+			css: "CSS",
+			scss: "SCSS",
+			python: "Python",
+			php: "PHP",
+			java: "Java",
+			ruby: "Ruby",
+			c_cpp: "C/C++",
+			coffee: "CoffeeScript",
+			json: "json",
+			perl: "Perl",
+			clojure: "Clojure",
+			ocaml: "OCaml",
+			csharp: "C#",
+			haxe: "haXe",
+			svg: "SVG",
+			textile: "Textile",
+			groovy: "Groovy",
+			liquid: "Liquid",
+			Scala: "Scala"
+		},
+		theme: {
+			clouds: "Clouds",
+			clouds_midnight: "Clouds Midnight",
+			cobalt: "Cobalt",
+			crimson_editor: "Crimson Editor",
+			dawn: "Dawn",
+			gob: "Green on Black",
+			eclipse: "Eclipse",
+			idle_fingers: "Idle Fingers",
+			kr_theme: "Kr Theme",
+			merbivore: "Merbivore",
+			merbivore_soft: "Merbivore Soft",
+			mono_industrial: "Mono Industrial",
+			monokai: "Monokai",
+			pastel_on_dark: "Pastel On Dark",
+			solarized_dark: "Solarized Dark",
+			solarized_light: "Solarized Light",
+			textmate: "Textmate",
+			twilight: "Twilight",
+			vibrant_ink: "Vibrant Ink"
+		},
+		showGutter: BOOL,
+		fontSize: {
+			"10px": "10px",
+			"11px": "11px",
+			"12px": "12px",
+			"14px": "14px",
+			"16px": "16px"
+		},
+		wrap: {
+			off: "Off",
+			40: "40",
+			80: "80",
+			free: "Free"
+		},
+		keybindings: {
+			ace: "ace",
+			vim: "vim",
+			emacs: "emacs"
+		},
+		showPrintMargin: BOOL,
+		useSoftTabs: BOOL,
+		showInvisibles: BOOL
+	};
+
+	var table = [];
+	table.push("<table><tr><th>Setting</th><th>Value</th></tr>");
+
+	function renderOption(builder, option, obj, cValue) {
+		if (!obj) {
+			builder.push(
+				"<input type='checkbox' title='", option, "' ",
+				cValue + "" == "true" ? "checked='true'" : "",
+				"'></input>"
+			);
+			return;
+		}
+		builder.push("<select title='" + option + "'>");
+		for (var value in obj) {
+			builder.push("<option value='" + value + "' ");
+
+			if (cValue == value) {
+				builder.push(" selected ");
+			}
+
+			builder.push(">",
+				obj[value],
+				"</option>");
+		}
+		builder.push("</select>");
+	}
+
+	for (var option in exports.defaultOptions) {
+		table.push("<tr><td>", desc[option], "</td>");
+		table.push("<td>");
+		renderOption(table, option, optionValues[option], editor.getOption(option));
+		table.push("</td></tr>");
+	}
+	table.push("</table>");
+	settingDiv.innerHTML = table.join("");
+
+	var onChange = function (e) {
+		var select = e.currentTarget;
+		editor.setOption(select.title, select.value);
+	};
+	var onClick = function (e) {
+		var cb = e.currentTarget;
+		editor.setOption(cb.title, cb.checked);
+	};
+	var selects = settingDiv.getElementsByTagName("select");
+	for (var i = 0; i < selects.length; i++)
+		selects[i].onchange = onChange;
+	var cbs = settingDiv.getElementsByTagName("input");
+	for (var i = 0; i < cbs.length; i++)
+		cbs[i].onclick = onClick;
+
+
+	var button = document.createElement("input");
+	button.type = "button";
+	button.value = "Hide";
+	event.addListener(button, "click", function () {
+		editor.setDisplaySettings(false);
+	});
+	settingDiv.appendChild(button);
+	settingDiv.hideButton = button;
+}
+
+// Default startup options.
+exports.defaultOptions = {
+	mode: "javascript",
+	theme: "textmate",
+	wrap: "off",
+	fontSize: "12px",
+	showGutter: "false",
+	keybindings: "ace",
+	showPrintMargin: "false",
+	useSoftTabs: "true",
+	showInvisibles: "false"
+};

package/src/sap/ui/codeeditor/js/ace/ext-themelist.js

@@ -13,7 +13,8 @@ var themeData = [
     ["Dawn"],
     ["Dreamweaver"],
     ["Eclipse"],
-    ["GitHub"],
+    ["GitHub Light Default"],
+    ["GitHub (Legacy)", "github", "light"],
     ["IPlastic"],
     ["Solarized Light"],
     ["TextMate"],
@@ -22,6 +23,7 @@ var themeData = [
     ["Kuroir"],
     ["KatzenMilch"],
     ["SQL Server", "sqlserver", "light"],
+    ["CloudEditor", "cloud_editor", "light"],
     ["Ambiance", "ambiance", "dark"],
     ["Chaos", "chaos", "dark"],
     ["Clouds Midnight", "clouds_midnight", "dark"],
@@ -46,7 +48,8 @@ var themeData = [
     ["Tomorrow Night 80s", "tomorrow_night_eighties", "dark"],
     ["Twilight", "twilight", "dark"],
     ["Vibrant Ink", "vibrant_ink", "dark"],
-    ["GitHub Dark", "github_dark", "dark"]
+    ["GitHub Dark", "github_dark", "dark"],
+    ["CloudEditor Dark", "cloud_editor_dark", "dark"]
 ];
 exports.themesByName = {};
 exports.themes = themeData.map(function (data) {
@@ -68,3 +71,4 @@ exports.themes = themeData.map(function (data) {
                         }
                     });
                 })();
+