yonote/yjs
23
0
Fork 0
Code Pull Requests 1 Releases Activity

add dom example

Browse Source
This commit is contained in:
Kevin Jahns 2018-11-26 16:05:12 +01:00
parent e168dd48fb
commit 656d85c62e
14 changed files with 62 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.jsdoc.json
View File

@ -17,7 +17,7 @@
"useCollapsibles": true, "useCollapsibles": true,
"collapse": true, "collapse": true,
"resources": { "resources": {
"y-js.org": "y-js.org" "y-js.org": "yjs.website"
}, },
"logo": { "logo": {
"url": "https://user-images.githubusercontent.com/5553757/48975307-61efb100-f06d-11e8-9177-ee895e5916e5.png", "url": "https://user-images.githubusercontent.com/5553757/48975307-61efb100-f06d-11e8-9177-ee895e5916e5.png",

14
README.new.md
View File

@ -1,14 +0,0 @@
### Typescript Declarations
Until [this](https://github.com/Microsoft/TypeScript/issues/7546) is fixed, the only way to get type declarations is by adding Yjs to the list of checked files:
```json
{
"checkJs": true,
"include": [
"./node_modules/yjs/"
]
..
}
```

3
examples/examples.json
View File

@ -7,5 +7,8 @@
}, },
"quill": { "quill": {
"title": "Quill Binding" "title": "Quill Binding"
},
"dom": {
"title": "Dom Binding"
} }
} }

11
examples/prosemirror.html
View File

@ -42,7 +42,6 @@
</head> </head>
<body> <body>
<div class="code-html"> <div class="code-html">
<div id="editor" style="margin-bottom: 23px"></div> <div id="editor" style="margin-bottom: 23px"></div>
<div style="display: none" id="content"> <div style="display: none" id="content">
<h3>Hello User</h3> <h3>Hello User</h3>
@ -51,6 +50,8 @@
</div> </div>
<script class="code-js" src="./build/prosemirror.js"> <script class="code-js" src="./build/prosemirror.js">
import * as Y from 'yjs' import * as Y from 'yjs'
import { WebsocketProvider } from '../provider/websocket.mjs'
import { prosemirrorPlugin, cursorPlugin } from '../bindings/prosemirror'
import { EditorState } from 'prosemirror-state' import { EditorState } from 'prosemirror-state'
import { EditorView } from 'prosemirror-view' import { EditorView } from 'prosemirror-view'
@ -58,16 +59,18 @@ import { DOMParser } from 'prosemirror-model'
import { schema } from 'prosemirror-schema-basic' import { schema } from 'prosemirror-schema-basic'
import { exampleSetup } from 'prosemirror-example-setup' import { exampleSetup } from 'prosemirror-example-setup'
const provider = new Y.WebsocketProvider('ws://localhost:1234/') const provider = new WebsocketProvider('wss://api.yjs.website')
const ydocument = provider.get('prosemirror') const ydocument = provider.get('prosemirror')
const type = ydocument.define('prosemirror', Y.XmlFragment) const type = ydocument.define('prosemirror', Y.XmlFragment)
window.prosemirrorView = new EditorView(document.querySelector('#editor'), { const prosemirrorView = new EditorView(document.querySelector('#editor'), {
state: EditorState.create({ state: EditorState.create({
doc: DOMParser.fromSchema(schema).parse(document.querySelector('#content')), doc: DOMParser.fromSchema(schema).parse(document.querySelector('#content')),
plugins: exampleSetup({schema}).concat([Y.prosemirrorPlugin(type), Y.cursorPlugin]) plugins: exampleSetup({schema}).concat([prosemirrorPlugin(type), cursorPlugin])
}) })
}) })
window.example = { provider, ydocument, type, prosemirrorView }
</script> </script>
</body> </body>
</html> </html>

4
examples/prosemirror.mjs
View File

@ -12,9 +12,11 @@ const provider = new WebsocketProvider('wss://api.yjs.website')
const ydocument = provider.get('prosemirror') const ydocument = provider.get('prosemirror')
const type = ydocument.define('prosemirror', Y.XmlFragment) const type = ydocument.define('prosemirror', Y.XmlFragment)
window.prosemirrorView = new EditorView(document.querySelector('#editor'), { const prosemirrorView = new EditorView(document.querySelector('#editor'), {
state: EditorState.create({ state: EditorState.create({
doc: DOMParser.fromSchema(schema).parse(document.querySelector('#content')), doc: DOMParser.fromSchema(schema).parse(document.querySelector('#content')),
plugins: exampleSetup({schema}).concat([prosemirrorPlugin(type), cursorPlugin]) plugins: exampleSetup({schema}).concat([prosemirrorPlugin(type), cursorPlugin])
}) })
}) })
window.example = { provider, ydocument, type, prosemirrorView }

65
examples/quill.html
View File

@ -3,42 +3,6 @@
<head> <head>
<title>Yjs Prosemirror Example</title> <title>Yjs Prosemirror Example</title>
<link rel=stylesheet href="https://prosemirror.net/css/editor.css"> <link rel=stylesheet href="https://prosemirror.net/css/editor.css">
<style>
placeholder {
display: inline;
border: 1px solid #ccc;
color: #ccc;
}
placeholder:after {
content: "☁";
font-size: 200%;
line-height: 0.1;
font-weight: bold;
}
.ProseMirror img { max-width: 100px }
.ProseMirror-yjs-cursor {
position: absolute;
border-left: black;
border-left-style: solid;
border-left-width: 2px;
border-color: orange;
height: 1em;
}
.ProseMirror-yjs-cursor > div {
position: relative;
top: -1.05em;
font-size: 13px;
background-color: rgb(250, 129, 0);
font-family: serif;
font-style: normal;
font-weight: normal;
line-height: normal;
user-select: none;
color: white;
padding-left: 2px;
padding-right: 2px;
}
</style>
</head> </head>
<body> <body>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
@ -49,6 +13,35 @@
</div> </div>
</div> </div>
<script class="code-js" src="./build/quill.js"> <script class="code-js" src="./build/quill.js">
import * as Y from 'yjs'
import { WebsocketProvider } from 'yjs/provider/websocket.mjs'
import { QuillBinding } from 'yjs/bindings/quill.mjs'
import Quill from 'quill'
const provider = new WebsocketProvider('wss://api.yjs.website')
const ydocument = provider.get('quill')
const ytext = ydocument.define('quill', Y.Text)
const quill = new Quill('#quill-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block'],
[{ color: [] }, { background: [] }], // Snow theme fills in values
[{ script: 'sub' }, { script: 'super' }],
['link', 'image'],
['link', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }]
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
})
window.quillBinding = new QuillBinding(ytext, quill)
</script> </script>
</body> </body>
</html> </html>

2
examples/style.css
View File

@ -24,6 +24,6 @@ footer {
} }
.main section article.readme h1:first-child::before { .main section article.readme h1:first-child::before {
content: "The Shared Editing Library"; content: "Yjs";
font-size: 2em; font-size: 2em;
} }

45
examples/textarea.html
View File

@ -1,58 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Yjs Prosemirror Example</title> <title>Yjs Textarea Example</title>
<link rel=stylesheet href="https://prosemirror.net/css/editor.css"> <link rel=stylesheet href="https://prosemirror.net/css/editor.css">
<style>
placeholder {
display: inline;
border: 1px solid #ccc;
color: #ccc;
}
placeholder:after {
content: "☁";
font-size: 200%;
line-height: 0.1;
font-weight: bold;
}
.ProseMirror img { max-width: 100px }
.ProseMirror-yjs-cursor {
position: absolute;
border-left: black;
border-left-style: solid;
border-left-width: 2px;
border-color: orange;
height: 1em;
}
.ProseMirror-yjs-cursor > div {
position: relative;
top: -1.05em;
font-size: 13px;
background-color: rgb(250, 129, 0);
font-family: serif;
font-style: normal;
font-weight: normal;
line-height: normal;
user-select: none;
color: white;
padding-left: 2px;
padding-right: 2px;
}
</style>
</head> </head>
<body> <body>
<div class="code-html"> <div class="code-html">
<textarea style="width:80%;" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea> <textarea style="width:80%;" rows=40 autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
</div> </div>
<script class="code-js" src="./build/textarea.js"> <script class="code-js" src="./build/textarea.js">
import * as Y from 'yjs' import * as Y from 'yjs'
import { WebsocketProvider } from 'yjs/provider/websocket.mjs'
import { TextareaBinding } from 'yjs/bindings/textarea.mjs'
const provider = new Y.WebsocketProvider('ws://localhost:1234/') const provider = new WebsocketProvider('wss://api.yjs.website')
const ydocument = provider.get('textarea') const ydocument = provider.get('textarea')
const type = ydocument.define('textarea', Y.Text) const type = ydocument.define('textarea', Y.Text)
const textarea = document.querySelector('textarea') const textarea = document.querySelector('textarea')
const binding = new Y.TextareaBinding(type, textarea) const binding = new TextareaBinding(type, textarea)
window.textareaExample = { window.textareaExample = {
provider, ydocument, type, textarea, binding provider, ydocument, type, textarea, binding

18
examples_all/quill/index.html
View File

@ -1,18 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<!-- Main Quill library -->
<script src="../../node_modules/quill/dist/quill.min.js"></script>
<link href="../../node_modules/quill/dist/quill.snow.css" rel="stylesheet">
<!-- Yjs Library and connector -->
<script src="../../y.js"></script>
<script src='../../../y-websockets-client/y-websockets-client.js'></script>
</head>
<body>
<div id="quill-container">
<div id="quill">
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

29
examples_all/quill/index.js
View File

@ -1,29 +0,0 @@
/* global Y, Quill */
let y = new Y('quill-cursors-0', {
connector: {
name: 'websockets-client',
url: 'http://127.0.0.1:1234'
}
})
let quill = new Quill('#quill-container', {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
['bold', 'italic', 'underline'],
['image', 'code-block'],
[{ color: [] }, { background: [] }], // Snow theme fills in values
[{ script: 'sub' }, { script: 'super' }],
['link', 'image'],
['link', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }]
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
})
let yText = y.define('quill', Y.Text)
window.quillBinding = new Y.QuillBinding(yText, quill)

43
examples_all/xml/index.html
View File

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html>
</head>
<!-- jquery is not required for YXml. It is just here for convenience, and to test batch operations. -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="../../y.js"></script>
<script src='../../../y-websockets-client/y-websockets-client.js'></script>
<script src="./index.js"></script>
</head>
<body>
<h1> Shared DOM Example </h1>
<p> Use native DOM function or jQuery to manipulate the shared DOM (window.sharedDom). </p>
<div class="command">
<button type="button">Execute</button>
<input type="text" value='$(sharedDom).append("<h3>Appended headline</h3>")' size="40"/>
</div>
<div class="command">
<button type="button">Execute</button>
<input type="text" value='$(sharedDom).attr("align","right")' size="40"/>
</div>
<div class="command">
<button type="button">Execute</button>
<input type="text" value='$(sharedDom).attr("style","color:blue;")' size="40"/>
</div>
<script>
/* global $ */
var commands = document.querySelectorAll('.command')
Array.prototype.forEach.call(commands, function (command) {
var execute = function () {
// eslint-disable-next-line no-eval
eval(command.querySelector('input').value)
}
command.querySelector('button').onclick = execute
$(command.querySelector('input')).keyup(function (e) {
if (e.keyCode === 13) {
execute()
}
})
})
</script>
</body>
</html>

13
examples_all/xml/index.js
View File

@ -1,13 +0,0 @@
/* global Y */
let y = new Y('xml-example', {
connector: {
name: 'websockets-client',
url: 'http://127.0.0.1:1234'
}
})
window.yXml = y
// bind xml type to a dom, and put it in body
window.sharedDom = y.define('xml', Y.XmlElement).toDom()
document.body.appendChild(window.sharedDom)

2
package.json
View File

@ -10,7 +10,7 @@
"watch": "rollup -wc", "watch": "rollup -wc",
"debug": "concurrently 'rollup -wc' 'cutest-serve build/y.test.js -o'", "debug": "concurrently 'rollup -wc' 'cutest-serve build/y.test.js -o'",
"lint": "standard **/*.js", "lint": "standard **/*.js",
"docs": "rm -rf docs; jsdoc --configure ./.jsdoc.json --verbose --readme ./README.md --package ./package.json || true", "docs": "rm -rf docs; jsdoc --configure ./.jsdoc.json --verbose --readme ./README.v13.md --package ./package.json || true",
"serve-docs": "npm run docs && serve ./docs/", "serve-docs": "npm run docs && serve ./docs/",
"postversion": "npm run build", "postversion": "npm run build",
"websocket-server": "node --experimental-modules ./provider/websocket/server.mjs", "websocket-server": "node --experimental-modules ./provider/websocket/server.mjs",

12
rollup.config.js
View File

@ -43,6 +43,18 @@ export default [{
babel(), babel(),
uglify() uglify()
] ]
}, {
input: './examples/dom.mjs',
output: {
name: 'dom',
file: 'examples/build/dom.js',
format: 'iife',
sourcemap: true
},
plugins: [
babel(),
uglify()
]
}, { }, {
input: './examples/textarea.mjs', input: './examples/textarea.mjs',
output: { output: {