Zimbra SkillZ: Social Justice Zimlet

Hello Zimbra Customers, Partners & Friends,

Today’s new Zimlet from Barry de Graaff, Channel Evangelist for Zimbra Synacor, is the Social Justice Zimlet. While you write an email, this Zimlet suggests alternative words when appropriate. For example: master ldap > primary ldap.

This post shows you how to write a Zimlet that uses a keyup event, so you can write Zimlets that interact with the Zimbra composer while the user types. The Social Justice Zimlet is an example of using keyup. This blog also shows you how to use the selection object to do advanced tricks.

For all the relevant files, click here: https://github.com/Zimbra/zimbra-zimlet-social-justice

 The Social Justice Zimlet.

Zimlets for Advanced Uses of Composer

The Zimbra composer is based on TinyMCE. You can use the browser’s native selection object and combine it with TinyMCE’s comprehensive API to do advanced tasks.

This code snippet shows how to add an onkeyup event handler and get the last typed word:

export default class MoreMenu extends Component {
    constructor(props) {
        super(props);
        this.zimletContext = props.children.context;

        this.props.getComposer().on('keyup', function (e) {
                var selRng = this.props.getComposer().selection.getRng();
                this.props.getComposer().selection.setRng(selRng);
        
                let content = this.props.getComposer().selection;
                let contentText = content.getSel().focusNode.data;
                try {
                    let contentTillCaret = contentText.substring(0, selRng.startOffset);
                    let lastTypedWord = this.lastWord(contentTillCaret);
                    //do something here
                } catch (err) { console.log(err) };
        }.bind(this));
    }

This code snippet shows how to replace the last typed word:

    
    replaceWord = (myNewWord) => {  
        this.props.getComposer().selection.getSel().modify('extend', 'backward', 'word');
        this.props.getComposer().selection.setContent(myNewWord);
    }

Enjoy the new Social Justice Zimlet,

Your Zimbra Friends & Colleagues