From 7081010e725eb29b2930f17cb9eb11a84f804a6c Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel.dohnal@automattic.com>
Date: Thu, 30 Nov 2023 10:08:16 +0100
Subject: [PATCH] Add preview text counter

[MAILPOET-5757]
---
 .../engine/components/sidebar/details-panel.tsx            | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/mailpoet/assets/js/src/email-editor/engine/components/sidebar/details-panel.tsx b/mailpoet/assets/js/src/email-editor/engine/components/sidebar/details-panel.tsx
index 2c79da8514..593b91faf6 100644
--- a/mailpoet/assets/js/src/email-editor/engine/components/sidebar/details-panel.tsx
+++ b/mailpoet/assets/js/src/email-editor/engine/components/sidebar/details-panel.tsx
@@ -10,6 +10,8 @@ import { __ } from '@wordpress/i18n';
 import ReactStringReplace from 'react-string-replace';
 import { storeName } from '../../store';
 
+const previewTextMaxLength = 150;
+
 export function DetailsPanel() {
   const [mailpoetEmailData] = useEntityProp(
     'postType',
@@ -60,6 +62,8 @@ export function DetailsPanel() {
     </>
   );
 
+  const previewTextLength = mailpoetEmailData?.preheader?.length ?? 0;
+
   return (
     <PanelBody
       title={__('Details', 'mailpoet')}
@@ -88,6 +92,9 @@ export function DetailsPanel() {
         onChange={(value) => updateEmailProperty('preheader', value)}
         data-automation-id="email_preview_text"
       />
+      {previewTextLength}
+      {'/'}
+      {previewTextMaxLength}
       <div className="mailpoet-settings-panel__help">
         <Text>
           {__(