Add #/quillPerf endpoint to determine quill is not performant.

.vscode/launch.json

@@ -3,6 +3,12 @@
   // Hover to view descriptions of existing attributes.
   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
   "version": "0.2.0",
+  "compounds": [
+    {
+      "name": "start & debug",
+      "configurations": ["yarn start", "attach"]
+    }
+  ],
   "configurations": [
     {
       "command": "yarn start",
@@ -23,11 +29,5 @@
       "cwd": "${workspaceFolder}/demo",
       "url": "http://localhost:3000/"
     }
-  ],
-  "compounds": [
-    {
-      "name": "start & debug",
-      "configurations": ["yarn start", "attach"]
-    }
   ]
 }

demo/package.json

@@ -12,10 +12,13 @@
     "@tippyjs/react": "^4.2.6",
     "@types/jest": "^29.5.0",
     "@types/node": "^18.15.11",
+    "@types/quill": "^2.0.10",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "bootstrap": "^5.2.3",
     "draft-js": "^0.11.7",
+    "quill": "^1.3.7",
+    "quill-delta": "^5.0.0",
     "react": "link:../node_modules/react",
     "react-bootstrap": "^2.7.4",
     "react-dom": "^18.2.0",

demo/src/App.tsx

@@ -11,7 +11,6 @@ import { Component } from "./Component";
 import { ChangeValue } from "./ChangeValue";
 import { ChangeSelection } from "./ChangeSelection";
 import { Unwrapped } from "./Unwrapped";
-import "./App.css";
 
 const App = () => {
   return (

demo/src/DraftPerf.tsx

@@ -28,6 +28,7 @@ const strategy = (
         end += 1;
       }
       callback(start, end);
+      start = end;
     }
   }
 };

demo/src/QuillPerf.tsx

@@ -0,0 +1,97 @@
+import { useRef, useState, useEffect } from "react";
+import Quill from "quill";
+import "quill/dist/quill.core.css";
+import "quill/dist/quill.snow.css";
+
+const style = {
+  margin: 8,
+  border: "solid 1pt black",
+  overflow: "scroll",
+  textAlign: "left" as const,
+};
+
+const options = {
+  placeholder: "Compose an epic...",
+  theme: "snow",
+};
+
+function quillRangeDecorator(q: Quill, delta: unknown) {
+  const { ops } = delta as { ops: { insert?: string }[] };
+
+  if (!ops.find((op) => op.insert)) {
+    return;
+  }
+
+  const text = q.getText();
+
+  q.removeFormat(0, text.length - 1);
+
+  let bold = true;
+  for (let start = 0; start < text.length; start += 1) {
+    if (text[start] !== " ") {
+      let end = start + 1;
+      while (end < text.length && text[end] !== " ") {
+        end += 1;
+      }
+      q.formatText(start, end - start, bold ? "bold" : "italic", true);
+      bold = !bold;
+      start = end;
+    }
+  }
+}
+
+function QuillPerf() {
+  const quill = useRef<Quill | null>(null);
+  const quillParent = useRef<HTMLDivElement>(null);
+  const [delta, setDelta] = useState({});
+  const [prevDelta, setPrevDelta] = useState({});
+  const [checked, setChecked] = useState(true);
+  const [calls, setCalls] = useState(0);
+
+  useEffect(() => {
+    if (quillParent.current && !quill.current) {
+      const initialText = String("Potato potato tomato potato. ").repeat(500);
+      quillParent.current.textContent = initialText;
+      const q = new Quill(quillParent.current, options);
+      quillRangeDecorator(q, { ops: [{ insert: 1 }] });
+      quill.current = q;
+      q.on("text-change", (delta, prevDelta) => {
+        if (checked) {
+          quillRangeDecorator(q, delta);
+        }
+        setDelta(delta);
+        setPrevDelta(prevDelta);
+        setCalls(calls + 1);
+      });
+    }
+  });
+
+  return (
+    <div className="App">
+      <h1>HighlightWithinTextarea</h1>
+      <h2>Raw Quill Performance (Ranges)</h2>
+      <label>
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={() => setChecked(!checked)}
+        />{" "}
+        Enable decorating.
+      </label>
+      <div>Calls: {calls}</div>
+      <div style={style} ref={quillParent}>
+        Loading
+      </div>
+      {checked && (
+        <div>
+          <div>Delta:</div>
+          <pre>{JSON.stringify(delta, null, 2)}</pre>
+          <div>PrevDelta:</div>
+          <pre>{JSON.stringify(prevDelta, null, 2)}</pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { QuillPerf };

demo/src/index.tsx

@@ -4,7 +4,9 @@ import { createHashRouter, RouterProvider } from "react-router-dom";
 import App from "./App";
 import { Performance } from "./Performance";
 import { DraftPerf } from "./DraftPerf";
+import { QuillPerf } from "./QuillPerf";
 import reportWebVitals from "./reportWebVitals";
+import "./App.css"
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
@@ -23,6 +25,10 @@ const router = createHashRouter([
     path: "/draftperf",
     element: <DraftPerf />,
   },
+  {
+    path: "/quillperf",
+    element: <QuillPerf />,
+  },
 ]);
 
 root.render(