mRich

I worked on fixing the bug where it was unable to detect when some parts where deleted, so I had to restructure some parts of code handling formatting and deformatting.

fixed bug where appending to existing indexes and then bolding it sequentially doesn’t work as intended
many more bugs ahead…

debugging
formatting icon changes when selected text is already formatted

pretty happy that I have a design system now

more formatting features
made it so when something inside is changed, it pushes back future n(s) and adds newly created n(s). it is important because when more formatting is done other letters are not responsive to that, causing formatting to break.
very tedious

migrated boldInstances, italicInstances, underlineInstances from array to sets
abstracted getting text to format with formatRange()
made it support “backwards selection” as it was necessary for DOM
polished UI and animations a bit

Did a lot of js work found that I was using replace() instead of replaceAll(). And as I was formatting, getSelection() didn’t seem to work. So the solution I came up with was labeling every single character in their own s with ids. Fixed a bug in boldInstances. I think I should migrate boldInstances[] to a set as there should be only one item for each instsance. I am currently using anchorNode instead of anchorOffset, as anchorNode can tell me the index and the id awhile anchorOffset completely breaks when the user selection is not contained in one element.
The algorithm works by turning the textcontent into plain text, which is then modified to have those formats, based on the boldInstances/italicInstances/etc arrays(which will soon be sets).

Added 4px to body font size in celebration

Developed some UI for the formatting buttons, and made the bold function at least once. The problem was that it was impossible to just slide in inside innerHTML. So I researched online for information about caret position, and built an algorithm based on arrays and setting each character one by one.
Fixed some errors going on with eventListeners and pointerEvents.
Midway I tired to use textarea to serve as a invisible logger but that turned out to be more complex than the array one, so I abandoned it.

learned about the text selection API in DOM
progressed in making my own rich text editor!
also played around with colors for formatting buttons

Made an icon for bold and got some front end stuff done. Made the toolbar pop up and pop down

Made a tool bar that selects text formatting options
thinking of putting bold, italic, and underline only
TODO: make them work lol

created basic front end interface
made notes save using cookies
added some sweet animations