Skip to content

Commit

Permalink
update typr editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@GraemeFulton
GraemeFulton committed Aug 28, 2024
1 parent ba1dc9a commit 9cb817f
Show file tree
Hide file tree
Showing 11 changed files with 170 additions and 111 deletions.
87 changes: 48 additions & 39 deletions app/typr/PageContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 (
<Layout sessionUser={false} background={"#fbfcff"}>
Expand Down Expand Up @@ -545,45 +588,7 @@ function DemoPageContent() {
<div className="w-full md:p-3 flex flex-col relative h-[calc(100vh-54px)]">
<div className="bg-white md:rounded-xl border border-gray-300/60 flex-1 w-full overflow-y-auto max-w-[900px] mx-auto md:p-3 md:pr-1 md:pt-0">
<Tiptypr
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,
});
},
}}
typr={typr}
/>
</div>
</div>
Expand Down Expand Up @@ -647,6 +652,10 @@ function DemoPageContent() {
/>
</div>
{/* <KofiWidget /> */}

<button className="fixed bottom-0 right-0" onClick={()=>{
typr.forcePublish();
}}>Publish</button>
</Layout>
);
}
Expand Down
5 changes: 4 additions & 1 deletion lib/api.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
24 changes: 12 additions & 12 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
}
}
21 changes: 12 additions & 9 deletions pages/n/[slug].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 (
<Layout
navOffset={false}
Expand All @@ -56,15 +67,7 @@ export default function EditPostPage() {
<div className="group relative w-full h-full overflow-hidden bg-white group-hover:border-gray-100 shadow-lg p-6 transform -rotate-1 hover:rotate-0 transition-all duration-500 ease-in-out border border-opacity-0 border-gray-400 group-hover:border-opacity-100">
<div className="absolute inset-0 z-0 overflow-auto">
<div className="z-10">
<Tiptypr
{...typrNotesProps({
user,
userLoading: isLoading,
mutateUser,
router,
})}
postId={postId}
/>
<Tiptypr typr={typr}/>
</div>
</div>
</div>
Expand Down
26 changes: 12 additions & 14 deletions pages/note.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand All @@ -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 (
<Layout
Expand All @@ -49,18 +58,7 @@ export default function Write() {
<div className="group relative w-full h-full overflow-hidden bg-white group-hover:border-gray-100 shadow-lg p-6 transform -rotate-1 hover:rotate-0 transition-all duration-500 ease-in-out border border-opacity-0 border-gray-400 group-hover:border-opacity-100">
<div className="absolute inset-0 z-0 overflow-auto">
<div className="z-10">
<Typr
{...typrNotesProps({
user,
userLoading: isLoading,
mutateUser,
router,
})}
onReady={({editor})=>{
setEditorInstance(editor)
}}
postId={router?.isReady && (router.query.slug || router.query.id)}
/>
<Typr typr={typr}/>
</div>
</div>
</div>
Expand Down
38 changes: 31 additions & 7 deletions pages/note/[slug].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ const StickyFooterCTA = dynamic(() => import("@/components/StickyFooterCTA"), {
// }
// );

import { throttle } from 'lodash';

export default function Post({
post,
preview,
Expand Down Expand Up @@ -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 (
<Layout
maxWidth={"max-w-[1350px] search-wide"}
Expand Down Expand Up @@ -177,7 +204,7 @@ export default function Post({
<>
{/* <img src={'/static/images/check.svg'} className="absolute opacity-20 p-6 h-[298px] mt-[60px] top-0 left-0 w-full object-cover"/> */}
<div className="h-fit overflow-hidden bg-gray-100 px-2 md:px-0">
<div className="w-[758px] max-w-full px-2 md:px-0 group z-10 flex items-center justify-center bg-gray-50 mx-auto mt-20 md:mt-32 mb-20 relative rounded-sm rounded-b-none shadow-lg h-fit">
<div className="main-container w-[758px] transition-all duration-500 ease-in-out max-w-full px-2 md:px-0 group z-10 flex items-center justify-center bg-gray-50 mx-auto mt-20 md:mt-32 mb-20 relative rounded-sm rounded-b-none shadow-lg h-fit">
<div className="group relative w-full h-full overflow-hidden bg-white group-hover:border-gray-100 shadow-lg p-3 md:p-6 transform -rotate-0 hover:rotate-0 transition-all duration-500 ease-in-out border border-opacity-0 border-gray-400 group-hover:border-opacity-100">
<div className="inset-0 z-0">
<div className="relative bg-white p-0 md:p-6 flex flex-col justify-start h-full z-10">
Expand Down Expand Up @@ -293,12 +320,9 @@ export default function Post({
</div>
</div>

{/* <div className="absolute inset-0 bg-gray-50 -left-1 top-0.5 transform -rotate-[1.5deg] -z-10 shadow-md transition-all duration-500 ease-in-out group-hover:-left-0.5 group-hover:-top-[2px] group-hover:rotate-0 border-l border-gray-50 border border-opacity-0 group-hover:border-gray-100 group-hover:border-opacity-100" />
<div className="absolute inset-0 bg-white/80 -right-0.5 top-0.5 transform rotate-[1.5deg] -z-20 shadow-md transition-all duration-500 ease-in-out group-hover:-left-[4px] group-hover:right-0 group-hover:-top-[4px] group-hover:rotate-0 border-l border-t border-gray-50 border-opacity-0 group-hover:border-gray-100 group-hover:border-opacity-100" />
<div className="absolute inset-0 -right-0.5 top-0 transform rotate-[1.5deg] -z-50 shadow-md transition-all duration-500 ease-in-out group-hover:right-0.5 group-hover:-top-0.5 group-hover:rotate-0 border-l group-hover:border-gray-100 border-opacity-0 group-hover:border-opacity-100" /> */}
<div className="absolute inset-0 bg-gray-50 -left-1 top-0.5 transform -rotate-[1.5deg] -z-10 shadow-md transition-all duration-500 ease-in-out border-l border-gray-50 border border-opacity-0" />
<div className="absolute inset-0 bg-white/80 -right-0.5 top-0.5 transform rotate-[1.5deg] -z-20 shadow-md transition-all duration-500 ease-in-out border-l border-t border-gray-50 border-opacity-0" />
<div className="absolute inset-0 -right-0.5 top-0 transform rotate-[1.5deg] -z-50 shadow-md transition-all duration-500 ease-in-out border-l border-opacity-0" />
<div className="rotate-1 absolute inset-0 bg-gray-50 -left-1 top-0.5 transform -rotate-[1.5deg] -z-10 shadow-md transition-all duration-500 ease-in-out border-l border-gray-50 border border-opacity-0" />
<div className="rotate-2 absolute inset-0 bg-white/80 -right-0.5 top-0.5 transform rotate-[1.5deg] -z-20 shadow-md transition-all duration-500 ease-in-out border-l border-t border-gray-50 border-opacity-0" />
<div className="rotate-3 absolute inset-0 -right-0.5 top-0 transform rotate-[1.5deg] -z-50 shadow-md transition-all duration-500 ease-in-out border-l border-opacity-0" />
</div>
</div>
{/* <Head> */}
Expand Down
Loading

0 comments on commit 9cb817f

Please sign in to comment.