Use React in a new Markdown pane

Author: Vinnl

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": [
     "@babel/preset-env",
+    "@babel/preset-react",
     "@babel/preset-typescript"
   ],
 }

.eslintrc

@@ -14,7 +14,8 @@
     "project": "./tsconfig.json"
   },
   "plugins": [
-    "@typescript-eslint"
+    "@typescript-eslint",
+    "react"
   ],
   "rules": {
     "no-unused-vars": ["warn", {

index.js

@@ -47,6 +47,7 @@ if (typeof window !== 'undefined') {
 
 let register = panes.register
 
+register(require('./markdown/index.tsx').Pane)
 register(require('issue-pane'))
 register(require('contacts-pane'))
 

markdown/index.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import * as ReactDOM from 'react-dom'
+import { PaneDefinition, NewPaneOptions } from '../types'
+import $rdf from 'rdflib'
+import solidUi from 'solid-ui'
+import { saveMarkdown, loadMarkdown } from './service'
+import { View } from './view'
+
+const { icons, store } = solidUi
+
+export const Pane: PaneDefinition = {
+  icon: `${icons.iconBase}noun_79217.svg`,
+  name: 'MarkdownPane',
+  label: (subject) => subject.uri.endsWith('.md') ? 'Handle markdown file' : null,
+  mintNew: function (options) {
+    const newInstance = createFileName(options)
+    return saveMarkdown(store, newInstance.uri, '# This is your markdown file\n\nHere be stuff!')
+      .then(() => ({
+        ...options,
+        newInstance
+      }))
+      .catch((err: any) => {
+        console.error('Error creating new instance of markdown file', err)
+        return options
+      })
+  },
+  render: (subject) => {
+    const container = document.createElement('div')
+
+    loadMarkdown(store, subject.uri).then((markdown) => {
+      const view = (
+        <View
+          markdown={markdown}
+          onSave={(newMarkdown) => saveMarkdown(store, subject.uri, newMarkdown)}
+        />
+      )
+      ReactDOM.render(view, container)
+    })
+    return container
+  }
+}
+
+function createFileName (options: NewPaneOptions): $rdf.NamedNode {
+  let uri = options.newBase
+  if (uri.endsWith('/')) {
+    uri = uri.slice(0, -1) + '.md'
+  }
+  return $rdf.sym(uri)
+}

markdown/service.ts

@@ -0,0 +1,13 @@
+import { IndexedFormula } from 'rdflib'
+
+export function loadMarkdown (store: IndexedFormula, uri: string): Promise<string> {
+  return (store as any).fetcher.webOperation('GET', uri)
+    .then((response: any) => response.responseText)
+}
+
+export function saveMarkdown (store: IndexedFormula, uri: string, data: string): Promise<any> {
+  return (store as any).fetcher.webOperation('PUT', uri, {
+    data,
+    contentType: 'text/markdown; charset=UTF-8'
+  })
+}

markdown/view.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react'
+import Markdown from 'react-markdown'
+
+interface Props {
+  markdown: string;
+  onSave: (newMarkdown: string) => Promise<void>;
+}
+
+export const View: React.FC<Props> = (props) => {
+  const [phase, setPhase] = React.useState<'loading' | 'rendering' | 'editing'>('rendering')
+  const [rawText, setRawText] = React.useState(props.markdown)
+
+  function storeMarkdown () {
+    setPhase('loading')
+    props.onSave(rawText).then(() => {
+      setPhase('rendering')
+    })
+  }
+
+  if (phase === 'loading') {
+    return <section aria-busy={true}>Loading&hellip;</section>
+  }
+
+  if (phase === 'editing') {
+    return (
+      <section>
+        <form onSubmit={(e) => { e.preventDefault(); storeMarkdown() }}>
+          <textarea
+            onChange={(e) => { setRawText(e.target.value) }}
+            defaultValue={rawText}/>
+          <button type="submit">RENDER</button>,
+        </form>
+      </section>
+    )
+  }
+
+  return (
+    <section>
+      <form onSubmit={(event) => { event.preventDefault(); setPhase('editing') }}>
+        <Markdown source={rawText}/>
+        <button type="submit">EDIT</button>
+      </form>
+    </section>
+  )
+}