Built more upon markdown component

Author: megoth

markdown/index.tsx

@@ -1,13 +1,13 @@
-import * as Surplus from 'surplus'
 import { NewPaneOptions, PaneDefinition } from '../types'
 import solidUi from 'solid-ui'
 import { NamedNode, sym } from 'rdflib'
+import { MarkdownController } from './markdown.controller'
+import { MarkdownView } from './markdown.view'
 
-const { S } = Surplus
 const { icons, store } = solidUi
 
 export const Pane: PaneDefinition = {
-  icon: `${icons.iconBase}noun_15177.svg`,
+  icon: `${icons.iconBase}noun_79217.svg`,
   name: 'MarkdownPane',
   label: (subject: NamedNode) => subject.uri.endsWith('.md') ? 'Handle markdown file' : null,
   mintNew: function (options: NewPaneOptions) {
@@ -24,18 +24,9 @@ export const Pane: PaneDefinition = {
         console.error('Error creating new instance of markdown file', err)
       })
   },
-  render: () => {
-    let counter = 0
-    let counterData = S.data(counter)
-    const incr = () => {
-      counter++
-      counterData(counter)
-      console.log(counter, counterData())
-    }
-    return <div>
-      test --- <span>{counterData}</span>
-      <button onClick={incr}>Increment counter</button>
-    </div>
+  render: (subject: NamedNode) => {
+    const controller = new MarkdownController(subject.uri)
+    return MarkdownView(controller)
   }
 }
 

markdown/markdown.controller.ts

@@ -0,0 +1,52 @@
+import solidUi from 'solid-ui'
+import { S } from 'surplus'
+import { DataSignal } from 's-js/src/S'
+
+const { store } = solidUi
+
+export enum STATE {
+  'LOADING',
+  'RENDERING',
+  'EDITING'
+}
+
+export class MarkdownController {
+  public state: DataSignal<STATE>
+  public rawText: DataSignal<string>
+
+  // public renderedText: DataSignal<string>
+
+  constructor (private subjectUri: string) {
+    this.state = S.value(STATE.LOADING)
+    this.rawText = S.value('')
+    // this.renderedText = S.value('')
+
+    store.fetcher.webOperation('GET', subjectUri)
+      .then((response: any) => {
+        this.rawText(response.responseText)
+        // this.renderedText(marked(response.responseText))
+        this.state(STATE.RENDERING)
+      })
+  }
+
+  toggle () {
+    const wasEditing = this.state() === STATE.EDITING
+    if (wasEditing) {
+      this.state(STATE.LOADING)
+      return MarkdownController.save(this.subjectUri, this.rawText())
+        .then(() => this.state(STATE.RENDERING))
+    }
+    this.state(STATE.EDITING)
+  }
+
+  update (fieldName: string): void {
+    console.log(fieldName, this)
+  }
+
+  static save (uri: string, content: string): Promise<any> {
+    return store.fetcher.webOperation('PUT', uri, {
+      data: content,
+      contentType: 'text/markdown; charset=UTF-8'
+    })
+  }
+}

markdown/markdown.view.tsx

@@ -0,0 +1,25 @@
+import { MarkdownController, STATE } from './markdown.controller'
+import * as Surplus from 'surplus'
+import data from 'surplus-mixin-data'
+import marked from 'marked'
+
+const { S } = Surplus
+
+export const MarkdownView = (controller: MarkdownController) =>
+  <section>
+    {controller.state() === STATE.LOADING ? 'LOADING' : null}
+    {controller.state() === STATE.RENDERING
+      ? <div>
+        <button onClick={() => controller.toggle()}>EDIT</button>
+        <div fn={(el: HTMLElement) => {
+          el.innerHTML = marked(controller.rawText())
+        }}/>
+      </div>
+      : null}
+    {controller.state() === STATE.EDITING
+      ? <div>
+        <button onClick={() => controller.toggle()}>RENDER</button>
+        <textarea width='100%' rows={20} fn={data(controller.rawText)}>{controller.rawText}</textarea>
+      </div>
+      : null}
+  </section>

package-lock.json

@@ -53,6 +53,7 @@
     "contacts-pane": "^1.0.3",
     "folder-pane": "^1.0.4",
     "issue-pane": "^1.0.4",
+    "marked": "^0.6.2",
     "meeting-pane": "^1.0.4",
     "mime-types": "^2.1.24",
     "pane-registry": "^1.0.4",
@@ -61,7 +62,9 @@
     "solid-namespace": "^0.2.0",
     "solid-ui": ">=0.11.5",
     "source-pane": "^1.0.3",
-    "surplus": "^0.5.3"
+    "surplus": "^0.5.3",
+    "surplus-mixin-data": "^0.5.0",
+    "surplus-mixin-on": "^0.5.0"
   },
   "dependenciesBackup": {
     "@solid/better-simple-slideshow": "^0.1.0",

package.json

@@ -0,0 +1,3 @@
+declare module 'marked' {
+  export default function parse (src: string, opts?: any, cb?: Function): string
+}