[add] Image Uploader in edtior examples based on Fake API

[remove] deprecated Next.js export static command
[optimize] update Upstream packages

.github/workflows/init-template.yml

@@ -10,6 +10,8 @@ env:
 jobs:
   replace-repository-name:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
     steps:
       - uses: actions/checkout@v4
 

.github/workflows/main.yml

@@ -13,33 +13,8 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v3
-
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 9
-
-      - uses: actions/setup-node@v3
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        with:
-          node-version: 18
-          cache: pnpm
-
-      - name: Install Dependencies
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        run: pnpm i --frozen-lockfile
-
-      - name: Export Static pages
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        run: pnpm export
-
-      - name: Deploy to GitHub pages
-        uses: peaceiris/actions-gh-pages@v3
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        with:
-          publish_dir: ./out
-          personal_token: ${{ secrets.GITHUB_TOKEN }}
-          force_orphan: true
+      - uses: actions/checkout@v4
+        if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
 
       - name: Deploy to Vercel
         uses: amondnet/vercel-action@v25

components/BlockEditor.tsx

@@ -6,15 +6,32 @@ import List from '@editorjs/list';
 import Quote from '@editorjs/quote';
 import { Editor as Core, EditorProps } from 'idea-react';
 
+import { upload } from '../models/Base';
+
+async function uploadByFile(file: File) {
+  try {
+    const url = await upload(file);
+
+    return { success: 1, file: { url } };
+  } catch (error) {
+    console.error(error);
+    return { success: 0 };
+  }
+}
+
 const Tools = {
   list: List,
   code: Code,
   linkTool: LinkTool,
-  image: Image,
+  image: {
+    class: Image,
+    config: { uploader: { uploadByFile } },
+  },
   header: Header,
   quote: Quote,
 };
 
 export default function Editor(props: Omit<EditorProps, 'tools'>) {
+  // @ts-ignore
   return <Core tools={Tools} {...props} />;
 }

components/HTMLEditor.tsx

@@ -1,19 +1,24 @@
 import {
   AudioTool,
+  CopyMarkdownTool,
   Editor,
   EditorProps,
   IFrameTool,
+  ImageTool,
   OriginalTools,
   VideoTool,
 } from 'react-bootstrap-editor';
 import { Constructor } from 'web-utility';
 
+import { upload } from '../models/Base';
+
 const ExcludeTools = [IFrameTool, AudioTool, VideoTool];
 
 const CustomTools = OriginalTools.filter(
   Tool => !ExcludeTools.includes(Tool as Constructor<IFrameTool>),
 );
+ImageTool.prototype.save = upload;
 
 export default function HTMLEditor(props: EditorProps) {
-  return <Editor tools={CustomTools} {...props} />;
+  return <Editor tools={[...CustomTools, CopyMarkdownTool]} {...props} />;
 }

models/Base.ts

@@ -27,3 +27,18 @@ githubClient.use(({ request }, next) => {
 });
 
 export const repositoryStore = new RepositoryModel('idea2app');
+
+type UploadedFile = Record<'originalname' | 'filename' | 'location', string>;
+/**
+ * @see {@link https://fakeapi.platzi.com/en/rest/files/}
+ */
+export async function upload(file: Blob) {
+  const form = new FormData();
+  form.append('file', file);
+
+  const { body } = await ownClient.post<UploadedFile>(
+    'https://api.escuelajs.co/api/v1/files/upload',
+    form,
+  );
+  return body!.location;
+}

package.json

@@ -8,61 +8,61 @@
   },
   "dependencies": {
     "@editorjs/code": "^2.9.0",
-    "@editorjs/editorjs": "^2.29.1",
-    "@editorjs/header": "^2.8.1",
-    "@editorjs/image": "^2.9.0",
+    "@editorjs/editorjs": "^2.30.2",
+    "@editorjs/header": "^2.8.7",
+    "@editorjs/image": "^2.9.1",
     "@editorjs/link": "^2.6.2",
     "@editorjs/list": "^1.9.0",
-    "@editorjs/paragraph": "^2.11.5",
+    "@editorjs/paragraph": "^2.11.6",
     "@editorjs/quote": "^2.6.0",
     "@mdx-js/loader": "^3.0.1",
     "@mdx-js/react": "^3.0.1",
-    "@next/mdx": "^14.2.4",
-    "@sentry/nextjs": "^8.9.2",
+    "@next/mdx": "^14.2.5",
+    "@sentry/nextjs": "^8.18.0",
     "copy-webpack-plugin": "^12.0.2",
     "editorjs-html": "^3.4.3",
     "idea-react": "^2.0.0-rc.2",
     "koajax": "^1.1.2",
     "less": "^4.2.0",
     "less-loader": "^12.2.0",
     "lodash": "^4.17.21",
-    "mobx": "^6.12.4",
+    "mobx": "^6.13.0",
     "mobx-github": "^0.3.2",
     "mobx-i18n": "^0.5.0",
     "mobx-react": "^9.1.1",
     "mobx-restful": "^0.7.0-rc.0",
     "mobx-restful-table": "^2.0.0-rc.1",
-    "next": "^14.2.4",
+    "next": "^14.2.5",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.8.1",
+    "next-ssr-middleware": "^0.8.2",
     "next-with-less": "^3.0.1",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
-    "react-bootstrap": "^2.10.2",
+    "react-bootstrap": "^2.10.4",
     "react-bootstrap-editor": "^2.0.4",
     "react-dom": "^18.3.1",
     "react-editor-js": "^2.1.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.0",
-    "remark-mdx-frontmatter": "^4.0.0",
+    "remark-mdx-frontmatter": "^5.0.0",
     "web-utility": "^4.4.0",
-    "webpack": "^5.92.0"
+    "webpack": "^5.93.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.24.7",
-    "@babel/plugin-transform-typescript": "^7.24.7",
+    "@babel/plugin-transform-typescript": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
-    "@types/lodash": "^4.17.5",
-    "@types/node": "^18.19.34",
+    "@types/lodash": "^4.17.7",
+    "@types/node": "^18.19.40",
     "@types/react": "^18.3.3",
     "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.4",
+    "eslint-config-next": "^14.2.5",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-simple-import-sort": "^12.1.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
-    "prettier": "^3.3.2",
-    "typescript": "~5.4.5"
+    "prettier": "^3.3.3",
+    "typescript": "~5.5.3"
   },
   "prettier": {
     "singleQuote": true,

pages/scroll-list.tsx

@@ -3,7 +3,7 @@ import { RepositoryModel } from 'mobx-github';
 import { observer } from 'mobx-react';
 import { ScrollList } from 'mobx-restful-table';
 import { InferGetServerSidePropsType } from 'next';
-import { compose, errorLogger, translator } from 'next-ssr-middleware';
+import { cache, compose, errorLogger, translator } from 'next-ssr-middleware';
 import { FC } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 
@@ -14,6 +14,7 @@ import { i18n } from '../models/Translation';
 
 export const getServerSideProps = compose(
   errorLogger,
+  cache(),
   translator(i18n),
   async () => {
     const list = await new RepositoryModel('idea2app').getList();