Initial Research on textAngular

[GoogleCodeExporter]

In as much detail as possible, please describe what you would like to see.

We currently use jWysiwyg as our rich-text editor (RTE). Unfortunately, it has 
several issues with handling things like IE 11 and copy/paste, and is not being 
actively maintained. We should investigate replacing jWysiwyg with other RTEs; 
textAngular seems like it might be a good one.

This issue tracks our requirements for such an RTE. What follows is a partial 
list gleaned from issues encountered so far. Note that not all of these are 
bugs with jWysiwyg, but they are things we should check for when choosing a new 
RTE. I will mark the corresponding issues as duplicates of this one, since they 
no longer need to be fixed independently.

=========================================================

* Issue 69: The tab key should move focus away from the RTE, otherwise 
keyboard-only users get trapped within it.
* Issue 95: The RTE should be extensible w.r.t. text formatting options.
* Issue 95 (subpoint): Copy/pasting content into the RTE should strip 
formatting.
* Issue 127: The RTE should auto-expand as more content is added to it.
* Issue 133: Non-interactive widgets should be copy/pasted correctly.
* Issue 253: The RTE should work with IE 11.
* Issue 319: Undo/redo buttons should be grayed out when not usable.
* Issue 320: Code formatting in the RTE should start after clicking the "code 
snippet" button.
* Issue 422: The RTE cursor should be reset to the correct place after adding a 
noninteractive widget.
* The 'view mode' for noninteractive widgets should be arbitrarily customizable 
and not just limited to tiny icons.
* RTE content should be auto-sanitized in the frontend. Currently it is 
sanitized in the backend but this means that the content may change 'under' the 
user. (Though this may be ok as it should only occur in cases where the user is 
doing undesirable things.)
* The (stripped-down) RTE should be able to double as a unicode editor with 
parameters.

=========================================================

Amit, Jacob -- please add to this issue any information you think I've missed 
above. Thanks!

Original issue reported on code.google.com by s...@seanlip.org on 19 Nov 2014 at 2:01

[GoogleCodeExporter]

Issue 69 has been merged into this issue.

Original comment by s...@seanlip.org on 19 Nov 2014 at 2:02

[GoogleCodeExporter]

Issue 95 has been merged into this issue.

Original comment by s...@seanlip.org on 19 Nov 2014 at 2:02

[GoogleCodeExporter]

Issue 127 has been merged into this issue.

Original comment by s...@seanlip.org on 19 Nov 2014 at 2:02

[GoogleCodeExporter]

Issue 133 has been merged into this issue.

Original comment by s...@seanlip.org on 19 Nov 2014 at 2:02

[GoogleCodeExporter]

Issue 253 has been merged into this issue.

Original comment by s...@seanlip.org on 19 Nov 2014 at 2:03

[GoogleCodeExporter]

Issue 319 has been merged into this issue.

Original comment by s...@seanlip.org on 19 Nov 2014 at 2:04

[GoogleCodeExporter]

Issue 320 has been merged into this issue.

Original comment by s...@seanlip.org on 19 Nov 2014 at 2:04

[GoogleCodeExporter]

Issue 422 has been merged into this issue.

Original comment by s...@seanlip.org on 19 Nov 2014 at 2:04

[GoogleCodeExporter]

Original comment by s...@seanlip.org on 19 Nov 2014 at 2:12

[GoogleCodeExporter]

Another requirement:

- if you type a lot into the current RTE, sometimes it doesn't register the 
last part of the input, leading you to lose some of what you've written. It's 
not clear what exactly is causing this, but perhaps we need to add some 
debouncing functionality.

Original comment by s...@google.com on 19 Nov 2014 at 2:17

[GoogleCodeExporter]

Issue 253 has been merged into this issue.

Original comment by s...@seanlip.org on 20 Nov 2014 at 2:23

[GoogleCodeExporter]

Original comment by s...@seanlip.org on 20 Nov 2014 at 2:25

[GoogleCodeExporter]

A few others (from old release testing docs):

- For noninteractive widgets (collapsible, tabs, etc.) it might be nice to have 
a dropdown instead of having lots of images in the toolbar. This also makes it 
more extensible (since adding a new widget won't change the toolbar layout 
significantly). It doesn't look as though jWysiwyg supports this.
- It is not apparent from within the editor whether a piece of text is a code 
snippet.
- The hyperlink widget should allow people to display text that is different 
from the url.
- The table widget should make a blank table, rather than one filled with 
"lorem ipsum".

Original comment by s...@seanlip.org on 1 Dec 2014 at 2:41

[GoogleCodeExporter]

Also merging issue 105: the edit interface should resemble the final view 
interface as much as possible.

Original comment by s...@seanlip.org on 1 Dec 2014 at 3:39

[GoogleCodeExporter]

Issue 105 has been merged into this issue.

Original comment by s...@seanlip.org on 1 Dec 2014 at 3:39

[GoogleCodeExporter]

And, another:

- It should be possible to easily customize the noninteractive widgets that 
appear in the rich-text editor's toolbar. For example, for multiple-choice 
options, we don't need to allow things like the collapsible and hint tabs 
options, and we probably don't want hint tabs nested inside hint tabs.

Original comment by s...@seanlip.org on 1 Dec 2014 at 6:04

[GoogleCodeExporter]

Original comment by s...@seanlip.org on 2 Dec 2014 at 6:20

[GoogleCodeExporter]

After testing textAngular on my own machine (outside of Oppia) here are some 
initial findings:

- Tab key moves focus out of RTE
- Formatting is stripped when copying/pasting
- RTE auto-expands with content
- Works with IE11 (tested via Windows Remote Desktop)

Toolbar extensibility and dropdowns do not seem to be supported out of the box, 
and will have to be researched. 

Overall it looks pretty promising.

Original comment by AYZh...@gmail.com on 5 Dec 2014 at 12:43

• Changed title: Initial Research on textAngular
• Changed state: Accepted

[GoogleCodeExporter]

This is great to hear. Thanks, Allan!

I'd say the most important thing to look into next, by far, is extensibility -- 
in particular:
  - how the creation of 'noninteractive widgets' (image, video, collapsible, etc.) would work
  - whether the thing that represents these widgets in 'edit mode' could look as close as possible to its display in the learner view (as opposed to the current tiddly icons). Perhaps like this?

        http://madebymany.github.io/sir-trevor-js/example.html

    (Try adding a video.) Though this particular version feels a bit too 'blocky'; it would be nice if the video could be inserted inline.
  - whether these widgets get copy/pasted correctly.

To this end, maybe a good next step would be writing a custom widget (e.g. 
video) using textAngular. If we can get one example to work as we want it to, 
that's a good sign that the others should be possible. What do you think of 
this plan?

Original comment by s...@seanlip.org on 5 Dec 2014 at 3:42

[GoogleCodeExporter]

I think this is a good plan, and I will begin work on it as soon as I can. 
Though it is unlikely that I will make significant progress on this until after 
Dec 20th due to finals season.

Original comment by AYZh...@gmail.com on 6 Dec 2014 at 3:51

[GoogleCodeExporter]

Hi Allan, happy new year! Just checking: have you made any progress on this?

Original comment by s...@seanlip.org on 2 Jan 2015 at 10:31

[GoogleCodeExporter]

Hi Sean, happy new years to you too! 

With regards to the things discussed in #19, non-interactive widgets look as 
they should in the editor. Also, they can be copied/pasted between editor 
boxes. However, embedded videos are replaced by an image placeholder while in 
the edit window (the placeholders are of an equal size, not the small icons 
used in jWysiwyg), I was wondering whether this is OK? 

I have not yet begun work on actually integrating textAngular yet, but, 
assuming the video placeholder issue is not a big deal, I can begin to work on 
this immediately.

Original comment by AYZh...@gmail.com on 4 Jan 2015 at 2:21

[GoogleCodeExporter]

Thanks Allan, that's good news!

Would you mind attaching a screenshot of what the placeholder looks like? I'd 
say that it's worth making the change anyway even if it can't be fully wysiwyg, 
because of all the other benefits. So, going ahead sounds like a good idea.

Just so you know, all the relevant files should be in 
core/templates/dev/head/forms. There's also a test file: 
form_builder_tests.html. To view it, a little hack is necessary: go to e.g. 
core/controllers/gallery.py and, under GalleryPage, render the template 
'forms/form_builder_tests.html' instead of 'galleries/gallery.html'. Then going 
to /gallery should take you to the test page. (Of course, please revert this 
before making any commits to the code.google.com server.)

The relevant parts to edit are the richTextEditor directive in formBuilder.js, 
which is used by the schemaBasedEditor/html template in 
form_builder_templates.html.

Hope this is useful, and please don't hesitate to let me know if you have any 
questions about what the code in those files is doing! Thanks again.

Original comment by s...@seanlip.org on 4 Jan 2015 at 4:15

[GoogleCodeExporter]

Hi, thanks for all the useful info and help.

I attached a screenshot of how the image placeholder looks, with the editor 
view and rendered output side-by-side on a webpage.

Original comment by AYZh...@gmail.com on 5 Jan 2015 at 3:59

Attachments:

• videoPlaceholder.png

[GoogleCodeExporter]

That looks quite nice, actually! One thought -- is there a corresponding 
display for math formulae, links and other 'inline' elements?

Also, another thought -- instead of overwriting the richTextEditor in your 
branch, I suggest instead creating a new directive, like textAngularRte or 
something. Then we can slowly change the <rich-text-editor> tags into 
<text-angular-rte> tags, rather than being forced to make the transition all at 
once. This could be useful if we want to start e.g. allowing only certain 
widgets to be used for different RTEs in different places (e.g. for multiple 
choice options, we may want to forbid tabs and collapsibles).

Original comment by s...@seanlip.org on 5 Jan 2015 at 4:33

[GoogleCodeExporter]

Good idea, I'll leave the richTextEditor directive in place and make a separate 
text-angular directive.

With regards to your first thought, I assume you are asking about the display 
that pops up under the video? There are corresponding displays for things like 
links (see attached) and images.

Original comment by AYZh...@gmail.com on 5 Jan 2015 at 6:31

Attachments:

• links.png

[GoogleCodeExporter]

Ah, OK -- I was more thinking about something that can be displayed in an 
'inline' rather than 'block' fashion, since it'd be weird to break the text for 
every tiny math formula. From your example with links, it looks as though that 
should be possible, which is great!

Btw, I should also mention that the 'proper' way to get the textangular library 
is to add a few lines in scripts/install_third_party.py. This Python script 
runs when start.sh is invoked and it downloads all the dependencies, meaning we 
don't have to ship a lot of extra dependency files within the oppia codebase. 
You can then include a reference to it in 
core/templates/dev/head/footer_js_libs.html (ultimately, it would replace the 
/jwysiwyg-496497 lines).

Original comment by s...@seanlip.org on 5 Jan 2015 at 6:38