Skip to content

Commit

Permalink
Add RichText
Browse files Browse the repository at this point in the history
  • Loading branch information
@hackerwins
hackerwins committed May 1, 2020
1 parent ac8fb01 commit 4e43486
Show file tree
Hide file tree
Showing 23 changed files with 4,755 additions and 1,657 deletions.
156 changes: 113 additions & 43 deletions dist/quill.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,30 @@
textLogHolder.innerText = doc.getRootObject().content.getAnnotatedString();
}

function toDelta(doc) {
const obj = doc.getRootObject();
const deltas = [];
for (const val of obj.content.getValue()) {
deltas.push({
insert: val.content,
attributes: val.attributes,
});
}
return deltas;
}

function toAttributes(attrs) {
if (!attrs) {
return attrs;
}

const attributes = {};
for (const [k, v] of Object.entries(attrs)) {
attributes[k] = v ? String(v) : null;
}
return attributes;
}

async function main() {
try {
// 01. create client with RPCAddr(envoy) then activate it.
Expand All @@ -38,7 +62,7 @@

doc.update((root) => {
if (!root.content) {
root.createText('content');
root.createRichText('content');
}
}, 'create content if not exists');
doc.subscribe((event) => {
Expand Down Expand Up @@ -73,33 +97,46 @@
// 04. bind the document with the Quill.
// 04-1. Quill to Document.
quill.on('text-change', (delta, oldDelta, source) => {
if (source === 'yorkie') {
if (source === 'yorkie' || !delta.ops) {
return;
}

console.log(JSON.stringify(delta));
if (delta.ops) {
let from = 0;
let to = 0;
let content = '';
for (const op of delta.ops) {
if (op.retain) {
from = op.retain;
to = from;
} else if (op.insert) {
content = op.insert;
} else if (op.delete) {
let from = 0, to = 0;
console.log(`%c quill: ${JSON.stringify(delta.ops)}`, 'color: green');
for (const op of delta.ops) {
if (op.attributes !== undefined || op.insert !== undefined) {
if (op.retain !== undefined) {
to = from + op.retain;
}
console.log(
`%c local: ${from}-${to}: ${op.insert} ${op.attributes ? JSON.stringify(op.attributes) : '{}'}`,
'color: green'
);

doc.update((root) => {
if (op.attributes !== undefined && op.insert === undefined) {
root.content.setStyle(from, to, toAttributes(op.attributes));
} else if (op.insert !== undefined) {
root.content.edit(from, to, op.insert, toAttributes(op.attributes));
from = to + op.insert.length;
}
}, `update style by ${client.getID()}`);
} else if (op.delete !== undefined) {
if (op.delete !== undefined) {
to = from + op.delete;
}
}
console.log(`%c local: ${from}-${to}: ''`, 'color: green');

doc.update((root) => {
root.content.edit(from, to, content);
}, `update content by ${client.getID()}`);
console.log(`%c local: ${from}-${to}: ${content}`, 'color: green');
doc.update((root) => {
root.content.edit(from, to, '');
}, `update content by ${client.getID()}`);
} else if (op.retain !== undefined) {
from = to + op.retain;
to = from;
}
}
}).on('selection-change', (range, oldRange, source) => {
if (source === 'yorkie' || !range) {
if (source === 'yorkie' || source === 'api' || !range) {
return;
}

Expand All @@ -112,44 +149,77 @@
const text = doc.getRootObject().content;
text.onChanges((changes) => {
const delta = [];
let prevTo = 0;
for (const change of changes) {
const actor = change.actor;
if (actor === client.getID()) {
continue;
}

const from = change.from;
const to = change.to;
const retainFrom = from - prevTo;
const retainTo = to - from;
if (change.type === 'content') {
const actor = change.actor;
const from = change.from;
const to = change.to;
const content = change.content || '';
console.log(
`%c remote: ${from}-${to}: ${content}`,
'color: skyblue'
);

if (actor !== client.getID()) {
console.log(`%c remote: ${from}-${to}: ${content}`, 'color: skyblue');
if (from > 0) {
delta.push({ retain: from });
}
if (content) {
delta.push({ insert: content });
if (retainFrom) {
delta.push({ retain: retainFrom });
}
if (retainTo) {
delta.push({ delete: retainTo });
}
if (content) {
const op = { insert: content };
if (change.attributes) {
op.attributes = change.attributes;
}
if (to - from > 0) {
delta.push({ delete: to - from });
delta.push(op);
}
} else if (change.type === 'style') {
console.log(
`%c remote: ${from}-${to}: ${JSON.stringify(change.attributes)}`,
'color: skyblue'
);

if (retainFrom) {
delta.push({ retain: retainFrom });
}
if (change.attributes) {
const op = { attributes: change.attributes };
if (retainTo) {
op.retain = retainTo;
}

delta.push(op);
}
} else if (change.type === 'selection') {
const actor = change.actor;
if (actor !== client.getID()) {
const cursors = quill.getModule('cursors');
cursors.createCursor(actor, actor, colors[0]);
cursors.moveCursor(actor, {
index: change.from,
length: change.to - change.from
});
}
const cursors = quill.getModule('cursors');
cursors.createCursor(actor, actor, colors[0]);
cursors.moveCursor(actor, {
index: from,
length: retainTo
});
}

prevTo = to;
}

quill.updateContents(delta, 'yorkie');
if (delta.length) {
console.log(`%c to quill: ${JSON.stringify(delta)}`, 'color: green');
quill.updateContents(delta, 'yorkie');
}
});

// 05. set initial value.
displayLog(doc);
quill.setText(text.getValue(), 'yorkie');
quill.setContents({
ops: toDelta(doc)
}, 'yorkie');
} catch (e) {
console.error(e);
}
Expand Down
1 change: 1 addition & 0 deletions docker/docker-compose.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ services:
dockerfile: ./envoy.Dockerfile
image: 'grpcweb:envoy'
container_name: 'envoy'
restart: always
ports:
- '8080:8080'
- '9901:9901'
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "yorkie-js-sdk",
"version": "0.0.7",
"version": "0.0.8",
"description": "Yorkie JS SDK",
"main": "./src/yorkie.ts",
"scripts": {
Expand Down
Loading

0 comments on commit 4e43486

Please sign in to comment.