added quill example
This commit is contained in:
Kevin Jahns
parent
8ba1e4ce27
commit
f18a6ee151
@ -15,22 +15,136 @@
|
||||
<body>
|
||||
<div id="quill">
|
||||
<!-- Create the toolbar container -->
|
||||
<div id="toolbar">
|
||||
<button class="ql-bold">Bold</button>
|
||||
<button class="ql-italic">Italic</button>
|
||||
<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>Hello World!</div>
|
||||
<div>Some initial <b>bold</b> text</div>
|
||||
<div><br></div>
|
||||
<div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Include the Quill library -->
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -8,7 +8,7 @@ Y({
|
||||
},
|
||||
connector: {
|
||||
name: 'websockets-client',
|
||||
room: 'richtext-example'
|
||||
room: 'richtext-example17'
|
||||
// debug: true
|
||||
// url: 'http://127.0.0.1:2345'
|
||||
},
|
||||
@ -19,12 +19,14 @@ Y({
|
||||
}).then(function (y) {
|
||||
window.y = y
|
||||
|
||||
// bind the textarea to a shared text element
|
||||
var quill = new Quill('#editor', {
|
||||
// create quill element
|
||||
window.quill = new Quill('#editor', {
|
||||
modules: {
|
||||
'toolbar': { container: '#toolbar' }
|
||||
'toolbar': { container: '#toolbar' },
|
||||
'link-tooltip': true
|
||||
},
|
||||
theme: 'snow'
|
||||
})
|
||||
y.share.richtext.bind(quill)
|
||||
// bind quill to richtext type
|
||||
y.share.richtext.bind(window.quill)
|
||||
})
|
||||
|
||||
@ -7,7 +7,7 @@ Y({
|
||||
},
|
||||
connector: {
|
||||
name: 'websockets-client',
|
||||
room: 'Textarea-example'
|
||||
room: 'Textarea-example-dev'
|
||||
// debug: true
|
||||
// url: 'http://127.0.0.1:2345'
|
||||
},
|
||||
|
||||
@ -144,3 +144,4 @@ Yjs is licensed under the [MIT License](./LICENSE.txt).
|
||||
|
||||
[ShareJs]: https://github.com/share/ShareJS
|
||||
[OpenCoweb]: https://github.com/opencoweb/coweb/wiki
|
||||
|
||||
|
||||
83
y.js
83
y.js
@ -112,9 +112,7 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
|
||||
|
||||
var hasOwn = Object.prototype.hasOwnProperty;
|
||||
var undefined; // More compressible than void 0.
|
||||
var $Symbol = typeof Symbol === "function" ? Symbol : {};
|
||||
var iteratorSymbol = $Symbol.iterator || "@@iterator";
|
||||
var toStringTagSymbol = $Symbol.toStringTag || "@@toStringTag";
|
||||
var iteratorSymbol = typeof Symbol === "function" && Symbol.iterator || "@@iterator";
|
||||
|
||||
var inModule = (typeof module === "undefined" ? "undefined" : _typeof(module)) === "object";
|
||||
var runtime = global.regeneratorRuntime;
|
||||
@ -184,7 +182,7 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
|
||||
var Gp = GeneratorFunctionPrototype.prototype = Generator.prototype;
|
||||
GeneratorFunction.prototype = Gp.constructor = GeneratorFunctionPrototype;
|
||||
GeneratorFunctionPrototype.constructor = GeneratorFunction;
|
||||
GeneratorFunctionPrototype[toStringTagSymbol] = GeneratorFunction.displayName = "GeneratorFunction";
|
||||
GeneratorFunction.displayName = "GeneratorFunction";
|
||||
|
||||
// Helper for defining the .next, .throw, and .return methods of the
|
||||
// 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);
|
||||
} else {
|
||||
genFun.__proto__ = GeneratorFunctionPrototype;
|
||||
if (!(toStringTagSymbol in genFun)) {
|
||||
genFun[toStringTagSymbol] = "GeneratorFunction";
|
||||
}
|
||||
}
|
||||
genFun.prototype = Object.create(Gp);
|
||||
return genFun;
|
||||
@ -231,54 +226,44 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
|
||||
}
|
||||
|
||||
function AsyncIterator(generator) {
|
||||
function invoke(method, arg, resolve, reject) {
|
||||
var record = tryCatch(generator[method], generator, arg);
|
||||
if (record.type === "throw") {
|
||||
reject(record.arg);
|
||||
} else {
|
||||
var result = record.arg;
|
||||
var value = result.value;
|
||||
if (value instanceof AwaitArgument) {
|
||||
return Promise.resolve(value.arg).then(function (value) {
|
||||
invoke("next", value, resolve, reject);
|
||||
}, function (err) {
|
||||
invoke("throw", err, resolve, reject);
|
||||
});
|
||||
}
|
||||
|
||||
return Promise.resolve(value).then(function (unwrapped) {
|
||||
// When a yielded Promise is resolved, its final value becomes
|
||||
// the .value of the Promise<{value,done}> result for the
|
||||
// current iteration. If the Promise is rejected, however, the
|
||||
// result for this iteration will be rejected with the same
|
||||
// reason. Note that rejections of yielded Promises are not
|
||||
// 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
|
||||
// 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);
|
||||
}
|
||||
// This invoke function is written in a style that assumes some
|
||||
// calling function (or Promise) will handle exceptions.
|
||||
function invoke(method, arg) {
|
||||
var result = generator[method](arg);
|
||||
var value = result.value;
|
||||
return value instanceof AwaitArgument ? Promise.resolve(value.arg).then(invokeNext, invokeThrow) : Promise.resolve(value).then(function (unwrapped) {
|
||||
// When a yielded Promise is resolved, its final value becomes
|
||||
// the .value of the Promise<{value,done}> result for the
|
||||
// current iteration. If the Promise is rejected, however, the
|
||||
// result for this iteration will be rejected with the same
|
||||
// reason. Note that rejections of yielded Promises are not
|
||||
// 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
|
||||
// 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;
|
||||
return result;
|
||||
});
|
||||
}
|
||||
|
||||
if ((typeof process === "undefined" ? "undefined" : _typeof(process)) === "object" && process.domain) {
|
||||
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;
|
||||
|
||||
function enqueue(method, arg) {
|
||||
function callInvokeWithMethodAndArg() {
|
||||
return new Promise(function (resolve, reject) {
|
||||
invoke(method, arg, resolve, reject);
|
||||
});
|
||||
return invoke(method, arg);
|
||||
}
|
||||
|
||||
return previousPromise =
|
||||
@ -297,7 +282,9 @@ function _typeof(obj) { return obj && typeof Symbol !== "undefined" && obj.const
|
||||
previousPromise ? previousPromise.then(callInvokeWithMethodAndArg,
|
||||
// Avoid propagating failures to Promises returned by later
|
||||
// invocations of the iterator.
|
||||
callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
|
||||
callInvokeWithMethodAndArg) : new Promise(function (resolve) {
|
||||
resolve(callInvokeWithMethodAndArg());
|
||||
});
|
||||
}
|
||||
|
||||
// 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;
|
||||
};
|
||||
|
||||
Gp[toStringTagSymbol] = "Generator";
|
||||
|
||||
Gp.toString = function () {
|
||||
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])
|
||||
|
||||
|
||||
//# sourceMappingURL=y.js.map
|
||||
//# sourceMappingURL=y.js.map
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user