Improve preview tokens

admin.php

@@ -604,7 +604,35 @@ function fcnen_settings_page() {
   $loop_part_story = get_option( 'fcnen_template_loop_part_story', FCNEN_DEFAULTS['loop_part_story'] ?? '' );
   $loop_part_chapter = get_option( 'fcnen_template_loop_part_chapter', FCNEN_DEFAULTS['loop_part_chapter'] ?? '' );
 
+  // Preview replacements
+  $preview_replacements = array(
+    '{{site_name}}' => get_bloginfo( 'name' ),
+    '{{author}}' => _x( 'Author', 'Preview replacement string.', 'fcnen' ),
+    '{{title}}' => _x( 'Preview Title', 'Preview replacement string.', 'fcnen' ),
+    '{{story_title}}' => _x( 'Preview Story Title', 'Preview replacement string.', 'fcnen' ),
+    '{{excerpt}}' => _x( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel lacus luctus, laoreet augue vitae, dignissim arcu. Curabitur fermentum euismod justo et luctus. Cras sit amet gravida libero.', 'Preview replacement string.', 'fcnen' ),
+    '{{date}}' => date( get_option( 'date_format' ) ),
+    '{{time}}' => date( get_option( 'time_format' ) ),
+    '{{code}}' => wp_generate_password( 32, false ),
+    '{{email}}' => _x( 'subscriber@email.com', 'Preview replacement string.', 'fcnen' ),
+    '{{type}}' => _x( 'Type', 'Preview replacement string.', 'fcnen' ),
+    '{{scope_post_types}}' => _x( 'Blogs, Stories, Chapters', 'Preview replacement string.', 'fcnen' ),
+    '{{scope_stories}}' => _x( 'Dracula, Sherlock Holmes, My Immortal', 'Preview replacement string.', 'fcnen' ),
+    '{{scope_categories}}' => _x( 'External, Wholesome, Creepy', 'Preview replacement string.', 'fcnen' ),
+    '{{scope_tags}}' => _x( 'Amnesia, Dystopian, Magical Girls', 'Preview replacement string.', 'fcnen' ),
+    '{{scope_genres}}' => _x( 'Science Fiction, Solarpunk, Cosmic Horror', 'Preview replacement string.', 'fcnen' ),
+    '{{scope_fandoms}}' => _x( 'Original, Sol Bianca, Little Witch Academia', 'Preview replacement string.', 'fcnen' ),
+    '{{scope_characters}}' => _x( 'Twilight Sparkle, Luz Noceda, Rebecca', 'Preview replacement string.', 'fcnen' ),
+    '{{scope_warnings}}' => _x( 'Profanity, Violence, Gore', 'Preview replacement string.', 'fcnen' ),
+    '{{site_link}}' => '#',
+    '{{activation_link}}' => '#',
+    '{{unsubscribe_link}}' => '#',
+    '{{edit_link}}' => '#',
+    '{{story_link}}' => '#'
+  );
+
   // Start HTML ---> ?>
+  <script><?php echo 'var fcnes_preview_replacements = ' . json_encode( $preview_replacements ) . ';'; ?></script>
   <div id="fcnen-admin-page-subscribers" class="wrap fcnen-settings _settings">
     <h1 class="fcnen-settings__header"><?php echo esc_html__( 'Settings', 'fcnen' ); ?></h1>
     <hr class="wp-header-end">

fictioneer-email-notifications.php

@@ -65,7 +65,7 @@ define(
     'subject_notification' => _x( 'New content on {{site_name}}', 'Email subject', 'fcnen' ),
     'layout_confirmation' => __( '<p>Thank you for subscribing to <a href="{{site_link}}" target="_blank">{{site_name}}</a>.</p>' . "\n\n" . '<p>Please click the following link within 24 hours to confirm your subscription: <a href="{{activation_link}}">Activate Subscription</a>.</p>' . "\n\n" . '<p>Your edit code is <strong>{{code}}</strong>, which will also be included in any future emails. In case your code ever gets compromised, just delete your subscription and submit a new one.</p>' . "\n\n" . '<p>If someone has subscribed you against your will or you reconsidered, worry not! Without confirmation, your subscription and email address will be deleted after 24 hours. You can also immediately <a href="{{unsubscribe_link}}">delete it with this link</a>.</p>', 'fcnen' ),
     'layout_code' => __( '<p>Following is the edit code for your email subscription on <a href="{{site_link}}" target="_blank">{{site_name}}</a>. Do not share it. If compromised, just delete your subscription and submit a new one.</p>' . "\n\n" . '<p><strong>{{code}}</strong></p>' . "\n\n" . '<p>You can also directly edit your subscription with this <a href="{{edit_link}}" target="_blank">link</a>.</p>', 'fcnen' ),
-    'layout_edit' => "<p>Your subscription preferences on <a href='{{site_link}}' target='_blank'>{{site_name}}</a> have been updated to:</p>\n\n<ul style='padding-left: 20px; margin: 20px 0;'>\n\n{{#scope_everything}}<li>{{scope_everything}}</li>{{/scope_everything}}\n\n{{^scope_everything}}\n{{#scope_post_types}}<li><strong>Post Types:</strong> {{scope_post_types}}</li>{{/scope_post_types}}\n{{#scope_stories}}<li><strong>Stories:</strong> {{scope_stories}}</li>{{/scope_stories}}\n{{#scope_categories}}<li><strong>Categories:</strong> {{scope_categories}}</li>{{/scope_categories}}\n{{#scope_tags}}<li><strong>Tags:</strong> {{scope_tags}}</li>{{/scope_tags}}\n{{#scope_genres}}<li><strong>Genres:</strong> {{scope_genres}}</li>{{/scope_genres}}\n{{#scope_fandoms}}<li><strong>Fandoms:</strong> {{scope_fandoms}}</li>{{/scope_fandoms}}\n{{#scope_characters}}<li><strong>Characters:</strong> {{scope_characters}}</li>{{/scope_characters}}\n{{#scope_warnings}}<li><strong>Warnings:</strong> {{scope_warnings}}</li>{{/scope_warnings}}\n{{/scope_everything}}\n\n</ul>\n\n<p>If that was not you, please <a href='{{unsubscribe_link}}' target='_blank'>delete<a> and renew your subscription. Also make sure your email account is not compromised and never share your code.</p>\n",
+    'layout_edit' => "<p>Your subscription preferences on <a href='{{site_link}}' target='_blank'>{{site_name}}</a> have been updated to:</p>\n\n<ul style='padding-left: 20px; margin: 20px 0;'>\n\n{{#scope_everything}}<li>Everything</li>{{/scope_everything}}\n\n{{^scope_everything}}\n{{#scope_post_types}}<li><strong>Post Types:</strong> {{scope_post_types}}</li>{{/scope_post_types}}\n{{#scope_stories}}<li><strong>Stories:</strong> {{scope_stories}}</li>{{/scope_stories}}\n{{#scope_categories}}<li><strong>Categories:</strong> {{scope_categories}}</li>{{/scope_categories}}\n{{#scope_tags}}<li><strong>Tags:</strong> {{scope_tags}}</li>{{/scope_tags}}\n{{#scope_genres}}<li><strong>Genres:</strong> {{scope_genres}}</li>{{/scope_genres}}\n{{#scope_fandoms}}<li><strong>Fandoms:</strong> {{scope_fandoms}}</li>{{/scope_fandoms}}\n{{#scope_characters}}<li><strong>Characters:</strong> {{scope_characters}}</li>{{/scope_characters}}\n{{#scope_warnings}}<li><strong>Warnings:</strong> {{scope_warnings}}</li>{{/scope_warnings}}\n{{/scope_everything}}\n\n</ul>\n\n<p>If that was not you, please <a href='{{unsubscribe_link}}' target='_blank'>delete<a> and renew your subscription. Also make sure your email account is not compromised and never share your code.</p>\n",
     'layout_notification' => '',
     'loop_part_post' => '',
     'loop_part_story' => "<fieldset style='padding: 10px; margin: 20px 0; border: 1px solid #ccc;'>\n  <div>\n    <div style='font-size: 14px;'>\n      <strong>{{type}}: <a href='{{link}}' style='text-decoration: none;'>{{title}}</a></strong>\n    </div>\n    <div style='font-size: 11px; margin-top: 5px;'>by {{author}}</div>\n  </div>\n  <div style='margin-top: 10px'>{{excerpt}}</div>\n</fieldset>",

js/fcnen-admin.min.js

@@ -1 +1 @@
-function fcnen_revealTemplate(e){if(document.querySelectorAll(".fcnen-codemirror").forEach((e=>{e.closest(".fcnen-box__row").classList.add("hidden")})),!e)return fcnen_templatePreview(""),document.getElementById("fcnen-preview-notice").classList.remove("hidden"),void document.getElementById("fcnen-preview").classList.add("hidden");const t=document.getElementById(e);if(document.getElementById("fcnen-preview-notice").classList.add("hidden"),document.getElementById("fcnen-preview").classList.remove("hidden"),t)if(t.classList.remove("hidden"),t.querySelector(".CodeMirror")){fcnen_templatePreview(document.querySelector(".fcnen-template-wrapper:not(.hidden) .CodeMirror").CodeMirror.getValue())}else{wp.codeEditor.initialize(t.querySelector("textarea"),cm_settings);const e=document.querySelector(".fcnen-template-wrapper:not(.hidden) .CodeMirror").CodeMirror;fcnen_templatePreview(e.getValue()),e.on("change",(e=>{fcnen_templatePreview(e.doc.getValue())}))}}function fcnen_templatePreview(e,t=null){const n=document.getElementById("fcnen-preview-iframe"),c=n.contentWindow.document;c.open(),c.write(e),c.close(),n.style.height=0;const r=t??Math.max(c.body.scrollHeight,c.body.offsetHeight,c.documentElement.clientHeight,c.documentElement.scrollHeight,c.documentElement.offsetHeight);n.style.height=r+"px"}document.querySelectorAll(".fcnen-input-wrap._file").forEach((e=>{e.querySelector('input[type="file"]').addEventListener("change",(t=>{e.querySelector(".fcnen-input-wrap__file-field").textContent=t.currentTarget.files[0].name}))})),document.addEventListener("DOMContentLoaded",(()=>{document.getElementById("fcnen-select-template")?.addEventListener("change",(e=>{fcnen_revealTemplate(e.currentTarget.value)}))}));
+function fcnen_revealTemplate(e){if(document.querySelectorAll(".fcnen-codemirror").forEach((e=>{e.closest(".fcnen-box__row").classList.add("hidden")})),!e)return fcnen_templatePreview(""),document.getElementById("fcnen-preview-notice").classList.remove("hidden"),void document.getElementById("fcnen-preview").classList.add("hidden");const t=document.getElementById(e);if(document.getElementById("fcnen-preview-notice").classList.add("hidden"),document.getElementById("fcnen-preview").classList.remove("hidden"),t)if(t.classList.remove("hidden"),t.querySelector(".CodeMirror")){fcnen_templatePreview(document.querySelector(".fcnen-template-wrapper:not(.hidden) .CodeMirror").CodeMirror.getValue())}else{wp.codeEditor.initialize(t.querySelector("textarea"),cm_settings);const e=document.querySelector(".fcnen-template-wrapper:not(.hidden) .CodeMirror").CodeMirror;fcnen_templatePreview(e.getValue()),e.on("change",(e=>{fcnen_templatePreview(e.doc.getValue())}))}}function fcnen_templatePreview(e,t=null){const n=document.getElementById("fcnen-preview-iframe"),c=n.contentWindow.document;Object.entries(fcnes_preview_replacements).forEach((([t,n])=>{e=e.replaceAll(t,n)})),e=e.replace(/\{\{[#/^]?[^{}]+\}\}/g,""),c.open(),c.write(e),c.close(),n.style.height=0;const r=t??Math.max(c.body.scrollHeight,c.body.offsetHeight,c.documentElement.clientHeight,c.documentElement.scrollHeight,c.documentElement.offsetHeight);n.style.height=r+"px"}document.querySelectorAll(".fcnen-input-wrap._file").forEach((e=>{e.querySelector('input[type="file"]').addEventListener("change",(t=>{e.querySelector(".fcnen-input-wrap__file-field").textContent=t.currentTarget.files[0].name}))})),document.addEventListener("DOMContentLoaded",(()=>{document.getElementById("fcnen-select-template")?.addEventListener("change",(e=>{fcnen_revealTemplate(e.currentTarget.value)}))}));

src/js/fcnen-admin.js

@@ -80,6 +80,15 @@ function fcnen_templatePreview(html, height = null) {
   const iframe = document.getElementById('fcnen-preview-iframe');
   const doc = iframe.contentWindow.document;
 
+  // Remove replacement tokens for preview
+  const regex = /\{\{[#/^]?[^{}]+\}\}/g;
+
+  Object.entries(fcnes_preview_replacements).forEach(([token, replacement]) => {
+    html = html.replaceAll(token, replacement);
+  });
+
+  html = html.replace(regex, '');
+
   // Write HTML to iframe
   doc.open();
   doc.write(html);