Feat/migrate next js

package.json

@@ -22,12 +22,17 @@
   "license": "ISC",
   "devDependencies": {
     "@playwright/test": "^1.25.2",
-    "@typescript-eslint/eslint-plugin": "^5.30.4",
-    "@typescript-eslint/parser": "^5.30.4",
+    "@types/lodash": "^4.14.201",
+    "@types/node": "^20.9.2",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
     "esbuild": "^0.14.49",
     "eslint": "^8.19.0",
-    "ts-patch": "^2.0.1",
-    "typescript": "^4.7.3",
-    "typescript-transform-paths": "^3.3.1"
+    "ts-patch": "^3.0.2",
+    "typescript": "^5.2.2",
+    "typescript-transform-paths": "^3.4.6"
+  },
+  "dependencies": {
+    "next": "13"
   }
 }

packages/blocky-common/package.json

@@ -13,7 +13,7 @@
   "author": "Vincent Chan <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "typescript": "^4.7.3",
+    "typescript": "^5.2.2",
     "vitest": "^0.14.2"
   }
 }

packages/blocky-core/package.json

@@ -22,21 +22,20 @@
   "license": "MIT",
   "devDependencies": {
     "@types/is-hotkey": "^0.1.7",
-    "@types/lodash-es": "^4.17.6",
-    "@types/node": "^17.0.41",
+    "@types/lodash-es": "^4.17.11",
     "c8": "^8.0.1",
     "jsdom": "^20.0.0",
     "tsc-alias": "^1.6.9",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.3",
+    "typescript": "^5.2.2",
     "vite": "^4.5.0",
     "vitest": "^0.14.2"
   },
   "dependencies": {
     "blocky-common": "workspace:3.3.0",
     "is-hotkey": "^0.2.0",
     "lodash-es": "^4.17.21",
-    "quill-delta-es": "^5.2.6",
+    "quill-delta-es": "^5.2.10",
     "rxjs": "^7.8.1"
   }
 }

packages/blocky-core/tsconfig.json

@@ -8,7 +8,7 @@
       "ESNext"
     ],
     "allowJs": false,
-    "skipLibCheck": false,
+    "skipLibCheck": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
     "strict": true,

packages/blocky-example/.gitignore

@@ -0,0 +1,2 @@
+
+/.next

packages/blocky-example/src/app.tsx → packages/blocky-example/app/app.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Component, createRef, RefObject, useEffect, useState } from "react";
 import { EditorController, darkTheme, type IPlugin } from "blocky-core";
 import {
@@ -13,13 +15,12 @@ import { makeAtPanelPlugin } from "./plugins/atPanel";
 import SpannerMenu from "./spannerMenu";
 import ToolbarMenu from "./toolbarMenu";
 import TianShuiWeiImage from "./tianshuiwei.jpg";
+import Image from "next/image";
 import { ReadMeContent } from "./readme";
 import { Theme } from "./themeSwitch";
 import { isHotkey } from "is-hotkey";
 import { Subject, takeUntil } from "rxjs";
-import Sidebar from "./components/sidebar";
 import "blocky-core/css/blocky-core.css";
-import "./app.scss";
 
 function makeEditorPlugins(): IPlugin[] {
   return [
@@ -161,21 +162,18 @@ class App extends Component<unknown> {
 
   render() {
     return (
-      <div className="blocky-example-app-window">
-        <Sidebar />
-        <div className="blocky-example-container">
-          <BlockyEditorWithSearchBoxAndTitle
-            containerRef={this.containerLeftRef}
-            className="blocky-example-editor-container left"
-            controller={this.editorControllerLeft}
-          />
-          <BlockyEditorWithSearchBoxAndTitle
-            containerRef={this.containerRightRef}
-            className="blocky-example-editor-container right"
-            controller={this.editorControllerRight}
-          />
-        </div>
-      </div>
+      <>
+        <BlockyEditorWithSearchBoxAndTitle
+          containerRef={this.containerLeftRef}
+          className="blocky-example-editor-container left"
+          controller={this.editorControllerLeft}
+        />
+        <BlockyEditorWithSearchBoxAndTitle
+          containerRef={this.containerRightRef}
+          className="blocky-example-editor-container right"
+          controller={this.editorControllerRight}
+        />
+      </>
     );
   }
 }
@@ -235,7 +233,16 @@ function BlockyEditorWithSearchBoxAndTitle(
       )}
       <div className="blocky-example-content-container">
         <div className="blocky-example-image">
-          <img src={TianShuiWeiImage} />
+          <Image
+            src={TianShuiWeiImage}
+            alt=""
+            sizes="100vw"
+            // Make the image display full width
+            style={{
+              width: "100%",
+              height: "auto",
+            }}
+          />
         </div>
         <Theme.Consumer>
           {(options) => (

packages/blocky-example/app/doc/[section]/page.tsx

@@ -0,0 +1,76 @@
+import fs from "node:fs";
+import path from "node:path";
+import Documentation, {
+  DocItem,
+  Heading,
+} from "@pkg/components/documentations";
+import { redirect } from "next/navigation";
+
+export interface SectionPageProps {
+  params: { section: string };
+}
+
+function makeHeadingsByContent(href: string, content: string): Heading[] {
+  const result: Heading[] = [];
+
+  const lines = content.split("\n");
+  for (const line of lines) {
+    const reg = /^##([^\n#]+)/g;
+    let titleTest = reg.exec(line);
+
+    if (titleTest) {
+      const title = titleTest[1].trim();
+      const suffix = title
+        .split(" ")
+        .map((s) => s.toLowerCase().replaceAll(/\?/g, ""))
+        .join("-");
+      result.push({
+        title,
+        href: href + "#" + suffix,
+        id: suffix,
+      });
+
+      titleTest = reg.exec(content);
+    }
+  }
+
+  return result;
+}
+
+function makeDocItem(href: string, content: string): DocItem {
+  const titleTest = /#([^\n]+)/.exec(content);
+  let title = "";
+  if (titleTest) {
+    title = titleTest[1].trim();
+  }
+  return {
+    href,
+    name: title,
+    content,
+    headings: makeHeadingsByContent(href, content),
+  };
+}
+
+const allowNames = ["get-started", "api", "builtin-plugins", "faq"];
+
+async function SectionPage(props: SectionPageProps) {
+  const { section } = props.params;
+
+  const docItems: DocItem[] = [];
+  for (const doc of allowNames) {
+    const mdPath = path.resolve("docs", doc + ".md");
+    const content = await fs.promises.readFile(mdPath, "utf-8");
+    const href = "/doc/" + doc;
+    docItems.push(makeDocItem(href, content));
+  }
+
+  const item = docItems.find((item) => item.href === "/doc/" + section);
+  if (!item) {
+    // redirect to 404
+    redirect("/404");
+  }
+
+  return <Documentation items={docItems} content={item} />;
+}
+
+export default SectionPage;

packages/blocky-example/app/index-legacy.tsx

@@ -0,0 +1,107 @@
+// import { Suspense, lazy, useEffect } from "react";
+// import { createRoot } from "react-dom/client";
+// import { Routes, Route, useNavigate, BrowserRouter } from "react-router-dom";
+// import App from "./app";
+// import type { DocItem, Heading } from "./documentations";
+// import GetStartedDoc from "./docs/get-started.md?raw";
+// import ApiDoc from "./docs/api.md?raw";
+// import FaqDoc from "./docs/faq.md?raw";
+// import BuiltinPluginsDoc from "./docs/builtin-plugins.md?raw";
+// import { ThemeProvider } from "./themeSwitch";
+// import NoTitle from "./noTitle";
+
+// const Documentation = lazy(() => import("./documentations"));
+
+// const appId = "blocky-example-app";
+
+// function makeHeadingsByContent(href: string, content: string): Heading[] {
+//   const result: Heading[] = [];
+
+//   const lines = content.split("\n");
+//   for (const line of lines) {
+//     const reg = /^##([^\n#]+)/g;
+//     let titleTest = reg.exec(line);
+
+//     if (titleTest) {
+//       const title = titleTest[1].trim();
+//       const suffix = title
+//         .split(" ")
+//         .map((s) => s.toLowerCase().replaceAll(/\?/g, ""))
+//         .join("-");
+//       result.push({
+//         title,
+//         href: href + "#" + suffix,
+//         id: suffix,
+//       });
+
+//       titleTest = reg.exec(content);
+//     }
+//   }
+
+//   return result;
+// }
+
+// function makeDocItem(href: string, content: string): DocItem {
+//   const titleTest = /#([^\n]+)/.exec(content);
+//   let title = "";
+//   if (titleTest) {
+//     title = titleTest[1].trim();
+//   }
+//   return {
+//     href,
+//     name: title,
+//     content,
+//     headings: makeHeadingsByContent(href, content),
+//   };
+// }
+
+// const docItems: DocItem[] = [
+//   makeDocItem("/doc/get-started", GetStartedDoc),
+//   makeDocItem("/doc/api", ApiDoc),
+//   makeDocItem("/doc/builtin-plugins", BuiltinPluginsDoc),
+//   makeDocItem("/doc/faq", FaqDoc),
+// ];
+
+// interface RedirectProps {
+//   to: string;
+// }
+
+// function Redirect(props: RedirectProps) {
+//   const navigate = useNavigate();
+//   useEffect(() => {
+//     navigate(props.to);
+//   }, [props.to, navigate]);
+//   return null;
+// }
+
+// const root = createRoot(document.getElementById(appId)!);
+
+// root.render(
+//   <ThemeProvider>
+//     <Suspense fallback={null}>
+//       <BrowserRouter>
+//         <Routes>
+//           <Route path="/" element={<App />} />
+//           <Route path="/noTitle" element={<NoTitle />} />
+//           <Route
+//             path="/doc/get-started"
+//             element={<Documentation items={docItems} content={docItems[0]} />}
+//           />
+//           <Route
+//             path="/doc/api"
+//             element={<Documentation items={docItems} content={docItems[1]} />}
+//           />
+//           <Route
+//             path="/doc/builtin-plugins"
+//             element={<Documentation items={docItems} content={docItems[2]} />}
+//           />
+//           <Route
+//             path="/doc/faq"
+//             element={<Documentation items={docItems} content={docItems[3]} />}
+//           />
+//           <Route path="/doc" element={<Redirect to="/doc/get-started" />} />
+//         </Routes>
+//       </BrowserRouter>
+//     </Suspense>
+//   </ThemeProvider>
+// );

packages/blocky-example/app/layout.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Script from "next/script";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Blocky Editor Example",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <Script
+          async
+          src="https://www.googletagmanager.com/gtag/js?id=G-PS6NK1TQ06"
+        ></Script>
+        <Script>
+          {`
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'G-PS6NK1TQ06');
+    `}
+        </Script>
+      </head>
+      <body>{children}</body>
+    </html>
+  );
+}

packages/blocky-example/src/noTitle/noTitle.tsx → packages/blocky-example/app/noTitle/noTitle.tsx

@@ -1,11 +1,10 @@
 import { Component, ReactNode, createRef } from "react";
-import Sidebar from "@pkg/components/sidebar";
 import { BlockyEditor, makeReactToolbar } from "blocky-react";
 import { EditorController, IPlugin } from "blocky-core";
-import { makeImageBlockPlugin } from "@pkg/plugins/imageBlock";
-import { makeCommandPanelPlugin } from "@pkg/plugins/commandPanel";
-import { makeAtPanelPlugin } from "@pkg/plugins/atPanel";
-import ToolbarMenu from "@pkg/toolbarMenu";
+import { makeImageBlockPlugin } from "@pkg/app/plugins/imageBlock";
+import { makeCommandPanelPlugin } from "@pkg/app/plugins/commandPanel";
+import { makeAtPanelPlugin } from "@pkg/app/plugins/atPanel";
+import ToolbarMenu from "@pkg/app/toolbarMenu";
 import { timer, Subject, takeUntil } from "rxjs";
 
 function makeEditorPlugins(): IPlugin[] {
@@ -70,15 +69,4 @@ class NoTitleEditor extends Component {
   }
 }
 
-function NoTitle() {
-  return (
-    <div className="blocky-example-app-window">
-      <Sidebar />
-      <div className="blocky-example-container">
-        <NoTitleEditor />
-      </div>
-    </div>
-  );
-}
-
-export default NoTitle;
+export default NoTitleEditor;