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

added quill example

Browse Source
This commit is contained in:
Kevin Jahns 2015-12-27 14:57:23 +01:00
parent 8ba1e4ce27
commit f18a6ee151
7 changed files with 166 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
Examples/Quill/index.html
View File

@ -15,22 +15,136 @@
<body> <body>
<div id="quill"> <div id="quill">
<!-- Create the toolbar container --> <!-- Create the toolbar container -->
<div id="toolbar"> <div id="toolbar" class="toolbar">
<button class="ql-bold">Bold</button> <span class="ql-format-group">
<button class="ql-italic">Italic</button> <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> </div>
<!-- Create the editor container --> <!-- Create the editor container -->
<div id="editor"> <div id="editor">
<div>Hello World!</div> <div>Hello World!</div>
<div>Some initial <b>bold</b> text</div> <div>Some initial <b>bold</b> text</div>
<div><br></div> <div>
<br>
</div>
</div> </div>
</div> </div>
<!-- Include the Quill library --> <!-- Include the Quill library -->
<script src="../bower_components/quill/dist/quill.js"></script> <script src="../bower_components/quill/dist/quill.js"></script>
<script src="../bower_components/yjs/y.js"></script> <script src="../bower_components/yjs/y.es6"></script>
<script src="./index.js"></script> <script src="./index.js"></script>
</body> </body>
</html> </html>

12
Examples/Quill/index.js
View File

@ -8,7 +8,7 @@ Y({
}, },
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
room: 'richtext-example' room: 'richtext-example17'
// debug: true // debug: true
// url: 'http://127.0.0.1:2345' // url: 'http://127.0.0.1:2345'
}, },
@ -19,12 +19,14 @@ Y({
}).then(function (y) { }).then(function (y) {
window.y = y window.y = y
// bind the textarea to a shared text element // create quill element
var quill = new Quill('#editor', { window.quill = new Quill('#editor', {
modules: { modules: {
'toolbar': { container: '#toolbar' } 'toolbar': { container: '#toolbar' },
'link-tooltip': true
}, },
theme: 'snow' theme: 'snow'
}) })
y.share.richtext.bind(quill) // bind quill to richtext type
y.share.richtext.bind(window.quill)
}) })

2
Examples/Textarea/index.js
View File

@ -7,7 +7,7 @@ Y({
}, },
connector: { connector: {
name: 'websockets-client', name: 'websockets-client',
room: 'Textarea-example' room: 'Textarea-example-dev'
// debug: true // debug: true
// url: 'http://127.0.0.1:2345' // url: 'http://127.0.0.1:2345'
}, },

1
README.md
View File

@ -144,3 +144,4 @@ Yjs is licensed under the [MIT License](./LICENSE.txt).
[ShareJs]: https://github.com/share/ShareJS [ShareJs]: https://github.com/share/ShareJS
[OpenCoweb]: https://github.com/opencoweb/coweb/wiki [OpenCoweb]: https://github.com/opencoweb/coweb/wiki

2
y.es6.map
View File

File diff suppressed because one or more lines are too long

83
y.js
View File

@ -112,9 +112,7 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
var hasOwn = Object.prototype.hasOwnProperty; var hasOwn = Object.prototype.hasOwnProperty;
var undefined; // More compressible than void 0. var undefined; // More compressible than void 0.
var $Symbol = typeof Symbol === "function" ? Symbol : {}; var iteratorSymbol = typeof Symbol === "function" && Symbol.iterator || "@@iterator";
var iteratorSymbol = $Symbol.iterator || "@@iterator";
var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
var inModule = (typeof module === "undefined" ? "undefined" : _typeof(module)) === "object"; var inModule = (typeof module === "undefined" ? "undefined" : _typeof(module)) === "object";
var runtime = global.regeneratorRuntime; var runtime = global.regeneratorRuntime;
@ -184,7 +182,7 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype; var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype;
GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype; GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
GeneratorFunctionPrototype.constructor = GeneratorFunction; GeneratorFunctionPrototype.constructor = GeneratorFunction;
GeneratorFunctionPrototype[toStringTagSymbol] = GeneratorFunction.displayName = "GeneratorFunction"; GeneratorFunction.displayName = "GeneratorFunction";
// Helper for defining the .next, .throw, and .return methods of the // Helper for defining the .next, .throw, and .return methods of the
// Iterator interface in terms of a single ._invoke method. // Iterator interface in terms of a single ._invoke method.
@ -209,9 +207,6 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
Object.setPrototypeOf(genFun, GeneratorFunctionPrototype); Object.setPrototypeOf(genFun, GeneratorFunctionPrototype);
} else { } else {
genFun.__proto__ = GeneratorFunctionPrototype; genFun.__proto__ = GeneratorFunctionPrototype;
if (!(toStringTagSymbol in genFun)) {
genFun[toStringTagSymbol] = "GeneratorFunction";
}
} }
genFun.prototype = Object.create(Gp); genFun.prototype = Object.create(Gp);
return genFun; return genFun;
@ -231,54 +226,44 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
} }
function AsyncIterator(generator) { function AsyncIterator(generator) {
function invoke(method, arg, resolve, reject) { // This invoke function is written in a style that assumes some
var record = tryCatch(generator[method], generator, arg); // calling function (or Promise) will handle exceptions.
if (record.type === "throw") { function invoke(method, arg) {
reject(record.arg); var result = generator[method](arg);
} else { var value = result.value;
var result = record.arg; return value instanceof AwaitArgument ? Promise.resolve(value.arg).then(invokeNext, invokeThrow) : Promise.resolve(value).then(function (unwrapped) {
var value = result.value; // When a yielded Promise is resolved, its final value becomes
if (value instanceof AwaitArgument) { // the .value of the Promise<{value,done}> result for the
return Promise.resolve(value.arg).then(function (value) { // current iteration. If the Promise is rejected, however, the
invoke("next", value, resolve, reject); // result for this iteration will be rejected with the same
}, function (err) { // reason. Note that rejections of yielded Promises are not
invoke("throw", err, resolve, reject); // thrown back into the generator function, as is the case
}); // when an awaited Promise is rejected. This difference in
} // behavior between yield and await is important, because it
// allows the consumer to decide what to do with the yielded
return Promise.resolve(value).then(function (unwrapped) { // rejection (swallow it and continue, manually .throw it back
// When a yielded Promise is resolved, its final value becomes // into the generator, abandon iteration, whatever). With
// the .value of the Promise<{value,done}> result for the // await, by contrast, there is no opportunity to examine the
// current iteration. If the Promise is rejected, however, the // rejection reason outside the generator function, so the
// result for this iteration will be rejected with the same // only option is to throw it from the await expression, and
// reason. Note that rejections of yielded Promises are not // let the generator function handle the exception.
// thrown back into the generator function, as is the case result.value = unwrapped;
// when an awaited Promise is rejected. This difference in return result;
// behavior between yield and await is important, because it });
// allows the consumer to decide what to do with the yielded
// rejection (swallow it and continue, manually .throw it back
// into the generator, abandon iteration, whatever). With
// await, by contrast, there is no opportunity to examine the
// rejection reason outside the generator function, so the
// only option is to throw it from the await expression, and
// let the generator function handle the exception.
result.value = unwrapped;
resolve(result);
}, reject);
}
} }
if ((typeof process === "undefined" ? "undefined" : _typeof(process)) === "object" && process.domain) { if ((typeof process === "undefined" ? "undefined" : _typeof(process)) === "object" && process.domain) {
invoke = process.domain.bind(invoke); invoke = process.domain.bind(invoke);
} }
var invokeNext = invoke.bind(generator, "next");
var invokeThrow = invoke.bind(generator, "throw");
var invokeReturn = invoke.bind(generator, "return");
var previousPromise; var previousPromise;
function enqueue(method, arg) { function enqueue(method, arg) {
function callInvokeWithMethodAndArg() { function callInvokeWithMethodAndArg() {
return new Promise(function (resolve, reject) { return invoke(method, arg);
invoke(method, arg, resolve, reject);
});
} }
return previousPromise = return previousPromise =
@ -297,7 +282,9 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, previousPromise ? previousPromise.then(callInvokeWithMethodAndArg,
// Avoid propagating failures to Promises returned by later // Avoid propagating failures to Promises returned by later
// invocations of the iterator. // invocations of the iterator.
callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); callInvokeWithMethodAndArg) : new Promise(function (resolve) {
resolve(callInvokeWithMethodAndArg());
});
} }
// Define the unified helper method that is used to implement .next, // Define the unified helper method that is used to implement .next,
@ -459,8 +446,6 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
return this; return this;
}; };
Gp[toStringTagSymbol] = "Generator";
Gp.toString = function () { Gp.toString = function () {
return "[object Generator]"; return "[object Generator]";
}; };
@ -5027,4 +5012,4 @@ if (typeof window !== 'undefined') {
},{"./Connector.js":3,"./Connectors/Test.js":4,"./Database.js":5,"./Struct.js":6,"./Transaction.js":7,"./Utils.js":8}]},{},[2,9]) },{"./Connector.js":3,"./Connectors/Test.js":4,"./Database.js":5,"./Struct.js":6,"./Transaction.js":7,"./Utils.js":8}]},{},[2,9])
//# sourceMappingURL=y.js.map //# sourceMappingURL=y.js.map

2
y.js.map
View File

File diff suppressed because one or more lines are too long