hackerwins / codepair-old Goto Github PK
View Code? Open in Web Editor NEWReal-time markdown editor for interviews, meetings and more...
Home Page: https://codepair.yorkie.dev
License: Apache License 2.0
Real-time markdown editor for interviews, meetings and more...
Home Page: https://codepair.yorkie.dev
License: Apache License 2.0
Description:
implement a backend
Why:
yorkie-sdk-js
needs from a users' point of viewbest practice
#13
Sentry Issue: CODEPAIR-3
Error: YORKIE F: insPrev should be presence
at fatal (../yorkie/src/util/logger.ts:99:11)
at findFloorNodePreferToLeft (../yorkie/src/document/json/rga_tree_split.ts:512:16)
at findIdxFromNodePos (../yorkie/src/document/json/rga_tree_split.ts:386:14)
at findIndexesFromRange (../yorkie/src/document/json/rga_tree_split.ts:376:12)
at updateSelectionPriv (../yorkie/src/document/json/plain_text.ts:183:44)
...
(31 additional frame(s) were not displayed)
Description:
Make Drawing Board support Retina display.
Why:
Users can see sharper lines on the drawing board.
What happened:
Inconsistency between CodeMirror and Document receiving changes from remote.
Client1: Client2:
[CodeMirror <-✅-> Document] <-✅-> [Document <-❌-> CodeMirror]
What you expected to happen:
Inconsistency should not occur.
How to reproduce it (as minimally and precisely as possible):
Occurs when repeating copy&paste.
Anything else we need to know?:
Environment:
Sentry Issue: CODEPAIR-8
ReferenceError: TouchEvent is not defined
at getMouse (components/Editor/Board/Canvas/Container.ts:99:9)
at apply (components/Editor/Board/Canvas/Container.ts:126:24)
at n (../../src/helpers.ts:87:17)
I think it's a bug in the code below that handles position fixed.
This doesn't take into account when the user is scrolling, so we have to handle it differently..!
76df820#diff-2ac834b2fd748560fbce5f2c546e39e543d22edbd12fc769cc4f3ab389a66e6aR48
Codemirror default style is preventing a number of solutions, and changing the default styling seems to be a problem.
.CodeMirror {
overflow: hidden !important;
}
.CodeMirror-scroll {
overflow: scroll !important;
}
What happened:
I am getting script errors intermittently: YORKIE F: out of bound of text index: pos: 1 > node.length: 0
What you expected to happen:
How to reproduce it (as minimally and precisely as possible):
I couldn't find a pattern to reproduce the bug.
Anything else we need to know?:
Yorkie's Documents seem to be synchronizing properly between peers. The problem is caused by a content mismatch between CodeMirror and Document.
Client1: Client2:
[CodeMirror <-> Document] <-> [Document <-> CodeMirror]
Environment:
Operating system: macOS Big Sur, Version 11.1
Browser and version: Chrome Version 88.0.4324.96
Description:
Use the type provided by yorkie-js-sdk
Why:
we can code by knowing the parts provided by yorkie-js-sdk better.
Sentry Issue: CODEPAIR-7
TypeError: e.toggleComment is not a function
at HTMLTextAreaElement.n (../../src/helpers.ts:87:17)
...
(6 additional frame(s) were not displayed)
Sentry Issue: CODEPAIR-P
Error: YORKIE F: out of bound of text index: pos: 132 > node.length: 1
at fatal (../yorkie/src/util/logger.ts:103:15)
at find (../yorkie/src/util/splay_tree.ts:202:14)
at getByIndex (../yorkie/src/document/json/rga_tree_list.ts:295:48)
at getByIndex (../yorkie/src/document/json/array.ts:82:32)
at arr (../yorkie/src/document/proxy/array_proxy.ts:99:42)
...
(11 additional frame(s) were not displayed)
We haven't yet chosen the TypeScript style guide, so the discussion of style in PR is growing unnecessarily.
Like this: #10 (comment)
We have to decide on a style guide.
Users can see other people's cursors in the code editor.
@hackerwins
When currently connected, sync is called before subscribe, so the initial peers are not known.
To Get To Know Early Peers
we need to do client.subscribe
execution before client.sync
ref client.sync
ref client.subscribe
So I think there are two ways
sync
from attachDocI think (2) is better
I think sync is different from attach..
what do you think?
If we run it(1) in attachDoc, it will look like this
export const attachDoc = createAsyncThunk<AttachDocResult, AttachDocProps, { rejectValue: string }>(
'doc/attach',
async ({ docKey, subscribeClient }: AttachDocProps, thunkApi) => {
try {
const client = yorkie.createClient(`${process.env.REACT_APP_YORKIE_RPC_ADDR}`);
const document = yorkie.createDocument('codepairs', docKey);
await client.activate();
await client.attach(document);
document.update((root: any) => {
if (!root.content) {
root.createText('content');
}
});
let unSubscribeClient;
if (subscribeClient) {
unSubscribeClient = subscribeClient(client);
}
await client.sync();
return { document, client, unSubscribeClient };
} catch (err) {
return thunkApi.rejectWithValue(err);
}
},
);
It will be pulled from https://github.com/yorkie-team/yorkie-js-sdk/blob/master/CONTRIBUTING.md
Sentry Issue: CODEPAIR-6
TypeError: Cannot read property 'getValue' of undefined
at get (../yorkie/src/document/json/rga_tree_list.ts:207:56)
at get (../yorkie/src/document/json/array.ts:57:26)
at getElementByID (../yorkie/src/document/proxy/array_proxy.ts:54:44)
at updater (components/Editor/Board/Canvas/worker.ts:69:41)
at update (../yorkie/src/document/document.ts:126:7)
...
(3 additional frame(s) were not displayed)
Description:
Codepair is displaying the coordinates of the screen as absolute values
We need to show dots on the screen according to the viewport.
Why:
All recorded dots must be displayed on the mobile environment and on screens with different resolution
If the resolution is different, the recorded point may not be visible.
Description:
We added basic features, line drawing and an eraser to the drawing board.
We need to add features such as line style or shapes so that users can draw more various content.
I think it will be helpful to refer to the UI of Jamboard or Zoom's annotation tool.
Why:
Users can draw various contents on the drawing board.
What happened:
When deleting a line, a script error occurs in the remote clients.
What you expected to happen:
How to reproduce it (as minimally and precisely as possible):
Anything else we need to know?:
I guess there is no exception handling when the remote clients only get one point.
Environment:
Description:
Why:
Description:
Improving repainting for the drawing board.
Currently, we are repainting all objects when changes are made from the remotes to the drawing objects. We only have to draw the changed objects.
Why:
Users can edit the drawing board in a comfortable environment.
Description: it looks great to support authorizaiton by password on CodePair console.
Why:
For example, Go Playground lets us share codes in a simple way. Although there is no password, they create a unique link to share on every click on the "share" button. I don't suggest a complex authorization but a minimal security (e.g. password) which is proper to CodePair because it is a simple pair programming service.
Description:
We need to set release tracking provided by Sentry.
Why:
We can determine issues and regressions introduced in releases.
Description:
Display network status. Google Docs is expressed as follows:
Why:
Editing works normally even when offline, but the changes are not saved on the server. We need to display to users that it is offline and that the network will need to be recovered before it will sync.
Description:
Calculate shapes into a matrix
Why:
We need to do matrix calculations to deal with shapes in depth
How about the printWidth size of 120?
.prettierrc.js
module.exports = {
bracketSpacing: true,
singleQuote: true,
trailingComma: 'all',
printWidth: 120,
tabWidth: 2,
};
```
Description:
When the user draws a path on the drawing board, too many operations are created because all points for the path are stored in the document. We can reduce the number of operations by introducing Douglas Peucker's algorithm that can reduce the given points.
EasyLogic Studio also uses the algorithm for path editing.
When users drawing a path, instead of inserting it directly into Yorkie's Document, the steps should be separated:
Why:
We can solve the problem of unnecessarily growing data when the user draws a path on the drawing board.
What happened:
I am getting script errors intermittently: Error: YORKIE F: the node of the given id should be found
What you expected to happen:
How to reproduce it (as minimally and precisely as possible):
Anything else we need to know?:
Environment:
Description:
While using the drawing board, I noticed some usability problems.
Why:
It is difficult to use in some cases.
Description:
Feature to clear all shapes on drawing board.
Why:
There are opinions from users that they wanted to clear the shapes during meetings.
Description:
GitHub Pages is not designed for SPA.
GitHub Pages doesn't natively support single page apps. When there is a fresh page load for a url like example.tld/foo, where /foo is a frontend route, the GitHub Pages server returns 404 because it knows nothing of /foo.
However, there seems to be a hack to solve this problem.
Why:
https://codepair.yorkie.dev/#/8zrto9
to https://codepair.yorkie.dev/8zrto9
Description:
Add eraser to Drawing Board.
The UI that deletes the line that touches the eraser like Zoom's Annotation tool looks good.
Why:
It is difficult to draw something because users cannot delete lines.
I used the following structure.
https://github.com/madhums/node-express-mongoose-demo
other structure
https://github.com/w3tecch/express-typescript-boilerplate
https://github.com/afteracademy/nodejs-backend-architecture-typescript
https://github.com/maximegris/typescript-express-sequelize
guide
https://github.com/mattdesl/module-best-practices
https://github.com/goldbergyoni/javascript-testing-best-practices
Description: CodePair set the username of each user as a random anonymous name. (e.g. well-made giraffe). If uses can modify their name after getting a random name, it will be useful.
Why:
When many people access same document, the names of all users are completely anonymous and random so we can't infer who the anonymous user is in real world.
Supposing there is three members named "David", "Mike", "Sarah", they will get random names like "occasional monkey", "funny puppy", "happy giraffee" on CodePair. In this case, members can't infer who "occasional monkey" is.
Description:
Employ Google Analytics.
Why:
In the current age of information, every successful business needs to know about their customers, what they care about the most. and the easiest way of doing this is to track them when they visit your website.
https://javascript.plainenglish.io/how-to-setup-and-add-google-analytics-to-your-react-app-fd361f47ac7b
What happened:
When a communication error with Agent occurs, the error tooltip does not appear.
What you expected to happen:
A tooltip should appear for the error.
How to reproduce it (as minimally and precisely as possible):
Connect to codepair with agent turned off.
Anything else we need to know?:
It is assumed that it does not work after refactoring. #43
Environment:
Description:
We need to support mobile devices to enables drawing on the board on the mobile device.
We can refer to the following code: yorkie-team/yorkie-team.github.io@5f0191f
Why:
Users can use CodePair on a variety of devices.
What happened:
We can't erase little dots.
What you expected to happen:
It is erased normally.
How to reproduce it (as minimally and precisely as possible):
Anything else we need to know?:
Environment:
Sentry Issue: CODEPAIR-6
Error: YORKIE F: fail to execute, only object can execute set
at fatal (../yorkie/src/util/logger.ts:103:11)
at execute (../yorkie/src/document/operation/set_operation.ts:66:14)
at execute (../yorkie/src/document/change/change.ts:93:17)
at applyChanges (../yorkie/src/document/document.ts:362:14)
at applyChangePack (../yorkie/src/document/document.ts:187:12)
...
(11 additional frame(s) were not displayed)
What happened: Drag part of other person's opacity is too high. So It's hard to recognize letters.
What you expected to happen: Darg part of other person should be near 0.1.
How to reproduce it (as minimally and precisely as possible): When drags text, text on another browser is dragged.
Environment:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.