add custom mode demo

ajaxorg · Apr 18, 2023 · 0f5f51e · 0f5f51e
1 parent 773cda2
commit 0f5f51e
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,28 @@
+# Junk that could exist anywhere:
+.DS_Store
+*.swp
+*.tmp
+*~
+
+# Project files that should not be in the repo
+.*
+\#*
+!/.github
+!/.gitignore
+.*.gz
+*.tmTheme.js
+package-lock.json
+
+# A handy place to put stuff that git should ignore:
+/coverage
+/ignore/
+node_modules/
+jam/
+* *
+
+.git-ref
+npm-debug.log
+deps/
+dist
+
+lib/ace
diff --git a/samples/ace-builds-cdn/cusom-mode-example/index.html b/samples/ace-builds-cdn/cusom-mode-example/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Ace-builds-cdn</title>
+</head>
+	<body>
+	<div id="container" style="height: 100px"></div>
+	<script src="https://www.unpkg.com/ace-builds/src-noconflict/ace.js"></script>
+	<script src="https://www.unpkg.com/ace-builds/src-noconflict/ext-language_tools.js"></script>
+	<script>
+		ace.config.setModuleUrl("ux/mode/custom", "./my/mode-custom.js");
+		var editor = ace.edit("container", {
+			useWorker: false,
+			theme: "ace/theme/eclipse",
+			mode: "ux/mode/custom",
+			enableBasicAutocompletion: true,
+			enableSnippets: true,
+			enableLiveAutocompletion: true,
+			value: "CUSTOM_KEYWORD and some text"
+		});
+	</script>
+
+	</body>
+</html>
diff --git a/samples/ace-builds-cdn/cusom-mode-example/my/mode-custom.js b/samples/ace-builds-cdn/cusom-mode-example/my/mode-custom.js
@@ -0,0 +1,36 @@
+ace.define('ux/mode/custom', [], (acequire, exports) => {
+    const oop = acequire('ace/lib/oop');
+    const TextMode = acequire('ace/mode/text').Mode;
+    const CustomHighlightRules = acequire('ux/mode/custom_highlight_rules').CustomHighlightRules;
+
+    function Mode() {
+        this.HighlightRules = CustomHighlightRules;
+    }
+    oop.inherits(Mode, TextMode);
+
+    exports.Mode = Mode;
+});
+
+ace.define('ux/mode/custom_highlight_rules', [], (acequire, exports) => {
+    const oop = acequire('ace/lib/oop');
+    const TextHighlightRules = acequire('ace/mode/text_highlight_rules').TextHighlightRules;
+
+    const CustomHighlightRules = function CustomHighlightRules() {
+        this.$rules = {
+            start: [
+                {
+                    token: "keyword",
+                    regex: /[A-Z][A-Z\d]+/
+                },
+                {
+                    token: "numeric",
+                    regex: /[\d]+/
+                }
+            ]
+        }
+    };
+
+    oop.inherits(CustomHighlightRules, TextHighlightRules);
+
+    exports.CustomHighlightRules = CustomHighlightRules;
+});