multiple cursors

client/components/codeEditor/codeEditor.jsx

@@ -11,7 +11,8 @@ import {
 	scrollPastEnd,
 	Decoration,
 	ViewPlugin,
-	WidgetType
+	WidgetType,
+	drawSelection,
 } from '@codemirror/view';
 import { EditorState, Compartment } from '@codemirror/state';
 import { foldGutter, foldKeymap, syntaxHighlighting } from '@codemirror/language';
@@ -37,11 +38,11 @@ import { legacyCustomHighlightStyle, legacyTokenizeCustomMarkdown } from './lega
 const createHighlightPlugin = (renderer, tab)=>{
 	let tokenize;
 
-if (tab === "brewStyles") {
-  tokenize = tokenizeCustomCSS;
-} else {
-  tokenize = renderer === 'V3' ? tokenizeCustomMarkdown : legacyTokenizeCustomMarkdown;
-}
+	if(tab === 'brewStyles') {
+		tokenize = tokenizeCustomCSS;
+	} else {
+		tokenize = renderer === 'V3' ? tokenizeCustomMarkdown : legacyTokenizeCustomMarkdown;
+	}
 	/* eslint-disable no-restricted-syntax */
 	class countWidget extends WidgetType {
 		constructor(count) {
@@ -187,7 +188,9 @@ const CodeEditor = forwardRef(
 				...(tab !== 'brewStyles' ? [autocompleteEmoji] : []),
 				search(),
 				keymap.of([...defaultKeymap, foldKeymap, ...searchKeymap]),
-				customKeymap
+				customKeymap,
+				drawSelection(),
+				EditorState.allowMultipleSelections.of(true),
 			];
 		};
 
@@ -282,16 +285,23 @@ const CodeEditor = forwardRef(
 
 			injectText : (text)=>{
 				const view = viewRef.current;
-				const { from, to } = view.state.selection.main;
+				const changes = view.state.selection.ranges.map((range)=>({
+					from   : range.from,
+					to     : range.to,
+					insert : text
+				}));
+
+				const newRanges = view.state.selection.ranges.map((range)=>({
+					anchor : range.from + text.length
+				}));
 
 				view.dispatch({
-					changes   : { from, to, insert: text },
-					selection : { anchor: from + text.length },
+					changes,
+					selection : { ranges: newRanges }
 				});
 
 				view.focus();
 			},
-
 			getCursorPosition : ()=>viewRef.current.state.selection.main.head,
 
 			getScrollTop : ()=>viewRef.current.scrollDOM.scrollTop,

client/components/codeEditor/customHighlight.js

@@ -17,10 +17,9 @@ const customTags = {
 	definitionDesc  : 'definitionDesc', // .cm-definitionDesc
 	definitionColon : 'definitionColon', // .cm-definitionColon
 
-	//CSS 
+	//CSS
 
-	variable: 'variable',
-	colorMark: 'colorMark',
+	variable  : 'variable',
 };
 
 export function tokenizeCustomMarkdown(text) {
@@ -237,7 +236,7 @@ export function tokenizeCustomCSS(text) {
 	const lines = text.split('\n');
 
 	lines.forEach((lineText, lineNumber)=>{
-		
+
 		if(/--[a-zA-Z0-9-_]+/gm.test(lineText)) {
 			const varRegex =/--[a-zA-Z0-9-_]+/gm;
 			let match;

client/components/codeEditor/customKeyMap.js

@@ -2,15 +2,13 @@
 import { keymap } from '@codemirror/view';
 import { undo, redo } from '@codemirror/commands';
 
-const insertTabAtCursor = (view) => {
-  const { from } = view.state.selection.main;
-
-  view.dispatch({
-    changes: { from, insert: '	' },
-    selection: { anchor: from + 1 }
-  });
-
-  return true;
+const insertTabAtCursor = (view)=>{
+	const { from } = view.state.selection.main;
+	view.dispatch({
+		changes   : { from, insert: '	' },
+		selection : { anchor: from + 1 }
+	});
+	return true;
 };
 
 const indentMore = (view)=>{