Handle long URL strings in annotations with scrolling and generated hyperlinks in reading mode; fixes #1926

[lizadaly]

In both the regular and reading mode UIs, long hyperlinks can break out of their containers.

Ideally authors would have creates these as the hyperlink type, but currently in the platform adding rich/HTML content in author notes is not supported; they are always plain text.

In both the platform UI and reading mode, this will force scrolling inside the annotation if the browser could not line-break it.

In reading mode only, this will also transform plain text URLs into hyperlinked ones. This is harder to do in Vue because Vue enforces not modifying the DOM in templates. Since this case is rare overall, this only does the DOM transformation in reading mode.

Before

Platform UI—the first link does break because the browser can wrap on the hyphen:

After

Platform UI—the bottom one will scroll:

Reading mode—the bottom scrolls and the links are clickable:

[codecov-commenter]

Codecov Report

Merging #1929 (595c556) into develop (8794190) will decrease coverage by 0.02%. The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop    #1929      +/-   ##
===========================================
- Coverage    76.94%   76.93%   -0.02%     
===========================================
  Files           59       59              
  Lines         6810     6810              
===========================================
- Hits          5240     5239       -1     
- Misses        1570     1571       +1     

see 1 file with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[rebeccacremona]

if the browser could not line-break it

I am really amused that we have never spotted this in H2O before!!

Love the scrolling, but just throwing it out there: this might be a good time for word-wrap: break-word... if we suppose that long words like "supercalifragilisticexpialidocious" will be rare in notes...

before

after