Reorganize files

src/pages/BugReport.jsx

@@ -8,7 +8,7 @@ import {
   IconGithubLogo,
   IconPaperclip,
 } from "@douyinfe/semi-icons";
-import RichEditor from "../components/RichEditor";
+import RichEditor from "../components/LexicalEditor/RichEditor";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { editorConfig } from "../data/editorConfig";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";

src/pages/Survey.jsx

@@ -13,7 +13,7 @@ import {
   TextArea,
 } from "@douyinfe/semi-ui";
 import { IconSun, IconMoon } from "@douyinfe/semi-icons";
-import RichEditor from "../components/RichEditor";
+import RichEditor from "../components/LexicalEditor/RichEditor";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { editorConfig } from "../data/editorConfig";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";

src/pages/Templates.jsx

@@ -8,158 +8,6 @@ import { db } from "../data/db";
 import { useLiveQuery } from "dexie-react-hooks";
 import { calcPath } from "../utils/calcPath";
 
-function Thumbnail({ diagram, i }) {
-  const zoom = 0.3;
-  return (
-    <div className="w-full select-none">
-      <svg className="bg-white w-full h-full rounded-t-md">
-        <defs>
-          <pattern
-            id={"pattern-circles-" + i}
-            x="0"
-            y="0"
-            width="10"
-            height="10"
-            patternUnits="userSpaceOnUse"
-            patternContentUnits="userSpaceOnUse"
-          >
-            <circle
-              id={"pattern-circle-" + i}
-              cx="2"
-              cy="2"
-              r="0.4"
-              fill="rgb(99, 152, 191)"
-            ></circle>
-          </pattern>
-        </defs>
-        <rect
-          x="0"
-          y="0"
-          width="100%"
-          height="100%"
-          fill={"url(#pattern-circles-" + i + ")"}
-        ></rect>
-        <g>
-          {diagram.subjectAreas?.map((a) => (
-            <foreignObject
-              key={a.id}
-              x={a.x * zoom}
-              y={a.y * zoom}
-              width={a.width > 0 ? a.width * zoom : 0}
-              height={a.height > 0 ? a.height * zoom : 0}
-            >
-              <div
-                className={`border border-slate-400 w-full h-full rounded-sm relative`}
-              >
-                <div
-                  className="opacity-40 w-fill h-full"
-                  style={{ backgroundColor: a.color }}
-                />
-              </div>
-              <div className="text-color absolute top-[4px] left-[6px] select-none text-[4px]">
-                {a.name}
-              </div>
-            </foreignObject>
-          ))}
-          {diagram.tables?.map((table, i) => {
-            const height = table.fields.length * 36 + 50 + 7;
-            return (
-              <foreignObject
-                x={table.x * zoom}
-                y={table.y * zoom}
-                width={200 * zoom}
-                height={height * zoom}
-                key={i}
-              >
-                <div className="border-[1px] rounded-[3px] border-zinc-300 text-[4px] bg-zinc-100">
-                  <div
-                    className="h-[4px] w-full rounded-t-sm"
-                    style={{ backgroundColor: table.color }}
-                  ></div>
-                  <div className="rounded-b-[3px]">
-                    <div className="bg-zinc-200 font-bold py-[2px] px-[4px] border-b border-gray-300">
-                      {table.name}
-                    </div>
-                    {table.fields.map((f, j) => (
-                      <div
-                        className={`flex justify-between items-center py-[2px] px-[3px] ${
-                          j < table.fields.length - 1 ? "border-b" : ""
-                        }`}
-                        key={j}
-                      >
-                        <div className="flex items-center justify-start">
-                          <div
-                            className={`w-[3px] h-[3px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-[2px]`}
-                          ></div>
-                          <div>{f.name}</div>
-                        </div>
-                        <div className="text-zinc-500">{f.type}</div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </foreignObject>
-            );
-          })}
-          {diagram.relationships?.map((e, i) => (
-            <path
-              key={i}
-              d={calcPath(e.startX, e.endX, e.startY, e.endY, zoom)}
-              fill="none"
-              strokeWidth={1}
-              stroke="gray"
-            />
-          ))}
-          {diagram.notes?.map((n) => {
-            const x = n.x * zoom;
-            const y = n.y * zoom;
-            const w = 180 * zoom;
-            const r = 3 * zoom;
-            const fold = 24 * zoom;
-            const h = n.height * zoom;
-            return (
-              <g key={n.id}>
-                <path
-                  d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${
-                    x + w
-                  } ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${
-                    x + w - r
-                  } ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${
-                    y + h - r
-                  } L${x} ${y + fold}`}
-                  fill={n.color}
-                  stroke="rgb(168 162 158)"
-                  strokeLinejoin="round"
-                  strokeWidth="0.5"
-                />
-                <path
-                  d={`M${x} ${y + fold} L${x + fold - r} ${
-                    y + fold
-                  } A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${
-                    x + fold
-                  } ${y} L${x} ${y + fold} Z`}
-                  fill={n.color}
-                  stroke={"rgb(168 162 158)"}
-                  strokeLinejoin="round"
-                  strokeWidth="0.5"
-                />
-                <foreignObject x={x} y={y} width={w} height={h}>
-                  <div className="text-gray-900 w-full h-full px-[4px] py-[2px] text-[4px]">
-                    <label htmlFor={`note_${n.id}`} className="ms-[6px]">
-                      {n.title}
-                    </label>
-                    <div className="text-[4px] mt-[2px]">{n.content}</div>
-                  </div>
-                </foreignObject>
-              </g>
-            );
-          })}
-        </g>
-      </svg>
-    </div>
-  );
-}
-
 export default function Templates() {
   const defaultTemplates = useLiveQuery(() =>
     db.templates.where({ custom: 0 }).toArray()
@@ -339,3 +187,155 @@ export default function Templates() {
     </div>
   );
 }
+
+function Thumbnail({ diagram, i }) {
+  const zoom = 0.3;
+  return (
+    <div className="w-full select-none">
+      <svg className="bg-white w-full h-full rounded-t-md">
+        <defs>
+          <pattern
+            id={"pattern-circles-" + i}
+            x="0"
+            y="0"
+            width="10"
+            height="10"
+            patternUnits="userSpaceOnUse"
+            patternContentUnits="userSpaceOnUse"
+          >
+            <circle
+              id={"pattern-circle-" + i}
+              cx="2"
+              cy="2"
+              r="0.4"
+              fill="rgb(99, 152, 191)"
+            ></circle>
+          </pattern>
+        </defs>
+        <rect
+          x="0"
+          y="0"
+          width="100%"
+          height="100%"
+          fill={"url(#pattern-circles-" + i + ")"}
+        ></rect>
+        <g>
+          {diagram.subjectAreas?.map((a) => (
+            <foreignObject
+              key={a.id}
+              x={a.x * zoom}
+              y={a.y * zoom}
+              width={a.width > 0 ? a.width * zoom : 0}
+              height={a.height > 0 ? a.height * zoom : 0}
+            >
+              <div
+                className={`border border-slate-400 w-full h-full rounded-sm relative`}
+              >
+                <div
+                  className="opacity-40 w-fill h-full"
+                  style={{ backgroundColor: a.color }}
+                />
+              </div>
+              <div className="text-color absolute top-[4px] left-[6px] select-none text-[4px]">
+                {a.name}
+              </div>
+            </foreignObject>
+          ))}
+          {diagram.tables?.map((table, i) => {
+            const height = table.fields.length * 36 + 50 + 7;
+            return (
+              <foreignObject
+                x={table.x * zoom}
+                y={table.y * zoom}
+                width={200 * zoom}
+                height={height * zoom}
+                key={i}
+              >
+                <div className="border-[1px] rounded-[3px] border-zinc-300 text-[4px] bg-zinc-100">
+                  <div
+                    className="h-[4px] w-full rounded-t-sm"
+                    style={{ backgroundColor: table.color }}
+                  ></div>
+                  <div className="rounded-b-[3px]">
+                    <div className="bg-zinc-200 font-bold py-[2px] px-[4px] border-b border-gray-300">
+                      {table.name}
+                    </div>
+                    {table.fields.map((f, j) => (
+                      <div
+                        className={`flex justify-between items-center py-[2px] px-[3px] ${
+                          j < table.fields.length - 1 ? "border-b" : ""
+                        }`}
+                        key={j}
+                      >
+                        <div className="flex items-center justify-start">
+                          <div
+                            className={`w-[3px] h-[3px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-[2px]`}
+                          ></div>
+                          <div>{f.name}</div>
+                        </div>
+                        <div className="text-zinc-500">{f.type}</div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </foreignObject>
+            );
+          })}
+          {diagram.relationships?.map((e, i) => (
+            <path
+              key={i}
+              d={calcPath(e.startX, e.endX, e.startY, e.endY, zoom)}
+              fill="none"
+              strokeWidth={1}
+              stroke="gray"
+            />
+          ))}
+          {diagram.notes?.map((n) => {
+            const x = n.x * zoom;
+            const y = n.y * zoom;
+            const w = 180 * zoom;
+            const r = 3 * zoom;
+            const fold = 24 * zoom;
+            const h = n.height * zoom;
+            return (
+              <g key={n.id}>
+                <path
+                  d={`M${x + fold} ${y} L${x + w - r} ${y} A${r} ${r} 0 0 1 ${
+                    x + w
+                  } ${y + r} L${x + w} ${y + h - r} A${r} ${r} 0 0 1 ${
+                    x + w - r
+                  } ${y + h} L${x + r} ${y + h} A${r} ${r} 0 0 1 ${x} ${
+                    y + h - r
+                  } L${x} ${y + fold}`}
+                  fill={n.color}
+                  stroke="rgb(168 162 158)"
+                  strokeLinejoin="round"
+                  strokeWidth="0.5"
+                />
+                <path
+                  d={`M${x} ${y + fold} L${x + fold - r} ${
+                    y + fold
+                  } A${r} ${r} 0 0 0 ${x + fold} ${y + fold - r} L${
+                    x + fold
+                  } ${y} L${x} ${y + fold} Z`}
+                  fill={n.color}
+                  stroke={"rgb(168 162 158)"}
+                  strokeLinejoin="round"
+                  strokeWidth="0.5"
+                />
+                <foreignObject x={x} y={y} width={w} height={h}>
+                  <div className="text-gray-900 w-full h-full px-[4px] py-[2px] text-[4px]">
+                    <label htmlFor={`note_${n.id}`} className="ms-[6px]">
+                      {n.title}
+                    </label>
+                    <div className="text-[4px] mt-[2px]">{n.content}</div>
+                  </div>
+                </foreignObject>
+              </g>
+            );
+          })}
+        </g>
+      </svg>
+    </div>
+  );
+}