mirror of
https://forgejo.ellis.link/continuwuation/continuwuity.git
synced 2026-05-26 20:49:55 +00:00
At this point just aaagh
This commit is contained in:
Jade Ellis
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export const ssr = false;
|
||||
Reference in New Issue
Block a user