"next" playground issues

[davidlehn]

Issues found while testing "next" playground using preview from #878.

• Click on icon in empty document URL, context URL, or frame URL field, shows Unexpected token '<', "<!DOCTYPE "... is not valid JSON error.
• Doesn't start with empty input.
  • The main branch loads with {} input.
  • The add-permalink branch loads with null as input (probably a bug).
  • I think it should start with an empty box. People will either type or paste in there immediately, and having to select or remove anything is an extra step. I see it does complain about end of JSON input when empty. It should have special handling to clear things and show no errors when in an initial empty state.
• Are the console nearest property name, JsonText, etc messages useful? Or is that leftover debugging?
• Safe mode option doesn't show that false is the default.
  • Current text has "Default (False)"
• Safe mode not working with option or in canonized mode.
  • https://json-ld.org/playground/#startTab=tab-canonized&json-ld=%7B%22x%22%3Atrue%7D
  • https://add-permalink.json-ld-org.pages.dev/playground/next/#json-ld=%7B%22x%22%3Atrue%7D&startTab=tab-canonized
  • For options, "Default" seems to turn safe mode off, "False" and "True" turn it on.
  • It's not on by default for Canonized tab and should be.
• No safe mode feedback.
  • The error text only says Safe mode validation error.. Current code shows a (scary) JSON error, prints the error to the console, and has a note to look there. That's not ideal, and needs work, but saying nothing and having no access to the error provides no feedback on what could be wrong. This is an important feature for me.
• Table output should use the fomantic compact class.
  • I think the use case here is better served with more dense data display.
• CBOR-LD "Compression" label display.
  • Due to the box width, it's displayed as "Compre...", with no hover text or way to see what it says other than with dev tools. That confused me.
• Compact and Flattened context handling.
  • Current code copies over context (I think?) to New Context pane.
  • New code shows {} but is using context of input. Same if {} entered manually.
  • Can the literal empty context of {} be used?
• Compact, Flattened, Framed side pane offset.
  • The right side context/frame pane is offset up from the input pane both on top and bottom.
• Output scrolling behavior.
  • For an example like "Place", the Expanded output is long. The outer box has a horizontal scrollbar that has a char or two scroll amount. But you need to scroll the box to the bottom to see another scrollbar for the actual output content in order to see long URLs and such.
  • Similar odd issue with extra inner scrollbar for N-Quads and Canonized. Also odd seeing empty container box space in those cases, but fine.
• No Expanded tab icon. Name typo: s/expanded/expand/.
• Base and option handling.
  • https://json-ld.org/playground/#startTab=tab-expanded&json-ld=%7B%22%40id%22%3A%22%22%2C%22ex%3Akey%22%3A%22value%22%7D
  • https://add-permalink.json-ld-org.pages.dev/playground/next/#json-ld=%7B%22%40id%22%3A%22%22%2C%22ex%3Akey%22%3A%22value%22%7D&startTab=tab-expanded
  • Old makes id "", new is "./"? Are these different versions of jsonld.js?
  • If you set Base in Options, old will use it, new will use the literal string custom no matter the field text.
• Please test the other Options, I assume the same pattern for all those got broken somehow.