eWizard.js v4.21.0

January 2021

Inline editing for all text components

Now you can double-click the component in eWizard Editor to start editing its text inline.

To define the prop for editing, add the data-prop="name" attribute to each tag of the component template.

Add the prop types: "Chapter" and "Chapters"

We've added the chapter properties to eWizard.js. Now you can select chapters from the Chapter or Chapters drop-down menus in eWizard Editor.

Customize your components using the Chapter and Chapters properties.

props: {
    chapterProp: {
        label: {
            eng: "Chapter"
        },
        actualType: _componentTypes.PropType.Chapter
    },
    chaptersProp: {
        label: {
            eng: "Chapters"
        },
        actualType: _componentTypes.PropType.Chapters
    }
}

e-Detailers for Veeva CRM export: Performance improvements

Optimized the Veeva CRM build performance:

• Added the CSS styles as inline in HTML to reduce the number of resource requests.

• The fonts on the slides are now preloaded. No more text shimmering in transition between the slides in CLM Player.

• The JavaScript files loading is postponed to the window load event. This helps not to block the initial HTML rendering and to show the First Meaningful Paint faster.

• The small images are now rendered inline in HTML to reduce the number of resource requests and speed up the slide loading on the device. You can configure the maximum size of images that must be inline in the settings.json file.

Attribute	Data type	Description
maxInlinedImageSize	Number	The maximum size of images that are rendered inline in the HTML code instead of referencing an external resource. The default size is 5 KB.

This feature reduces the number of resource requests and speeds up the slide loading on the device.

Export as PDF: Add the slide lifecycle hook before making an initial screenshot

Added the beforeScreenshot lifecycle hook to the slides. This Hook changes how the slide is displayed before the initial screenshot is taken. When you subscribe to this hook, you can change the slide animation or video to the desired state.

eWizard.js framework calls this hook for the slide components if:

• The screenshot mode is active.

• The slide is mounted.

• After the hook onenter.

Consider an example when created has the timer. We reset the timer in a new hook.

created() {
        this.timerId = setTimeout(() => {
            this.setStartValue();
        }, 500);
    },
    beforeScreenshot() {
        clearTimeout(this.timerId);
        this.setStartValue();
    },

*[Hook]: Lifecycle hooks allow you to know when your component is created, added to the DOM, updated, or destroyed.

Text Editor improvements

CSS classes and empty span tags aren't removed automatically

When an e-Detailer is converted from PDF, the text styles and letter spacing are added as the CSS classes. eWizard Editor treated these CSS classes as an external attributes and removed them.

This improvement leaves the CSS classes and empty <span> tags untouched when you're editing the text in Editor.

Link underline improvements

This improvement fixed the underline color in hyperlinks:

1. The text-decoration: underline property is applied to the <span> tag inside the <a> tag to fix the link underline color.

2. To remove the link underlining, the text-decoration: none property is applied to the <a> tag to prevent default browser link underlining.

Fix paragraphs in emails

Now you don't have to worry about deleting paragraphs in eWizard Editor. Before, when you deleted the white spaces, you could delete the spaces reserved for the paragraphs.

To display paragraphs in your emails correctly, the new feature finds extra white spaces in the text and removes them in the paragraphs.

"Nowrap" plugin enhancements

Now, when you click the Nowrap button in eWizard Editor, all the white spaces inside the text wrapped in the nowrap span are turned into the nbsp; non-breaking spaces.

Before you build the project:

<span style="white-space: nowrap;">text text</span>

After you've built the project:

<span style="white-space: nowrap;">text&nbsp;text</span>

When you use compound words with hyphens in your email templates, a part of this word may wrap to the next line.

For example, this well-
known word should stay on the same line.

That's why we've added the <span></span> tag with the white-space:nowrap style that prevents the hyphenated words from wrapping:

<span style="white-space:nowrap">well-known</span>

Now all the compound words with hyphens stay on the same line.