Merge branch 'feature/articles' into feature/#219-transform-valid-mar…

…kdown-to-nodes

src/components/Card/CardNFTArticle.module.scss

@@ -78,15 +78,13 @@
   }
 }
 
-.draft_banner {
+.banner {
   font-weight: bold;
-  color: var(--color-white);
-  background: var(--color-gray);
-  font-size: var(--font-size-small);
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  font-size: var(--font-size-small);
 
   span {
     display: block;
@@ -102,11 +100,25 @@
     color: var(--color-white);
     height: 32px;
     padding: 0 10px;
+  }
+
+  &.banner_draft {
+    color: var(--color-white);
+    background: var(--color-gray);
 
-    &:hover {
+    button:hover {
       color: var(--color-error);
     }
   }
+
+  &.banner_edition {
+    color: var(--color-white);
+    background: var(--color-border);
+
+    button:hover {
+      color: var(--color-success);
+    }
+  }
 }
 
 .draft_container {

src/components/Card/CardNFTArticle.tsx

@@ -9,6 +9,7 @@ import { SettingsContext } from "../../context/Theme";
 import { format } from "date-fns";
 import Link from 'next/link';
 import { Tags } from '../Tags/Tags';
+import { ArticlesContext } from '../../context/Articles';
 
 interface CardNftArticleProps {
   className?: string
@@ -36,8 +37,9 @@ const _CardNftArticle = ({
 }: CardNftArticleProps) => {
   const settings = useContext(SettingsContext)
   const thumbnailUrl = useMemo(() => thumbnailUri && ipfsGatewayUrl(thumbnailUri), [thumbnailUri])
-  const dateCreatedAt = useMemo(() => new Date(createdAt), [createdAt]);
-  const urlArticle = isDraft ? `/article/editor/local/${id}` : `/article/${slug}`;
+  const dateCreatedAt = useMemo(() => new Date(createdAt), [createdAt])
+  const urlArticle = isDraft ? `/article/editor/local/${id}` : `/article/${slug}`
+  const { isEdited } = useContext(ArticlesContext)
 
   const onClickDelete = useCallback<MouseEventHandler>((event) => {
     event.preventDefault()
@@ -47,6 +49,8 @@ const _CardNftArticle = ({
     }
   }, [])
 
+  const edited = useMemo(() => isEdited(id as string), [isEdited, id])
+
   return (
     <div className={cs(style.container, className, {
       [style.hover_effect]: settings.hoverEffectCard,
@@ -56,7 +60,7 @@ const _CardNftArticle = ({
         <a className={cs(style.link_wrapper)}/>
       </Link>
       {isDraft && (
-        <div className={style.draft_banner}>
+        <div className={cs(style.banner, style.banner_draft)}>
           <span>DRAFT (saved locally)</span>
           <button
             type="button"
@@ -66,6 +70,17 @@ const _CardNftArticle = ({
           </button>
         </div>
       )}
+      {!isDraft && edited && (
+        <div className={cs(style.banner, style.banner_edition)}>
+          <span>Unpublished changes</span>
+          <button
+            type="button"
+            onClick={onClickDelete}
+          >
+            <i className="fa-solid fa-pen-to-square" aria-hidden/>
+          </button>
+        </div>
+      )}
       <div className={style.content}>
         <div className={cs(style['img-wrapper'], {
           [style['draft_img-wrapper']]: isDraft,

src/components/Guards/UserGuard.tsx

@@ -1,9 +1,20 @@
 import { useRouter } from "next/router"
-import { useContext, useEffect, PropsWithChildren } from "react"
+import { useContext, useEffect, PropsWithChildren, useMemo } from "react"
 import { UserContext } from "../../containers/UserProvider"
-import { ConnectedUser } from "../../types/entities/User"
+import { ConnectedUser, User } from "../../types/entities/User"
+import { isUserOrCollaborator } from "../../utils/user"
 
 
+// a collection of basic authorization utilities as factory functions
+export const UserGuardUtils: Record<
+  string, 
+  (...args: any[]) => (user: ConnectedUser) => boolean
+> = {
+  AUTHOR_OF: (author: User) => (user: ConnectedUser) => {
+    return user && author && isUserOrCollaborator(user as User, author)
+  }
+}
+
 interface Props {
   forceRedirect?: boolean
   allowed?: (user: ConnectedUser) => boolean
@@ -17,16 +28,29 @@ export function UserGuard({
   const userCtx = useContext(UserContext)
   const router = useRouter()
 
+  const isAllowed = useMemo(() => {
+    if (userCtx.user && userCtx.userFetched) {
+      if (allowed) {
+        return allowed(userCtx.user)
+      }
+      return true
+    }
+    return false
+  }, [userCtx, allowed])
+
+  // handle re-routing if needed (forceRedirect is set to true)
+  // * no user in context
+  // * user in context but not allowed
   useEffect(() => {
     if (forceRedirect && userCtx.autoConnectChecked) {
       if (!userCtx.user) {
         router.push(`/sync-redirect?target=${encodeURIComponent(router.asPath)}`)
       }
-      else if (userCtx.userFetched && allowed && !allowed(userCtx.user)) {
+      else if (userCtx.userFetched && !isAllowed) {
         router.push(`/`)
       }
     }
-  }, [allowed, forceRedirect, router, userCtx])
+  }, [isAllowed, forceRedirect, router, userCtx])
 
-  return userCtx.user ? <>{children}</> : null
+  return isAllowed ? <>{children}</> : null
 }

src/components/List/ListSplits.tsx

@@ -33,8 +33,8 @@ export function ListSplits({
               {displayPercentage(item.pct/1000)}%
             </span>
             <div>
-	      <UserBadge
-		className={style.user}
+	            <UserBadge
+		            className={style.user}
                 size="small"
                 user={item.user}
                 displayAvatar={false}

src/components/NFTArticle/NFTArticle.module.scss

@@ -61,9 +61,17 @@
     padding: 0 4px;
     border-radius: 4px;
   }
+
+  :global(.hr) {
+    font-size: 1.2rem;
+  }
 }
 
 .article_wrapper_container {
   width: min(900px, 100%);
   margin: 0 auto;
+}
+
+.article_void {
+  display: none;
 }

src/components/NFTArticle/SlateEditor/AutoFormatPlugin/BlockTypeChange.ts

@@ -1,24 +1,26 @@
-import { Range, Point,  Node,  Editor, Transforms, Ancestor, NodeEntry } from 'slate'; 
-import { AutoFormatChangeType, ChangeData, AutoFormatChange } from './index'; 
+import { Editor, Transforms } from 'slate';
+import { AutoFormatChangeType, ChangeData, AutoFormatChange } from './index';
 import { getRangeFromBlockStartToCursor, getTextFromBlockStartToCursor } from '../utils';
 import { BlockDefinitions, EArticleBlocks } from '../Elements/Blocks';
+import { escapeRegExp } from "../../../../utils/regex";
 export class BlockTypeChange implements AutoFormatChange {
-  shortcut: string 
+  shortcut: string | string[]
   type: AutoFormatChangeType
   data: ChangeData
   trigger:string
-  constructor(shortcut:string, data: ChangeData) {
+  constructor(shortcut:string | string[], data: ChangeData) {
     this.shortcut = shortcut
     this.data = data
     this.type = 'BlockTypeChange'
     this.trigger = ' ';
   }
 
-
   apply = (editor: Editor, text: string): boolean => {
     const isTrigger = text === this.trigger;
     const textBeforeCursor = isTrigger ? getTextFromBlockStartToCursor(editor) : text;
-    if (isTrigger && textBeforeCursor === this.shortcut) {
+    const testValues = typeof this.shortcut === 'string' ? [this.shortcut] : this.shortcut;
+    const shortcutMatch = testValues.find((shortcut) => `${textBeforeCursor} `.startsWith(`${shortcut}`))
+    if (isTrigger && shortcutMatch) {
       Transforms.delete(editor, {
 	at: getRangeFromBlockStartToCursor(editor),
       })
@@ -28,11 +30,11 @@ export class BlockTypeChange implements AutoFormatChange {
       )
       return true;
     } else {
-      const matchLink = new RegExp(`^${this.shortcut}\\s(?<text>.*)`, 'gm');
+      const matchLink = new RegExp(`^(${testValues.map(testValue => escapeRegExp(testValue)).join('|')})\\s(?<text>.*)`, 'gm');
       const matches = matchLink.exec(textBeforeCursor);
       if (!matches) return false;
       const { type } = this.data;
-      const  matchedText = matches.groups?.text;
+      const matchedText = matches.groups?.text;
       if (!matchedText) return false;
       const blockDefinition = BlockDefinitions[type as EArticleBlocks];
       const element = blockDefinition?.instanciateElement?.({...this.data, text: matchedText})