mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-11-04 22:38:43 +00:00
Merge pull request #5018 from naturalcrit/fix-codemirror
Fix codemirror keymaps
This commit is contained in:
Víctor Losada Hernández
@@ -1,7 +1,7 @@
|
||||
/* eslint max-lines: ["error", { "max": 300 }] */
|
||||
import { keymap } from '@codemirror/view';
|
||||
import { undo, redo, indentMore, indentLess, deleteLine } from '@codemirror/commands';
|
||||
import { EditorSelection } from '@codemirror/state';
|
||||
import { EditorSelection, ChangeSet } from '@codemirror/state';
|
||||
import { Prec } from '@codemirror/state';
|
||||
import * as prettier from 'prettier/standalone';
|
||||
import * as postcssPlugin from 'prettier/plugins/postcss';
|
||||
@@ -35,11 +35,9 @@ export async function formatCSS(view) {
|
||||
);
|
||||
if(formatted === code) return true;
|
||||
|
||||
const dom = view.dom;
|
||||
dom.classList.add('cm-flash');
|
||||
|
||||
view.dom.classList.add('cm-flash');
|
||||
setTimeout(()=>{
|
||||
dom.classList.remove('cm-flash');
|
||||
view.dom.classList.remove('cm-flash');
|
||||
|
||||
view.dispatch({
|
||||
changes : {
|
||||
@@ -53,186 +51,172 @@ export async function formatCSS(view) {
|
||||
} catch (err) {
|
||||
console.error('Error formatting css: ', err);
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
const forEachSelection = (view, fn)=>{
|
||||
view.dispatch(view.state.changeByRange((range)=>fn(view.state, range.from, range.to, view.state.doc.sliceString(range.from, range.to))));
|
||||
return true;
|
||||
};
|
||||
|
||||
const insertTab = (view)=>{
|
||||
// If any selection spans multiple lines, delegates to CodeMirror's indentMore
|
||||
// Otherwise inserts two spaces at each cursor/selection
|
||||
const shouldIndent = view.state.selection.ranges.some((range)=>view.state.doc.lineAt(range.from).number !==
|
||||
view.state.doc.lineAt(range.to).number
|
||||
);
|
||||
|
||||
if(shouldIndent) return indentMore(view);
|
||||
|
||||
const changes = [];
|
||||
|
||||
for (const range of view.state.selection.ranges) {
|
||||
changes.push({
|
||||
from : range.from,
|
||||
to : range.to,
|
||||
insert : ' ' // Insert two spaces, not a tab char!
|
||||
return forEachSelection(view, (state, from, to, selected)=>{
|
||||
return {
|
||||
changes : { from, to, insert: ' ' }, // Insert two spaces, not a tab char!
|
||||
range : EditorSelection.cursor(from + 2)
|
||||
};
|
||||
});
|
||||
}
|
||||
// Create a transaction so we can map old positions to
|
||||
// their new positions after the edits are applied
|
||||
const mappedChanges = view.state.update({ changes });
|
||||
|
||||
view.dispatch({
|
||||
changes,
|
||||
selection : EditorSelection.create(
|
||||
view.state.selection.ranges.map((range)=>EditorSelection.cursor(
|
||||
mappedChanges.changes.mapPos(range.from, -1) + 2
|
||||
)
|
||||
)
|
||||
)
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const wrapSelection = (prefix, suffix)=>(view)=>{
|
||||
const changes = [];
|
||||
const wrapSelection = (prefix, suffix)=>(view)=>forEachSelection(view, (state, from, to, selected)=>{
|
||||
const noSelection = from === to;
|
||||
if(noSelection) {
|
||||
const insert = prefix + suffix;
|
||||
|
||||
for (const range of view.state.selection.ranges) {
|
||||
const { from, to } = range;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
|
||||
let text;
|
||||
|
||||
if(from === to) { text = prefix + suffix; } 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 });
|
||||
return {
|
||||
changes : { from, to, insert },
|
||||
range : EditorSelection.cursor(from + prefix.length)
|
||||
};
|
||||
}
|
||||
|
||||
view.dispatch({
|
||||
changes
|
||||
});
|
||||
const hasWrapper = selected.startsWith(prefix) && selected.endsWith(suffix);
|
||||
if(hasWrapper) {
|
||||
return {
|
||||
changes : [
|
||||
{ from: to - suffix.length, to, insert: '' },
|
||||
{ from, to: from + prefix.length, insert: '' }
|
||||
],
|
||||
range : EditorSelection.range(from, to - prefix.length - suffix.length)
|
||||
};
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeNbsp = (view)=>{
|
||||
const { from } = view.state.selection.main;
|
||||
|
||||
const prev2 = from >= 2
|
||||
? view.state.doc.sliceString(from - 2, from)
|
||||
: '';
|
||||
return {
|
||||
changes : { from, to, insert: prefix + selected + suffix },
|
||||
range : EditorSelection.range(from, to + prefix.length + suffix.length)
|
||||
};
|
||||
});
|
||||
|
||||
const makeNbsp = (view)=>forEachSelection(view, (state, from, to, selected)=>{
|
||||
const prev2 = from >= 2 ? state.doc.sliceString(from - 2, from) : '';
|
||||
const insert = (prev2 === ':>' || prev2 === '>>') ? '>' : ':>';
|
||||
|
||||
view.dispatch({
|
||||
changes : { from, to: from, insert },
|
||||
selection : { anchor: from + insert.length },
|
||||
});
|
||||
return {
|
||||
changes : { from, to, insert },
|
||||
range : EditorSelection.cursor(from + insert.length)
|
||||
};
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeSpace = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const makeSpace = (view)=>forEachSelection(view, (state, from, to, selected)=>{
|
||||
let insert = '{{width:10% }}';
|
||||
const match = selected.match(/^{{width:(\d+)% }}$/);
|
||||
let newText = '{{width:10% }}';
|
||||
if(match) {
|
||||
const percent = Math.min(parseInt(match[1], 10) + 10, 100);
|
||||
newText = `{{width:${percent}% }}`;
|
||||
insert = `{{width:${percent}% }}`;
|
||||
}
|
||||
view.dispatch({ changes: { from, to, insert: newText } });
|
||||
return true;
|
||||
};
|
||||
return {
|
||||
changes : { from, to, insert },
|
||||
range : EditorSelection.range(from, from + insert.length)
|
||||
};
|
||||
});
|
||||
|
||||
const removeSpace = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const removeSpace = (view)=>forEachSelection(view, (state, from, to, selected)=>{
|
||||
const match = selected.match(/^{{width:(\d+)% }}$/);
|
||||
if(match) {
|
||||
const percent = parseInt(match[1], 10) - 10;
|
||||
const newText = percent > 0 ? `{{width:${percent}% }}` : '';
|
||||
view.dispatch({ changes: { from, to, insert: newText } });
|
||||
const insert = percent > 0 ? `{{width:${percent}% }}` : '';
|
||||
return { changes: { from, to, insert: insert }, range: EditorSelection.range(from, from + insert.length) };
|
||||
}
|
||||
return true;
|
||||
};
|
||||
});
|
||||
|
||||
const makeSpan = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const text = selected.startsWith('{{') && selected.endsWith('}}')
|
||||
? selected.slice(2, -2)
|
||||
: `{{${selected}}}`;
|
||||
view.dispatch({ changes: { from, to, insert: text } });
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeDiv = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const text = selected.startsWith('{{') && selected.endsWith('}}')
|
||||
? selected.slice(2, -2)
|
||||
: `{{\n${selected}\n}}`;
|
||||
view.dispatch({ changes: { from, to, insert: text } });
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeComment = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const isHtmlComment = selected.startsWith('<!--') && selected.endsWith('-->');
|
||||
const text = isHtmlComment
|
||||
? selected.slice(4, -3)
|
||||
: `<!-- ${selected} -->`;
|
||||
view.dispatch({ changes: { from, to, insert: text } });
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeLink = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to).trim();
|
||||
const isLink = /^\[(.*)\]\((.*)\)$/.exec(selected);
|
||||
const text = isLink ? `${isLink[1]} ${isLink[2]}` : `[${selected || 'alt text'}](url)`;
|
||||
view.dispatch({ changes: { from, to, insert: text } });
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeList = (type)=>(view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const lines = [];
|
||||
for (let l = from; l <= to; l++) {
|
||||
const lineText = view.state.doc.line(l + 1).text;
|
||||
lines.push(lineText);
|
||||
const makeLink = (view)=>forEachSelection(view, (state, from, to, selected)=>{
|
||||
// If the selection is already a Markdown link, unwrap it
|
||||
const existingLink = /^\[(.*)\]\((.*)\)$/.exec(selected);
|
||||
if(existingLink) {
|
||||
const [, text, url] = existingLink;
|
||||
const insert = `${text} ${url}`;
|
||||
return {
|
||||
changes : { from, to, insert },
|
||||
range : EditorSelection.range(
|
||||
from,
|
||||
from + insert.length
|
||||
),
|
||||
};
|
||||
}
|
||||
const joined = lines.join('\n');
|
||||
let newText;
|
||||
if(type === 'UL') newText = joined.replace(/^/gm, '- ');
|
||||
else newText = joined.replace(/^/gm, (m, i)=>`${i + 1}. `);
|
||||
view.dispatch({ changes: { from, to, insert: newText } });
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeHeader = (level)=>(view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const text = `${'#'.repeat(level)} ${selected}`;
|
||||
view.dispatch({ changes: { from, to, insert: text } });
|
||||
return true;
|
||||
};
|
||||
// If the selection is a URL, use its domain as the link text.
|
||||
const isUrl =
|
||||
/^(https?:\/\/|www\.)\S+$/i.test(selected) ||
|
||||
/^[a-z0-9-]+(\.[a-z0-9-]+)+([/?#]\S*)?$/i.test(selected);
|
||||
if(isUrl) {
|
||||
const domain = selected
|
||||
.replace(/^https?:\/\//i, '')
|
||||
.replace(/^www\./i, '')
|
||||
.split(/[/?#]/)[0];
|
||||
|
||||
const newColumn = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
view.dispatch({ changes: { from, to, insert: '\n\\column\n\n' } });
|
||||
return true;
|
||||
};
|
||||
const name = domain.split('.')[0];
|
||||
const insert = `[${name}](${selected})`;
|
||||
return {
|
||||
changes : { from, to, insert },
|
||||
range : EditorSelection.range(from, from + insert.length),
|
||||
};
|
||||
}
|
||||
|
||||
const newPage = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
view.dispatch({ changes: { from, to, insert: '\n\\page\n\n' } });
|
||||
return true;
|
||||
};
|
||||
// If the selection is just text, use it as alt text and set url as placeholder
|
||||
const insert = `[${selected || 'alt text'}](url)`;
|
||||
return {
|
||||
changes : { from, to, insert },
|
||||
range : EditorSelection.range(from, from + insert.length),
|
||||
};
|
||||
});
|
||||
|
||||
const addPrefixAtLineStart = (prefix)=>(view)=>forEachSelection(view, (state, from, to, selected)=>{
|
||||
const startLine = state.doc.lineAt(from);
|
||||
const endLine = state.doc.lineAt(to);
|
||||
const selectedLines = [];
|
||||
|
||||
for (let lineNumber = startLine.number; lineNumber <= endLine.number; lineNumber++) { selectedLines.push(state.doc.line(lineNumber)); }
|
||||
|
||||
const allLinesHavePrefix = selectedLines.every((line)=>line.text.startsWith(prefix));
|
||||
|
||||
const changes = selectedLines.map((line)=>{
|
||||
const shouldRemovePrefix = allLinesHavePrefix && line.text.startsWith(prefix);
|
||||
|
||||
return {
|
||||
from : line.from,
|
||||
to : shouldRemovePrefix
|
||||
? line.from + prefix.length
|
||||
: line.from,
|
||||
insert : shouldRemovePrefix ? '' : prefix,
|
||||
};
|
||||
});
|
||||
const changeSet = ChangeSet.of(changes, state.doc.length);
|
||||
|
||||
return {
|
||||
changes,
|
||||
range : EditorSelection.range(
|
||||
changeSet.mapPos(from, -1),
|
||||
changeSet.mapPos(to, 1)
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
const newBreak = (type)=>(view)=>forEachSelection(view, (state, from, to, selected)=>{
|
||||
const insert = `\n\\${type}\n\n`;
|
||||
return {
|
||||
changes : { from, to, insert },
|
||||
range : EditorSelection.cursor(from + insert.length)
|
||||
};
|
||||
});
|
||||
|
||||
export const generalKeymap = Prec.high(keymap.of([
|
||||
{ key: 'Tab', run: insertTab }, //runs indentMore if multiple lines selected in a single selection
|
||||
{ key: 'Tab', run: insertTab },
|
||||
{ key: 'Shift-Tab', run: indentLess },
|
||||
{ key: 'Mod-z', run: undo }, //it may be unnecessary
|
||||
{ key: 'Mod-Shift-z', run: redo },
|
||||
@@ -246,7 +230,6 @@ export const cssKeymap = Prec.highest(keymap.of([
|
||||
]));
|
||||
|
||||
export const markdownKeymap = Prec.highest(keymap.of([
|
||||
|
||||
{ key: 'Mod-b', run: wrapSelection('**', '**') }, // makeBold
|
||||
{ key: 'Mod-i', run: wrapSelection('*', '*') }, // makeItalic
|
||||
{ key: 'Mod-u', run: wrapSelection('<u>', '</u>') }, // makeUnderline
|
||||
@@ -255,18 +238,18 @@ export const markdownKeymap = Prec.highest(keymap.of([
|
||||
{ key: 'Mod-.', run: makeNbsp },
|
||||
{ key: 'Shift-Mod-.', run: makeSpace },
|
||||
{ key: 'Shift-Mod-,', run: removeSpace },
|
||||
{ key: 'Mod-m', run: makeSpan },
|
||||
{ key: 'Shift-Mod-m', run: makeDiv },
|
||||
{ key: 'Mod-/', run: makeComment },
|
||||
{ key: 'Mod-k', run: makeLink },
|
||||
{ key: 'Mod-l', run: makeList('UL') },
|
||||
{ key: 'Shift-Mod-l', run: makeList('OL') },
|
||||
{ key: 'Shift-Mod-1', run: makeHeader(1) },
|
||||
{ key: 'Shift-Mod-2', run: makeHeader(2) },
|
||||
{ key: 'Shift-Mod-3', run: makeHeader(3) },
|
||||
{ key: 'Shift-Mod-4', run: makeHeader(4) },
|
||||
{ key: 'Shift-Mod-5', run: makeHeader(5) },
|
||||
{ key: 'Shift-Mod-6', run: makeHeader(6) },
|
||||
{ key: 'Mod-Enter', run: newPage },
|
||||
{ key: 'Shift-Mod-Enter', run: newColumn },
|
||||
{ key: 'Mod-m', run: wrapSelection('{{', '}}') },
|
||||
{ key: 'Shift-Mod-m', run: wrapSelection('{{\n', '\n}}') },
|
||||
{ key: 'Mod-/', run: wrapSelection('<!-- ', ' -->') },
|
||||
{ key: 'Mod-Shift-k', run: makeLink },
|
||||
{ key: 'Mod-Shift-u', run: addPrefixAtLineStart('- ') },
|
||||
{ key: 'Mod-Shift-o', run: addPrefixAtLineStart('1. ') },
|
||||
{ key: 'Shift-Mod-1', run: addPrefixAtLineStart('# ') },
|
||||
{ key: 'Shift-Mod-2', run: addPrefixAtLineStart('## ') },
|
||||
{ key: 'Shift-Mod-3', run: addPrefixAtLineStart('### ') },
|
||||
{ key: 'Shift-Mod-4', run: addPrefixAtLineStart('#### ') },
|
||||
{ key: 'Shift-Mod-5', run: addPrefixAtLineStart('##### ') },
|
||||
{ key: 'Shift-Mod-6', run: addPrefixAtLineStart('###### ') },
|
||||
{ key: 'Mod-Enter', run: newBreak('page') },
|
||||
{ key: 'Shift-Mod-Enter', run: newBreak('column') },
|
||||
]));
|
||||
|
||||
Reference in New Issue
Block a user