From 9cb817f10f602c63a2f3eb27bd8074e54a89b54e Mon Sep 17 00:00:00 2001 From: Graeme Fulton Date: Wed, 28 Aug 2024 19:41:49 +0100 Subject: [PATCH] update typr editor --- app/typr/PageContent.js | 87 ++++++++++++--------- lib/api.js | 5 +- package-lock.json | 24 +++--- package.json | 4 +- pages/n/[slug].js | 21 ++--- pages/note.js | 26 +++--- pages/note/[slug].js | 38 +++++++-- pages/p/[slug].js | 12 ++- pages/toolbox/post/[id]/interview/[slug].js | 17 ++-- pages/toolbox/post/[id]/interview/index.js | 29 +++---- pages/write.js | 18 ++++- 11 files changed, 170 insertions(+), 111 deletions(-) diff --git a/app/typr/PageContent.js b/app/typr/PageContent.js index 28b08a73..62100ebe 100644 --- a/app/typr/PageContent.js +++ b/app/typr/PageContent.js @@ -13,6 +13,7 @@ import { import "~/react-kofi/dist/kofi.css"; import "~/tiptypr/dist/styles.css"; +import { useTypr } from "tiptypr"; import Tiptypr from "tiptypr"; // import Head from 'next/head'; @@ -293,6 +294,48 @@ function DemoPageContent() { useEffect(() => { fetchData(); }, []); + + const typr = useTypr({ + requireLogin: editorProps.requireLogin, + components: editorProps.components, + theme: editorProps.theme, + user: editorProps.user, + enablePublishingFlow: editorProps.enablePublishingFlow, + customPostStatuses: editorProps.customPostStatuses, + postId: postId, // Update to use postId state + postOperations: { + load: async function ({ postId }) { + const postObject = await loadPostById(parseInt(postId, 10)); + console.log("loaded", postObject); + return postObject; + }, + save: async function ({ postId, entry }) { + console.log("saving entry", entry); + const postObject = await savePost( + entry, + parseInt(postId, 10) + ); + fetchData(); + return postObject; + }, + create: async function ({ entry }) { + console.log("creating post", entry); + const postObject = await createPost(entry); + fetchData(); + return postObject; + }, + }, + hooks: { + onPostCreated: ({ id }) => { + const params = new URLSearchParams(searchParams); + params.set("id", id); + router.push(`?${params.toString()}`, undefined, { + shallow: true, + scroll: false, + }); + }, + }, + }); return ( @@ -545,45 +588,7 @@ function DemoPageContent() {
{ - const params = new URLSearchParams(searchParams); - params.set("id", id); - router.push(`?${params.toString()}`, undefined, { - shallow: true, - scroll: false, - }); - }, - }} + typr={typr} />
@@ -647,6 +652,10 @@ function DemoPageContent() { /> {/* */} + + ); } diff --git a/lib/api.js b/lib/api.js index 004ed7a7..5959e0c2 100644 --- a/lib/api.js +++ b/lib/api.js @@ -794,7 +794,10 @@ export async function getUserArticle({user, id, type}) { if (hasPermission) { if(data?.userPostId){ if(data.userPostId.type !== type){ - return false; + //fetching a post for a linked article is true to load for an interview post + if(!(type=='article' && data.userPostId.type=='tool')){ + return false; + } } data.userPostId.versioned_content = data.userPostId.draft_content; data.userPostId.versioned_title = data.userPostId.draft_title; diff --git a/package-lock.json b/package-lock.json index f24b1948..0cd8eb13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -128,7 +128,7 @@ "swiper": "^8.0.0", "swr": "^1.3.0", "tailwindcss-border-gradient-radius": "^3.0.1", - "tiptypr": "^0.0.92", + "tiptypr": "^0.0.94", "tsparticles": "^2.7.1", "uuidv4": "^6.2.13", "yup": "^0.32.11", @@ -149,7 +149,7 @@ "tailwindcss-scoped-groups": "^2.0.0" }, "optionalDependencies": { - "@prototypr/paper-interview": "^0.0.477", + "@prototypr/paper-interview": "^0.0.479", "@prototypr/prototypr-postie": "^1.0.91" } }, @@ -4113,9 +4113,9 @@ } }, "node_modules/@prototypr/paper-interview": { - "version": "0.0.477", - "resolved": "https://npm.pkg.github.com/download/@prototypr/paper-interview/0.0.477/a1a3005ddef3aa0ec67934828d55b00dd722d4e6", - "integrity": "sha512-qiIX8Rd8KFHOyU/vlpFV1abR8+voyoHTJAzj9AdKGLthpuO+P9xPxb93Qut664mn6MWrPuRjeBdAN1y48Rgz8g==", + "version": "0.0.479", + "resolved": "https://npm.pkg.github.com/download/@prototypr/paper-interview/0.0.479/888f27effc954b620c0a01e8e7ce3446a474bba5", + "integrity": "sha512-WEvlpokPfle3mnP5yWf+bi1SD1Tzb4eeNhQ5cyg6f9f0BJQfQ9A2OR73CC6/ixW8MCk0frm5jbTNVn7sEEeM1g==", "license": "UNLICENSED", "optional": true, "dependencies": { @@ -4157,7 +4157,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-markdown": "^6.0.0", - "tiptypr": "^0.0.92" + "tiptypr": "^0.0.94" } }, "node_modules/@prototypr/paper-interview/node_modules/@types/hast": { @@ -22192,9 +22192,9 @@ } }, "node_modules/tiptypr": { - "version": "0.0.92", - "resolved": "https://registry.npmjs.org/tiptypr/-/tiptypr-0.0.92.tgz", - "integrity": "sha512-cL482VM1LP6MP4XrUIV6ettvnhi97ZGeFjkg8IULns69TgXLnchML+ldFVYld7FvmZtLvOiIBr2Y1nLzte6s8Q==", + "version": "0.0.94", + "resolved": "https://registry.npmjs.org/tiptypr/-/tiptypr-0.0.94.tgz", + "integrity": "sha512-Lo4FiDQPNG+7An5tLjNnsMwEz77E6sxMlhpAqX2PO/KfGuApu1lmJ8LT+KNo2CrZqiqA+4Pzu3OwAMVWNul0vw==", "dependencies": { "@geist-ui/icons": "^1.0.2", "@heroicons/react": "^1.0.5", @@ -24270,7 +24270,7 @@ }, "prototypr-packages/paper-interview": { "name": "@prototypr/paper-interview", - "version": "0.0.477", + "version": "0.0.479", "extraneous": true, "license": "UNLICENSED", "dependencies": { @@ -24312,7 +24312,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-markdown": "^6.0.0", - "tiptypr": "^0.0.92" + "tiptypr": "^0.0.94" }, "devDependencies": { "@babel/cli": "^7.24.8", @@ -24374,7 +24374,7 @@ } }, "prototypr-packages/tiptypr": { - "version": "0.0.92", + "version": "0.0.94", "extraneous": true, "license": "none yet", "dependencies": { diff --git a/package.json b/package.json index 0af826a0..e288a9fc 100644 --- a/package.json +++ b/package.json @@ -140,7 +140,7 @@ "swiper": "^8.0.0", "swr": "^1.3.0", "tailwindcss-border-gradient-radius": "^3.0.1", - "tiptypr": "^0.0.92", + "tiptypr": "^0.0.94", "tsparticles": "^2.7.1", "uuidv4": "^6.2.13", "yup": "^0.32.11", @@ -168,7 +168,7 @@ "tailwindcss-scoped-groups": "^2.0.0" }, "optionalDependencies": { - "@prototypr/paper-interview": "^0.0.477", + "@prototypr/paper-interview": "^0.0.479", "@prototypr/prototypr-postie": "^1.0.91" } } diff --git a/pages/n/[slug].js b/pages/n/[slug].js index 6e32139b..3cc8f122 100644 --- a/pages/n/[slug].js +++ b/pages/n/[slug].js @@ -8,6 +8,7 @@ import "tippy.js/animations/scale-subtle.css"; import "react-datepicker/dist/react-datepicker.css"; import { typrNotesProps } from "@/lib/editor/typrNotesProps"; import Layout from "@/components/new-index/layoutForIndex"; +import { useTypr } from "tiptypr"; const Tiptypr = dynamic(() => import("tiptypr"), { ssr: false, @@ -34,6 +35,16 @@ export default function EditPostPage() { } }, [router.isReady, router.query.slug, router.query.id]); + const typr = useTypr({ + ...typrNotesProps({ + user, + userLoading: isLoading, + mutateUser, + router, + }), + postId:postId + }); + return (
- +
diff --git a/pages/note.js b/pages/note.js index e2bf12a6..6d9c0231 100644 --- a/pages/note.js +++ b/pages/note.js @@ -9,6 +9,7 @@ import "react-datepicker/dist/react-datepicker.css"; import { typrNotesProps } from "@/lib/editor/typrNotesProps"; import { useState } from "react"; +import { useTypr } from "tiptypr"; const Typr = dynamic(() => import("tiptypr"), { ssr: false, }); @@ -24,8 +25,16 @@ export default function Write() { redirectIfFound: false, }); const router = useRouter(); - - const [editorInstance, setEditorInstance] = useState(null); + + const typr = useTypr({ + ...typrNotesProps({ + user, + userLoading: isLoading, + mutateUser, + router, + }), + postId:router?.isReady && (router.query.slug || router.query.id) + }); return (
- { - setEditorInstance(editor) - }} - postId={router?.isReady && (router.query.slug || router.query.id)} - /> +
diff --git a/pages/note/[slug].js b/pages/note/[slug].js index 343fcbb4..20188826 100644 --- a/pages/note/[slug].js +++ b/pages/note/[slug].js @@ -54,6 +54,8 @@ const StickyFooterCTA = dynamic(() => import("@/components/StickyFooterCTA"), { // } // ); +import { throttle } from 'lodash'; + export default function Post({ post, preview, @@ -142,6 +144,31 @@ export default function Post({ date )}&avatar=${encodeURIComponent(avatar)}`; + useEffect(() => { + const handleScroll = throttle(() => { + const scrollPosition = window.scrollY; + const viewportHeight = window.innerHeight; + + if (scrollPosition > viewportHeight * 0.1) { + document.querySelector('.main-container').style.width = '764px'; + document.querySelector('.rotate-1').style.transform = 'rotate(0.2deg)'; + document.querySelector('.rotate-2').style.transform = 'rotate(0.3deg)'; + document.querySelector('.rotate-3').style.transform = 'rotate(0.4deg)'; + } else { + document.querySelector('.main-container').style.width = '758px'; + document.querySelector('.rotate-1').style.transform = 'rotate(-1.5deg)'; + document.querySelector('.rotate-2').style.transform = 'rotate(1.5deg)'; + document.querySelector('.rotate-3').style.transform = 'rotate(1.5deg)'; + } + }, 100); + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, []); + return ( {/* */}
-
+
@@ -293,12 +320,9 @@ export default function Post({
- {/*
-
-
*/} -
-
-
+
+
+
{/* */} diff --git a/pages/p/[slug].js b/pages/p/[slug].js index aebc9f41..2d373d8f 100644 --- a/pages/p/[slug].js +++ b/pages/p/[slug].js @@ -7,6 +7,7 @@ import "tippy.js/dist/svg-arrow.css"; import "tippy.js/animations/scale-subtle.css"; import "react-datepicker/dist/react-datepicker.css"; import { typrProps } from "@/lib/editor/typrProps"; +import { useTypr } from "tiptypr"; const Tiptypr = dynamic(() => import("tiptypr"), { ssr: false, @@ -27,6 +28,11 @@ export default function EditPostPage() { const router = useRouter(); const [postId, setPostId] = useState(-1); + const typr = useTypr({ + ...typrProps({ user, userLoading: isLoading, mutateUser, router }), + postId:postId + }); + useEffect(() => { if (router.isReady && (router.query.slug || router.query.id)) { setPostId((router.query.slug || router.query.id) || -1); @@ -35,10 +41,8 @@ export default function EditPostPage() { return ( <> - + + ); } \ No newline at end of file diff --git a/pages/toolbox/post/[id]/interview/[slug].js b/pages/toolbox/post/[id]/interview/[slug].js index bb04f20d..ac291baa 100644 --- a/pages/toolbox/post/[id]/interview/[slug].js +++ b/pages/toolbox/post/[id]/interview/[slug].js @@ -10,6 +10,7 @@ import "react-datepicker/dist/react-datepicker.css"; import { useRouter } from "next/router"; import { typrProps } from "@/lib/editor/typrProps"; +import { useTypr } from "tiptypr"; const Tiptypr = dynamic(() => import("tiptypr"), { ssr: false, }); @@ -43,18 +44,20 @@ export default function EditPostPage({ tool }) { }); const router = useRouter(); - + + const typr = useTypr({ + ...typrProps({ user, userLoading: isLoading, mutateUser, router }), + isInterview: true, + tool: tool, + postId: ((router?.isReady && (router.query.slug || router.query.id) )|| -1) + }); + return ( <>
- +
diff --git a/pages/toolbox/post/[id]/interview/index.js b/pages/toolbox/post/[id]/interview/index.js index c58269ab..9521811f 100644 --- a/pages/toolbox/post/[id]/interview/index.js +++ b/pages/toolbox/post/[id]/interview/index.js @@ -7,7 +7,7 @@ import "tippy.js/dist/svg-arrow.css"; import "tippy.js/animations/scale-subtle.css"; import "react-datepicker/dist/react-datepicker.css"; import { typrProps } from "@/lib/editor/typrProps"; - +import { useTypr } from "tiptypr"; const Tiptypr = dynamic(() => import("tiptypr"), { ssr: false, }); @@ -92,20 +92,23 @@ export default function InterviewEditor({ tool }) {
); } -console.log('user',user) + + const typr = useTypr({ + ...typrProps({ user, userLoading: isLoading, mutateUser, router }), + tool: tool, + hooks:{ + onPostCreated: ({ id }) => { + localStorage.removeItem("wipInterview"); + + router.push(`/toolbox/post/${id}/interview/${postInfo?.id}`); + }, + } + }); + return ( <> { - localStorage.removeItem("wipInterview"); - - router.push(`/toolbox/post/${id}/interview/${postInfo?.id}`); - }, - }} + typr={typr} // postOperations={{ // load: typrProps({ user, userLoading: isLoading, mutateUser, router }).postOperations.load, // save: typrProps({ user, userLoading: isLoading, mutateUser, router }).postOperations.save, @@ -129,9 +132,7 @@ console.log('user',user) relation:relatedPostId }; - console.log('user',user) let post = await createPost({ entry: dummyPost, user: user }); - console.log('created post',post) localStorage.removeItem("wipInterview"); router.push( diff --git a/pages/write.js b/pages/write.js index 62defe5e..8f35bc33 100644 --- a/pages/write.js +++ b/pages/write.js @@ -7,6 +7,8 @@ import "tippy.js/animations/scale-subtle.css"; import "react-datepicker/dist/react-datepicker.css"; import { typrProps } from "@/lib/editor/typrProps"; +import { useTypr } from "tiptypr"; + const Tiptypr = dynamic(() => import("tiptypr"), { ssr: false, }); @@ -21,14 +23,26 @@ export default function Write() { redirectTo: "/onboard", redirectIfFound: false, }); + const router = useRouter(); + const typr = useTypr({ + ...typrProps({ user, userLoading: isLoading, mutateUser, router }), + postId: router?.isReady && (router.query.slug || router.query.id) + }); + + return ( <> - + {/* { + + }} {...typrProps({ user, userLoading: isLoading, mutateUser, router })} postId={router?.isReady && (router.query.slug || router.query.id)} - /> + /> */} ); }