davidmerfield / Stroke

A text editor for first drafts
https://stroke.lllllllllllllllll.com/
Creative Commons Zero v1.0 Universal
161 stars 7 forks source link

Possible to make delete act properly? #20

Open nitinthewiz opened 8 years ago

nitinthewiz commented 8 years ago

So, I've been trying to code this up myself and have hit a series of walls.

Essentially, pressing delete should start striking out characters previously written.

Problems I faced -

  1. Lack of knowledge of what the heck are dom nodes.
  2. If no text is selected, window.getSelection() returns a non-Range object. This is what I considered my starting point. If I could return a range object by creating it to include a node that represents the last unstriken character, the rest of the code would work as is.
  3. Couldn't find a way to create text nodes instead of extracting them from the selection.
  4. Couldn't find a way to programmatically select text on a page. There are solutions on StackOverflow and elsewhere to override either the selected text or copied text but not to programmatically select text in a contenteditable section node.
  5. I found this amazing thing but it works only with input tags.
  6. I found this but it only works with div.

I have been hacking away at this script for a while now and have nothing to show for it. I would really, really like if you could please try to implement this because it's a really neat feature to have, instead of having to select text and then strike it through.

But other than that, thank you so much for this awesome and amazingly smart tool... :+1: :smiley:

davidmerfield commented 8 years ago

I don't plan to add this feature since it's confusing in a few common situations. What if the last character(s) was already struck out? What if the last character was a newline or a space?

Anyway, if I did want to implement this, I'd insert some logic in this block to wrap the previously typed character in a 'struck out' span. You'll need to track how many times the delete key has been pressed in succession, and increase the number of characters wrapped inside the 'struck out' span as needed.

It seems like you know all the words you'll need to google to build this feature. Best of luck, and feel free to send me a link to your code.

Regarding your questions:

  1. MDN has a few articles which helped me.
  2. I don't think you should be using selections to implement this features. Ranges, absolutely!
  3. Is this what you need? 4, 5, 6, I don't believe you'll need to programmatically select text to solve this problem. You'll just need to create a range and wrap it in a new span tag.