0.0.42 • Published 4 years ago
granit v0.0.42
About
Minimalistic, modular code editor for the web.
Installing:
npm i granit
Usage:
import Editor, { keysMap, lifeCycleMap } from "granit";
export default class Home extends React.Component {
onSave(text) {
post("http://destination.com", text);
}
render() {
return (
<div>
<Editor
width={750}
height={500}
defaultValue="Hello there"
keysMap={keysMap}
lifeCycleMap={lifeCycleMap}
onSave={this.onSave}
/>
</div>
);
}
}
Props
keyMap
: {},lifeCycleMap
: {},width
: 500,height
: 300,fontSize
: 16,background
: "#f2f3f4",initialValue
: "",fontFamily
: "Fira code,Fira Mono,Consolas,Menlo,Courier,monospace",onSave
: () => { },onChange
: () => { },renderHighlight
: (a) => a,renderErrors
: (a) => a,editable
: true
Build you own map of keys
import Editor from "granit";
const enterKeyPressed = (record, event) => {
const newRecord = {...record};
const stringUntilSelectionStart = newRecord.value.substring(0, newRecord.selectionStart);
const stringAfterSelectionStart = newRecord.value.substring(newRecord.selectionStart, newRecord.value.length);
newRecord.value = stringUntilSelectionStart + "\n" + stringAfterSelectionStart;
newRecord.selectionStart += 1;
newRecord.selectionEnd += 1;
return newRecord;
}
const keysMap = {
"mac+13": enterKeyPressed
};
const lifeCycleMap = {
"mac+cmd+90": "undo"
}
const highlightString = (text) => {
const rows = text.split("\n");
const newRows = rows.map(item => {
const string = /^[A-Za-z0-9_-]+\s=\s".*"$/;
const stringMatch = item.match(string);
if(stringMatch) {
const splitted = stringMatch[0].split(" = ");
return `<span class="string">${splitted[0]}</span> = <span class="string">${splitted[1]}</span>`;
}
return item;
});
return newRows.join('\n');
}
export default class Home extends React.Component {
onSave(text) {
post("http://destination.com", text);
}
render() {
return (
<div>
<Editor
width={750}
height={500}
defaultValue="Hello there"
keysMap={keysMap}
lifeCycleMap={lifeCycleMap}
renderHighlight={highlightString}
onSave={this.onSave}
/>
</div>
);
}
}
0.0.42
4 years ago
0.0.41
4 years ago
0.0.40
4 years ago
0.0.39
4 years ago
0.0.38
4 years ago
0.0.37
4 years ago
0.0.36
4 years ago
0.0.35
4 years ago
0.0.31
4 years ago
0.0.32
4 years ago
0.0.33
4 years ago
0.0.34
4 years ago
0.0.30
4 years ago
0.0.29
5 years ago
0.0.28
5 years ago
0.0.27
5 years ago
0.0.26
5 years ago
0.0.25
5 years ago
0.0.24
5 years ago
0.0.23
5 years ago
0.0.21
5 years ago
0.0.20
5 years ago
0.0.19
5 years ago
0.0.18
5 years ago
0.0.16
5 years ago
0.0.15
5 years ago
0.0.14
5 years ago
0.0.13
5 years ago
0.0.12
5 years ago
0.0.11
5 years ago
0.0.10
5 years ago
0.0.9
5 years ago
0.0.8
5 years ago
0.0.7
5 years ago
0.0.6
5 years ago
0.0.5
5 years ago
0.0.4
5 years ago
0.0.3
5 years ago
0.0.2
5 years ago
0.0.1
5 years ago