Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature Request: Add support for preheaders #274

Closed
RealRaven2000 opened this issue Nov 8, 2023 · 11 comments
Closed

Feature Request: Add support for preheaders #274

RealRaven2000 opened this issue Nov 8, 2023 · 11 comments
Assignees

Comments

@RealRaven2000
Copy link
Owner

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:

  • preheader should be a <div> that is injected as first direct child of <body>
  • it should support plain text of 90 characters or more. It is typically hidden in the email itself
  • it should support a custom class name that can be used by the template to hide the text or display it in alternative ways
  • when changing the template in Thunderbird, (by selecting a different template) the preheader element must be removed before injecting the new template

Suggestion:

  • Add a SmartTemplates variable %preheader("text content",className)%
  • Problem, if the text supports commas they may have to be escaped in order to still also support a custom class
@RealRaven2000
Copy link
Owner Author

RealRaven2000 commented Nov 8, 2023

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 RealRaven2000 pinned this issue Feb 21, 2024
@RealRaven2000 RealRaven2000 changed the title Add support for preheaders Feature Request: Add support for preheaders Feb 22, 2024
@RealRaven2000
Copy link
Owner Author

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
Copy link
Owner Author

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

RealRaven2000 added a commit that referenced this issue Feb 27, 2024
[issue 274] Add %preheader()% variable for injecting previe
@RealRaven2000
Copy link
Owner Author

RealRaven2000 commented Feb 27, 2024

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
Copy link
Owner Author

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 added a commit that referenced this issue Feb 27, 2024
Added footnote for escaping commas
@RealRaven2000
Copy link
Owner Author

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 added a commit that referenced this issue Feb 28, 2024
RealRaven2000 added a commit that referenced this issue Feb 28, 2024
support \, in string params
prompt to fill parameter for %preheder()%
refactored parseModifier( )
@RealRaven2000
Copy link
Owner Author

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 added a commit that referenced this issue Mar 4, 2024
Added support for clipboard and *selection* (in fragments)
Added documentation
Moved  gMsgCompose.editor.rootElement to wrapper object ST4.composer
@RealRaven2000
Copy link
Owner Author

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
Copy link
Owner Author

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
Copy link
Owner Author

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 RealRaven2000 unpinned this issue Mar 20, 2024
@RealRaven2000
Copy link
Owner Author

Implemented in 4.4 - published 28/03/2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant