diff --git a/index.html b/index.html index b7354cf..1bfd51f 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,6 @@
- + diff --git a/src/app.css b/src/main.css similarity index 100% rename from src/app.css rename to src/main.css diff --git a/src/main.ts b/src/main.ts deleted file mode 100644 index 6f5c05b..0000000 --- a/src/main.ts +++ /dev/null @@ -1,134 +0,0 @@ -import _ from 'lodash'; -import './style.css'; -import * as Y from 'yjs'; -import { yCollab } from 'y-codemirror.next'; -import { EditorState } from '@codemirror/state'; -import { keymap, EditorView } from '@codemirror/view'; -import { - defaultHighlightStyle, - syntaxHighlighting, -} from '@codemirror/language'; -import { defaultKeymap, history, historyKeymap } from '@codemirror/commands'; - -const app = document.querySelector('#app')!; - -app.innerHTML = ` -

Synced editors

-

Network delay (simulated) of 2.5 to 5 seconds.

- -
-
- -
-
-`; - -const xdoc = new Y.Doc(); -const state = EditorState.create({ - doc: xdoc.getText().toString(), - extensions: [ - // drawSelection(), - EditorView.lineWrapping, - // EditorView.theme( - // { - // '&': { - // maxWidth: '80ch', - // width: '100%' - // } - // } - // ), - history(), - keymap.of([...defaultKeymap, ...historyKeymap]), - syntaxHighlighting(defaultHighlightStyle, { fallback: true }), - yCollab(xdoc.getText(), null), - ], -}); -new EditorView({ state, parent: app }); - -const ta1 = document.getElementById('ta1') as HTMLTextAreaElement; -const ta2 = document.getElementById('ta2') as HTMLTextAreaElement; - -function bind(text: Y.Text, el: HTMLTextAreaElement) { - el.value = text.toString(); - - // When the selection changes, persist its relative location - let savedSelection: Y.RelativePosition[]; - const saveSelection = () => - (savedSelection = [el.selectionStart, el.selectionEnd].map((i) => - Y.createRelativePositionFromTypeIndex(text, i) - )); - saveSelection(); - el.addEventListener('selectionchange', saveSelection); - el.addEventListener('click', saveSelection); - el.addEventListener('keyup', saveSelection); - el.addEventListener('mouseup', saveSelection); - - // When the doc/textarea updates, set selection to the equivalent of what it was before - const restoreSelection = () => { - const [newStart, newEnd] = savedSelection.map( - (x) => Y.createAbsolutePositionFromRelativePosition(x, text.doc!)?.index - ); - el.selectionStart = newStart ?? el.selectionStart; - el.selectionEnd = newEnd ?? el.selectionEnd; - }; - - const handleInput = () => { - let prev = text.toString(); - let curr = el.value; - let i = 0; - for (i = 0; prev[i] && prev[i] == curr[i]; i++) {} - const offset = i; - prev = prev.slice(offset); - curr = curr.slice(offset); - for ( - i = 0; - prev[prev.length - 1 - i] && - prev[prev.length - 1 - i] === curr[curr.length - 1 - i]; - i++ - ) {} - prev = prev.slice(0, prev.length - i); - curr = curr.slice(0, curr.length - i); - - text.doc!.transact(() => { - text.delete(offset, prev.length); - text.insert(offset, curr); - saveSelection(); - }); - }; - - el.addEventListener('input', handleInput); - - text.doc!.on('update', () => { - el.value = text.toString(); - restoreSelection(); - }); -} - -function pipe(src: Y.Doc, dest: Y.Doc) { - let prevStateVector = Y.encodeStateVector(src); - - const flush = _.debounce( - () => { - const update = Y.encodeStateAsUpdate(src, prevStateVector); - prevStateVector = Y.encodeStateVector(src); - setTimeout(() => Y.applyUpdate(dest, update), _.random(2500, 5000)); - }, - 1000, - { - maxWait: 2000, - } - ); - src.on('update', flush); -} - -const doc1 = new Y.Doc(); -bind(doc1.getText(), ta1); -const doc2 = new Y.Doc(); -bind(doc2.getText(), ta2); - -pipe(doc1, doc2); -pipe(doc2, doc1); - -doc1.getText().insert(0, 'foo bar baz'); - -(window as any).Y = Y; diff --git a/src/app.tsx b/src/main.tsx similarity index 87% rename from src/app.tsx rename to src/main.tsx index b63587f..023313a 100644 --- a/src/app.tsx +++ b/src/main.tsx @@ -1,6 +1,6 @@ import { render } from 'solid-js/web'; import App from './components/App'; -import './app.css'; +import './main.css'; const app = document.getElementById('app')!; diff --git a/src/style.css b/src/style.css deleted file mode 100644 index 29565ec..0000000 --- a/src/style.css +++ /dev/null @@ -1,51 +0,0 @@ -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -textarea { - width: 80ch; - box-sizing: border-box; -} - -.cm-editor { - text-align: left; - background-color: white; - color: black; -} - -.cm-editor .cm-content { - min-height: 14lh; - max-width: 80ch; -}