2018-11-26 16:16:46 +01:00
<!DOCTYPE html>
< html >
< head >
< title > Yjs Prosemirror Example< / title >
< link rel = stylesheet href = "https://prosemirror.net/css/editor.css" >
< style >
#content {
min-height: 500px;
}
< / style >
< / head >
< body >
2018-11-27 00:57:15 +01:00
< p > This example shows how to bind a YXmlFragment type to an arbitrary DOM element. We set the DOM element to contenteditable so it basically behaves like a very powerful rich-text editor.< / p >
< p > The content of this editor is shared with every client who visits this domain.< / p >
< hr >
2018-11-26 16:16:46 +01:00
< div class = "code-html" >
2018-11-27 00:57:15 +01:00
< div id = "content" contenteditable = "" > < / div >
2018-11-26 16:16:46 +01:00
< / div >
2018-11-27 15:24:58 +01:00
<!-- The actual source file for the following code is found in ./dom.js. Run `npm run watch` to compile the files -->
2019-03-01 23:26:40 +01:00
< script class = "code-js" src = "./build/dom.js" type = "module" >
2018-11-27 14:59:12 +01:00
import * as Y from 'yjs/index.js'
import { WebsocketProvider } from 'yjs/provider/websocket.js'
import { DomBinding } from 'yjs/bindings/dom.js'
2018-12-21 13:51:38 +01:00
import * as conf from './exampleConfig.js'
2018-11-26 16:16:46 +01:00
2018-12-21 13:51:38 +01:00
const provider = new WebsocketProvider(conf.serverAddress)
2018-11-26 16:16:46 +01:00
const ydocument = provider.get('dom')
const type = ydocument.define('xml', Y.XmlFragment)
const binding = new DomBinding(type, document.querySelector('#content'), { scrollingElement: document.scrollingElement })
window.example = {
provider, ydocument, type, binding
}
< / script >
< / body >
< / html >
