Quill is a nim js library for making text editors, it is made completely in nim and is designed to be easy to use.
214 | 215 |Example
The example can be found at https://thatrandomperson5.github.io/Quill/example
216 | 217 |Docs
Docs can be found at https://thatrandomperson5.github.io/Quill/quill
218 | 219 |Installing
nimble install https://github.com/thatrandomperson5/Quill220 |
Guide
We first need to add some css to our main html file:
221 |<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/thatrandomperson5/quill@master/js/quill.css">
After that we can start coding. A quill has a structure to get it to work:
222 |- Create the quill 223 |
- Set any default text 224 |
- Add onDraw
- Main html generation 225 |
- Sector entering or forced redraw 226 |
228 | - Init extentions and then quill 229 |
Here is a basic example:
231 |# From tests 232 | import quill, dom 233 | 234 | var myquill = newQuill(document.getElementById("quill"), "70vh") # create the quill with height of 70 235 | myquill.text = "Hello world" # Set the default text 236 | myquill.onDraw = proc (q: var Quill, str: cstring, isDel: bool) = 237 | # Main html generation 238 | let txt = document.createElement("span") 239 | txt.appendChild document.createTextNode(str) 240 | q.draw(txt) 241 | 242 | myquill.init() # Start the quill
Note: There is no reason to redraw if you don't use insert(), will be explained in more detail later on.
243 |This is the most basic quill! But it does not do anything, so is there anything diffrent then a normal textarea? Well, the draw proc takes html, so you can color and style as much as you want! Try making the span a random color! You can also use the features described below to help you.
244 | 245 |Insert and sectors
You can have a insert() call in your ondraw proc. This adds text, for example an indent, to your quill. This inserts at the current cursor position, if you want to add text a diffrent way, use the text= proc.
246 |There are also sectors, which reduce the text passed to onDraw. Say for example your quill only needed to process words and you have this sentance: hello world good souls. Normally your draw proc would get passed the whole thing each time, but when processing "world", your code does not need anything from "hello". So, when you detect a space, you would enter a sector using enter(). This would mean if the word "hello" was changed to "hi" you would get passed "hi" instead of "hi world good souls". This feature is mainly for efficiency, and a full example can be found in the tests folder.
247 |Note: Why is my inserted text not showing? You have to have a myquill.forceRedraw() at the end to make it show.
248 |Warning: forceRedraw() and enter() must be the last call in your draw proc, also note that enter() replaces forceRedraw().
249 | 250 |Gutter
To add a gutter (numbers on the side), just add the code below:
251 |# After import quill 252 | import quill/ext/gutters 253 | 254 | # Right before myquill.init() 255 | myquill.initGutter()256 |
Imports
258 |-
259 | quill/ext/gutters, quill/utils
260 |
Types
263 |-
264 |
Quill = ref object 266 | internalElm: Element 267 | onDraw*: QuillOnDraw 268 | sectors: seq[int] 269 | current: int 270 | plen: int 271 |
272 | - 273 | 274 | 275 | 276 | 277 |
QuillOnDraw = (var Quill, cstring, bool) -> void
280 | - 281 | 282 | 283 | 284 | 285 |
QuillOnSegment = (Quill, cstring) -> seq[cstring]
288 | - 289 | 290 | 291 | 292 | 293 |
Vars
298 |-
299 |
documentElement: Element
301 | - 302 | 303 | 304 | 305 | 306 |
Procs
311 |-
312 |
proc draw(q: var Quill; n: Node) {....raises: [], tags: [].}
314 | - 315 | 316 | Draw dom node n to quill q 317 | 318 | 319 |
proc element(q: Quill): Element {....raises: [], tags: [].}
322 | - 323 | 324 | For extentions, like quill/ext/gutters 325 | 326 | 327 |
proc enter(q: var Quill; pos: int) {....raises: [Exception], tags: [RootEffect].}
330 | -
331 |
332 |
Enter a new sector at pos relative to the current sector
333 |Note: Must be the last call in a onDraw
334 | 335 | 336 |
337 | proc eventElement(q: Quill): Element {....raises: [], tags: [].}
340 | - 341 | 342 | For extentions, like quill/ext/gutters 343 | 344 | 345 |
proc forceRedraw(q: var Quill) {....raises: [Exception], tags: [RootEffect].}
348 | - 349 | 350 | Force the redrawing of quill q 351 | 352 | 353 |
proc init(q: var Quill) {....raises: [Exception], tags: [RootEffect].}
356 | - 357 | 358 | "Turns on" the quill, nothing will work or show properly until this is called 359 | 360 | 361 |
proc insert(q: var Quill; text: cstring) {....raises: [], tags: [].}
364 | - 365 | 366 | Insert text at users current position 367 | 368 | 369 |
proc newQuill(e: Element; height: cstring = "30vh"): Quill {....raises: [], 372 | tags: [].}
373 | -
374 |
375 |
Create a new quill of height height and make all needed elements
376 |Note: Might not look right without the proper css
377 | 378 | 379 |
380 | proc text(q: Quill): cstring {....raises: [], tags: [].}
383 | - 384 | 385 | Get the text/value of a quill, directly what the user inputed 386 | 387 | 388 |
proc text=(q: var Quill; replacment: cstring) {....raises: [], tags: [].}
391 | - 392 | 393 | Set the text of a quill (as an user input, so you cannot set html tags) 394 | 395 | 396 |
proc visualElement(q: Quill): Element {....raises: [], tags: [].}
399 | - 400 | 401 | For extentions, like quill/ext/gutters 402 | 403 | 404 |
Exports
409 |-
410 | toJsStr, createRawText, toCstr
411 |