From 3ee1699db859efbdf297638e51036f7a17c7144e Mon Sep 17 00:00:00 2001 From: zbeyens Date: Tue, 19 Nov 2024 08:30:49 +0000 Subject: [PATCH] Merge pull request #3790 from udecode/histor/media-placeholder Histor/media placeholder --- next.config.mjs | 4 +- package.json | 1 + pnpm-lock.yaml | 39 +++++++++++++++ src/app/api/uploadthing/core.ts | 26 ---------- src/app/api/uploadthing/route.ts | 27 +++++++++- src/app/page.tsx | 50 +++++++++---------- .../editor/plugins/indent-list-plugins.ts | 5 +- src/components/plate-ui/ai-menu.tsx | 4 +- src/components/plate-ui/avatar.tsx | 2 +- src/components/plate-ui/button.tsx | 6 +-- src/components/plate-ui/checkbox.tsx | 2 +- .../plate-ui/code-block-element.tsx | 2 +- src/components/plate-ui/code-leaf.tsx | 2 +- .../plate-ui/color-dropdown-menu-items.tsx | 2 +- .../plate-ui/column-group-element.tsx | 2 +- src/components/plate-ui/command.tsx | 14 +++--- src/components/plate-ui/comment-item.tsx | 2 +- src/components/plate-ui/comment-leaf.tsx | 2 +- .../plate-ui/comment-more-dropdown.tsx | 2 +- .../plate-ui/comment-resolve-button.tsx | 2 +- src/components/plate-ui/context-menu.tsx | 18 +++---- src/components/plate-ui/cursor-overlay.tsx | 2 +- src/components/plate-ui/date-element.tsx | 2 +- src/components/plate-ui/dialog.tsx | 8 +-- src/components/plate-ui/draggable.tsx | 4 +- src/components/plate-ui/dropdown-menu.tsx | 16 +++--- src/components/plate-ui/editor.tsx | 6 +-- .../plate-ui/emoji-picker-content.tsx | 8 +-- .../plate-ui/emoji-picker-navigation.tsx | 6 +-- .../plate-ui/emoji-picker-preview.tsx | 6 +-- .../emoji-picker-search-and-clear.tsx | 6 +-- .../plate-ui/emoji-picker-search-bar.tsx | 2 +- src/components/plate-ui/emoji-picker.tsx | 2 +- src/components/plate-ui/fixed-toolbar.tsx | 2 +- src/components/plate-ui/floating-toolbar.tsx | 2 +- src/components/plate-ui/ghost-text.tsx | 2 +- src/components/plate-ui/heading-element.tsx | 8 +-- src/components/plate-ui/hr-element.tsx | 4 +- src/components/plate-ui/inline-combobox.tsx | 8 +-- src/components/plate-ui/input.tsx | 4 +- src/components/plate-ui/kbd-leaf.tsx | 2 +- src/components/plate-ui/link-element.tsx | 2 +- .../plate-ui/link-floating-toolbar.tsx | 4 +- .../plate-ui/media-embed-element.tsx | 6 +-- .../plate-ui/media-file-element.tsx | 1 - src/components/plate-ui/mention-element.tsx | 4 +- .../plate-ui/mention-input-element.tsx | 2 +- src/components/plate-ui/popover.tsx | 2 +- src/components/plate-ui/resizable.tsx | 2 +- src/components/plate-ui/separator.tsx | 2 +- .../plate-ui/slash-input-element.tsx | 2 +- .../plate-ui/table-cell-element.tsx | 16 +++--- src/components/plate-ui/toc-element.tsx | 2 +- src/components/plate-ui/toggle-element.tsx | 2 +- .../plate-ui/turn-into-dropdown-menu.tsx | 5 +- src/lib/uploadthing/uploadthing.ts | 33 +++++++++++- src/lib/utils.ts | 6 +-- 57 files changed, 233 insertions(+), 172 deletions(-) delete mode 100644 src/app/api/uploadthing/core.ts diff --git a/next.config.mjs b/next.config.mjs index a2abd44..acdde17 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -3,9 +3,9 @@ const nextConfig = { async redirects() { return [ { - source: '/', destination: '/editor', - permanent: true, + permanent: false, + source: '/', }, ]; }, diff --git a/package.json b/package.json index f8012fe..4cea281 100644 --- a/package.json +++ b/package.json @@ -105,6 +105,7 @@ "tailwindcss-animate": "1.0.7" }, "devDependencies": { + "eslint-plugin-prettier": "^5.2.1", "@types/node": "^22.9.0", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 03e34bc..d46fd5d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -309,6 +309,9 @@ importers: eslint-plugin-perfectionist: specifier: 3.9.1 version: 3.9.1(eslint@8.57.1)(svelte@5.2.0)(typescript@5.6.3) + eslint-plugin-prettier: + specifier: ^5.2.1 + version: 5.2.1(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.3.3) eslint-plugin-react: specifier: ^7.37.2 version: 7.37.2(eslint@8.57.1) @@ -2710,6 +2713,20 @@ packages: vue-eslint-parser: optional: true + eslint-plugin-prettier@5.2.1: + resolution: {integrity: sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + '@types/eslint': '>=8.0.0' + eslint: '>=8.0.0' + eslint-config-prettier: '*' + prettier: '>=3.0.0' + peerDependenciesMeta: + '@types/eslint': + optional: true + eslint-config-prettier: + optional: true + eslint-plugin-react-hooks@5.0.0: resolution: {integrity: sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==} engines: {node: '>=10'} @@ -2793,6 +2810,9 @@ packages: fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + fast-diff@1.3.0: + resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==} + fast-glob@3.3.1: resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==} engines: {node: '>=8.6.0'} @@ -3658,6 +3678,10 @@ packages: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} + prettier-linter-helpers@1.0.0: + resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==} + engines: {node: '>=6.0.0'} + prettier-plugin-packagejson@2.5.3: resolution: {integrity: sha512-ATMEEXr+ywls1kgrZEWl4SBPEm0uDdyDAjyNzUC0/Z8WZTD3RqbJcQDR+Dau+wYkW9KHK6zqQIsFyfn+9aduWg==} peerDependencies: @@ -6909,6 +6933,15 @@ snapshots: - supports-color - typescript + eslint-plugin-prettier@5.2.1(eslint-config-prettier@9.1.0(eslint@8.57.1))(eslint@8.57.1)(prettier@3.3.3): + dependencies: + eslint: 8.57.1 + prettier: 3.3.3 + prettier-linter-helpers: 1.0.0 + synckit: 0.9.2 + optionalDependencies: + eslint-config-prettier: 9.1.0(eslint@8.57.1) + eslint-plugin-react-hooks@5.0.0(eslint@8.57.1): dependencies: eslint: 8.57.1 @@ -7034,6 +7067,8 @@ snapshots: fast-deep-equal@3.1.3: {} + fast-diff@1.3.0: {} + fast-glob@3.3.1: dependencies: '@nodelib/fs.stat': 2.0.5 @@ -8038,6 +8073,10 @@ snapshots: prelude-ls@1.2.1: {} + prettier-linter-helpers@1.0.0: + dependencies: + fast-diff: 1.3.0 + prettier-plugin-packagejson@2.5.3(prettier@3.3.3): dependencies: sort-package-json: 2.10.1 diff --git a/src/app/api/uploadthing/core.ts b/src/app/api/uploadthing/core.ts deleted file mode 100644 index 3233c7c..0000000 --- a/src/app/api/uploadthing/core.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { FileRouter } from 'uploadthing/next'; - -import { createUploadthing } from 'uploadthing/next'; - -const f = createUploadthing(); - -// FileRouter for your app, can contain multiple FileRoutes -export const ourFileRouter = { - // Define as many FileRoutes as you like, each with a unique routeSlug - imageUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio']) - // Set permissions and file types for this FileRoute - .middleware(async ({ req }) => { - // This code runs on your server before upload - - // Whatever is returned here is accessible in onUploadComplete as `metadata` - return {}; - }) - .onUploadComplete(({ file, metadata }) => { - // This code RUNS ON YOUR SERVER after upload - - // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback - return { file }; - }), -} satisfies FileRouter; - -export type OurFileRouter = typeof ourFileRouter; diff --git a/src/app/api/uploadthing/route.ts b/src/app/api/uploadthing/route.ts index 379d038..1a20e07 100644 --- a/src/app/api/uploadthing/route.ts +++ b/src/app/api/uploadthing/route.ts @@ -1,6 +1,29 @@ -import { createRouteHandler } from 'uploadthing/next'; +import type { FileRouter } from 'uploadthing/next'; -import { ourFileRouter } from './core'; +import { createRouteHandler, createUploadthing } from 'uploadthing/next'; + +const f = createUploadthing(); + +// FileRouter for your app, can contain multiple FileRoutes +const ourFileRouter = { + // Define as many FileRoutes as you like, each with a unique routeSlug + imageUploader: f(['image', 'text', 'blob', 'pdf', 'video', 'audio']) + // Set permissions and file types for this FileRoute + .middleware(async ({ req }) => { + // This code runs on your server before upload + + // Whatever is returned here is accessible in onUploadComplete as `metadata` + return {}; + }) + .onUploadComplete(({ file, metadata }) => { + // This code RUNS ON YOUR SERVER after upload + + // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback + return { file }; + }), +} satisfies FileRouter; + +export type OurFileRouter = typeof ourFileRouter; // Export routes for Next App Router export const { GET, POST } = createRouteHandler({ diff --git a/src/app/page.tsx b/src/app/page.tsx index 433c8aa..7ccfa54 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,21 +1,21 @@ -import Image from "next/image"; +import Image from 'next/image'; export default function Home() { return ( -
-
+
+
Next.js logo -
    +
    1. - Get started by editing{" "} - + Get started by editing{' '} + app/page.tsx . @@ -23,75 +23,75 @@ export default function Home() {
    2. Save and see your changes instantly.
    -
-