Draft inspector widget

package.json

@@ -28,6 +28,7 @@
   "main": "./dist/main.js",
   "config": {},
   "dependencies": {
+    "@observablehq/inspector": "3.1.0",
     "automerge": "github:automerge/automerge#opaque-strings",
     "base64-js": "^1.3.1",
     "bs58": "^4.0.1",

src/renderer/components/Root.tsx

@@ -19,6 +19,7 @@ import './content-types/files'
 import './content-types/storage-peer'
 
 // other single-context components
+import './content-types/Inspector'
 import './content-types/TextContent'
 import './content-types/CodeContent'
 import './content-types/ThreadContent'

src/renderer/components/content-types/Inspector.css

@@ -0,0 +1,107 @@
+:root {
+  --syntax_normal: #1b1e23;
+  --syntax_comment: #a9b0bc;
+  --syntax_number: #20a5ba;
+  --syntax_keyword: #c30771;
+  --syntax_atom: #10a778;
+  --syntax_string: #008ec4;
+  --syntax_error: #ffbedc;
+  --syntax_unknown_variable: #838383;
+  --syntax_known_variable: #005f87;
+  --syntax_matchbracket: #20bbfc;
+  --syntax_key: #6636b4;
+  --mono_fonts: 82%/1.5 Menlo, Consolas, monospace;
+}
+
+.Inspector {
+  display: flex;
+  background-color: white;
+  width: 100%;
+  overflow: auto;
+  height: 100%;
+  padding: 1px 1px 0px 1px;
+}
+
+.observablehq--expanded,
+.observablehq--collapsed,
+.observablehq--function,
+.observablehq--import,
+.observablehq--string:before,
+.observablehq--string:after,
+.observablehq--gray {
+  color: var(--syntax_normal);
+}
+
+.observablehq--collapsed,
+.observablehq--inspect a {
+  cursor: pointer;
+}
+
+.observablehq--field {
+  text-indent: -1em;
+  margin-left: 1em;
+}
+
+.observablehq--empty {
+  color: var(--syntax_comment);
+}
+
+.observablehq--keyword,
+.observablehq--blue {
+  color: #3182bd;
+}
+
+.observablehq--forbidden,
+.observablehq--pink {
+  color: #e377c2;
+}
+
+.observablehq--orange {
+  color: #e6550d;
+}
+
+.observablehq--null,
+.observablehq--undefined,
+.observablehq--boolean {
+  color: var(--syntax_atom);
+}
+
+.observablehq--number,
+.observablehq--bigint,
+.observablehq--date,
+.observablehq--regexp,
+.observablehq--symbol,
+.observablehq--green {
+  color: var(--syntax_number);
+}
+
+.observablehq--index,
+.observablehq--key {
+  color: var(--syntax_key);
+}
+
+.observablehq--empty {
+  font-style: oblique;
+}
+
+.observablehq--string,
+.observablehq--purple {
+  color: var(--syntax_string);
+}
+
+.observablehq--error,
+.observablehq--red {
+  color: #e7040f;
+}
+
+.observablehq--inspect {
+  font: var(--mono_fonts);
+  overflow-x: auto;
+  display: block;
+  white-space: pre;
+}
+
+.observablehq--error .observablehq--inspect {
+  word-break: break-all;
+  white-space: pre-wrap;
+}

src/renderer/components/content-types/Inspector.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef, useMemo } from 'react'
+import { Handle } from 'hypermerge'
+
+import Automerge from 'automerge'
+import * as Observable from '@observablehq/inspector'
+import Delta from 'quill-delta'
+import ContentTypes from '../../ContentTypes'
+import { ContentProps } from '../Content'
+import { useDocument, useStaticCallback } from '../../Hooks'
+import Badge from '../Badge'
+import * as ContentData from '../../ContentData'
+// import '@observablehq/inspector/src/style.css'
+import './Inspector.css'
+
+interface InspectorDoc {}
+
+interface Props extends ContentProps {
+  uniquelySelected?: boolean
+}
+
+Inspector.minWidth = 6
+Inspector.minHeight = 2
+Inspector.defaultWidth = 12
+Inspector.defaultHeight = 18
+
+export default function Inspector(props: Props) {
+  const [doc, changeDoc] = useDocument<InspectorDoc>(props.hypermergeUrl)
+
+  const [ref] = useInspector({
+    doc,
+    change(fn) {
+      changeDoc((doc) => fn(doc))
+    },
+  })
+
+  return <div className="Inspector" ref={ref} onPaste={stopPropagation} />
+}
+
+function useInspector({ doc, change }): [React.Ref<HTMLDivElement>, Observable.Inspector | null] {
+  const ref = useRef<HTMLDivElement>(null)
+  const inspector = useRef<Observable.Inspector | null>(null)
+  // const makeChange = useStaticCallback(change)
+
+  useEffect(() => {
+    if (!ref.current) return () => {}
+
+    const container = ref.current
+    inspector.current = new Observable.Inspector(container)
+    inspector.current.pending()
+
+    return () => {
+      inspector.current = null
+    }
+  }, [ref.current]) // eslint-disable-line
+
+  useEffect(() => {
+    if (!inspector.current) return
+
+    inspector.current.fulfilled(doc)
+  }, [doc])
+
+  return [ref, inspector.current]
+}
+
+function stopPropagation(e: React.SyntheticEvent) {
+  e.stopPropagation()
+  e.nativeEvent.stopImmediatePropagation()
+}
+
+async function createFrom(
+  contentData: ContentData.ContentData,
+  handle: Handle<InspectorDoc>,
+  callback
+) {
+  handle.change((doc) => {})
+  callback()
+}
+
+function create({ text }, handle: Handle<InspectorDoc>, callback) {
+  handle.change((doc) => {})
+  callback()
+}
+
+function InspectorInList(props: ContentProps) {
+  const [doc] = useDocument<InspectorDoc>(props.hypermergeUrl)
+  function onDragStart(e: React.DragEvent) {
+    e.dataTransfer.setData('application/pushpin-url', props.url)
+  }
+
+  if (!doc) return null
+
+  return (
+    <div className="DocLink">
+      <span draggable onDragStart={onDragStart}>
+        <Badge icon="sticky-note" />
+      </span>
+      <div className="DocLink__title">{props.selfId}</div>
+    </div>
+  )
+}
+
+const supportsMimeType = (mimeType) => true
+
+ContentTypes.register({
+  type: 'inspect',
+  name: 'Inspector',
+  icon: 'cogs',
+  contexts: {
+    board: Inspector,
+    workspace: Inspector,
+    list: InspectorInList,
+  },
+  create,
+  createFrom,
+  supportsMimeType,
+})

yarn.lock

@@ -351,6 +351,13 @@
   dependencies:
     core-js "^2.5.7"
 
+"@observablehq/inspector@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@observablehq/inspector/-/inspector-3.1.0.tgz#4726f9aabc58aa410a4ba27adf89b180fa9a302b"
+  integrity sha512-DOx40q05QZdQnYpUsKch+8raWGmKSBh5DIAinQRoK+ij7Eq/PKpHJvNrrhThF4+2b/qViUhZGOwMLPhlC2qMzg==
+  dependencies:
+    esm "^3.0.84"
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@@ -3268,6 +3275,11 @@ eslint@^5.16.0:
     table "^5.2.3"
     text-table "^0.2.0"
 
+esm@^3.0.84:
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
+  integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
+
 espree@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.1.tgz#5d6526fa4fc7f0788a5cf75b15f30323e2f81f7a"