CodeMirror Dropdown working

scripts/project.json

@@ -25,6 +25,7 @@
 		"codemirror/addon/edit/closetag.js",
 		"codemirror/addon/edit/trailingspace.js",
 		"codemirror/addon/selection/active-line.js",
+		"codemirror/addon/hint/show-hint.js",
 		"moment",
 		"superagent"
 	]

shared/naturalcrit/codeEditor/autocomplete-emoji.js

@@ -0,0 +1,61 @@
+const dicefont = require('../../../themes/fonts/icon fonts/dicefont.js');
+
+const emojis = {
+	...dicefont,
+	"fas-heart": "fa-solid fa-heart",
+	"fas-star": "fa-solid fa-star"
+};
+
+const showEmojiAutocomplete = function(CodeMirror, editor) {
+	CodeMirror.commands.autocomplete = function(editor) {
+		editor.showHint({
+			completeSingle: false,
+			hint: function(editor) {
+				const cursor = editor.getCursor();
+				const line = cursor.line;
+				const lineContent = editor.getLine(line);
+				const start = lineContent.lastIndexOf(':', cursor.ch - 1) + 1;
+				const end = cursor.ch;
+				const currentWord = lineContent.slice(start, end);
+				
+	
+				const list = Object.keys(emojis).filter(function(emoji) {
+					return emoji.indexOf(currentWord) >= 0;
+				}).map(function(emoji) {
+					return {
+						text: emoji + ":",
+						//displayText: `${emoji} - <i class="${emojis[emoji]}"></i>`,
+						render: function(element, self, data) {
+							const div = document.createElement('div');
+							div.innerHTML = `<i class="${emojis[emoji]}"></i> ${emoji}`;
+							element.appendChild(div);
+						}
+					};
+				});
+	
+				return {
+					list: list.length ? list : [],
+					from: CodeMirror.Pos(line, start),
+					to: CodeMirror.Pos(line, end)
+				};
+			}
+		});
+	};
+	
+	editor.on('inputRead', function(instance, change) {
+		const cursor = editor.getCursor();
+		const line = editor.getLine(cursor.line);
+	
+		// Get the text from the start of the line to the cursor
+		const textToCursor = line.slice(0, cursor.ch);
+	
+		// Check if the text ends with ':xyz'
+		if (/:\S+$/.test(textToCursor)) {
+			CodeMirror.commands.autocomplete(editor);
+		}
+	});
+}
+
+module.exports = {
+  showEmojiAutocomplete
+};

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -5,6 +5,7 @@ const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 const closeTag = require('./close-tag');
+const autoCompleteEmojis = require('./autocomplete-emoji');
 
 let CodeMirror;
 if(typeof window !== 'undefined'){
@@ -36,6 +37,8 @@ if(typeof window !== 'undefined'){
 	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
 	require('codemirror/addon/fold/xml-fold.js');
 	require('codemirror/addon/edit/closetag.js');
+	//Autoccompletion
+	require('codemirror/addon/hint/show-hint.js');
 
 	const foldCode = require('./fold-code');
 	foldCode.registerHomebreweryHelper(CodeMirror);
@@ -177,7 +180,10 @@ const CodeEditor = createClass({
 			// 	return el;
 			// }
 		});
+		
+		// Add custom behaviors (auto-close curlies and auto-complete emojis)
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
+		autoCompleteEmojis.showEmojiAutocomplete(CodeMirror, this.codeMirror);
 
 		// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works.
 		this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());});

shared/naturalcrit/codeEditor/codeEditor.less

@@ -2,6 +2,8 @@
 @import (less) 'codemirror/addon/fold/foldgutter.css';
 @import (less) 'codemirror/addon/search/matchesonscrollbar.css';
 @import (less) 'codemirror/addon/dialog/dialog.css';
+@import (less) 'codemirror/addon/hint/show-hint.css';
+@import (less) './themes/fonts/icon fonts/dicefont.less';
 
 @keyframes sourceMoveAnimation {
 	50%  {background-color: red;   color: white;}

shared/naturalcrit/markdown.js

@@ -10,8 +10,6 @@ const MathParser = require('expr-eval').Parser;
 const renderer = new Marked.Renderer();
 const tokenizer = new Marked.Tokenizer();
 
-console.log(dicefont)
-
 //Limit math features to simple items
 const mathParser = new MathParser({
 	operators : {
@@ -624,8 +622,8 @@ function MarkedVariables() {
 const MarkedEmojiOptions = {
 	emojis: {
 		...dicefont,
-		"heart": "fa-solid fa-heart",
-		"star": "fa-solid fa-star"
+		"fas-heart": "fa-solid fa-heart",
+		"fas-star": "fa-solid fa-star"
 	},
 	renderer: (token) => `<i class="${token.emoji}"></i>`
 };