search

harvard-lil / h2o

H2O is a web app for creating and reading open educational resources, primarily in the legal field
https://opencasebook.org
GNU Affero General Public License v3.0
37 stars 30 forks source link

Attempting to highlight across an inline image or elision throws a JS exception #1771

Closed lizadaly closed 2 years ago

lizadaly commented 2 years ago

I wouldn't have thought to try this except that the code seems to want to handle the case where a highlight spans an image boundary:

An exception will be thrown in the JS console and Vue will stop processing until the page is refreshed.

I would expect at least that no exception would be thrown, even if the resulting highlight is somewhat malformed.

vue.esm.js?a026:628 [Vue warn]: Error in render: "TypeError: Cannot read properties of null (reading 'textContent')"

found in

---> <TheAnnotator> at frontend/components/TheAnnotator.vue
       <TheResource> at frontend/components/TheResource.vue
         <Root>
warn @ vue.esm.js?a026:628
logError @ vue.esm.js?a026:1902
globalHandleError @ vue.esm.js?a026:1897
handleError @ vue.esm.js?a026:1857
Vue._render @ vue.esm.js?a026:3580
updateComponent @ vue.esm.js?a026:4090
get @ vue.esm.js?a026:4504
run @ vue.esm.js?a026:4579
flushSchedulerQueue @ vue.esm.js?a026:4335
eval @ vue.esm.js?a026:1998
flushCallbacks @ vue.esm.js?a026:1924
Promise.then (async)
timerFunc @ vue.esm.js?a026:1951
nextTick @ vue.esm.js?a026:2008
queueWatcher @ vue.esm.js?a026:4427
update @ vue.esm.js?a026:4569
notify @ vue.esm.js?a026:739
reactiveSetter @ vue.esm.js?a026:1064
proxySetter @ vue.esm.js?a026:4653
selectionchange @ TheAnnotator.vue?ef4c:133
selectionchangeHandler @ TheResource.vue?fb00:51
eval @ selectionchange.js?4e4a:16
vue.esm.js?a026:1906 TypeError: Cannot read properties of null (reading 'textContent')
    at getLength (html_helpers.js?9526:51:1)
    at getOffsetWithinParent (html_helpers.js?9526:74:1)
    at eval (TheAnnotator.vue?ef4c:98:1)
    at Array.map (<anonymous>)
    at VueComponent.offsets (TheAnnotator.vue?ef4c:98:1)
    at Watcher.get (vue.esm.js?a026:4504:1)
    at Watcher.evaluate (vue.esm.js?a026:4606:1)
    at VueComponent.computedGetter [as offsets] (vue.esm.js?a026:4860:1)
    at Object.get (vue.esm.js?a026:2113:1)
    at Proxy.render (TheAnnotator.vue?4360:11:1)
    at Vue._render (vue.esm.js?a026:3578:1)
    at VueComponent.updateComponent (vue.esm.js?a026:4090:1)
    at Watcher.get (vue.esm.js?a026:4504:1)
    at Watcher.run (vue.esm.js?a026:4579:1)
    at flushSchedulerQueue (vue.esm.js?a026:4335:1)
    at Array.eval (vue.esm.js?a026:1998:1)

There are similar issues in Sentry but I think they are slightly different cases of trying to highlight across non-text nodes.

lizadaly commented 2 years ago

Same thing happens if you drag the highlighter over an elision.

sentry-io[bot] commented 2 years ago

Sentry issue: H2O-K