Upgrade rich-text and rich-text-presence example to Quill 2.0.2

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');
 

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"
   }
 }

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'
+};

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

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"
   }
 }

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'
+};