flatnotes
flatnotes copied to clipboard
dullage
(bug?) input is laggy in highly decorated section of note
When editing in the middle of a "highly" decorated section (see image below) i get a very noticeable input lag, i would say around 200ms.
This doesnt happen if i go right below that section, or right above. I wonder if this was a ToastUI problem or if it could be fixed with flatnotes? Feel free to close this issue in case it is the former
sorry for the late reply. below you can find the markdown file where this problem occurs (the problematic section is at the end, the one shown in the screenshot of the issue post)
# Practical Plan
[this guide](https://www.section.io/engineering-education/how-to-build-a-vue-app-with-flask-sqlite-backend-using-docker/)
* [x] ~~learn basic vue setup~~
* [x] ~~sqlite setup~~
* [x] ~~create working api~~
* [x] ~~openlibrary~~
* [x] ~~books~~
* [x] ~~authors~~
* [x] ~~collections~~
* [x] ~~journal~~
* [x] ~~json de/serialization (input/output json)~~
* [ ] integrate api scripts with fastapi request handler
* [ ] use bootstrap-vue
* [ ] create base components/pages getting info from api
* [ ] homepage
* [ ] header
* [ ] book creation modal
* [ ] view book page
* [ ] view author page
* [ ] collections page
* [ ] library page
* [ ] authors page
* [ ] git repo
* [ ] roadmap
- - -
# Information
**name:** mybrary
**description:** book tracking made easy, made yours
**frontend:** vue
**backend:** fastapi
- - -
# Brainstorm
## Adding a book
1. Show WORK SEARCH modal
2. Show various results in format: **Book Title**, *Book Author* (Year)
3. Show EDITIONS modal in format: [Cover Image] *Publisher:* publisher *Date:* date *Page Count:* page_count *Language:* language
4. User clicks one, pop-up book creation modal using info of selected book
* selected book title
* selected book author
* selected edition year
* selected edition page count / input if none
* selected edition language / input if none
* selected edition cover art
* search icon shows more openlibrary entries
* upload icon allows upload
* input entry status (radio)
* to read
* reading
* finished
* input owned status (toggle)
* submit
5. Upon book creation, also create author if inexistent (through post book entry in book api)
## Updating book progress
just like storygraph
## Collections
no cover image but just book page with varying random colors for each collection?
* Favorite Books
* Favorite Authors
## Extensions
#### Data sanitizations
sanitize api request input to protect from sql injection
#### Cache covers
download covers to local machine once the edition is chosen
#### Statistics + Visualizations
* languages
* themes
* pages read
* books read
* time per page
* …
#### Goals
add weekly, monthly, yearly goals (like storygraph)
* Read author
* Read x books
* Read x pages
#### Reviews
add reviews and ratings /10 to books (and authors?)
this is pretty simple, just a "rating" column in the db and some frontend thing that lets you choose a score, then change using PATCH (default score is None, if setting back to None then set to -1 ???)
#### Imports
* goodreads
* storygraph
* ryot
* ….
#### Docker
Create dockerfile and setup environment variables
#### Authorization
Simple password-based authorization
#### Settings
settings page for various things, including but not limited to
* date format
* other extensions stuff
#### QR Code
Allow adding books by qr code
#### Support multiple reads
Should be able to understand that after a book is finished adding new journal entries might mean another read, or that someone might abandon a book and come to it later. these should be considered separate reads and tracked as such
- - -
# Frontend
## Consuming API
[resource](https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html?redirect=true)
## Style
[sample palette](https://coolors.co/palette/582f0e-7f4f24-936639-a68a64-b6ad90-c2c5aa-a4ac86-656d4a-414833-333d29)
Foreground Color: Very Dark Brown (`#3d2611`)
Background Color: Barely Off White (`#fffcf7`)
Item Color: Light Grey (`#e2ded5`)
Font: [canela](https://befonts.com/canela-font-family.html)
## Components
* Header
* Book search by title modal
* Book creation modal
* Library advanced search modal
* Authors advanced search modal
## Pages
* / - Homepage
* /books/? - View book
* /authors/? - View author
* /collections/? - View collection
* /books/ - Library
* /authors/ - Authors
* /collections/ - Collections
## Mock-ups
#### view book
book cover, to left and large
book title
<u>author</u>
status, owned
language
[ if status is reading or finished ]
**journal**
\```
| 14-08-2023 120/230 pages |
| 1.1 hours |
| 12-08-2023 92/230 pages |
| 55 minutes |
| 09-08-2023 60/230 pages |
| 2.2 hours |
( view more)
\```
[endif]
- - -
# Backend
## Database
sqlite
**tables**
* books
* id
* olid (unique)
* authors ("1.2.3")
* title
* status
* to read
* reading
* finished
* owned
* page_count
* pages_read
* language
* cover
* authors
* id
* olid (unique)
* name
* biography
* birth
* death
* cover
* collections
* id
* title (unique)
* description
* authors ("1.2.3")
* books ("1.2.3")
* cover
* journal_entries
* id
* book_id
* date
* pages_read
* minutes
...extensions
* statistics
* total_pages_read
* total_books_read
* total_authors_read
* total_time_read
* fastest_book
* slowest_book
* ...?
(there has to be a smarter way of going about this)
## API
* /api/openlibrary
* `GET /api/openlibrary/books`
* `GET /api/openlibrary/editions`
* `?isbn=`
* `GET /api/openlibrary/authors`
* `GET /api/openlibrary/covers/author` (fetches various covers)
* `GET /api/openlibrary/covers/book` (fetches various covers)
* /api/books
* `POST /api/books`
* if creating finished book then create journal entry with current date and time=null
* `GET /api/books`
* `?title=`
* `DELETE /api/books/{id}`
* `PATCH /api/books/{id}`
* `GET /api/books/{id}`
* /api/authors
* `POST /api/authors`
* `GET /api/authors`
* `?name=`
* `DELETE /api/authors/{id}`
* `PATCH /api/authors/{id}` (only image?)
* `GET /api/authors/{id}`
* /api/collections
* `POST /api/collections` aaaaaaaa
* `GET /api/collections`
* `DELETE /api/collections/{id}`
* `PATCH /api/collections/{id}`
* `GET /api/collections/{id}`
* /api/journal
* `POST /api/journal`
* `GET /api/journal`
* `DELETE /api/journal/{id}`
* `PATCH /api/journal/{id}`
* `GET /api/journal/{id}`
I can replicate the lag in flatnotes but, interestingly, can't in the Toast Editor outside of flatnotes. I tried disabling any extra flatnotes is doing (custom HTML renderer, on change callback, code syntax plugin, extended autolinks) but I still get the lag. Some further digging is required.