DEV Community

Cover image for 7 new features, 51.3 new bugs added 😋, the DEV.TO 👩‍💻👨‍💻 editor [PART DEUX!]

7 new features, 51.3 new bugs added 😋, the DEV.TO 👩‍💻👨‍💻 editor [PART DEUX!]

GrahamTheDev on April 07, 2021

Welcome to the dev.to editor version 0.02! My attempt at creating an editor for dev.to to make writing articles easier! If you didn't read my firs...
Collapse
 
12944qwerty profile image
12944qwerty

Suggestion:
Give the icons titles? Just a keyword or two for each icon when you hover over it.
Give buttons more aesthetic other than just fitting the color themes.

Also, undo/redo doesn't work very well. Not sure if it's how I'm testing it though.

Can't wait to see what the "?" button will do XD

Collapse
 
grahamthedev profile image
GrahamTheDev

Icons do shown hints if you hover long enough, that is one I am defo working on!

Undo redo might need looking at, it is a crappy implementation that just saves the last change you made using the editor itself (so if you press Bold it will save it then) plus every 15 seconds it takes a snap shot. So probably not you it is my crappy code 🤣🤣

? Is just help - don’t get too excited about that one 😔😜

Collapse
 
12944qwerty profile image
12944qwerty

Hmm, couldn't you just use the title attribute of a tag instead of the title tag? As far as I know, the attribute works perfectly fine.

So I just tested the undo-redo again.... and it works. Until I click the text box again, where it resets to what it just was.

I'm still confused as to what sticky keys do... Not sure if I skipped a part of the reading in the first version or something...

Thread Thread
 
grahamthedev profile image
GrahamTheDev

So the SVGs have a title - I will actually grab that and build a proper tooltip as there is a lot to consider such as it showing when a button is focused not just on hover (so that people who can only use a keyboard can read them too or people on touch devices. Unfortunately the title attribute won’t work for that.

Looks like a bug you found! Only 52 others to find and you found all the ones I know about 😜. Seriously though is good to know so I can look into it. Thanks!

Sticky keys is for one handed operation. So instead of pressing Ctrl + b you can press \ and THEN press b. It is a way of making the system more usable for people who only have use of one hand etc. Needs some work though as the \ key is useful for escaping characters and at the moment you can’t use it at all!

Collapse
 
siddharthshyniben profile image
Siddharth

Inserting extra text does mess up the undo tree, unless you use any of the deprecated APIs (document.execCommand) and hope they work™

Collapse
 
shahednasser profile image
Shahed Nasser

I didn't go through it all thoroughly but it looks nice! I suggest making it a chrome extension. I've created many extensions and can help out if you'd like (if this is an open-source project we can contribute to)

Collapse
 
grahamthedev profile image
GrahamTheDev

When i Get it to 90-95% then I will defo open source it and the help would be appreciated!

I do plan on making it an extension and as I have never made an extension being able to "pick someone's brain" when things inevitably don't go as planned would be great! thanks!

Collapse
 
shahednasser profile image
Shahed Nasser

Sure, let me know if you need any help! I’ve worked on both Chrome and Firefox extensions and I know them in and out pretty well.

 
siddharthshyniben profile image
Siddharth

Me too, I prefer keyboard shortcuts and stuff. You know what @inhuofficial , you could integrate the bookmarklet at the end of this post into your Bookmarklet for an improved writing experience!

Collapse
 
geekie profile image
Geekie

Why doesn't DEV have an official visual editor anyway? I get it that everyone here has no problem with coding, but still a visual editor would make posting much more efficient. Remembering and typing the markdown code cost a lot of brain powder and calories!

Collapse
 
grahamthedev profile image
GrahamTheDev

Don’t know to be honest, might be something to do with the forem model, might just be something they haven’t got to yet! A good question to ask with the #meta tag!

Collapse
 
madflows profile image
Folarin Lawal

H̸̢̢̦͓̖̜͕̺̥͙̖̺̜̞̘̠̜̉̏̍͗̒͊̃̃͒͒̌͊̿̏̆̑̒̊͘̚͜͜͝ͅą̵̼̬͚̩͕̣͇̱̘̪͍̹̙̯̣̯͎͉̪͔͇̆̈́́́̐̔́̿̋̆͒̆͊̇̓̆̅͗̋̂̉̊̑̅̿̇͋̕̕̚͜͠ĺ̴͍̰̳͉̔̅l̷͓̪̳͇͕̳̬̘͈̪̝̬̦̟̗͙͕̞͈̪̤̪̜̭̄̈́ơ̷̡̨̟͈̪̰̗͈̬̳̰̭̜̫̲̝̦̳̟̣̆͑̍͆̉̐͛́̂̎͐̓́̇̍̓̈̾̆̈́͊̿͋̾̓̅̓́̂͛͌̕͜͠ͅͅw̸̛̥͊͗͒͗̂̆̀͌͆̾̈́̔̾̾̉̈́͗̓͂̉̾̓̍͐̏̅̓̓́̇͑̚̕̚͘͘͝͝e̶͔̤̲̤̹̝̿͗̆̑̉̅͛̉͒̿̐̑͒́̎̊̂̀͊̚͠ͅe̵̡̢̛̤̝͔̻̟̞̲̳̪̟̜̟̬̥̩̙̺͓̗̘̳̟͔̪̤̬̠̗̮̩̯̰͚̩̠̱̪͆̋̂̑̂̆̀̅͋̽̾̓̋̃̆͆́̀͒̓͌̿̇́̉̍͛͐́̆̎͐̈́͗͘̚͜͠͝͝n̵̡̛̛̛̫̪͕̗̯̱̗͚̦͍͓͙̥͕͍̦̯̰̪̪̜͖͇͓̊͑͂̑̈̂͐̋̈̎̽͊̔̀̀́̅̅́̃̇̒͊̽͆̑̃̿͒́̍̓͘̚͘̚͝ ̷̧̢̧̢̛̬̠̗̰̺̞͉̘̺̱̲̖͙͍͎̞̖̯̞̝̲̣͉̳͍̼̤̜͉͉̖͓̿̉̈́̽͆̄̓́̄̾̊̅͐̓̓̈́̔̄͜͜͝͝͝;̴̧̧̜̺̲̳͖̼̳̤͎̝̳̥̲͖̱̠̝͖̻̠͂͋͆̓͛͋̐͋̐̐̈́́̆̆̍͆̿̀̔͂̄̔̊̽̂̉̎͗̊̎͊͆̓̆̍͐́̉̓̽̂̒̉͘̚̕͜͜͜͝ͅD̵̨̨̡̨̡̡̛̛͖̤̫̫̲͓̣̘̣̼̝̞̱̣̩̺̘̖̠̙͕̠̺̹̱͒̈̇̀̈͛͐̐͆̎͌̈́̋̀̀͛̉̃̎̒̌̍̊͜͜͠͝ͅ

Collapse
 
grahamthedev profile image
GrahamTheDev

I think you need to remove this one, leave the one on the halloween post but I guess this one is a mistake! 😋

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

I look forward to seeing what people who tried the first version think of the improvements (ignore the bugs....I said ignore the bugs 🤣🤣).

Collapse
 
12944qwerty profile image
12944qwerty

I can't remember what the first version looks like anymore :D
This version is absolutely great!

Collapse
 
posandu profile image
Posandu • Edited

So excellent Idea !! just improved my writing in dev.to !! Thank you 💖 And I can't believe you made it accessible !!

Collapse
 
siddharthshyniben profile image
Siddharth

Feature request: When adding an image, just insert a figcaption tag below it.

Collapse
 
andy profile image
Andy Zhao (he/him)

Really impressive work!! A WYSIWYG editor is super helpful, especially because not everyone is used to writing in Markdown.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Thanks, for me the main thing wasn't the markdown but more the liquid tags. Plus I still like being able to press CTRL + B to bold some text, it just feels nicer!

Hopefully I get to push the next version this week which will have side-by-side preview and editor, but I have to admit I decided to go the hard route and write a markdown parser to HTML converter (rather than just grab a good one off the shelf!) and it really is not as easy as you would think so it might be a couple of weeks! 🤣

 
grahamthedev profile image
GrahamTheDev

Thanks, did you get chance to play with it as feedback from someone “the the trenches” at DEV.to would be great!

Thread Thread
 
grahamthedev profile image
GrahamTheDev

In fact hang fire, I might be able to push part 3 out later this week and that has even more toys!

Collapse
 
grahamthedev profile image
GrahamTheDev

Well I wish I had known that before, I’ve hard wired them all in now lol!

I will go have a fiddle with that anyway as it might be super useful for other stuff! Thanks.

Collapse
 
khangnd profile image
Khang

This looks really nice, and the simplicity is just perfectly convenient.

Collapse
 
grahamthedev profile image
GrahamTheDev

Thanks, if there is anything you want to see adding or any improvements you think of just let me know!