Feature/prosemirror

applet/src/cross-applet-main.ts

@@ -67,7 +67,8 @@ export class CrossAppletMain extends LitElement {
                     >
                       <syn-context
                         .store=${new SynStore(
-                          new SynClient(appletClient, "notebooks")
+                          new SynClient(appletClient, "notebooks"),
+                          true
                         )}
                       >
                         <div class="row title" style="align-items: center">

applet/src/index.ts

@@ -23,6 +23,7 @@ import {
 
 import "@lightningrodlabs/notebooks/dist/elements/all-notes.js";
 import "@lightningrodlabs/notebooks/dist/elements/column-header.js";
+import "@lightningrodlabs/notebooks/dist/elements/richtext-note.js";
 import "@lightningrodlabs/notebooks/dist/elements/markdown-note.js";
 import "@holochain-open-dev/profiles/dist/elements/profiles-context.js";
 import "@theweave/api/dist/elements/we-services-context.js";
@@ -50,7 +51,7 @@ function wrapAppletView(
   weServices: WeServices,
   innerTemplate: TemplateResult
 ): TemplateResult {
-  const synStore = new SynStore(new SynClient(client, "notebooks"));
+  const synStore = new SynStore(new SynClient(client, "notebooks"), true);
   return html`
     <attachments-context
       .store=${new AttachmentsStore(new AttachmentsClient(client, "notebooks"))}
@@ -208,7 +209,7 @@ const applet: WeApplet = {
       label: msg("Note"),
       icon_src: wrapPathInSvg(mdiNotebook),
       async create(attachToHrl: Hrl) {
-        const synStore = new SynStore(new SynClient(appletClient, "notebooks"));
+        const synStore = new SynStore(new SynClient(appletClient, "notebooks"), true);
 
         const note = await createNote(synStore, msg(`Note`), attachToHrl, undefined);
         const appInfo = await appletClient.appInfo();

package.json

@@ -25,8 +25,8 @@
     "weave-hash":  "weave hash-webhapp 0.6.0 ./workdir/notebooks.webhapp"
   },
   "devDependencies": {
-    "@theweave/cli": "0.15.2",
-    "@holochain/hc-spin": "^0.600.0-dev.0",
+    "@theweave/cli": "0.15.5",
+    "@holochain/hc-spin": "^0.600.0",
     "@holochain-playground/cli": "^0.300.1",
     "bestzip": "^2.2.0",
     "concurrently": "^6.2.1",

ui/index.html

@@ -22,6 +22,60 @@
         display: flex;
       }
 
+      .ProseMirror-prompt {
+        background: white;
+        padding: 5px 10px 5px 15px;
+        border: 1px solid silver;
+        position: fixed;
+        border-radius: 3px;
+        z-index: 11;
+        box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
+      }
+
+      .ProseMirror-prompt h5 {
+        margin: 0;
+        font-weight: normal;
+        font-size: 100%;
+        color: #444;
+      }
+
+      .ProseMirror-prompt input[type="text"],
+      .ProseMirror-prompt textarea {
+        background: #eee;
+        border: none;
+        outline: none;
+      }
+
+      .ProseMirror-prompt input[type="text"] {
+        padding: 0 4px;
+      }
+
+      .ProseMirror-prompt-close {
+        position: absolute;
+        left: 2px; top: 1px;
+        color: #666;
+        border: none; background: transparent; padding: 0;
+      }
+
+      .ProseMirror-prompt-close:after {
+        content: "✕";
+        font-size: 12px;
+      }
+
+      .ProseMirror-invalid {
+        background: #ffc;
+        border: 1px solid #cc7;
+        border-radius: 4px;
+        padding: 5px 10px;
+        position: absolute;
+        min-width: 10em;
+      }
+
+      .ProseMirror-prompt-buttons {
+        margin-top: 5px;
+        text-align: center
+      }
+
       :root {
         --mdc-theme-primary: #7b1fa2;
         --mdc-theme-secondary: #ff5722;

ui/package.json

@@ -3,7 +3,7 @@
   "description": "Notebooks UI",
   "license": "MIT",
   "author": "dev@holochain.org",
-  "version": "0.6.1",
+  "version": "0.6.6",
   "dnaVersion": "0.6.0",
   "scripts": {
     "start": "vite --port $UI_PORT --clearScreen false",
@@ -13,13 +13,13 @@
     "format": "eslint --ext .ts,.html . --fix && prettier \"**/*.ts\" --write"
   },
   "dependencies": {
-    "@holochain-open-dev/elements": "^0.600.0-dev.0",
-    "@holochain-open-dev/profiles": "^0.600.0-dev.2",
-    "@holochain-open-dev/stores": "^0.600.0-dev.0",
-    "@holochain-open-dev/utils": "^0.600.0-dev.0",
-    "@holochain/client": "^0.20.0-dev.2",
-    "@holochain-syn/core": "^0.600.0-rc.2",
-    "@holochain-syn/text-editor": "^0.600.0-rc.2",
+    "@holochain-open-dev/elements": "^0.600.0",
+    "@holochain-open-dev/profiles": "^0.600.0",
+    "@holochain-open-dev/stores": "^0.600.0",
+    "@holochain-open-dev/utils": "^0.600.0",
+    "@holochain/client": "^0.20.0",
+    "@holochain-syn/core": "^0.600.0",
+    "@holochain-syn/text-editor": "^0.600.0",
     "@theweave/api": "^0.6.0",
     "@theweave/elements": "^0.6.0",
     "@lit/context": "^1.0.0",
@@ -36,7 +36,18 @@
     "@automerge/automerge": "^3.2.0",
     "@vanillawc/wc-codemirror": "^2.1.0",
     "@gitgraph/js": "^1.4.0",
-    "@scoped-elements/cytoscape": "^0.2.0"
+    "@scoped-elements/cytoscape": "^0.2.0",
+    "prosemirror-state":"^1.4.4",
+    "prosemirror-view": "^1.41.3",
+    "prosemirror-model": "^1.18.0",
+    "prosemirror-schema-basic": "^1.1.2",
+    "prosemirror-schema-list": "^1.1.5",
+    "prosemirror-example-setup": "^1.1.2",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-commands": "^1.5.2",
+    "prosemirror-history": "^1.3.0",
+    "prosemirror-markdown": "^1.10.1",
+    "@automerge/prosemirror": "^0.1.0"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.15.0",

ui/src/elements/all-notes.ts

@@ -34,6 +34,7 @@ enum SortColumn {
   Created,
   Modified,
   Title,
+  Style,
   Author
 }
 
@@ -45,6 +46,7 @@ type NoteRow = {
   actionHash: ActionHash,
   state: TextEditorState,
   authorSort: number,
+  style: string,
   archived: boolean
 }
 
@@ -143,6 +145,7 @@ export class AllNotes extends LitElement {
       actionHash:note.document.actionHash,
       state: note.latestState,
       authorSort,
+      style: (decode(note.document.entry.meta!) as any).editorType,
       archived
     }
   }
@@ -183,6 +186,10 @@ export class AllNotes extends LitElement {
         if (this.sortDirection=== SortDirection.Descending)
            return notes.sort((a, b) => b.authorSort - a.authorSort)
         return notes.sort((a, b) => a.authorSort - b.authorSort)
+      case SortColumn.Style:
+        if (this.sortDirection=== SortDirection.Descending)
+           return notes.sort((a, b) => b.style.localeCompare(a.style))
+        return notes.sort((a, b) => a.style.localeCompare(b.style))
       }
     return notes
   }
@@ -235,6 +242,9 @@ export class AllNotes extends LitElement {
           <span class="note-created">
             ${createDate.toLocaleDateString()} ${createDate.toLocaleTimeString()}
           </span>
+          <span class="note-style">
+            ${note.style === "richtext" ? msg("Rich Text") : msg("Markdown")}
+          </span>
           <span class="note-author">
             <agent-avatar .agentPubKey=${note.author}></agent-avatar>
           </span>
@@ -321,6 +331,13 @@ export class AllNotes extends LitElement {
             >${msg("Created")}
             </column-label >
           </span>
+          <span class="note-style"> 
+            <column-label id="style"
+              direction=${this.sortColumn === SortColumn.Style?this.sortDirection:SortDirection.None}
+              @column-selected=${(e:any)=>this.setSort(SortColumn.Style, e.detail.direction)}>
+              ${msg("Style")}
+            </column-label>
+          </span>
           <span class="note-author"> 
             <column-label id="author"
               direction=${this.sortColumn === SortColumn.Author?this.sortDirection:SortDirection.None}
@@ -366,6 +383,12 @@ export class AllNotes extends LitElement {
         width:100%; 
         border-bottom: solid 1px #ccc;
       }
+      .note-style {
+        display:flex;
+        width: 67px;
+        margin-left:10px;
+        justify-content:flex-start;
+      }
       .note-row:hover {
         box-shadow: 1px 1px 8px #a7a7a7;
       }

ui/src/elements/markdown-note.ts

@@ -572,20 +572,18 @@ export class MarkdownNote extends LitElement {
           <slot name="toolbar-action"></slot>
         </div>
         <div class="row" style="flex: 1;">
-
-          ${this._view === View.Both || this._view === View.Edit ? html`
-          <div class="flex-scrollable-parent">
+        <sl-split-panel position=${ this._view === View.Both ? "50" : this._view === View.View ? "0" : "100"} style="flex: 1; height: 100%; --divider-width: 8px;">
+          <div slot="start" class="flex-scrollable-parent">
             <div class="flex-scrollable-container">
               <div class="flex-scrollable-y">
                 <syn-md-editor
                   .slice=${sessionStore}
                 ></syn-md-editor>
               </div>
             </div>
-          </div>` : ""}
+          </div>
 
-          ${this._view === View.Both || this._view === View.View ? html`
-          <div class="flex-scrollable-parent">
+          <div slot="end" class="flex-scrollable-parent">
             <div class="flex-scrollable-container">
               <div class="flex-scrollable-y">
                 <div style="margin: 8px">
@@ -597,7 +595,8 @@ export class MarkdownNote extends LitElement {
                 </div>
               </div>
             </div>
-          </div>` : ""}
+          </div>
+        </sl-split-panel>
         </div>
       </div>
     `;