Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
872ccbf
Upgrade rich-text-presence example to Quill 2.0.2
horner Oct 6, 2024
bf35ca5
Update package.json with babel dev dep
horner Oct 6, 2024
41b986f
updated rich-text example with Quill 2
horner Oct 6, 2024
bb56a4a
Update webpack.config.js
horner Oct 6, 2024
e845f87
Update webpack.config.js
horner Oct 6, 2024
2f39ee7
Removed babel dependancy
horner Oct 23, 2024
bbf90af
Update package.json to remove unnecessary deps
horner Nov 20, 2024
ac8f1dd
Update index.html to remove unnecessary css
horner Nov 20, 2024
0196849
Update webpack.config.js removed unnecessary config
horner Nov 20, 2024
93e17a8
Merge branch 'share:master' into quill2
horner Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions examples/rich-text-presence/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason in particular for changing the theme?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The theme has a toolbar. It is easier to test behavior cursor and the toolbar interactions with it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤷🏼‍♂️ 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.

modules: {
cursors: true,
toolbar: true,
}
});
var cursors = quill.getModule('cursors');

Expand Down
10 changes: 7 additions & 3 deletions examples/rich-text-presence/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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",
Expand All @@ -27,6 +27,10 @@
"ws": "^8.12.1"
},
"devDependencies": {
"browserify": "^17.0.0"
"@babel/core": "^7.25.7",
"@babel/preset-env": "^7.25.7",
"babel-loader": "^9.2.1",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unneeded.

"webpack": "^5.88.2",
"webpack-cli": "^5.1.4"
}
}
1 change: 1 addition & 0 deletions examples/rich-text-presence/static/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're changing theme here, please remove bubble.css

<link href="style.css" rel="stylesheet">

<div class="controls">
Expand Down
27 changes: 27 additions & 0 deletions examples/rich-text-presence/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
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/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
resolve: {
extensions: ['.js']
},
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As above: unneeded; please remove

mode: 'development'
};
8 changes: 4 additions & 4 deletions examples/rich-text/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
12 changes: 9 additions & 3 deletions examples/rich-text/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -15,14 +15,20 @@
"license": "MIT",
"dependencies": {
"@teamwork/websocket-json-stream": "^2.0.0",
"bson-objectid": "^2.0.4",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not used in this example

"express": "^4.18.2",
"quill": "^1.3.7",
"quill": "^2.0.2",
"quill-cursors": "^4.0.2",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not used in this example

"reconnecting-websocket": "^4.4.0",
"rich-text": "^4.1.0",
"sharedb": "^3.3.0",
"ws": "^8.12.1"
},
"devDependencies": {
"browserify": "^17.0.0"
"@babel/core": "^7.25.7",
"@babel/preset-env": "^7.25.7",
"babel-loader": "^9.2.1",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

"webpack": "^5.88.2",
"webpack-cli": "^5.1.4"
}
}
27 changes: 27 additions & 0 deletions examples/rich-text/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
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/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As noted above, I don't think this is needed. Let's remove to keep as minimalist as possible.

resolve: {
extensions: ['.js']
},
Comment on lines +17 to +19
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You actually also don't need this.

mode: 'development'
};