diff --git a/examples/rich-text-presence/client.js b/examples/rich-text-presence/client.js index efe354423..0c163ed3e 100644 --- a/examples/rich-text-presence/client.js +++ b/examples/rich-text-presence/client.js @@ -1,10 +1,10 @@ -var ReconnectingWebSocket = require('reconnecting-websocket'); -var sharedb = require('sharedb/lib/client'); -var richText = require('rich-text'); -var Quill = require('quill'); -var QuillCursors = require('quill-cursors'); -var tinycolor = require('tinycolor2'); -var ObjectID = require('bson-objectid'); +import ReconnectingWebSocket from 'reconnecting-websocket'; +import sharedb from 'sharedb/lib/client'; +import richText from 'rich-text'; +import Quill from 'quill'; +import QuillCursors from 'quill-cursors'; +import tinycolor from 'tinycolor2'; +import ObjectID from 'bson-objectid'; sharedb.types.register(richText.type); Quill.register('modules/cursors', QuillCursors); @@ -36,9 +36,12 @@ doc.subscribe(function(err) { }); function initialiseQuill(doc) { - var quill = new Quill('#editor', { - theme: 'bubble', - modules: {cursors: true} + var quill = new Quill('#editor', { + theme: 'snow', + modules: { + cursors: true, + toolbar: true, + } }); var cursors = quill.getModule('cursors'); diff --git a/examples/rich-text-presence/package.json b/examples/rich-text-presence/package.json index d06e38021..48ab8bfde 100644 --- a/examples/rich-text-presence/package.json +++ b/examples/rich-text-presence/package.json @@ -4,7 +4,7 @@ "description": "An example of presence using ShareDB and Quill", "main": "server.js", "scripts": { - "build": "browserify client.js -o static/dist/bundle.js", + "build": "webpack --mode development", "test": "echo \"Error: no test specified\" && exit 1", "start": "node server.js" }, @@ -18,7 +18,7 @@ "@teamwork/websocket-json-stream": "^2.0.0", "bson-objectid": "^2.0.4", "express": "^4.18.2", - "quill": "^1.3.7", + "quill": "^2.0.2", "quill-cursors": "^4.0.2", "reconnecting-websocket": "^4.4.0", "rich-text": "^4.1.0", @@ -27,6 +27,7 @@ "ws": "^8.12.1" }, "devDependencies": { - "browserify": "^17.0.0" + "webpack": "^5.88.2", + "webpack-cli": "^5.1.4" } } diff --git a/examples/rich-text-presence/webpack.config.js b/examples/rich-text-presence/webpack.config.js new file mode 100644 index 000000000..5a056b09d --- /dev/null +++ b/examples/rich-text-presence/webpack.config.js @@ -0,0 +1,21 @@ +const path = require('path'); + +module.exports = { + entry: './client.js', + output: { + path: path.resolve(__dirname, 'static/dist'), + filename: 'bundle.js' + }, + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + } + ] + }, + resolve: { + extensions: ['.js'] + }, + mode: 'development' +}; diff --git a/examples/rich-text/client.js b/examples/rich-text/client.js index 3e989306d..3bc44aa3b 100644 --- a/examples/rich-text/client.js +++ b/examples/rich-text/client.js @@ -1,7 +1,7 @@ -var ReconnectingWebSocket = require('reconnecting-websocket'); -var sharedb = require('sharedb/lib/client'); -var richText = require('rich-text'); -var Quill = require('quill'); +import ReconnectingWebSocket from 'reconnecting-websocket'; +import sharedb from 'sharedb/lib/client'; +import richText from 'rich-text'; +import Quill from 'quill'; sharedb.types.register(richText.type); // Open WebSocket connection to ShareDB server diff --git a/examples/rich-text/package.json b/examples/rich-text/package.json index fe49a5ae5..4bb8ccc57 100644 --- a/examples/rich-text/package.json +++ b/examples/rich-text/package.json @@ -4,7 +4,7 @@ "description": "A simple rich-text editor example based on Quill and ShareDB", "main": "server.js", "scripts": { - "build": "browserify client.js -o static/dist/bundle.js", + "build": "webpack --mode development", "test": "echo \"Error: no test specified\" && exit 1", "start": "node server.js" }, @@ -16,13 +16,14 @@ "dependencies": { "@teamwork/websocket-json-stream": "^2.0.0", "express": "^4.18.2", - "quill": "^1.3.7", + "quill": "^2.0.2", "reconnecting-websocket": "^4.4.0", "rich-text": "^4.1.0", "sharedb": "^3.3.0", "ws": "^8.12.1" }, "devDependencies": { - "browserify": "^17.0.0" + "webpack": "^5.88.2", + "webpack-cli": "^5.1.4" } } diff --git a/examples/rich-text/webpack.config.js b/examples/rich-text/webpack.config.js new file mode 100644 index 000000000..5a056b09d --- /dev/null +++ b/examples/rich-text/webpack.config.js @@ -0,0 +1,21 @@ +const path = require('path'); + +module.exports = { + entry: './client.js', + output: { + path: path.resolve(__dirname, 'static/dist'), + filename: 'bundle.js' + }, + module: { + rules: [ + { + test: /\.js$/, + exclude: /node_modules/, + } + ] + }, + resolve: { + extensions: ['.js'] + }, + mode: 'development' +};