Merge pull request #557 from prezly/feature/care-5776-implement-edit-…

…button-for-site-contact-cards [CARE-5776] Feature - Add support for "Edit" button to PressContactsExtension
prezly · Jul 19, 2024 · e88d71c · e88d71c
2 parents 35da523 + fc9e48d
commit e88d71c
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 7 deletions.
diff --git a/packages/slate-editor/src/extensions/press-contacts/PressContactsExtension.tsx b/packages/slate-editor/src/extensions/press-contacts/PressContactsExtension.tsx
@@ -12,10 +12,11 @@ import {
     normalizeContactNodeAttributes,
     parseSerializedElement,
 } from './lib';
+import type { PressContactsExtensionParameters } from './types';
 
 export const EXTENSION_ID = 'PressContactExtension';
 
-export const PressContactsExtension = (): Extension => ({
+export const PressContactsExtension = (params: PressContactsExtensionParameters): Extension => ({
     id: EXTENSION_ID,
     deserialize: {
         element: composeElementDeserializer({
@@ -43,7 +44,11 @@ export const PressContactsExtension = (): Extension => ({
     renderElement: ({ attributes, children, element }) => {
         if (isContactNode(element)) {
             return (
-                <PressContactElement attributes={attributes} element={element}>
+                <PressContactElement
+                    attributes={attributes}
+                    element={element}
+                    onEdit={params.onEdit}
+                >
                     {children}
                 </PressContactElement>
             );

diff --git a/packages/slate-editor/src/extensions/press-contacts/components/PressContactElement.tsx b/packages/slate-editor/src/extensions/press-contacts/components/PressContactElement.tsx
@@ -11,16 +11,18 @@ import { Avatar, EditorBlock } from '#components';
 import { Envelope, Globe, Mobile, Phone, SocialFacebook, SocialTwitter } from '#icons';
 
 import { getSocialHandles, getUrl, removePressContact, updatePressContact } from '../lib';
+import type { PressContactsExtensionParameters } from '../types';
 
 import styles from './PressContactElement.module.scss';
 import { PressContactMenu } from './PressContactMenu';
 
 interface Props extends RenderElementProps {
     element: ContactNode;
+    onEdit?: PressContactsExtensionParameters['onEdit'];
     renderMenu?: (props: { onClose: () => void }) => ReactNode;
 }
 
-export function PressContactElement({ attributes, children, element, renderMenu }: Props) {
+export function PressContactElement({ attributes, children, element, onEdit, renderMenu }: Props) {
     const editor = useSlateStatic();
     const { layout, show_avatar: showAvatar } = element;
     const isCardLayout = layout === ContactLayout.CARD;
@@ -51,6 +53,7 @@ export function PressContactElement({ attributes, children, element, renderMenu
                 return (
                     <PressContactMenu
                         element={element}
+                        onEdit={onEdit}
                         onChangeLayout={handleChangeLayout}
                         onToggleAvatar={handleToggleAvatar}
                         onRemove={handleRemove}

diff --git a/packages/slate-editor/src/extensions/press-contacts/components/PressContactMenu.tsx b/packages/slate-editor/src/extensions/press-contacts/components/PressContactMenu.tsx
@@ -4,11 +4,14 @@ import React from 'react';
 
 import type { OptionsGroupOption } from '#components';
 import { Button, OptionsGroup, Toggle, Toolbox } from '#components';
-import { ContactLayoutCard, ContactLayoutSignature, Delete } from '#icons';
+import { ContactLayoutCard, ContactLayoutSignature, Delete, ExternalLink } from '#icons';
+
+import type { PressContactsExtensionParameters } from '../types';
 
 interface Props {
     element: ContactNode;
     onChangeLayout: (layout: ContactLayout) => void;
+    onEdit: PressContactsExtensionParameters['onEdit'];
     onRemove: () => void;
     onToggleAvatar: (visible: boolean) => void;
 }
@@ -26,7 +29,19 @@ const LAYOUT_OPTIONS: OptionsGroupOption<ContactLayout>[] = [
     },
 ];
 
-export function PressContactMenu({ element, onChangeLayout, onRemove, onToggleAvatar }: Props) {
+export function PressContactMenu({
+    element,
+    onChangeLayout,
+    onEdit,
+    onRemove,
+    onToggleAvatar,
+}: Props) {
+    function handleEdit() {
+        if (element.reference) {
+            onEdit?.(element.reference);
+        }
+    }
+
     return (
         <>
             <Toolbox.Header>Site contact settings</Toolbox.Header>
@@ -52,6 +67,20 @@ export function PressContactMenu({ element, onChangeLayout, onRemove, onToggleAv
                 />
             </Toolbox.Section>
 
+            {element.reference && onEdit && (
+                <Toolbox.Section noPadding>
+                    <Button
+                        icon={ExternalLink}
+                        iconPosition="right"
+                        fullWidth
+                        onClick={handleEdit}
+                        variant="clear"
+                    >
+                        Edit contact
+                    </Button>
+                </Toolbox.Section>
+            )}
+
             <Toolbox.Footer>
                 <RemoveButton onClick={onRemove} />
             </Toolbox.Footer>

diff --git a/packages/slate-editor/src/extensions/press-contacts/index.ts b/packages/slate-editor/src/extensions/press-contacts/index.ts
@@ -8,3 +8,4 @@ export {
     parseSerializedElement,
     removePressContact,
 } from './lib';
+export type { PressContactsExtensionParameters } from './types';
diff --git a/packages/slate-editor/src/extensions/press-contacts/types.ts b/packages/slate-editor/src/extensions/press-contacts/types.ts
@@ -0,0 +1,5 @@
+import type { NewsroomContact } from '@prezly/sdk';
+
+export interface PressContactsExtensionParameters {
+    onEdit?: (uuid: NewsroomContact['uuid']) => void;
+}
diff --git a/packages/slate-editor/src/modules/editor/getEnabledExtensions.ts b/packages/slate-editor/src/modules/editor/getEnabledExtensions.ts
@@ -199,7 +199,7 @@ export function* getEnabledExtensions(parameters: Parameters): Generator<Extensi
     }
 
     if (withPressContacts) {
-        yield PressContactsExtension();
+        yield PressContactsExtension(withPressContacts);
     }
 
     if (withVariables) {

diff --git a/packages/slate-editor/src/modules/editor/test-utils.ts b/packages/slate-editor/src/modules/editor/test-utils.ts
@@ -61,6 +61,7 @@ export function getAllExtensions() {
             withPlaceholders: {},
             withPressContacts: {
                 getSuggestions: () => [],
+                onEdit: () => {},
                 renderEmpty: () => null,
                 renderSuggestion: () => null,
                 renderSuggestionsFooter: () => null,

diff --git a/packages/slate-editor/src/modules/editor/types.ts b/packages/slate-editor/src/modules/editor/types.ts
@@ -19,6 +19,7 @@ import type {
     PlaceholderNode,
     PlaceholdersExtensionParameters,
 } from '#extensions/placeholders';
+import type { PressContactsExtensionParameters } from '#extensions/press-contacts';
 import type { SnippetsExtensionParameters } from '#extensions/snippet';
 import type { StoryBookmarkExtensionParameters } from '#extensions/story-bookmark';
 import type { StoryEmbedExtensionParameters } from '#extensions/story-embed';
@@ -129,7 +130,10 @@ export interface EditorProps {
         PlaceholdersExtensionParameters,
         'format' | 'removable' | 'withMediaPlaceholders' | 'withPastedUrlsUnfurling'
     >;
-    withPressContacts?: false | PlaceholdersExtensionParameters['withContactPlaceholders'];
+    withPressContacts?:
+        | false
+        | (PressContactsExtensionParameters &
+              PlaceholdersExtensionParameters['withContactPlaceholders']);
     withRichFormattingMenu?:
         | boolean
         | {