Have a richer body editor - Githubissues

jkomoros / card-web

The web app behind thecompendium.cards

Apache License 2.0

56 stars 8 forks source link

Have a richer body editor #55

Open jkomoros opened 5 years ago

jkomoros commented 5 years ago

Ideally it would be a basic WSIWYG (but content editable is such a pain...)

Have a normalizeCard(body) that takes the card attributes provided and normalizes them to the id (not the name)

jkomoros commented 5 years ago

Since the supported subset of HTML is so limited, various options might even work... for example, a contenteditable (allowing selection of the underlying slide text) with all events overridden, and then figure out given a selection where in the underlying HTML we are

jkomoros commented 5 years ago

might be able to use the selection API combined with key handlers and node tests to figure out what's selected

jkomoros commented 5 years ago

[x] Allow adding a link to currently selected text
[x] When committing edit rebind content editable
[x] when you edit a slide with cards links, on the first modification from contenteditable, the content has the modified links in it. Either do a card-link element to skip rewriting, or undo the transformation on those nodes.
[x] normalizeHTML should handle badly formed HTML by showing an error (try/catch around section.innerHTML) and forbidding saving.
[x] If we do any transformations on body text while you're typing in the direct edit box, it pushes selection caret to end of text box. Only process live if it comes from contentEditable, and only process if not content editable on commit?
[x] Allow a way to refresh the body content of content editable, e.g. after a link is done, that retains selection, so that we can replace the with the

[x] Unlink or modify a link. This is actually non trivial because we rewrite the link to be a card-link, which contentEditable doesn't understand. ... Maybe we'll need a normalizeHTMLForContentEditable that undoes things like card-link back to a

[ ] Print cheat sheet of formatting commands

[ ] Add a normalize button that normalizes the body content within the box (automatically done when saved)

[x] Insert tabs before <li> (and make sure all items in ul are in <li> (except for first bit)

[x] Remove line breaks in all top-level elements that are not <ul>

[x] All top-level text should be wrapped in a <p>

[x] cmd-shift-k (also tracked in #12) doesn't work because the focus selection is lost when the other things happen. In general the fact that document.execCommand is fired in card-editor and operates at .a distance on an editable object farther away is very weird. The editor shoudl be given a handle to the actual content editable element (does execCommand work on an element basis, or only on document?). this.shadowRoot.getSelection() returns the live selection inside, but selectionchange doesn't appear to fire. The solution is that when we start that action we pass this.shadowRoot.getSelection().getRangeAt(), and then the document later can reselect that

[x] Since we convert links to normal non-card links for contentEditable (and since ones added via content-editable) don't cancel link navigations, if you try to select text to unlink then it just navigates. Appears to have broken in fac104ccbd60de44ece598eba0b444e7de547ad8

[ ] All a links shoudl be cursor:no-pointer or whatever in editable mode

[ ] When you createLink, it should default to the href of the current link

[ ] Allow inserting links when the text is selected in the text area too.

[x] Bug: if the last thing is a link and you hit enter, then it duplicates the card link

[x] maintence task to run normalizeHTML on every content body once (backup before doing it, then re-overwrite data in staging)

[ ] If you make a section indented and then undo there's a (mostly) no op span in the output (spans should always be removed anyway)

[x] links are styled correctly in the output in preview

[ ] Ideally after doing a createLink we'd reload the HTML to get the normalized version of it (keeping selection state). This would allow inserted links to be card-links, and get right styling, immediately.

[x] Remove fromContentEditable from editor.normalizeBodyHTML if we no longer use it

[x] Allow making the currently selected text a list

[x] Allow making currently selected text bold

[x] Allow making currently selected text italic

[ ] Allow making currently text a double-indented list

[ ] Allow making currently selected text small (decreaseFontSize, and reverse should be increaseFontSize, but removing <big> like we do for <br>

[x] link uses the output of the quick-find panel

[ ] Allow contenteditable updating of slide.title and slide.subtitle as well

[ ] Add tests for transforming HTML since it will be such finicky logic