update y-richtext example
This commit is contained in:
Kevin Jahns
parent
428d825f41
commit
5ab60028ce
@ -2,142 +2,24 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="../bower_components/quill/dist/quill.snow.css" />
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css" rel="stylesheet">
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/monokai-sublime.min.css" rel="stylesheet">
|
||||
<style>
|
||||
#quill {
|
||||
#quill-container {
|
||||
border: 1px solid gray;
|
||||
box-shadow: 0px 0px 10px gray;
|
||||
}
|
||||
#toolbar {
|
||||
border-bottom: 1px solid gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="quill">
|
||||
<!-- Create the toolbar container -->
|
||||
<div id="toolbar" class="toolbar">
|
||||
<span class="ql-format-group">
|
||||
<select title="Font" class="ql-font">
|
||||
<option value="sans-serif" selected="">Sans Serif</option>
|
||||
<option value="serif">Serif</option>
|
||||
<option value="monospace">Monospace</option>
|
||||
</select>
|
||||
<select title="Size" class="ql-size">
|
||||
<option value="10px">Small</option>
|
||||
<option value="13px" selected="">Normal</option>
|
||||
<option value="18px">Large</option>
|
||||
<option value="32px">Huge</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="ql-format-group">
|
||||
<span title="Bold" class="ql-format-button ql-bold"></span>
|
||||
<span class="ql-format-separator"></span>
|
||||
<span title="Italic" class="ql-format-button ql-italic"></span>
|
||||
<span class="ql-format-separator"></span>
|
||||
<span title="Underline" class="ql-format-button ql-underline"></span>
|
||||
<span class="ql-format-separator"></span>
|
||||
<span title="Strikethrough" class="ql-format-button ql-strike"></span>
|
||||
</span>
|
||||
<span class="ql-format-group">
|
||||
<select title="Text Color" class="ql-color">
|
||||
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)" selected=""></option>
|
||||
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
|
||||
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
|
||||
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
|
||||
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
|
||||
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
|
||||
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
|
||||
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)"></option>
|
||||
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
|
||||
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
|
||||
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
|
||||
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
|
||||
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
|
||||
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
|
||||
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
|
||||
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
|
||||
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
|
||||
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
|
||||
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
|
||||
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
|
||||
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
|
||||
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
|
||||
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
|
||||
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
|
||||
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
|
||||
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
|
||||
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
|
||||
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
|
||||
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
|
||||
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
|
||||
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
|
||||
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
|
||||
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
|
||||
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
|
||||
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
|
||||
</select>
|
||||
<span class="ql-format-separator"></span>
|
||||
<select title="Background Color" class="ql-background">
|
||||
<option value="rgb(0, 0, 0)" label="rgb(0, 0, 0)"></option>
|
||||
<option value="rgb(230, 0, 0)" label="rgb(230, 0, 0)"></option>
|
||||
<option value="rgb(255, 153, 0)" label="rgb(255, 153, 0)"></option>
|
||||
<option value="rgb(255, 255, 0)" label="rgb(255, 255, 0)"></option>
|
||||
<option value="rgb(0, 138, 0)" label="rgb(0, 138, 0)"></option>
|
||||
<option value="rgb(0, 102, 204)" label="rgb(0, 102, 204)"></option>
|
||||
<option value="rgb(153, 51, 255)" label="rgb(153, 51, 255)"></option>
|
||||
<option value="rgb(255, 255, 255)" label="rgb(255, 255, 255)" selected=""></option>
|
||||
<option value="rgb(250, 204, 204)" label="rgb(250, 204, 204)"></option>
|
||||
<option value="rgb(255, 235, 204)" label="rgb(255, 235, 204)"></option>
|
||||
<option value="rgb(255, 255, 204)" label="rgb(255, 255, 204)"></option>
|
||||
<option value="rgb(204, 232, 204)" label="rgb(204, 232, 204)"></option>
|
||||
<option value="rgb(204, 224, 245)" label="rgb(204, 224, 245)"></option>
|
||||
<option value="rgb(235, 214, 255)" label="rgb(235, 214, 255)"></option>
|
||||
<option value="rgb(187, 187, 187)" label="rgb(187, 187, 187)"></option>
|
||||
<option value="rgb(240, 102, 102)" label="rgb(240, 102, 102)"></option>
|
||||
<option value="rgb(255, 194, 102)" label="rgb(255, 194, 102)"></option>
|
||||
<option value="rgb(255, 255, 102)" label="rgb(255, 255, 102)"></option>
|
||||
<option value="rgb(102, 185, 102)" label="rgb(102, 185, 102)"></option>
|
||||
<option value="rgb(102, 163, 224)" label="rgb(102, 163, 224)"></option>
|
||||
<option value="rgb(194, 133, 255)" label="rgb(194, 133, 255)"></option>
|
||||
<option value="rgb(136, 136, 136)" label="rgb(136, 136, 136)"></option>
|
||||
<option value="rgb(161, 0, 0)" label="rgb(161, 0, 0)"></option>
|
||||
<option value="rgb(178, 107, 0)" label="rgb(178, 107, 0)"></option>
|
||||
<option value="rgb(178, 178, 0)" label="rgb(178, 178, 0)"></option>
|
||||
<option value="rgb(0, 97, 0)" label="rgb(0, 97, 0)"></option>
|
||||
<option value="rgb(0, 71, 178)" label="rgb(0, 71, 178)"></option>
|
||||
<option value="rgb(107, 36, 178)" label="rgb(107, 36, 178)"></option>
|
||||
<option value="rgb(68, 68, 68)" label="rgb(68, 68, 68)"></option>
|
||||
<option value="rgb(92, 0, 0)" label="rgb(92, 0, 0)"></option>
|
||||
<option value="rgb(102, 61, 0)" label="rgb(102, 61, 0)"></option>
|
||||
<option value="rgb(102, 102, 0)" label="rgb(102, 102, 0)"></option>
|
||||
<option value="rgb(0, 55, 0)" label="rgb(0, 55, 0)"></option>
|
||||
<option value="rgb(0, 41, 102)" label="rgb(0, 41, 102)"></option>
|
||||
<option value="rgb(61, 20, 102)" label="rgb(61, 20, 102)"></option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="ql-format-group">
|
||||
<span title="List" class="ql-format-button ql-list"></span>
|
||||
<span class="ql-format-separator"></span>
|
||||
<span title="Bullet" class="ql-format-button ql-bullet"></span>
|
||||
<span class="ql-format-separator"></span>
|
||||
<select title="Text Alignment" class="ql-align">
|
||||
<option value="left" label="Left" selected=""></option>
|
||||
<option value="center" label="Center"></option>
|
||||
<option value="right" label="Right"></option>
|
||||
<option value="justify" label="Justify"></option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="ql-format-group">
|
||||
<span title="Link" class="ql-format-button ql-link"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Create the editor container -->
|
||||
<div id="editor">
|
||||
<div id="quill-container">
|
||||
<div id="quill">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Include the Quill library -->
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js" type="text/javascript"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js" type="text/javascript"></script>
|
||||
<script src="../bower_components/quill/dist/quill.js"></script>
|
||||
<script src="../bower_components/yjs/y.es6"></script>
|
||||
<script src="./index.js"></script>
|
||||
|
||||
@ -7,8 +7,8 @@ Y({
|
||||
name: 'memory'
|
||||
},
|
||||
connector: {
|
||||
name: 'websockets-client',
|
||||
room: 'richtext-example'
|
||||
name: 'webrtc',
|
||||
room: 'richtext-example-quill-beta'
|
||||
},
|
||||
sourceDir: '/bower_components',
|
||||
share: {
|
||||
@ -18,13 +18,22 @@ Y({
|
||||
window.yQuill = y
|
||||
|
||||
// create quill element
|
||||
window.quill = new Quill('#editor', {
|
||||
window.quill = new Quill('#quill', {
|
||||
modules: {
|
||||
'toolbar': { container: '#toolbar' },
|
||||
'link-tooltip': true
|
||||
formula: true,
|
||||
syntax: true,
|
||||
toolbar: [
|
||||
[{ size: ['small', false, 'large', 'huge'] }],
|
||||
['bold', 'italic', 'underline'],
|
||||
[{ color: [] }, { background: [] }], // Snow theme fills in values
|
||||
[{ script: 'sub' }, { script: 'super' }],
|
||||
['link', 'image'],
|
||||
['link', 'code-block'],
|
||||
[{list: 'ordered' }]
|
||||
]
|
||||
},
|
||||
theme: 'snow'
|
||||
})
|
||||
});
|
||||
// bind quill to richtext type
|
||||
y.share.richtext.bind(window.quill)
|
||||
})
|
||||
|
||||
177
y.es6
177
y.es6
@ -951,12 +951,16 @@ module.exports = function (Y /* :any */) {
|
||||
}
|
||||
}
|
||||
if (defined == null) {
|
||||
var isGarbageCollected = yield* this.isGarbageCollected(op.id)
|
||||
var opid = op.id
|
||||
var isGarbageCollected = yield* this.isGarbageCollected(opid)
|
||||
if (!isGarbageCollected) {
|
||||
yield* Y.Struct[op.struct].execute.call(this, op)
|
||||
yield* this.addOperation(op)
|
||||
yield* this.store.operationAdded(this, op)
|
||||
|
||||
if (!Y.utils.compareIds(opid, op.id)) {
|
||||
// operationAdded changed op
|
||||
op = yield* this.getOperation(opid)
|
||||
}
|
||||
// if insertion, try to combine with left
|
||||
yield* this.tryCombineWithLeft(op)
|
||||
}
|
||||
@ -2695,6 +2699,153 @@ module.exports = function (Y /* : any*/) {
|
||||
receivedOp (op) {
|
||||
if (this.awaiting <= 0) {
|
||||
this.onevent(op)
|
||||
} else if (op.struct === 'Delete') {
|
||||
var self = this
|
||||
function checkDelete (d) {
|
||||
if (d.length == null) {
|
||||
throw new Error('This shouldn\'t happen! d.length must be defined!')
|
||||
}
|
||||
// we check if o deletes something in self.waiting
|
||||
// if so, we remove the deleted operation
|
||||
for (var w = 0; w < self.waiting.length; w++) {
|
||||
var i = self.waiting[w]
|
||||
if (i.struct === 'Insert' && i.id[0] === d.target[0]) {
|
||||
var iLength = i.hasOwnProperty('content') ? i.content.length : 1
|
||||
var dStart = d.target[1]
|
||||
var dEnd = d.target[1] + (d.length || 1)
|
||||
var iStart = i.id[1]
|
||||
var iEnd = i.id[1] + iLength
|
||||
// Check if they don't overlap
|
||||
if (iEnd <= dStart || dEnd <= iStart) {
|
||||
// no overlapping
|
||||
continue
|
||||
}
|
||||
// we check all overlapping cases. All cases:
|
||||
/*
|
||||
1) iiiii
|
||||
ddddd
|
||||
--> modify i and d
|
||||
2) iiiiiii
|
||||
ddddd
|
||||
--> modify i, remove d
|
||||
3) iiiiiii
|
||||
ddd
|
||||
--> remove d, modify i, and create another i (for the right hand side)
|
||||
4) iiiii
|
||||
ddddddd
|
||||
--> remove i, modify d
|
||||
5) iiiiiii
|
||||
ddddddd
|
||||
--> remove both i and d (**)
|
||||
6) iiiiiii
|
||||
ddddd
|
||||
--> modify i, remove d
|
||||
7) iii
|
||||
ddddddd
|
||||
--> remove i, create and apply two d with checkDelete(d) (**)
|
||||
8) iiiii
|
||||
ddddddd
|
||||
--> remove i, modify d (**)
|
||||
9) iiiii
|
||||
ddddd
|
||||
--> modify i and d
|
||||
(**) (also check if i contains content or type)
|
||||
*/
|
||||
// TODO: I left some debugger statements, because I want to debug all cases once in production. REMEMBER END TODO
|
||||
if (iStart < dStart) {
|
||||
if (dStart < iEnd) {
|
||||
if (iEnd < dEnd) {
|
||||
// Case 1
|
||||
// remove the right part of i's content
|
||||
i.content.splice(dStart - iStart)
|
||||
// remove the start of d's deletion
|
||||
d.length = dEnd - iEnd
|
||||
d.target = [d.target[0], iEnd]
|
||||
continue
|
||||
} else if (iEnd === dEnd) {
|
||||
// Case 2
|
||||
i.content.splice(dStart - iStart)
|
||||
// remove d, we do that by simply ending this function
|
||||
return
|
||||
} else { // (dEnd < iEnd)
|
||||
// Case 3
|
||||
var newI = {
|
||||
id: [i.id[0], dEnd],
|
||||
content: i.content.slice(dEnd - iStart),
|
||||
struct: 'Insert'
|
||||
}
|
||||
self.waiting.push(newI)
|
||||
i.content.splice(dStart - iStart)
|
||||
return
|
||||
}
|
||||
}
|
||||
} else if (dStart === iStart) {
|
||||
if (iEnd < dEnd) {
|
||||
// Case 4
|
||||
d.length = dEnd - iEnd
|
||||
d.target = [d.target[0], iEnd]
|
||||
i.content = []
|
||||
continue
|
||||
} else if (iEnd === dEnd) {
|
||||
// Case 5
|
||||
self.waiting.splice(w, 1)
|
||||
return
|
||||
} else { // (dEnd < iEnd)
|
||||
// Case 6
|
||||
i.content = i.content.slice(dEnd - iStart)
|
||||
i.id = [i.id[0], dEnd]
|
||||
return
|
||||
}
|
||||
} else { // (dStart < iStart)
|
||||
if (iStart < dEnd) {
|
||||
// they overlap
|
||||
/*
|
||||
7) iii
|
||||
ddddddd
|
||||
--> remove i, create and apply two d with checkDelete(d) (**)
|
||||
8) iiiii
|
||||
ddddddd
|
||||
--> remove i, modify d (**)
|
||||
9) iiiii
|
||||
ddddd
|
||||
--> modify i and d
|
||||
*/
|
||||
if (iEnd < dEnd) {
|
||||
// Case 7
|
||||
debugger
|
||||
self.waiting.splice(w, 1)
|
||||
checkDelete({
|
||||
target: [d.target[0], dStart],
|
||||
length: iStart - dStart,
|
||||
struct: 'Delete'
|
||||
})
|
||||
checkDelete({
|
||||
target: [d.target[0], iEnd],
|
||||
length: iEnd - dEnd,
|
||||
struct: 'Delete'
|
||||
})
|
||||
return
|
||||
} else if (iEnd === dEnd) {
|
||||
// Case 8
|
||||
self.waiting.splice(w, 1)
|
||||
w--
|
||||
d.length -= iLength
|
||||
continue
|
||||
} else { // dEnd < iEnd
|
||||
// Case 9
|
||||
d.length = iStart - dStart
|
||||
i.content.splice(0, dEnd - iStart)
|
||||
i.id = [i.id[0], dEnd]
|
||||
continue
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// finished with remaining operations
|
||||
self.waiting.push(d)
|
||||
}
|
||||
checkDelete(op)
|
||||
} else {
|
||||
this.waiting.push(op)
|
||||
}
|
||||
@ -2779,11 +2930,27 @@ module.exports = function (Y /* : any*/) {
|
||||
ins.push(o)
|
||||
}
|
||||
})
|
||||
this.waiting = []
|
||||
// put in executable order
|
||||
ins = notSoSmartSort(ins)
|
||||
ins.forEach(this.onevent)
|
||||
dels.forEach(this.onevent)
|
||||
this.waiting = []
|
||||
// this.onevent can trigger the creation of another operation
|
||||
// -> check if this.awaiting increased & stop computation if it does
|
||||
for (var i = 0; i < ins.length; i++) {
|
||||
if (this.awaiting === 0) {
|
||||
this.onevent(ins[i])
|
||||
} else {
|
||||
this.waiting = this.waiting.concat(ins.slice(i))
|
||||
break
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < dels.length; i++) {
|
||||
if (this.awaiting === 0) {
|
||||
this.onevent(dels[i])
|
||||
} else {
|
||||
this.waiting = this.waiting.concat(dels.slice(i))
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user