parent
4ae372a860
commit
74137c4bdd
@ -0,0 +1,99 @@ |
|||||||
|
<!-- |
||||||
|
// 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 * as Y from 'yjs' |
||||||
|
// @ts-ignore |
||||||
|
import { ySyncPlugin, initProseMirrorDoc } from 'y-prosemirror'; |
||||||
|
import ProsemirrorEditor from 'prosemirror-svelte'; |
||||||
|
import { richTextSchema } from 'prosemirror-svelte/state'; |
||||||
|
import { richTextPlugins, corePlugins } from 'prosemirror-svelte/helpers'; |
||||||
|
import { EditorState } from "prosemirror-state"; |
||||||
|
|
||||||
|
export let commits = {}; |
||||||
|
|
||||||
|
const ydoc = new Y.Doc() |
||||||
|
const yxml = ydoc.getXmlFragment('ng') |
||||||
|
|
||||||
|
ydoc.on('update', async (update, origin) => { |
||||||
|
console.log(update,origin); |
||||||
|
if (!origin.local) { |
||||||
|
try { |
||||||
|
await discrete_update(update, "YXml", commits.heads); |
||||||
|
} catch (e){ |
||||||
|
toast_error(display_error(e)); |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
ydoc.on('destroy', async () => { |
||||||
|
commits.discrete?.deregisterOnUpdate(); |
||||||
|
await cur_tab_deregister_on_save(); |
||||||
|
}) |
||||||
|
|
||||||
|
const { doc, mapping } = initProseMirrorDoc(yxml, richTextSchema) |
||||||
|
let selection; |
||||||
|
let editorState = EditorState.create({ |
||||||
|
schema: richTextSchema, |
||||||
|
doc, |
||||||
|
selection, |
||||||
|
plugins: [ |
||||||
|
...corePlugins, |
||||||
|
...richTextPlugins, |
||||||
|
ySyncPlugin(yxml, { mapping }) |
||||||
|
] |
||||||
|
}); |
||||||
|
|
||||||
|
onMount(()=>{ |
||||||
|
|
||||||
|
cur_tab_register_on_save(async (updates)=>{ |
||||||
|
|
||||||
|
let update = Y.mergeUpdates(updates); |
||||||
|
await live_discrete_update(update, "YXml", commits.heads); |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
let history = commits.discrete?.registerOnUpdate((update) => { |
||||||
|
Y.applyUpdate(ydoc, update.YXml, {local:true}) |
||||||
|
}); |
||||||
|
for (const h of history) { |
||||||
|
Y.applyUpdate(ydoc, h.YXml, {local:true}) |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
onDestroy(()=>{ |
||||||
|
ydoc.destroy(); |
||||||
|
}); |
||||||
|
|
||||||
|
</script> |
||||||
|
<div class="grow p-5 post-rich-text" style="min-height:300px;"> |
||||||
|
<ProsemirrorEditor |
||||||
|
className="prosemirror-editor" |
||||||
|
{editorState} |
||||||
|
debounceChangeEventsInterval=2000 |
||||||
|
/> |
||||||
|
|
||||||
|
</div> |
||||||
@ -0,0 +1,89 @@ |
|||||||
|
<!-- |
||||||
|
// 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, RocketLaunch } from "svelte-heros-v2"; |
||||||
|
import { t } from "svelte-i18n"; |
||||||
|
|
||||||
|
import * as Y from 'yjs' |
||||||
|
import { yXmlFragmentToProseMirrorRootNode } from 'y-prosemirror'; |
||||||
|
import { richTextSchema } from 'prosemirror-svelte/state'; |
||||||
|
import { DOMSerializer } from "prosemirror-model"; |
||||||
|
|
||||||
|
export let commits = {}; |
||||||
|
let source = ""; |
||||||
|
|
||||||
|
const ydoc = new Y.Doc() |
||||||
|
const yxml = ydoc.getXmlFragment('ng') |
||||||
|
|
||||||
|
ydoc.on('destroy', async () => { |
||||||
|
commits.discrete?.deregisterOnUpdate(); |
||||||
|
}) |
||||||
|
|
||||||
|
const toHTML = () => { |
||||||
|
const serializer = DOMSerializer.fromSchema(richTextSchema); |
||||||
|
const fragment = serializer.serializeFragment(yXmlFragmentToProseMirrorRootNode(yxml, richTextSchema)); |
||||||
|
const node = document.createElement('div'); |
||||||
|
node.append(fragment); |
||||||
|
return node.innerHTML; |
||||||
|
} |
||||||
|
|
||||||
|
onMount(()=>{ |
||||||
|
let history = commits.discrete?.registerOnUpdate((update) => { |
||||||
|
Y.applyUpdate(ydoc, update.YXml, {local:true}) |
||||||
|
source = toHTML() |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
for (const h of history) { |
||||||
|
Y.applyUpdate(ydoc, h.YXml, {local:true}) |
||||||
|
} |
||||||
|
source = toHTML() |
||||||
|
}); |
||||||
|
|
||||||
|
onDestroy(()=>{ |
||||||
|
ydoc.destroy(); |
||||||
|
}); |
||||||
|
|
||||||
|
const edit = () => { |
||||||
|
set_view_or_edit(false); |
||||||
|
} |
||||||
|
|
||||||
|
</script> |
||||||
|
<div class="grow p-5"> |
||||||
|
{#if source} |
||||||
|
|
||||||
|
<div class="post-rich-text"> |
||||||
|
{@html source} |
||||||
|
</div> |
||||||
|
|
||||||
|
{:else if $cur_tab_doc_can_edit} |
||||||
|
<button |
||||||
|
on:click={edit} |
||||||
|
on:keypress={edit} |
||||||
|
class="select-none 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 tabindex="-1" class="mr-2 focus:outline-none" /> |
||||||
|
{$t("doc.start_editing")} |
||||||
|
</button> |
||||||
|
{/if} |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
Loading…
Reference in new issue