admin/changemaker.lite
1
0
Fork 0
Code Issues Packages Projects Releases 31 Wiki Activity
changemaker.lite/mkdocs/site/v2/features/email-templates/editor/index.html

7135 lines
402 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Build Power. Not Rent It. Own your digital infrastructure.">
<meta name="author" content="Bunker Operations">
<link rel="canonical" href="https://bnkserve.org/v2/features/email-templates/editor/">
<link rel="prev" href="../template-system/">
<link rel="next" href="../variables/">
<link rel="icon" href="../../../../assets/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.7.1">
<title>Editor - Changemaker Lite</title>
<link rel="stylesheet" href="../../../../assets/stylesheets/main.484c7ddc.min.css">
<link rel="stylesheet" href="../../../../assets/stylesheets/palette.ab4e12ef.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,300i,400,400i,700,700i%7CJetBrains+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Inter";--md-code-font:"JetBrains Mono"}</style>
<link rel="stylesheet" href="../../../../stylesheets/extra.css">
<link rel="stylesheet" href="../../../../stylesheets/home.css">
<link rel="stylesheet" href="../../../../assets/css/video-player.css">
<script>__md_scope=new URL("../../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<meta property="og:type" content="website" />
<meta property="og:title" content="Editor - Changemaker Lite" />
<meta property="og:description" content="Build Power. Not Rent It. Own your digital infrastructure." />
<meta property="og:image" content="https://bnkserve.org/assets/images/social/v2/features/email-templates/editor.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://bnkserve.org/v2/features/email-templates/editor/" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Editor - Changemaker Lite" />
<meta property="twitter:description" content="Build Power. Not Rent It. Own your digital infrastructure." />
<meta property="twitter:image" content="https://bnkserve.org/assets/images/social/v2/features/email-templates/editor.png" />
</head>
<body dir="ltr" data-md-color-scheme="slate" data-md-color-primary="deep-purple" data-md-color-accent="amber">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#email-template-editor" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header md-header--shadow md-header--lifted" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../../../.." title="Changemaker Lite" class="md-header__button md-logo" aria-label="Changemaker Lite" data-md-component="logo">
<img src="../../../../assets/logo.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Changemaker Lite
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Editor
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="deep-purple" data-md-color-accent="amber" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg>
</label>
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="deep-purple" data-md-color-accent="amber" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<a href="javascript:void(0)" class="md-search__icon md-icon" title="Share" aria-label="Share" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg>
</a>
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://gitea.bnkops.com/admin/changemaker.lite" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg>
</div>
<div class="md-source__repository">
changemaker.lite
</div>
</a>
</div>
</nav>
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../../../.." class="md-tabs__link">
Home
</a>
</li>
<li class="md-tabs__item md-tabs__item--active">
<a href="../../../" class="md-tabs__link">
V2 Documentation
</a>
</li>
<li class="md-tabs__item">
<a href="../../../../phil/" class="md-tabs__link">
Philosophy
</a>
</li>
<li class="md-tabs__item">
<a href="../../../../v1/" class="md-tabs__link">
V1 Documentation (Legacy)
</a>
</li>
<li class="md-tabs__item">
<a href="../../../../blog/" class="md-tabs__link">
Blog
</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../../.." title="Changemaker Lite" class="md-nav__button md-logo" aria-label="Changemaker Lite" data-md-component="logo">
<img src="../../../../assets/logo.png" alt="logo">
</a>
Changemaker Lite
</label>
<div class="md-nav__source">
<a href="https://gitea.bnkops.com/admin/changemaker.lite" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M439.6 236.1 244 40.5c-5.4-5.5-12.8-8.5-20.4-8.5s-15 3-20.4 8.4L162.5 81l51.5 51.5c27.1-9.1 52.7 16.8 43.4 43.7l49.7 49.7c34.2-11.8 61.2 31 35.5 56.7-26.5 26.5-70.2-2.9-56-37.3L240.3 199v121.9c25.3 12.5 22.3 41.8 9.1 55-6.4 6.4-15.2 10.1-24.3 10.1s-17.8-3.6-24.3-10.1c-17.6-17.6-11.1-46.9 11.2-56v-123c-20.8-8.5-24.6-30.7-18.6-45L142.6 101 8.5 235.1C3 240.6 0 247.9 0 255.5s3 15 8.5 20.4l195.6 195.7c5.4 5.4 12.7 8.4 20.4 8.4s15-3 20.4-8.4l194.7-194.7c5.4-5.4 8.4-12.8 8.4-20.4s-3-15-8.4-20.4"/></svg>
</div>
<div class="md-source__repository">
changemaker.lite
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../.." class="md-nav__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
<div class="md-nav__link md-nav__container">
<a href="../../../" class="md-nav__link ">
<span class="md-ellipsis">
V2 Documentation
</span>
</a>
<label class="md-nav__link " for="__nav_2" id="__nav_2_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
V2 Documentation
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_2" >
<div class="md-nav__link md-nav__container">
<a href="../../../getting-started/" class="md-nav__link ">
<span class="md-ellipsis">
Getting Started
</span>
</a>
<label class="md-nav__link " for="__nav_2_2" id="__nav_2_2_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_2">
<span class="md-nav__icon md-icon"></span>
Getting Started
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../getting-started/quick-start/" class="md-nav__link">
<span class="md-ellipsis">
Quick Start
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_3" >
<div class="md-nav__link md-nav__container">
<a href="../../../architecture/" class="md-nav__link ">
<span class="md-ellipsis">
Architecture
</span>
</a>
<label class="md-nav__link " for="__nav_2_3" id="__nav_2_3_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_3">
<span class="md-nav__icon md-icon"></span>
Architecture
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../architecture/dual-api/" class="md-nav__link">
<span class="md-ellipsis">
Dual API System
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../architecture/authentication/" class="md-nav__link">
<span class="md-ellipsis">
Authentication & Security
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_4" >
<div class="md-nav__link md-nav__container">
<a href="../../../backend/" class="md-nav__link ">
<span class="md-ellipsis">
Backend
</span>
</a>
<label class="md-nav__link " for="__nav_2_4" id="__nav_2_4_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_4">
<span class="md-nav__icon md-icon"></span>
Backend
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../backend/modules/" class="md-nav__link">
<span class="md-ellipsis">
Modules
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../backend/services/" class="md-nav__link">
<span class="md-ellipsis">
Services
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../backend/middleware/" class="md-nav__link">
<span class="md-ellipsis">
Middleware
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../backend/utilities/" class="md-nav__link">
<span class="md-ellipsis">
Utilities
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_5" >
<div class="md-nav__link md-nav__container">
<a href="../../../frontend/" class="md-nav__link ">
<span class="md-ellipsis">
Frontend
</span>
</a>
<label class="md-nav__link " for="__nav_2_5" id="__nav_2_5_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_5_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_5">
<span class="md-nav__icon md-icon"></span>
Frontend
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../frontend/components/" class="md-nav__link">
<span class="md-ellipsis">
Components
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../frontend/layouts/" class="md-nav__link">
<span class="md-ellipsis">
Layouts
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../frontend/pages/" class="md-nav__link">
<span class="md-ellipsis">
Pages
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_6" >
<div class="md-nav__link md-nav__container">
<a href="../../../database/" class="md-nav__link ">
<span class="md-ellipsis">
Database
</span>
</a>
<label class="md-nav__link " for="__nav_2_6" id="__nav_2_6_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_6_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_6">
<span class="md-nav__icon md-icon"></span>
Database
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../database/schema/" class="md-nav__link">
<span class="md-ellipsis">
Schema Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../database/migrations/" class="md-nav__link">
<span class="md-ellipsis">
Migrations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../database/seeding/" class="md-nav__link">
<span class="md-ellipsis">
Seeding
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../database/indexes/" class="md-nav__link">
<span class="md-ellipsis">
Indexes
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../database/models/" class="md-nav__link">
<span class="md-ellipsis">
Models
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_7" checked>
<div class="md-nav__link md-nav__container">
<a href="../../" class="md-nav__link ">
<span class="md-ellipsis">
Features
</span>
</a>
<label class="md-nav__link " for="__nav_2_7" id="__nav_2_7_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_7_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2_7">
<span class="md-nav__icon md-icon"></span>
Features
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../influence/" class="md-nav__link">
<span class="md-ellipsis">
Influence
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../map/" class="md-nav__link">
<span class="md-ellipsis">
Map
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../landing-pages/" class="md-nav__link">
<span class="md-ellipsis">
Landing Pages
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_7_5" checked>
<div class="md-nav__link md-nav__container">
<a href="../" class="md-nav__link ">
<span class="md-ellipsis">
Email Templates
</span>
</a>
<label class="md-nav__link " for="__nav_2_7_5" id="__nav_2_7_5_label" tabindex="0">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="3" aria-labelledby="__nav_2_7_5_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2_7_5">
<span class="md-nav__icon md-icon"></span>
Email Templates
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../template-system/" class="md-nav__link">
<span class="md-ellipsis">
Template System
</span>
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Editor
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Editor
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="On this page">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
On this page
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#overview" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#architecture" class="md-nav__link">
<span class="md-ellipsis">
Architecture
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#editor-components" class="md-nav__link">
<span class="md-ellipsis">
Editor Components
</span>
</a>
<nav class="md-nav" aria-label="Editor Components">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#toolbar" class="md-nav__link">
<span class="md-ellipsis">
Toolbar
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#html-editor-pane" class="md-nav__link">
<span class="md-ellipsis">
HTML Editor Pane
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#text-editor-pane" class="md-nav__link">
<span class="md-ellipsis">
Text Editor Pane
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#variable-insertion-panel" class="md-nav__link">
<span class="md-ellipsis">
Variable Insertion Panel
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#live-preview-pane" class="md-nav__link">
<span class="md-ellipsis">
Live Preview Pane
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#test-send-form" class="md-nav__link">
<span class="md-ellipsis">
Test Send Form
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#admin-workflow" class="md-nav__link">
<span class="md-ellipsis">
Admin Workflow
</span>
</a>
<nav class="md-nav" aria-label="Admin Workflow">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#opening-editor" class="md-nav__link">
<span class="md-ellipsis">
Opening Editor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#editing-html-content" class="md-nav__link">
<span class="md-ellipsis">
Editing HTML Content
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-variable-insertion" class="md-nav__link">
<span class="md-ellipsis">
Using Variable Insertion
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#live-preview" class="md-nav__link">
<span class="md-ellipsis">
Live Preview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#testing-template" class="md-nav__link">
<span class="md-ellipsis">
Testing Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#saving-changes" class="md-nav__link">
<span class="md-ellipsis">
Saving Changes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#code-examples" class="md-nav__link">
<span class="md-ellipsis">
Code Examples
</span>
</a>
<nav class="md-nav" aria-label="Code Examples">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#emailtemplateeditorpage-component" class="md-nav__link">
<span class="md-ellipsis">
EmailTemplateEditorPage Component
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#troubleshooting" class="md-nav__link">
<span class="md-ellipsis">
Troubleshooting
</span>
</a>
<nav class="md-nav" aria-label="Troubleshooting">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#problem-preview-not-updating" class="md-nav__link">
<span class="md-ellipsis">
Problem: Preview not updating
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#problem-test-send-fails" class="md-nav__link">
<span class="md-ellipsis">
Problem: Test send fails
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#problem-variable-insertion-doesnt-work" class="md-nav__link">
<span class="md-ellipsis">
Problem: Variable insertion doesn't work
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#problem-draft-not-restored-on-reload" class="md-nav__link">
<span class="md-ellipsis">
Problem: Draft not restored on reload
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#future-enhancements" class="md-nav__link">
<span class="md-ellipsis">
Future Enhancements
</span>
</a>
<nav class="md-nav" aria-label="Future Enhancements">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#monaco-editor-integration" class="md-nav__link">
<span class="md-ellipsis">
Monaco Editor Integration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#drag-drop-block-builder" class="md-nav__link">
<span class="md-ellipsis">
Drag-Drop Block Builder
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#email-client-previews" class="md-nav__link">
<span class="md-ellipsis">
Email Client Previews
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#ab-testing-support" class="md-nav__link">
<span class="md-ellipsis">
A/B Testing Support
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#performance" class="md-nav__link">
<span class="md-ellipsis">
Performance
</span>
</a>
<nav class="md-nav" aria-label="Performance">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#auto-save-timing" class="md-nav__link">
<span class="md-ellipsis">
Auto-Save Timing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#preview-rendering-performance" class="md-nav__link">
<span class="md-ellipsis">
Preview Rendering Performance
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#accessibility" class="md-nav__link">
<span class="md-ellipsis">
Accessibility
</span>
</a>
<nav class="md-nav" aria-label="Accessibility">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#keyboard-shortcuts" class="md-nav__link">
<span class="md-ellipsis">
Keyboard Shortcuts
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#screen-reader-support" class="md-nav__link">
<span class="md-ellipsis">
Screen Reader Support
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#related-documentation" class="md-nav__link">
<span class="md-ellipsis">
Related Documentation
</span>
</a>
<nav class="md-nav" aria-label="Related Documentation">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#frontend-documentation" class="md-nav__link">
<span class="md-ellipsis">
Frontend Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#backend-documentation" class="md-nav__link">
<span class="md-ellipsis">
Backend Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#feature-documentation" class="md-nav__link">
<span class="md-ellipsis">
Feature Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#related-features" class="md-nav__link">
<span class="md-ellipsis">
Related Features
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../variables/" class="md-nav__link">
<span class="md-ellipsis">
Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../versioning/" class="md-nav__link">
<span class="md-ellipsis">
Versioning
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../media/" class="md-nav__link">
<span class="md-ellipsis">
Media
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../newsletter/" class="md-nav__link">
<span class="md-ellipsis">
Newsletter
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../observability/" class="md-nav__link">
<span class="md-ellipsis">
Observability
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../tunnel/" class="md-nav__link">
<span class="md-ellipsis">
Tunnel
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_8" >
<div class="md-nav__link md-nav__container">
<a href="../../../deployment/" class="md-nav__link ">
<span class="md-ellipsis">
Deployment
</span>
</a>
<label class="md-nav__link " for="__nav_2_8" id="__nav_2_8_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_8_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_8">
<span class="md-nav__icon md-icon"></span>
Deployment
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../deployment/docker-compose/" class="md-nav__link">
<span class="md-ellipsis">
Docker Compose
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../deployment/environment-variables/" class="md-nav__link">
<span class="md-ellipsis">
Environment Variables
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../deployment/nginx/" class="md-nav__link">
<span class="md-ellipsis">
Nginx Configuration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../deployment/ssl-tls/" class="md-nav__link">
<span class="md-ellipsis">
SSL/TLS
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../deployment/tunneling/" class="md-nav__link">
<span class="md-ellipsis">
Tunneling
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../deployment/monitoring-stack/" class="md-nav__link">
<span class="md-ellipsis">
Monitoring Stack
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../deployment/healthchecks/" class="md-nav__link">
<span class="md-ellipsis">
Health Checks
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../deployment/scaling/" class="md-nav__link">
<span class="md-ellipsis">
Scaling
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../deployment/backup-restore/" class="md-nav__link">
<span class="md-ellipsis">
Backup & Restore
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_9" >
<div class="md-nav__link md-nav__container">
<a href="../../../development/" class="md-nav__link ">
<span class="md-ellipsis">
Development
</span>
</a>
<label class="md-nav__link " for="__nav_2_9" id="__nav_2_9_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_9_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_9">
<span class="md-nav__icon md-icon"></span>
Development
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../development/local-setup/" class="md-nav__link">
<span class="md-ellipsis">
Local Setup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../development/docker-workflow/" class="md-nav__link">
<span class="md-ellipsis">
Docker Workflow
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../development/git-workflow/" class="md-nav__link">
<span class="md-ellipsis">
Git Workflow
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../development/npm-commands/" class="md-nav__link">
<span class="md-ellipsis">
NPM Commands
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../development/migrations/" class="md-nav__link">
<span class="md-ellipsis">
Migrations
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../development/typescript/" class="md-nav__link">
<span class="md-ellipsis">
TypeScript
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../development/testing/" class="md-nav__link">
<span class="md-ellipsis">
Testing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../development/debugging/" class="md-nav__link">
<span class="md-ellipsis">
Debugging
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../development/code-style/" class="md-nav__link">
<span class="md-ellipsis">
Code Style
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_10" >
<div class="md-nav__link md-nav__container">
<a href="../../../api-reference/" class="md-nav__link ">
<span class="md-ellipsis">
API Reference
</span>
</a>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_10_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_10">
<span class="md-nav__icon md-icon"></span>
API Reference
</label>
<ul class="md-nav__list" data-md-scrollfix>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_11" >
<div class="md-nav__link md-nav__container">
<a href="../../../user-guides/" class="md-nav__link ">
<span class="md-ellipsis">
User Guides
</span>
</a>
<label class="md-nav__link " for="__nav_2_11" id="__nav_2_11_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_11_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_11">
<span class="md-nav__icon md-icon"></span>
User Guides
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../user-guides/admin-guide/" class="md-nav__link">
<span class="md-ellipsis">
Admin Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../user-guides/campaign-manager-guide/" class="md-nav__link">
<span class="md-ellipsis">
Campaign Manager Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../user-guides/map-organizer-guide/" class="md-nav__link">
<span class="md-ellipsis">
Map Organizer Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../user-guides/content-editor-guide/" class="md-nav__link">
<span class="md-ellipsis">
Content Editor Guide
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../user-guides/volunteer-guide/" class="md-nav__link">
<span class="md-ellipsis">
Volunteer Guide
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_12" >
<div class="md-nav__link md-nav__container">
<a href="../../../troubleshooting/" class="md-nav__link ">
<span class="md-ellipsis">
Troubleshooting
</span>
</a>
<label class="md-nav__link " for="__nav_2_12" id="__nav_2_12_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_12_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_12">
<span class="md-nav__icon md-icon"></span>
Troubleshooting
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../troubleshooting/faq/" class="md-nav__link">
<span class="md-ellipsis">
FAQ
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../troubleshooting/common-errors/" class="md-nav__link">
<span class="md-ellipsis">
Common Errors
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../troubleshooting/auth-issues/" class="md-nav__link">
<span class="md-ellipsis">
Auth Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../troubleshooting/database-issues/" class="md-nav__link">
<span class="md-ellipsis">
Database Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../troubleshooting/docker-issues/" class="md-nav__link">
<span class="md-ellipsis">
Docker Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../troubleshooting/email-issues/" class="md-nav__link">
<span class="md-ellipsis">
Email Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../troubleshooting/geocoding-issues/" class="md-nav__link">
<span class="md-ellipsis">
Geocoding Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../troubleshooting/monitoring-issues/" class="md-nav__link">
<span class="md-ellipsis">
Monitoring Issues
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../troubleshooting/performance-optimization/" class="md-nav__link">
<span class="md-ellipsis">
Performance Optimization
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_13" >
<div class="md-nav__link md-nav__container">
<a href="../../../migration/" class="md-nav__link ">
<span class="md-ellipsis">
Migration
</span>
</a>
<label class="md-nav__link " for="__nav_2_13" id="__nav_2_13_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_13_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_13">
<span class="md-nav__icon md-icon"></span>
Migration
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../migration/feature-parity/" class="md-nav__link">
<span class="md-ellipsis">
Feature Parity
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../migration/breaking-changes/" class="md-nav__link">
<span class="md-ellipsis">
Breaking Changes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../migration/api-changes/" class="md-nav__link">
<span class="md-ellipsis">
API Changes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../migration/data-migration/" class="md-nav__link">
<span class="md-ellipsis">
Data Migration
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--section md-nav__item--nested">
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" type="checkbox" id="__nav_2_14" >
<div class="md-nav__link md-nav__container">
<a href="../../../contributing/" class="md-nav__link ">
<span class="md-ellipsis">
Contributing
</span>
</a>
<label class="md-nav__link " for="__nav_2_14" id="__nav_2_14_label" tabindex="">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_14_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2_14">
<span class="md-nav__icon md-icon"></span>
Contributing
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../../contributing/development-setup/" class="md-nav__link">
<span class="md-ellipsis">
Development Setup
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../contributing/code-of-conduct/" class="md-nav__link">
<span class="md-ellipsis">
Code of Conduct
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../contributing/pull-requests/" class="md-nav__link">
<span class="md-ellipsis">
Pull Requests
</span>
</a>
</li>
<li class="md-nav__item">
<a href="../../../contributing/roadmap/" class="md-nav__link">
<span class="md-ellipsis">
Roadmap
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../../phil/" class="md-nav__link">
<span class="md-ellipsis">
Philosophy
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../../v1/" class="md-nav__link">
<span class="md-ellipsis">
V1 Documentation (Legacy)
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
<li class="md-nav__item md-nav__item--pruned md-nav__item--nested">
<a href="../../../../blog/" class="md-nav__link">
<span class="md-ellipsis">
Blog
</span>
<span class="md-nav__icon md-icon"></span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="On this page">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
On this page
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#overview" class="md-nav__link">
<span class="md-ellipsis">
Overview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#architecture" class="md-nav__link">
<span class="md-ellipsis">
Architecture
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#editor-components" class="md-nav__link">
<span class="md-ellipsis">
Editor Components
</span>
</a>
<nav class="md-nav" aria-label="Editor Components">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#toolbar" class="md-nav__link">
<span class="md-ellipsis">
Toolbar
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#html-editor-pane" class="md-nav__link">
<span class="md-ellipsis">
HTML Editor Pane
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#text-editor-pane" class="md-nav__link">
<span class="md-ellipsis">
Text Editor Pane
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#variable-insertion-panel" class="md-nav__link">
<span class="md-ellipsis">
Variable Insertion Panel
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#live-preview-pane" class="md-nav__link">
<span class="md-ellipsis">
Live Preview Pane
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#test-send-form" class="md-nav__link">
<span class="md-ellipsis">
Test Send Form
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#admin-workflow" class="md-nav__link">
<span class="md-ellipsis">
Admin Workflow
</span>
</a>
<nav class="md-nav" aria-label="Admin Workflow">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#opening-editor" class="md-nav__link">
<span class="md-ellipsis">
Opening Editor
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#editing-html-content" class="md-nav__link">
<span class="md-ellipsis">
Editing HTML Content
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#using-variable-insertion" class="md-nav__link">
<span class="md-ellipsis">
Using Variable Insertion
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#live-preview" class="md-nav__link">
<span class="md-ellipsis">
Live Preview
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#testing-template" class="md-nav__link">
<span class="md-ellipsis">
Testing Template
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#saving-changes" class="md-nav__link">
<span class="md-ellipsis">
Saving Changes
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#code-examples" class="md-nav__link">
<span class="md-ellipsis">
Code Examples
</span>
</a>
<nav class="md-nav" aria-label="Code Examples">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#emailtemplateeditorpage-component" class="md-nav__link">
<span class="md-ellipsis">
EmailTemplateEditorPage Component
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#troubleshooting" class="md-nav__link">
<span class="md-ellipsis">
Troubleshooting
</span>
</a>
<nav class="md-nav" aria-label="Troubleshooting">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#problem-preview-not-updating" class="md-nav__link">
<span class="md-ellipsis">
Problem: Preview not updating
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#problem-test-send-fails" class="md-nav__link">
<span class="md-ellipsis">
Problem: Test send fails
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#problem-variable-insertion-doesnt-work" class="md-nav__link">
<span class="md-ellipsis">
Problem: Variable insertion doesn't work
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#problem-draft-not-restored-on-reload" class="md-nav__link">
<span class="md-ellipsis">
Problem: Draft not restored on reload
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#future-enhancements" class="md-nav__link">
<span class="md-ellipsis">
Future Enhancements
</span>
</a>
<nav class="md-nav" aria-label="Future Enhancements">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#monaco-editor-integration" class="md-nav__link">
<span class="md-ellipsis">
Monaco Editor Integration
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#drag-drop-block-builder" class="md-nav__link">
<span class="md-ellipsis">
Drag-Drop Block Builder
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#email-client-previews" class="md-nav__link">
<span class="md-ellipsis">
Email Client Previews
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#ab-testing-support" class="md-nav__link">
<span class="md-ellipsis">
A/B Testing Support
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#performance" class="md-nav__link">
<span class="md-ellipsis">
Performance
</span>
</a>
<nav class="md-nav" aria-label="Performance">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#auto-save-timing" class="md-nav__link">
<span class="md-ellipsis">
Auto-Save Timing
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#preview-rendering-performance" class="md-nav__link">
<span class="md-ellipsis">
Preview Rendering Performance
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#accessibility" class="md-nav__link">
<span class="md-ellipsis">
Accessibility
</span>
</a>
<nav class="md-nav" aria-label="Accessibility">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#keyboard-shortcuts" class="md-nav__link">
<span class="md-ellipsis">
Keyboard Shortcuts
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#screen-reader-support" class="md-nav__link">
<span class="md-ellipsis">
Screen Reader Support
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#related-documentation" class="md-nav__link">
<span class="md-ellipsis">
Related Documentation
</span>
</a>
<nav class="md-nav" aria-label="Related Documentation">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#frontend-documentation" class="md-nav__link">
<span class="md-ellipsis">
Frontend Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#backend-documentation" class="md-nav__link">
<span class="md-ellipsis">
Backend Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#feature-documentation" class="md-nav__link">
<span class="md-ellipsis">
Feature Documentation
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#related-features" class="md-nav__link">
<span class="md-ellipsis">
Related Features
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<nav class="md-path" aria-label="Navigation" >
<ol class="md-path__list">
<li class="md-path__item">
<a href="../../../.." class="md-path__link">
<span class="md-ellipsis">
Home
</span>
</a>
</li>
<li class="md-path__item">
<a href="../../../" class="md-path__link">
<span class="md-ellipsis">
V2 Documentation
</span>
</a>
</li>
<li class="md-path__item">
<a href="../../" class="md-path__link">
<span class="md-ellipsis">
Features
</span>
</a>
</li>
<li class="md-path__item">
<a href="../" class="md-path__link">
<span class="md-ellipsis">
Email Templates
</span>
</a>
</li>
</ol>
</nav>
<article class="md-content__inner md-typeset">
<a href="https://gitea.bnkops.com/admin/changemaker.lite/src/branch/main/mkdocs/docs/v2/features/email-templates/editor.md" title="Edit this page" class="md-content__button md-icon" rel="edit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20H6V4h7v5h5v3.1l2-2V8l-6-6H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h4zm10.2-7c.1 0 .3.1.4.2l1.3 1.3c.2.2.2.6 0 .8l-1 1-2.1-2.1 1-1c.1-.1.2-.2.4-.2m0 3.9L14.1 23H12v-2.1l6.1-6.1z"/></svg>
</a>
<a href="https://gitea.bnkops.com/admin/changemaker.lite/src/branch/main/mkdocs/docs/v2/features/email-templates/rawor.md" title="View source of this page" class="md-content__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 18c.56 0 1 .44 1 1s-.44 1-1 1-1-.44-1-1 .44-1 1-1m0-3c-2.73 0-5.06 1.66-6 4 .94 2.34 3.27 4 6 4s5.06-1.66 6-4c-.94-2.34-3.27-4-6-4m0 6.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1 2.5-2.5 2.5 2.5 0 0 1 2.5 2.5 2.5 2.5 0 0 1-2.5 2.5M9.27 20H6V4h7v5h5v4.07c.7.08 1.36.25 2 .49V8l-6-6H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4.5a8.2 8.2 0 0 1-1.23-2"/></svg>
</a>
<h1 id="email-template-editor">Email Template Editor<a class="headerlink" href="#email-template-editor" title="Permanent link">&para;</a></h1>
<h2 id="overview">Overview<a class="headerlink" href="#overview" title="Permanent link">&para;</a></h2>
<p>The Email Template Editor provides a powerful interface for creating and modifying email templates with live preview, variable insertion, and test send functionality. It supports split-pane editing for HTML and plain text versions, visual variable insertion, and real-time rendering with sample data.</p>
<p><strong>Key Features:</strong></p>
<ul>
<li><strong>Split-Pane Editor</strong> — Side-by-side HTML and text editing</li>
<li><strong>Variable Insertion Buttons</strong> — Click to insert {{VARIABLES}} at cursor position</li>
<li><strong>Live Preview Rendering</strong> — See rendered HTML with sample data in real-time</li>
<li><strong>Test Send Functionality</strong> — Send test emails with custom sample data</li>
<li><strong>Auto-Save Drafts</strong> — Prevent data loss with automatic draft saving</li>
<li><strong>Version Creation</strong> — Every save creates a new version with change notes</li>
<li><strong>Responsive Layout</strong> — Desktop-optimized (mobile warning for small screens)</li>
<li><strong>Keyboard Shortcuts</strong> — Ctrl+S to save, Ctrl+P to preview, Esc to close</li>
</ul>
<p><strong>Access Control:</strong>
- <strong>Role Required:</strong> SUPER_ADMIN only
- <strong>Route:</strong> <code>/app/email-templates/:id/edit</code>
- <strong>Layout:</strong> Full-screen (no AppLayout sidebar)</p>
<hr />
<h2 id="architecture">Architecture<a class="headerlink" href="#architecture" title="Permanent link">&para;</a></h2>
<pre class="mermaid"><code>flowchart TB
subgraph "Editor UI Components"
Editor[EmailTemplateEditorPage]
Toolbar[Editor Toolbar]
HtmlEditor[HTML Editor Pane]
TextEditor[Text Editor Pane]
VarPanel[Variable Insertion Panel]
Preview[Live Preview Pane]
TestForm[Test Send Form]
end
subgraph "State Management"
State[Component State]
Draft[LocalStorage Draft]
AutoSave[Auto-Save Timer]
end
subgraph "API Layer"
GetTemplate[GET /api/email-templates/:id]
UpdateTemplate[PUT /api/email-templates/:id]
TestSend[POST /api/email-templates/:id/test]
end
subgraph "Backend Processing"
Template[(EmailTemplate)]
Variables[(EmailTemplateVariable)]
Handlebars[Handlebars Compiler]
EmailService[Email Service]
TestLog[(EmailTemplateTestLog)]
end
Editor --&gt; Toolbar
Editor --&gt; HtmlEditor
Editor --&gt; TextEditor
Editor --&gt; VarPanel
Editor --&gt; Preview
Editor --&gt; TestForm
Editor --&gt; State
State --&gt; Draft
State --&gt; AutoSave
Editor --&gt;|Load| GetTemplate
GetTemplate --&gt; Template
GetTemplate --&gt; Variables
VarPanel --&gt;|Insert| HtmlEditor
VarPanel --&gt;|Insert| TextEditor
HtmlEditor --&gt;|Debounce 300ms| Preview
TextEditor --&gt; State
Preview --&gt; Handlebars
Handlebars --&gt;|Render HTML| Preview
Toolbar --&gt;|Save Click| UpdateTemplate
UpdateTemplate --&gt; Template
UpdateTemplate --&gt;|Create Version| Versions[(EmailTemplateVersion)]
TestForm --&gt; TestSend
TestSend --&gt; EmailService
EmailService --&gt;|Send| SMTP[Nodemailer]
SMTP --&gt; TestLog
AutoSave --&gt; Draft
style Editor fill:#4a90e2,color:#fff
style Template fill:#50c878,color:#fff
style Preview fill:#ffb347,color:#333</code></pre>
<p><strong>Data Flow:</strong></p>
<ol>
<li><strong>Load Template</strong> — Fetch template + variables via GET API</li>
<li><strong>Restore Draft</strong> — Load from localStorage if exists (unsaved changes)</li>
<li><strong>Edit Content</strong> — Type in HTML/text editors, updates component state</li>
<li><strong>Insert Variable</strong> — Click variable button → inserts <code>{{VAR}}</code> at cursor</li>
<li><strong>Preview Update</strong> — Debounced (300ms) Handlebars compilation + iframe render</li>
<li><strong>Test Send</strong> — Enter recipient + sample data → POST to test endpoint → email sent</li>
<li><strong>Save Template</strong> — Click save → PUT API → create version → clear draft → redirect</li>
<li><strong>Auto-Save Draft</strong> — Blur event → save to localStorage (not database)</li>
</ol>
<hr />
<h2 id="editor-components">Editor Components<a class="headerlink" href="#editor-components" title="Permanent link">&para;</a></h2>
<h3 id="toolbar">Toolbar<a class="headerlink" href="#toolbar" title="Permanent link">&para;</a></h3>
<p><strong>Location:</strong> Top bar (sticky)</p>
<p><strong>Elements:</strong>
- <strong>Template Name</strong> — Read-only display (left)
- <strong>Save Button</strong> — Saves changes and creates version (right)
- <strong>Preview Toggle</strong> — Show/hide live preview pane (right)
- <strong>Test Send Button</strong> — Opens test send modal (right)
- <strong>Back Button</strong> — Returns to EmailTemplatesPage (left)</p>
<p><strong>Actions:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-0-1"><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">handleSave</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-0-2"><a id="__codelineno-0-2" name="__codelineno-0-2" href="#__codelineno-0-2"></a><span class="w"> </span><span class="nx">setSaving</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span id="__span-0-3"><a id="__codelineno-0-3" name="__codelineno-0-3" href="#__codelineno-0-3"></a><span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-0-4"><a id="__codelineno-0-4" name="__codelineno-0-4" href="#__codelineno-0-4"></a><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">api</span><span class="p">.</span><span class="nx">put</span><span class="p">(</span><span class="sb">`/api/email-templates/</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-0-5"><a id="__codelineno-0-5" name="__codelineno-0-5" href="#__codelineno-0-5"></a><span class="w"> </span><span class="nx">subjectLine</span><span class="p">,</span>
</span><span id="__span-0-6"><a id="__codelineno-0-6" name="__codelineno-0-6" href="#__codelineno-0-6"></a><span class="w"> </span><span class="nx">htmlContent</span><span class="p">,</span>
</span><span id="__span-0-7"><a id="__codelineno-0-7" name="__codelineno-0-7" href="#__codelineno-0-7"></a><span class="w"> </span><span class="nx">textContent</span><span class="p">,</span>
</span><span id="__span-0-8"><a id="__codelineno-0-8" name="__codelineno-0-8" href="#__codelineno-0-8"></a><span class="w"> </span><span class="nx">changeNotes</span><span class="p">,</span>
</span><span id="__span-0-9"><a id="__codelineno-0-9" name="__codelineno-0-9" href="#__codelineno-0-9"></a><span class="w"> </span><span class="p">});</span>
</span><span id="__span-0-10"><a id="__codelineno-0-10" name="__codelineno-0-10" href="#__codelineno-0-10"></a>
</span><span id="__span-0-11"><a id="__codelineno-0-11" name="__codelineno-0-11" href="#__codelineno-0-11"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="s1">&#39;Template saved successfully&#39;</span><span class="p">);</span>
</span><span id="__span-0-12"><a id="__codelineno-0-12" name="__codelineno-0-12" href="#__codelineno-0-12"></a><span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">removeItem</span><span class="p">(</span><span class="sb">`email-template-draft-</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
</span><span id="__span-0-13"><a id="__codelineno-0-13" name="__codelineno-0-13" href="#__codelineno-0-13"></a><span class="w"> </span><span class="nx">navigate</span><span class="p">(</span><span class="s1">&#39;/app/email-templates&#39;</span><span class="p">);</span>
</span><span id="__span-0-14"><a id="__codelineno-0-14" name="__codelineno-0-14" href="#__codelineno-0-14"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-0-15"><a id="__codelineno-0-15" name="__codelineno-0-15" href="#__codelineno-0-15"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Failed to save template&#39;</span><span class="p">);</span>
</span><span id="__span-0-16"><a id="__codelineno-0-16" name="__codelineno-0-16" href="#__codelineno-0-16"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">finally</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-0-17"><a id="__codelineno-0-17" name="__codelineno-0-17" href="#__codelineno-0-17"></a><span class="w"> </span><span class="nx">setSaving</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-0-18"><a id="__codelineno-0-18" name="__codelineno-0-18" href="#__codelineno-0-18"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-0-19"><a id="__codelineno-0-19" name="__codelineno-0-19" href="#__codelineno-0-19"></a><span class="p">};</span>
</span></code></pre></div></p>
<hr />
<h3 id="html-editor-pane">HTML Editor Pane<a class="headerlink" href="#html-editor-pane" title="Permanent link">&para;</a></h3>
<p><strong>Location:</strong> Left side (50% width) or full width when preview hidden</p>
<p><strong>Features:</strong>
- <strong>Textarea or Monaco Editor</strong> — Syntax highlighting (Monaco upgrade path)
- <strong>Line Numbers</strong> — Visual line number gutter
- <strong>Auto-Resize</strong> — Grows to fit content (max 80vh)
- <strong>Tab Support</strong> — Tab key inserts 2 spaces (not focus change)</p>
<p><strong>Implementation:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-1-1"><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">htmlContent</span><span class="p">,</span><span class="w"> </span><span class="nx">setHtmlContent</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span id="__span-1-2"><a id="__codelineno-1-2" name="__codelineno-1-2" href="#__codelineno-1-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">htmlEditorRef</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useRef</span><span class="o">&lt;</span><span class="nx">HTMLTextAreaElement</span><span class="o">&gt;</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span id="__span-1-3"><a id="__codelineno-1-3" name="__codelineno-1-3" href="#__codelineno-1-3"></a>
</span><span id="__span-1-4"><a id="__codelineno-1-4" name="__codelineno-1-4" href="#__codelineno-1-4"></a><span class="kd">const</span><span class="w"> </span><span class="nx">handleHtmlChange</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ChangeEvent</span><span class="o">&lt;</span><span class="nx">HTMLTextAreaElement</span><span class="o">&gt;</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-1-5"><a id="__codelineno-1-5" name="__codelineno-1-5" href="#__codelineno-1-5"></a><span class="w"> </span><span class="nx">setHtmlContent</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
</span><span id="__span-1-6"><a id="__codelineno-1-6" name="__codelineno-1-6" href="#__codelineno-1-6"></a><span class="w"> </span><span class="nx">debouncedPreview</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">,</span><span class="w"> </span><span class="nx">sampleData</span><span class="p">);</span>
</span><span id="__span-1-7"><a id="__codelineno-1-7" name="__codelineno-1-7" href="#__codelineno-1-7"></a><span class="p">};</span>
</span><span id="__span-1-8"><a id="__codelineno-1-8" name="__codelineno-1-8" href="#__codelineno-1-8"></a>
</span><span id="__span-1-9"><a id="__codelineno-1-9" name="__codelineno-1-9" href="#__codelineno-1-9"></a><span class="kd">const</span><span class="w"> </span><span class="nx">handleKeyDown</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="o">:</span><span class="w"> </span><span class="kt">React.KeyboardEvent</span><span class="o">&lt;</span><span class="nx">HTMLTextAreaElement</span><span class="o">&gt;</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-1-10"><a id="__codelineno-1-10" name="__codelineno-1-10" href="#__codelineno-1-10"></a><span class="w"> </span><span class="c1">// Tab key support</span>
</span><span id="__span-1-11"><a id="__codelineno-1-11" name="__codelineno-1-11" href="#__codelineno-1-11"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;Tab&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-1-12"><a id="__codelineno-1-12" name="__codelineno-1-12" href="#__codelineno-1-12"></a><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
</span><span id="__span-1-13"><a id="__codelineno-1-13" name="__codelineno-1-13" href="#__codelineno-1-13"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">textarea</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">currentTarget</span><span class="p">;</span>
</span><span id="__span-1-14"><a id="__codelineno-1-14" name="__codelineno-1-14" href="#__codelineno-1-14"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">start</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionStart</span><span class="p">;</span>
</span><span id="__span-1-15"><a id="__codelineno-1-15" name="__codelineno-1-15" href="#__codelineno-1-15"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">end</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionEnd</span><span class="p">;</span>
</span><span id="__span-1-16"><a id="__codelineno-1-16" name="__codelineno-1-16" href="#__codelineno-1-16"></a>
</span><span id="__span-1-17"><a id="__codelineno-1-17" name="__codelineno-1-17" href="#__codelineno-1-17"></a><span class="w"> </span><span class="nx">setHtmlContent</span><span class="p">(</span>
</span><span id="__span-1-18"><a id="__codelineno-1-18" name="__codelineno-1-18" href="#__codelineno-1-18"></a><span class="w"> </span><span class="nx">htmlContent</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">start</span><span class="p">)</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">&#39; &#39;</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">htmlContent</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="nx">end</span><span class="p">)</span>
</span><span id="__span-1-19"><a id="__codelineno-1-19" name="__codelineno-1-19" href="#__codelineno-1-19"></a><span class="w"> </span><span class="p">);</span>
</span><span id="__span-1-20"><a id="__codelineno-1-20" name="__codelineno-1-20" href="#__codelineno-1-20"></a>
</span><span id="__span-1-21"><a id="__codelineno-1-21" name="__codelineno-1-21" href="#__codelineno-1-21"></a><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-1-22"><a id="__codelineno-1-22" name="__codelineno-1-22" href="#__codelineno-1-22"></a><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionStart</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionEnd</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">start</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">2</span><span class="p">;</span>
</span><span id="__span-1-23"><a id="__codelineno-1-23" name="__codelineno-1-23" href="#__codelineno-1-23"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="mf">0</span><span class="p">);</span>
</span><span id="__span-1-24"><a id="__codelineno-1-24" name="__codelineno-1-24" href="#__codelineno-1-24"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-1-25"><a id="__codelineno-1-25" name="__codelineno-1-25" href="#__codelineno-1-25"></a><span class="p">};</span>
</span></code></pre></div></p>
<hr />
<h3 id="text-editor-pane">Text Editor Pane<a class="headerlink" href="#text-editor-pane" title="Permanent link">&para;</a></h3>
<p><strong>Location:</strong> Left side (50% width) or full width when preview hidden</p>
<p><strong>Features:</strong>
- <strong>Plain Text Editing</strong> — No syntax highlighting needed
- <strong>Auto-Resize</strong> — Matches HTML editor height
- <strong>Variable Insertion</strong> — Same insertion panel as HTML editor</p>
<p><strong>Implementation:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-2-1"><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">textContent</span><span class="p">,</span><span class="w"> </span><span class="nx">setTextContent</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span id="__span-2-2"><a id="__codelineno-2-2" name="__codelineno-2-2" href="#__codelineno-2-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">textEditorRef</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useRef</span><span class="o">&lt;</span><span class="nx">HTMLTextAreaElement</span><span class="o">&gt;</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span id="__span-2-3"><a id="__codelineno-2-3" name="__codelineno-2-3" href="#__codelineno-2-3"></a>
</span><span id="__span-2-4"><a id="__codelineno-2-4" name="__codelineno-2-4" href="#__codelineno-2-4"></a><span class="kd">const</span><span class="w"> </span><span class="nx">handleTextChange</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="o">:</span><span class="w"> </span><span class="kt">React.ChangeEvent</span><span class="o">&lt;</span><span class="nx">HTMLTextAreaElement</span><span class="o">&gt;</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-2-5"><a id="__codelineno-2-5" name="__codelineno-2-5" href="#__codelineno-2-5"></a><span class="w"> </span><span class="nx">setTextContent</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
</span><span id="__span-2-6"><a id="__codelineno-2-6" name="__codelineno-2-6" href="#__codelineno-2-6"></a><span class="p">};</span>
</span></code></pre></div></p>
<hr />
<h3 id="variable-insertion-panel">Variable Insertion Panel<a class="headerlink" href="#variable-insertion-panel" title="Permanent link">&para;</a></h3>
<p><strong>Location:</strong> Right sidebar (collapsible)</p>
<p><strong>Features:</strong>
- <strong>Variable List</strong> — All template variables with labels
- <strong>Insert Buttons</strong> — Click to insert <code>{{VAR}}</code> at cursor
- <strong>Required Badge</strong> — Red badge for required variables
- <strong>Conditional Badge</strong> — Blue badge for conditional variables
- <strong>Sample Value Display</strong> — Shows example value below each variable
- <strong>Search/Filter</strong> — Filter variables by name (if many variables)</p>
<p><strong>Implementation:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-3-1"><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">handleInsertVariable</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">variableKey</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">editorType</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;text&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-3-2"><a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">textarea</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">editorType</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nx">htmlEditorRef.current</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kt">textEditorRef.current</span><span class="p">;</span>
</span><span id="__span-3-3"><a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">textarea</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="p">;</span>
</span><span id="__span-3-4"><a id="__codelineno-3-4" name="__codelineno-3-4" href="#__codelineno-3-4"></a>
</span><span id="__span-3-5"><a id="__codelineno-3-5" name="__codelineno-3-5" href="#__codelineno-3-5"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">start</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionStart</span><span class="p">;</span>
</span><span id="__span-3-6"><a id="__codelineno-3-6" name="__codelineno-3-6" href="#__codelineno-3-6"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">end</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionEnd</span><span class="p">;</span>
</span><span id="__span-3-7"><a id="__codelineno-3-7" name="__codelineno-3-7" href="#__codelineno-3-7"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">content</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">editorType</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nx">htmlContent</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kt">textContent</span><span class="p">;</span>
</span><span id="__span-3-8"><a id="__codelineno-3-8" name="__codelineno-3-8" href="#__codelineno-3-8"></a>
</span><span id="__span-3-9"><a id="__codelineno-3-9" name="__codelineno-3-9" href="#__codelineno-3-9"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">before</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">content</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">start</span><span class="p">);</span>
</span><span id="__span-3-10"><a id="__codelineno-3-10" name="__codelineno-3-10" href="#__codelineno-3-10"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">after</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">content</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="nx">end</span><span class="p">);</span>
</span><span id="__span-3-11"><a id="__codelineno-3-11" name="__codelineno-3-11" href="#__codelineno-3-11"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">newContent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">before</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="sb">`{{</span><span class="si">${</span><span class="nx">variableKey</span><span class="si">}</span><span class="sb">}}`</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">after</span><span class="p">;</span>
</span><span id="__span-3-12"><a id="__codelineno-3-12" name="__codelineno-3-12" href="#__codelineno-3-12"></a>
</span><span id="__span-3-13"><a id="__codelineno-3-13" name="__codelineno-3-13" href="#__codelineno-3-13"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">editorType</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-3-14"><a id="__codelineno-3-14" name="__codelineno-3-14" href="#__codelineno-3-14"></a><span class="w"> </span><span class="nx">setHtmlContent</span><span class="p">(</span><span class="nx">newContent</span><span class="p">);</span>
</span><span id="__span-3-15"><a id="__codelineno-3-15" name="__codelineno-3-15" href="#__codelineno-3-15"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-3-16"><a id="__codelineno-3-16" name="__codelineno-3-16" href="#__codelineno-3-16"></a><span class="w"> </span><span class="nx">setTextContent</span><span class="p">(</span><span class="nx">newContent</span><span class="p">);</span>
</span><span id="__span-3-17"><a id="__codelineno-3-17" name="__codelineno-3-17" href="#__codelineno-3-17"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-3-18"><a id="__codelineno-3-18" name="__codelineno-3-18" href="#__codelineno-3-18"></a>
</span><span id="__span-3-19"><a id="__codelineno-3-19" name="__codelineno-3-19" href="#__codelineno-3-19"></a><span class="w"> </span><span class="c1">// Move cursor after inserted variable</span>
</span><span id="__span-3-20"><a id="__codelineno-3-20" name="__codelineno-3-20" href="#__codelineno-3-20"></a><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-3-21"><a id="__codelineno-3-21" name="__codelineno-3-21" href="#__codelineno-3-21"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">newPos</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">start</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">variableKey</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="mf">4</span><span class="p">;</span><span class="w"> </span><span class="c1">// 4 = {{ + }}</span>
</span><span id="__span-3-22"><a id="__codelineno-3-22" name="__codelineno-3-22" href="#__codelineno-3-22"></a><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionStart</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">newPos</span><span class="p">;</span>
</span><span id="__span-3-23"><a id="__codelineno-3-23" name="__codelineno-3-23" href="#__codelineno-3-23"></a><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionEnd</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">newPos</span><span class="p">;</span>
</span><span id="__span-3-24"><a id="__codelineno-3-24" name="__codelineno-3-24" href="#__codelineno-3-24"></a><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
</span><span id="__span-3-25"><a id="__codelineno-3-25" name="__codelineno-3-25" href="#__codelineno-3-25"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="mf">0</span><span class="p">);</span>
</span><span id="__span-3-26"><a id="__codelineno-3-26" name="__codelineno-3-26" href="#__codelineno-3-26"></a><span class="p">};</span>
</span></code></pre></div></p>
<p><strong>Variable List UI:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-4-1"><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a><span class="o">&lt;</span><span class="nx">Space</span><span class="w"> </span><span class="nx">direction</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;100%&#39;</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-4-2"><a id="__codelineno-4-2" name="__codelineno-4-2" href="#__codelineno-4-2"></a><span class="w"> </span><span class="p">{</span><span class="nx">variables</span>
</span><span id="__span-4-3"><a id="__codelineno-4-3" name="__codelineno-4-3" href="#__codelineno-4-3"></a><span class="w"> </span><span class="p">.</span><span class="nx">sort</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span><span class="w"> </span><span class="nx">b</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">a</span><span class="p">.</span><span class="nx">sortOrder</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">b</span><span class="p">.</span><span class="nx">sortOrder</span><span class="p">)</span>
</span><span id="__span-4-4"><a id="__codelineno-4-4" name="__codelineno-4-4" href="#__codelineno-4-4"></a><span class="w"> </span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">variable</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-4-5"><a id="__codelineno-4-5" name="__codelineno-4-5" href="#__codelineno-4-5"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Card</span><span class="w"> </span><span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span><span class="o">&gt;</span>
</span><span id="__span-4-6"><a id="__codelineno-4-6" name="__codelineno-4-6" href="#__codelineno-4-6"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="w"> </span><span class="nx">direction</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="p">{</span><span class="mf">0</span><span class="p">}</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;100%&#39;</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-4-7"><a id="__codelineno-4-7" name="__codelineno-4-7" href="#__codelineno-4-7"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="o">&gt;</span>
</span><span id="__span-4-8"><a id="__codelineno-4-8" name="__codelineno-4-8" href="#__codelineno-4-8"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Text</span><span class="w"> </span><span class="nx">strong</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">label</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
</span><span id="__span-4-9"><a id="__codelineno-4-9" name="__codelineno-4-9" href="#__codelineno-4-9"></a><span class="w"> </span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">isRequired</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">Tag</span><span class="w"> </span><span class="nx">color</span><span class="o">=</span><span class="s2">&quot;red&quot;</span><span class="o">&gt;</span><span class="nx">Required</span><span class="o">&lt;</span><span class="err">/Tag&gt;}</span>
</span><span id="__span-4-10"><a id="__codelineno-4-10" name="__codelineno-4-10" href="#__codelineno-4-10"></a><span class="w"> </span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">isConditional</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">Tag</span><span class="w"> </span><span class="nx">color</span><span class="o">=</span><span class="s2">&quot;blue&quot;</span><span class="o">&gt;</span><span class="nx">Conditional</span><span class="o">&lt;</span><span class="err">/Tag&gt;}</span>
</span><span id="__span-4-11"><a id="__codelineno-4-11" name="__codelineno-4-11" href="#__codelineno-4-11"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-4-12"><a id="__codelineno-4-12" name="__codelineno-4-12" href="#__codelineno-4-12"></a>
</span><span id="__span-4-13"><a id="__codelineno-4-13" name="__codelineno-4-13" href="#__codelineno-4-13"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Text</span><span class="w"> </span><span class="kr">type</span><span class="o">=</span><span class="s2">&quot;secondary&quot;</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">fontSize</span><span class="o">:</span><span class="w"> </span><span class="kt">12</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-4-14"><a id="__codelineno-4-14" name="__codelineno-4-14" href="#__codelineno-4-14"></a><span class="w"> </span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">description</span><span class="p">}</span>
</span><span id="__span-4-15"><a id="__codelineno-4-15" name="__codelineno-4-15" href="#__codelineno-4-15"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
</span><span id="__span-4-16"><a id="__codelineno-4-16" name="__codelineno-4-16" href="#__codelineno-4-16"></a>
</span><span id="__span-4-17"><a id="__codelineno-4-17" name="__codelineno-4-17" href="#__codelineno-4-17"></a><span class="w"> </span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">sampleValue</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-4-18"><a id="__codelineno-4-18" name="__codelineno-4-18" href="#__codelineno-4-18"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Text</span><span class="w"> </span><span class="nx">code</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">fontSize</span><span class="o">:</span><span class="w"> </span><span class="kt">11</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-4-19"><a id="__codelineno-4-19" name="__codelineno-4-19" href="#__codelineno-4-19"></a><span class="w"> </span><span class="nx">Example</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">sampleValue</span><span class="p">}</span>
</span><span id="__span-4-20"><a id="__codelineno-4-20" name="__codelineno-4-20" href="#__codelineno-4-20"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
</span><span id="__span-4-21"><a id="__codelineno-4-21" name="__codelineno-4-21" href="#__codelineno-4-21"></a><span class="w"> </span><span class="p">)}</span>
</span><span id="__span-4-22"><a id="__codelineno-4-22" name="__codelineno-4-22" href="#__codelineno-4-22"></a>
</span><span id="__span-4-23"><a id="__codelineno-4-23" name="__codelineno-4-23" href="#__codelineno-4-23"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span><span class="o">&gt;</span>
</span><span id="__span-4-24"><a id="__codelineno-4-24" name="__codelineno-4-24" href="#__codelineno-4-24"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Button</span>
</span><span id="__span-4-25"><a id="__codelineno-4-25" name="__codelineno-4-25" href="#__codelineno-4-25"></a><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span>
</span><span id="__span-4-26"><a id="__codelineno-4-26" name="__codelineno-4-26" href="#__codelineno-4-26"></a><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">handleInsertVariable</span><span class="p">(</span><span class="nx">variable</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="p">)}</span>
</span><span id="__span-4-27"><a id="__codelineno-4-27" name="__codelineno-4-27" href="#__codelineno-4-27"></a><span class="w"> </span><span class="o">&gt;</span>
</span><span id="__span-4-28"><a id="__codelineno-4-28" name="__codelineno-4-28" href="#__codelineno-4-28"></a><span class="w"> </span><span class="nx">Insert</span><span class="w"> </span><span class="nx">to</span><span class="w"> </span><span class="nx">HTML</span>
</span><span id="__span-4-29"><a id="__codelineno-4-29" name="__codelineno-4-29" href="#__codelineno-4-29"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Button&gt;</span>
</span><span id="__span-4-30"><a id="__codelineno-4-30" name="__codelineno-4-30" href="#__codelineno-4-30"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Button</span>
</span><span id="__span-4-31"><a id="__codelineno-4-31" name="__codelineno-4-31" href="#__codelineno-4-31"></a><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span>
</span><span id="__span-4-32"><a id="__codelineno-4-32" name="__codelineno-4-32" href="#__codelineno-4-32"></a><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">handleInsertVariable</span><span class="p">(</span><span class="nx">variable</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;text&#39;</span><span class="p">)}</span>
</span><span id="__span-4-33"><a id="__codelineno-4-33" name="__codelineno-4-33" href="#__codelineno-4-33"></a><span class="w"> </span><span class="o">&gt;</span>
</span><span id="__span-4-34"><a id="__codelineno-4-34" name="__codelineno-4-34" href="#__codelineno-4-34"></a><span class="w"> </span><span class="nx">Insert</span><span class="w"> </span><span class="nx">to</span><span class="w"> </span><span class="nx">Text</span>
</span><span id="__span-4-35"><a id="__codelineno-4-35" name="__codelineno-4-35" href="#__codelineno-4-35"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Button&gt;</span>
</span><span id="__span-4-36"><a id="__codelineno-4-36" name="__codelineno-4-36" href="#__codelineno-4-36"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-4-37"><a id="__codelineno-4-37" name="__codelineno-4-37" href="#__codelineno-4-37"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-4-38"><a id="__codelineno-4-38" name="__codelineno-4-38" href="#__codelineno-4-38"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Card&gt;</span>
</span><span id="__span-4-39"><a id="__codelineno-4-39" name="__codelineno-4-39" href="#__codelineno-4-39"></a><span class="w"> </span><span class="p">))}</span>
</span><span id="__span-4-40"><a id="__codelineno-4-40" name="__codelineno-4-40" href="#__codelineno-4-40"></a><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span></code></pre></div></p>
<hr />
<h3 id="live-preview-pane">Live Preview Pane<a class="headerlink" href="#live-preview-pane" title="Permanent link">&para;</a></h3>
<p><strong>Location:</strong> Right side (50% width) when enabled</p>
<p><strong>Features:</strong>
- <strong>Iframe Rendering</strong> — Isolated HTML preview
- <strong>Sample Data Form</strong> — Edit sample variable values
- <strong>Desktop/Mobile Toggle</strong> — Preview in different viewport sizes
- <strong>Debounced Updates</strong> — Renders 300ms after typing stops
- <strong>Error Display</strong> — Shows Handlebars compilation errors</p>
<p><strong>Implementation:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-5-1"><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a><span class="k">import</span><span class="w"> </span><span class="nx">Handlebars</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;handlebars&#39;</span><span class="p">;</span>
</span><span id="__span-5-2"><a id="__codelineno-5-2" name="__codelineno-5-2" href="#__codelineno-5-2"></a>
</span><span id="__span-5-3"><a id="__codelineno-5-3" name="__codelineno-5-3" href="#__codelineno-5-3"></a><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">previewHtml</span><span class="p">,</span><span class="w"> </span><span class="nx">setPreviewHtml</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span id="__span-5-4"><a id="__codelineno-5-4" name="__codelineno-5-4" href="#__codelineno-5-4"></a><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">sampleData</span><span class="p">,</span><span class="w"> </span><span class="nx">setSampleData</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="o">&lt;</span><span class="nx">Record</span><span class="o">&lt;</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">unknown</span><span class="o">&gt;&gt;</span><span class="p">({});</span>
</span><span id="__span-5-5"><a id="__codelineno-5-5" name="__codelineno-5-5" href="#__codelineno-5-5"></a><span class="kd">const</span><span class="w"> </span><span class="nx">previewRef</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useRef</span><span class="o">&lt;</span><span class="nx">HTMLIFrameElement</span><span class="o">&gt;</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span id="__span-5-6"><a id="__codelineno-5-6" name="__codelineno-5-6" href="#__codelineno-5-6"></a>
</span><span id="__span-5-7"><a id="__codelineno-5-7" name="__codelineno-5-7" href="#__codelineno-5-7"></a><span class="kd">const</span><span class="w"> </span><span class="nx">renderPreview</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useCallback</span><span class="p">((</span><span class="nx">html</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">data</span><span class="o">:</span><span class="w"> </span><span class="kt">Record</span><span class="o">&lt;</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">unknown</span><span class="o">&gt;</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-5-8"><a id="__codelineno-5-8" name="__codelineno-5-8" href="#__codelineno-5-8"></a><span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-5-9"><a id="__codelineno-5-9" name="__codelineno-5-9" href="#__codelineno-5-9"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">compiled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Handlebars</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="nx">html</span><span class="p">);</span>
</span><span id="__span-5-10"><a id="__codelineno-5-10" name="__codelineno-5-10" href="#__codelineno-5-10"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">rendered</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">compiled</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
</span><span id="__span-5-11"><a id="__codelineno-5-11" name="__codelineno-5-11" href="#__codelineno-5-11"></a>
</span><span id="__span-5-12"><a id="__codelineno-5-12" name="__codelineno-5-12" href="#__codelineno-5-12"></a><span class="w"> </span><span class="c1">// Inject into iframe</span>
</span><span id="__span-5-13"><a id="__codelineno-5-13" name="__codelineno-5-13" href="#__codelineno-5-13"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">previewRef</span><span class="p">.</span><span class="nx">current</span><span class="o">?</span><span class="p">.</span><span class="nx">contentDocument</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-5-14"><a id="__codelineno-5-14" name="__codelineno-5-14" href="#__codelineno-5-14"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">doc</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">previewRef</span><span class="p">.</span><span class="nx">current</span><span class="p">.</span><span class="nx">contentDocument</span><span class="p">;</span>
</span><span id="__span-5-15"><a id="__codelineno-5-15" name="__codelineno-5-15" href="#__codelineno-5-15"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">open</span><span class="p">();</span>
</span><span id="__span-5-16"><a id="__codelineno-5-16" name="__codelineno-5-16" href="#__codelineno-5-16"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="sb">`</span>
</span><span id="__span-5-17"><a id="__codelineno-5-17" name="__codelineno-5-17" href="#__codelineno-5-17"></a><span class="sb"> &lt;!DOCTYPE html&gt;</span>
</span><span id="__span-5-18"><a id="__codelineno-5-18" name="__codelineno-5-18" href="#__codelineno-5-18"></a><span class="sb"> &lt;html&gt;</span>
</span><span id="__span-5-19"><a id="__codelineno-5-19" name="__codelineno-5-19" href="#__codelineno-5-19"></a><span class="sb"> &lt;head&gt;</span>
</span><span id="__span-5-20"><a id="__codelineno-5-20" name="__codelineno-5-20" href="#__codelineno-5-20"></a><span class="sb"> &lt;meta charset=&quot;UTF-8&quot;&gt;</span>
</span><span id="__span-5-21"><a id="__codelineno-5-21" name="__codelineno-5-21" href="#__codelineno-5-21"></a><span class="sb"> &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span>
</span><span id="__span-5-22"><a id="__codelineno-5-22" name="__codelineno-5-22" href="#__codelineno-5-22"></a><span class="sb"> &lt;style&gt;</span>
</span><span id="__span-5-23"><a id="__codelineno-5-23" name="__codelineno-5-23" href="#__codelineno-5-23"></a><span class="sb"> body { font-family: Arial, sans-serif; padding: 20px; }</span>
</span><span id="__span-5-24"><a id="__codelineno-5-24" name="__codelineno-5-24" href="#__codelineno-5-24"></a><span class="sb"> &lt;/style&gt;</span>
</span><span id="__span-5-25"><a id="__codelineno-5-25" name="__codelineno-5-25" href="#__codelineno-5-25"></a><span class="sb"> &lt;/head&gt;</span>
</span><span id="__span-5-26"><a id="__codelineno-5-26" name="__codelineno-5-26" href="#__codelineno-5-26"></a><span class="sb"> &lt;body&gt;</span><span class="si">${</span><span class="nx">rendered</span><span class="si">}</span><span class="sb">&lt;/body&gt;</span>
</span><span id="__span-5-27"><a id="__codelineno-5-27" name="__codelineno-5-27" href="#__codelineno-5-27"></a><span class="sb"> &lt;/html&gt;</span>
</span><span id="__span-5-28"><a id="__codelineno-5-28" name="__codelineno-5-28" href="#__codelineno-5-28"></a><span class="sb"> `</span><span class="p">);</span>
</span><span id="__span-5-29"><a id="__codelineno-5-29" name="__codelineno-5-29" href="#__codelineno-5-29"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
</span><span id="__span-5-30"><a id="__codelineno-5-30" name="__codelineno-5-30" href="#__codelineno-5-30"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-5-31"><a id="__codelineno-5-31" name="__codelineno-5-31" href="#__codelineno-5-31"></a>
</span><span id="__span-5-32"><a id="__codelineno-5-32" name="__codelineno-5-32" href="#__codelineno-5-32"></a><span class="w"> </span><span class="nx">setPreviewHtml</span><span class="p">(</span><span class="nx">rendered</span><span class="p">);</span>
</span><span id="__span-5-33"><a id="__codelineno-5-33" name="__codelineno-5-33" href="#__codelineno-5-33"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-5-34"><a id="__codelineno-5-34" name="__codelineno-5-34" href="#__codelineno-5-34"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Preview render error:&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">error</span><span class="p">);</span>
</span><span id="__span-5-35"><a id="__codelineno-5-35" name="__codelineno-5-35" href="#__codelineno-5-35"></a><span class="w"> </span><span class="nx">setPreviewError</span><span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
</span><span id="__span-5-36"><a id="__codelineno-5-36" name="__codelineno-5-36" href="#__codelineno-5-36"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-5-37"><a id="__codelineno-5-37" name="__codelineno-5-37" href="#__codelineno-5-37"></a><span class="p">},</span><span class="w"> </span><span class="p">[]);</span>
</span><span id="__span-5-38"><a id="__codelineno-5-38" name="__codelineno-5-38" href="#__codelineno-5-38"></a>
</span><span id="__span-5-39"><a id="__codelineno-5-39" name="__codelineno-5-39" href="#__codelineno-5-39"></a><span class="kd">const</span><span class="w"> </span><span class="nx">debouncedPreview</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useMemo</span><span class="p">(</span>
</span><span id="__span-5-40"><a id="__codelineno-5-40" name="__codelineno-5-40" href="#__codelineno-5-40"></a><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">debounce</span><span class="p">(</span><span class="nx">renderPreview</span><span class="p">,</span><span class="w"> </span><span class="mf">300</span><span class="p">),</span>
</span><span id="__span-5-41"><a id="__codelineno-5-41" name="__codelineno-5-41" href="#__codelineno-5-41"></a><span class="w"> </span><span class="p">[</span><span class="nx">renderPreview</span><span class="p">]</span>
</span><span id="__span-5-42"><a id="__codelineno-5-42" name="__codelineno-5-42" href="#__codelineno-5-42"></a><span class="p">);</span>
</span><span id="__span-5-43"><a id="__codelineno-5-43" name="__codelineno-5-43" href="#__codelineno-5-43"></a>
</span><span id="__span-5-44"><a id="__codelineno-5-44" name="__codelineno-5-44" href="#__codelineno-5-44"></a><span class="c1">// Update preview when HTML or sample data changes</span>
</span><span id="__span-5-45"><a id="__codelineno-5-45" name="__codelineno-5-45" href="#__codelineno-5-45"></a><span class="nx">useEffect</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-5-46"><a id="__codelineno-5-46" name="__codelineno-5-46" href="#__codelineno-5-46"></a><span class="w"> </span><span class="nx">debouncedPreview</span><span class="p">(</span><span class="nx">htmlContent</span><span class="p">,</span><span class="w"> </span><span class="nx">sampleData</span><span class="p">);</span>
</span><span id="__span-5-47"><a id="__codelineno-5-47" name="__codelineno-5-47" href="#__codelineno-5-47"></a><span class="p">},</span><span class="w"> </span><span class="p">[</span><span class="nx">htmlContent</span><span class="p">,</span><span class="w"> </span><span class="nx">sampleData</span><span class="p">,</span><span class="w"> </span><span class="nx">debouncedPreview</span><span class="p">]);</span>
</span></code></pre></div></p>
<p><strong>Sample Data Form:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-6-1"><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">handleSampleDataChange</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">variableKey</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">value</span><span class="o">:</span><span class="w"> </span><span class="kt">unknown</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-6-2"><a id="__codelineno-6-2" name="__codelineno-6-2" href="#__codelineno-6-2"></a><span class="w"> </span><span class="nx">setSampleData</span><span class="p">((</span><span class="nx">prev</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">({</span>
</span><span id="__span-6-3"><a id="__codelineno-6-3" name="__codelineno-6-3" href="#__codelineno-6-3"></a><span class="w"> </span><span class="p">...</span><span class="nx">prev</span><span class="p">,</span>
</span><span id="__span-6-4"><a id="__codelineno-6-4" name="__codelineno-6-4" href="#__codelineno-6-4"></a><span class="w"> </span><span class="p">[</span><span class="nx">variableKey</span><span class="p">]</span><span class="o">:</span><span class="w"> </span><span class="nx">value</span><span class="p">,</span>
</span><span id="__span-6-5"><a id="__codelineno-6-5" name="__codelineno-6-5" href="#__codelineno-6-5"></a><span class="w"> </span><span class="p">}));</span>
</span><span id="__span-6-6"><a id="__codelineno-6-6" name="__codelineno-6-6" href="#__codelineno-6-6"></a><span class="p">};</span>
</span><span id="__span-6-7"><a id="__codelineno-6-7" name="__codelineno-6-7" href="#__codelineno-6-7"></a>
</span><span id="__span-6-8"><a id="__codelineno-6-8" name="__codelineno-6-8" href="#__codelineno-6-8"></a><span class="c1">// Render form</span>
</span><span id="__span-6-9"><a id="__codelineno-6-9" name="__codelineno-6-9" href="#__codelineno-6-9"></a><span class="o">&lt;</span><span class="nx">Space</span><span class="w"> </span><span class="nx">direction</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;100%&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">marginBottom</span><span class="o">:</span><span class="w"> </span><span class="kt">16</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-6-10"><a id="__codelineno-6-10" name="__codelineno-6-10" href="#__codelineno-6-10"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Title</span><span class="w"> </span><span class="nx">level</span><span class="o">=</span><span class="p">{</span><span class="mf">5</span><span class="p">}</span><span class="o">&gt;</span><span class="nx">Sample</span><span class="w"> </span><span class="nx">Data</span><span class="o">&lt;</span><span class="err">/Title&gt;</span>
</span><span id="__span-6-11"><a id="__codelineno-6-11" name="__codelineno-6-11" href="#__codelineno-6-11"></a><span class="w"> </span><span class="p">{</span><span class="nx">variables</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">variable</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-6-12"><a id="__codelineno-6-12" name="__codelineno-6-12" href="#__codelineno-6-12"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Form</span><span class="p">.</span><span class="nx">Item</span><span class="w"> </span><span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">label</span><span class="p">}</span><span class="o">&gt;</span>
</span><span id="__span-6-13"><a id="__codelineno-6-13" name="__codelineno-6-13" href="#__codelineno-6-13"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Input</span>
</span><span id="__span-6-14"><a id="__codelineno-6-14" name="__codelineno-6-14" href="#__codelineno-6-14"></a><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">sampleData</span><span class="p">[</span><span class="nx">variable</span><span class="p">.</span><span class="nx">key</span><span class="p">]</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">}</span>
</span><span id="__span-6-15"><a id="__codelineno-6-15" name="__codelineno-6-15" href="#__codelineno-6-15"></a><span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">handleSampleDataChange</span><span class="p">(</span><span class="nx">variable</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span>
</span><span id="__span-6-16"><a id="__codelineno-6-16" name="__codelineno-6-16" href="#__codelineno-6-16"></a><span class="w"> </span><span class="nx">placeholder</span><span class="o">=</span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">sampleValue</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">}</span>
</span><span id="__span-6-17"><a id="__codelineno-6-17" name="__codelineno-6-17" href="#__codelineno-6-17"></a><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-6-18"><a id="__codelineno-6-18" name="__codelineno-6-18" href="#__codelineno-6-18"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Form.Item&gt;</span>
</span><span id="__span-6-19"><a id="__codelineno-6-19" name="__codelineno-6-19" href="#__codelineno-6-19"></a><span class="w"> </span><span class="p">))}</span>
</span><span id="__span-6-20"><a id="__codelineno-6-20" name="__codelineno-6-20" href="#__codelineno-6-20"></a><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span></code></pre></div></p>
<hr />
<h3 id="test-send-form">Test Send Form<a class="headerlink" href="#test-send-form" title="Permanent link">&para;</a></h3>
<p><strong>Location:</strong> Modal dialog</p>
<p><strong>Features:</strong>
- <strong>Recipient Email Input</strong> — Where to send test email
- <strong>Sample Data Editor</strong> — JSON editor or form fields
- <strong>Send Button</strong> — Triggers test send API call
- <strong>Success/Failure Notification</strong> — Shows send result
- <strong>Test Log Link</strong> — Link to test send history</p>
<p><strong>Implementation:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-7-1"><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">testModalVisible</span><span class="p">,</span><span class="w"> </span><span class="nx">setTestModalVisible</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-7-2"><a id="__codelineno-7-2" name="__codelineno-7-2" href="#__codelineno-7-2"></a><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">testRecipient</span><span class="p">,</span><span class="w"> </span><span class="nx">setTestRecipient</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span id="__span-7-3"><a id="__codelineno-7-3" name="__codelineno-7-3" href="#__codelineno-7-3"></a><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">testData</span><span class="p">,</span><span class="w"> </span><span class="nx">setTestData</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="o">&lt;</span><span class="nx">Record</span><span class="o">&lt;</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">unknown</span><span class="o">&gt;&gt;</span><span class="p">({});</span>
</span><span id="__span-7-4"><a id="__codelineno-7-4" name="__codelineno-7-4" href="#__codelineno-7-4"></a>
</span><span id="__span-7-5"><a id="__codelineno-7-5" name="__codelineno-7-5" href="#__codelineno-7-5"></a><span class="kd">const</span><span class="w"> </span><span class="nx">handleTestSend</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-7-6"><a id="__codelineno-7-6" name="__codelineno-7-6" href="#__codelineno-7-6"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">testRecipient</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-7-7"><a id="__codelineno-7-7" name="__codelineno-7-7" href="#__codelineno-7-7"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Please enter recipient email&#39;</span><span class="p">);</span>
</span><span id="__span-7-8"><a id="__codelineno-7-8" name="__codelineno-7-8" href="#__codelineno-7-8"></a><span class="w"> </span><span class="k">return</span><span class="p">;</span>
</span><span id="__span-7-9"><a id="__codelineno-7-9" name="__codelineno-7-9" href="#__codelineno-7-9"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-7-10"><a id="__codelineno-7-10" name="__codelineno-7-10" href="#__codelineno-7-10"></a>
</span><span id="__span-7-11"><a id="__codelineno-7-11" name="__codelineno-7-11" href="#__codelineno-7-11"></a><span class="w"> </span><span class="nx">setTestSending</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span id="__span-7-12"><a id="__codelineno-7-12" name="__codelineno-7-12" href="#__codelineno-7-12"></a><span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-7-13"><a id="__codelineno-7-13" name="__codelineno-7-13" href="#__codelineno-7-13"></a><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">api</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="sb">`/api/email-templates/</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">/test`</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-7-14"><a id="__codelineno-7-14" name="__codelineno-7-14" href="#__codelineno-7-14"></a><span class="w"> </span><span class="nx">recipientEmail</span><span class="o">:</span><span class="w"> </span><span class="kt">testRecipient</span><span class="p">,</span>
</span><span id="__span-7-15"><a id="__codelineno-7-15" name="__codelineno-7-15" href="#__codelineno-7-15"></a><span class="w"> </span><span class="nx">testData</span><span class="p">,</span>
</span><span id="__span-7-16"><a id="__codelineno-7-16" name="__codelineno-7-16" href="#__codelineno-7-16"></a><span class="w"> </span><span class="p">});</span>
</span><span id="__span-7-17"><a id="__codelineno-7-17" name="__codelineno-7-17" href="#__codelineno-7-17"></a>
</span><span id="__span-7-18"><a id="__codelineno-7-18" name="__codelineno-7-18" href="#__codelineno-7-18"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="s1">&#39;Test email sent successfully&#39;</span><span class="p">);</span>
</span><span id="__span-7-19"><a id="__codelineno-7-19" name="__codelineno-7-19" href="#__codelineno-7-19"></a><span class="w"> </span><span class="nx">setTestModalVisible</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-7-20"><a id="__codelineno-7-20" name="__codelineno-7-20" href="#__codelineno-7-20"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-7-21"><a id="__codelineno-7-21" name="__codelineno-7-21" href="#__codelineno-7-21"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Failed to send test email&#39;</span><span class="p">);</span>
</span><span id="__span-7-22"><a id="__codelineno-7-22" name="__codelineno-7-22" href="#__codelineno-7-22"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">finally</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-7-23"><a id="__codelineno-7-23" name="__codelineno-7-23" href="#__codelineno-7-23"></a><span class="w"> </span><span class="nx">setTestSending</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-7-24"><a id="__codelineno-7-24" name="__codelineno-7-24" href="#__codelineno-7-24"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-7-25"><a id="__codelineno-7-25" name="__codelineno-7-25" href="#__codelineno-7-25"></a><span class="p">};</span>
</span><span id="__span-7-26"><a id="__codelineno-7-26" name="__codelineno-7-26" href="#__codelineno-7-26"></a>
</span><span id="__span-7-27"><a id="__codelineno-7-27" name="__codelineno-7-27" href="#__codelineno-7-27"></a><span class="c1">// Modal UI</span>
</span><span id="__span-7-28"><a id="__codelineno-7-28" name="__codelineno-7-28" href="#__codelineno-7-28"></a><span class="o">&lt;</span><span class="nx">Modal</span>
</span><span id="__span-7-29"><a id="__codelineno-7-29" name="__codelineno-7-29" href="#__codelineno-7-29"></a><span class="w"> </span><span class="nx">title</span><span class="o">=</span><span class="s2">&quot;Send Test Email&quot;</span>
</span><span id="__span-7-30"><a id="__codelineno-7-30" name="__codelineno-7-30" href="#__codelineno-7-30"></a><span class="w"> </span><span class="nx">visible</span><span class="o">=</span><span class="p">{</span><span class="nx">testModalVisible</span><span class="p">}</span>
</span><span id="__span-7-31"><a id="__codelineno-7-31" name="__codelineno-7-31" href="#__codelineno-7-31"></a><span class="w"> </span><span class="nx">onOk</span><span class="o">=</span><span class="p">{</span><span class="nx">handleTestSend</span><span class="p">}</span>
</span><span id="__span-7-32"><a id="__codelineno-7-32" name="__codelineno-7-32" href="#__codelineno-7-32"></a><span class="w"> </span><span class="nx">onCancel</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setTestModalVisible</span><span class="p">(</span><span class="kc">false</span><span class="p">)}</span>
</span><span id="__span-7-33"><a id="__codelineno-7-33" name="__codelineno-7-33" href="#__codelineno-7-33"></a><span class="w"> </span><span class="nx">confirmLoading</span><span class="o">=</span><span class="p">{</span><span class="nx">testSending</span><span class="p">}</span>
</span><span id="__span-7-34"><a id="__codelineno-7-34" name="__codelineno-7-34" href="#__codelineno-7-34"></a><span class="w"> </span><span class="nx">okText</span><span class="o">=</span><span class="s2">&quot;Send Test&quot;</span>
</span><span id="__span-7-35"><a id="__codelineno-7-35" name="__codelineno-7-35" href="#__codelineno-7-35"></a><span class="o">&gt;</span>
</span><span id="__span-7-36"><a id="__codelineno-7-36" name="__codelineno-7-36" href="#__codelineno-7-36"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Form</span><span class="w"> </span><span class="nx">layout</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="o">&gt;</span>
</span><span id="__span-7-37"><a id="__codelineno-7-37" name="__codelineno-7-37" href="#__codelineno-7-37"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Form</span><span class="p">.</span><span class="nx">Item</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;Recipient Email&quot;</span><span class="w"> </span><span class="nx">required</span><span class="o">&gt;</span>
</span><span id="__span-7-38"><a id="__codelineno-7-38" name="__codelineno-7-38" href="#__codelineno-7-38"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Input</span>
</span><span id="__span-7-39"><a id="__codelineno-7-39" name="__codelineno-7-39" href="#__codelineno-7-39"></a><span class="w"> </span><span class="kr">type</span><span class="o">=</span><span class="s2">&quot;email&quot;</span>
</span><span id="__span-7-40"><a id="__codelineno-7-40" name="__codelineno-7-40" href="#__codelineno-7-40"></a><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">testRecipient</span><span class="p">}</span>
</span><span id="__span-7-41"><a id="__codelineno-7-41" name="__codelineno-7-41" href="#__codelineno-7-41"></a><span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setTestRecipient</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span>
</span><span id="__span-7-42"><a id="__codelineno-7-42" name="__codelineno-7-42" href="#__codelineno-7-42"></a><span class="w"> </span><span class="nx">placeholder</span><span class="o">=</span><span class="s2">&quot;your-email@example.com&quot;</span>
</span><span id="__span-7-43"><a id="__codelineno-7-43" name="__codelineno-7-43" href="#__codelineno-7-43"></a><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-7-44"><a id="__codelineno-7-44" name="__codelineno-7-44" href="#__codelineno-7-44"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Form.Item&gt;</span>
</span><span id="__span-7-45"><a id="__codelineno-7-45" name="__codelineno-7-45" href="#__codelineno-7-45"></a>
</span><span id="__span-7-46"><a id="__codelineno-7-46" name="__codelineno-7-46" href="#__codelineno-7-46"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Form</span><span class="p">.</span><span class="nx">Item</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;Sample Data&quot;</span><span class="o">&gt;</span>
</span><span id="__span-7-47"><a id="__codelineno-7-47" name="__codelineno-7-47" href="#__codelineno-7-47"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="w"> </span><span class="nx">direction</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;100%&#39;</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-7-48"><a id="__codelineno-7-48" name="__codelineno-7-48" href="#__codelineno-7-48"></a><span class="w"> </span><span class="p">{</span><span class="nx">variables</span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">variable</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-7-49"><a id="__codelineno-7-49" name="__codelineno-7-49" href="#__codelineno-7-49"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Input</span>
</span><span id="__span-7-50"><a id="__codelineno-7-50" name="__codelineno-7-50" href="#__codelineno-7-50"></a><span class="w"> </span><span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span>
</span><span id="__span-7-51"><a id="__codelineno-7-51" name="__codelineno-7-51" href="#__codelineno-7-51"></a><span class="w"> </span><span class="nx">addonBefore</span><span class="o">=</span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">label</span><span class="p">}</span>
</span><span id="__span-7-52"><a id="__codelineno-7-52" name="__codelineno-7-52" href="#__codelineno-7-52"></a><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">testData</span><span class="p">[</span><span class="nx">variable</span><span class="p">.</span><span class="nx">key</span><span class="p">]</span><span class="w"> </span><span class="kr">as</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">}</span>
</span><span id="__span-7-53"><a id="__codelineno-7-53" name="__codelineno-7-53" href="#__codelineno-7-53"></a><span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span>
</span><span id="__span-7-54"><a id="__codelineno-7-54" name="__codelineno-7-54" href="#__codelineno-7-54"></a><span class="w"> </span><span class="nx">setTestData</span><span class="p">((</span><span class="nx">prev</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">({</span><span class="w"> </span><span class="p">...</span><span class="nx">prev</span><span class="p">,</span><span class="w"> </span><span class="p">[</span><span class="nx">variable</span><span class="p">.</span><span class="nx">key</span><span class="p">]</span><span class="o">:</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="w"> </span><span class="p">}))</span>
</span><span id="__span-7-55"><a id="__codelineno-7-55" name="__codelineno-7-55" href="#__codelineno-7-55"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-7-56"><a id="__codelineno-7-56" name="__codelineno-7-56" href="#__codelineno-7-56"></a><span class="w"> </span><span class="nx">placeholder</span><span class="o">=</span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">sampleValue</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">}</span>
</span><span id="__span-7-57"><a id="__codelineno-7-57" name="__codelineno-7-57" href="#__codelineno-7-57"></a><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-7-58"><a id="__codelineno-7-58" name="__codelineno-7-58" href="#__codelineno-7-58"></a><span class="w"> </span><span class="p">))}</span>
</span><span id="__span-7-59"><a id="__codelineno-7-59" name="__codelineno-7-59" href="#__codelineno-7-59"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-7-60"><a id="__codelineno-7-60" name="__codelineno-7-60" href="#__codelineno-7-60"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Form.Item&gt;</span>
</span><span id="__span-7-61"><a id="__codelineno-7-61" name="__codelineno-7-61" href="#__codelineno-7-61"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Form&gt;</span>
</span><span id="__span-7-62"><a id="__codelineno-7-62" name="__codelineno-7-62" href="#__codelineno-7-62"></a><span class="o">&lt;</span><span class="err">/Modal&gt;</span>
</span></code></pre></div></p>
<hr />
<h2 id="admin-workflow">Admin Workflow<a class="headerlink" href="#admin-workflow" title="Permanent link">&para;</a></h2>
<h3 id="opening-editor">Opening Editor<a class="headerlink" href="#opening-editor" title="Permanent link">&para;</a></h3>
<p><strong>From EmailTemplatesPage:</strong></p>
<ol>
<li>Click template row in table</li>
<li>Opens template detail modal</li>
<li>Click "Edit" button in modal</li>
<li>Opens EmailTemplateEditorPage in same tab</li>
</ol>
<p><strong>Direct URL:</strong>
<div class="language-text highlight"><pre><span></span><code><span id="__span-8-1"><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a>/app/email-templates/{id}/edit
</span></code></pre></div></p>
<p><strong>Route Definition:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-9-1"><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a><span class="c1">// admin/src/App.tsx</span>
</span><span id="__span-9-2"><a id="__codelineno-9-2" name="__codelineno-9-2" href="#__codelineno-9-2"></a>
</span><span id="__span-9-3"><a id="__codelineno-9-3" name="__codelineno-9-3" href="#__codelineno-9-3"></a><span class="o">&lt;</span><span class="nx">Route</span>
</span><span id="__span-9-4"><a id="__codelineno-9-4" name="__codelineno-9-4" href="#__codelineno-9-4"></a><span class="w"> </span><span class="nx">path</span><span class="o">=</span><span class="s2">&quot;/app/email-templates/:id/edit&quot;</span>
</span><span id="__span-9-5"><a id="__codelineno-9-5" name="__codelineno-9-5" href="#__codelineno-9-5"></a><span class="w"> </span><span class="nx">element</span><span class="o">=</span><span class="p">{</span>
</span><span id="__span-9-6"><a id="__codelineno-9-6" name="__codelineno-9-6" href="#__codelineno-9-6"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">ProtectedRoute</span><span class="w"> </span><span class="nx">allowedRoles</span><span class="o">=</span><span class="p">{[</span><span class="nx">SUPER_ADMIN</span><span class="p">]}</span><span class="o">&gt;</span>
</span><span id="__span-9-7"><a id="__codelineno-9-7" name="__codelineno-9-7" href="#__codelineno-9-7"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">EmailTemplateEditorPage</span><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-9-8"><a id="__codelineno-9-8" name="__codelineno-9-8" href="#__codelineno-9-8"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/ProtectedRoute&gt;</span>
</span><span id="__span-9-9"><a id="__codelineno-9-9" name="__codelineno-9-9" href="#__codelineno-9-9"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-9-10"><a id="__codelineno-9-10" name="__codelineno-9-10" href="#__codelineno-9-10"></a><span class="err">/&gt;</span>
</span></code></pre></div></p>
<hr />
<h3 id="editing-html-content">Editing HTML Content<a class="headerlink" href="#editing-html-content" title="Permanent link">&para;</a></h3>
<p><strong>Step 1: Load Template</strong>
- Template data fetched via API on component mount
- HTML/text content populated in editors
- Variables loaded in insertion panel</p>
<p><strong>Step 2: Edit HTML</strong>
- Type HTML with <code>{{VARIABLES}}</code> placeholders
- Use variable insertion buttons for convenience
- Preview updates automatically (300ms debounce)</p>
<p><strong>Step 3: Insert Variables</strong>
- Click variable "Insert to HTML" button
- <code>{{VARIABLE_KEY}}</code> inserted at cursor position
- Cursor moves after inserted variable</p>
<p><strong>Step 4: Preview Changes</strong>
- Live preview pane shows rendered HTML
- Edit sample data to test different values
- Check for formatting issues</p>
<p><strong>Example Editing Session:</strong>
<div class="language-html highlight"><pre><span></span><code><span id="__span-10-1"><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a><span class="cm">&lt;!-- Initial HTML --&gt;</span>
</span><span id="__span-10-2"><a id="__codelineno-10-2" name="__codelineno-10-2" href="#__codelineno-10-2"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Dear {{USER_NAME}},<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-10-3"><a id="__codelineno-10-3" name="__codelineno-10-3" href="#__codelineno-10-3"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Thank you for signing up.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-10-4"><a id="__codelineno-10-4" name="__codelineno-10-4" href="#__codelineno-10-4"></a>
</span><span id="__span-10-5"><a id="__codelineno-10-5" name="__codelineno-10-5" href="#__codelineno-10-5"></a><span class="cm">&lt;!-- Add shift details --&gt;</span>
</span><span id="__span-10-6"><a id="__codelineno-10-6" name="__codelineno-10-6" href="#__codelineno-10-6"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Dear {{USER_NAME}},<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-10-7"><a id="__codelineno-10-7" name="__codelineno-10-7" href="#__codelineno-10-7"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Thank you for signing up for <span class="p">&lt;</span><span class="nt">strong</span><span class="p">&gt;</span>{{SHIFT_TITLE}}<span class="p">&lt;/</span><span class="nt">strong</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-10-8"><a id="__codelineno-10-8" name="__codelineno-10-8" href="#__codelineno-10-8"></a><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
</span><span id="__span-10-9"><a id="__codelineno-10-9" name="__codelineno-10-9" href="#__codelineno-10-9"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Date: {{SHIFT_DATE}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
</span><span id="__span-10-10"><a id="__codelineno-10-10" name="__codelineno-10-10" href="#__codelineno-10-10"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Time: {{SHIFT_TIME}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
</span><span id="__span-10-11"><a id="__codelineno-10-11" name="__codelineno-10-11" href="#__codelineno-10-11"></a><span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</span><span id="__span-10-12"><a id="__codelineno-10-12" name="__codelineno-10-12" href="#__codelineno-10-12"></a>
</span><span id="__span-10-13"><a id="__codelineno-10-13" name="__codelineno-10-13" href="#__codelineno-10-13"></a><span class="cm">&lt;!-- Add conditional phone --&gt;</span>
</span><span id="__span-10-14"><a id="__codelineno-10-14" name="__codelineno-10-14" href="#__codelineno-10-14"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Dear {{USER_NAME}},<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-10-15"><a id="__codelineno-10-15" name="__codelineno-10-15" href="#__codelineno-10-15"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Thank you for signing up for <span class="p">&lt;</span><span class="nt">strong</span><span class="p">&gt;</span>{{SHIFT_TITLE}}<span class="p">&lt;/</span><span class="nt">strong</span><span class="p">&gt;</span>.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-10-16"><a id="__codelineno-10-16" name="__codelineno-10-16" href="#__codelineno-10-16"></a><span class="p">&lt;</span><span class="nt">ul</span><span class="p">&gt;</span>
</span><span id="__span-10-17"><a id="__codelineno-10-17" name="__codelineno-10-17" href="#__codelineno-10-17"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Date: {{SHIFT_DATE}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
</span><span id="__span-10-18"><a id="__codelineno-10-18" name="__codelineno-10-18" href="#__codelineno-10-18"></a> <span class="p">&lt;</span><span class="nt">li</span><span class="p">&gt;</span>Time: {{SHIFT_TIME}}<span class="p">&lt;/</span><span class="nt">li</span><span class="p">&gt;</span>
</span><span id="__span-10-19"><a id="__codelineno-10-19" name="__codelineno-10-19" href="#__codelineno-10-19"></a><span class="p">&lt;/</span><span class="nt">ul</span><span class="p">&gt;</span>
</span><span id="__span-10-20"><a id="__codelineno-10-20" name="__codelineno-10-20" href="#__codelineno-10-20"></a>
</span><span id="__span-10-21"><a id="__codelineno-10-21" name="__codelineno-10-21" href="#__codelineno-10-21"></a>{{#if HAS_PHONE}}
</span><span id="__span-10-22"><a id="__codelineno-10-22" name="__codelineno-10-22" href="#__codelineno-10-22"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>We&#39;ll call you at {{USER_PHONE}} if there are any changes.<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span><span id="__span-10-23"><a id="__codelineno-10-23" name="__codelineno-10-23" href="#__codelineno-10-23"></a>{{/if}}
</span></code></pre></div></p>
<hr />
<h3 id="using-variable-insertion">Using Variable Insertion<a class="headerlink" href="#using-variable-insertion" title="Permanent link">&para;</a></h3>
<p><strong>Keyboard Method:</strong>
1. Type <code>{{</code> in HTML editor
2. Type variable name (e.g., <code>USER_NAME</code>)
3. Type <code>}}</code></p>
<p><strong>Button Method:</strong>
1. Place cursor where you want variable
2. Click variable "Insert to HTML" button
3. <code>{{VARIABLE_KEY}}</code> inserted at cursor
4. Cursor moves to end of insertion</p>
<p><strong>Insertion Logic:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-11-1"><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">handleInsertVariable</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">variableKey</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">editorType</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;text&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-11-2"><a id="__codelineno-11-2" name="__codelineno-11-2" href="#__codelineno-11-2"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">textarea</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">editorType</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nx">htmlEditorRef.current</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kt">textEditorRef.current</span><span class="p">;</span>
</span><span id="__span-11-3"><a id="__codelineno-11-3" name="__codelineno-11-3" href="#__codelineno-11-3"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">textarea</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="p">;</span>
</span><span id="__span-11-4"><a id="__codelineno-11-4" name="__codelineno-11-4" href="#__codelineno-11-4"></a>
</span><span id="__span-11-5"><a id="__codelineno-11-5" name="__codelineno-11-5" href="#__codelineno-11-5"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">start</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionStart</span><span class="p">;</span>
</span><span id="__span-11-6"><a id="__codelineno-11-6" name="__codelineno-11-6" href="#__codelineno-11-6"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">end</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionEnd</span><span class="p">;</span>
</span><span id="__span-11-7"><a id="__codelineno-11-7" name="__codelineno-11-7" href="#__codelineno-11-7"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">content</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">editorType</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nx">htmlContent</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kt">textContent</span><span class="p">;</span>
</span><span id="__span-11-8"><a id="__codelineno-11-8" name="__codelineno-11-8" href="#__codelineno-11-8"></a>
</span><span id="__span-11-9"><a id="__codelineno-11-9" name="__codelineno-11-9" href="#__codelineno-11-9"></a><span class="w"> </span><span class="c1">// Replace selection with variable</span>
</span><span id="__span-11-10"><a id="__codelineno-11-10" name="__codelineno-11-10" href="#__codelineno-11-10"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">before</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">content</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">start</span><span class="p">);</span>
</span><span id="__span-11-11"><a id="__codelineno-11-11" name="__codelineno-11-11" href="#__codelineno-11-11"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">after</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">content</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="nx">end</span><span class="p">);</span>
</span><span id="__span-11-12"><a id="__codelineno-11-12" name="__codelineno-11-12" href="#__codelineno-11-12"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">variable</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`{{</span><span class="si">${</span><span class="nx">variableKey</span><span class="si">}</span><span class="sb">}}`</span><span class="p">;</span>
</span><span id="__span-11-13"><a id="__codelineno-11-13" name="__codelineno-11-13" href="#__codelineno-11-13"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">newContent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">before</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">variable</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">after</span><span class="p">;</span>
</span><span id="__span-11-14"><a id="__codelineno-11-14" name="__codelineno-11-14" href="#__codelineno-11-14"></a>
</span><span id="__span-11-15"><a id="__codelineno-11-15" name="__codelineno-11-15" href="#__codelineno-11-15"></a><span class="w"> </span><span class="c1">// Update state</span>
</span><span id="__span-11-16"><a id="__codelineno-11-16" name="__codelineno-11-16" href="#__codelineno-11-16"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">editorType</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-11-17"><a id="__codelineno-11-17" name="__codelineno-11-17" href="#__codelineno-11-17"></a><span class="w"> </span><span class="nx">setHtmlContent</span><span class="p">(</span><span class="nx">newContent</span><span class="p">);</span>
</span><span id="__span-11-18"><a id="__codelineno-11-18" name="__codelineno-11-18" href="#__codelineno-11-18"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-11-19"><a id="__codelineno-11-19" name="__codelineno-11-19" href="#__codelineno-11-19"></a><span class="w"> </span><span class="nx">setTextContent</span><span class="p">(</span><span class="nx">newContent</span><span class="p">);</span>
</span><span id="__span-11-20"><a id="__codelineno-11-20" name="__codelineno-11-20" href="#__codelineno-11-20"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-11-21"><a id="__codelineno-11-21" name="__codelineno-11-21" href="#__codelineno-11-21"></a>
</span><span id="__span-11-22"><a id="__codelineno-11-22" name="__codelineno-11-22" href="#__codelineno-11-22"></a><span class="w"> </span><span class="c1">// Move cursor to end of inserted variable</span>
</span><span id="__span-11-23"><a id="__codelineno-11-23" name="__codelineno-11-23" href="#__codelineno-11-23"></a><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-11-24"><a id="__codelineno-11-24" name="__codelineno-11-24" href="#__codelineno-11-24"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">newPos</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">start</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">variable</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
</span><span id="__span-11-25"><a id="__codelineno-11-25" name="__codelineno-11-25" href="#__codelineno-11-25"></a><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionStart</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">newPos</span><span class="p">;</span>
</span><span id="__span-11-26"><a id="__codelineno-11-26" name="__codelineno-11-26" href="#__codelineno-11-26"></a><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionEnd</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">newPos</span><span class="p">;</span>
</span><span id="__span-11-27"><a id="__codelineno-11-27" name="__codelineno-11-27" href="#__codelineno-11-27"></a><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
</span><span id="__span-11-28"><a id="__codelineno-11-28" name="__codelineno-11-28" href="#__codelineno-11-28"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="mf">0</span><span class="p">);</span>
</span><span id="__span-11-29"><a id="__codelineno-11-29" name="__codelineno-11-29" href="#__codelineno-11-29"></a><span class="p">};</span>
</span></code></pre></div></p>
<hr />
<h3 id="live-preview">Live Preview<a class="headerlink" href="#live-preview" title="Permanent link">&para;</a></h3>
<p><strong>Preview Update Flow:</strong></p>
<ol>
<li><strong>Type in HTML Editor</strong></li>
<li><code>onChange</code> event fires</li>
<li>Updates <code>htmlContent</code> state</li>
<li>
<p>Triggers debounced preview render (300ms)</p>
</li>
<li>
<p><strong>Debounced Render</strong></p>
</li>
<li>Waits 300ms after typing stops</li>
<li>Compiles Handlebars template</li>
<li>Interpolates with sample data</li>
<li>
<p>Injects HTML into iframe</p>
</li>
<li>
<p><strong>Sample Data Changes</strong></p>
</li>
<li>Edit sample data form fields</li>
<li>Updates <code>sampleData</code> state</li>
<li>Immediately triggers preview render (no debounce)</li>
</ol>
<p><strong>Preview Error Handling:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-12-1"><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">renderPreview</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">html</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">data</span><span class="o">:</span><span class="w"> </span><span class="kt">Record</span><span class="o">&lt;</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">unknown</span><span class="o">&gt;</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-12-2"><a id="__codelineno-12-2" name="__codelineno-12-2" href="#__codelineno-12-2"></a><span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-12-3"><a id="__codelineno-12-3" name="__codelineno-12-3" href="#__codelineno-12-3"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">compiled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Handlebars</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="nx">html</span><span class="p">);</span>
</span><span id="__span-12-4"><a id="__codelineno-12-4" name="__codelineno-12-4" href="#__codelineno-12-4"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">rendered</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">compiled</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
</span><span id="__span-12-5"><a id="__codelineno-12-5" name="__codelineno-12-5" href="#__codelineno-12-5"></a>
</span><span id="__span-12-6"><a id="__codelineno-12-6" name="__codelineno-12-6" href="#__codelineno-12-6"></a><span class="w"> </span><span class="c1">// Inject into iframe...</span>
</span><span id="__span-12-7"><a id="__codelineno-12-7" name="__codelineno-12-7" href="#__codelineno-12-7"></a><span class="w"> </span><span class="nx">setPreviewError</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span id="__span-12-8"><a id="__codelineno-12-8" name="__codelineno-12-8" href="#__codelineno-12-8"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-12-9"><a id="__codelineno-12-9" name="__codelineno-12-9" href="#__codelineno-12-9"></a><span class="w"> </span><span class="c1">// Show error in preview pane</span>
</span><span id="__span-12-10"><a id="__codelineno-12-10" name="__codelineno-12-10" href="#__codelineno-12-10"></a><span class="w"> </span><span class="nx">setPreviewError</span><span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
</span><span id="__span-12-11"><a id="__codelineno-12-11" name="__codelineno-12-11" href="#__codelineno-12-11"></a>
</span><span id="__span-12-12"><a id="__codelineno-12-12" name="__codelineno-12-12" href="#__codelineno-12-12"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">previewRef</span><span class="p">.</span><span class="nx">current</span><span class="o">?</span><span class="p">.</span><span class="nx">contentDocument</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-12-13"><a id="__codelineno-12-13" name="__codelineno-12-13" href="#__codelineno-12-13"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">doc</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">previewRef</span><span class="p">.</span><span class="nx">current</span><span class="p">.</span><span class="nx">contentDocument</span><span class="p">;</span>
</span><span id="__span-12-14"><a id="__codelineno-12-14" name="__codelineno-12-14" href="#__codelineno-12-14"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">open</span><span class="p">();</span>
</span><span id="__span-12-15"><a id="__codelineno-12-15" name="__codelineno-12-15" href="#__codelineno-12-15"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="sb">`</span>
</span><span id="__span-12-16"><a id="__codelineno-12-16" name="__codelineno-12-16" href="#__codelineno-12-16"></a><span class="sb"> &lt;div style=&quot;color: red; padding: 20px;&quot;&gt;</span>
</span><span id="__span-12-17"><a id="__codelineno-12-17" name="__codelineno-12-17" href="#__codelineno-12-17"></a><span class="sb"> &lt;h3&gt;Preview Error&lt;/h3&gt;</span>
</span><span id="__span-12-18"><a id="__codelineno-12-18" name="__codelineno-12-18" href="#__codelineno-12-18"></a><span class="sb"> &lt;pre&gt;</span><span class="si">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="si">}</span><span class="sb">&lt;/pre&gt;</span>
</span><span id="__span-12-19"><a id="__codelineno-12-19" name="__codelineno-12-19" href="#__codelineno-12-19"></a><span class="sb"> &lt;/div&gt;</span>
</span><span id="__span-12-20"><a id="__codelineno-12-20" name="__codelineno-12-20" href="#__codelineno-12-20"></a><span class="sb"> `</span><span class="p">);</span>
</span><span id="__span-12-21"><a id="__codelineno-12-21" name="__codelineno-12-21" href="#__codelineno-12-21"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
</span><span id="__span-12-22"><a id="__codelineno-12-22" name="__codelineno-12-22" href="#__codelineno-12-22"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-12-23"><a id="__codelineno-12-23" name="__codelineno-12-23" href="#__codelineno-12-23"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-12-24"><a id="__codelineno-12-24" name="__codelineno-12-24" href="#__codelineno-12-24"></a><span class="p">};</span>
</span></code></pre></div></p>
<hr />
<h3 id="testing-template">Testing Template<a class="headerlink" href="#testing-template" title="Permanent link">&para;</a></h3>
<p><strong>Step 1: Click "Send Test" Button</strong>
- Opens test send modal</p>
<p><strong>Step 2: Enter Recipient Email</strong>
- Your email address (or test account)
- Validates email format before sending</p>
<p><strong>Step 3: Edit Sample Data</strong>
- Pre-filled with variable sample values
- Modify to test specific scenarios
- Example: Set <code>HAS_PHONE</code> to <code>false</code> to test conditional block</p>
<p><strong>Step 4: Click "Send Test"</strong>
- POST request to <code>/api/email-templates/:id/test</code>
- Email sent via SMTP (or MailHog in test mode)
- Success notification displayed</p>
<p><strong>Step 5: Check Email</strong>
- Open email client (or MailHog at http://localhost:8025)
- Verify rendering, variables, formatting
- Test links, images, layout</p>
<p><strong>Step 6: Review Test Log</strong>
- Navigate to "Test Logs" tab in template detail modal
- See test send history (recipient, timestamp, success/failure)
- Debug errors if send failed</p>
<hr />
<h3 id="saving-changes">Saving Changes<a class="headerlink" href="#saving-changes" title="Permanent link">&para;</a></h3>
<p><strong>Step 1: Click "Save" Button</strong>
- Toolbar save button (or Ctrl+S keyboard shortcut)</p>
<p><strong>Step 2: Enter Change Notes</strong>
- Modal prompts for change description
- Used for version history audit trail
- Optional but recommended</p>
<p><strong>Step 3: Confirm Save</strong>
- PUT request to <code>/api/email-templates/:id</code>
- Creates new version automatically
- Clears localStorage draft
- Redirects to EmailTemplatesPage</p>
<p><strong>Save Implementation:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-13-1"><a id="__codelineno-13-1" name="__codelineno-13-1" href="#__codelineno-13-1"></a><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">saveModalVisible</span><span class="p">,</span><span class="w"> </span><span class="nx">setSaveModalVisible</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-13-2"><a id="__codelineno-13-2" name="__codelineno-13-2" href="#__codelineno-13-2"></a><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">changeNotes</span><span class="p">,</span><span class="w"> </span><span class="nx">setChangeNotes</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span id="__span-13-3"><a id="__codelineno-13-3" name="__codelineno-13-3" href="#__codelineno-13-3"></a>
</span><span id="__span-13-4"><a id="__codelineno-13-4" name="__codelineno-13-4" href="#__codelineno-13-4"></a><span class="kd">const</span><span class="w"> </span><span class="nx">handleSave</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-13-5"><a id="__codelineno-13-5" name="__codelineno-13-5" href="#__codelineno-13-5"></a><span class="w"> </span><span class="nx">setSaving</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span id="__span-13-6"><a id="__codelineno-13-6" name="__codelineno-13-6" href="#__codelineno-13-6"></a><span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-13-7"><a id="__codelineno-13-7" name="__codelineno-13-7" href="#__codelineno-13-7"></a><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">api</span><span class="p">.</span><span class="nx">put</span><span class="p">(</span><span class="sb">`/api/email-templates/</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-13-8"><a id="__codelineno-13-8" name="__codelineno-13-8" href="#__codelineno-13-8"></a><span class="w"> </span><span class="nx">subjectLine</span><span class="p">,</span>
</span><span id="__span-13-9"><a id="__codelineno-13-9" name="__codelineno-13-9" href="#__codelineno-13-9"></a><span class="w"> </span><span class="nx">htmlContent</span><span class="p">,</span>
</span><span id="__span-13-10"><a id="__codelineno-13-10" name="__codelineno-13-10" href="#__codelineno-13-10"></a><span class="w"> </span><span class="nx">textContent</span><span class="p">,</span>
</span><span id="__span-13-11"><a id="__codelineno-13-11" name="__codelineno-13-11" href="#__codelineno-13-11"></a><span class="w"> </span><span class="nx">changeNotes</span><span class="o">:</span><span class="w"> </span><span class="kt">changeNotes</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="kc">undefined</span><span class="p">,</span>
</span><span id="__span-13-12"><a id="__codelineno-13-12" name="__codelineno-13-12" href="#__codelineno-13-12"></a><span class="w"> </span><span class="p">});</span>
</span><span id="__span-13-13"><a id="__codelineno-13-13" name="__codelineno-13-13" href="#__codelineno-13-13"></a>
</span><span id="__span-13-14"><a id="__codelineno-13-14" name="__codelineno-13-14" href="#__codelineno-13-14"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="s1">&#39;Template saved successfully&#39;</span><span class="p">);</span>
</span><span id="__span-13-15"><a id="__codelineno-13-15" name="__codelineno-13-15" href="#__codelineno-13-15"></a>
</span><span id="__span-13-16"><a id="__codelineno-13-16" name="__codelineno-13-16" href="#__codelineno-13-16"></a><span class="w"> </span><span class="c1">// Clear draft</span>
</span><span id="__span-13-17"><a id="__codelineno-13-17" name="__codelineno-13-17" href="#__codelineno-13-17"></a><span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">removeItem</span><span class="p">(</span><span class="sb">`email-template-draft-</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
</span><span id="__span-13-18"><a id="__codelineno-13-18" name="__codelineno-13-18" href="#__codelineno-13-18"></a>
</span><span id="__span-13-19"><a id="__codelineno-13-19" name="__codelineno-13-19" href="#__codelineno-13-19"></a><span class="w"> </span><span class="c1">// Redirect</span>
</span><span id="__span-13-20"><a id="__codelineno-13-20" name="__codelineno-13-20" href="#__codelineno-13-20"></a><span class="w"> </span><span class="nx">navigate</span><span class="p">(</span><span class="s1">&#39;/app/email-templates&#39;</span><span class="p">);</span>
</span><span id="__span-13-21"><a id="__codelineno-13-21" name="__codelineno-13-21" href="#__codelineno-13-21"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-13-22"><a id="__codelineno-13-22" name="__codelineno-13-22" href="#__codelineno-13-22"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Failed to save template&#39;</span><span class="p">);</span>
</span><span id="__span-13-23"><a id="__codelineno-13-23" name="__codelineno-13-23" href="#__codelineno-13-23"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">finally</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-13-24"><a id="__codelineno-13-24" name="__codelineno-13-24" href="#__codelineno-13-24"></a><span class="w"> </span><span class="nx">setSaving</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-13-25"><a id="__codelineno-13-25" name="__codelineno-13-25" href="#__codelineno-13-25"></a><span class="w"> </span><span class="nx">setSaveModalVisible</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-13-26"><a id="__codelineno-13-26" name="__codelineno-13-26" href="#__codelineno-13-26"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-13-27"><a id="__codelineno-13-27" name="__codelineno-13-27" href="#__codelineno-13-27"></a><span class="p">};</span>
</span><span id="__span-13-28"><a id="__codelineno-13-28" name="__codelineno-13-28" href="#__codelineno-13-28"></a>
</span><span id="__span-13-29"><a id="__codelineno-13-29" name="__codelineno-13-29" href="#__codelineno-13-29"></a><span class="c1">// Keyboard shortcut</span>
</span><span id="__span-13-30"><a id="__codelineno-13-30" name="__codelineno-13-30" href="#__codelineno-13-30"></a><span class="nx">useEffect</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-13-31"><a id="__codelineno-13-31" name="__codelineno-13-31" href="#__codelineno-13-31"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">handleKeyDown</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="o">:</span><span class="w"> </span><span class="kt">KeyboardEvent</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-13-32"><a id="__codelineno-13-32" name="__codelineno-13-32" href="#__codelineno-13-32"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">((</span><span class="nx">e</span><span class="p">.</span><span class="nx">ctrlKey</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">metaKey</span><span class="p">)</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;s&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-13-33"><a id="__codelineno-13-33" name="__codelineno-13-33" href="#__codelineno-13-33"></a><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
</span><span id="__span-13-34"><a id="__codelineno-13-34" name="__codelineno-13-34" href="#__codelineno-13-34"></a><span class="w"> </span><span class="nx">setSaveModalVisible</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span id="__span-13-35"><a id="__codelineno-13-35" name="__codelineno-13-35" href="#__codelineno-13-35"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-13-36"><a id="__codelineno-13-36" name="__codelineno-13-36" href="#__codelineno-13-36"></a><span class="w"> </span><span class="p">};</span>
</span><span id="__span-13-37"><a id="__codelineno-13-37" name="__codelineno-13-37" href="#__codelineno-13-37"></a>
</span><span id="__span-13-38"><a id="__codelineno-13-38" name="__codelineno-13-38" href="#__codelineno-13-38"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">handleKeyDown</span><span class="p">);</span>
</span><span id="__span-13-39"><a id="__codelineno-13-39" name="__codelineno-13-39" href="#__codelineno-13-39"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">handleKeyDown</span><span class="p">);</span>
</span><span id="__span-13-40"><a id="__codelineno-13-40" name="__codelineno-13-40" href="#__codelineno-13-40"></a><span class="p">},</span><span class="w"> </span><span class="p">[]);</span>
</span></code></pre></div></p>
<hr />
<h2 id="code-examples">Code Examples<a class="headerlink" href="#code-examples" title="Permanent link">&para;</a></h2>
<h3 id="emailtemplateeditorpage-component">EmailTemplateEditorPage Component<a class="headerlink" href="#emailtemplateeditorpage-component" title="Permanent link">&para;</a></h3>
<p><strong>Full Component Structure:</strong></p>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-14-1"><a id="__codelineno-14-1" name="__codelineno-14-1" href="#__codelineno-14-1"></a><span class="c1">// admin/src/pages/EmailTemplateEditorPage.tsx</span>
</span><span id="__span-14-2"><a id="__codelineno-14-2" name="__codelineno-14-2" href="#__codelineno-14-2"></a>
</span><span id="__span-14-3"><a id="__codelineno-14-3" name="__codelineno-14-3" href="#__codelineno-14-3"></a><span class="k">import</span><span class="w"> </span><span class="nx">React</span><span class="p">,</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">useState</span><span class="p">,</span><span class="w"> </span><span class="nx">useEffect</span><span class="p">,</span><span class="w"> </span><span class="nx">useRef</span><span class="p">,</span><span class="w"> </span><span class="nx">useCallback</span><span class="p">,</span><span class="w"> </span><span class="nx">useMemo</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;react&#39;</span><span class="p">;</span>
</span><span id="__span-14-4"><a id="__codelineno-14-4" name="__codelineno-14-4" href="#__codelineno-14-4"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">useParams</span><span class="p">,</span><span class="w"> </span><span class="nx">useNavigate</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;react-router-dom&#39;</span><span class="p">;</span>
</span><span id="__span-14-5"><a id="__codelineno-14-5" name="__codelineno-14-5" href="#__codelineno-14-5"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Button</span><span class="p">,</span><span class="w"> </span><span class="nx">Input</span><span class="p">,</span><span class="w"> </span><span class="nx">Space</span><span class="p">,</span><span class="w"> </span><span class="nx">Card</span><span class="p">,</span><span class="w"> </span><span class="nx">Tag</span><span class="p">,</span><span class="w"> </span><span class="nx">Typography</span><span class="p">,</span><span class="w"> </span><span class="nx">Modal</span><span class="p">,</span><span class="w"> </span><span class="nx">Form</span><span class="p">,</span><span class="w"> </span><span class="nx">message</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;antd&#39;</span><span class="p">;</span>
</span><span id="__span-14-6"><a id="__codelineno-14-6" name="__codelineno-14-6" href="#__codelineno-14-6"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">SaveOutlined</span><span class="p">,</span><span class="w"> </span><span class="nx">SendOutlined</span><span class="p">,</span><span class="w"> </span><span class="nx">ArrowLeftOutlined</span><span class="p">,</span><span class="w"> </span><span class="nx">EyeOutlined</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@ant-design/icons&#39;</span><span class="p">;</span>
</span><span id="__span-14-7"><a id="__codelineno-14-7" name="__codelineno-14-7" href="#__codelineno-14-7"></a><span class="k">import</span><span class="w"> </span><span class="nx">Handlebars</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;handlebars&#39;</span><span class="p">;</span>
</span><span id="__span-14-8"><a id="__codelineno-14-8" name="__codelineno-14-8" href="#__codelineno-14-8"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">debounce</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;lodash&#39;</span><span class="p">;</span>
</span><span id="__span-14-9"><a id="__codelineno-14-9" name="__codelineno-14-9" href="#__codelineno-14-9"></a><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">api</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@/lib/api&#39;</span><span class="p">;</span>
</span><span id="__span-14-10"><a id="__codelineno-14-10" name="__codelineno-14-10" href="#__codelineno-14-10"></a><span class="k">import</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">EmailTemplate</span><span class="p">,</span><span class="w"> </span><span class="nx">EmailTemplateVariable</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@/types/api&#39;</span><span class="p">;</span>
</span><span id="__span-14-11"><a id="__codelineno-14-11" name="__codelineno-14-11" href="#__codelineno-14-11"></a>
</span><span id="__span-14-12"><a id="__codelineno-14-12" name="__codelineno-14-12" href="#__codelineno-14-12"></a><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">Title</span><span class="p">,</span><span class="w"> </span><span class="nx">Text</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Typography</span><span class="p">;</span>
</span><span id="__span-14-13"><a id="__codelineno-14-13" name="__codelineno-14-13" href="#__codelineno-14-13"></a><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">TextArea</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Input</span><span class="p">;</span>
</span><span id="__span-14-14"><a id="__codelineno-14-14" name="__codelineno-14-14" href="#__codelineno-14-14"></a>
</span><span id="__span-14-15"><a id="__codelineno-14-15" name="__codelineno-14-15" href="#__codelineno-14-15"></a><span class="k">export</span><span class="w"> </span><span class="k">default</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">EmailTemplateEditorPage</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-16"><a id="__codelineno-14-16" name="__codelineno-14-16" href="#__codelineno-14-16"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">id</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useParams</span><span class="o">&lt;</span><span class="p">{</span><span class="w"> </span><span class="nx">id</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="w"> </span><span class="p">}</span><span class="o">&gt;</span><span class="p">();</span>
</span><span id="__span-14-17"><a id="__codelineno-14-17" name="__codelineno-14-17" href="#__codelineno-14-17"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">navigate</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useNavigate</span><span class="p">();</span>
</span><span id="__span-14-18"><a id="__codelineno-14-18" name="__codelineno-14-18" href="#__codelineno-14-18"></a>
</span><span id="__span-14-19"><a id="__codelineno-14-19" name="__codelineno-14-19" href="#__codelineno-14-19"></a><span class="w"> </span><span class="c1">// State</span>
</span><span id="__span-14-20"><a id="__codelineno-14-20" name="__codelineno-14-20" href="#__codelineno-14-20"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">loading</span><span class="p">,</span><span class="w"> </span><span class="nx">setLoading</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span id="__span-14-21"><a id="__codelineno-14-21" name="__codelineno-14-21" href="#__codelineno-14-21"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">saving</span><span class="p">,</span><span class="w"> </span><span class="nx">setSaving</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-14-22"><a id="__codelineno-14-22" name="__codelineno-14-22" href="#__codelineno-14-22"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">template</span><span class="p">,</span><span class="w"> </span><span class="nx">setTemplate</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="o">&lt;</span><span class="nx">EmailTemplate</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="kc">null</span><span class="o">&gt;</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span id="__span-14-23"><a id="__codelineno-14-23" name="__codelineno-14-23" href="#__codelineno-14-23"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">variables</span><span class="p">,</span><span class="w"> </span><span class="nx">setVariables</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="o">&lt;</span><span class="nx">EmailTemplateVariable</span><span class="p">[]</span><span class="o">&gt;</span><span class="p">([]);</span>
</span><span id="__span-14-24"><a id="__codelineno-14-24" name="__codelineno-14-24" href="#__codelineno-14-24"></a>
</span><span id="__span-14-25"><a id="__codelineno-14-25" name="__codelineno-14-25" href="#__codelineno-14-25"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">subjectLine</span><span class="p">,</span><span class="w"> </span><span class="nx">setSubjectLine</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span id="__span-14-26"><a id="__codelineno-14-26" name="__codelineno-14-26" href="#__codelineno-14-26"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">htmlContent</span><span class="p">,</span><span class="w"> </span><span class="nx">setHtmlContent</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span id="__span-14-27"><a id="__codelineno-14-27" name="__codelineno-14-27" href="#__codelineno-14-27"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">textContent</span><span class="p">,</span><span class="w"> </span><span class="nx">setTextContent</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span id="__span-14-28"><a id="__codelineno-14-28" name="__codelineno-14-28" href="#__codelineno-14-28"></a>
</span><span id="__span-14-29"><a id="__codelineno-14-29" name="__codelineno-14-29" href="#__codelineno-14-29"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">showPreview</span><span class="p">,</span><span class="w"> </span><span class="nx">setShowPreview</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span id="__span-14-30"><a id="__codelineno-14-30" name="__codelineno-14-30" href="#__codelineno-14-30"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">sampleData</span><span class="p">,</span><span class="w"> </span><span class="nx">setSampleData</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="o">&lt;</span><span class="nx">Record</span><span class="o">&lt;</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">unknown</span><span class="o">&gt;&gt;</span><span class="p">({});</span>
</span><span id="__span-14-31"><a id="__codelineno-14-31" name="__codelineno-14-31" href="#__codelineno-14-31"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">previewError</span><span class="p">,</span><span class="w"> </span><span class="nx">setPreviewError</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="o">&lt;</span><span class="kt">string</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="kc">null</span><span class="o">&gt;</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span id="__span-14-32"><a id="__codelineno-14-32" name="__codelineno-14-32" href="#__codelineno-14-32"></a>
</span><span id="__span-14-33"><a id="__codelineno-14-33" name="__codelineno-14-33" href="#__codelineno-14-33"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">testModalVisible</span><span class="p">,</span><span class="w"> </span><span class="nx">setTestModalVisible</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-14-34"><a id="__codelineno-14-34" name="__codelineno-14-34" href="#__codelineno-14-34"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">testRecipient</span><span class="p">,</span><span class="w"> </span><span class="nx">setTestRecipient</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span id="__span-14-35"><a id="__codelineno-14-35" name="__codelineno-14-35" href="#__codelineno-14-35"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">testSending</span><span class="p">,</span><span class="w"> </span><span class="nx">setTestSending</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-14-36"><a id="__codelineno-14-36" name="__codelineno-14-36" href="#__codelineno-14-36"></a>
</span><span id="__span-14-37"><a id="__codelineno-14-37" name="__codelineno-14-37" href="#__codelineno-14-37"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">saveModalVisible</span><span class="p">,</span><span class="w"> </span><span class="nx">setSaveModalVisible</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-14-38"><a id="__codelineno-14-38" name="__codelineno-14-38" href="#__codelineno-14-38"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">[</span><span class="nx">changeNotes</span><span class="p">,</span><span class="w"> </span><span class="nx">setChangeNotes</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useState</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span id="__span-14-39"><a id="__codelineno-14-39" name="__codelineno-14-39" href="#__codelineno-14-39"></a>
</span><span id="__span-14-40"><a id="__codelineno-14-40" name="__codelineno-14-40" href="#__codelineno-14-40"></a><span class="w"> </span><span class="c1">// Refs</span>
</span><span id="__span-14-41"><a id="__codelineno-14-41" name="__codelineno-14-41" href="#__codelineno-14-41"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">htmlEditorRef</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useRef</span><span class="o">&lt;</span><span class="nx">HTMLTextAreaElement</span><span class="o">&gt;</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span id="__span-14-42"><a id="__codelineno-14-42" name="__codelineno-14-42" href="#__codelineno-14-42"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">textEditorRef</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useRef</span><span class="o">&lt;</span><span class="nx">HTMLTextAreaElement</span><span class="o">&gt;</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span id="__span-14-43"><a id="__codelineno-14-43" name="__codelineno-14-43" href="#__codelineno-14-43"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">previewRef</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useRef</span><span class="o">&lt;</span><span class="nx">HTMLIFrameElement</span><span class="o">&gt;</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span id="__span-14-44"><a id="__codelineno-14-44" name="__codelineno-14-44" href="#__codelineno-14-44"></a>
</span><span id="__span-14-45"><a id="__codelineno-14-45" name="__codelineno-14-45" href="#__codelineno-14-45"></a><span class="w"> </span><span class="c1">// Load template</span>
</span><span id="__span-14-46"><a id="__codelineno-14-46" name="__codelineno-14-46" href="#__codelineno-14-46"></a><span class="w"> </span><span class="nx">useEffect</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-47"><a id="__codelineno-14-47" name="__codelineno-14-47" href="#__codelineno-14-47"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">loadTemplate</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-48"><a id="__codelineno-14-48" name="__codelineno-14-48" href="#__codelineno-14-48"></a><span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-49"><a id="__codelineno-14-49" name="__codelineno-14-49" href="#__codelineno-14-49"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">response</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">api</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="sb">`/api/email-templates/</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
</span><span id="__span-14-50"><a id="__codelineno-14-50" name="__codelineno-14-50" href="#__codelineno-14-50"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">template</span><span class="o">:</span><span class="w"> </span><span class="kt">tmpl</span><span class="p">,</span><span class="w"> </span><span class="nx">variables</span><span class="o">:</span><span class="w"> </span><span class="kt">vars</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">response</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span>
</span><span id="__span-14-51"><a id="__codelineno-14-51" name="__codelineno-14-51" href="#__codelineno-14-51"></a>
</span><span id="__span-14-52"><a id="__codelineno-14-52" name="__codelineno-14-52" href="#__codelineno-14-52"></a><span class="w"> </span><span class="nx">setTemplate</span><span class="p">(</span><span class="nx">tmpl</span><span class="p">);</span>
</span><span id="__span-14-53"><a id="__codelineno-14-53" name="__codelineno-14-53" href="#__codelineno-14-53"></a><span class="w"> </span><span class="nx">setVariables</span><span class="p">(</span><span class="nx">vars</span><span class="p">);</span>
</span><span id="__span-14-54"><a id="__codelineno-14-54" name="__codelineno-14-54" href="#__codelineno-14-54"></a>
</span><span id="__span-14-55"><a id="__codelineno-14-55" name="__codelineno-14-55" href="#__codelineno-14-55"></a><span class="w"> </span><span class="nx">setSubjectLine</span><span class="p">(</span><span class="nx">tmpl</span><span class="p">.</span><span class="nx">subjectLine</span><span class="p">);</span>
</span><span id="__span-14-56"><a id="__codelineno-14-56" name="__codelineno-14-56" href="#__codelineno-14-56"></a><span class="w"> </span><span class="nx">setHtmlContent</span><span class="p">(</span><span class="nx">tmpl</span><span class="p">.</span><span class="nx">htmlContent</span><span class="p">);</span>
</span><span id="__span-14-57"><a id="__codelineno-14-57" name="__codelineno-14-57" href="#__codelineno-14-57"></a><span class="w"> </span><span class="nx">setTextContent</span><span class="p">(</span><span class="nx">tmpl</span><span class="p">.</span><span class="nx">textContent</span><span class="p">);</span>
</span><span id="__span-14-58"><a id="__codelineno-14-58" name="__codelineno-14-58" href="#__codelineno-14-58"></a>
</span><span id="__span-14-59"><a id="__codelineno-14-59" name="__codelineno-14-59" href="#__codelineno-14-59"></a><span class="w"> </span><span class="c1">// Initialize sample data from variable sample values</span>
</span><span id="__span-14-60"><a id="__codelineno-14-60" name="__codelineno-14-60" href="#__codelineno-14-60"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">initialSampleData</span><span class="o">:</span><span class="w"> </span><span class="kt">Record</span><span class="o">&lt;</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">unknown</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{};</span>
</span><span id="__span-14-61"><a id="__codelineno-14-61" name="__codelineno-14-61" href="#__codelineno-14-61"></a><span class="w"> </span><span class="nx">vars</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">v</span><span class="o">:</span><span class="w"> </span><span class="kt">EmailTemplateVariable</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-62"><a id="__codelineno-14-62" name="__codelineno-14-62" href="#__codelineno-14-62"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">v</span><span class="p">.</span><span class="nx">sampleValue</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-63"><a id="__codelineno-14-63" name="__codelineno-14-63" href="#__codelineno-14-63"></a><span class="w"> </span><span class="nx">initialSampleData</span><span class="p">[</span><span class="nx">v</span><span class="p">.</span><span class="nx">key</span><span class="p">]</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">v</span><span class="p">.</span><span class="nx">sampleValue</span><span class="p">;</span>
</span><span id="__span-14-64"><a id="__codelineno-14-64" name="__codelineno-14-64" href="#__codelineno-14-64"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-65"><a id="__codelineno-14-65" name="__codelineno-14-65" href="#__codelineno-14-65"></a><span class="w"> </span><span class="p">});</span>
</span><span id="__span-14-66"><a id="__codelineno-14-66" name="__codelineno-14-66" href="#__codelineno-14-66"></a><span class="w"> </span><span class="nx">setSampleData</span><span class="p">(</span><span class="nx">initialSampleData</span><span class="p">);</span>
</span><span id="__span-14-67"><a id="__codelineno-14-67" name="__codelineno-14-67" href="#__codelineno-14-67"></a>
</span><span id="__span-14-68"><a id="__codelineno-14-68" name="__codelineno-14-68" href="#__codelineno-14-68"></a><span class="w"> </span><span class="c1">// Restore draft if exists</span>
</span><span id="__span-14-69"><a id="__codelineno-14-69" name="__codelineno-14-69" href="#__codelineno-14-69"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">draft</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="sb">`email-template-draft-</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
</span><span id="__span-14-70"><a id="__codelineno-14-70" name="__codelineno-14-70" href="#__codelineno-14-70"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">draft</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-71"><a id="__codelineno-14-71" name="__codelineno-14-71" href="#__codelineno-14-71"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">subjectLine</span><span class="o">:</span><span class="w"> </span><span class="kt">draftSubject</span><span class="p">,</span><span class="w"> </span><span class="nx">htmlContent</span><span class="o">:</span><span class="w"> </span><span class="kt">draftHtml</span><span class="p">,</span><span class="w"> </span><span class="nx">textContent</span><span class="o">:</span><span class="w"> </span><span class="kt">draftText</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">draft</span><span class="p">);</span>
</span><span id="__span-14-72"><a id="__codelineno-14-72" name="__codelineno-14-72" href="#__codelineno-14-72"></a><span class="w"> </span><span class="nx">setSubjectLine</span><span class="p">(</span><span class="nx">draftSubject</span><span class="p">);</span>
</span><span id="__span-14-73"><a id="__codelineno-14-73" name="__codelineno-14-73" href="#__codelineno-14-73"></a><span class="w"> </span><span class="nx">setHtmlContent</span><span class="p">(</span><span class="nx">draftHtml</span><span class="p">);</span>
</span><span id="__span-14-74"><a id="__codelineno-14-74" name="__codelineno-14-74" href="#__codelineno-14-74"></a><span class="w"> </span><span class="nx">setTextContent</span><span class="p">(</span><span class="nx">draftText</span><span class="p">);</span>
</span><span id="__span-14-75"><a id="__codelineno-14-75" name="__codelineno-14-75" href="#__codelineno-14-75"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">info</span><span class="p">(</span><span class="s1">&#39;Restored unsaved changes from draft&#39;</span><span class="p">);</span>
</span><span id="__span-14-76"><a id="__codelineno-14-76" name="__codelineno-14-76" href="#__codelineno-14-76"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-77"><a id="__codelineno-14-77" name="__codelineno-14-77" href="#__codelineno-14-77"></a>
</span><span id="__span-14-78"><a id="__codelineno-14-78" name="__codelineno-14-78" href="#__codelineno-14-78"></a><span class="w"> </span><span class="nx">setLoading</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-14-79"><a id="__codelineno-14-79" name="__codelineno-14-79" href="#__codelineno-14-79"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-80"><a id="__codelineno-14-80" name="__codelineno-14-80" href="#__codelineno-14-80"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Failed to load template&#39;</span><span class="p">);</span>
</span><span id="__span-14-81"><a id="__codelineno-14-81" name="__codelineno-14-81" href="#__codelineno-14-81"></a><span class="w"> </span><span class="nx">navigate</span><span class="p">(</span><span class="s1">&#39;/app/email-templates&#39;</span><span class="p">);</span>
</span><span id="__span-14-82"><a id="__codelineno-14-82" name="__codelineno-14-82" href="#__codelineno-14-82"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-83"><a id="__codelineno-14-83" name="__codelineno-14-83" href="#__codelineno-14-83"></a><span class="w"> </span><span class="p">};</span>
</span><span id="__span-14-84"><a id="__codelineno-14-84" name="__codelineno-14-84" href="#__codelineno-14-84"></a>
</span><span id="__span-14-85"><a id="__codelineno-14-85" name="__codelineno-14-85" href="#__codelineno-14-85"></a><span class="w"> </span><span class="nx">loadTemplate</span><span class="p">();</span>
</span><span id="__span-14-86"><a id="__codelineno-14-86" name="__codelineno-14-86" href="#__codelineno-14-86"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span><span class="nx">id</span><span class="p">,</span><span class="w"> </span><span class="nx">navigate</span><span class="p">]);</span>
</span><span id="__span-14-87"><a id="__codelineno-14-87" name="__codelineno-14-87" href="#__codelineno-14-87"></a>
</span><span id="__span-14-88"><a id="__codelineno-14-88" name="__codelineno-14-88" href="#__codelineno-14-88"></a><span class="w"> </span><span class="c1">// Auto-save draft to localStorage</span>
</span><span id="__span-14-89"><a id="__codelineno-14-89" name="__codelineno-14-89" href="#__codelineno-14-89"></a><span class="w"> </span><span class="nx">useEffect</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-90"><a id="__codelineno-14-90" name="__codelineno-14-90" href="#__codelineno-14-90"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">loading</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">template</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-91"><a id="__codelineno-14-91" name="__codelineno-14-91" href="#__codelineno-14-91"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">draft</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-92"><a id="__codelineno-14-92" name="__codelineno-14-92" href="#__codelineno-14-92"></a><span class="w"> </span><span class="nx">subjectLine</span><span class="p">,</span>
</span><span id="__span-14-93"><a id="__codelineno-14-93" name="__codelineno-14-93" href="#__codelineno-14-93"></a><span class="w"> </span><span class="nx">htmlContent</span><span class="p">,</span>
</span><span id="__span-14-94"><a id="__codelineno-14-94" name="__codelineno-14-94" href="#__codelineno-14-94"></a><span class="w"> </span><span class="nx">textContent</span><span class="p">,</span>
</span><span id="__span-14-95"><a id="__codelineno-14-95" name="__codelineno-14-95" href="#__codelineno-14-95"></a><span class="w"> </span><span class="p">};</span>
</span><span id="__span-14-96"><a id="__codelineno-14-96" name="__codelineno-14-96" href="#__codelineno-14-96"></a><span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="sb">`email-template-draft-</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">,</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">draft</span><span class="p">));</span>
</span><span id="__span-14-97"><a id="__codelineno-14-97" name="__codelineno-14-97" href="#__codelineno-14-97"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-98"><a id="__codelineno-14-98" name="__codelineno-14-98" href="#__codelineno-14-98"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span><span class="nx">subjectLine</span><span class="p">,</span><span class="w"> </span><span class="nx">htmlContent</span><span class="p">,</span><span class="w"> </span><span class="nx">textContent</span><span class="p">,</span><span class="w"> </span><span class="nx">loading</span><span class="p">,</span><span class="w"> </span><span class="nx">template</span><span class="p">,</span><span class="w"> </span><span class="nx">id</span><span class="p">]);</span>
</span><span id="__span-14-99"><a id="__codelineno-14-99" name="__codelineno-14-99" href="#__codelineno-14-99"></a>
</span><span id="__span-14-100"><a id="__codelineno-14-100" name="__codelineno-14-100" href="#__codelineno-14-100"></a><span class="w"> </span><span class="c1">// Preview rendering</span>
</span><span id="__span-14-101"><a id="__codelineno-14-101" name="__codelineno-14-101" href="#__codelineno-14-101"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">renderPreview</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useCallback</span><span class="p">((</span><span class="nx">html</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">data</span><span class="o">:</span><span class="w"> </span><span class="kt">Record</span><span class="o">&lt;</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">unknown</span><span class="o">&gt;</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-102"><a id="__codelineno-14-102" name="__codelineno-14-102" href="#__codelineno-14-102"></a><span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-103"><a id="__codelineno-14-103" name="__codelineno-14-103" href="#__codelineno-14-103"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">compiled</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">Handlebars</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="nx">html</span><span class="p">);</span>
</span><span id="__span-14-104"><a id="__codelineno-14-104" name="__codelineno-14-104" href="#__codelineno-14-104"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">rendered</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">compiled</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
</span><span id="__span-14-105"><a id="__codelineno-14-105" name="__codelineno-14-105" href="#__codelineno-14-105"></a>
</span><span id="__span-14-106"><a id="__codelineno-14-106" name="__codelineno-14-106" href="#__codelineno-14-106"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">previewRef</span><span class="p">.</span><span class="nx">current</span><span class="o">?</span><span class="p">.</span><span class="nx">contentDocument</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-107"><a id="__codelineno-14-107" name="__codelineno-14-107" href="#__codelineno-14-107"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">doc</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">previewRef</span><span class="p">.</span><span class="nx">current</span><span class="p">.</span><span class="nx">contentDocument</span><span class="p">;</span>
</span><span id="__span-14-108"><a id="__codelineno-14-108" name="__codelineno-14-108" href="#__codelineno-14-108"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">open</span><span class="p">();</span>
</span><span id="__span-14-109"><a id="__codelineno-14-109" name="__codelineno-14-109" href="#__codelineno-14-109"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="sb">`</span>
</span><span id="__span-14-110"><a id="__codelineno-14-110" name="__codelineno-14-110" href="#__codelineno-14-110"></a><span class="sb"> &lt;!DOCTYPE html&gt;</span>
</span><span id="__span-14-111"><a id="__codelineno-14-111" name="__codelineno-14-111" href="#__codelineno-14-111"></a><span class="sb"> &lt;html&gt;</span>
</span><span id="__span-14-112"><a id="__codelineno-14-112" name="__codelineno-14-112" href="#__codelineno-14-112"></a><span class="sb"> &lt;head&gt;</span>
</span><span id="__span-14-113"><a id="__codelineno-14-113" name="__codelineno-14-113" href="#__codelineno-14-113"></a><span class="sb"> &lt;meta charset=&quot;UTF-8&quot;&gt;</span>
</span><span id="__span-14-114"><a id="__codelineno-14-114" name="__codelineno-14-114" href="#__codelineno-14-114"></a><span class="sb"> &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;</span>
</span><span id="__span-14-115"><a id="__codelineno-14-115" name="__codelineno-14-115" href="#__codelineno-14-115"></a><span class="sb"> &lt;style&gt;</span>
</span><span id="__span-14-116"><a id="__codelineno-14-116" name="__codelineno-14-116" href="#__codelineno-14-116"></a><span class="sb"> body {</span>
</span><span id="__span-14-117"><a id="__codelineno-14-117" name="__codelineno-14-117" href="#__codelineno-14-117"></a><span class="sb"> font-family: Arial, sans-serif;</span>
</span><span id="__span-14-118"><a id="__codelineno-14-118" name="__codelineno-14-118" href="#__codelineno-14-118"></a><span class="sb"> padding: 20px;</span>
</span><span id="__span-14-119"><a id="__codelineno-14-119" name="__codelineno-14-119" href="#__codelineno-14-119"></a><span class="sb"> line-height: 1.6;</span>
</span><span id="__span-14-120"><a id="__codelineno-14-120" name="__codelineno-14-120" href="#__codelineno-14-120"></a><span class="sb"> }</span>
</span><span id="__span-14-121"><a id="__codelineno-14-121" name="__codelineno-14-121" href="#__codelineno-14-121"></a><span class="sb"> &lt;/style&gt;</span>
</span><span id="__span-14-122"><a id="__codelineno-14-122" name="__codelineno-14-122" href="#__codelineno-14-122"></a><span class="sb"> &lt;/head&gt;</span>
</span><span id="__span-14-123"><a id="__codelineno-14-123" name="__codelineno-14-123" href="#__codelineno-14-123"></a><span class="sb"> &lt;body&gt;</span><span class="si">${</span><span class="nx">rendered</span><span class="si">}</span><span class="sb">&lt;/body&gt;</span>
</span><span id="__span-14-124"><a id="__codelineno-14-124" name="__codelineno-14-124" href="#__codelineno-14-124"></a><span class="sb"> &lt;/html&gt;</span>
</span><span id="__span-14-125"><a id="__codelineno-14-125" name="__codelineno-14-125" href="#__codelineno-14-125"></a><span class="sb"> `</span><span class="p">);</span>
</span><span id="__span-14-126"><a id="__codelineno-14-126" name="__codelineno-14-126" href="#__codelineno-14-126"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
</span><span id="__span-14-127"><a id="__codelineno-14-127" name="__codelineno-14-127" href="#__codelineno-14-127"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-128"><a id="__codelineno-14-128" name="__codelineno-14-128" href="#__codelineno-14-128"></a>
</span><span id="__span-14-129"><a id="__codelineno-14-129" name="__codelineno-14-129" href="#__codelineno-14-129"></a><span class="w"> </span><span class="nx">setPreviewError</span><span class="p">(</span><span class="kc">null</span><span class="p">);</span>
</span><span id="__span-14-130"><a id="__codelineno-14-130" name="__codelineno-14-130" href="#__codelineno-14-130"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="o">:</span><span class="w"> </span><span class="kt">any</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-131"><a id="__codelineno-14-131" name="__codelineno-14-131" href="#__codelineno-14-131"></a><span class="w"> </span><span class="nx">setPreviewError</span><span class="p">(</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="p">);</span>
</span><span id="__span-14-132"><a id="__codelineno-14-132" name="__codelineno-14-132" href="#__codelineno-14-132"></a>
</span><span id="__span-14-133"><a id="__codelineno-14-133" name="__codelineno-14-133" href="#__codelineno-14-133"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">previewRef</span><span class="p">.</span><span class="nx">current</span><span class="o">?</span><span class="p">.</span><span class="nx">contentDocument</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-134"><a id="__codelineno-14-134" name="__codelineno-14-134" href="#__codelineno-14-134"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">doc</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">previewRef</span><span class="p">.</span><span class="nx">current</span><span class="p">.</span><span class="nx">contentDocument</span><span class="p">;</span>
</span><span id="__span-14-135"><a id="__codelineno-14-135" name="__codelineno-14-135" href="#__codelineno-14-135"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">open</span><span class="p">();</span>
</span><span id="__span-14-136"><a id="__codelineno-14-136" name="__codelineno-14-136" href="#__codelineno-14-136"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="sb">`</span>
</span><span id="__span-14-137"><a id="__codelineno-14-137" name="__codelineno-14-137" href="#__codelineno-14-137"></a><span class="sb"> &lt;div style=&quot;color: red; padding: 20px;&quot;&gt;</span>
</span><span id="__span-14-138"><a id="__codelineno-14-138" name="__codelineno-14-138" href="#__codelineno-14-138"></a><span class="sb"> &lt;h3&gt;Preview Error&lt;/h3&gt;</span>
</span><span id="__span-14-139"><a id="__codelineno-14-139" name="__codelineno-14-139" href="#__codelineno-14-139"></a><span class="sb"> &lt;pre&gt;</span><span class="si">${</span><span class="nx">error</span><span class="p">.</span><span class="nx">message</span><span class="si">}</span><span class="sb">&lt;/pre&gt;</span>
</span><span id="__span-14-140"><a id="__codelineno-14-140" name="__codelineno-14-140" href="#__codelineno-14-140"></a><span class="sb"> &lt;/div&gt;</span>
</span><span id="__span-14-141"><a id="__codelineno-14-141" name="__codelineno-14-141" href="#__codelineno-14-141"></a><span class="sb"> `</span><span class="p">);</span>
</span><span id="__span-14-142"><a id="__codelineno-14-142" name="__codelineno-14-142" href="#__codelineno-14-142"></a><span class="w"> </span><span class="nx">doc</span><span class="p">.</span><span class="nx">close</span><span class="p">();</span>
</span><span id="__span-14-143"><a id="__codelineno-14-143" name="__codelineno-14-143" href="#__codelineno-14-143"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-144"><a id="__codelineno-14-144" name="__codelineno-14-144" href="#__codelineno-14-144"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-145"><a id="__codelineno-14-145" name="__codelineno-14-145" href="#__codelineno-14-145"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[]);</span>
</span><span id="__span-14-146"><a id="__codelineno-14-146" name="__codelineno-14-146" href="#__codelineno-14-146"></a>
</span><span id="__span-14-147"><a id="__codelineno-14-147" name="__codelineno-14-147" href="#__codelineno-14-147"></a><span class="w"> </span><span class="c1">// Debounced preview</span>
</span><span id="__span-14-148"><a id="__codelineno-14-148" name="__codelineno-14-148" href="#__codelineno-14-148"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">debouncedPreview</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">useMemo</span><span class="p">(</span>
</span><span id="__span-14-149"><a id="__codelineno-14-149" name="__codelineno-14-149" href="#__codelineno-14-149"></a><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">debounce</span><span class="p">(</span><span class="nx">renderPreview</span><span class="p">,</span><span class="w"> </span><span class="mf">300</span><span class="p">),</span>
</span><span id="__span-14-150"><a id="__codelineno-14-150" name="__codelineno-14-150" href="#__codelineno-14-150"></a><span class="w"> </span><span class="p">[</span><span class="nx">renderPreview</span><span class="p">]</span>
</span><span id="__span-14-151"><a id="__codelineno-14-151" name="__codelineno-14-151" href="#__codelineno-14-151"></a><span class="w"> </span><span class="p">);</span>
</span><span id="__span-14-152"><a id="__codelineno-14-152" name="__codelineno-14-152" href="#__codelineno-14-152"></a>
</span><span id="__span-14-153"><a id="__codelineno-14-153" name="__codelineno-14-153" href="#__codelineno-14-153"></a><span class="w"> </span><span class="c1">// Update preview when HTML or sample data changes</span>
</span><span id="__span-14-154"><a id="__codelineno-14-154" name="__codelineno-14-154" href="#__codelineno-14-154"></a><span class="w"> </span><span class="nx">useEffect</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-155"><a id="__codelineno-14-155" name="__codelineno-14-155" href="#__codelineno-14-155"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">showPreview</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-156"><a id="__codelineno-14-156" name="__codelineno-14-156" href="#__codelineno-14-156"></a><span class="w"> </span><span class="nx">debouncedPreview</span><span class="p">(</span><span class="nx">htmlContent</span><span class="p">,</span><span class="w"> </span><span class="nx">sampleData</span><span class="p">);</span>
</span><span id="__span-14-157"><a id="__codelineno-14-157" name="__codelineno-14-157" href="#__codelineno-14-157"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-158"><a id="__codelineno-14-158" name="__codelineno-14-158" href="#__codelineno-14-158"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span><span class="nx">htmlContent</span><span class="p">,</span><span class="w"> </span><span class="nx">sampleData</span><span class="p">,</span><span class="w"> </span><span class="nx">showPreview</span><span class="p">,</span><span class="w"> </span><span class="nx">debouncedPreview</span><span class="p">]);</span>
</span><span id="__span-14-159"><a id="__codelineno-14-159" name="__codelineno-14-159" href="#__codelineno-14-159"></a>
</span><span id="__span-14-160"><a id="__codelineno-14-160" name="__codelineno-14-160" href="#__codelineno-14-160"></a><span class="w"> </span><span class="c1">// Variable insertion</span>
</span><span id="__span-14-161"><a id="__codelineno-14-161" name="__codelineno-14-161" href="#__codelineno-14-161"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">handleInsertVariable</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">variableKey</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">editorType</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;text&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-162"><a id="__codelineno-14-162" name="__codelineno-14-162" href="#__codelineno-14-162"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">textarea</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">editorType</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nx">htmlEditorRef.current</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kt">textEditorRef.current</span><span class="p">;</span>
</span><span id="__span-14-163"><a id="__codelineno-14-163" name="__codelineno-14-163" href="#__codelineno-14-163"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">textarea</span><span class="p">)</span><span class="w"> </span><span class="k">return</span><span class="p">;</span>
</span><span id="__span-14-164"><a id="__codelineno-14-164" name="__codelineno-14-164" href="#__codelineno-14-164"></a>
</span><span id="__span-14-165"><a id="__codelineno-14-165" name="__codelineno-14-165" href="#__codelineno-14-165"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">start</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionStart</span><span class="p">;</span>
</span><span id="__span-14-166"><a id="__codelineno-14-166" name="__codelineno-14-166" href="#__codelineno-14-166"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">end</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionEnd</span><span class="p">;</span>
</span><span id="__span-14-167"><a id="__codelineno-14-167" name="__codelineno-14-167" href="#__codelineno-14-167"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">content</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">editorType</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nx">htmlContent</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kt">textContent</span><span class="p">;</span>
</span><span id="__span-14-168"><a id="__codelineno-14-168" name="__codelineno-14-168" href="#__codelineno-14-168"></a>
</span><span id="__span-14-169"><a id="__codelineno-14-169" name="__codelineno-14-169" href="#__codelineno-14-169"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">before</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">content</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span><span class="w"> </span><span class="nx">start</span><span class="p">);</span>
</span><span id="__span-14-170"><a id="__codelineno-14-170" name="__codelineno-14-170" href="#__codelineno-14-170"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">after</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">content</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="nx">end</span><span class="p">);</span>
</span><span id="__span-14-171"><a id="__codelineno-14-171" name="__codelineno-14-171" href="#__codelineno-14-171"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">variable</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="sb">`{{</span><span class="si">${</span><span class="nx">variableKey</span><span class="si">}</span><span class="sb">}}`</span><span class="p">;</span>
</span><span id="__span-14-172"><a id="__codelineno-14-172" name="__codelineno-14-172" href="#__codelineno-14-172"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">newContent</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">before</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">variable</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">after</span><span class="p">;</span>
</span><span id="__span-14-173"><a id="__codelineno-14-173" name="__codelineno-14-173" href="#__codelineno-14-173"></a>
</span><span id="__span-14-174"><a id="__codelineno-14-174" name="__codelineno-14-174" href="#__codelineno-14-174"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">editorType</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-175"><a id="__codelineno-14-175" name="__codelineno-14-175" href="#__codelineno-14-175"></a><span class="w"> </span><span class="nx">setHtmlContent</span><span class="p">(</span><span class="nx">newContent</span><span class="p">);</span>
</span><span id="__span-14-176"><a id="__codelineno-14-176" name="__codelineno-14-176" href="#__codelineno-14-176"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">else</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-177"><a id="__codelineno-14-177" name="__codelineno-14-177" href="#__codelineno-14-177"></a><span class="w"> </span><span class="nx">setTextContent</span><span class="p">(</span><span class="nx">newContent</span><span class="p">);</span>
</span><span id="__span-14-178"><a id="__codelineno-14-178" name="__codelineno-14-178" href="#__codelineno-14-178"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-179"><a id="__codelineno-14-179" name="__codelineno-14-179" href="#__codelineno-14-179"></a>
</span><span id="__span-14-180"><a id="__codelineno-14-180" name="__codelineno-14-180" href="#__codelineno-14-180"></a><span class="w"> </span><span class="nx">setTimeout</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-181"><a id="__codelineno-14-181" name="__codelineno-14-181" href="#__codelineno-14-181"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">newPos</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">start</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">variable</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span>
</span><span id="__span-14-182"><a id="__codelineno-14-182" name="__codelineno-14-182" href="#__codelineno-14-182"></a><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionStart</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">newPos</span><span class="p">;</span>
</span><span id="__span-14-183"><a id="__codelineno-14-183" name="__codelineno-14-183" href="#__codelineno-14-183"></a><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">selectionEnd</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">newPos</span><span class="p">;</span>
</span><span id="__span-14-184"><a id="__codelineno-14-184" name="__codelineno-14-184" href="#__codelineno-14-184"></a><span class="w"> </span><span class="nx">textarea</span><span class="p">.</span><span class="nx">focus</span><span class="p">();</span>
</span><span id="__span-14-185"><a id="__codelineno-14-185" name="__codelineno-14-185" href="#__codelineno-14-185"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="mf">0</span><span class="p">);</span>
</span><span id="__span-14-186"><a id="__codelineno-14-186" name="__codelineno-14-186" href="#__codelineno-14-186"></a><span class="w"> </span><span class="p">};</span>
</span><span id="__span-14-187"><a id="__codelineno-14-187" name="__codelineno-14-187" href="#__codelineno-14-187"></a>
</span><span id="__span-14-188"><a id="__codelineno-14-188" name="__codelineno-14-188" href="#__codelineno-14-188"></a><span class="w"> </span><span class="c1">// Save template</span>
</span><span id="__span-14-189"><a id="__codelineno-14-189" name="__codelineno-14-189" href="#__codelineno-14-189"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">handleSave</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-190"><a id="__codelineno-14-190" name="__codelineno-14-190" href="#__codelineno-14-190"></a><span class="w"> </span><span class="nx">setSaving</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span id="__span-14-191"><a id="__codelineno-14-191" name="__codelineno-14-191" href="#__codelineno-14-191"></a><span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-192"><a id="__codelineno-14-192" name="__codelineno-14-192" href="#__codelineno-14-192"></a><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">api</span><span class="p">.</span><span class="nx">put</span><span class="p">(</span><span class="sb">`/api/email-templates/</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-193"><a id="__codelineno-14-193" name="__codelineno-14-193" href="#__codelineno-14-193"></a><span class="w"> </span><span class="nx">subjectLine</span><span class="p">,</span>
</span><span id="__span-14-194"><a id="__codelineno-14-194" name="__codelineno-14-194" href="#__codelineno-14-194"></a><span class="w"> </span><span class="nx">htmlContent</span><span class="p">,</span>
</span><span id="__span-14-195"><a id="__codelineno-14-195" name="__codelineno-14-195" href="#__codelineno-14-195"></a><span class="w"> </span><span class="nx">textContent</span><span class="p">,</span>
</span><span id="__span-14-196"><a id="__codelineno-14-196" name="__codelineno-14-196" href="#__codelineno-14-196"></a><span class="w"> </span><span class="nx">changeNotes</span><span class="o">:</span><span class="w"> </span><span class="kt">changeNotes</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="kc">undefined</span><span class="p">,</span>
</span><span id="__span-14-197"><a id="__codelineno-14-197" name="__codelineno-14-197" href="#__codelineno-14-197"></a><span class="w"> </span><span class="p">});</span>
</span><span id="__span-14-198"><a id="__codelineno-14-198" name="__codelineno-14-198" href="#__codelineno-14-198"></a>
</span><span id="__span-14-199"><a id="__codelineno-14-199" name="__codelineno-14-199" href="#__codelineno-14-199"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="s1">&#39;Template saved successfully&#39;</span><span class="p">);</span>
</span><span id="__span-14-200"><a id="__codelineno-14-200" name="__codelineno-14-200" href="#__codelineno-14-200"></a><span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">removeItem</span><span class="p">(</span><span class="sb">`email-template-draft-</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
</span><span id="__span-14-201"><a id="__codelineno-14-201" name="__codelineno-14-201" href="#__codelineno-14-201"></a><span class="w"> </span><span class="nx">navigate</span><span class="p">(</span><span class="s1">&#39;/app/email-templates&#39;</span><span class="p">);</span>
</span><span id="__span-14-202"><a id="__codelineno-14-202" name="__codelineno-14-202" href="#__codelineno-14-202"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-203"><a id="__codelineno-14-203" name="__codelineno-14-203" href="#__codelineno-14-203"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Failed to save template&#39;</span><span class="p">);</span>
</span><span id="__span-14-204"><a id="__codelineno-14-204" name="__codelineno-14-204" href="#__codelineno-14-204"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">finally</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-205"><a id="__codelineno-14-205" name="__codelineno-14-205" href="#__codelineno-14-205"></a><span class="w"> </span><span class="nx">setSaving</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-14-206"><a id="__codelineno-14-206" name="__codelineno-14-206" href="#__codelineno-14-206"></a><span class="w"> </span><span class="nx">setSaveModalVisible</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-14-207"><a id="__codelineno-14-207" name="__codelineno-14-207" href="#__codelineno-14-207"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-208"><a id="__codelineno-14-208" name="__codelineno-14-208" href="#__codelineno-14-208"></a><span class="w"> </span><span class="p">};</span>
</span><span id="__span-14-209"><a id="__codelineno-14-209" name="__codelineno-14-209" href="#__codelineno-14-209"></a>
</span><span id="__span-14-210"><a id="__codelineno-14-210" name="__codelineno-14-210" href="#__codelineno-14-210"></a><span class="w"> </span><span class="c1">// Test send</span>
</span><span id="__span-14-211"><a id="__codelineno-14-211" name="__codelineno-14-211" href="#__codelineno-14-211"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">handleTestSend</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">async</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-212"><a id="__codelineno-14-212" name="__codelineno-14-212" href="#__codelineno-14-212"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">testRecipient</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-213"><a id="__codelineno-14-213" name="__codelineno-14-213" href="#__codelineno-14-213"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Please enter recipient email&#39;</span><span class="p">);</span>
</span><span id="__span-14-214"><a id="__codelineno-14-214" name="__codelineno-14-214" href="#__codelineno-14-214"></a><span class="w"> </span><span class="k">return</span><span class="p">;</span>
</span><span id="__span-14-215"><a id="__codelineno-14-215" name="__codelineno-14-215" href="#__codelineno-14-215"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-216"><a id="__codelineno-14-216" name="__codelineno-14-216" href="#__codelineno-14-216"></a>
</span><span id="__span-14-217"><a id="__codelineno-14-217" name="__codelineno-14-217" href="#__codelineno-14-217"></a><span class="w"> </span><span class="nx">setTestSending</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span id="__span-14-218"><a id="__codelineno-14-218" name="__codelineno-14-218" href="#__codelineno-14-218"></a><span class="w"> </span><span class="k">try</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-219"><a id="__codelineno-14-219" name="__codelineno-14-219" href="#__codelineno-14-219"></a><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">api</span><span class="p">.</span><span class="nx">post</span><span class="p">(</span><span class="sb">`/api/email-templates/</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">/test`</span><span class="p">,</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-220"><a id="__codelineno-14-220" name="__codelineno-14-220" href="#__codelineno-14-220"></a><span class="w"> </span><span class="nx">recipientEmail</span><span class="o">:</span><span class="w"> </span><span class="kt">testRecipient</span><span class="p">,</span>
</span><span id="__span-14-221"><a id="__codelineno-14-221" name="__codelineno-14-221" href="#__codelineno-14-221"></a><span class="w"> </span><span class="nx">testData</span><span class="o">:</span><span class="w"> </span><span class="kt">sampleData</span><span class="p">,</span>
</span><span id="__span-14-222"><a id="__codelineno-14-222" name="__codelineno-14-222" href="#__codelineno-14-222"></a><span class="w"> </span><span class="p">});</span>
</span><span id="__span-14-223"><a id="__codelineno-14-223" name="__codelineno-14-223" href="#__codelineno-14-223"></a>
</span><span id="__span-14-224"><a id="__codelineno-14-224" name="__codelineno-14-224" href="#__codelineno-14-224"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">success</span><span class="p">(</span><span class="s1">&#39;Test email sent successfully&#39;</span><span class="p">);</span>
</span><span id="__span-14-225"><a id="__codelineno-14-225" name="__codelineno-14-225" href="#__codelineno-14-225"></a><span class="w"> </span><span class="nx">setTestModalVisible</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-14-226"><a id="__codelineno-14-226" name="__codelineno-14-226" href="#__codelineno-14-226"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-227"><a id="__codelineno-14-227" name="__codelineno-14-227" href="#__codelineno-14-227"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Failed to send test email&#39;</span><span class="p">);</span>
</span><span id="__span-14-228"><a id="__codelineno-14-228" name="__codelineno-14-228" href="#__codelineno-14-228"></a><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="k">finally</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-229"><a id="__codelineno-14-229" name="__codelineno-14-229" href="#__codelineno-14-229"></a><span class="w"> </span><span class="nx">setTestSending</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-14-230"><a id="__codelineno-14-230" name="__codelineno-14-230" href="#__codelineno-14-230"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-231"><a id="__codelineno-14-231" name="__codelineno-14-231" href="#__codelineno-14-231"></a><span class="w"> </span><span class="p">};</span>
</span><span id="__span-14-232"><a id="__codelineno-14-232" name="__codelineno-14-232" href="#__codelineno-14-232"></a>
</span><span id="__span-14-233"><a id="__codelineno-14-233" name="__codelineno-14-233" href="#__codelineno-14-233"></a><span class="w"> </span><span class="c1">// Keyboard shortcuts</span>
</span><span id="__span-14-234"><a id="__codelineno-14-234" name="__codelineno-14-234" href="#__codelineno-14-234"></a><span class="w"> </span><span class="nx">useEffect</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-235"><a id="__codelineno-14-235" name="__codelineno-14-235" href="#__codelineno-14-235"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">handleKeyDown</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="o">:</span><span class="w"> </span><span class="kt">KeyboardEvent</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-236"><a id="__codelineno-14-236" name="__codelineno-14-236" href="#__codelineno-14-236"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">((</span><span class="nx">e</span><span class="p">.</span><span class="nx">ctrlKey</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">metaKey</span><span class="p">)</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;s&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-237"><a id="__codelineno-14-237" name="__codelineno-14-237" href="#__codelineno-14-237"></a><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
</span><span id="__span-14-238"><a id="__codelineno-14-238" name="__codelineno-14-238" href="#__codelineno-14-238"></a><span class="w"> </span><span class="nx">setSaveModalVisible</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span id="__span-14-239"><a id="__codelineno-14-239" name="__codelineno-14-239" href="#__codelineno-14-239"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-240"><a id="__codelineno-14-240" name="__codelineno-14-240" href="#__codelineno-14-240"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">((</span><span class="nx">e</span><span class="p">.</span><span class="nx">ctrlKey</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">metaKey</span><span class="p">)</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;p&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-241"><a id="__codelineno-14-241" name="__codelineno-14-241" href="#__codelineno-14-241"></a><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
</span><span id="__span-14-242"><a id="__codelineno-14-242" name="__codelineno-14-242" href="#__codelineno-14-242"></a><span class="w"> </span><span class="nx">setShowPreview</span><span class="p">(</span><span class="o">!</span><span class="nx">showPreview</span><span class="p">);</span>
</span><span id="__span-14-243"><a id="__codelineno-14-243" name="__codelineno-14-243" href="#__codelineno-14-243"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-244"><a id="__codelineno-14-244" name="__codelineno-14-244" href="#__codelineno-14-244"></a><span class="w"> </span><span class="p">};</span>
</span><span id="__span-14-245"><a id="__codelineno-14-245" name="__codelineno-14-245" href="#__codelineno-14-245"></a>
</span><span id="__span-14-246"><a id="__codelineno-14-246" name="__codelineno-14-246" href="#__codelineno-14-246"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">handleKeyDown</span><span class="p">);</span>
</span><span id="__span-14-247"><a id="__codelineno-14-247" name="__codelineno-14-247" href="#__codelineno-14-247"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">handleKeyDown</span><span class="p">);</span>
</span><span id="__span-14-248"><a id="__codelineno-14-248" name="__codelineno-14-248" href="#__codelineno-14-248"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="p">[</span><span class="nx">showPreview</span><span class="p">]);</span>
</span><span id="__span-14-249"><a id="__codelineno-14-249" name="__codelineno-14-249" href="#__codelineno-14-249"></a>
</span><span id="__span-14-250"><a id="__codelineno-14-250" name="__codelineno-14-250" href="#__codelineno-14-250"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">loading</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-14-251"><a id="__codelineno-14-251" name="__codelineno-14-251" href="#__codelineno-14-251"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">padding</span><span class="o">:</span><span class="w"> </span><span class="kt">24</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span><span class="nx">Loading</span><span class="p">...</span><span class="o">&lt;</span><span class="err">/div&gt;;</span>
</span><span id="__span-14-252"><a id="__codelineno-14-252" name="__codelineno-14-252" href="#__codelineno-14-252"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-14-253"><a id="__codelineno-14-253" name="__codelineno-14-253" href="#__codelineno-14-253"></a>
</span><span id="__span-14-254"><a id="__codelineno-14-254" name="__codelineno-14-254" href="#__codelineno-14-254"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-14-255"><a id="__codelineno-14-255" name="__codelineno-14-255" href="#__codelineno-14-255"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;100vh&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;flex&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">flexDirection</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;column&#39;</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-14-256"><a id="__codelineno-14-256" name="__codelineno-14-256" href="#__codelineno-14-256"></a><span class="w"> </span><span class="p">{</span><span class="cm">/* Toolbar */</span><span class="p">}</span>
</span><span id="__span-14-257"><a id="__codelineno-14-257" name="__codelineno-14-257" href="#__codelineno-14-257"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span>
</span><span id="__span-14-258"><a id="__codelineno-14-258" name="__codelineno-14-258" href="#__codelineno-14-258"></a><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span>
</span><span id="__span-14-259"><a id="__codelineno-14-259" name="__codelineno-14-259" href="#__codelineno-14-259"></a><span class="w"> </span><span class="nx">padding</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;12px 24px&#39;</span><span class="p">,</span>
</span><span id="__span-14-260"><a id="__codelineno-14-260" name="__codelineno-14-260" href="#__codelineno-14-260"></a><span class="w"> </span><span class="nx">borderBottom</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;1px solid #f0f0f0&#39;</span><span class="p">,</span>
</span><span id="__span-14-261"><a id="__codelineno-14-261" name="__codelineno-14-261" href="#__codelineno-14-261"></a><span class="w"> </span><span class="nx">display</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;flex&#39;</span><span class="p">,</span>
</span><span id="__span-14-262"><a id="__codelineno-14-262" name="__codelineno-14-262" href="#__codelineno-14-262"></a><span class="w"> </span><span class="nx">justifyContent</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;space-between&#39;</span><span class="p">,</span>
</span><span id="__span-14-263"><a id="__codelineno-14-263" name="__codelineno-14-263" href="#__codelineno-14-263"></a><span class="w"> </span><span class="nx">alignItems</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;center&#39;</span><span class="p">,</span>
</span><span id="__span-14-264"><a id="__codelineno-14-264" name="__codelineno-14-264" href="#__codelineno-14-264"></a><span class="w"> </span><span class="p">}}</span>
</span><span id="__span-14-265"><a id="__codelineno-14-265" name="__codelineno-14-265" href="#__codelineno-14-265"></a><span class="w"> </span><span class="o">&gt;</span>
</span><span id="__span-14-266"><a id="__codelineno-14-266" name="__codelineno-14-266" href="#__codelineno-14-266"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="o">&gt;</span>
</span><span id="__span-14-267"><a id="__codelineno-14-267" name="__codelineno-14-267" href="#__codelineno-14-267"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Button</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="p">{</span><span class="o">&lt;</span><span class="nx">ArrowLeftOutlined</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">}</span><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">navigate</span><span class="p">(</span><span class="s1">&#39;/app/email-templates&#39;</span><span class="p">)}</span><span class="o">&gt;</span>
</span><span id="__span-14-268"><a id="__codelineno-14-268" name="__codelineno-14-268" href="#__codelineno-14-268"></a><span class="w"> </span><span class="nx">Back</span>
</span><span id="__span-14-269"><a id="__codelineno-14-269" name="__codelineno-14-269" href="#__codelineno-14-269"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Button&gt;</span>
</span><span id="__span-14-270"><a id="__codelineno-14-270" name="__codelineno-14-270" href="#__codelineno-14-270"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Title</span><span class="w"> </span><span class="nx">level</span><span class="o">=</span><span class="p">{</span><span class="mf">4</span><span class="p">}</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">margin</span><span class="o">:</span><span class="w"> </span><span class="kt">0</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-14-271"><a id="__codelineno-14-271" name="__codelineno-14-271" href="#__codelineno-14-271"></a><span class="w"> </span><span class="p">{</span><span class="nx">template</span><span class="o">?</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span>
</span><span id="__span-14-272"><a id="__codelineno-14-272" name="__codelineno-14-272" href="#__codelineno-14-272"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Title&gt;</span>
</span><span id="__span-14-273"><a id="__codelineno-14-273" name="__codelineno-14-273" href="#__codelineno-14-273"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-14-274"><a id="__codelineno-14-274" name="__codelineno-14-274" href="#__codelineno-14-274"></a>
</span><span id="__span-14-275"><a id="__codelineno-14-275" name="__codelineno-14-275" href="#__codelineno-14-275"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="o">&gt;</span>
</span><span id="__span-14-276"><a id="__codelineno-14-276" name="__codelineno-14-276" href="#__codelineno-14-276"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Button</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="p">{</span><span class="o">&lt;</span><span class="nx">EyeOutlined</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">}</span><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setShowPreview</span><span class="p">(</span><span class="o">!</span><span class="nx">showPreview</span><span class="p">)}</span><span class="o">&gt;</span>
</span><span id="__span-14-277"><a id="__codelineno-14-277" name="__codelineno-14-277" href="#__codelineno-14-277"></a><span class="w"> </span><span class="p">{</span><span class="nx">showPreview</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="s1">&#39;Hide&#39;</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;Show&#39;</span><span class="p">}</span><span class="w"> </span><span class="nx">Preview</span>
</span><span id="__span-14-278"><a id="__codelineno-14-278" name="__codelineno-14-278" href="#__codelineno-14-278"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Button&gt;</span>
</span><span id="__span-14-279"><a id="__codelineno-14-279" name="__codelineno-14-279" href="#__codelineno-14-279"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Button</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="p">{</span><span class="o">&lt;</span><span class="nx">SendOutlined</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">}</span><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setTestModalVisible</span><span class="p">(</span><span class="kc">true</span><span class="p">)}</span><span class="o">&gt;</span>
</span><span id="__span-14-280"><a id="__codelineno-14-280" name="__codelineno-14-280" href="#__codelineno-14-280"></a><span class="w"> </span><span class="nx">Send</span><span class="w"> </span><span class="nx">Test</span>
</span><span id="__span-14-281"><a id="__codelineno-14-281" name="__codelineno-14-281" href="#__codelineno-14-281"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Button&gt;</span>
</span><span id="__span-14-282"><a id="__codelineno-14-282" name="__codelineno-14-282" href="#__codelineno-14-282"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Button</span><span class="w"> </span><span class="kr">type</span><span class="o">=</span><span class="s2">&quot;primary&quot;</span><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="p">{</span><span class="o">&lt;</span><span class="nx">SaveOutlined</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">}</span><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setSaveModalVisible</span><span class="p">(</span><span class="kc">true</span><span class="p">)}</span><span class="o">&gt;</span>
</span><span id="__span-14-283"><a id="__codelineno-14-283" name="__codelineno-14-283" href="#__codelineno-14-283"></a><span class="w"> </span><span class="nx">Save</span>
</span><span id="__span-14-284"><a id="__codelineno-14-284" name="__codelineno-14-284" href="#__codelineno-14-284"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Button&gt;</span>
</span><span id="__span-14-285"><a id="__codelineno-14-285" name="__codelineno-14-285" href="#__codelineno-14-285"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-14-286"><a id="__codelineno-14-286" name="__codelineno-14-286" href="#__codelineno-14-286"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</span><span id="__span-14-287"><a id="__codelineno-14-287" name="__codelineno-14-287" href="#__codelineno-14-287"></a>
</span><span id="__span-14-288"><a id="__codelineno-14-288" name="__codelineno-14-288" href="#__codelineno-14-288"></a><span class="w"> </span><span class="p">{</span><span class="cm">/* Editor Area */</span><span class="p">}</span>
</span><span id="__span-14-289"><a id="__codelineno-14-289" name="__codelineno-14-289" href="#__codelineno-14-289"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">flex</span><span class="o">:</span><span class="w"> </span><span class="kt">1</span><span class="p">,</span><span class="w"> </span><span class="nx">display</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;flex&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">overflow</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;hidden&#39;</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-14-290"><a id="__codelineno-14-290" name="__codelineno-14-290" href="#__codelineno-14-290"></a><span class="w"> </span><span class="p">{</span><span class="cm">/* Left: Editors */</span><span class="p">}</span>
</span><span id="__span-14-291"><a id="__codelineno-14-291" name="__codelineno-14-291" href="#__codelineno-14-291"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span>
</span><span id="__span-14-292"><a id="__codelineno-14-292" name="__codelineno-14-292" href="#__codelineno-14-292"></a><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span>
</span><span id="__span-14-293"><a id="__codelineno-14-293" name="__codelineno-14-293" href="#__codelineno-14-293"></a><span class="w"> </span><span class="nx">flex</span><span class="o">:</span><span class="w"> </span><span class="kt">showPreview</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nx">1</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kt">2</span><span class="p">,</span>
</span><span id="__span-14-294"><a id="__codelineno-14-294" name="__codelineno-14-294" href="#__codelineno-14-294"></a><span class="w"> </span><span class="nx">padding</span><span class="o">:</span><span class="w"> </span><span class="kt">24</span><span class="p">,</span>
</span><span id="__span-14-295"><a id="__codelineno-14-295" name="__codelineno-14-295" href="#__codelineno-14-295"></a><span class="w"> </span><span class="nx">overflowY</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;auto&#39;</span><span class="p">,</span>
</span><span id="__span-14-296"><a id="__codelineno-14-296" name="__codelineno-14-296" href="#__codelineno-14-296"></a><span class="w"> </span><span class="nx">borderRight</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;1px solid #f0f0f0&#39;</span><span class="p">,</span>
</span><span id="__span-14-297"><a id="__codelineno-14-297" name="__codelineno-14-297" href="#__codelineno-14-297"></a><span class="w"> </span><span class="p">}}</span>
</span><span id="__span-14-298"><a id="__codelineno-14-298" name="__codelineno-14-298" href="#__codelineno-14-298"></a><span class="w"> </span><span class="o">&gt;</span>
</span><span id="__span-14-299"><a id="__codelineno-14-299" name="__codelineno-14-299" href="#__codelineno-14-299"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="w"> </span><span class="nx">direction</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;100%&#39;</span><span class="w"> </span><span class="p">}}</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;large&quot;</span><span class="o">&gt;</span>
</span><span id="__span-14-300"><a id="__codelineno-14-300" name="__codelineno-14-300" href="#__codelineno-14-300"></a><span class="w"> </span><span class="p">{</span><span class="cm">/* Subject Line */</span><span class="p">}</span>
</span><span id="__span-14-301"><a id="__codelineno-14-301" name="__codelineno-14-301" href="#__codelineno-14-301"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
</span><span id="__span-14-302"><a id="__codelineno-14-302" name="__codelineno-14-302" href="#__codelineno-14-302"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Text</span><span class="w"> </span><span class="nx">strong</span><span class="o">&gt;</span><span class="nx">Subject</span><span class="w"> </span><span class="nx">Line</span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
</span><span id="__span-14-303"><a id="__codelineno-14-303" name="__codelineno-14-303" href="#__codelineno-14-303"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Input</span>
</span><span id="__span-14-304"><a id="__codelineno-14-304" name="__codelineno-14-304" href="#__codelineno-14-304"></a><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">subjectLine</span><span class="p">}</span>
</span><span id="__span-14-305"><a id="__codelineno-14-305" name="__codelineno-14-305" href="#__codelineno-14-305"></a><span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setSubjectLine</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span>
</span><span id="__span-14-306"><a id="__codelineno-14-306" name="__codelineno-14-306" href="#__codelineno-14-306"></a><span class="w"> </span><span class="nx">placeholder</span><span class="o">=</span><span class="s2">&quot;Enter subject line with {{VARIABLES}}&quot;</span>
</span><span id="__span-14-307"><a id="__codelineno-14-307" name="__codelineno-14-307" href="#__codelineno-14-307"></a><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-14-308"><a id="__codelineno-14-308" name="__codelineno-14-308" href="#__codelineno-14-308"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</span><span id="__span-14-309"><a id="__codelineno-14-309" name="__codelineno-14-309" href="#__codelineno-14-309"></a>
</span><span id="__span-14-310"><a id="__codelineno-14-310" name="__codelineno-14-310" href="#__codelineno-14-310"></a><span class="w"> </span><span class="p">{</span><span class="cm">/* HTML Editor */</span><span class="p">}</span>
</span><span id="__span-14-311"><a id="__codelineno-14-311" name="__codelineno-14-311" href="#__codelineno-14-311"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
</span><span id="__span-14-312"><a id="__codelineno-14-312" name="__codelineno-14-312" href="#__codelineno-14-312"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Text</span><span class="w"> </span><span class="nx">strong</span><span class="o">&gt;</span><span class="nx">HTML</span><span class="w"> </span><span class="nx">Content</span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
</span><span id="__span-14-313"><a id="__codelineno-14-313" name="__codelineno-14-313" href="#__codelineno-14-313"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">TextArea</span>
</span><span id="__span-14-314"><a id="__codelineno-14-314" name="__codelineno-14-314" href="#__codelineno-14-314"></a><span class="w"> </span><span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">htmlEditorRef</span><span class="p">}</span>
</span><span id="__span-14-315"><a id="__codelineno-14-315" name="__codelineno-14-315" href="#__codelineno-14-315"></a><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">htmlContent</span><span class="p">}</span>
</span><span id="__span-14-316"><a id="__codelineno-14-316" name="__codelineno-14-316" href="#__codelineno-14-316"></a><span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setHtmlContent</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span>
</span><span id="__span-14-317"><a id="__codelineno-14-317" name="__codelineno-14-317" href="#__codelineno-14-317"></a><span class="w"> </span><span class="nx">placeholder</span><span class="o">=</span><span class="s2">&quot;Enter HTML content with {{VARIABLES}}&quot;</span>
</span><span id="__span-14-318"><a id="__codelineno-14-318" name="__codelineno-14-318" href="#__codelineno-14-318"></a><span class="w"> </span><span class="nx">rows</span><span class="o">=</span><span class="p">{</span><span class="mf">20</span><span class="p">}</span>
</span><span id="__span-14-319"><a id="__codelineno-14-319" name="__codelineno-14-319" href="#__codelineno-14-319"></a><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">fontFamily</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;monospace&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">fontSize</span><span class="o">:</span><span class="w"> </span><span class="kt">13</span><span class="w"> </span><span class="p">}}</span>
</span><span id="__span-14-320"><a id="__codelineno-14-320" name="__codelineno-14-320" href="#__codelineno-14-320"></a><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-14-321"><a id="__codelineno-14-321" name="__codelineno-14-321" href="#__codelineno-14-321"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</span><span id="__span-14-322"><a id="__codelineno-14-322" name="__codelineno-14-322" href="#__codelineno-14-322"></a>
</span><span id="__span-14-323"><a id="__codelineno-14-323" name="__codelineno-14-323" href="#__codelineno-14-323"></a><span class="w"> </span><span class="p">{</span><span class="cm">/* Text Editor */</span><span class="p">}</span>
</span><span id="__span-14-324"><a id="__codelineno-14-324" name="__codelineno-14-324" href="#__codelineno-14-324"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span>
</span><span id="__span-14-325"><a id="__codelineno-14-325" name="__codelineno-14-325" href="#__codelineno-14-325"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Text</span><span class="w"> </span><span class="nx">strong</span><span class="o">&gt;</span><span class="nx">Plain</span><span class="w"> </span><span class="nx">Text</span><span class="w"> </span><span class="nx">Content</span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
</span><span id="__span-14-326"><a id="__codelineno-14-326" name="__codelineno-14-326" href="#__codelineno-14-326"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">TextArea</span>
</span><span id="__span-14-327"><a id="__codelineno-14-327" name="__codelineno-14-327" href="#__codelineno-14-327"></a><span class="w"> </span><span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">textEditorRef</span><span class="p">}</span>
</span><span id="__span-14-328"><a id="__codelineno-14-328" name="__codelineno-14-328" href="#__codelineno-14-328"></a><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">textContent</span><span class="p">}</span>
</span><span id="__span-14-329"><a id="__codelineno-14-329" name="__codelineno-14-329" href="#__codelineno-14-329"></a><span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setTextContent</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span>
</span><span id="__span-14-330"><a id="__codelineno-14-330" name="__codelineno-14-330" href="#__codelineno-14-330"></a><span class="w"> </span><span class="nx">placeholder</span><span class="o">=</span><span class="s2">&quot;Enter plain text version&quot;</span>
</span><span id="__span-14-331"><a id="__codelineno-14-331" name="__codelineno-14-331" href="#__codelineno-14-331"></a><span class="w"> </span><span class="nx">rows</span><span class="o">=</span><span class="p">{</span><span class="mf">15</span><span class="p">}</span>
</span><span id="__span-14-332"><a id="__codelineno-14-332" name="__codelineno-14-332" href="#__codelineno-14-332"></a><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">fontFamily</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;monospace&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">fontSize</span><span class="o">:</span><span class="w"> </span><span class="kt">13</span><span class="w"> </span><span class="p">}}</span>
</span><span id="__span-14-333"><a id="__codelineno-14-333" name="__codelineno-14-333" href="#__codelineno-14-333"></a><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-14-334"><a id="__codelineno-14-334" name="__codelineno-14-334" href="#__codelineno-14-334"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</span><span id="__span-14-335"><a id="__codelineno-14-335" name="__codelineno-14-335" href="#__codelineno-14-335"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-14-336"><a id="__codelineno-14-336" name="__codelineno-14-336" href="#__codelineno-14-336"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</span><span id="__span-14-337"><a id="__codelineno-14-337" name="__codelineno-14-337" href="#__codelineno-14-337"></a>
</span><span id="__span-14-338"><a id="__codelineno-14-338" name="__codelineno-14-338" href="#__codelineno-14-338"></a><span class="w"> </span><span class="p">{</span><span class="cm">/* Right: Preview + Variables */</span><span class="p">}</span>
</span><span id="__span-14-339"><a id="__codelineno-14-339" name="__codelineno-14-339" href="#__codelineno-14-339"></a><span class="w"> </span><span class="p">{</span><span class="nx">showPreview</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-14-340"><a id="__codelineno-14-340" name="__codelineno-14-340" href="#__codelineno-14-340"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">flex</span><span class="o">:</span><span class="w"> </span><span class="kt">1</span><span class="p">,</span><span class="w"> </span><span class="nx">padding</span><span class="o">:</span><span class="w"> </span><span class="kt">24</span><span class="p">,</span><span class="w"> </span><span class="nx">overflowY</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;auto&#39;</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-14-341"><a id="__codelineno-14-341" name="__codelineno-14-341" href="#__codelineno-14-341"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="w"> </span><span class="nx">direction</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;100%&#39;</span><span class="w"> </span><span class="p">}}</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;large&quot;</span><span class="o">&gt;</span>
</span><span id="__span-14-342"><a id="__codelineno-14-342" name="__codelineno-14-342" href="#__codelineno-14-342"></a><span class="w"> </span><span class="p">{</span><span class="cm">/* Variables Panel */</span><span class="p">}</span>
</span><span id="__span-14-343"><a id="__codelineno-14-343" name="__codelineno-14-343" href="#__codelineno-14-343"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Card</span><span class="w"> </span><span class="nx">title</span><span class="o">=</span><span class="s2">&quot;Variables&quot;</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span><span class="o">&gt;</span>
</span><span id="__span-14-344"><a id="__codelineno-14-344" name="__codelineno-14-344" href="#__codelineno-14-344"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="w"> </span><span class="nx">direction</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;100%&#39;</span><span class="w"> </span><span class="p">}}</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span><span class="o">&gt;</span>
</span><span id="__span-14-345"><a id="__codelineno-14-345" name="__codelineno-14-345" href="#__codelineno-14-345"></a><span class="w"> </span><span class="p">{</span><span class="nx">variables</span>
</span><span id="__span-14-346"><a id="__codelineno-14-346" name="__codelineno-14-346" href="#__codelineno-14-346"></a><span class="w"> </span><span class="p">.</span><span class="nx">sort</span><span class="p">((</span><span class="nx">a</span><span class="p">,</span><span class="w"> </span><span class="nx">b</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">a</span><span class="p">.</span><span class="nx">sortOrder</span><span class="w"> </span><span class="o">-</span><span class="w"> </span><span class="nx">b</span><span class="p">.</span><span class="nx">sortOrder</span><span class="p">)</span>
</span><span id="__span-14-347"><a id="__codelineno-14-347" name="__codelineno-14-347" href="#__codelineno-14-347"></a><span class="w"> </span><span class="p">.</span><span class="nx">map</span><span class="p">((</span><span class="nx">variable</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-14-348"><a id="__codelineno-14-348" name="__codelineno-14-348" href="#__codelineno-14-348"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Card</span><span class="w"> </span><span class="nx">key</span><span class="o">=</span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">id</span><span class="p">}</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">marginBottom</span><span class="o">:</span><span class="w"> </span><span class="kt">8</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-14-349"><a id="__codelineno-14-349" name="__codelineno-14-349" href="#__codelineno-14-349"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="w"> </span><span class="nx">direction</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="p">{</span><span class="mf">4</span><span class="p">}</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;100%&#39;</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-14-350"><a id="__codelineno-14-350" name="__codelineno-14-350" href="#__codelineno-14-350"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="o">&gt;</span>
</span><span id="__span-14-351"><a id="__codelineno-14-351" name="__codelineno-14-351" href="#__codelineno-14-351"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Text</span><span class="w"> </span><span class="nx">strong</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">label</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
</span><span id="__span-14-352"><a id="__codelineno-14-352" name="__codelineno-14-352" href="#__codelineno-14-352"></a><span class="w"> </span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">isRequired</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">Tag</span><span class="w"> </span><span class="nx">color</span><span class="o">=</span><span class="s2">&quot;red&quot;</span><span class="o">&gt;</span><span class="nx">Required</span><span class="o">&lt;</span><span class="err">/Tag&gt;}</span>
</span><span id="__span-14-353"><a id="__codelineno-14-353" name="__codelineno-14-353" href="#__codelineno-14-353"></a><span class="w"> </span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">isConditional</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">Tag</span><span class="w"> </span><span class="nx">color</span><span class="o">=</span><span class="s2">&quot;blue&quot;</span><span class="o">&gt;</span><span class="nx">Conditional</span><span class="o">&lt;</span><span class="err">/Tag&gt;}</span>
</span><span id="__span-14-354"><a id="__codelineno-14-354" name="__codelineno-14-354" href="#__codelineno-14-354"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-14-355"><a id="__codelineno-14-355" name="__codelineno-14-355" href="#__codelineno-14-355"></a>
</span><span id="__span-14-356"><a id="__codelineno-14-356" name="__codelineno-14-356" href="#__codelineno-14-356"></a><span class="w"> </span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">description</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-14-357"><a id="__codelineno-14-357" name="__codelineno-14-357" href="#__codelineno-14-357"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Text</span><span class="w"> </span><span class="kr">type</span><span class="o">=</span><span class="s2">&quot;secondary&quot;</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">fontSize</span><span class="o">:</span><span class="w"> </span><span class="kt">12</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-14-358"><a id="__codelineno-14-358" name="__codelineno-14-358" href="#__codelineno-14-358"></a><span class="w"> </span><span class="p">{</span><span class="nx">variable</span><span class="p">.</span><span class="nx">description</span><span class="p">}</span>
</span><span id="__span-14-359"><a id="__codelineno-14-359" name="__codelineno-14-359" href="#__codelineno-14-359"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
</span><span id="__span-14-360"><a id="__codelineno-14-360" name="__codelineno-14-360" href="#__codelineno-14-360"></a><span class="w"> </span><span class="p">)}</span>
</span><span id="__span-14-361"><a id="__codelineno-14-361" name="__codelineno-14-361" href="#__codelineno-14-361"></a>
</span><span id="__span-14-362"><a id="__codelineno-14-362" name="__codelineno-14-362" href="#__codelineno-14-362"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Space</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span><span class="o">&gt;</span>
</span><span id="__span-14-363"><a id="__codelineno-14-363" name="__codelineno-14-363" href="#__codelineno-14-363"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Button</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">handleInsertVariable</span><span class="p">(</span><span class="nx">variable</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="p">)}</span><span class="o">&gt;</span>
</span><span id="__span-14-364"><a id="__codelineno-14-364" name="__codelineno-14-364" href="#__codelineno-14-364"></a><span class="w"> </span><span class="nx">Insert</span><span class="w"> </span><span class="nx">to</span><span class="w"> </span><span class="nx">HTML</span>
</span><span id="__span-14-365"><a id="__codelineno-14-365" name="__codelineno-14-365" href="#__codelineno-14-365"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Button&gt;</span>
</span><span id="__span-14-366"><a id="__codelineno-14-366" name="__codelineno-14-366" href="#__codelineno-14-366"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Button</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">handleInsertVariable</span><span class="p">(</span><span class="nx">variable</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;text&#39;</span><span class="p">)}</span><span class="o">&gt;</span>
</span><span id="__span-14-367"><a id="__codelineno-14-367" name="__codelineno-14-367" href="#__codelineno-14-367"></a><span class="w"> </span><span class="nx">Insert</span><span class="w"> </span><span class="nx">to</span><span class="w"> </span><span class="nx">Text</span>
</span><span id="__span-14-368"><a id="__codelineno-14-368" name="__codelineno-14-368" href="#__codelineno-14-368"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Button&gt;</span>
</span><span id="__span-14-369"><a id="__codelineno-14-369" name="__codelineno-14-369" href="#__codelineno-14-369"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-14-370"><a id="__codelineno-14-370" name="__codelineno-14-370" href="#__codelineno-14-370"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-14-371"><a id="__codelineno-14-371" name="__codelineno-14-371" href="#__codelineno-14-371"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Card&gt;</span>
</span><span id="__span-14-372"><a id="__codelineno-14-372" name="__codelineno-14-372" href="#__codelineno-14-372"></a><span class="w"> </span><span class="p">))}</span>
</span><span id="__span-14-373"><a id="__codelineno-14-373" name="__codelineno-14-373" href="#__codelineno-14-373"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-14-374"><a id="__codelineno-14-374" name="__codelineno-14-374" href="#__codelineno-14-374"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Card&gt;</span>
</span><span id="__span-14-375"><a id="__codelineno-14-375" name="__codelineno-14-375" href="#__codelineno-14-375"></a>
</span><span id="__span-14-376"><a id="__codelineno-14-376" name="__codelineno-14-376" href="#__codelineno-14-376"></a><span class="w"> </span><span class="p">{</span><span class="cm">/* Preview */</span><span class="p">}</span>
</span><span id="__span-14-377"><a id="__codelineno-14-377" name="__codelineno-14-377" href="#__codelineno-14-377"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Card</span><span class="w"> </span><span class="nx">title</span><span class="o">=</span><span class="s2">&quot;Live Preview&quot;</span><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span><span class="o">&gt;</span>
</span><span id="__span-14-378"><a id="__codelineno-14-378" name="__codelineno-14-378" href="#__codelineno-14-378"></a><span class="w"> </span><span class="p">{</span><span class="nx">previewError</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="p">(</span>
</span><span id="__span-14-379"><a id="__codelineno-14-379" name="__codelineno-14-379" href="#__codelineno-14-379"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">color</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;red&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">marginBottom</span><span class="o">:</span><span class="w"> </span><span class="kt">12</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-14-380"><a id="__codelineno-14-380" name="__codelineno-14-380" href="#__codelineno-14-380"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Text</span><span class="w"> </span><span class="nx">strong</span><span class="o">&gt;</span><span class="ne">Error</span><span class="o">:&lt;</span><span class="err">/Text&gt; {previewError}</span>
</span><span id="__span-14-381"><a id="__codelineno-14-381" name="__codelineno-14-381" href="#__codelineno-14-381"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</span><span id="__span-14-382"><a id="__codelineno-14-382" name="__codelineno-14-382" href="#__codelineno-14-382"></a><span class="w"> </span><span class="p">)}</span>
</span><span id="__span-14-383"><a id="__codelineno-14-383" name="__codelineno-14-383" href="#__codelineno-14-383"></a>
</span><span id="__span-14-384"><a id="__codelineno-14-384" name="__codelineno-14-384" href="#__codelineno-14-384"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">iframe</span>
</span><span id="__span-14-385"><a id="__codelineno-14-385" name="__codelineno-14-385" href="#__codelineno-14-385"></a><span class="w"> </span><span class="nx">ref</span><span class="o">=</span><span class="p">{</span><span class="nx">previewRef</span><span class="p">}</span>
</span><span id="__span-14-386"><a id="__codelineno-14-386" name="__codelineno-14-386" href="#__codelineno-14-386"></a><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span>
</span><span id="__span-14-387"><a id="__codelineno-14-387" name="__codelineno-14-387" href="#__codelineno-14-387"></a><span class="w"> </span><span class="nx">width</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;100%&#39;</span><span class="p">,</span>
</span><span id="__span-14-388"><a id="__codelineno-14-388" name="__codelineno-14-388" href="#__codelineno-14-388"></a><span class="w"> </span><span class="nx">height</span><span class="o">:</span><span class="w"> </span><span class="kt">600</span><span class="p">,</span>
</span><span id="__span-14-389"><a id="__codelineno-14-389" name="__codelineno-14-389" href="#__codelineno-14-389"></a><span class="w"> </span><span class="nx">border</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;1px solid #d9d9d9&#39;</span><span class="p">,</span>
</span><span id="__span-14-390"><a id="__codelineno-14-390" name="__codelineno-14-390" href="#__codelineno-14-390"></a><span class="w"> </span><span class="nx">borderRadius</span><span class="o">:</span><span class="w"> </span><span class="kt">4</span><span class="p">,</span>
</span><span id="__span-14-391"><a id="__codelineno-14-391" name="__codelineno-14-391" href="#__codelineno-14-391"></a><span class="w"> </span><span class="p">}}</span>
</span><span id="__span-14-392"><a id="__codelineno-14-392" name="__codelineno-14-392" href="#__codelineno-14-392"></a><span class="w"> </span><span class="nx">title</span><span class="o">=</span><span class="s2">&quot;Email Preview&quot;</span>
</span><span id="__span-14-393"><a id="__codelineno-14-393" name="__codelineno-14-393" href="#__codelineno-14-393"></a><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-14-394"><a id="__codelineno-14-394" name="__codelineno-14-394" href="#__codelineno-14-394"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Card&gt;</span>
</span><span id="__span-14-395"><a id="__codelineno-14-395" name="__codelineno-14-395" href="#__codelineno-14-395"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Space&gt;</span>
</span><span id="__span-14-396"><a id="__codelineno-14-396" name="__codelineno-14-396" href="#__codelineno-14-396"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</span><span id="__span-14-397"><a id="__codelineno-14-397" name="__codelineno-14-397" href="#__codelineno-14-397"></a><span class="w"> </span><span class="p">)}</span>
</span><span id="__span-14-398"><a id="__codelineno-14-398" name="__codelineno-14-398" href="#__codelineno-14-398"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</span><span id="__span-14-399"><a id="__codelineno-14-399" name="__codelineno-14-399" href="#__codelineno-14-399"></a>
</span><span id="__span-14-400"><a id="__codelineno-14-400" name="__codelineno-14-400" href="#__codelineno-14-400"></a><span class="w"> </span><span class="p">{</span><span class="cm">/* Save Modal */</span><span class="p">}</span>
</span><span id="__span-14-401"><a id="__codelineno-14-401" name="__codelineno-14-401" href="#__codelineno-14-401"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Modal</span>
</span><span id="__span-14-402"><a id="__codelineno-14-402" name="__codelineno-14-402" href="#__codelineno-14-402"></a><span class="w"> </span><span class="nx">title</span><span class="o">=</span><span class="s2">&quot;Save Template&quot;</span>
</span><span id="__span-14-403"><a id="__codelineno-14-403" name="__codelineno-14-403" href="#__codelineno-14-403"></a><span class="w"> </span><span class="nx">visible</span><span class="o">=</span><span class="p">{</span><span class="nx">saveModalVisible</span><span class="p">}</span>
</span><span id="__span-14-404"><a id="__codelineno-14-404" name="__codelineno-14-404" href="#__codelineno-14-404"></a><span class="w"> </span><span class="nx">onOk</span><span class="o">=</span><span class="p">{</span><span class="nx">handleSave</span><span class="p">}</span>
</span><span id="__span-14-405"><a id="__codelineno-14-405" name="__codelineno-14-405" href="#__codelineno-14-405"></a><span class="w"> </span><span class="nx">onCancel</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setSaveModalVisible</span><span class="p">(</span><span class="kc">false</span><span class="p">)}</span>
</span><span id="__span-14-406"><a id="__codelineno-14-406" name="__codelineno-14-406" href="#__codelineno-14-406"></a><span class="w"> </span><span class="nx">confirmLoading</span><span class="o">=</span><span class="p">{</span><span class="nx">saving</span><span class="p">}</span>
</span><span id="__span-14-407"><a id="__codelineno-14-407" name="__codelineno-14-407" href="#__codelineno-14-407"></a><span class="w"> </span><span class="nx">okText</span><span class="o">=</span><span class="s2">&quot;Save&quot;</span>
</span><span id="__span-14-408"><a id="__codelineno-14-408" name="__codelineno-14-408" href="#__codelineno-14-408"></a><span class="w"> </span><span class="o">&gt;</span>
</span><span id="__span-14-409"><a id="__codelineno-14-409" name="__codelineno-14-409" href="#__codelineno-14-409"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Form</span><span class="w"> </span><span class="nx">layout</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="o">&gt;</span>
</span><span id="__span-14-410"><a id="__codelineno-14-410" name="__codelineno-14-410" href="#__codelineno-14-410"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Form</span><span class="p">.</span><span class="nx">Item</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;Change Notes (optional)&quot;</span><span class="o">&gt;</span>
</span><span id="__span-14-411"><a id="__codelineno-14-411" name="__codelineno-14-411" href="#__codelineno-14-411"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">TextArea</span>
</span><span id="__span-14-412"><a id="__codelineno-14-412" name="__codelineno-14-412" href="#__codelineno-14-412"></a><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">changeNotes</span><span class="p">}</span>
</span><span id="__span-14-413"><a id="__codelineno-14-413" name="__codelineno-14-413" href="#__codelineno-14-413"></a><span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setChangeNotes</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span>
</span><span id="__span-14-414"><a id="__codelineno-14-414" name="__codelineno-14-414" href="#__codelineno-14-414"></a><span class="w"> </span><span class="nx">placeholder</span><span class="o">=</span><span class="s2">&quot;Describe what changed in this version&quot;</span>
</span><span id="__span-14-415"><a id="__codelineno-14-415" name="__codelineno-14-415" href="#__codelineno-14-415"></a><span class="w"> </span><span class="nx">rows</span><span class="o">=</span><span class="p">{</span><span class="mf">4</span><span class="p">}</span>
</span><span id="__span-14-416"><a id="__codelineno-14-416" name="__codelineno-14-416" href="#__codelineno-14-416"></a><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-14-417"><a id="__codelineno-14-417" name="__codelineno-14-417" href="#__codelineno-14-417"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Form.Item&gt;</span>
</span><span id="__span-14-418"><a id="__codelineno-14-418" name="__codelineno-14-418" href="#__codelineno-14-418"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Form&gt;</span>
</span><span id="__span-14-419"><a id="__codelineno-14-419" name="__codelineno-14-419" href="#__codelineno-14-419"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Modal&gt;</span>
</span><span id="__span-14-420"><a id="__codelineno-14-420" name="__codelineno-14-420" href="#__codelineno-14-420"></a>
</span><span id="__span-14-421"><a id="__codelineno-14-421" name="__codelineno-14-421" href="#__codelineno-14-421"></a><span class="w"> </span><span class="p">{</span><span class="cm">/* Test Send Modal */</span><span class="p">}</span>
</span><span id="__span-14-422"><a id="__codelineno-14-422" name="__codelineno-14-422" href="#__codelineno-14-422"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Modal</span>
</span><span id="__span-14-423"><a id="__codelineno-14-423" name="__codelineno-14-423" href="#__codelineno-14-423"></a><span class="w"> </span><span class="nx">title</span><span class="o">=</span><span class="s2">&quot;Send Test Email&quot;</span>
</span><span id="__span-14-424"><a id="__codelineno-14-424" name="__codelineno-14-424" href="#__codelineno-14-424"></a><span class="w"> </span><span class="nx">visible</span><span class="o">=</span><span class="p">{</span><span class="nx">testModalVisible</span><span class="p">}</span>
</span><span id="__span-14-425"><a id="__codelineno-14-425" name="__codelineno-14-425" href="#__codelineno-14-425"></a><span class="w"> </span><span class="nx">onOk</span><span class="o">=</span><span class="p">{</span><span class="nx">handleTestSend</span><span class="p">}</span>
</span><span id="__span-14-426"><a id="__codelineno-14-426" name="__codelineno-14-426" href="#__codelineno-14-426"></a><span class="w"> </span><span class="nx">onCancel</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setTestModalVisible</span><span class="p">(</span><span class="kc">false</span><span class="p">)}</span>
</span><span id="__span-14-427"><a id="__codelineno-14-427" name="__codelineno-14-427" href="#__codelineno-14-427"></a><span class="w"> </span><span class="nx">confirmLoading</span><span class="o">=</span><span class="p">{</span><span class="nx">testSending</span><span class="p">}</span>
</span><span id="__span-14-428"><a id="__codelineno-14-428" name="__codelineno-14-428" href="#__codelineno-14-428"></a><span class="w"> </span><span class="nx">okText</span><span class="o">=</span><span class="s2">&quot;Send Test&quot;</span>
</span><span id="__span-14-429"><a id="__codelineno-14-429" name="__codelineno-14-429" href="#__codelineno-14-429"></a><span class="w"> </span><span class="o">&gt;</span>
</span><span id="__span-14-430"><a id="__codelineno-14-430" name="__codelineno-14-430" href="#__codelineno-14-430"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Form</span><span class="w"> </span><span class="nx">layout</span><span class="o">=</span><span class="s2">&quot;vertical&quot;</span><span class="o">&gt;</span>
</span><span id="__span-14-431"><a id="__codelineno-14-431" name="__codelineno-14-431" href="#__codelineno-14-431"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Form</span><span class="p">.</span><span class="nx">Item</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;Recipient Email&quot;</span><span class="w"> </span><span class="nx">required</span><span class="o">&gt;</span>
</span><span id="__span-14-432"><a id="__codelineno-14-432" name="__codelineno-14-432" href="#__codelineno-14-432"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Input</span>
</span><span id="__span-14-433"><a id="__codelineno-14-433" name="__codelineno-14-433" href="#__codelineno-14-433"></a><span class="w"> </span><span class="kr">type</span><span class="o">=</span><span class="s2">&quot;email&quot;</span>
</span><span id="__span-14-434"><a id="__codelineno-14-434" name="__codelineno-14-434" href="#__codelineno-14-434"></a><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">testRecipient</span><span class="p">}</span>
</span><span id="__span-14-435"><a id="__codelineno-14-435" name="__codelineno-14-435" href="#__codelineno-14-435"></a><span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setTestRecipient</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span>
</span><span id="__span-14-436"><a id="__codelineno-14-436" name="__codelineno-14-436" href="#__codelineno-14-436"></a><span class="w"> </span><span class="nx">placeholder</span><span class="o">=</span><span class="s2">&quot;your-email@example.com&quot;</span>
</span><span id="__span-14-437"><a id="__codelineno-14-437" name="__codelineno-14-437" href="#__codelineno-14-437"></a><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-14-438"><a id="__codelineno-14-438" name="__codelineno-14-438" href="#__codelineno-14-438"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Form.Item&gt;</span>
</span><span id="__span-14-439"><a id="__codelineno-14-439" name="__codelineno-14-439" href="#__codelineno-14-439"></a>
</span><span id="__span-14-440"><a id="__codelineno-14-440" name="__codelineno-14-440" href="#__codelineno-14-440"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Form</span><span class="p">.</span><span class="nx">Item</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;Sample Data&quot;</span><span class="o">&gt;</span>
</span><span id="__span-14-441"><a id="__codelineno-14-441" name="__codelineno-14-441" href="#__codelineno-14-441"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Text</span><span class="w"> </span><span class="kr">type</span><span class="o">=</span><span class="s2">&quot;secondary&quot;</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">display</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;block&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">marginBottom</span><span class="o">:</span><span class="w"> </span><span class="kt">8</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-14-442"><a id="__codelineno-14-442" name="__codelineno-14-442" href="#__codelineno-14-442"></a><span class="w"> </span><span class="nx">Using</span><span class="w"> </span><span class="nx">sample</span><span class="w"> </span><span class="nx">data</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="nx">preview</span><span class="p">.</span><span class="w"> </span><span class="nx">Edit</span><span class="w"> </span><span class="nx">values</span><span class="w"> </span><span class="ow">in</span><span class="w"> </span><span class="nx">the</span><span class="w"> </span><span class="nx">preview</span><span class="w"> </span><span class="nx">panel</span><span class="w"> </span><span class="nx">to</span><span class="w"> </span><span class="nx">change</span><span class="w"> </span><span class="nx">test</span><span class="w"> </span><span class="nx">data</span><span class="p">.</span>
</span><span id="__span-14-443"><a id="__codelineno-14-443" name="__codelineno-14-443" href="#__codelineno-14-443"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Text&gt;</span>
</span><span id="__span-14-444"><a id="__codelineno-14-444" name="__codelineno-14-444" href="#__codelineno-14-444"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">pre</span><span class="w"> </span><span class="nx">style</span><span class="o">=</span><span class="p">{{</span><span class="w"> </span><span class="nx">background</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;#f5f5f5&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">padding</span><span class="o">:</span><span class="w"> </span><span class="kt">12</span><span class="p">,</span><span class="w"> </span><span class="nx">borderRadius</span><span class="o">:</span><span class="w"> </span><span class="kt">4</span><span class="w"> </span><span class="p">}}</span><span class="o">&gt;</span>
</span><span id="__span-14-445"><a id="__codelineno-14-445" name="__codelineno-14-445" href="#__codelineno-14-445"></a><span class="w"> </span><span class="p">{</span><span class="nb">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="nx">sampleData</span><span class="p">,</span><span class="w"> </span><span class="kc">null</span><span class="p">,</span><span class="w"> </span><span class="mf">2</span><span class="p">)}</span>
</span><span id="__span-14-446"><a id="__codelineno-14-446" name="__codelineno-14-446" href="#__codelineno-14-446"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/pre&gt;</span>
</span><span id="__span-14-447"><a id="__codelineno-14-447" name="__codelineno-14-447" href="#__codelineno-14-447"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Form.Item&gt;</span>
</span><span id="__span-14-448"><a id="__codelineno-14-448" name="__codelineno-14-448" href="#__codelineno-14-448"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Form&gt;</span>
</span><span id="__span-14-449"><a id="__codelineno-14-449" name="__codelineno-14-449" href="#__codelineno-14-449"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/Modal&gt;</span>
</span><span id="__span-14-450"><a id="__codelineno-14-450" name="__codelineno-14-450" href="#__codelineno-14-450"></a><span class="w"> </span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</span><span id="__span-14-451"><a id="__codelineno-14-451" name="__codelineno-14-451" href="#__codelineno-14-451"></a><span class="w"> </span><span class="p">);</span>
</span><span id="__span-14-452"><a id="__codelineno-14-452" name="__codelineno-14-452" href="#__codelineno-14-452"></a><span class="p">}</span>
</span></code></pre></div>
<hr />
<h2 id="troubleshooting">Troubleshooting<a class="headerlink" href="#troubleshooting" title="Permanent link">&para;</a></h2>
<h3 id="problem-preview-not-updating">Problem: Preview not updating<a class="headerlink" href="#problem-preview-not-updating" title="Permanent link">&para;</a></h3>
<p><strong>Symptoms:</strong>
- Type in HTML editor but preview doesn't change
- Preview shows old content</p>
<p><strong>Causes:</strong>
1. Debounce timer still running (300ms delay)
2. Handlebars compilation error (silent failure)
3. Iframe not re-rendering</p>
<p><strong>Solutions:</strong></p>
<p><strong>Wait for debounce:</strong>
- Wait 300ms after typing stops
- Preview should update automatically</p>
<p><strong>Check browser console:</strong>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-15-1"><a id="__codelineno-15-1" name="__codelineno-15-1" href="#__codelineno-15-1"></a><span class="c1">// Look for errors</span>
</span><span id="__span-15-2"><a id="__codelineno-15-2" name="__codelineno-15-2" href="#__codelineno-15-2"></a><span class="nx">Handlebars</span><span class="p">.</span><span class="nx">compile</span><span class="w"> </span><span class="nx">error</span><span class="o">:</span><span class="w"> </span><span class="p">...</span>
</span></code></pre></div></p>
<p><strong>Force preview update:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-16-1"><a id="__codelineno-16-1" name="__codelineno-16-1" href="#__codelineno-16-1"></a><span class="c1">// Add button to manually trigger preview</span>
</span><span id="__span-16-2"><a id="__codelineno-16-2" name="__codelineno-16-2" href="#__codelineno-16-2"></a><span class="o">&lt;</span><span class="nx">Button</span><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">renderPreview</span><span class="p">(</span><span class="nx">htmlContent</span><span class="p">,</span><span class="w"> </span><span class="nx">sampleData</span><span class="p">)}</span><span class="o">&gt;</span>
</span><span id="__span-16-3"><a id="__codelineno-16-3" name="__codelineno-16-3" href="#__codelineno-16-3"></a><span class="w"> </span><span class="nx">Refresh</span><span class="w"> </span><span class="nx">Preview</span>
</span><span id="__span-16-4"><a id="__codelineno-16-4" name="__codelineno-16-4" href="#__codelineno-16-4"></a><span class="o">&lt;</span><span class="err">/Button&gt;</span>
</span></code></pre></div></p>
<p><strong>Check iframe contentDocument:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-17-1"><a id="__codelineno-17-1" name="__codelineno-17-1" href="#__codelineno-17-1"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Iframe doc:&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">previewRef</span><span class="p">.</span><span class="nx">current</span><span class="o">?</span><span class="p">.</span><span class="nx">contentDocument</span><span class="p">);</span>
</span><span id="__span-17-2"><a id="__codelineno-17-2" name="__codelineno-17-2" href="#__codelineno-17-2"></a><span class="c1">// Should not be null</span>
</span></code></pre></div></p>
<hr />
<h3 id="problem-test-send-fails">Problem: Test send fails<a class="headerlink" href="#problem-test-send-fails" title="Permanent link">&para;</a></h3>
<p><strong>Symptoms:</strong>
- "Failed to send test email" error
- Email not received in inbox or MailHog</p>
<p><strong>Causes:</strong>
1. SMTP configuration incorrect
2. Email test mode disabled (sending to real SMTP)
3. Recipient email invalid
4. Template has compilation errors</p>
<p><strong>Solutions:</strong></p>
<p><strong>Check SMTP settings:</strong>
<div class="language-bash highlight"><pre><span></span><code><span id="__span-18-1"><a id="__codelineno-18-1" name="__codelineno-18-1" href="#__codelineno-18-1"></a><span class="c1"># .env</span>
</span><span id="__span-18-2"><a id="__codelineno-18-2" name="__codelineno-18-2" href="#__codelineno-18-2"></a><span class="nv">EMAIL_TEST_MODE</span><span class="o">=</span><span class="nb">true</span><span class="w"> </span><span class="c1"># Use MailHog</span>
</span></code></pre></div></p>
<p><strong>Verify MailHog running:</strong>
<div class="language-bash highlight"><pre><span></span><code><span id="__span-19-1"><a id="__codelineno-19-1" name="__codelineno-19-1" href="#__codelineno-19-1"></a>docker<span class="w"> </span>compose<span class="w"> </span>ps<span class="w"> </span>mailhog
</span><span id="__span-19-2"><a id="__codelineno-19-2" name="__codelineno-19-2" href="#__codelineno-19-2"></a><span class="c1"># Should show &quot;Up&quot;</span>
</span></code></pre></div></p>
<p><strong>Check test logs:</strong>
<div class="language-sql highlight"><pre><span></span><code><span id="__span-20-1"><a id="__codelineno-20-1" name="__codelineno-20-1" href="#__codelineno-20-1"></a><span class="k">SELECT</span><span class="w"> </span><span class="o">*</span><span class="w"> </span><span class="k">FROM</span><span class="w"> </span><span class="n">email_template_test_logs</span>
</span><span id="__span-20-2"><a id="__codelineno-20-2" name="__codelineno-20-2" href="#__codelineno-20-2"></a><span class="k">WHERE</span><span class="w"> </span><span class="n">template_id</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;xxx&#39;</span>
</span><span id="__span-20-3"><a id="__codelineno-20-3" name="__codelineno-20-3" href="#__codelineno-20-3"></a><span class="k">ORDER</span><span class="w"> </span><span class="k">BY</span><span class="w"> </span><span class="n">created_at</span><span class="w"> </span><span class="k">DESC</span>
</span><span id="__span-20-4"><a id="__codelineno-20-4" name="__codelineno-20-4" href="#__codelineno-20-4"></a><span class="k">LIMIT</span><span class="w"> </span><span class="mi">5</span><span class="p">;</span>
</span><span id="__span-20-5"><a id="__codelineno-20-5" name="__codelineno-20-5" href="#__codelineno-20-5"></a>
</span><span id="__span-20-6"><a id="__codelineno-20-6" name="__codelineno-20-6" href="#__codelineno-20-6"></a><span class="c1">-- Look at error_message column</span>
</span></code></pre></div></p>
<p><strong>Test with minimal template:</strong>
<div class="language-html highlight"><pre><span></span><code><span id="__span-21-1"><a id="__codelineno-21-1" name="__codelineno-21-1" href="#__codelineno-21-1"></a><span class="p">&lt;</span><span class="nt">p</span><span class="p">&gt;</span>Hello {{USER_NAME}}<span class="p">&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
</span></code></pre></div></p>
<p><strong>Validate email address:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-22-1"><a id="__codelineno-22-1" name="__codelineno-22-1" href="#__codelineno-22-1"></a><span class="k">import</span><span class="w"> </span><span class="nx">validator</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;validator&#39;</span><span class="p">;</span>
</span><span id="__span-22-2"><a id="__codelineno-22-2" name="__codelineno-22-2" href="#__codelineno-22-2"></a>
</span><span id="__span-22-3"><a id="__codelineno-22-3" name="__codelineno-22-3" href="#__codelineno-22-3"></a><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="o">!</span><span class="nx">validator</span><span class="p">.</span><span class="nx">isEmail</span><span class="p">(</span><span class="nx">testRecipient</span><span class="p">))</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-22-4"><a id="__codelineno-22-4" name="__codelineno-22-4" href="#__codelineno-22-4"></a><span class="w"> </span><span class="nx">message</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Invalid email address&#39;</span><span class="p">);</span>
</span><span id="__span-22-5"><a id="__codelineno-22-5" name="__codelineno-22-5" href="#__codelineno-22-5"></a><span class="w"> </span><span class="k">return</span><span class="p">;</span>
</span><span id="__span-22-6"><a id="__codelineno-22-6" name="__codelineno-22-6" href="#__codelineno-22-6"></a><span class="p">}</span>
</span></code></pre></div></p>
<hr />
<h3 id="problem-variable-insertion-doesnt-work">Problem: Variable insertion doesn't work<a class="headerlink" href="#problem-variable-insertion-doesnt-work" title="Permanent link">&para;</a></h3>
<p><strong>Symptoms:</strong>
- Click "Insert to HTML" button but nothing happens
- Variable inserted in wrong location</p>
<p><strong>Causes:</strong>
1. Textarea ref not set
2. Cursor position not captured correctly
3. State update timing issue</p>
<p><strong>Solutions:</strong></p>
<p><strong>Check ref exists:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-23-1"><a id="__codelineno-23-1" name="__codelineno-23-1" href="#__codelineno-23-1"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;HTML ref:&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">htmlEditorRef</span><span class="p">.</span><span class="nx">current</span><span class="p">);</span>
</span><span id="__span-23-2"><a id="__codelineno-23-2" name="__codelineno-23-2" href="#__codelineno-23-2"></a><span class="c1">// Should be &lt;textarea&gt; element</span>
</span></code></pre></div></p>
<p><strong>Debug cursor position:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-24-1"><a id="__codelineno-24-1" name="__codelineno-24-1" href="#__codelineno-24-1"></a><span class="kd">const</span><span class="w"> </span><span class="nx">handleInsertVariable</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">variableKey</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">editorType</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;text&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-24-2"><a id="__codelineno-24-2" name="__codelineno-24-2" href="#__codelineno-24-2"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">textarea</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">editorType</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="w"> </span><span class="o">?</span><span class="w"> </span><span class="nx">htmlEditorRef.current</span><span class="w"> </span><span class="o">:</span><span class="w"> </span><span class="kt">textEditorRef.current</span><span class="p">;</span>
</span><span id="__span-24-3"><a id="__codelineno-24-3" name="__codelineno-24-3" href="#__codelineno-24-3"></a><span class="w"> </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Cursor position:&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">textarea</span><span class="o">?</span><span class="p">.</span><span class="nx">selectionStart</span><span class="p">,</span><span class="w"> </span><span class="nx">textarea</span><span class="o">?</span><span class="p">.</span><span class="nx">selectionEnd</span><span class="p">);</span>
</span><span id="__span-24-4"><a id="__codelineno-24-4" name="__codelineno-24-4" href="#__codelineno-24-4"></a>
</span><span id="__span-24-5"><a id="__codelineno-24-5" name="__codelineno-24-5" href="#__codelineno-24-5"></a><span class="w"> </span><span class="c1">// Rest of insertion logic...</span>
</span><span id="__span-24-6"><a id="__codelineno-24-6" name="__codelineno-24-6" href="#__codelineno-24-6"></a><span class="p">};</span>
</span></code></pre></div></p>
<p><strong>Manual workaround:</strong>
- Type <code>{{VARIABLE_KEY}}</code> manually instead of using button</p>
<hr />
<h3 id="problem-draft-not-restored-on-reload">Problem: Draft not restored on reload<a class="headerlink" href="#problem-draft-not-restored-on-reload" title="Permanent link">&para;</a></h3>
<p><strong>Symptoms:</strong>
- Unsaved changes lost after browser refresh
- No "Restored draft" message</p>
<p><strong>Causes:</strong>
1. localStorage not available (private browsing)
2. Draft key mismatch
3. localStorage quota exceeded</p>
<p><strong>Solutions:</strong></p>
<p><strong>Check localStorage:</strong>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-25-1"><a id="__codelineno-25-1" name="__codelineno-25-1" href="#__codelineno-25-1"></a><span class="c1">// Browser console</span>
</span><span id="__span-25-2"><a id="__codelineno-25-2" name="__codelineno-25-2" href="#__codelineno-25-2"></a><span class="nx">localStorage</span><span class="p">.</span><span class="nx">getItem</span><span class="p">(</span><span class="s1">&#39;email-template-draft-cuid123&#39;</span><span class="p">);</span>
</span><span id="__span-25-3"><a id="__codelineno-25-3" name="__codelineno-25-3" href="#__codelineno-25-3"></a><span class="c1">// Should return JSON string</span>
</span></code></pre></div></p>
<p><strong>Verify draft key:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-26-1"><a id="__codelineno-26-1" name="__codelineno-26-1" href="#__codelineno-26-1"></a><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Draft key:&#39;</span><span class="p">,</span><span class="w"> </span><span class="sb">`email-template-draft-</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
</span></code></pre></div></p>
<p><strong>Clear old drafts:</strong>
<div class="language-javascript highlight"><pre><span></span><code><span id="__span-27-1"><a id="__codelineno-27-1" name="__codelineno-27-1" href="#__codelineno-27-1"></a><span class="c1">// Browser console</span>
</span><span id="__span-27-2"><a id="__codelineno-27-2" name="__codelineno-27-2" href="#__codelineno-27-2"></a><span class="k">for</span><span class="w"> </span><span class="p">(</span><span class="kd">let</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="mf">0</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="w"> </span><span class="o">&lt;</span><span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span><span class="w"> </span><span class="nx">i</span><span class="o">++</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-27-3"><a id="__codelineno-27-3" name="__codelineno-27-3" href="#__codelineno-27-3"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">key</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">key</span><span class="p">(</span><span class="nx">i</span><span class="p">);</span>
</span><span id="__span-27-4"><a id="__codelineno-27-4" name="__codelineno-27-4" href="#__codelineno-27-4"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">key</span><span class="o">?</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s1">&#39;email-template-draft-&#39;</span><span class="p">))</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-27-5"><a id="__codelineno-27-5" name="__codelineno-27-5" href="#__codelineno-27-5"></a><span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">removeItem</span><span class="p">(</span><span class="nx">key</span><span class="p">);</span>
</span><span id="__span-27-6"><a id="__codelineno-27-6" name="__codelineno-27-6" href="#__codelineno-27-6"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-27-7"><a id="__codelineno-27-7" name="__codelineno-27-7" href="#__codelineno-27-7"></a><span class="p">}</span>
</span></code></pre></div></p>
<hr />
<h2 id="future-enhancements">Future Enhancements<a class="headerlink" href="#future-enhancements" title="Permanent link">&para;</a></h2>
<h3 id="monaco-editor-integration">Monaco Editor Integration<a class="headerlink" href="#monaco-editor-integration" title="Permanent link">&para;</a></h3>
<p><strong>Current:</strong> Basic HTML textarea
<strong>Future:</strong> Monaco Editor with syntax highlighting, IntelliSense, error detection</p>
<p><strong>Benefits:</strong>
- Syntax highlighting for HTML
- Auto-completion for HTML tags and Handlebars syntax
- Error squiggles for invalid HTML
- Multi-cursor editing
- Code folding</p>
<p><strong>Implementation:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-28-1"><a id="__codelineno-28-1" name="__codelineno-28-1" href="#__codelineno-28-1"></a><span class="k">import</span><span class="w"> </span><span class="nx">Editor</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;@monaco-editor/react&#39;</span><span class="p">;</span>
</span><span id="__span-28-2"><a id="__codelineno-28-2" name="__codelineno-28-2" href="#__codelineno-28-2"></a>
</span><span id="__span-28-3"><a id="__codelineno-28-3" name="__codelineno-28-3" href="#__codelineno-28-3"></a><span class="o">&lt;</span><span class="nx">Editor</span>
</span><span id="__span-28-4"><a id="__codelineno-28-4" name="__codelineno-28-4" href="#__codelineno-28-4"></a><span class="w"> </span><span class="nx">height</span><span class="o">=</span><span class="s2">&quot;600px&quot;</span>
</span><span id="__span-28-5"><a id="__codelineno-28-5" name="__codelineno-28-5" href="#__codelineno-28-5"></a><span class="w"> </span><span class="nx">language</span><span class="o">=</span><span class="s2">&quot;html&quot;</span>
</span><span id="__span-28-6"><a id="__codelineno-28-6" name="__codelineno-28-6" href="#__codelineno-28-6"></a><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">htmlContent</span><span class="p">}</span>
</span><span id="__span-28-7"><a id="__codelineno-28-7" name="__codelineno-28-7" href="#__codelineno-28-7"></a><span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{(</span><span class="nx">value</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setHtmlContent</span><span class="p">(</span><span class="nx">value</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="s1">&#39;&#39;</span><span class="p">)}</span>
</span><span id="__span-28-8"><a id="__codelineno-28-8" name="__codelineno-28-8" href="#__codelineno-28-8"></a><span class="w"> </span><span class="nx">options</span><span class="o">=</span><span class="p">{{</span>
</span><span id="__span-28-9"><a id="__codelineno-28-9" name="__codelineno-28-9" href="#__codelineno-28-9"></a><span class="w"> </span><span class="nx">minimap</span><span class="o">:</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">enabled</span><span class="o">:</span><span class="w"> </span><span class="kt">false</span><span class="w"> </span><span class="p">},</span>
</span><span id="__span-28-10"><a id="__codelineno-28-10" name="__codelineno-28-10" href="#__codelineno-28-10"></a><span class="w"> </span><span class="nx">lineNumbers</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;on&#39;</span><span class="p">,</span>
</span><span id="__span-28-11"><a id="__codelineno-28-11" name="__codelineno-28-11" href="#__codelineno-28-11"></a><span class="w"> </span><span class="nx">wordWrap</span><span class="o">:</span><span class="w"> </span><span class="s1">&#39;on&#39;</span><span class="p">,</span>
</span><span id="__span-28-12"><a id="__codelineno-28-12" name="__codelineno-28-12" href="#__codelineno-28-12"></a><span class="w"> </span><span class="p">}}</span>
</span><span id="__span-28-13"><a id="__codelineno-28-13" name="__codelineno-28-13" href="#__codelineno-28-13"></a><span class="err">/&gt;</span>
</span></code></pre></div></p>
<hr />
<h3 id="drag-drop-block-builder">Drag-Drop Block Builder<a class="headerlink" href="#drag-drop-block-builder" title="Permanent link">&para;</a></h3>
<p><strong>Current:</strong> Manual HTML editing
<strong>Future:</strong> Visual block builder (like GrapesJS)</p>
<p><strong>Benefits:</strong>
- No HTML knowledge required
- Pre-built email blocks (header, footer, CTA button)
- Drag-drop interface
- Mobile-responsive by default</p>
<p><strong>Implementation:</strong>
- Use GrapesJS (same as landing page editor)
- Custom blocks for email-safe components
- Export to HTML for template storage</p>
<hr />
<h3 id="email-client-previews">Email Client Previews<a class="headerlink" href="#email-client-previews" title="Permanent link">&para;</a></h3>
<p><strong>Current:</strong> Single iframe preview
<strong>Future:</strong> Multi-client previews (Gmail, Outlook, Apple Mail)</p>
<p><strong>Benefits:</strong>
- Test rendering across email clients
- Catch client-specific CSS issues
- Preview dark mode rendering</p>
<p><strong>Services:</strong>
- <a href="https://www.litmus.com/">Litmus</a> API integration
- <a href="https://www.emailonacid.com/">Email on Acid</a> screenshots
- Self-hosted preview using email client CSS emulation</p>
<hr />
<h3 id="ab-testing-support">A/B Testing Support<a class="headerlink" href="#ab-testing-support" title="Permanent link">&para;</a></h3>
<p><strong>Current:</strong> Single template version
<strong>Future:</strong> A/B testing with variant templates</p>
<p><strong>Features:</strong>
- Create template variants (A, B, C)
- Split traffic across variants
- Track open rates, click rates
- Auto-promote winning variant</p>
<p><strong>Implementation:</strong>
- EmailTemplateVariant model (templateId, variantName, weight, stats)
- Random variant selection on send
- Tracking pixel in email HTML
- Analytics dashboard</p>
<hr />
<h2 id="performance">Performance<a class="headerlink" href="#performance" title="Permanent link">&para;</a></h2>
<h3 id="auto-save-timing">Auto-Save Timing<a class="headerlink" href="#auto-save-timing" title="Permanent link">&para;</a></h3>
<p><strong>Current Implementation:</strong>
- Save to localStorage on blur (when focus leaves editor)
- No automatic interval-based saves</p>
<p><strong>Performance Impact:</strong>
- Negligible (localStorage write is &lt; 1ms)
- No network requests (local only)</p>
<p><strong>Alternative: Interval-Based Auto-Save:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-29-1"><a id="__codelineno-29-1" name="__codelineno-29-1" href="#__codelineno-29-1"></a><span class="nx">useEffect</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-29-2"><a id="__codelineno-29-2" name="__codelineno-29-2" href="#__codelineno-29-2"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">interval</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">setInterval</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-29-3"><a id="__codelineno-29-3" name="__codelineno-29-3" href="#__codelineno-29-3"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">htmlContent</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">textContent</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-29-4"><a id="__codelineno-29-4" name="__codelineno-29-4" href="#__codelineno-29-4"></a><span class="w"> </span><span class="nx">localStorage</span><span class="p">.</span><span class="nx">setItem</span><span class="p">(</span><span class="sb">`email-template-draft-</span><span class="si">${</span><span class="nx">id</span><span class="si">}</span><span class="sb">`</span><span class="p">,</span><span class="w"> </span><span class="nb">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span>
</span><span id="__span-29-5"><a id="__codelineno-29-5" name="__codelineno-29-5" href="#__codelineno-29-5"></a><span class="w"> </span><span class="nx">subjectLine</span><span class="p">,</span>
</span><span id="__span-29-6"><a id="__codelineno-29-6" name="__codelineno-29-6" href="#__codelineno-29-6"></a><span class="w"> </span><span class="nx">htmlContent</span><span class="p">,</span>
</span><span id="__span-29-7"><a id="__codelineno-29-7" name="__codelineno-29-7" href="#__codelineno-29-7"></a><span class="w"> </span><span class="nx">textContent</span><span class="p">,</span>
</span><span id="__span-29-8"><a id="__codelineno-29-8" name="__codelineno-29-8" href="#__codelineno-29-8"></a><span class="w"> </span><span class="nx">savedAt</span><span class="o">:</span><span class="w"> </span><span class="kt">new</span><span class="w"> </span><span class="nb">Date</span><span class="p">().</span><span class="nx">toISOString</span><span class="p">(),</span>
</span><span id="__span-29-9"><a id="__codelineno-29-9" name="__codelineno-29-9" href="#__codelineno-29-9"></a><span class="w"> </span><span class="p">}));</span>
</span><span id="__span-29-10"><a id="__codelineno-29-10" name="__codelineno-29-10" href="#__codelineno-29-10"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-29-11"><a id="__codelineno-29-11" name="__codelineno-29-11" href="#__codelineno-29-11"></a><span class="w"> </span><span class="p">},</span><span class="w"> </span><span class="mf">10000</span><span class="p">);</span><span class="w"> </span><span class="c1">// Every 10 seconds</span>
</span><span id="__span-29-12"><a id="__codelineno-29-12" name="__codelineno-29-12" href="#__codelineno-29-12"></a>
</span><span id="__span-29-13"><a id="__codelineno-29-13" name="__codelineno-29-13" href="#__codelineno-29-13"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">clearInterval</span><span class="p">(</span><span class="nx">interval</span><span class="p">);</span>
</span><span id="__span-29-14"><a id="__codelineno-29-14" name="__codelineno-29-14" href="#__codelineno-29-14"></a><span class="p">},</span><span class="w"> </span><span class="p">[</span><span class="nx">id</span><span class="p">,</span><span class="w"> </span><span class="nx">subjectLine</span><span class="p">,</span><span class="w"> </span><span class="nx">htmlContent</span><span class="p">,</span><span class="w"> </span><span class="nx">textContent</span><span class="p">]);</span>
</span></code></pre></div></p>
<hr />
<h3 id="preview-rendering-performance">Preview Rendering Performance<a class="headerlink" href="#preview-rendering-performance" title="Permanent link">&para;</a></h3>
<p><strong>Debounce Delay:</strong>
- Current: 300ms
- Too short: Preview updates too frequently (distracting)
- Too long: Preview feels laggy</p>
<p><strong>Handlebars Compilation:</strong>
- Fast (&lt; 1ms for typical templates)
- May slow down for very large templates (&gt; 100KB)</p>
<p><strong>Iframe Rendering:</strong>
- Browser-native rendering (very fast)
- No performance concerns</p>
<p><strong>Optimization for Large Templates:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-30-1"><a id="__codelineno-30-1" name="__codelineno-30-1" href="#__codelineno-30-1"></a><span class="c1">// Skip preview for very large HTML</span>
</span><span id="__span-30-2"><a id="__codelineno-30-2" name="__codelineno-30-2" href="#__codelineno-30-2"></a><span class="kd">const</span><span class="w"> </span><span class="nx">renderPreview</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">html</span><span class="o">:</span><span class="w"> </span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">data</span><span class="o">:</span><span class="w"> </span><span class="kt">Record</span><span class="o">&lt;</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">unknown</span><span class="o">&gt;</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-30-3"><a id="__codelineno-30-3" name="__codelineno-30-3" href="#__codelineno-30-3"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">html</span><span class="p">.</span><span class="nx">length</span><span class="w"> </span><span class="o">&gt;</span><span class="w"> </span><span class="mf">100000</span><span class="p">)</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="c1">// 100KB</span>
</span><span id="__span-30-4"><a id="__codelineno-30-4" name="__codelineno-30-4" href="#__codelineno-30-4"></a><span class="w"> </span><span class="nx">setPreviewError</span><span class="p">(</span><span class="s1">&#39;Template too large for live preview. Use test send instead.&#39;</span><span class="p">);</span>
</span><span id="__span-30-5"><a id="__codelineno-30-5" name="__codelineno-30-5" href="#__codelineno-30-5"></a><span class="w"> </span><span class="k">return</span><span class="p">;</span>
</span><span id="__span-30-6"><a id="__codelineno-30-6" name="__codelineno-30-6" href="#__codelineno-30-6"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-30-7"><a id="__codelineno-30-7" name="__codelineno-30-7" href="#__codelineno-30-7"></a>
</span><span id="__span-30-8"><a id="__codelineno-30-8" name="__codelineno-30-8" href="#__codelineno-30-8"></a><span class="w"> </span><span class="c1">// Normal preview rendering...</span>
</span><span id="__span-30-9"><a id="__codelineno-30-9" name="__codelineno-30-9" href="#__codelineno-30-9"></a><span class="p">};</span>
</span></code></pre></div></p>
<hr />
<h2 id="accessibility">Accessibility<a class="headerlink" href="#accessibility" title="Permanent link">&para;</a></h2>
<h3 id="keyboard-shortcuts">Keyboard Shortcuts<a class="headerlink" href="#keyboard-shortcuts" title="Permanent link">&para;</a></h3>
<p><strong>Implemented:</strong>
- <code>Ctrl+S</code> (or <code>Cmd+S</code> on Mac) — Save template
- <code>Ctrl+P</code> — Toggle preview pane
- <code>Esc</code> — Close modal</p>
<p><strong>Implementation:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-31-1"><a id="__codelineno-31-1" name="__codelineno-31-1" href="#__codelineno-31-1"></a><span class="nx">useEffect</span><span class="p">(()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-31-2"><a id="__codelineno-31-2" name="__codelineno-31-2" href="#__codelineno-31-2"></a><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">handleKeyDown</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="o">:</span><span class="w"> </span><span class="kt">KeyboardEvent</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-31-3"><a id="__codelineno-31-3" name="__codelineno-31-3" href="#__codelineno-31-3"></a><span class="w"> </span><span class="c1">// Save</span>
</span><span id="__span-31-4"><a id="__codelineno-31-4" name="__codelineno-31-4" href="#__codelineno-31-4"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">((</span><span class="nx">e</span><span class="p">.</span><span class="nx">ctrlKey</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">metaKey</span><span class="p">)</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;s&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-31-5"><a id="__codelineno-31-5" name="__codelineno-31-5" href="#__codelineno-31-5"></a><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
</span><span id="__span-31-6"><a id="__codelineno-31-6" name="__codelineno-31-6" href="#__codelineno-31-6"></a><span class="w"> </span><span class="nx">setSaveModalVisible</span><span class="p">(</span><span class="kc">true</span><span class="p">);</span>
</span><span id="__span-31-7"><a id="__codelineno-31-7" name="__codelineno-31-7" href="#__codelineno-31-7"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-31-8"><a id="__codelineno-31-8" name="__codelineno-31-8" href="#__codelineno-31-8"></a>
</span><span id="__span-31-9"><a id="__codelineno-31-9" name="__codelineno-31-9" href="#__codelineno-31-9"></a><span class="w"> </span><span class="c1">// Preview toggle</span>
</span><span id="__span-31-10"><a id="__codelineno-31-10" name="__codelineno-31-10" href="#__codelineno-31-10"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">((</span><span class="nx">e</span><span class="p">.</span><span class="nx">ctrlKey</span><span class="w"> </span><span class="o">||</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">metaKey</span><span class="p">)</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;p&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-31-11"><a id="__codelineno-31-11" name="__codelineno-31-11" href="#__codelineno-31-11"></a><span class="w"> </span><span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
</span><span id="__span-31-12"><a id="__codelineno-31-12" name="__codelineno-31-12" href="#__codelineno-31-12"></a><span class="w"> </span><span class="nx">setShowPreview</span><span class="p">(</span><span class="o">!</span><span class="nx">showPreview</span><span class="p">);</span>
</span><span id="__span-31-13"><a id="__codelineno-31-13" name="__codelineno-31-13" href="#__codelineno-31-13"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-31-14"><a id="__codelineno-31-14" name="__codelineno-31-14" href="#__codelineno-31-14"></a>
</span><span id="__span-31-15"><a id="__codelineno-31-15" name="__codelineno-31-15" href="#__codelineno-31-15"></a><span class="w"> </span><span class="c1">// Close modal</span>
</span><span id="__span-31-16"><a id="__codelineno-31-16" name="__codelineno-31-16" href="#__codelineno-31-16"></a><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">key</span><span class="w"> </span><span class="o">===</span><span class="w"> </span><span class="s1">&#39;Escape&#39;</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
</span><span id="__span-31-17"><a id="__codelineno-31-17" name="__codelineno-31-17" href="#__codelineno-31-17"></a><span class="w"> </span><span class="nx">setSaveModalVisible</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-31-18"><a id="__codelineno-31-18" name="__codelineno-31-18" href="#__codelineno-31-18"></a><span class="w"> </span><span class="nx">setTestModalVisible</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</span><span id="__span-31-19"><a id="__codelineno-31-19" name="__codelineno-31-19" href="#__codelineno-31-19"></a><span class="w"> </span><span class="p">}</span>
</span><span id="__span-31-20"><a id="__codelineno-31-20" name="__codelineno-31-20" href="#__codelineno-31-20"></a><span class="w"> </span><span class="p">};</span>
</span><span id="__span-31-21"><a id="__codelineno-31-21" name="__codelineno-31-21" href="#__codelineno-31-21"></a>
</span><span id="__span-31-22"><a id="__codelineno-31-22" name="__codelineno-31-22" href="#__codelineno-31-22"></a><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">handleKeyDown</span><span class="p">);</span>
</span><span id="__span-31-23"><a id="__codelineno-31-23" name="__codelineno-31-23" href="#__codelineno-31-23"></a><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="s1">&#39;keydown&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">handleKeyDown</span><span class="p">);</span>
</span><span id="__span-31-24"><a id="__codelineno-31-24" name="__codelineno-31-24" href="#__codelineno-31-24"></a><span class="p">},</span><span class="w"> </span><span class="p">[</span><span class="nx">showPreview</span><span class="p">]);</span>
</span></code></pre></div></p>
<hr />
<h3 id="screen-reader-support">Screen Reader Support<a class="headerlink" href="#screen-reader-support" title="Permanent link">&para;</a></h3>
<p><strong>Form Labels:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-32-1"><a id="__codelineno-32-1" name="__codelineno-32-1" href="#__codelineno-32-1"></a><span class="o">&lt;</span><span class="nx">Form</span><span class="p">.</span><span class="nx">Item</span><span class="w"> </span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;Recipient Email&quot;</span><span class="w"> </span><span class="nx">required</span><span class="o">&gt;</span>
</span><span id="__span-32-2"><a id="__codelineno-32-2" name="__codelineno-32-2" href="#__codelineno-32-2"></a><span class="w"> </span><span class="o">&lt;</span><span class="nx">Input</span>
</span><span id="__span-32-3"><a id="__codelineno-32-3" name="__codelineno-32-3" href="#__codelineno-32-3"></a><span class="w"> </span><span class="kr">type</span><span class="o">=</span><span class="s2">&quot;email&quot;</span>
</span><span id="__span-32-4"><a id="__codelineno-32-4" name="__codelineno-32-4" href="#__codelineno-32-4"></a><span class="w"> </span><span class="nx">aria</span><span class="o">-</span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;Test email recipient address&quot;</span>
</span><span id="__span-32-5"><a id="__codelineno-32-5" name="__codelineno-32-5" href="#__codelineno-32-5"></a><span class="w"> </span><span class="nx">aria</span><span class="o">-</span><span class="nx">required</span><span class="o">=</span><span class="s2">&quot;true&quot;</span>
</span><span id="__span-32-6"><a id="__codelineno-32-6" name="__codelineno-32-6" href="#__codelineno-32-6"></a><span class="w"> </span><span class="nx">value</span><span class="o">=</span><span class="p">{</span><span class="nx">testRecipient</span><span class="p">}</span>
</span><span id="__span-32-7"><a id="__codelineno-32-7" name="__codelineno-32-7" href="#__codelineno-32-7"></a><span class="w"> </span><span class="nx">onChange</span><span class="o">=</span><span class="p">{(</span><span class="nx">e</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setTestRecipient</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)}</span>
</span><span id="__span-32-8"><a id="__codelineno-32-8" name="__codelineno-32-8" href="#__codelineno-32-8"></a><span class="w"> </span><span class="o">/&gt;</span>
</span><span id="__span-32-9"><a id="__codelineno-32-9" name="__codelineno-32-9" href="#__codelineno-32-9"></a><span class="o">&lt;</span><span class="err">/Form.Item&gt;</span>
</span></code></pre></div></p>
<p><strong>Button Descriptions:</strong>
<div class="language-typescript highlight"><pre><span></span><code><span id="__span-33-1"><a id="__codelineno-33-1" name="__codelineno-33-1" href="#__codelineno-33-1"></a><span class="o">&lt;</span><span class="nx">Button</span>
</span><span id="__span-33-2"><a id="__codelineno-33-2" name="__codelineno-33-2" href="#__codelineno-33-2"></a><span class="w"> </span><span class="nx">icon</span><span class="o">=</span><span class="p">{</span><span class="o">&lt;</span><span class="nx">SaveOutlined</span><span class="w"> </span><span class="o">/&gt;</span><span class="p">}</span>
</span><span id="__span-33-3"><a id="__codelineno-33-3" name="__codelineno-33-3" href="#__codelineno-33-3"></a><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">setSaveModalVisible</span><span class="p">(</span><span class="kc">true</span><span class="p">)}</span>
</span><span id="__span-33-4"><a id="__codelineno-33-4" name="__codelineno-33-4" href="#__codelineno-33-4"></a><span class="w"> </span><span class="nx">aria</span><span class="o">-</span><span class="nx">label</span><span class="o">=</span><span class="s2">&quot;Save template and create new version&quot;</span>
</span><span id="__span-33-5"><a id="__codelineno-33-5" name="__codelineno-33-5" href="#__codelineno-33-5"></a><span class="o">&gt;</span>
</span><span id="__span-33-6"><a id="__codelineno-33-6" name="__codelineno-33-6" href="#__codelineno-33-6"></a><span class="w"> </span><span class="nx">Save</span>
</span><span id="__span-33-7"><a id="__codelineno-33-7" name="__codelineno-33-7" href="#__codelineno-33-7"></a><span class="o">&lt;</span><span class="err">/Button&gt;</span>
</span><span id="__span-33-8"><a id="__codelineno-33-8" name="__codelineno-33-8" href="#__codelineno-33-8"></a>
</span><span id="__span-33-9"><a id="__codelineno-33-9" name="__codelineno-33-9" href="#__codelineno-33-9"></a><span class="o">&lt;</span><span class="nx">Button</span>
</span><span id="__span-33-10"><a id="__codelineno-33-10" name="__codelineno-33-10" href="#__codelineno-33-10"></a><span class="w"> </span><span class="nx">size</span><span class="o">=</span><span class="s2">&quot;small&quot;</span>
</span><span id="__span-33-11"><a id="__codelineno-33-11" name="__codelineno-33-11" href="#__codelineno-33-11"></a><span class="w"> </span><span class="nx">onClick</span><span class="o">=</span><span class="p">{()</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">handleInsertVariable</span><span class="p">(</span><span class="nx">variable</span><span class="p">.</span><span class="nx">key</span><span class="p">,</span><span class="w"> </span><span class="s1">&#39;html&#39;</span><span class="p">)}</span>
</span><span id="__span-33-12"><a id="__codelineno-33-12" name="__codelineno-33-12" href="#__codelineno-33-12"></a><span class="w"> </span><span class="nx">aria</span><span class="o">-</span><span class="nx">label</span><span class="o">=</span><span class="p">{</span><span class="sb">`Insert </span><span class="si">${</span><span class="nx">variable</span><span class="p">.</span><span class="nx">label</span><span class="si">}</span><span class="sb"> variable into HTML editor`</span><span class="p">}</span>
</span><span id="__span-33-13"><a id="__codelineno-33-13" name="__codelineno-33-13" href="#__codelineno-33-13"></a><span class="o">&gt;</span>
</span><span id="__span-33-14"><a id="__codelineno-33-14" name="__codelineno-33-14" href="#__codelineno-33-14"></a><span class="w"> </span><span class="nx">Insert</span><span class="w"> </span><span class="nx">to</span><span class="w"> </span><span class="nx">HTML</span>
</span><span id="__span-33-15"><a id="__codelineno-33-15" name="__codelineno-33-15" href="#__codelineno-33-15"></a><span class="o">&lt;</span><span class="err">/Button&gt;</span>
</span></code></pre></div></p>
<hr />
<h2 id="related-documentation">Related Documentation<a class="headerlink" href="#related-documentation" title="Permanent link">&para;</a></h2>
<h3 id="frontend-documentation">Frontend Documentation<a class="headerlink" href="#frontend-documentation" title="Permanent link">&para;</a></h3>
<ul>
<li><strong><a href="../../frontend/pages/email-templates-page.md">EmailTemplatesPage.tsx</a></strong> — Email templates list page</li>
<li><strong><a href="../../frontend/app.md">App.tsx</a></strong> — Route definition for editor page</li>
</ul>
<h3 id="backend-documentation">Backend Documentation<a class="headerlink" href="#backend-documentation" title="Permanent link">&para;</a></h3>
<ul>
<li><strong><a href="../../api/modules/email-templates.md">Email Templates Module</a></strong> — API routes</li>
<li><code>GET /api/email-templates/:id</code> — Load template + variables</li>
<li><code>PUT /api/email-templates/:id</code> — Update template (creates version)</li>
<li><code>POST /api/email-templates/:id/test</code> — Send test email</li>
</ul>
<h3 id="feature-documentation">Feature Documentation<a class="headerlink" href="#feature-documentation" title="Permanent link">&para;</a></h3>
<ul>
<li><strong><a href="../template-system/">template-system.md</a></strong> — Email template engine overview</li>
<li><strong><a href="../variables/">variables.md</a></strong> — Template variable system</li>
<li><strong><a href="../versioning/">versioning.md</a></strong> — Template version history</li>
</ul>
<h3 id="related-features">Related Features<a class="headerlink" href="#related-features" title="Permanent link">&para;</a></h3>
<ul>
<li><strong><a href="../pages/editor.md">Landing Page Editor</a></strong> — Similar GrapesJS editor for pages</li>
<li><strong><a href="../influence/campaign-emails.md">Campaign Emails</a></strong> — Uses email templates for advocacy emails</li>
</ul>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../template-system/" class="md-footer__link md-footer__link--prev" aria-label="Previous: Template System">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</div>
<div class="md-footer__title">
<span class="md-footer__direction">
Previous
</span>
<div class="md-ellipsis">
Template System
</div>
</div>
</a>
<a href="../variables/" class="md-footer__link md-footer__link--next" aria-label="Next: Variables">
<div class="md-footer__title">
<span class="md-footer__direction">
Next
</span>
<div class="md-ellipsis">
Variables
</div>
</div>
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright &copy; 2024 The Bunker Operations – <a href="#__consent">Change cookie settings</a>
</div>
</div>
<div class="md-social">
<a href="https://gitea.bnkops.com/admin" target="_blank" rel="noopener" title="Gitea Repository" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
<a href="https://listmonk.bnkops.com/subscription/form" target="_blank" rel="noopener" title="Newsletter" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M536.4-26.3c9.8-3.5 20.6-1 28 6.3s9.8 18.2 6.3 28l-178 496.9c-5 13.9-18.1 23.1-32.8 23.1-14.2 0-27-8.6-32.3-21.7l-64.2-158c-4.5-11-2.5-23.6 5.2-32.6l94.5-112.4c5.1-6.1 4.7-15-.9-20.6s-14.6-6-20.6-.9l-112.4 94.3c-9.1 7.6-21.6 9.6-32.6 5.2L38.1 216.8c-13.1-5.3-21.7-18.1-21.7-32.3 0-14.7 9.2-27.8 23.1-32.8z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"annotate": null, "base": "../../../..", "features": ["announce.dismiss", "content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tooltips", "navigation.expand", "navigation.footer", "navigation.indexes", "navigation.path", "navigation.prune", "navigation.sections", "navigation.tabs", "navigation.tabs.sticky", "navigation.top", "navigation.tracking", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script>
<script src="../../../../assets/javascripts/bundle.79ae519e.min.js"></script>
<script src="../../../../javascripts/home.js"></script>
<script src="../../../../javascripts/github-widget.js"></script>
<script src="../../../../javascripts/gitea-widget.js"></script>
<script src="../../../../assets/js/env-config.js"></script>
<script src="../../../../assets/js/video-player.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink