From f6ac6608b8826fcdf0684d4d50b76ca948aa87bf Mon Sep 17 00:00:00 2001
From: Ivan Voskoboinyk <ivan@voskoboinyk.com>
Date: Wed, 19 Jun 2024 16:21:00 +0200
Subject: [PATCH 1/8] [DEV-13006] Bump dependencies

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d7093ed..497cdd6 100644
--- a/package.json
+++ b/package.json
@@ -84,8 +84,8 @@
     },
     "dependencies": {
         "@prezly/linear-partition": "^1.0.2",
-        "@prezly/sdk": "^21.0.0",
-        "@prezly/story-content-format": "^0.64.0",
+        "@prezly/sdk": "^21.6.0",
+        "@prezly/story-content-format": "^0.65.1",
         "@prezly/uploadcare": "^2.4.4",
         "@react-hookz/web": "^12.0.0",
         "classnames": "^2.2.6",

From 3f5003c93c5ab4365c88f4054addee1f947e2fca Mon Sep 17 00:00:00 2001
From: Ivan Voskoboinyk <ivan@voskoboinyk.com>
Date: Wed, 19 Jun 2024 16:23:05 +0200
Subject: [PATCH 2/8] [DEV-13006] Implement highlighted text rendering

---
 src/elements/Text.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/elements/Text.tsx b/src/elements/Text.tsx
index d2a3b8f..b0b38ab 100644
--- a/src/elements/Text.tsx
+++ b/src/elements/Text.tsx
@@ -10,7 +10,7 @@ interface Props {
 }
 
 export function Text({ node }: Props) {
-    const { bold, italic, subscript, superscript, text, underlined } = node;
+    const { bold, italic, subscript, superscript, text, underlined, highlighted } = node;
     let children: ReactNode = Text.preserveSoftBreaks(text);
 
     if (bold) {
@@ -33,10 +33,14 @@ export function Text({ node }: Props) {
         children = <u>{children}</u>;
     }
 
+    if (highlighted) {
+        children = <mark>{children}</mark>;
+    }
+
     return <>{children}</>;
 }
 
-Text.preserveSoftBreaks = function (text: string): ReactNode {
+Text.preserveSoftBreaks = (text: string): ReactNode => {
     const nodes = text.split(LINE_BREAKS).reduce<ReactNode[]>(
         (result, part, index) =>
             result.length === 0

From 06ca98c6326b05c5c56514b814c621eaf9b09134 Mon Sep 17 00:00:00 2001
From: Ivan Voskoboinyk <ivan@voskoboinyk.com>
Date: Wed, 19 Jun 2024 18:13:58 +0200
Subject: [PATCH 3/8] [DEV-13006] Implement renderer for Callout node

---
 src/Renderer.tsx                              |  2 +
 src/elements/Callout/Callout.scss             | 33 +++++++++++++++
 .../Callout/Callout.slate.stories.tsx         | 40 +++++++++++++++++++
 src/elements/Callout/Callout.tsx              | 34 ++++++++++++++++
 src/elements/Callout/index.ts                 |  1 +
 src/elements/index.ts                         |  1 +
 6 files changed, 111 insertions(+)
 create mode 100644 src/elements/Callout/Callout.scss
 create mode 100644 src/elements/Callout/Callout.slate.stories.tsx
 create mode 100644 src/elements/Callout/Callout.tsx
 create mode 100644 src/elements/Callout/index.ts

diff --git a/src/Renderer.tsx b/src/Renderer.tsx
index 7874893..d097fe3 100644
--- a/src/Renderer.tsx
+++ b/src/Renderer.tsx
@@ -3,6 +3,7 @@ import {
     AttachmentNode,
     BookmarkNode,
     ButtonBlockNode,
+    CalloutNode,
     ContactNode,
     DividerNode,
     DocumentNode,
@@ -69,6 +70,7 @@ export function Renderer<N extends Node | Node[]>({
                         component={Elements.ButtonBlock}
                     />
                     <Component match={BookmarkNode.isBookmarkNode} component={Elements.Bookmark} />
+                    <Component match={CalloutNode.isCalloutNode} component={Elements.Callout} />
                     <Component match={ContactNode.isContactNode} component={Elements.Contact} />
                     <Component match={DividerNode.isDividerNode} component={Elements.Divider} />
                     <Component match={DocumentNode.isDocumentNode} component={Elements.Document} />
diff --git a/src/elements/Callout/Callout.scss b/src/elements/Callout/Callout.scss
new file mode 100644
index 0000000..8e5431f
--- /dev/null
+++ b/src/elements/Callout/Callout.scss
@@ -0,0 +1,33 @@
+@import "styles/variables";
+
+.prezly-slate-callout {
+    display: flex;
+    flex-direction: row;
+
+    padding: $spacing-3;
+    gap: $spacing-1-5;
+
+    background: rgba($color-link, 0.08);
+    border: 1px solid rgba($color-link, 0.60);
+    border-radius: $spacing-half;
+
+    &[data-icon]::before {
+        content: attr(data-icon);
+        display: block;
+    }
+
+    &--align-left {
+        text-align: left;
+        flex-direction: row;
+    }
+
+    &--align-center {
+        text-align: center;
+        flex-direction: column;
+    }
+
+    &--align-right {
+        text-align: right;
+        flex-direction: row-reverse;
+    }
+}
diff --git a/src/elements/Callout/Callout.slate.stories.tsx b/src/elements/Callout/Callout.slate.stories.tsx
new file mode 100644
index 0000000..061257a
--- /dev/null
+++ b/src/elements/Callout/Callout.slate.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, Story } from '@storybook/react';
+
+import { StoryNameDecorator } from '../../dev/StoryNameDecorator';
+import { Renderer } from '../../Renderer';
+
+export default {
+    title: 'Elements/Quote',
+    decorators: [StoryNameDecorator],
+} as Meta;
+
+export const BlockQuote: Story = () => (
+    <Renderer
+        nodes={[
+            {
+                type: 'block-quote',
+                children: [
+                    {
+                        text: 'I love how Prezly has been created by people who really understand the needs of PR professionals. Its features and functionality are just right for our business.',
+                    },
+                ],
+            },
+        ]}
+    />
+);
+
+export const Alignment: Story = () => (
+    <Renderer
+        nodes={[
+            {
+                type: 'block-quote',
+                align: 'center',
+                children: [
+                    {
+                        text: 'Same goes for blockquotes',
+                    },
+                ],
+            },
+        ]}
+    />
+);
diff --git a/src/elements/Callout/Callout.tsx b/src/elements/Callout/Callout.tsx
new file mode 100644
index 0000000..e90220e
--- /dev/null
+++ b/src/elements/Callout/Callout.tsx
@@ -0,0 +1,34 @@
+import { CalloutNode } from '@prezly/story-content-format';
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+
+import { stringifyNode } from '../../lib';
+
+import './Callout.scss';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    node: CalloutNode;
+}
+
+export function Callout({ children, className, node, ...props }: Props) {
+    const isEmpty = stringifyNode(node).trim() === '';
+
+    if (isEmpty) {
+        return null;
+    }
+
+    return (
+        <div
+            className={classNames('prezly-slate-callout', className, {
+                'prezly-slate-callout--align-inherit': node.align === undefined,
+                'prezly-slate-callout--align-left': node.align === CalloutNode.Alignment.LEFT,
+                'prezly-slate-callout--align-center': node.align === CalloutNode.Alignment.CENTER,
+                'prezly-slate-callout--align-right': node.align === CalloutNode.Alignment.RIGHT,
+            })}
+            data-icon={node.icon || undefined}
+            {...props}
+        >
+            <p>{children}</p>
+        </div>
+    );
+}
diff --git a/src/elements/Callout/index.ts b/src/elements/Callout/index.ts
new file mode 100644
index 0000000..ebf53b6
--- /dev/null
+++ b/src/elements/Callout/index.ts
@@ -0,0 +1 @@
+export { Callout } from './Callout';
diff --git a/src/elements/index.ts b/src/elements/index.ts
index 5dfb5de..fbb9ea7 100644
--- a/src/elements/index.ts
+++ b/src/elements/index.ts
@@ -6,6 +6,7 @@ export { Passthru } from './Passthru';
 export { Attachment } from './Attachment';
 export { Bookmark } from './Bookmark';
 export { ButtonBlock } from './ButtonBlock';
+export { Callout } from './Callout';
 export { Contact } from './Contact';
 export { Divider } from './Divider';
 export { Embed } from './Embed';

From d956dc520e61fb26f46f39a4ff5fe17b8b0a32fe Mon Sep 17 00:00:00 2001
From: Ivan Voskoboinyk <ivan@voskoboinyk.com>
Date: Wed, 19 Jun 2024 18:28:45 +0200
Subject: [PATCH 4/8] [DEV-13006] Fix storybook

---
 src/elements/Callout/Callout.scss             |  2 +-
 .../Callout/Callout.slate.stories.tsx         | 49 +++++++++++++------
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/elements/Callout/Callout.scss b/src/elements/Callout/Callout.scss
index 8e5431f..ce5d37c 100644
--- a/src/elements/Callout/Callout.scss
+++ b/src/elements/Callout/Callout.scss
@@ -8,7 +8,7 @@
     gap: $spacing-1-5;
 
     background: rgba($color-link, 0.08);
-    border: 1px solid rgba($color-link, 0.60);
+    border: 1px solid rgba($color-link, 0.6);
     border-radius: $spacing-half;
 
     &[data-icon]::before {
diff --git a/src/elements/Callout/Callout.slate.stories.tsx b/src/elements/Callout/Callout.slate.stories.tsx
index 061257a..10acfbc 100644
--- a/src/elements/Callout/Callout.slate.stories.tsx
+++ b/src/elements/Callout/Callout.slate.stories.tsx
@@ -8,32 +8,53 @@ export default {
     decorators: [StoryNameDecorator],
 } as Meta;
 
-export const BlockQuote: Story = () => (
+const TEXT = {
+    text: 'I love how Prezly has been created by people who really understand the needs of PR professionals. Its features and functionality are just right for our business.',
+};
+
+export const Callout: Story = () => (
     <Renderer
         nodes={[
             {
-                type: 'block-quote',
-                children: [
-                    {
-                        text: 'I love how Prezly has been created by people who really understand the needs of PR professionals. Its features and functionality are just right for our business.',
-                    },
-                ],
+                type: 'callout',
+                icon: '💡',
+                children: [TEXT],
             },
         ]}
     />
 );
 
-export const Alignment: Story = () => (
+export const CenterAligned: Story = () => (
+    <Renderer
+        nodes={[
+            {
+                type: 'callout',
+                icon: '⚠️',
+                align: 'center',
+                children: [TEXT],
+            },
+        ]}
+    />
+);
+export const RightAligned: Story = () => (
     <Renderer
         nodes={[
             {
-                type: 'block-quote',
+                type: 'callout',
+                icon: '❌',
                 align: 'center',
-                children: [
-                    {
-                        text: 'Same goes for blockquotes',
-                    },
-                ],
+                children: [TEXT],
+            },
+        ]}
+    />
+);
+
+export const NoIcon: Story = () => (
+    <Renderer
+        nodes={[
+            {
+                type: 'callout',
+                children: [TEXT],
             },
         ]}
     />

From c32171bd9b24accd9e0e5fd7ae57a8230dd3a79f Mon Sep 17 00:00:00 2001
From: Ivan Voskoboinyk <ivan@voskoboinyk.com>
Date: Wed, 19 Jun 2024 18:30:26 +0200
Subject: [PATCH 5/8] [DEV-13006] Fix storybook page name

---
 src/elements/Callout/Callout.slate.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/Callout/Callout.slate.stories.tsx b/src/elements/Callout/Callout.slate.stories.tsx
index 10acfbc..836c333 100644
--- a/src/elements/Callout/Callout.slate.stories.tsx
+++ b/src/elements/Callout/Callout.slate.stories.tsx
@@ -4,7 +4,7 @@ import { StoryNameDecorator } from '../../dev/StoryNameDecorator';
 import { Renderer } from '../../Renderer';
 
 export default {
-    title: 'Elements/Quote',
+    title: 'Elements/Callout',
     decorators: [StoryNameDecorator],
 } as Meta;
 

From 32e75024ce165ca8aaddfe60a8b5dabe81bcab35 Mon Sep 17 00:00:00 2001
From: Ivan Voskoboinyk <ivan@voskoboinyk.com>
Date: Wed, 19 Jun 2024 18:30:31 +0200
Subject: [PATCH 6/8] [DEV-13006] Fix paragraph styling

---
 src/elements/Callout/Callout.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/elements/Callout/Callout.scss b/src/elements/Callout/Callout.scss
index ce5d37c..121a6c0 100644
--- a/src/elements/Callout/Callout.scss
+++ b/src/elements/Callout/Callout.scss
@@ -30,4 +30,8 @@
         text-align: right;
         flex-direction: row-reverse;
     }
+
+    > p {
+        margin: 0;
+    }
 }

From 281a4810ec980f34be0af76a6a8812c5a8df5503 Mon Sep 17 00:00:00 2001
From: Ivan Voskoboinyk <ivan@voskoboinyk.com>
Date: Wed, 19 Jun 2024 18:31:58 +0200
Subject: [PATCH 7/8] [DEV-13006] Use the same text style for Callouts as for a
 paragraph

---
 src/elements/Callout/Callout.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/elements/Callout/Callout.scss b/src/elements/Callout/Callout.scss
index 121a6c0..e53c6d4 100644
--- a/src/elements/Callout/Callout.scss
+++ b/src/elements/Callout/Callout.scss
@@ -1,6 +1,13 @@
 @import "styles/variables";
 
 .prezly-slate-callout {
+    margin: $spacing-2 0;
+
+    color: $color-text;
+    font-weight: 500;
+    font-size: $font-size-m;
+    line-height: $line-height;
+
     display: flex;
     flex-direction: row;
 

From 5c18ea100bc173f6c4daa26ff98c8b88d5d12d2d Mon Sep 17 00:00:00 2001
From: Ivan Voskoboinyk <ivan@voskoboinyk.com>
Date: Wed, 19 Jun 2024 18:40:09 +0200
Subject: [PATCH 8/8] [DEV-13006] Fix typo

---
 src/elements/Callout/Callout.slate.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/elements/Callout/Callout.slate.stories.tsx b/src/elements/Callout/Callout.slate.stories.tsx
index 836c333..8204cd7 100644
--- a/src/elements/Callout/Callout.slate.stories.tsx
+++ b/src/elements/Callout/Callout.slate.stories.tsx
@@ -42,7 +42,7 @@ export const RightAligned: Story = () => (
             {
                 type: 'callout',
                 icon: '❌',
-                align: 'center',
+                align: 'right',
                 children: [TEXT],
             },
         ]}