RealRaven2000 / SmartTemplates

Thunderbird Add-on: SmartTemplates
http://smarttemplates.quickfolders.org/
Other
25 stars 15 forks source link

Feature Request: Add support for preheaders #274

Closed RealRaven2000 closed 4 months ago

RealRaven2000 commented 8 months ago

By design, all contents of <body> or of the template is wrapped within <div class ="smartTemplate4-template">

However by definition hidden preheader tags need to be the first element of the so they cannot be contained in a parent element. Therefore SmartTemplates should define a simple way to add a preheader element (e.g. <div class="preheader"> that can be injected before the template body and be recognized by search engines / ISPs that support preheader.)

Requirements:

Suggestion:

RealRaven2000 commented 8 months ago

It may also be necessary to add another paremeter for inline styles, such as in the following pattern:

%preheader("text content",className,"inline rules")%

the className could still be added for additional processing / layout in modern email clients whereas the inline rules would be added to a style attribute that works as a fallback for older / more primitive mail clients / web clients.

Example:

%preheader("This is some preview text that tells about the content of this email.",
preheader,
"visibility: hidden; font-size: 1px; color: transparent; line-height: 1px; max-height: 0; max-width: 0; opacity: 0; overflow: hidden;")%

(note: I only added line breaks for readability, the command cannot have line breaks in the template)

Main problems, the first parameter would currently not be able to support the following tokens " , ) % . We need to consider how these could be added into the preview text without breaking the parsing engine of SmartTemplates.

RealRaven2000 commented 5 months ago

I propose that we use the class .preheader in the actual renderer HTML email, I believe this will become a standard at some stage. If it gets standardized to a different class name we can add this class to the implementation. If the standards consortiums decide to give it its own HTML5 tag we will have reimplement anyway. if className is optional, should we still process the third parameter (inline rules, in double quotation marks)?

I imagine 4 different ways to use the function:

%preheader("text content")%
%preheader("text content",className)%
%preheader("text content","inline rules")%
%preheader("text content",className,"inline rules")%

We can make sure this is always injected as the very first element within <body>.

RealRaven2000 commented 5 months ago

I will also propose that we inject style="display:none;", unless a parameter with inline rules has been added

RealRaven2000 commented 5 months ago

Here is a first preview version, I also added some documentation in the variables tab (not localized yet).

smartTemplate-fx-4.4pre36.zip

A nice-to-have for later to add would be support as a smart snippet, like this: %preheader(*selection*)% in order to turn any text in the email into a header description automatically.


To test the version above, download the zip file, drag the file into Thunderbird Add-ons Manager, do not extract contents or if won't install.

RealRaven2000 commented 5 months ago

I also added a footnote on how to include commas in the text (they need to be escaped with a backslash \, )

smartTemplate-fx-4.4pre40.zip


To test the version above, download the zip file, drag the file into Thunderbird Add-ons Manager, do not extract contents or if won't install.

RealRaven2000 commented 5 months ago

Improved documentation and implemented support for multiple commas in the text (escape with backslash mandatory) plus a prompt that helps writing the string when clicked from the variables tab:

image

This will convert the contained commas accordingly:

%preheader("Taking care of all your pets\, dogs\, cats and birds.")%

Commas will now also be escaped for similar prompts when clicking %header.set()% etc. The processing of these and full support for using escaped comma in text parameters for other SmartTemplates variables will be enhanced in issue #280 (WIP).

smartTemplate-fx-4.4pre47.zip


To test the version above, download the zip file, drag the file into Thunderbird Add-ons Manager, do not extract contents or if won't install.

RealRaven2000 commented 4 months ago

Latest version below. I fixed some problem that cut off the last character of the text, and also added selection and clipboard support, when using %preheader% from the Smart Fragments menu. For instance, you can now write a smart snippet like this:

%preheader("*selection*")%

This will convert the selected text (from the email) into the preheader (and will remove it from screen).

In order to keep it on screen you can use the following script instead - note that we use *clipboard* and could potentially add more text before or after within the double quotes:

%toclipboard(*selection*)%
%preheader("*clipboard*")%
%clipboard%

it is also possible to inject the clipboard contents to a preheader directly, using this simplified syntax:

%preheader(clipboard)%

smartTemplate-fx-4.4pre74.zip


To test the version above, download the zip file, drag the file into Thunderbird Add-ons Manager, do not extract contents or if won't install.

RealRaven2000 commented 4 months ago

Added documentation and localisation in the variables tab:

image

smartTemplate-fx-4.4pre78.zip


To test the version above, download the zip file, drag the file into Thunderbird Add-ons Manager, do not extract contents or if won't install.

RealRaven2000 commented 4 months ago

Apparently in the changes above there is a regression that breaks my "add shadow to picture" macro, which looks like this:

<div style="border: 1px solid rgba(80, 80, 80, 0.3); box-shadow: rgba(80, 80, 80, 0.3) 5px 5px 5px; width:max-content;">*selection*</div>

This is designed to add a shadow frame around a selected image .

it appears to fail when inserting the modified html into composer, at smartTemplates-fileTemplates.js:1637

      }
      gMsgCompose.editor.insertHTML(code); 
      // we should probably place the cursor at the end of the inserted HTML afterwards!

the inserted code appears to look correct (line breaks inserted by me for readability):

<div style="border: 1px solid rgba(80, 80, 80, 0.3); box-shadow: rgba(80, 80, 80, 0.3) 5px 5px 5px; width:max-content;">
<img src="data:image/png;base64\\,iVBORw0KGgoAA..." 
alt=""></div>
RealRaven2000 commented 4 months ago

Found the problem in line 1567

        if (selectedText && selectedText.length) {
          html = html.replace("*selection*", selectedText.replaceAll(",","\\,")); // escape all commas
        } else {
          html = html.replace("*selection*", "%cursor%");
        }

This replaces commas in the selected html (and breaks the image) and not in the smart fragment, patched code:

        if (selectedText && selectedText.length) {
          // html = html.replaceAll(",","\\,"); // replacing the commas will only work if snippet has no binary data in it
          // should only do this within ".." we need to investigate how...
          html = html.replace("*selection*", selectedText); 
        } else {

turns out it is not safe to escape commas indiscriminately (We would need an intelligent parser here that only looks at strings contained in double auotes, which is not trivial to write)

Fixed version below:

smartTemplate-fx-4.4pre80.zip

To test this, download the zip file, drag the file into Thunderbird Add-ons Manager, do not extract contents or if won't install.

RealRaven2000 commented 4 months ago

Implemented in 4.4 - published 28/03/2024