mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-06-22 07:08:40 +00:00
Merge branch 'master' of github.com:naturalcrit/homebrewery
This commit is contained in:
David Bolack
@@ -1,3 +1,5 @@
|
||||
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';
|
||||
@@ -10,75 +12,65 @@ const emojis = {
|
||||
...gameIcons
|
||||
};
|
||||
|
||||
const showAutocompleteEmoji = 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 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);
|
||||
|
||||
const list = Object.keys(emojis).filter(function(emoji) {
|
||||
return emoji.toLowerCase().indexOf(currentWord.toLowerCase()) >= 0;
|
||||
}).sort((a, b)=>{
|
||||
const lowerA = a.replace(/\d+/g, function(match) { // Temporarily convert any numbers in emoji string
|
||||
return match.padStart(4, '0'); // to 4-digits, left-padded with 0's, to aid in
|
||||
}).toLowerCase(); // sorting numbers, i.e., "d6, d10, d20", not "d10, d20, d6"
|
||||
const lowerB = b.replace(/\d+/g, function(match) { // Also make lowercase for case-insensitive alpha sorting
|
||||
return match.padStart(4, '0');
|
||||
}).toLowerCase();
|
||||
if(textToCursor.includes('{')) {
|
||||
const curlyToCursor = textToCursor.slice(textToCursor.indexOf('{'));
|
||||
const curlySpanRegex = /{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1$/g;
|
||||
if(curlySpanRegex.test(curlyToCursor)) return null;
|
||||
}
|
||||
|
||||
if(lowerA < lowerB)
|
||||
return -1;
|
||||
return 1;
|
||||
}).map(function(emoji) {
|
||||
return {
|
||||
text : `${emoji}:`, // Text to output to editor when option is selected
|
||||
render : function(element, self, data) { // How to display the option in the dropdown
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `<i class="emojiPreview ${emojis[emoji]}"></i> ${emoji}`;
|
||||
element.appendChild(div);
|
||||
}
|
||||
};
|
||||
});
|
||||
const currentWord = word.text.slice(1); // remove ':'
|
||||
|
||||
return {
|
||||
list : list.length ? list : [],
|
||||
from : CodeMirror.Pos(line, start),
|
||||
to : CodeMirror.Pos(line, end)
|
||||
};
|
||||
}
|
||||
});
|
||||
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,
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
// Do not autosuggest emojis in curly span/div/injector properties
|
||||
if(line.includes('{')) {
|
||||
const curlyToCursor = textToCursor.slice(textToCursor.indexOf(`{`));
|
||||
const curlySpanRegex = /{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1$/g;
|
||||
|
||||
if(curlySpanRegex.test(curlyToCursor))
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if the text ends with ':xyz'
|
||||
if(/:[^\s:]+$/.test(textToCursor)) {
|
||||
CodeMirror.commands.autocomplete(editor);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export default {
|
||||
showAutocompleteEmoji
|
||||
};
|
||||
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;
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
@@ -1,48 +0,0 @@
|
||||
const autoCloseCurlyBraces = function(CodeMirror, cm, typingClosingBrace) {
|
||||
const ranges = cm.listSelections(), replacements = [];
|
||||
for (let i = 0; i < ranges.length; i++) {
|
||||
if(!ranges[i].empty()) return CodeMirror.Pass;
|
||||
const pos = ranges[i].head, line = cm.getLine(pos.line), tok = cm.getTokenAt(pos);
|
||||
if(!typingClosingBrace && (tok.type == 'string' || tok.string.charAt(0) != '{' || tok.start != pos.ch - 1))
|
||||
return CodeMirror.Pass;
|
||||
else if(typingClosingBrace) {
|
||||
let hasUnclosedBraces = false, index = -1;
|
||||
do {
|
||||
index = line.indexOf('{{', index + 1);
|
||||
if(index !== -1 && line.indexOf('}}', index + 1) === -1) {
|
||||
hasUnclosedBraces = true;
|
||||
break;
|
||||
}
|
||||
} while (index !== -1);
|
||||
if(!hasUnclosedBraces) return CodeMirror.Pass;
|
||||
}
|
||||
|
||||
replacements[i] = typingClosingBrace ? {
|
||||
text : '}}',
|
||||
newPos : CodeMirror.Pos(pos.line, pos.ch + 2)
|
||||
} : {
|
||||
text : '{}}',
|
||||
newPos : CodeMirror.Pos(pos.line, pos.ch + 1)
|
||||
};
|
||||
}
|
||||
|
||||
for (let i = ranges.length - 1; i >= 0; i--) {
|
||||
const info = replacements[i];
|
||||
cm.replaceRange(info.text, ranges[i].head, ranges[i].anchor, '+insert');
|
||||
const sel = cm.listSelections().slice(0);
|
||||
sel[i] = {
|
||||
head : info.newPos,
|
||||
anchor : info.newPos
|
||||
};
|
||||
cm.setSelections(sel);
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
autoCloseCurlyBraces : function(CodeMirror, codeMirror) {
|
||||
const map = { name: 'autoCloseCurlyBraces' };
|
||||
map[`'{'`] = function(cm) { return autoCloseCurlyBraces(CodeMirror, cm); };
|
||||
map[`'}'`] = function(cm) { return autoCloseCurlyBraces(CodeMirror, cm, true); };
|
||||
codeMirror?.addKeyMap(map);
|
||||
}
|
||||
};
|
||||
@@ -1,494 +1,410 @@
|
||||
/* eslint-disable max-lines */
|
||||
/* eslint max-lines: ["error", { "max": 400 }] */
|
||||
import './codeEditor.less';
|
||||
import React from 'react';
|
||||
import createReactClass from 'create-react-class';
|
||||
import _ from 'lodash';
|
||||
import closeTag from './close-tag';
|
||||
import autoCompleteEmoji from './autocompleteEmoji';
|
||||
let CodeMirror;
|
||||
import React, { useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
|
||||
|
||||
const CodeEditor = createReactClass({
|
||||
displayName : 'CodeEditor',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
language : '',
|
||||
tab : 'brewText',
|
||||
value : '',
|
||||
wrap : true,
|
||||
onChange : ()=>{},
|
||||
onReady : ()=>{},
|
||||
enableFolding : true,
|
||||
editorTheme : 'default'
|
||||
};
|
||||
},
|
||||
import {
|
||||
EditorView,
|
||||
keymap,
|
||||
lineNumbers,
|
||||
highlightActiveLineGutter,
|
||||
highlightActiveLine,
|
||||
scrollPastEnd,
|
||||
Decoration,
|
||||
ViewPlugin,
|
||||
drawSelection,
|
||||
dropCursor,
|
||||
} from '@codemirror/view';
|
||||
import { EditorState, Compartment, StateEffect, StateField } from '@codemirror/state';
|
||||
import { foldAll as foldAllCmd, unfoldAll as unfoldAllCmd, foldGutter, foldKeymap, syntaxHighlighting } from '@codemirror/language';
|
||||
import { defaultKeymap, history, undo, redo, undoDepth, redoDepth } from '@codemirror/commands';
|
||||
import { languages } from '@codemirror/language-data';
|
||||
import { css } from '@codemirror/lang-css';
|
||||
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
|
||||
import { html } from '@codemirror/lang-html';
|
||||
import { autocompleteEmoji } from './autocompleteEmoji.js';
|
||||
import { searchKeymap, search } from '@codemirror/search';
|
||||
import { closeBrackets } from '@codemirror/autocomplete';
|
||||
|
||||
getInitialState : function() {
|
||||
return {
|
||||
docs : {}
|
||||
};
|
||||
},
|
||||
const autoCloseBrackets = closeBrackets({ brackets: ['()', '[]', '{{}}'] });
|
||||
|
||||
editor : React.createRef(null),
|
||||
import * as themesImport from '@uiw/codemirror-themes-all';
|
||||
import defaultCM5Theme from '@themes/codeMirror/default.js';
|
||||
import darkbrewery from '@themes/codeMirror/darkbrewery.js';
|
||||
|
||||
async componentDidMount() {
|
||||
CodeMirror = (await import('codemirror')).default;
|
||||
this.CodeMirror = CodeMirror;
|
||||
const themes = { default: defaultCM5Theme, darkbrewery, ...themesImport };
|
||||
const themeCompartment = new Compartment();
|
||||
const highlightCompartment = new Compartment();
|
||||
|
||||
await import('codemirror/mode/gfm/gfm.js');
|
||||
await import('codemirror/mode/css/css.js');
|
||||
await import('codemirror/mode/javascript/javascript.js');
|
||||
import { generalKeymap, markdownKeymap } from './customKeyMaps.js';
|
||||
import foldOnPages from './customFolding.js';
|
||||
import { customHighlightStyle, tokenizeCustomMarkdown, tokenizeCustomCSS } from './customHighlight.js';
|
||||
import { legacyCustomHighlightStyle, legacyTokenizeCustomMarkdown } from './legacyCustomHighlight.js';
|
||||
|
||||
// addons
|
||||
await import('codemirror/addon/fold/foldcode.js');
|
||||
await import('codemirror/addon/fold/foldgutter.js');
|
||||
await import('codemirror/addon/fold/xml-fold.js');
|
||||
await import('codemirror/addon/search/search.js');
|
||||
await import('codemirror/addon/search/searchcursor.js');
|
||||
await import('codemirror/addon/search/jump-to-line.js');
|
||||
await import('codemirror/addon/search/match-highlighter.js');
|
||||
await import('codemirror/addon/search/matchesonscrollbar.js');
|
||||
await import('codemirror/addon/dialog/dialog.js');
|
||||
await import('codemirror/addon/scroll/scrollpastend.js');
|
||||
await import('codemirror/addon/edit/closetag.js');
|
||||
await import('codemirror/addon/hint/show-hint.js');
|
||||
// import 'codemirror/addon/selection/active-line.js';
|
||||
// import 'codemirror/addon/edit/trailingspace.js';
|
||||
const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
|
||||
|
||||
const createHighlightPlugin = (renderer, tab)=>{
|
||||
//this function takes the custom tokens created in the tokenize function in customhighlight files
|
||||
//takes the tokens defined by that function and assigns classes to them
|
||||
//it also creates page number and snippet number widgets
|
||||
|
||||
// register helpers dynamically as well
|
||||
const foldPagesCode = (await import('./fold-pages')).default;
|
||||
const foldCSSCode = (await import('./fold-css')).default;
|
||||
foldPagesCode.registerHomebreweryHelper(CodeMirror);
|
||||
foldCSSCode.registerHomebreweryHelper(CodeMirror);
|
||||
let tokenize;
|
||||
|
||||
this.buildEditor();
|
||||
const newDoc = CodeMirror?.Doc(this.props.value, this.props.language);
|
||||
this.codeMirror?.swapDoc(newDoc);
|
||||
},
|
||||
|
||||
|
||||
componentDidUpdate : function(prevProps) {
|
||||
if(prevProps.view !== this.props.view){ //view changed; swap documents
|
||||
let newDoc;
|
||||
|
||||
if(!this.state.docs[this.props.view]) {
|
||||
newDoc = CodeMirror?.Doc(this.props.value, this.props.language);
|
||||
} else {
|
||||
newDoc = this.state.docs[this.props.view];
|
||||
}
|
||||
|
||||
const oldDoc = { [prevProps.view]: this.codeMirror?.swapDoc(newDoc) };
|
||||
|
||||
this.setState((prevState)=>({
|
||||
docs : _.merge({}, prevState.docs, oldDoc)
|
||||
}));
|
||||
|
||||
this.props.rerenderParent();
|
||||
} else if(this.codeMirror?.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside
|
||||
this.codeMirror?.setValue(this.props.value);
|
||||
}
|
||||
|
||||
if(this.props.enableFolding) {
|
||||
this.codeMirror?.setOption('foldOptions', this.foldOptions(this.codeMirror));
|
||||
} else {
|
||||
this.codeMirror?.setOption('foldOptions', false);
|
||||
}
|
||||
|
||||
if(prevProps.editorTheme !== this.props.editorTheme){
|
||||
this.codeMirror?.setOption('theme', this.props.editorTheme);
|
||||
}
|
||||
},
|
||||
|
||||
buildEditor : function() {
|
||||
this.codeMirror = CodeMirror(this.editor.current, {
|
||||
lineNumbers : true,
|
||||
lineWrapping : this.props.wrap,
|
||||
indentWithTabs : false,
|
||||
tabSize : 2,
|
||||
smartIndent : false,
|
||||
historyEventDelay : 250,
|
||||
scrollPastEnd : true,
|
||||
extraKeys : {
|
||||
'Tab' : this.indent,
|
||||
'Shift-Tab' : this.dedent,
|
||||
'Ctrl-B' : this.makeBold,
|
||||
'Cmd-B' : this.makeBold,
|
||||
'Shift-Ctrl-=' : this.makeSuper,
|
||||
'Shift-Cmd-=' : this.makeSuper,
|
||||
'Ctrl-=' : this.makeSub,
|
||||
'Cmd-=' : this.makeSub,
|
||||
'Ctrl-I' : this.makeItalic,
|
||||
'Cmd-I' : this.makeItalic,
|
||||
'Ctrl-U' : this.makeUnderline,
|
||||
'Cmd-U' : this.makeUnderline,
|
||||
'Ctrl-.' : this.makeNbsp,
|
||||
'Cmd-.' : this.makeNbsp,
|
||||
'Shift-Ctrl-.' : this.makeSpace,
|
||||
'Shift-Cmd-.' : this.makeSpace,
|
||||
'Shift-Ctrl-,' : this.removeSpace,
|
||||
'Shift-Cmd-,' : this.removeSpace,
|
||||
'Ctrl-M' : this.makeSpan,
|
||||
'Cmd-M' : this.makeSpan,
|
||||
'Shift-Ctrl-M' : this.makeDiv,
|
||||
'Shift-Cmd-M' : this.makeDiv,
|
||||
'Ctrl-/' : this.makeComment,
|
||||
'Cmd-/' : this.makeComment,
|
||||
'Ctrl-K' : this.makeLink,
|
||||
'Cmd-K' : this.makeLink,
|
||||
'Ctrl-L' : ()=>this.makeList('UL'),
|
||||
'Cmd-L' : ()=>this.makeList('UL'),
|
||||
'Shift-Ctrl-L' : ()=>this.makeList('OL'),
|
||||
'Shift-Cmd-L' : ()=>this.makeList('OL'),
|
||||
'Shift-Ctrl-1' : ()=>this.makeHeader(1),
|
||||
'Shift-Ctrl-2' : ()=>this.makeHeader(2),
|
||||
'Shift-Ctrl-3' : ()=>this.makeHeader(3),
|
||||
'Shift-Ctrl-4' : ()=>this.makeHeader(4),
|
||||
'Shift-Ctrl-5' : ()=>this.makeHeader(5),
|
||||
'Shift-Ctrl-6' : ()=>this.makeHeader(6),
|
||||
'Shift-Cmd-1' : ()=>this.makeHeader(1),
|
||||
'Shift-Cmd-2' : ()=>this.makeHeader(2),
|
||||
'Shift-Cmd-3' : ()=>this.makeHeader(3),
|
||||
'Shift-Cmd-4' : ()=>this.makeHeader(4),
|
||||
'Shift-Cmd-5' : ()=>this.makeHeader(5),
|
||||
'Shift-Cmd-6' : ()=>this.makeHeader(6),
|
||||
'Shift-Ctrl-Enter' : this.newColumn,
|
||||
'Shift-Cmd-Enter' : this.newColumn,
|
||||
'Ctrl-Enter' : this.newPage,
|
||||
'Cmd-Enter' : this.newPage,
|
||||
'Ctrl-F' : 'findPersistent',
|
||||
'Cmd-F' : 'findPersistent',
|
||||
'Shift-Enter' : 'findPersistentPrevious',
|
||||
'Ctrl-[' : this.foldAllCode,
|
||||
'Cmd-[' : this.foldAllCode,
|
||||
'Ctrl-]' : this.unfoldAllCode,
|
||||
'Cmd-]' : this.unfoldAllCode
|
||||
},
|
||||
foldGutter : true,
|
||||
foldOptions : this.foldOptions(this.codeMirror),
|
||||
gutters : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
|
||||
autoCloseTags : true,
|
||||
styleActiveLine : true,
|
||||
showTrailingSpace : false,
|
||||
theme : this.props.editorTheme
|
||||
// specialChars : / /,
|
||||
// specialCharPlaceholder : function(char) {
|
||||
// const el = document.createElement('span');
|
||||
// el.className = 'cm-space';
|
||||
// el.innerHTML = ' ';
|
||||
// return el;
|
||||
// }
|
||||
});
|
||||
this.props.onReady?.(this.codeMirror);
|
||||
// Add custom behaviors (auto-close curlies and auto-complete emojis)
|
||||
closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
|
||||
autoCompleteEmoji.showAutocompleteEmoji(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());});
|
||||
this.updateSize();
|
||||
},
|
||||
|
||||
// Use for GFM tabs that use common hot-keys
|
||||
isGFM : function() {
|
||||
console.log(this.props.tab);
|
||||
if( this.props.tab === 'brewText' || this.props.tab === 'brewSnippets') return true;
|
||||
return false;
|
||||
},
|
||||
|
||||
isBrewText : function() {
|
||||
if(this.props.tab === 'brewText') return true;
|
||||
return false;
|
||||
},
|
||||
|
||||
isBrewSnippets : function() {
|
||||
if(this.props.tab === 'brewSnippets') return true;
|
||||
return false;
|
||||
},
|
||||
|
||||
indent : function () {
|
||||
const cm = this.codeMirror;
|
||||
if(cm.somethingSelected()) {
|
||||
cm.execCommand('indentMore');
|
||||
} else {
|
||||
cm.execCommand('insertSoftTab');
|
||||
}
|
||||
},
|
||||
|
||||
dedent : function () {
|
||||
this.codeMirror?.execCommand('indentLess');
|
||||
},
|
||||
|
||||
makeHeader : function (number) {
|
||||
if(!this.isGFM()) return;
|
||||
const selection = this.codeMirror?.getSelection();
|
||||
const header = Array(number).fill('#').join('');
|
||||
this.codeMirror?.replaceSelection(`${header} ${selection}`, 'around');
|
||||
const cursor = this.codeMirror?.getCursor();
|
||||
this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch + selection.length + number + 1 });
|
||||
},
|
||||
|
||||
makeBold : function() {
|
||||
console.log('hello');
|
||||
if(!this.isGFM()) return;
|
||||
console.log(this.isGFM());
|
||||
const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '**' && selection.slice(-2) === '**';
|
||||
this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `**${selection}**`, 'around');
|
||||
if(selection.length === 0){
|
||||
const cursor = this.codeMirror?.getCursor();
|
||||
this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
|
||||
}
|
||||
},
|
||||
|
||||
makeItalic : function() {
|
||||
if(!this.isGFM()) return;
|
||||
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
|
||||
this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `*${selection}*`, 'around');
|
||||
if(selection.length === 0){
|
||||
const cursor = this.codeMirror?.getCursor();
|
||||
this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
|
||||
}
|
||||
},
|
||||
|
||||
makeSuper : function() {
|
||||
if(!this.isGFM()) return;
|
||||
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
|
||||
this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around');
|
||||
if(selection.length === 0){
|
||||
const cursor = this.codeMirror?.getCursor();
|
||||
this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
|
||||
}
|
||||
},
|
||||
|
||||
makeSub : function() {
|
||||
if(!this.isGFM()) return;
|
||||
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
|
||||
this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around');
|
||||
if(selection.length === 0){
|
||||
const cursor = this.codeMirror?.getCursor();
|
||||
this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
makeNbsp : function() {
|
||||
if(!this.isGFM()) return;
|
||||
this.codeMirror?.replaceSelection(' ', 'end');
|
||||
},
|
||||
|
||||
makeSpace : function() {
|
||||
if(!this.isGFM()) return;
|
||||
const selection = this.codeMirror?.getSelection();
|
||||
const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
|
||||
if(t){
|
||||
const percent = parseInt(selection.slice(8, -4)) + 10;
|
||||
this.codeMirror?.replaceSelection(percent < 90 ? `{{width:${percent}% }}` : '{{width:100% }}', 'around');
|
||||
} else {
|
||||
this.codeMirror?.replaceSelection(`{{width:10% }}`, 'around');
|
||||
}
|
||||
},
|
||||
|
||||
removeSpace : function() {
|
||||
if(!this.isGFM()) return;
|
||||
const selection = this.codeMirror?.getSelection();
|
||||
const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
|
||||
if(t){
|
||||
const percent = parseInt(selection.slice(8, -4)) - 10;
|
||||
this.codeMirror?.replaceSelection(percent > 10 ? `{{width:${percent}% }}` : '', 'around');
|
||||
}
|
||||
},
|
||||
|
||||
newColumn : function() {
|
||||
if(!this.isGFM()) return;
|
||||
this.codeMirror?.replaceSelection('\n\\column\n\n', 'end');
|
||||
},
|
||||
|
||||
newPage : function() {
|
||||
if(!this.isGFM()) return;
|
||||
this.codeMirror?.replaceSelection('\n\\page\n\n', 'end');
|
||||
},
|
||||
|
||||
injectText : function(injectText, overwrite=true) {
|
||||
const cm = this.codeMirror;
|
||||
if(!overwrite) {
|
||||
cm.setCursor(cm.getCursor('from'));
|
||||
}
|
||||
cm.replaceSelection(injectText, 'end');
|
||||
cm.focus();
|
||||
},
|
||||
|
||||
makeUnderline : function() {
|
||||
if(!this.isGFM()) return;
|
||||
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>';
|
||||
this.codeMirror?.replaceSelection(t ? selection.slice(3, -4) : `<u>${selection}</u>`, 'around');
|
||||
if(selection.length === 0){
|
||||
const cursor = this.codeMirror?.getCursor();
|
||||
this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 4 });
|
||||
}
|
||||
},
|
||||
|
||||
makeSpan : function() {
|
||||
if(!this.isGFM()) return;
|
||||
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
|
||||
this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{ ${selection}}}`, 'around');
|
||||
if(selection.length === 0){
|
||||
const cursor = this.codeMirror?.getCursor();
|
||||
this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
|
||||
}
|
||||
},
|
||||
|
||||
makeDiv : function() {
|
||||
if(!this.isGFM()) return;
|
||||
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
|
||||
this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{\n${selection}\n}}`, 'around');
|
||||
if(selection.length === 0){
|
||||
const cursor = this.codeMirror?.getCursor();
|
||||
this.codeMirror?.setCursor({ line: cursor.line - 1, ch: cursor.ch }); // set to -2? if wanting to enter classes etc. if so, get rid of first \n when replacing selection
|
||||
}
|
||||
},
|
||||
|
||||
makeComment : function() {
|
||||
let regex;
|
||||
let cursorPos;
|
||||
let newComment;
|
||||
const selection = this.codeMirror?.getSelection();
|
||||
if(this.isGFM()){
|
||||
regex = /^\s*(<!--\s?)(.*?)(\s?-->)\s*$/gs;
|
||||
cursorPos = 4;
|
||||
newComment = `<!-- ${selection} -->`;
|
||||
} else {
|
||||
regex = /^\s*(\/\*\s?)(.*?)(\s?\*\/)\s*$/gs;
|
||||
cursorPos = 3;
|
||||
newComment = `/* ${selection} */`;
|
||||
}
|
||||
this.codeMirror?.replaceSelection(regex.test(selection) == true ? selection.replace(regex, '$2') : newComment, 'around');
|
||||
if(selection.length === 0){
|
||||
const cursor = this.codeMirror?.getCursor();
|
||||
this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - cursorPos });
|
||||
};
|
||||
},
|
||||
|
||||
makeLink : function() {
|
||||
if(!this.isGFM()) return;
|
||||
const isLink = /^\[(.*)\]\((.*)\)$/;
|
||||
const selection = this.codeMirror?.getSelection().trim();
|
||||
let match;
|
||||
if(match = isLink.exec(selection)){
|
||||
const altText = match[1];
|
||||
const url = match[2];
|
||||
this.codeMirror?.replaceSelection(`${altText} ${url}`);
|
||||
const cursor = this.codeMirror?.getCursor();
|
||||
this.codeMirror?.setSelection({ line: cursor.line, ch: cursor.ch - url.length }, { line: cursor.line, ch: cursor.ch });
|
||||
} else {
|
||||
this.codeMirror?.replaceSelection(`[${selection || 'alt text'}](url)`);
|
||||
const cursor = this.codeMirror?.getCursor();
|
||||
this.codeMirror?.setSelection({ line: cursor.line, ch: cursor.ch - 4 }, { line: cursor.line, ch: cursor.ch - 1 });
|
||||
}
|
||||
},
|
||||
|
||||
makeList : function(listType) {
|
||||
if(!this.isGFM()) return;
|
||||
const selectionStart = this.codeMirror.getCursor('from'), selectionEnd = this.codeMirror.getCursor('to');
|
||||
this.codeMirror?.setSelection(
|
||||
{ line: selectionStart.line, ch: 0 },
|
||||
{ line: selectionEnd.line, ch: this.codeMirror?.getLine(selectionEnd.line).length }
|
||||
);
|
||||
const newSelection = this.codeMirror?.getSelection();
|
||||
|
||||
const regex = /^\d+\.\s|^-\s/gm;
|
||||
if(newSelection.match(regex) != null){ // if selection IS A LIST
|
||||
this.codeMirror?.replaceSelection(newSelection.replace(regex, ''), 'around');
|
||||
} else { // if selection IS NOT A LIST
|
||||
listType == 'UL' ? this.codeMirror?.replaceSelection(newSelection.replace(/^/gm, `- `), 'around') :
|
||||
this.codeMirror?.replaceSelection(newSelection.replace(/^/gm, (()=>{
|
||||
let n = 1;
|
||||
return ()=>{
|
||||
return `${n++}. `;
|
||||
};
|
||||
})()), 'around');
|
||||
}
|
||||
},
|
||||
|
||||
foldAllCode : function() {
|
||||
this.codeMirror?.execCommand('foldAll');
|
||||
},
|
||||
|
||||
unfoldAllCode : function() {
|
||||
this.codeMirror?.execCommand('unfoldAll');
|
||||
},
|
||||
|
||||
//=-- Externally used -==//
|
||||
setCursorPosition : function(line, char){
|
||||
setTimeout(()=>{
|
||||
this.codeMirror?.focus();
|
||||
this.codeMirror?.doc.setCursor(line, char);
|
||||
}, 10);
|
||||
},
|
||||
getCursorPosition : function(){
|
||||
return this.codeMirror?.getCursor();
|
||||
},
|
||||
getTopVisibleLine : function(){
|
||||
const rect = this.codeMirror?.getWrapperElement().getBoundingClientRect();
|
||||
const topVisibleLine = this.codeMirror?.lineAtHeight(rect.top, 'window');
|
||||
return topVisibleLine;
|
||||
},
|
||||
updateSize : function(){
|
||||
this.codeMirror?.refresh();
|
||||
},
|
||||
redo : function(){
|
||||
return this.codeMirror?.redo();
|
||||
},
|
||||
undo : function(){
|
||||
return this.codeMirror?.undo();
|
||||
},
|
||||
historySize : function(){
|
||||
return this.codeMirror?.doc.historySize();
|
||||
},
|
||||
|
||||
foldOptions : function(cm){
|
||||
return {
|
||||
scanUp : true,
|
||||
rangeFinder : this.props.language === 'css' ? CodeMirror.fold.homebrewerycss : CodeMirror.fold.homebrewery,
|
||||
widget : (from, to)=>{
|
||||
let text = '';
|
||||
let currentLine = from.line;
|
||||
let maxLength = 50;
|
||||
|
||||
let foldPreviewText = '';
|
||||
while (currentLine <= to.line && text.length <= maxLength) {
|
||||
const currentText = this.codeMirror?.getLine(currentLine);
|
||||
currentLine++;
|
||||
if(currentText[0] == '#'){
|
||||
foldPreviewText = currentText;
|
||||
break;
|
||||
}
|
||||
if(!foldPreviewText && currentText != '\n') {
|
||||
foldPreviewText = currentText;
|
||||
}
|
||||
}
|
||||
text = foldPreviewText || `Lines ${from.line+1}-${to.line+1}`;
|
||||
text = text.replace('{', '').trim();
|
||||
|
||||
// Truncate data URLs at `data:`
|
||||
const startOfData = text.indexOf('data:');
|
||||
if(startOfData > 0)
|
||||
maxLength = Math.min(startOfData + 5, maxLength);
|
||||
|
||||
if(text.length > maxLength)
|
||||
text = `${text.slice(0, maxLength)}...`;
|
||||
|
||||
return `\u21A4 ${text} \u21A6`;
|
||||
}
|
||||
};
|
||||
},
|
||||
//----------------------//
|
||||
|
||||
render : function(){
|
||||
return <>
|
||||
<link href={`../homebrew/cm-themes/${this.props.editorTheme}.css`} type='text/css' rel='stylesheet' />
|
||||
<div className='codeEditor' ref={this.editor} style={this.props.style}/>
|
||||
</>;
|
||||
if(tab === 'brewStyles') {
|
||||
tokenize = tokenizeCustomCSS;
|
||||
} else {
|
||||
tokenize = renderer === 'V3' ? tokenizeCustomMarkdown : legacyTokenizeCustomMarkdown;
|
||||
}
|
||||
|
||||
return ViewPlugin.fromClass(
|
||||
class {
|
||||
constructor(view) {
|
||||
this.decorations = this.buildDecorations(view);
|
||||
}
|
||||
update(update) {
|
||||
if(update.docChanged) {
|
||||
this.decorations = this.buildDecorations(update.view);
|
||||
}
|
||||
}
|
||||
buildDecorations(view) {
|
||||
const decos = [];
|
||||
const tokens = tokenize(view.state.doc.toString());
|
||||
let pageCount = 1;
|
||||
let snippetCount = 0;
|
||||
|
||||
tokens.forEach((tok)=>{
|
||||
const line = view.state.doc.line(tok.line + 1);
|
||||
|
||||
if(tok.from != null && tok.to != null && tok.from < tok.to) {
|
||||
decos.push(Decoration.mark({ class: `cm-${tok.type}` }).range(line.from + tok.from, line.from + tok.to));
|
||||
} else {
|
||||
decos.push(Decoration.line({ class: `cm-${tok.type}` }).range(line.from));
|
||||
if(tok.type === 'pageLine' && tab === 'brewText') {
|
||||
pageCount++;
|
||||
line.from === 0 && pageCount--;
|
||||
decos.push(Decoration.line({ attributes: { 'data-page-number': pageCount } }).range(line.from));
|
||||
}
|
||||
if(tok.type === 'snippetLine' && tab === 'brewSnippets') {
|
||||
snippetCount++;
|
||||
decos.push(Decoration.line({ attributes: { 'data-page-number': snippetCount } }).range(line.from));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
decos.sort((a, b)=>a.from - b.from || a.to - b.to);
|
||||
return Decoration.set(decos);
|
||||
}
|
||||
},
|
||||
{ decorations: (v)=>v.decorations }
|
||||
);
|
||||
};
|
||||
|
||||
const setProgrammaticCursorLine = StateEffect.define();
|
||||
|
||||
const programmaticCursorLineField = StateField.define({
|
||||
create() {
|
||||
return Decoration.none;
|
||||
},
|
||||
update(decorations, transitionState) {
|
||||
//deco is the decoratiions object
|
||||
//tr is the transition state object, tr.effects is an array of stateEffects
|
||||
//seems to be the easiest way of setting a class programatically only when called
|
||||
for (const effects of transitionState.effects) {
|
||||
if(effects.is(setProgrammaticCursorLine)) {
|
||||
const pos = effects.value;
|
||||
if(pos == null) return Decoration.none;
|
||||
const line = transitionState.state.doc.lineAt(pos);
|
||||
|
||||
return Decoration.set([
|
||||
Decoration.line({
|
||||
class : 'sourceMoveFlash'
|
||||
}).range(line.from)
|
||||
]);
|
||||
}
|
||||
}
|
||||
return decorations;
|
||||
},
|
||||
provide : (decorationSet)=>EditorView.decorations.from(decorationSet)
|
||||
});
|
||||
|
||||
export default CodeEditor;
|
||||
const CodeEditor = forwardRef(
|
||||
(
|
||||
{
|
||||
language = '',
|
||||
tab = 'brewText',
|
||||
view,
|
||||
value = '',
|
||||
onChange = ()=>{},
|
||||
onCursorChange = ()=>{},
|
||||
onViewChange = ()=>{},
|
||||
editorTheme = 'default',
|
||||
style,
|
||||
renderer,
|
||||
...props
|
||||
},
|
||||
ref,
|
||||
)=>{
|
||||
const editorRef = useRef(null);
|
||||
const viewRef = useRef(null);
|
||||
const docsRef = useRef({});
|
||||
const prevTabRef = useRef(tab);
|
||||
|
||||
const pageMap = useRef([]);
|
||||
|
||||
const recomputePages = (doc)=>{
|
||||
const pages = [0];
|
||||
const text = doc.toString();
|
||||
let offset = 0;
|
||||
|
||||
for (const line of text.split('\n')) {
|
||||
if(PAGEBREAK_REGEX_V3.test(line)) {
|
||||
pages.push(offset);
|
||||
}
|
||||
offset += line.length + 1;
|
||||
}
|
||||
|
||||
pageMap.current = pages;
|
||||
};
|
||||
|
||||
const findPageFromPos = (pos)=>{
|
||||
const pages = pageMap.current;
|
||||
let page = 1;
|
||||
|
||||
for (let i = 1; i < pages.length; i++) {
|
||||
if(pos >= pages[i]) page = i + 1;
|
||||
}
|
||||
|
||||
return page;
|
||||
};
|
||||
|
||||
const createExtensions = ({ onChange, language, editorTheme })=>{
|
||||
const setEventListeners = EditorView.updateListener.of((update)=>{
|
||||
if(update.docChanged) {
|
||||
recomputePages(update.state.doc);
|
||||
onChange(update.state.doc.toString());
|
||||
}
|
||||
if(update.selectionSet) {
|
||||
const pos = update.state.selection.main.head;
|
||||
const page = findPageFromPos(pos);
|
||||
onCursorChange(page);
|
||||
}
|
||||
});
|
||||
|
||||
const highlightExtension = renderer === 'V3'
|
||||
? syntaxHighlighting(customHighlightStyle)
|
||||
: syntaxHighlighting(legacyCustomHighlightStyle);
|
||||
|
||||
const customHighlightPlugin = createHighlightPlugin(renderer, tab);
|
||||
|
||||
const languageExtension = language === 'css' ? css() : [markdown({ base: markdownLanguage, codeLanguages: languages }), html({ autoCloseTags: true })];
|
||||
const themeExtension = Array.isArray(themes[editorTheme]) ? themes[editorTheme] : themes[editorTheme] || themes['default'];
|
||||
|
||||
return [
|
||||
EditorView.lineWrapping,
|
||||
setEventListeners,
|
||||
languageExtension,
|
||||
autoCloseBrackets,
|
||||
lineNumbers(),
|
||||
scrollPastEnd(),
|
||||
search(),
|
||||
history(), //allows for undo and redo
|
||||
...(tab !== 'brewStyles' ? [autocompleteEmoji] : []),
|
||||
|
||||
//folding
|
||||
foldOnPages,
|
||||
foldGutter({
|
||||
openText : '▾',
|
||||
closedText : '▸'
|
||||
}),
|
||||
|
||||
//highlights
|
||||
highlightCompartment.of([customHighlightPlugin, highlightExtension]),
|
||||
themeCompartment.of(themeExtension),
|
||||
highlightActiveLine(),
|
||||
highlightActiveLineGutter(),
|
||||
|
||||
//keyboard shortcut
|
||||
keymap.of([...defaultKeymap, foldKeymap, ...searchKeymap]),
|
||||
generalKeymap,
|
||||
...(tab !== 'brewStyles' ? [markdownKeymap] : []),
|
||||
|
||||
//multiple cursors and selections
|
||||
drawSelection(),
|
||||
EditorState.allowMultipleSelections.of(true),
|
||||
dropCursor(),
|
||||
programmaticCursorLineField,
|
||||
];
|
||||
};
|
||||
|
||||
useEffect(()=>{
|
||||
if(!editorRef.current) return;
|
||||
|
||||
const state = EditorState.create({
|
||||
doc : value,
|
||||
extensions : createExtensions({ onChange, language, editorTheme }),
|
||||
});
|
||||
|
||||
recomputePages(state.doc);
|
||||
|
||||
viewRef.current = new EditorView({
|
||||
state,
|
||||
parent : editorRef.current,
|
||||
});
|
||||
|
||||
const view = viewRef.current;
|
||||
|
||||
let ticking = false;
|
||||
|
||||
const handleScroll = ()=>{
|
||||
if(ticking) return;
|
||||
|
||||
ticking = true;
|
||||
requestAnimationFrame(()=>{
|
||||
const top = view.scrollDOM.scrollTop;
|
||||
const block = view.lineBlockAtHeight(top);
|
||||
|
||||
const page = findPageFromPos(block.from); // CHANGED
|
||||
onViewChange(page);
|
||||
|
||||
ticking = false;
|
||||
});
|
||||
};
|
||||
|
||||
view.scrollDOM.addEventListener('scroll', handleScroll);
|
||||
|
||||
docsRef.current[tab] = state;
|
||||
|
||||
return ()=>{
|
||||
view.scrollDOM.removeEventListener('scroll', handleScroll);
|
||||
viewRef.current?.destroy();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(()=>{
|
||||
const view = viewRef.current;
|
||||
if(!view) return;
|
||||
|
||||
const prevTab = prevTabRef.current;
|
||||
|
||||
if(prevTab !== tab) {
|
||||
docsRef.current[prevTab] = view.state;
|
||||
|
||||
let nextState = docsRef.current[tab];
|
||||
|
||||
if(!nextState) {
|
||||
nextState = EditorState.create({
|
||||
doc : value,
|
||||
extensions : createExtensions({ onChange, language, editorTheme }),
|
||||
});
|
||||
}
|
||||
|
||||
view.setState(nextState);
|
||||
prevTabRef.current = tab;
|
||||
}
|
||||
view.focus();
|
||||
}, [tab]);
|
||||
|
||||
useEffect(()=>{
|
||||
const view = viewRef.current;
|
||||
if(!view) return;
|
||||
|
||||
const current = view.state.doc.toString();
|
||||
if(value !== current) {
|
||||
view.dispatch({
|
||||
changes : { from: 0, to: current.length, insert: value },
|
||||
});
|
||||
}
|
||||
}, [value]);
|
||||
|
||||
useEffect(()=>{
|
||||
//rebuild theme extension on theme change
|
||||
const view = viewRef.current;
|
||||
if(!view) return;
|
||||
|
||||
const themeExtension = Array.isArray(themes[editorTheme])? themes[editorTheme]: themes[editorTheme] || themes['default'];
|
||||
|
||||
view.dispatch({
|
||||
effects : themeCompartment.reconfigure(themeExtension),
|
||||
});
|
||||
}, [editorTheme]);
|
||||
|
||||
useEffect(()=>{
|
||||
//rebuild syntax highlight when changing tab or renderer
|
||||
const view = viewRef.current;
|
||||
if(!view) return;
|
||||
|
||||
const highlightExtension =renderer === 'V3'
|
||||
? syntaxHighlighting(customHighlightStyle)
|
||||
: syntaxHighlighting(legacyCustomHighlightStyle);
|
||||
|
||||
const customHighlightPlugin = createHighlightPlugin(renderer, tab);
|
||||
|
||||
view.dispatch({
|
||||
effects : highlightCompartment.reconfigure([customHighlightPlugin, highlightExtension]),
|
||||
});
|
||||
}, [renderer, tab]);
|
||||
|
||||
useImperativeHandle(ref, ()=>({
|
||||
|
||||
injectText : (text)=>{
|
||||
const view = viewRef.current;
|
||||
|
||||
|
||||
view.dispatch(
|
||||
view.state.replaceSelection(text)
|
||||
);
|
||||
view.focus();
|
||||
},
|
||||
getCursorPosition : ()=>viewRef.current.state.selection.main.head,
|
||||
|
||||
scrollToPage : (pageNumber, smooth = true)=>{
|
||||
const view = viewRef.current;
|
||||
if(!view) return;
|
||||
|
||||
const pos = pageMap.current[pageNumber - 1] ?? 0;
|
||||
|
||||
view.dispatch({
|
||||
selection : { anchor: pos },
|
||||
effects : [setProgrammaticCursorLine.of(pos), EditorView.scrollIntoView(pos, { y: 'start' })],
|
||||
});
|
||||
|
||||
view.focus();
|
||||
|
||||
setTimeout(()=>{
|
||||
view.dispatch({
|
||||
effects : setProgrammaticCursorLine.of(null)
|
||||
});
|
||||
}, 400);
|
||||
},
|
||||
|
||||
undo : ()=>undo(viewRef.current),
|
||||
redo : ()=>redo(viewRef.current),
|
||||
|
||||
historySize : ()=>{
|
||||
const view = viewRef.current;
|
||||
if(!view) return { done: 0, undone: 0 };
|
||||
|
||||
return {
|
||||
done : undoDepth(view.state),
|
||||
undone : redoDepth(view.state),
|
||||
};
|
||||
},
|
||||
|
||||
foldAll : ()=>{
|
||||
const view = viewRef.current;
|
||||
if(!view) return;
|
||||
view.dispatch(foldAllCmd(view));
|
||||
},
|
||||
unfoldAll : ()=>{
|
||||
const view = viewRef.current;
|
||||
if(!view) return;
|
||||
view.dispatch(unfoldAllCmd(view));
|
||||
},
|
||||
|
||||
focus : ()=>viewRef.current.focus(),
|
||||
}));
|
||||
|
||||
return <div className={`codeEditor ${tab}`} ref={editorRef} style={style} />;
|
||||
},
|
||||
);
|
||||
|
||||
export default CodeEditor;
|
||||
@@ -1,60 +1,72 @@
|
||||
@import (less) 'codemirror/lib/codemirror.css';
|
||||
@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';
|
||||
|
||||
//Icon fonts included so they can appear in emoji autosuggest dropdown
|
||||
@import (less) '@themes/fonts/iconFonts/diceFont.less';
|
||||
@import (less) '@themes/fonts/iconFonts/elderberryInn.less';
|
||||
@import (less) '@themes/fonts/iconFonts/gameIcons.less';
|
||||
@import (less) '@themes/fonts/iconFonts/fontAwesome.less';
|
||||
// Icon fonts for emoji/autocomplete
|
||||
@import (less) "@themes/fonts/iconFonts/diceFont.less";
|
||||
@import (less) "@themes/fonts/iconFonts/elderberryInn.less";
|
||||
@import (less) "@themes/fonts/iconFonts/gameIcons.less";
|
||||
@import (less) "@themes/fonts/iconFonts/fontAwesome.less";
|
||||
|
||||
@keyframes sourceMoveAnimation {
|
||||
50% { color : white;background-color : red;}
|
||||
100% { color : unset;background-color : unset;}
|
||||
50% {
|
||||
color: white;
|
||||
background-color: red;
|
||||
}
|
||||
100% {
|
||||
color: unset;
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.codeEditor {
|
||||
@media screen and (pointer : coarse) {
|
||||
font-size : 16px;
|
||||
:where(.codeEditor) {
|
||||
font-family: monospace;
|
||||
height: 100%;
|
||||
width:100%;
|
||||
|
||||
.cm-content {
|
||||
tab-size:2 !important;
|
||||
}
|
||||
.CodeMirror-foldmarker {
|
||||
|
||||
@media screen and (pointer: coarse) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cm-gutterElement span {
|
||||
font-family : inherit;
|
||||
font-weight : 600;
|
||||
color : grey;
|
||||
text-shadow : none;
|
||||
}
|
||||
|
||||
.CodeMirror-foldgutter {
|
||||
.cm-foldGutter {
|
||||
cursor : pointer;
|
||||
border-left : 1px solid #EEEEEE;
|
||||
transition : background 0.1s;
|
||||
&:hover { background : #DDDDDD; }
|
||||
}
|
||||
|
||||
.sourceMoveFlash .CodeMirror-line {
|
||||
animation-name : sourceMoveAnimation;
|
||||
animation-duration : 0.4s;
|
||||
/* Flash animation for source moves */
|
||||
.cm-line.sourceMoveFlash {
|
||||
animation-name: sourceMoveAnimation;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
.CodeMirror-search-field {
|
||||
width:25em !important;
|
||||
outline:1px inset #00000055 !important;
|
||||
/* Search input */
|
||||
.cm-searchField {
|
||||
width: 25em !important;
|
||||
outline: 1px inset #00000055 !important;
|
||||
}
|
||||
|
||||
/* Tab character visualization (optional) */
|
||||
//.cm-tab {
|
||||
// background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
|
||||
// background: url(...) no-repeat right;
|
||||
//}
|
||||
|
||||
//.cm-trailingspace {
|
||||
// .cm-space {
|
||||
// background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
|
||||
// }
|
||||
/* Trailing space visualization (optional) */
|
||||
//.cm-trailingSpace .cm-space {
|
||||
// background: url(...) no-repeat right;
|
||||
//}
|
||||
}
|
||||
|
||||
/* Emoji preview styling */
|
||||
.emojiPreview {
|
||||
font-size : 1.5em;
|
||||
line-height : 1.2em;
|
||||
}
|
||||
font-size: 1.5em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
@@ -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,295 @@
|
||||
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,
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// --- 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 = /^(::)(.*\S.*)?\s*$/.exec(nextLine);
|
||||
if(!onlyColonsMatch && defMatch) {
|
||||
defs.push({ colons: defMatch[1], desc: defMatch[2], line: i });
|
||||
endLine = i;
|
||||
} else break;
|
||||
}
|
||||
|
||||
if(defs.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,222 @@
|
||||
/* eslint max-lines: ["error", { "max": 300 }] */
|
||||
import { keymap } from '@codemirror/view';
|
||||
import { undo, redo, indentMore } from '@codemirror/commands';
|
||||
|
||||
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 makeBold = (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 },
|
||||
selection : { anchor: from + text.length },
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeItalic = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const text = selected.startsWith('*') && selected.endsWith('*')
|
||||
? selected.slice(1, -1)
|
||||
: `*${selected}*`;
|
||||
view.dispatch({
|
||||
changes : { from, to, insert: text },
|
||||
selection : { anchor: from + text.length },
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeUnderline = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const text = selected.startsWith('<u>') && selected.endsWith('</u>')
|
||||
? selected.slice(3, -4)
|
||||
: `<u>${selected}</u>`;
|
||||
view.dispatch({
|
||||
changes : { from, to, insert: text },
|
||||
selection : { anchor: from + text.length },
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeSuper = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
const selected = view.state.doc.sliceString(from, to);
|
||||
const text = selected.startsWith('^') && selected.endsWith('^')
|
||||
? selected.slice(1, -1)
|
||||
: `^${selected}^`;
|
||||
view.dispatch({
|
||||
changes : { from, to, insert: text },
|
||||
selection : { anchor: from + text.length },
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeSub = (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 },
|
||||
selection : { anchor: from + text.length },
|
||||
});
|
||||
return true;
|
||||
};
|
||||
|
||||
const makeNbsp = (view)=>{
|
||||
const { from, to } = view.state.selection.main;
|
||||
view.dispatch({ changes: { from, to, insert: ' ' } });
|
||||
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 = keymap.of([
|
||||
{ key: 'Tab', run: indentMore },
|
||||
{ key: 'Mod-z', run: undo }, //i think it may be unnecessary
|
||||
{ key: 'Mod-Shift-z', run: redo },
|
||||
]);
|
||||
|
||||
export const markdownKeymap = keymap.of([
|
||||
//{ key: 'Shift-Tab', run: indentMore },
|
||||
{ key: 'Shift-Tab', run: indentLess },
|
||||
{ key: 'Mod-b', run: makeBold },
|
||||
{ key: 'Mod-i', run: makeItalic },
|
||||
{ key: 'Mod-u', run: makeUnderline },
|
||||
{ key: 'Shift-Mod-=', run: makeSuper },
|
||||
{ key: 'Mod-=', run: 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: 'Shift-Mod-Enter', run: newColumn },
|
||||
{ key: 'Mod-Enter', run: newPage },
|
||||
|
||||
]);
|
||||
@@ -1,44 +0,0 @@
|
||||
export default {
|
||||
registerHomebreweryHelper : function(CodeMirror) {
|
||||
CodeMirror.registerHelper('fold', 'homebrewerycss', function(cm, start) {
|
||||
|
||||
// BRACE FOLDING
|
||||
const startMatcher = /\{[ \t]*$/;
|
||||
const endMatcher = /\}[ \t]*$/;
|
||||
const activeLine = cm.getLine(start.line);
|
||||
|
||||
|
||||
if(activeLine.match(startMatcher)) {
|
||||
const lastLineNo = cm.lastLine();
|
||||
let end = start.line + 1;
|
||||
let braceCount = 1;
|
||||
|
||||
while (end < lastLineNo) {
|
||||
const curLine = cm.getLine(end);
|
||||
if(curLine.match(startMatcher)) braceCount++;
|
||||
if(curLine.match(endMatcher)) braceCount--;
|
||||
if(braceCount == 0) break;
|
||||
++end;
|
||||
}
|
||||
|
||||
return {
|
||||
from : CodeMirror.Pos(start.line, 0),
|
||||
to : CodeMirror.Pos(end, cm.getLine(end).length)
|
||||
};
|
||||
}
|
||||
|
||||
// @import and data-url folding
|
||||
const importMatcher = /^@import.*?;/;
|
||||
const dataURLMatcher = /url\(.*?data\:.*\)/;
|
||||
|
||||
if(activeLine.match(importMatcher) || activeLine.match(dataURLMatcher)) {
|
||||
return {
|
||||
from : CodeMirror.Pos(start.line, 0),
|
||||
to : CodeMirror.Pos(start.line, activeLine.length)
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -1,26 +0,0 @@
|
||||
export default {
|
||||
registerHomebreweryHelper : function(CodeMirror) {
|
||||
CodeMirror.registerHelper('fold', 'homebrewery', function(cm, start) {
|
||||
const matcher = /^\\page.*/;
|
||||
const prevLine = cm.getLine(start.line - 1);
|
||||
|
||||
if(start.line === cm.firstLine() || prevLine.match(matcher)) {
|
||||
const lastLineNo = cm.lastLine();
|
||||
let end = start.line;
|
||||
|
||||
while (end < lastLineNo) {
|
||||
if(cm.getLine(end + 1).match(matcher))
|
||||
break;
|
||||
++end;
|
||||
}
|
||||
|
||||
return {
|
||||
from : CodeMirror.Pos(start.line, 0),
|
||||
to : CodeMirror.Pos(end, cm.getLine(end).length)
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
}
|
||||
};
|
||||
@@ -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