ember/continuwuity
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

At this point just aaagh

Browse source
This commit is contained in:
Jade Ellis 2024-03-09 13:07:33 +00:00
parent 7e83c817ec
commit 2c9f466872
4 changed files with 349 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/loro-demo/package.json
View file

@ -9,13 +9,18 @@
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
},
"devDependencies": {
"@collabs/collabs": "^0.13.4",
"@collabs/ws-client": "^0.13.4",
"@fontsource/fira-mono": "^4.5.10",
"@neoconfetti/svelte": "^1.0.0",
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/adapter-node": "^4.0.1",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^3.0.0",
"@types/color-hash": "^1.0.5",
"@types/lodash": "^4.14.202",
"@types/quill": "^2.0.14",
"@types/uuid": "^9.0.8",
"svelte": "^4.2.7",
"svelte-check": "^3.6.0",
"tslib": "^2.4.1",
@ -27,6 +32,8 @@
"type": "module",
"dependencies": {
"@steeze-ui/svelte-icon": "^1.5.0",
"color-hash": "^2.0.2",
"lodash": "^4.17.21",
"loro-crdt": "^0.11.1",
"prosemirror-commands": "^1.5.2",
"prosemirror-dropcursor": "^1.8.1",
@ -38,7 +45,9 @@
"prosemirror-schema-basic": "^1.2.2",
"prosemirror-schema-list": "^1.3.0",
"prosemirror-state": "^1.4.3",
"prosemirror-transform": "^1.8.0",
"prosemirror-view": "^1.33.1",
"quill": "^1.3.7"
"quill": "^1.3.7",
"uuid": "^9.0.1"
}
}

243
packages/loro-demo/src/lib/LiveEditor.svelte
View file

@ -1,96 +1,199 @@
<script lang="ts">
import type { Loro, LoroText } from "loro-crdt";
import { onMount } from "svelte";
// import { Publisher } from "./peritext/pubsub"
// import type { Change } from "./peritext/micromerge"
// import type { Editor } from "./peritext/bridge"
// import { Mark } from "prosemirror-model"
// import Micromerge from "./peritext/micromerge"
import { EditorView } from "prosemirror-view";
import { EditorState, TextSelection, Plugin } from "prosemirror-state";
import { DOMParser, DOMSerializer, Node, Schema } from "prosemirror-model";
import { richTextSchema, EXPAND_CONFIG } from "./prosemirror/schema";
import { keymap } from "prosemirror-keymap";
import { baseKeymap } from "prosemirror-commands";
import { history, redo, undo } from "prosemirror-history";
import { dropCursor } from "prosemirror-dropcursor"
import { gapCursor } from "prosemirror-gapcursor"
import { richTextKeyMapPlugin } from "./prosemirror/keymap";
// import {createEditor, initializeDocs} from "./peritext/bridge"
import menu from "./menu";
// import Hero from "$lib/Hero.svelte";
let editorNode: Element;
let loroState: Loro | null = null;
onMount(() => {
let view: EditorView;
(async () => {
let b = import(`loro-crdt`);
// import Hero from "$lib/Hero.svelte";
let editorNode: Element;
let changesNode: Element;
let marksNode: Element;
// const publisher = new Publisher<Array<Change>>()
const Loro = (await b).Loro
loroState = new Loro();
// const editors: { [key: string]: Editor } = {}
// const renderMarks = (domNode: Element, marks: readonly Mark[]): void => {
// domNode.innerHTML = marks
// .map(m => `• ${m.type.name} ${Object.keys(m.attrs).length !== 0 ? JSON.stringify(m.attrs) : ""}`)
// .join("<br/>")
// }
// const aliceDoc = new Micromerge("alice")
// const aliceNode = document.querySelector("#alice")
// const aliceEditor = aliceNode?.querySelector(".editor")
// const aliceChanges = aliceNode?.querySelector(".changes")
// const aliceMarks = aliceNode?.querySelector(".marks")
for (const editor of Object.values(editors)) {
editor.queue.drop()
}
// Add a button for syncing the two editors
// document.querySelector("#sync")?.addEventListener("click", () => {
// for (const editor of Object.values(editors)) {
// editor.queue.flush()
// }
// })
// import type { Loro, LoroText } from "loro-crdt";
import { onMount } from "svelte";
// import { EditorView } from "prosemirror-view";
// import { EditorState, TextSelection, Plugin } from "prosemirror-state";
// import { DOMParser, DOMSerializer, Node, Schema } from "prosemirror-model";
// import { richTextSchema, EXPAND_CONFIG } from "./prosemirror/schema";
// import { keymap } from "prosemirror-keymap";
// import { baseKeymap } from "prosemirror-commands";
// import { history, redo, undo } from "prosemirror-history";
import { dropCursor } from "prosemirror-dropcursor";
import { gapCursor } from "prosemirror-gapcursor";
// import { richTextKeyMapPlugin } from "./prosemirror/keymap";
// let loroState: Loro | null = null;
// onMount(() => {
// let view: Editor;
// (async () => {
// // let b = import(`loro-crdt`);
// // const Loro = (await b).Loro;
// // loroState = new Loro();
// // let pkgbridge = import(`./peritext/bridge`)
// // const { createEditor, initializeDocs } = await pkgbridge
let state = EditorState.create({
schema: richTextSchema,
// doc,
// selection,
plugins: [
// history(),
keymap({}), // {"Mod-z": undo, "Mod-y": redo, "Mod-Shift-z": redo}
keymap(baseKeymap),
dropCursor(),
gapCursor(),
richTextKeyMapPlugin,
menu
// ...plugins
]});
// initializeDocs(
// [aliceDoc],
// [
// {
// path: [Micromerge.contentKey],
// action: "insert",
// index: 0,
// values: "This is the Peritext editor demo. Press sync to synchronize the editors. Ctrl-B for bold, Ctrl-i for italic, Ctrl-k for link, Ctrl-e for comment".split(
// "",
// ),
// },
// {
// path: [Micromerge.contentKey],
// action: "addMark",
// markType: "strong",
// startIndex: 84,
// endIndex: 88,
// },
// {
// path: [Micromerge.contentKey],
// action: "addMark",
// markType: "em",
// startIndex: 100,
// endIndex: 107,
// },
// {
// path: [Micromerge.contentKey],
// action: "addMark",
// markType: "link",
// attrs: { url: "http://inkandswitch.com" },
// startIndex: 120,
// endIndex: 124,
// },
// {
// path: [Micromerge.contentKey],
// action: "addMark",
// markType: "comment",
// attrs: { id: "1" },
// startIndex: 137,
// endIndex: 144,
// },
// ],
// )
view = new EditorView(editorNode, {
state,
nodeViews: {
// image(node, view, getPos) {
// return new ImageView(node, view, getPos);
// }
}
});
})();
// view = createEditor({
// actorId: "alice",
// editorNode,
// changesNode,
// doc: aliceDoc,
// publisher,
return () => {
if (view) {
view.destroy()
}
};
});
// plugins: [
// // history(),
// // keymap({}), // {"Mod-z": undo, "Mod-y": redo, "Mod-Shift-z": redo}
// // keymap(baseKeymap),
// dropCursor(),
// gapCursor(),
// // richTextKeyMapPlugin,
// menu,
// // ...plugins
// ],
// editable: true,
// handleClickOn: (view, pos, node, nodePos, event, direct) => {
// // Prosemirror calls this once per node that overlaps w/ the clicked pos.
// // We only want to run our callback once, on the innermost clicked node.
// if (!direct) return false
// const marksAtPosition = view.state.doc.resolve(pos).marks()
// renderMarks(marksNode, marksAtPosition)
// return false
// },
// })
// // let state = EditorState.create({
// // schema: richTextSchema,
// // // doc,
// // // selection,
// // });
// // view = new EditorView(editorNode, {
// // state,
// // nodeViews: {
// // // image(node, view, getPos) {
// // // return new ImageView(node, view, getPos);
// // // }
// // },
// // });
// })();
// return () => {
// if (view) {
// view.view.destroy()
// }
// };
// });
</script>
<div class="content card edge">
<!-- <div>Test</div> -->
<!-- {#if state}
<!-- <div>Test</div> -->
<!-- {#if state}
<Editor state={state} document={document}/>
{/if} -->
<div bind:this={editorNode}></div>
<div bind:this={editorNode}></div>
</div>
<div bind:this={changesNode}></div>
<div bind:this={marksNode}></div>
<style>
.content {
.content {
margin: 48px auto;
max-width: calc(100% - 2*var(--spacing));
width: 520px;
max-width: calc(100% - 2 * var(--spacing));
width: 520px;
padding: var(--spacing);
}
}
@media screen and (min-width: 540px) {
@media screen and (min-width: 540px) {
.content {
margin: 96px auto;
margin: 96px auto;
}
}
}
:global(.ProseMirror) {
margin: auto;

1
packages/loro-demo/src/routes/+page.server.ts Normal file
View file

@ -0,0 +1 @@
export const ssr = false;

166
pnpm-lock.yaml generated
View file

@ -13,6 +13,12 @@ importers:
'@steeze-ui/svelte-icon':
specifier: ^1.5.0
version: 1.5.0(svelte@4.2.8)
color-hash:
specifier: ^2.0.2
version: 2.0.2
lodash:
specifier: ^4.17.21
version: 4.17.21
loro-crdt:
specifier: ^0.11.1
version: 0.11.1
@ -46,13 +52,25 @@ importers:
prosemirror-state:
specifier: ^1.4.3
version: 1.4.3
prosemirror-transform:
specifier: ^1.8.0
version: 1.8.0
prosemirror-view:
specifier: ^1.33.1
version: 1.33.1
quill:
specifier: ^1.3.7
version: 1.3.7
uuid:
specifier: ^9.0.1
version: 9.0.1
devDependencies:
'@collabs/collabs':
specifier: ^0.13.4
version: 0.13.4
'@collabs/ws-client':
specifier: ^0.13.4
version: 0.13.4
'@fontsource/fira-mono':
specifier: ^4.5.10
version: 4.5.10
@ -71,9 +89,18 @@ importers:
'@sveltejs/vite-plugin-svelte':
specifier: ^3.0.0
version: 3.0.1(svelte@4.2.8)(vite@5.0.10)
'@types/color-hash':
specifier: ^1.0.5
version: 1.0.5
'@types/lodash':
specifier: ^4.14.202
version: 4.14.202
'@types/quill':
specifier: ^2.0.14
version: 2.0.14
'@types/uuid':
specifier: ^9.0.8
version: 9.0.8
svelte:
specifier: ^4.2.7
version: 4.2.8
@ -163,6 +190,41 @@ packages:
'@jridgewell/gen-mapping': 0.3.3
'@jridgewell/trace-mapping': 0.3.20
/@collabs/collabs@0.13.4:
resolution: {integrity: sha512-S9y8kU+kTYKRBj05kCvjF4an7GcF0KEevGusMMnVCrwV5KdreWDx/uFKsZjoKDDTXcr4YgOyeSvrpyip3B00ow==}
dependencies:
'@collabs/core': 0.13.4
'@collabs/crdts': 0.13.4
tslib: 2.6.2
dev: true
/@collabs/core@0.13.4:
resolution: {integrity: sha512-REEZHzoA7zataSubnW+S3MoESo8Z5i70izcgODC0+ykUjuwELziiYk/50kLEz7kyoHADO73WrXR+kDgp0dQnMA==}
dependencies:
'@types/seedrandom': 2.4.34
base64-js: 1.5.1
protobufjs: 6.9.0
tslib: 2.6.2
dev: true
/@collabs/crdts@0.13.4:
resolution: {integrity: sha512-DLML7myFAzLo2QOWG9/+sqMvg8xxMUa7NTXQH8CR/9lR3Im7hypFd23Oatphb4EkZ1/Gx34tEepz+LSryRXLUw==}
dependencies:
'@collabs/core': 0.13.4
'@types/seedrandom': 2.4.34
base64-js: 1.5.1
protobufjs: 6.9.0
tslib: 2.6.2
dev: true
/@collabs/ws-client@0.13.4:
resolution: {integrity: sha512-hT7mlyViO/c5IAE7Yr3PMDVQuG9PizC6O0rrtcTZdQu7TU4vZvThJIMq8bifNeZ/h8gmcnDYcynVCBFoW5HzDg==}
dependencies:
'@collabs/collabs': 0.13.4
protobufjs: 6.9.0
tslib: 2.6.2
dev: true
/@emnapi/runtime@0.45.0:
resolution: {integrity: sha512-Txumi3td7J4A/xTTwlssKieHKTGl3j4A1tglBx72auZ49YK7ePY6XZricgIg9mnZT4xPfA+UPCUdnhRuEFDL+w==}
requiresBuild: true
@ -653,6 +715,49 @@ packages:
resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
dev: true
/@protobufjs/aspromise@1.1.2:
resolution: {integrity: sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==}
dev: true
/@protobufjs/base64@1.1.2:
resolution: {integrity: sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==}
dev: true
/@protobufjs/codegen@2.0.4:
resolution: {integrity: sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==}
dev: true
/@protobufjs/eventemitter@1.1.0:
resolution: {integrity: sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==}
dev: true
/@protobufjs/fetch@1.1.0:
resolution: {integrity: sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==}
dependencies:
'@protobufjs/aspromise': 1.1.2
'@protobufjs/inquire': 1.1.0
dev: true
/@protobufjs/float@1.0.2:
resolution: {integrity: sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==}
dev: true
/@protobufjs/inquire@1.1.0:
resolution: {integrity: sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==}
dev: true
/@protobufjs/path@1.1.2:
resolution: {integrity: sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==}
dev: true
/@protobufjs/pool@1.1.0:
resolution: {integrity: sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==}
dev: true
/@protobufjs/utf8@1.1.0:
resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
dev: true
/@rollup/plugin-commonjs@25.0.7(rollup@4.10.0):
resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==}
engines: {node: '>=14.0.0'}
@ -1051,6 +1156,10 @@ packages:
engines: {node: '>=10.13.0'}
dev: true
/@types/color-hash@1.0.5:
resolution: {integrity: sha512-miV7Z8zvOnRn0ZjbP/D/qb1VWHrWkKOnfC764SJvnCeIziW4pZy3tPK/542seSgccGAXlPQd/seuNyVAS/p5Ug==}
dev: true
/@types/cookie@0.6.0:
resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
dev: true
@ -1058,6 +1167,18 @@ packages:
/@types/estree@1.0.5:
resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
/@types/lodash@4.14.202:
resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
dev: true
/@types/long@4.0.2:
resolution: {integrity: sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==}
dev: true
/@types/node@13.13.52:
resolution: {integrity: sha512-s3nugnZumCC//n4moGGe6tkNMyYEdaDBitVjwPxXmR5lnMG5dHePinH2EdxkG3Rh1ghFHHixAG4NJhpJW1rthQ==}
dev: true
/@types/pug@2.0.10:
resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==}
dev: true
@ -1073,6 +1194,14 @@ packages:
resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
dev: true
/@types/seedrandom@2.4.34:
resolution: {integrity: sha512-ytDiArvrn/3Xk6/vtylys5tlY6eo7Ane0hvcx++TKo6RxQXuVfW0AF/oeWqAj9dN29SyhtawuXstgmPlwNcv/A==}
dev: true
/@types/uuid@9.0.8:
resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==}
dev: true
/acorn@8.11.2:
resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
engines: {node: '>=0.4.0'}
@ -1128,6 +1257,10 @@ packages:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
dev: true
/base64-js@1.5.1:
resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
dev: true
/binary-extensions@2.2.0:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
engines: {node: '>=8'}
@ -1233,6 +1366,10 @@ packages:
color-name: 1.1.4
dev: true
/color-hash@2.0.2:
resolution: {integrity: sha512-6exeENAqBTuIR1wIo36mR8xVVBv6l1hSLd7Qmvf6158Ld1L15/dbahR9VUOiX7GmGJBCnQyS0EY+I8x+wa7egg==}
dev: false
/color-name@1.1.3:
resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
dev: false
@ -1808,6 +1945,14 @@ packages:
resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
dev: true
/lodash@4.17.21:
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
dev: false
/long@4.0.0:
resolution: {integrity: sha512-XsP+KhQif4bjX1kbuSiySJFNAehNxgLb6hPRGJ9QsUr8ajHkuXGdrHmFUTUUXhDwVX2R5bY4JNZEwbUiMhV+MA==}
dev: true
/loro-crdt@0.11.1:
resolution: {integrity: sha512-C4+lryPZUDqUiLqX0mVp9wRb6+MPvhNngJNQhQxwIDqzn3oP/7Qra8XgY37M4d4Yvx2ZgG+1nYnR+43/xRwq7g==}
dependencies:
@ -2072,6 +2217,26 @@ packages:
prosemirror-transform: 1.8.0
dev: false
/protobufjs@6.9.0:
resolution: {integrity: sha512-LlGVfEWDXoI/STstRDdZZKb/qusoAWUnmLg9R8OLSO473mBLWHowx8clbX5/+mKDEI+v7GzjoK9tRPZMMcoTrg==}
hasBin: true
requiresBuild: true
dependencies:
'@protobufjs/aspromise': 1.1.2
'@protobufjs/base64': 1.1.2
'@protobufjs/codegen': 2.0.4
'@protobufjs/eventemitter': 1.1.0
'@protobufjs/fetch': 1.1.0
'@protobufjs/float': 1.0.2
'@protobufjs/inquire': 1.1.0
'@protobufjs/path': 1.1.2
'@protobufjs/pool': 1.1.0
'@protobufjs/utf8': 1.1.0
'@types/long': 4.0.2
'@types/node': 13.13.52
long: 4.0.0
dev: true
/queue-microtask@1.2.3:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
dev: true
@ -2515,7 +2680,6 @@ packages:
/uuid@9.0.1:
resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
hasBin: true
dev: true
/vite-plugin-image-optimizer@1.1.7(vite@5.0.10):
resolution: {integrity: sha512-KPJWndwqVi7Z2hYCudzKeNDw5U7w1DxAc266bqDBKV8taG8W3EtripFuUM4Y05IlFC19yBQndJCFA8+NJymH+w==}