About
Minimalistic, modular code editor for the web.
Installing:
npm i granit
Usage:
import Editor keysMap lifeCycleMap from "granit"; Component { ; } { return <div> <Editor = = ="Hello there" = = = /> </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 = newRecordvalue; const stringAfterSelectionStart = newRecordvalue; newRecordvalue = stringUntilSelectionStart + "\n" + stringAfterSelectionStart; newRecordselectionStart += 1; newRecordselectionEnd += 1; return newRecord; const keysMap = "mac+13": enterKeyPressed; const lifeCycleMap = "mac+cmd+90": "undo" const highlightString = text const rows = text; const newRows = rows; return newRows; Component { ; } { return <div> <Editor = = ="Hello there" = = = = /> </div> ; }