Upgrade rich-text and rich-text-presence example to Quill 2.0.2 #683
Conversation
horner
changed the title
examples/rich-text/package.json
Outdated
| "express": "^4.18.2", | ||
| "quill": "^1.3.7", | ||
| "quill": "^2.0.2", | ||
| "quill-cursors": "^4.0.2", |
There was a problem hiding this comment.
Not used in this example
examples/rich-text/package.json
Outdated
| @@ -15,14 +15,20 @@ | |||
| "license": "MIT", | |||
| "dependencies": { | |||
| "@teamwork/websocket-json-stream": "^2.0.0", | |||
| "bson-objectid": "^2.0.4", | |||
There was a problem hiding this comment.
Not used in this example
examples/rich-text/package.json
Outdated
| "@babel/core": "^7.25.7", | ||
| "@babel/preset-env": "^7.25.7", | ||
| "babel-loader": "^9.2.1", |
There was a problem hiding this comment.
Do we need these? I think if you remove babel from the Webpack config, everything still runs (in a modern browser). If possible, let's keep these examples as bare-bones as possible (it's not within the scope of this library to inform consumers how to set up their build chain).
Similar comment applies for rich-text-presence.
examples/rich-text/webpack.config.js
Outdated
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.js$/, | ||
| exclude: /node_modules/, | ||
| use: { | ||
| loader: 'babel-loader', | ||
| options: { | ||
| presets: ['@babel/preset-env'] | ||
| } | ||
| } | ||
| } | ||
| ] | ||
| }, |
There was a problem hiding this comment.
As noted above, I don't think this is needed. Let's remove to keep as minimalist as possible.
| theme: 'bubble', | ||
| modules: {cursors: true} | ||
| var quill = new Quill('#editor', { | ||
| theme: 'snow', |
There was a problem hiding this comment.
Any reason in particular for changing the theme?
There was a problem hiding this comment.
The theme has a toolbar. It is easier to test behavior cursor and the toolbar interactions with it.
There was a problem hiding this comment.
🤷🏼♂️ I guess it doesn't matter which theme we use, but if you need to do any particularly in-depth testing with cursors and toolbar interaction, that should really be a concern of quill-cursors.
|
@alecgibson Thanks for the idea to KISS it. Babel removed. |
| theme: 'bubble', | ||
| modules: {cursors: true} | ||
| var quill = new Quill('#editor', { | ||
| theme: 'snow', |
There was a problem hiding this comment.
🤷🏼♂️ I guess it doesn't matter which theme we use, but if you need to do any particularly in-depth testing with cursors and toolbar interaction, that should really be a concern of quill-cursors.
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.js$/, | ||
| exclude: /node_modules/, | ||
| } | ||
| ] | ||
| }, |
There was a problem hiding this comment.
As I said before, this isn't needed.
Please remove.
| resolve: { | ||
| extensions: ['.js'] | ||
| }, |
There was a problem hiding this comment.
You actually also don't need this.
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.js$/, | ||
| exclude: /node_modules/, | ||
| use: { | ||
| loader: 'babel-loader', | ||
| options: { | ||
| presets: ['@babel/preset-env'] | ||
| } | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| resolve: { | ||
| extensions: ['.js'] | ||
| }, |
There was a problem hiding this comment.
As above: unneeded; please remove
| @@ -3,6 +3,7 @@ | |||
| <title>ShareDB Rich Text</title> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> | |||
| <link href="quill.bubble.css" rel="stylesheet"> | |||
| <link href="quill.snow.css" rel="stylesheet"> | |||
There was a problem hiding this comment.
If you're changing theme here, please remove bubble.css
| "@babel/core": "^7.25.7", | ||
| "@babel/preset-env": "^7.25.7", | ||
| "babel-loader": "^9.2.1", |
This pull request includes several updates to the
examples/rich-text-presenceproject, specifically to support Quill 2.0.2 and modernizing the build process, updating dependencies, and improving the user interface.Watch: Demo
The most important changes are summarized below:
Modernization of Build Process:
package.jsonto use Webpack for module bundling, replacing Browserify. Addedwebpackandwebpack-clitodevDependencies, and included a newwebpack.config.jsfile for configuration. (examples/rich-text-presence/package.json,examples/rich-text-presence/webpack.config.js) [1] [2] [3]Dependency Updates:
quilldependency from version^1.3.7to^2.0.2inpackage.json. (examples/rich-text-presence/package.json)Codebase Improvements:
requirestatements with ES6importstatements inclient.jsfor better compatibility with modern JavaScript standards. (examples/rich-text-presence/client.js)User Interface Enhancements:
snowtheme instead ofbubbleand added a toolbar module for enhanced editing capabilities. Correspondingly, added thequill.snow.cssstylesheet inindex.html. (examples/rich-text-presence/client.js,examples/rich-text-presence/static/index.html) [1] [2]