fix keybind to ctrl f

client/components/codeEditor/codeEditor.jsx

@@ -37,7 +37,7 @@ const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery };
 const themeCompartment = new Compartment();
 const highlightCompartment = new Compartment();
 
-import { generalKeymap, markdownKeymap } from './customKeyMaps.js';
+import { generalKeymap, markdownKeymap, cssKeymap } from './customKeyMaps.js';
 import foldOnPages from './customFolding.js';
 import { customHighlightStyle, tokenizeCustomMarkdown, tokenizeCustomCSS } from './customHighlight.js';
 import { legacyCustomHighlightStyle, legacyTokenizeCustomMarkdown } from './legacyCustomHighlight.js';
@@ -238,7 +238,7 @@ const CodeEditor = forwardRef(
 				//keyboard shortcut
 				keymap.of([...defaultKeymap, foldKeymap, ...searchKeymap]),
 				generalKeymap,
-				...(tab !== 'brewStyles' ? [markdownKeymap] : []),
+				...(tab === 'brewStyles' ? [cssKeymap] : [markdownKeymap]),
 
 				//multiple cursors and selections
 				drawSelection(),

client/components/codeEditor/customKeyMaps.js

@@ -2,14 +2,14 @@
 import { keymap } from '@codemirror/view';
 import { undo, redo, indentMore, deleteLine } from '@codemirror/commands';
 import { Prec } from '@codemirror/state';
-import * as prettier from "prettier/standalone";
-import * as postcssPlugin from "prettier/plugins/postcss";
+import * as prettier from 'prettier/standalone';
+import * as postcssPlugin from 'prettier/plugins/postcss';
 
-async function formatCSS(view) {
+export async function formatCSS(view) {
 	const code = view.state.doc.toString();
 
 	const formatted = await prettier.format(code, {
-    parser: "css",
+		parser  : 'css',
 		plugins : [postcssPlugin]
 	});
 
@@ -22,17 +22,6 @@ async function formatCSS(view) {
 	});
 }
 
-const insertTab = (view) => {
-  const { from, to } = view.state.selection.main;
-
-  view.dispatch({
-    changes: { from, to, insert: '  ' },
-    selection: { anchor: from + 2 }
-  });
-
-  return true;
-};
-
 const indentLess = (view)=>{
 	const { from, to } = view.state.selection.main;
 	const lines = [];
@@ -48,25 +37,25 @@ const indentLess = (view)=>{
 };
 
 const wrapSelection = (prefix, suffix)=>(view)=>{
-	const changes = [];
-
-	for(const range of view.state.selection.ranges) {
-		const { from, to } = range;
+	const { from, to } = view.state.selection.main;
 	const selected = view.state.doc.sliceString(from, to);
 
-		let text;
+	let text, selection;
 
-		if(from === to) { text = prefix + suffix }
-		else if(selected.startsWith(prefix) && selected.endsWith(suffix)) {
+	if(from === to) {
+		text = prefix + suffix;
+		selection = { anchor: from + prefix.length, head: from + prefix.length };
+	} else if(selected.startsWith(prefix) && selected.endsWith(suffix)) {
 		text = selected.slice(prefix.length, -suffix.length);
-		}
-		else {text = `${prefix}${selected}${suffix}`}
-
-		changes.push({ from, to, insert: text });
+		selection = { anchor: from, head: from + text.length };
+	} else {
+		text = `${prefix}${selected}${suffix}`;
+		selection = { anchor: from, head: from + text.length };
 	}
 
 	view.dispatch({
-		changes
+		changes : { from, to, insert: text },
+		selection
 	});
 
 	return true;
@@ -190,13 +179,17 @@ const newPage = (view)=>{
 };
 
 export const generalKeymap = Prec.high(keymap.of([
-	{ key: 'Tab', run: insertTab },
+	{ key: 'Tab', run: indentMore },
 	{ key: 'Mod-z', run: undo }, //i think it may be unnecessary
 	{ key: 'Mod-Shift-z', run: redo },
 	{ key: 'Mod-y', run: redo },
 	{ key: 'Mod-d', run: deleteLine },
 ]));
 
+export const cssKeymap = Prec.highest(keymap.of([
+	{ key: 'Mod-Shift-f', run: formatCSS },
+]));
+
 export const markdownKeymap = Prec.highest(keymap.of([
 	//{ key: 'Shift-Tab', run: indentMore },
 	{ key: 'Shift-Tab',       run: indentLess },
@@ -222,5 +215,4 @@ export const markdownKeymap = Prec.highest(keymap.of([
 	{ key: 'Shift-Mod-6',     run: makeHeader(6) },
 	{ key: 'Mod-Enter',       run: newPage },
 	{ key: 'Shift-Mod-Enter', run: newColumn },
-	{ key: 'Mod-Shift-f', 	  run: formatCSS },
 ]));