chore: blocking( slab/quill#3521 )

shuta13 · May 27, 2022 · f70ebd7 · f70ebd7
1 parent e653cd5
commit f70ebd7
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 31 deletions.
diff --git a/common.css b/common.css
diff --git a/index.html b/index.html
@@ -2,11 +2,29 @@
 <html>
   <head>
     <title>poc block editor libs</title>
-    <link rel="stylesheet" href="common.css" />
+    <link href="/global.css" rel="stylesheet" />
   </head>
   <body>
-    <div id="editor"></div>
-    <div id="toolbar"></div>
+    <header>
+      <h1>poc block editor libs</h1>
+    </header>
+    <main>
+      <h2>With Quill</h2>
+      <section name="vanilla">
+        <h3>Vanilla</h3>
+        <div>
+          <div id="editor" class="editor"></div>
+          <span id="toolbar" class="toolbar">
+            <button class="ql-bold"></button>
+            <button id="cheer-button">🥳</button>
+          </span>
+        </div>
+      </section>
+      <section name="with-react">
+        <h3>With React</h3>
+        <div id="root"></div>
+      </section>
+    </main>
   </body>
-  <script src="/src/index.ts"></script>
+  <script src="/src/index.tsx"></script>
 </html>
diff --git a/package.json b/package.json
@@ -15,6 +15,10 @@
   },
   "dependencies": {
     "@types/quill": "2.0.9",
-    "quill": "1.3.7"
+    "@types/react": "18.0.9",
+    "@types/react-dom": "18.0.5",
+    "quill": "1.3.7",
+    "react": "18.1.0",
+    "react-dom": "18.1.0"
   }
 }
diff --git a/src/assets/styles/global.css b/src/assets/styles/global.css
@@ -0,0 +1,15 @@
+html,
+body {
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.editor {
+  height: 160px;
+}
+
+.toolbar {
+}
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export const Editor: React.FC = () => {
+  return <></>;
+};
diff --git a/src/components/ToolBar.tsx b/src/components/ToolBar.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export const ToolBar: React.FC = () => {
+  return <></>;
+};
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from "./Editor";
+export * from "./ToolBar";
diff --git a/src/helpers/.gitkeep b/src/helpers/.gitkeep
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
@@ -0,0 +1,23 @@
+import Quill from "quill";
+
+export type Delta = ReturnType<Quill["getContents"]>;
+
+export const createQuill = (editor: HTMLElement, toolbar: HTMLElement) => {
+  return new Quill(editor, {
+    modules: {
+      toolbar: toolbar
+    },
+    placeholder: "なんか書いて",
+    theme: "snow"
+  });
+};
+
+export const createTextChangeHandler = (quill: Quill) => {
+  return (delta?: Delta) => {
+    const contents = quill.getContents();
+    console.log("contents: ", contents);
+    if (delta) {
+      console.log("delta ", delta);
+    }
+  };
+};
diff --git a/src/index.ts b/src/index.ts
diff --git a/src/index.tsx b/src/index.tsx
@@ -0,0 +1,28 @@
+import "quill/dist/quill.snow.css";
+import "./assets/styles/global.css";
+import { createQuill, createTextChangeHandler } from "./helpers";
+import { Editor, ToolBar } from "./components";
+
+import React from "react";
+import * as ReactDOM from "react-dom/client";
+
+const editorElement = document.getElementById("editor")!;
+const toolBarElement = document.getElementById("toolbar")!;
+const quill = createQuill(editorElement, toolBarElement);
+const handleTextChange = createTextChangeHandler(quill);
+// NOTE: Output initial values
+handleTextChange();
+quill.on("text-change", handleTextChange);
+const cheerButtonElement = document.getElementById("cheer-button")!;
+cheerButtonElement.addEventListener("click", () => {
+  alert("Have a fun!");
+});
+
+const reactContainer = document.getElementById("root")!;
+const root = ReactDOM.createRoot(reactContainer);
+root.render(
+  <>
+    <Editor />
+    <ToolBar />
+  </>
+);
diff --git a/tsconfig.json b/tsconfig.json
@@ -10,7 +10,10 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "jsx": "react"
   },
-  "include": ["src/**/*"]
-}
+  "include": [
+    "src/**/*"
+  ]
+}