[WIP] Add Quill example

yorkie-team · Apr 14, 2020 · ac8fb01 · ac8fb01
1 parent 9e1b733
commit ac8fb01
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 3 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -10,5 +10,5 @@ jobs:
       - checkout
       - run: npm install
       - run: npm run lint
-      - run: npm run build:dev
+      - run: npm run build
       - run: npm test
diff --git a/dist/quill.html b/dist/quill.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Quill Example</title>
+  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
+  <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/quill-cursors@3.0.0/dist/quill-cursors.js"></script>
+</head>
+<body>
+  <div id="toolbar"></div>
+  <div id="editor"></div>
+  <div>document:</div>
+  <pre style="white-space: pre-wrap;"><code id="log-holder"></code></pre>
+  <div>text:</div>
+  <pre style="white-space: pre-wrap;"><code id="text-log-holder"></code></pre>
+
+  <script src="./yorkie.js"></script>
+  <script>
+    const colors = ['#FECEEA', '#FEF1D2', '#A9FDD8', '#D7F8FF', '#CEC5FA'];
+    const logHolder = document.getElementById('log-holder');
+    const textLogHolder = document.getElementById('text-log-holder');
+
+    function displayLog(doc) {
+      logHolder.innerText = doc.toJSON();
+      textLogHolder.innerText = doc.getRootObject().content.getAnnotatedString();
+    }
+
+    async function main() {
+      try {
+        // 01. create client with RPCAddr(envoy) then activate it.
+        const client = yorkie.createClient('/api');
+        await client.activate();
+
+        // 02. create a document then attach it into the client.
+        const doc = yorkie.createDocument('examples', 'quill');
+        await client.attach(doc);
+
+        doc.update((root) => {
+          if (!root.content) {
+            root.createText('content');
+          }
+        }, 'create content if not exists');
+        doc.subscribe((event) => {
+          displayLog(doc);
+        });
+        await client.sync();
+
+        // 03. create an instance of Quill
+        Quill.register('modules/cursors', QuillCursors);
+        const quill = new Quill('#editor', {
+          modules: {
+            toolbar: [
+              ['bold', 'italic', 'underline', 'strike'],
+              ['blockquote', 'code-block'],
+              [{ 'header': 1 }, { 'header': 2 }],
+              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
+              [{ 'script': 'sub'}, { 'script': 'super' }],
+              [{ 'indent': '-1'}, { 'indent': '+1' }],
+              [{ 'direction': 'rtl' }],
+              [{ 'size': ['small', false, 'large', 'huge'] }],
+              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+              [{ 'color': [] }, { 'background': [] }],
+              [{ 'font': [] }],
+              [{ 'align': [] }],
+              ['clean']
+            ],
+            cursors: true
+          },
+          theme: 'snow'
+        });
+
+        // 04. bind the document with the Quill.
+        // 04-1. Quill to Document.
+        quill.on('text-change', (delta, oldDelta, source) => {
+          if (source === 'yorkie') {
+            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) {
+                to = from + op.delete;
+              }
+            }
+
+            doc.update((root) => {
+              root.content.edit(from, to, content);
+            }, `update content by ${client.getID()}`);
+            console.log(`%c local: ${from}-${to}: ${content}`, 'color: green');
+          }
+        }).on('selection-change', (range, oldRange, source) => {
+          if (source === 'yorkie' || !range) {
+            return;
+          }
+
+          doc.update((root) => {
+            root.content.updateSelection(range.index, range.index + range.length);
+          }, `update selection by ${client.getID()}`);
+        });
+
+        // 04-2. document to codemirror(remote).
+        const text = doc.getRootObject().content;
+        text.onChanges((changes) => {
+          const delta = [];
+          for (const change of changes) {
+            if (change.type === 'content') {
+              const actor = change.actor;
+              const from = change.from;
+              const to = change.to;
+              const content = change.content || '';
+
+              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 (to - from > 0) {
+                  delta.push({ delete: to - from });
+                }
+              }
+            } 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
+                });
+              }
+            }
+          }
+
+          quill.updateContents(delta, 'yorkie');
+        });
+
+        // 05. set initial value.
+        displayLog(doc);
+        quill.setText(text.getValue(), 'yorkie');
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    main();
+  </script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
   "main": "./src/yorkie.ts",
   "scripts": {
     "build:proto": "protoc --js_out=import_style=commonjs:. --grpc-web_out=import_style=commonjs+dts,mode=grpcwebtext:. ./src/api/yorkie.proto",
-    "build:dev": "webpack --config webpack.dev.config.js",
-    "start:dev": "webpack-dev-server --watch --config webpack.dev.config.js",
+    "build": "webpack --config webpack.dev.config.js",
+    "start": "webpack-dev-server --watch --config webpack.dev.config.js",
     "test": "karma start karma.conf.js --single-run",
     "test:watch": "karma start karma.conf.js",
     "lint": "eslint . --fix --ext .ts"