Code block display in details tag

[james-geiger]

Fixes #781. Use codemirror display/autoReload addon to watch for state changes and resize the codemirror blocks if they were hidden when the DOM was loaded.

This is done by polling every 250 milliseconds (you can pass a value like {delay: 500} as the option value to configure this).

codemirror docs

I've set this to poll every 50ms, which was a bit smoother transition. A 1ms poll, just for fun, produced the best result but is likely to cause performance issues.

[ssddanbrown]

Thanks for offering this @james-geiger and sorry for my really late response.

To be honest I'd like to avoid polling unless it's really necessary, just because polling UI elements can build up and slow the UI quite quickly or have unintended effects.

Looks like a details element fires a toggle event when opened. Could we instead watch for that within page-content then manually call a refresh() on any codemirror instances within? The toggle event doesn't appear to bubble but can still do this with a single event listener and the useCapture parameter.

[ssddanbrown]

This has now been addressed in 5404f22 so will therefore close this.

Thanks @james-geiger for your original PR here.