JsonEditor for Yjs

ng-app/src/apps/YArraySource.svelte

@@ -0,0 +1,19 @@
+<!--
+// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+-->
+
+<script lang="ts">
+    import YMapSource from "./YMapSource.svelte";
+    export let commits = {};
+
+</script>
+
+<YMapSource {commits} crdt="YArray"/>
+

ng-app/src/apps/YArrayViewer.svelte

@@ -0,0 +1,19 @@
+<!--
+// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+-->
+
+<script lang="ts">
+    import YMapViewer from "./YMapViewer.svelte";
+    export let commits = {};
+
+</script>
+
+<YMapViewer {commits} crdt="YArray"/>
+

ng-app/src/apps/YMapSource.svelte

@@ -0,0 +1,79 @@
+<!--
+// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+-->
+
+<script lang="ts">
+    import { onMount, tick, onDestroy } from "svelte";
+    import { 
+      sparql_update,
+      toast_error,
+      toast_success
+    } from "../store";
+    import { 
+       set_view_or_edit, cur_tab_doc_can_edit
+    } from "../tab";
+    import{ PencilSquare, } from "svelte-heros-v2";
+    import { t } from "svelte-i18n";   
+    import Highlight, { LineNumbers } from "svelte-highlight";
+    import json from "svelte-highlight/languages/json";
+    import "svelte-highlight/styles/github.css";
+    
+    import * as Y from 'yjs'
+
+    let source = "";
+
+    const edit = () => {
+      set_view_or_edit(false);
+    }
+
+    export let commits = {};
+
+    export let crdt = "YMap";
+
+    const ydoc = new Y.Doc()
+    const ymap = ydoc.get('ng', crdt == "YMap" ? Y.Map : Y.Array)
+
+
+    ydoc.on('destroy', async () => {
+        commits.discrete?.deregisterOnUpdate();
+    })
+
+    onMount(()=>{
+        let history = commits.discrete?.registerOnUpdate((update) => {
+            Y.applyUpdate(ydoc, update[crdt], {local:true})
+            source = JSON.stringify(ymap.toJSON(),null , 4 );
+
+        });
+        for (const h of history) {
+            if (h[crdt]) Y.applyUpdate(ydoc, h[crdt], {local:true})
+        }
+        source = JSON.stringify(ymap.toJSON(), null , 4 );
+
+    });
+  
+  </script>
+  <div class="flex-col">
+    {#if source}
+      <Highlight language={json} code={source} class="mb-10"  let:highlighted >
+        <LineNumbers {highlighted} wrapLines hideBorder />
+      </Highlight>
+    {:else if $cur_tab_doc_can_edit}
+      <button
+        on:click={edit}
+        on:keypress={edit}
+        class="select-none ml-2 mt-2 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+    >
+        <PencilSquare class="mr-2 focus:outline-none" tabindex="-1" />
+        {$t("doc.start_editing")}
+      </button>
+    {/if}
+      
+  </div>
+  

ng-app/src/apps/YMapViewer.svelte

@@ -0,0 +1,140 @@
+<!--
+// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+-->
+
+<script lang="ts">
+    import { onMount, tick, onDestroy } from "svelte";
+    import { 
+      toast_error,
+      toast_success,
+      reset_toasts,
+      display_error,
+      live_discrete_update,
+      discrete_update
+    } from "../store";
+    import { 
+        cur_tab_register_on_save,
+        cur_tab_deregister_on_save,
+        cur_tab_branch_class
+    } from "../tab";
+    import { t } from "svelte-i18n";
+    
+    import * as Y from 'yjs'
+    import { JSONEditor } from 'svelte-jsoneditor'
+
+    export let commits = {};
+
+    export let crdt = "YMap";
+
+    const ydoc = new Y.Doc()
+    const ymap = ydoc.get('ng', crdt == "YMap" ? Y.Map : Y.Array)
+
+    let editor;
+
+    let content = {
+        text: undefined,
+        json: crdt=="YMap"? {
+        } : []
+    }
+
+    ymap.observeDeep((events, transaction) => {
+        if (transaction.origin.local) {
+            let operations = [];
+            events.forEach((event) => {
+                let target = ymap;
+                let path = "";
+                event.path.forEach((p)=> { target = target.get(p); path += `/${p}`;});
+
+                event.changes.keys.forEach((change, key) => {
+                    if (change.action === 'add') {
+                        
+                        let newval = target.get(key);
+                        if ( newval instanceof Y.Array) newval = newval.toJSON();
+                        else if ( newval instanceof Y.Map) newval = newval.toJSON();
+                        //console.log(`Property "${key}" was added in path "${path}". Initial value: "`,newval)
+                        let p = path + `/${key}`;
+                        operations.push({ op: 'add', path:p, value: newval });
+                        
+                    } else if (change.action === 'update') {
+                        
+                        let newval = target.get(key);
+                        if ( newval instanceof Y.Array) newval = newval.toJSON();
+                        else if ( newval instanceof Y.Map) newval = newval.toJSON();
+                        //console.log(`Property "${key}" was updated in path "${path}". Previous value: "${change.oldValue}". New value: `, newval)
+                        let p = path + `/${key}`;
+                        
+                        operations.push({ op: 'replace', path:p, value: newval });
+                    
+                    } else if (change.action === 'delete') {
+                        
+                        //console.log(`Property "${key}" was deleted in path "${path}". Previous value: "${change.oldValue}".`)
+                        let p = path + `/${key}`;
+                        operations.push({ op: 'remove', path:p });
+                    }
+                });
+                let pos = 0;
+                event.changes.delta.forEach((delta) => { 
+                    if (delta.retain) pos += delta.retain;
+                    else if (delta.insert && Array.isArray(delta.insert)) {
+                        delta.insert.forEach((newval) => {
+                            let p = path + `/${pos}`;
+                            if ( newval instanceof Y.Array) newval = newval.toJSON();
+                            else if ( newval instanceof Y.Map) newval = newval.toJSON();
+                            //console.log(`Adding array element to path "${p}". New value: `, newval)
+                            operations.push({ op: 'add', path:p, value: newval });
+                            pos += 1;
+                        });
+                    } else if (delta.delete) {
+                        let p = path + `/${pos}`;
+                        for (let i=0; i< delta.delete; i++) {
+                            //console.log(`removing array element in path "${p}"`)
+                            operations.push({ op: 'remove', path:p });
+                        }
+                    }
+                });
+            });
+            editor.patch(operations);
+            content.json = ymap.toJSON();
+        }
+    });
+
+    ydoc.on('destroy', async () => {
+        commits.discrete?.deregisterOnUpdate();
+    })
+
+    onMount(async ()=>{
+
+        let history = commits.discrete?.registerOnUpdate((update) => {
+            Y.applyUpdate(ydoc, update[crdt], {local:true})
+        });
+        for (const h of history) {
+            Y.applyUpdate(ydoc, h[crdt], {local:true})
+        }
+
+    });
+
+    onDestroy(async ()=>{
+        ydoc.destroy();
+        await editor.destroy();
+    });
+  
+  </script>
+  <div class="grow ng-json-editor" style="min-height:300px;">
+    <JSONEditor bind:this={editor} {content} readOnly={true} />
+    
+  </div>
+
+  <style>
+    .ng-json-editor {
+      /* define a custom theme color */
+      --jse-theme-color: rgb(73, 114, 165);
+      --jse-theme-color-highlight: rgb(30 136 229);
+    }
+  </style>

ng-app/src/classes.ts

@@ -288,7 +288,7 @@ export const official_classes = {
         "ng:crdt": "Automerge",
         "ng:n": "JSON", 
         "ng:a": "JSON Data CRDT",
-        "ng:o": "n:g:z:json_viewer", // default viewer
+        "ng:o": "n:g:z:json_automerge_viewer", // default viewer
         "ng:w": "n:g:z:json_automerge_editor", // default editor
         "ng:compat": ["file:iana:application:json", "code:json"],
     },
@@ -296,7 +296,7 @@ export const official_classes = {
         "ng:crdt": "YArray",
         "ng:n": "Array", 
         "ng:a": "Yjs Array CRDT",
-        "ng:o": "n:g:z:json_viewer", // default viewer
+        "ng:o": "n:g:z:json_yarray_viewer", // default viewer
         "ng:w": "n:g:z:json_yarray_editor", // default editor
         "ng:compat": ["file:iana:application:json", "code:json"],
     },
@@ -304,7 +304,7 @@ export const official_classes = {
         "ng:crdt": "YMap",
         "ng:n": "Object", 
         "ng:a": "Yjs Map CRDT",
-        "ng:o": "n:g:z:json_viewer", // default viewer
+        "ng:o": "n:g:z:json_ymap_viewer", // default viewer
         "ng:w": "n:g:z:json_ymap_editor", // default editor
         "ng:compat": ["file:iana:application:json", "code:json"],
     },

ng-app/src/tab.ts

@@ -104,7 +104,9 @@ const find_source_viewer_for_class = (class_def, class_name) => {
         case 'Graph':
             return "n:g:z:crdt_source_viewer:rdf";
         case 'YMap':
+            return "n:g:z:crdt_source_viewer:ymap";
         case 'YArray':
+            return "n:g:z:crdt_source_viewer:yarray";
         case 'Automerge':
         case 'Elmer':
             return "n:g:z:crdt_source_viewer:json";

ng-app/src/zeras.ts

@@ -115,14 +115,32 @@ export const official_apps = {
         "ng:o": ["data:graph"],
         "ng:w": [],
     },
-    "n:g:z:json_viewer": {
+    "n:g:z:json_ymap_viewer": {
         "ng:n": "JSON",
         "ng:a": "View the JSON data",
         "ng:c": "app", 
         "ng:u": "json_editor",//favicon. can be a did:ng:j 
-        "ng:g": "n:g:z:json_viewer",
+        "ng:g": "n:g:z:json_ymap_viewer",
-        "ng:b": "JsonViewer",
+        "ng:b": "YMapViewer",
-        "ng:o": ["data:json","data:array","data:map"],
+        "ng:o": ["data:map"],
+    },
+    "n:g:z:json_yarray_viewer": {
+        "ng:n": "JSON",
+        "ng:a": "View the JSON data",
+        "ng:c": "app", 
+        "ng:u": "json_editor",//favicon. can be a did:ng:j 
+        "ng:g": "n:g:z:json_yarray_viewer",
+        "ng:b": "YArrayViewer",
+        "ng:o": ["data:array"],
+    },
+    "n:g:z:json_automerge_viewer": {
+        "ng:n": "JSON",
+        "ng:a": "View the JSON data",
+        "ng:c": "app", 
+        "ng:u": "json_editor",//favicon. can be a did:ng:j 
+        "ng:g": "n:g:z:json_automerge_viewer",
+        "ng:b": "AutomergeViewer",
+        "ng:o": ["data:json"],
     },
     "n:g:z:triple_viewer": {
         "ng:n": "Graph Triples",
@@ -295,13 +313,33 @@ export const official_apps = {
         "ng:w": [],
     },
     "n:g:z:crdt_source_viewer:json": { 
-        "ng:n": "JSON source",
+        "ng:n": "JSON Source",
         "ng:a": "See the source code of this document, in JSON",
         "ng:c": "app", 
         "ng:u": "source",//favicon. can be a did:ng:j 
         "ng:g": "n:g:z:crdt_source_viewer:json",
         "ng:b": "JsonSource", // displayed with highlight.js , with option to download
-        "ng:o": ["data:json", "data:map", "data:array", "data:table", "doc:diagram:jsmind", "doc:diagram:gantt", "doc:diagram:excalidraw", "doc:viz:*", "doc:chart:*", "prod:cad"],
+        "ng:o": ["data:json", "data:table", "doc:diagram:jsmind", "doc:diagram:gantt", "doc:diagram:excalidraw", "doc:viz:*", "doc:chart:*", "prod:cad"],
+        "ng:w": [],
+    },
+    "n:g:z:crdt_source_viewer:ymap": { 
+        "ng:n": "JSON Source",
+        "ng:a": "See the source code of this document, in JSON",
+        "ng:c": "app", 
+        "ng:u": "source",//favicon. can be a did:ng:j 
+        "ng:g": "n:g:z:crdt_source_viewer:ymap",
+        "ng:b": "YMapSource", // displayed with highlight.js , with option to download
+        "ng:o": ["data:map"],
+        "ng:w": [],
+    },
+    "n:g:z:crdt_source_viewer:yarray": { 
+        "ng:n": "JSON Source",
+        "ng:a": "See the source code of this document, in JSON",
+        "ng:c": "app", 
+        "ng:u": "source",//favicon. can be a did:ng:j 
+        "ng:g": "n:g:z:crdt_source_viewer:yarray",
+        "ng:b": "YArraySource", // displayed with highlight.js , with option to download
+        "ng:o": ["data:array"],
         "ng:w": [],
     },
     "n:g:z:crdt_source_viewer:text": {