mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-06-22 04:58:40 +00:00
move codemirror extensions into their own folder
This commit is contained in:
Víctor Losada Hernández
@@ -0,0 +1,76 @@
|
||||
import { autocompletion } from '@codemirror/autocomplete';
|
||||
|
||||
import diceFont from '@themes/fonts/iconFonts/diceFont.js';
|
||||
import elderberryInn from '@themes/fonts/iconFonts/elderberryInn.js';
|
||||
import fontAwesome from '@themes/fonts/iconFonts/fontAwesome.js';
|
||||
import gameIcons from '@themes/fonts/iconFonts/gameIcons.js';
|
||||
|
||||
const emojis = {
|
||||
...diceFont,
|
||||
...elderberryInn,
|
||||
...fontAwesome,
|
||||
...gameIcons
|
||||
};
|
||||
|
||||
const emojiCompletionList = (context)=>{
|
||||
const word = context.matchBefore(/:[^\s:]+/);
|
||||
if(!word) return null;
|
||||
|
||||
const line = context.state.doc.lineAt(context.pos);
|
||||
const textToCursor = line.text.slice(0, context.pos - line.from);
|
||||
|
||||
if(textToCursor.includes('{')) {
|
||||
const curlyToCursor = textToCursor.slice(textToCursor.indexOf('{'));
|
||||
const curlySpanRegex = /{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1$/g;
|
||||
if(curlySpanRegex.test(curlyToCursor)) return null;
|
||||
}
|
||||
|
||||
const currentWord = word.text.slice(1); // remove ':'
|
||||
|
||||
const options = Object.keys(emojis)
|
||||
.filter((e)=>e.toLowerCase().includes(currentWord.toLowerCase()))
|
||||
.sort((a, b)=>{
|
||||
const normalize = (str)=>str.replace(/\d+/g, (m)=>m.padStart(4, '0')).toLowerCase();
|
||||
return normalize(a) < normalize(b) ? -1 : 1;
|
||||
})
|
||||
.map((e)=>({
|
||||
label : e,
|
||||
apply : `${e}:`,
|
||||
type : 'text',
|
||||
info : ()=>{
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `<i class="emojiPreview ${emojis[e]}"></i> ${e}`;
|
||||
return div;
|
||||
}
|
||||
}));
|
||||
//Label is the text in the list, comes with an icon that just
|
||||
//renders example text "abc", hid that with css because i didn't see other choice
|
||||
//Apply is the text that is set when the choice is selected
|
||||
//Info is the tooltip
|
||||
|
||||
return {
|
||||
from : word.from + 1,
|
||||
options,
|
||||
filter : false,
|
||||
};
|
||||
};
|
||||
|
||||
export const autocompleteEmoji = autocompletion({
|
||||
override : [emojiCompletionList],
|
||||
activateOnTyping : true,
|
||||
addToOptions : [
|
||||
{
|
||||
render(completion) {
|
||||
const e = completion.label;
|
||||
|
||||
const icon = document.createElement('i');
|
||||
icon.className = `emojiPreview ${emojis[e]}`;
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
fragment.appendChild(icon);
|
||||
|
||||
return fragment;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
@@ -0,0 +1,46 @@
|
||||
import { foldService, codeFolding } from '@codemirror/language';
|
||||
|
||||
const foldOnPages = [
|
||||
foldService.of((state, lineStart)=>{ //tells where to fold
|
||||
const doc = state.doc;
|
||||
const matcher = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
|
||||
|
||||
const startLine = doc.lineAt(lineStart);
|
||||
const prevLineText = startLine.number > 1 ? doc.line(startLine.number - 1).text : '';
|
||||
|
||||
if(!matcher.test(prevLineText)) return null;
|
||||
|
||||
let endLine = startLine.number;
|
||||
while (endLine < doc.lines && !matcher.test(doc.line(endLine + 1).text)) {
|
||||
endLine++;
|
||||
}
|
||||
|
||||
if(endLine === startLine.number) return null;
|
||||
|
||||
return { from: startLine.from, to: doc.line(endLine).to };
|
||||
}),
|
||||
codeFolding({
|
||||
preparePlaceholder : (state, range)=>{
|
||||
const doc = state.doc;
|
||||
const start = doc.lineAt(range.from).number;
|
||||
const end = doc.lineAt(range.to).number;
|
||||
|
||||
if(doc.line(start).text.trim()) return ` ↤ Lines ${start}-${end} ↦`;
|
||||
|
||||
const preview = Array.from({ length: end - start }, (_, i)=>doc.line(start + 1 + i).text.trim()
|
||||
).find(Boolean) || `Lines ${start}-${end}`;
|
||||
|
||||
return ` ↤ ${preview.replace('{', '').slice(0, 50).trim()}${preview.length > 50 ? '...' : ''} ↦`;
|
||||
},
|
||||
placeholderDOM(view, onclick, prepared) {
|
||||
const span = document.createElement('span');
|
||||
span.className = 'cm-fold-placeholder';
|
||||
span.textContent = prepared;
|
||||
span.onclick = onclick;
|
||||
span.style.color = '#989898';
|
||||
return span;
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
||||
export default foldOnPages;
|
||||
@@ -0,0 +1,293 @@
|
||||
import { HighlightStyle } from '@codemirror/language';
|
||||
import { tags } from '@lezer/highlight';
|
||||
|
||||
// Making the tokens
|
||||
const customTags = {
|
||||
pageLine : 'pageLine', // .cm-pageLine
|
||||
snippetLine : 'snippetLine', // .cm-snippetLine
|
||||
columnSplit : 'columnSplit', // .cm-columnSplit
|
||||
block : 'block', // .cm-block
|
||||
inlineBlock : 'inline-block', // .cm-inline-block
|
||||
injection : 'injection', // .cm-injection
|
||||
emoji : 'emoji', // .cm-emoji
|
||||
superscript : 'superscript', // .cm-superscript
|
||||
subscript : 'subscript', // .cm-subscript
|
||||
definitionList : 'definitionList', // .cm-definitionList
|
||||
definitionTerm : 'definitionTerm', // .cm-definitionTerm
|
||||
definitionDesc : 'definitionDesc', // .cm-definitionDesc
|
||||
definitionColon : 'definitionColon', // .cm-definitionColon
|
||||
|
||||
//CSS
|
||||
|
||||
variable : 'variable',
|
||||
};
|
||||
|
||||
export function tokenizeCustomMarkdown(text) {
|
||||
const tokens = [];
|
||||
const lines = text.split('\n');
|
||||
|
||||
//tokens without a `from` or `to` are interpreted by the custom plugin as line tokens
|
||||
|
||||
lines.forEach((lineText, lineNumber)=>{
|
||||
// --- Page / snippet lines ---
|
||||
if(/^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m.test(lineText)) tokens.push({ line: lineNumber, type: customTags.pageLine });
|
||||
if(/^\\snippet\ .*$/.test(lineText)) tokens.push({ line: lineNumber, type: customTags.snippetLine });
|
||||
if(/^\\column(?:break)?$/.test(lineText)) tokens.push({ line: lineNumber, type: customTags.columnSplit });
|
||||
|
||||
// --- Emoji ---
|
||||
if(/:.\w+?:/.test(lineText)) {
|
||||
const emojiRegex = /(:\w+?:)/g;
|
||||
let match;
|
||||
while ((match = emojiRegex.exec(lineText)) !== null) {
|
||||
tokens.push({
|
||||
line : lineNumber,
|
||||
type : customTags.emoji,
|
||||
from : match.index,
|
||||
to : match.index + match[0].length,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// --- Superscript / Subscript ---
|
||||
if(/\^/.test(lineText)) {
|
||||
let startIndex = lineText.indexOf('^');
|
||||
const superRegex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/gy;
|
||||
const subRegex = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/gy;
|
||||
|
||||
while (startIndex >= 0) {
|
||||
superRegex.lastIndex = subRegex.lastIndex = startIndex;
|
||||
|
||||
let match = subRegex.exec(lineText);
|
||||
let type = customTags.subscript;
|
||||
|
||||
if(!match) {
|
||||
match = superRegex.exec(lineText);
|
||||
type = customTags.superscript;
|
||||
}
|
||||
|
||||
if(match) {
|
||||
tokens.push({
|
||||
line : lineNumber,
|
||||
type,
|
||||
from : match.index,
|
||||
to : match.index + match[0].length,
|
||||
});
|
||||
}
|
||||
|
||||
startIndex = lineText.indexOf(
|
||||
'^',
|
||||
Math.max(startIndex + 1, superRegex.lastIndex || 0, subRegex.lastIndex || 0),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// --- single line def list ---
|
||||
const singleLineRegex = /^(?=.*[^:])(.+?)(\s*)(::)([^\n]*)$/dmy;
|
||||
const match = singleLineRegex.exec(lineText);
|
||||
|
||||
if(match) {
|
||||
const [full, term, spaces, colons, desc] = match;
|
||||
|
||||
let offset = 0;
|
||||
|
||||
tokens.push({
|
||||
line : lineNumber,
|
||||
type : customTags.definitionList,
|
||||
});
|
||||
|
||||
// Term
|
||||
tokens.push({
|
||||
line : lineNumber,
|
||||
type : customTags.definitionTerm,
|
||||
from : offset,
|
||||
to : offset + term.length,
|
||||
});
|
||||
offset += term.length;
|
||||
|
||||
// Spaces before ::
|
||||
if(spaces) {
|
||||
offset += spaces.length;
|
||||
}
|
||||
|
||||
// :: colons
|
||||
tokens.push({
|
||||
line : lineNumber,
|
||||
type : customTags.definitionColon,
|
||||
from : offset,
|
||||
to : offset + colons.length,
|
||||
});
|
||||
offset += colons.length;
|
||||
|
||||
// Definition
|
||||
tokens.push({
|
||||
line : lineNumber,
|
||||
type : customTags.definitionDesc,
|
||||
from : offset,
|
||||
to : offset + desc.length,
|
||||
});
|
||||
}
|
||||
|
||||
// --- multiline def list ---
|
||||
if(!/^::/.test(lines[lineNumber]) && lineNumber + 1 < lines.length && /^::/.test(lines[lineNumber + 1])) {
|
||||
const startLine = lineNumber;
|
||||
const defs = [];
|
||||
let endLine = startLine;
|
||||
|
||||
// collect all following :: definitions
|
||||
for (let i = lineNumber + 1; i < lines.length; i++) {
|
||||
const nextLine = lines[i];
|
||||
const onlyColonsMatch = /^:*$/.test(nextLine);
|
||||
const defMatch = /^(::)(.+)$/.exec(nextLine);
|
||||
if(!onlyColonsMatch && defMatch) {
|
||||
defs.push({ colons: defMatch[1], desc: defMatch[2], line: i });
|
||||
endLine = i;
|
||||
} else break;
|
||||
}
|
||||
|
||||
if(defs.length > 0 && lineText.trim().length > 0) {
|
||||
tokens.push({
|
||||
line : startLine,
|
||||
type : customTags.definitionList,
|
||||
});
|
||||
|
||||
// term
|
||||
tokens.push({
|
||||
line : startLine,
|
||||
type : customTags.definitionTerm,
|
||||
from : 0,
|
||||
to : lineText.length,
|
||||
});
|
||||
|
||||
// definitions
|
||||
defs.forEach((d)=>{
|
||||
tokens.push({
|
||||
line : d.line,
|
||||
type : customTags.definitionList,
|
||||
});
|
||||
|
||||
tokens.push({
|
||||
line : d.line,
|
||||
type : customTags.definitionColon,
|
||||
from : 0,
|
||||
to : d.colons.length,
|
||||
});
|
||||
tokens.push({
|
||||
line : d.line,
|
||||
type : customTags.definitionDesc,
|
||||
from : d.colons.length,
|
||||
to : d.colons.length + d.desc?.length,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if(lineText.includes('{') && lineText.includes('}')) {
|
||||
const injectionRegex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
|
||||
let match;
|
||||
while ((match = injectionRegex.exec(lineText)) !== null) {
|
||||
tokens.push({
|
||||
line : lineNumber,
|
||||
from : match.index,
|
||||
to : match.index + match[1].length,
|
||||
type : customTags.injection,
|
||||
});
|
||||
}
|
||||
}
|
||||
if(lineText.includes('{{') && lineText.includes('}}')) {
|
||||
// Inline blocks: single-line {{…}}
|
||||
const spanRegex = /{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *|}}/g;
|
||||
let match;
|
||||
let blockCount = 0;
|
||||
while ((match = spanRegex.exec(lineText)) !== null) {
|
||||
if(match[0].startsWith('{{')) {
|
||||
blockCount += 1;
|
||||
} else {
|
||||
blockCount -= 1;
|
||||
}
|
||||
if(blockCount < 0) {
|
||||
blockCount = 0;
|
||||
continue;
|
||||
}
|
||||
tokens.push({
|
||||
line : lineNumber,
|
||||
from : match.index,
|
||||
to : match.index + match[0].length,
|
||||
type : customTags.inlineBlock,
|
||||
});
|
||||
}
|
||||
} else if(lineText.trimLeft().startsWith('{{') || lineText.trimLeft().startsWith('}}')) {
|
||||
// Highlight block divs {{\n Content \n}}
|
||||
let endCh = lineText.length + 1;
|
||||
|
||||
const match = lineText.match(
|
||||
/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/,
|
||||
);
|
||||
if(match) endCh = match.index + match[0].length;
|
||||
tokens.push({ line: lineNumber, type: customTags.block });
|
||||
}
|
||||
});
|
||||
|
||||
return tokens;
|
||||
}
|
||||
|
||||
export function tokenizeCustomCSS(text) {
|
||||
const tokens = [];
|
||||
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;
|
||||
while ((match = varRegex.exec(lineText)) !== null) {
|
||||
tokens.push({
|
||||
line : lineNumber,
|
||||
from : match.index +1,
|
||||
to : match.index + match.length[1] +1,
|
||||
type : customTags.varProperty,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return tokens;
|
||||
}
|
||||
|
||||
//assign classes to tags provided by lezer, not unlike the function above
|
||||
export const customHighlightStyle = HighlightStyle.define([
|
||||
{ tag: tags.heading, class: 'cm-header' },
|
||||
{ tag: tags.heading1, class: 'cm-header cm-header-1' },
|
||||
{ tag: tags.heading2, class: 'cm-header cm-header-2' },
|
||||
{ tag: tags.heading3, class: 'cm-header cm-header-3' },
|
||||
{ tag: tags.heading4, class: 'cm-header cm-header-4' },
|
||||
{ tag: tags.heading5, class: 'cm-header cm-header-5' },
|
||||
{ tag: tags.heading6, class: 'cm-header cm-header-6' },
|
||||
{ tag: tags.link, class: 'cm-link' },
|
||||
{ tag: tags.string, class: 'cm-string' },
|
||||
{ tag: tags.url, class: 'cm-string cm-url' },
|
||||
{ tag: tags.list, class: 'cm-list' },
|
||||
{ tag: tags.strong, class: 'cm-strong' },
|
||||
{ tag: tags.emphasis, class: 'cm-em' },
|
||||
{ tag: tags.quote, class: 'cm-quote' },
|
||||
{ tag: tags.comment, class: 'cm-comment' },
|
||||
{ tag: tags.monospace, class: 'cm-comment' },
|
||||
|
||||
//css tags
|
||||
|
||||
{ tag: tags.tagName, class: 'cm-tag' },
|
||||
{ tag: tags.className, class: 'cm-class' },
|
||||
{ tag: tags.propertyName, class: 'cm-property' },
|
||||
{ tag: tags.attributeValue, class: 'cm-value' },
|
||||
{ tag: tags.keyword, class: 'cm-keyword' },
|
||||
{ tag: tags.atom, class: 'cm-atom' },
|
||||
{ tag: tags.integer, class: 'cm-integer' },
|
||||
{ tag: tags.unit, class: 'cm-unit' },
|
||||
{ tag: tags.color, class: 'cm-color' },
|
||||
{ tag: tags.paren, class: 'cm-paren' },
|
||||
{ tag: tags.variableName, class: 'cm-variable' },
|
||||
{ tag: tags.invalid, class: 'cm-error' },
|
||||
|
||||
]);
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,197 @@
|
||||
/* eslint max-lines: ["error", { "max": 300 }] */
|
||||
import { keymap } from '@codemirror/view';
|
||||
import { undo, redo, indentMore, deleteLine } from '@codemirror/commands';
|
||||
import { Prec } from '@codemirror/state';
|
||||
|
||||
const indentLess = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const lines = [];
|
||||
for (let l = view.state.doc.lineAt(from).number; l <= view.state.doc.lineAt(to).number; l++) {
|
||||
const line = view.state.doc.line(l);
|
||||
const match = line.text.match(/^ {1,2}/); // match up to 2 spaces
|
||||
if(match) {
|
||||
lines.push({ from: line.from, to: line.from + match[0].length, insert: '' });
|
||||
}
|
||||
}
|
||||
if(lines.length > 0) view.dispatch({ changes: lines });
|
||||
return true;
|
||||
};
|
||||
|
||||
const wrapSelection = (prefix, suffix) => (view) => {
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
|
||||
let text, selection;
|
||||
|
||||
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);
|
||||
selection = { anchor: from, head: from + text.length };
|
||||
}
|
||||
else {
|
||||
text = `${prefix}${selected}${suffix}`;
|
||||
selection = { anchor: from, head: from + text.length };
|
||||
}
|
||||
|
||||
view.dispatch({
|
||||
changes : { from, to, insert: text },
|
||||
selection
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeNbsp = (view) => {
|
||||
const { from } = view.state.selection.main;
|
||||
|
||||
const prev2 = from >= 2
|
||||
? view.state.doc.sliceString(from - 2, from)
|
||||
: '';
|
||||
|
||||
const insert = (prev2 === ':>' || prev2 === '>>') ? '>' : ':>';
|
||||
|
||||
view.dispatch({
|
||||
changes : { from, to: from, insert },
|
||||
selection : { anchor: from + insert.length },
|
||||
});
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeSpace = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
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}% }}`;
|
||||
}
|
||||
view.dispatch({ changes: { from, to, insert: newText } });
|
||||
return true;
|
||||
};
|
||||
|
||||
const removeSpace = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
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 } });
|
||||
}
|
||||
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 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;
|
||||
};
|
||||
|
||||
const newColumn = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
view.dispatch({ changes: { from, to, insert: '\n\\column\n\n' } });
|
||||
return true;
|
||||
};
|
||||
|
||||
const newPage = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
view.dispatch({ changes: { from, to, insert: '\n\\page\n\n' } });
|
||||
return true;
|
||||
};
|
||||
|
||||
export const generalKeymap = Prec.high(keymap.of([
|
||||
{ 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 markdownKeymap = Prec.highest(keymap.of([
|
||||
//{ key: 'Shift-Tab', run: indentMore },
|
||||
{ key: 'Shift-Tab', run: indentLess },
|
||||
{ key: 'Mod-b', run: wrapSelection('**', '**') }, // makeBold
|
||||
{ key: 'Mod-i', run: wrapSelection('*', '*') }, // makeItalic
|
||||
{ key: 'Mod-u', run: wrapSelection('<u>', '</u>') }, // makeUnderline
|
||||
{ key: 'Shift-Mod-=', run: wrapSelection('^', '^') }, // makeSuper
|
||||
{ key: 'Mod-=', run: wrapSelection('^^', '^^') }, // makeSub
|
||||
{ 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 },
|
||||
]));
|
||||
@@ -0,0 +1,54 @@
|
||||
import { HighlightStyle } from '@codemirror/language';
|
||||
import { tags } from '@lezer/highlight';
|
||||
|
||||
const customTags = {
|
||||
pageLine : 'pageLine', // .cm-pageLine
|
||||
snippetLine : 'snippetLine', // .cm-snippetLine
|
||||
};
|
||||
|
||||
export function legacyTokenizeCustomMarkdown(text) {
|
||||
const tokens = [];
|
||||
const lines = text.split('\n');
|
||||
|
||||
lines.forEach((lineText, lineNumber)=>{
|
||||
// --- Page / snippet lines ---
|
||||
if(/^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m.test(lineText)) tokens.push({ line: lineNumber, type: customTags.pageLine });
|
||||
if(/^\\snippet\ .*$/.test(lineText)) tokens.push({ line: lineNumber, type: customTags.snippetLine });
|
||||
});
|
||||
|
||||
return tokens;
|
||||
}
|
||||
|
||||
export const legacyCustomHighlightStyle = HighlightStyle.define([
|
||||
{ tag: tags.heading, class: 'cm-header' },
|
||||
{ tag: tags.heading1, class: 'cm-header cm-header-1' },
|
||||
{ tag: tags.heading2, class: 'cm-header cm-header-2' },
|
||||
{ tag: tags.heading3, class: 'cm-header cm-header-3' },
|
||||
{ tag: tags.heading4, class: 'cm-header cm-header-4' },
|
||||
{ tag: tags.heading5, class: 'cm-header cm-header-5' },
|
||||
{ tag: tags.heading6, class: 'cm-header cm-header-6' },
|
||||
{ tag: tags.link, class: 'cm-link' },
|
||||
{ tag: tags.string, class: 'cm-string' },
|
||||
{ tag: tags.url, class: 'cm-string cm-url' },
|
||||
{ tag: tags.list, class: 'cm-list' },
|
||||
{ tag: tags.strong, class: 'cm-strong' },
|
||||
{ tag: tags.emphasis, class: 'cm-em' },
|
||||
{ tag: tags.quote, class: 'cm-quote' },
|
||||
|
||||
//css tags
|
||||
|
||||
{ tag: tags.tagName, class: 'cm-tag' },
|
||||
{ tag: tags.className, class: 'cm-class' },
|
||||
{ tag: tags.propertyName, class: 'cm-property' },
|
||||
{ tag: tags.attributeValue, class: 'cm-value' },
|
||||
{ tag: tags.keyword, class: 'cm-keyword' },
|
||||
{ tag: tags.atom, class: 'cm-atom' },
|
||||
{ tag: tags.integer, class: 'cm-integer' },
|
||||
{ tag: tags.unit, class: 'cm-unit' },
|
||||
{ tag: tags.color, class: 'cm-color' },
|
||||
{ tag: tags.paren, class: 'cm-paren' },
|
||||
{ tag: tags.variableName, class: 'cm-variable' },
|
||||
{ tag: tags.invalid, class: 'cm-error' },
|
||||
{ tag: tags.comment, class: 'cm-comment' },
|
||||
]);
|
||||
|
||||
Reference in New Issue
Block a user