cryptpad/www/pad/comments.js

define([
    'jquery',
    'json.sortify',
    '/common/common-util.js',
    '/common/common-hash.js',
    '/common/hyperscript.js',
    '/common/common-interface.js',
    '/common/common-ui-elements.js',
    '/customize/messages.js'
], function($, Sortify, Util, Hash, h, UI, UIElements, Messages) {
    var Comments = {};

    /*
    {
        authors: {
            "id": {
                name: "",
                curvePublic: "",
                avatar: "",
                profile: ""
            }
        },
        data: {
            "uid": {
                m: [{
                    u: id,
                    m: "str", // comment
                    t: +new Date,
                    v: "str", // value of the commented content
                    e: undefined/1, // edited
                    d: undefined/1, // deleted
                }],
                d: undefined/1,
            }
        }
    }
    */

    var COMMENTS = {
        authors: {},
        data: {}
    };

    var canonicalize = function(t) { return t.replace(/\r\n/g, '\n'); };

    var getAuthorId = function(Env, curve) {
        return Env.common.getAuthorId(Env.comments.authors, curve);
    };

    // Return the author ID  and add/update the data for registered users
    // Return the username for unregistered users
    var updateAuthorData = function(Env, onChange) {
        var userData = Env.metadataMgr.getUserData();
        if (!Env.common.isLoggedIn()) {
            return userData.name;
        }
        var myAuthorId = getAuthorId(Env, userData.curvePublic);
        var data = Env.comments.authors[myAuthorId] = Env.comments.authors[myAuthorId] || {};
        var old = Sortify(data);
        data.name = userData.name;
        data.avatar = userData.avatar;
        data.profile = userData.profile;
        data.curvePublic = userData.curvePublic;
        data.notifications = userData.notifications;
        if (typeof(onChange) === "function" && Sortify(data) !== old) {
            onChange();
        }
        return myAuthorId;
    };

    var updateMetadata = function(Env) {
        var md = Util.clone(Env.metadataMgr.getMetadata());
        md.comments = Util.clone(Env.comments);
        Env.metadataMgr.updateMetadata(md);
    };

    var sendReplyNotification = function(Env, uid) {
        if (!Env.comments || !Env.comments.data || !Env.comments.authors) { return; }
        if (!Env.common.isLoggedIn()) { return; }
        var thread = Env.comments.data[uid];
        if (!thread || !Array.isArray(thread.m)) { return; }
        var userData = Env.metadataMgr.getUserData();
        var privateData = Env.metadataMgr.getPrivateData();
        var others = {};
        // Get all the other registered users with a mailbox
        thread.m.forEach(function(obj) {
            var u = obj.u;
            if (typeof(u) !== "number") { return; }
            var author = Env.comments.authors[u];
            if (!author || others[u] || !author.notifications || !author.curvePublic) { return; }
            if (author.curvePublic === userData.curvePublic) { return; } // don't send to yourself
            others[u] = {
                curvePublic: author.curvePublic,
                comment: obj.m,
                content: obj.v,
                notifications: author.notifications
            };
        });
        // Send the notification
        Object.keys(others).forEach(function(id) {
            var data = others[id];
            Env.common.mailbox.sendTo("COMMENT_REPLY", {
                channel: privateData.channel,
                comment: data.comment.replace(/<[^>]*>/g, ''),
                content: data.content
            }, {
                channel: data.notifications,
                curvePublic: data.curvePublic
            });
        });

    };

    var cleanMentions = function($el) {
        $el.html('');
        var el = $el[0];
        var allowed = ['data-profile', 'data-name', 'data-avatar', 'class'];
        // Remove unnecessary/unsafe attributes
        for (var i = el.attributes.length - 1; i > 0; i--) {
            var name = el.attributes[i] && el.attributes[i].name;
            if (allowed.indexOf(name) === -1) {
                $el.removeAttr(name);
            }
        }
    };

    // Seletc all text of a contenteditable element
    var selectAll = function(element) {
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    };

    var getCommentForm = function(Env, reply, _cb, editContent) {
        var cb = Util.once(_cb);
        var userData = Env.metadataMgr.getUserData();
        var name = Util.fixHTML(userData.name || Messages.anonymous);
        var avatar = h('span.cp-avatar');
        var textarea = h('div.cp-textarea', {
            tabindex: 1,
            role: 'textbox',
            'aria-multiline': true,
            'aria-labelledby': 'cp-comments-label',
            'aria-required': true,
            contenteditable: true,
        });
        Env.common.displayAvatar($(avatar), userData.avatar, name);

        var cancel = h('button.btn.btn-cancel', {
            tabindex: 1
        }, [
            h('i.fa.fa-times'),
            Messages.cancel
        ]);
        var submit = h('button.btn.btn-primary', {
            tabindex: 1
        }, [
            h('i.fa.fa-paper-plane-o'),
            Messages.comments_submit
        ]);

        // List of allowed attributes in mentions
        $(submit).click(function(e) {
            e.stopPropagation();
            var clone = textarea.cloneNode(true);
            var notify = {};
            var $clone = $(clone);
            $clone.find('span.cp-mentions').each(function(i, el) {
                var $el = $(el);
                var curve = $el.attr('data-curve');
                var notif = $el.attr('data-notifications');
                cleanMentions($el, true);
                if (!curve || !notif) { return; }
                notify[curve] = notif;
            });
            $clone.find('br').replaceWith("\n");
            $clone.find('> *:not(.cp-mentions)').remove();
            var content = clone.innerHTML.trim();
            if (!content) { return; }

            // Send notification
            var privateData = Env.metadataMgr.getPrivateData();
            var userData = Env.metadataMgr.getUserData();
            Object.keys(notify).forEach(function(curve) {
                if (curve === userData.curvePublic) { return; }
                Env.common.mailbox.sendTo("MENTION", {
                    channel: privateData.channel,
                }, {
                    channel: notify[curve],
                    curvePublic: curve
                });
            });

            // Push the content
            cb(content);
        });
        $(cancel).click(function(e) {
            e.stopPropagation();
            cb();
        });

        var $text = $(textarea).keydown(function(e) {
            e.stopPropagation();
            if (e.which === 27) {
                $(cancel).click();
                e.stopImmediatePropagation();
            }
            if (e.which === 13 && !e.shiftKey) {
                // Submit form on Enter is the autocompelte menu is not visible
                try {
                    var visible = $text.autocomplete("instance").menu.activeMenu.is(':visible');
                    if (visible) { return; }
                } catch (err) {}
                $(submit).click();
                e.stopImmediatePropagation();
                e.preventDefault();
            }
        }).click(function(e) {
            e.stopPropagation();
        });


        if (Env.common.isLoggedIn()) {
            var authors = {};
            Object.keys((Env.comments && Env.comments.authors) ||  {}).forEach(function(id) {
                var obj = Util.clone(Env.comments.authors[id]);
                authors[obj.curvePublic] = obj;
            });
            Env.common.addMentions({
                $input: $text,
                contenteditable: true,
                type: 'contacts',
                sources: authors
            });
        }

        var deleteButton;
        // Edit? start with the old content
        // Add a space to make sure we won't end with a mention and a bad cursor
        if (editContent) {
            textarea.innerHTML = editContent + " ";
            deleteButton = h('button.btn.btn-danger', {
                tabindex: 1
            }, [
                h('i.fa.fa-times'),
                Messages.kanban_delete
            ]);
            $(deleteButton).click(function(e) {
                e.stopPropagation();
                cb(false);
            });
        }


        setTimeout(function() {
            $(textarea).focus();
            selectAll(textarea);
        });

        return h('div.cp-comment-form' + (reply ? '.cp-comment-reply' : ''), {
            'data-uid': reply || ''
        }, [
            h('div.cp-comment-form-input', [
                avatar,
                textarea
            ]),
            h('div.cp-comment-form-actions', [
                cancel,
                deleteButton,
                submit
            ])
        ]);
    };

    var redrawComments = function(Env) {
        // Don't redraw if there were no change
        var str = Sortify(Env.comments || {});
        if (str === Env.oldComments) { return; }
        Env.oldComments = str;

        // Store the cursor position if it's located in this form
        var oldSelection = window.getSelection();
        var oldRangeObj;
        if ($(oldSelection.anchorNode).closest('.cp-comment-form').length) {
            var oldRange = oldSelection.getRangeAt && oldSelection.getRangeAt(0);
            oldRangeObj = {
                start: oldRange.startContainer,
                startO: oldRange.startOffset,
                end: oldRange.endContainer,
                endO: oldRange.endOffset
            };
        }
        // Store existing input form in memory
        var $oldInput = Env.$container.find('.cp-comment-form').detach();
        if ($oldInput.length !== 1) { $oldInput = undefined; }

        // Remove everything
        Env.$container.html('');

        // "show" tells us if we need to display the "comments" column or not
        var show = false;

        // If we were adding a new comment, redraw our form
        if ($oldInput && !$oldInput.attr('data-uid')) {
            show = true;
            Env.$container.append($oldInput);
        }

        var userData = Env.metadataMgr.getUserData();

        // Get all the comment threads in their order in the pad
        var threads = Env.$inner.find('comment').map(function(i, el) {
            return el.getAttribute('data-uid');
        }).toArray();

        // Draw all comment threads
        Util.deduplicateString(threads).forEach(function(key) {
            // Get thread data
            var obj = Env.comments.data[key];
            if (!obj || obj.d ||  !Array.isArray(obj.m) ||  !obj.m.length) {
                return;
            }

            // If at least one thread is visible, display the "comments" column
            show = true;

            var content = [];
            var $div;
            var $actions;

            // Draw all messages for this thread
            (obj.m || []).forEach(function(msg, i) {
                var replyCls = i === 0 ? '' : '.cp-comment-reply';
                if (msg.d) {

                    content.push(h('div.cp-comment.cp-comment-deleted' + replyCls,
                        Messages.comments_deleted));
                    return;
                }
                var author = typeof(msg.u) === "number" ?
                    ((Env.comments.authors || {})[msg.u] || {}) : { name: msg.u };
                var name = Util.fixHTML(author.name || Messages.anonymous);
                var date = new Date(msg.t);
                var avatar = h('span.cp-avatar');
                Env.common.displayAvatar($(avatar), author.avatar, name);
                if (author.profile) {
                    $(avatar).click(function(e) {
                        Env.common.openURL(Hash.hashToHref(author.profile, 'profile'));
                        e.stopPropagation();
                    });
                }

                // Build sanitized html with mentions
                var m = h('div.cp-comment-content');
                m.innerHTML = msg.m;
                var $m = $(m);
                $m.find('> *:not(span.cp-mentions)').remove();
                $m.find('span.cp-mentions').each(function(i, el) {
                    var $el = $(el);
                    var name = $el.attr('data-name');
                    var avatarUrl = $el.attr('data-avatar');
                    var profile = $el.attr('data-profile');
                    if (!name && !avatarUrl && !profile) {
                        $el.remove();
                        return;
                    }
                    cleanMentions($el);
                    var avatar = h('span.cp-avatar');
                    Env.common.displayAvatar($(avatar), avatarUrl, name);
                    $el.append([
                        avatar,
                        h('span.cp-mentions-name', name)
                    ]);
                    if (profile) {
                        $el.attr('tabindex', 1);
                        $el.addClass('cp-mentions-clickable').click(function(e) {
                            e.preventDefault();
                            e.stopPropagation();
                            Env.common.openURL(Hash.hashToHref(profile, 'profile'));
                        }).focus(function(e) {
                            e.stopPropagation();
                        });
                    }
                });

                // edited state
                var edited;
                if (msg.e) {
                    edited = h('div.cp-comment-edited', Messages.comments_edited);
                }

                var container;

                // Add edit button when applicable (last message of the thread, written by ourselves)
                var edit;
                if (i === (obj.m.length - 1) && author.curvePublic === userData.curvePublic) {
                    edit = h('span.cp-comment-edit', {
                        tabindex: 1,
                        title: Messages.clickToEdit
                    }, h('i.fa.fa-pencil'));
                    $(edit).click(function(e) {
                        Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
                        $div.addClass('cp-comment-active');
                        e.stopPropagation();
                        Env.$container.find('.cp-comment-form').remove();
                        if ($actions) { $actions.hide(); }
                        var form = getCommentForm(Env, key, function(val) {
                            // Show the "reply" and "resolve" buttons again
                            $(form).closest('.cp-comment-container')
                                .find('.cp-comment-actions').css('display', '');
                            $(form).remove();

                            if (typeof(val) === "undefined") { return; }

                            var obj = Env.comments.data[key];
                            if (!obj || !Array.isArray(obj.m)) { return; }
                            var msg = obj.m[i];
                            if (!msg) { return; }
                            // i is our index
                            if (val === false) {
                                msg.d = 1;
                                if (container) {
                                    $(container).addClass('cp-comment-deleted')
                                        .html(Messages.comments_deleted);
                                }
                                if (obj.m.length === 1) {
                                    delete Env.comments.data[key];
                                }
                            } else {
                                msg.e = 1;
                                msg.m = val;
                            }

                            // Send to chainpad
                            updateMetadata(Env);
                            Env.framework.localChange();
                        }, m.innerHTML);

                        if (!$div) { return; }
                        $div.append(form);
                    });
                }

                // Add the comment
                content.push(container = h('div.cp-comment' + replyCls, [
                    h('div.cp-comment-header', [
                        avatar,
                        h('span.cp-comment-metadata', [
                            h('span.cp-comment-author', name),
                            h('span.cp-comment-time', date.toLocaleString())
                        ]),
                        edit
                    ]),
                    m,
                    edited
                ]));

            });

            var reply = h('button.btn.btn-secondary', {
                tabindex: 1
            }, [
                h('i.fa.fa-reply'),
                Messages.comments_reply
            ]);
            var resolve = h('button.btn.btn-primary', {
                tabindex: 1
            }, [
                h('i.fa.fa-check'),
                Messages.comments_resolve
            ]);

            var actions;
            content.push(actions = h('div.cp-comment-actions', [
                reply,
                resolve
            ]));
            $actions = $(actions);

            var div;
            Env.$container.append(div = h('div.cp-comment-container', {
                'data-uid': key,
                tabindex: 1
            }, content));
            $div = $(div);

            $(reply).click(function(e) {
                e.stopPropagation();
                $actions.hide();
                var form = getCommentForm(Env, key, function(val) {
                    // Show the "reply" and "resolve" buttons again
                    $(form).closest('.cp-comment-container')
                        .find('.cp-comment-actions').css('display', '');
                    $(form).remove();

                    if (!val) { return; }
                    var obj = Env.comments.data[key];
                    if (!obj || !Array.isArray(obj.m)) { return; }

                    // Get the value of the commented text
                    var res = Env.$inner.find('comment[data-uid="' + key + '"]').toArray();
                    var value = res.map(function(el) {
                        return el.innerText;
                    }).join('\n');

                    // Push the reply
                    var user = updateAuthorData(Env);
                    obj.m.push({
                        u: user, // id (number) or name (string)
                        t: +new Date(),
                        m: val,
                        v: value
                    });

                    // Notify other users
                    sendReplyNotification(Env, key);

                    // Send to chainpad
                    updateMetadata(Env);
                    Env.framework.localChange();
                });

                $div.append(form);

                // Make sure the submit button is visible: scroll by the height of the form
                setTimeout(function() {
                    var yContainer = Env.$container[0].getBoundingClientRect().bottom;
                    var yActions = form.getBoundingClientRect().bottom;
                    if (yActions > yContainer) {
                        Env.$container.scrollTop(Env.$container.scrollTop() + 55);
                    }
                });
            });

            UI.confirmButton(resolve, {
                classes: 'btn-danger'
            }, function() {
                // Delete the comment
                delete Env.comments.data[key];

                // Send to chainpad
                updateMetadata(Env);
                Env.framework.localChange();
            });

            var focusContent = function() {
                // Add class "active"
                Env.$inner.find('comment.active').removeClass('active');
                Env.$inner.find('comment[data-uid="' + key + '"]').addClass('active');
                var $last = Env.$inner.find('comment[data-uid="' + key + '"]').last();

                // Scroll into view
                if (!$last.length) { return; }
                var visible = UIElements.isVisible($last[0], Env.$inner);
                if (!visible) { $last[0].scrollIntoView(); }
            };

            $div.on('click focus', function(e) {
                // Prevent the click event to propagate if we're already selected
                // The propagation to #cp-app-pad-inner would trigger the "unselect" handler
                e.stopPropagation();
                if ($div.hasClass('cp-comment-active')) { return; }
                Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
                $div.addClass('cp-comment-active');
                $actions.css('display', '');
                Env.$container.find('.cp-comment-form').remove();

                focusContent();

                var visible = UIElements.isVisible(div, Env.$container);
                if (!visible) { div.scrollIntoView(); }
            });

            if ($oldInput && $oldInput.attr('data-uid') === key) {
                $div.addClass('cp-comment-active');
                $actions.hide();
                $div.append($oldInput);
                $oldInput.find('textarea').focus();
                focusContent();
            }
        });

        // Restore selection
        if (oldRangeObj) {
            setTimeout(function() {
                if (!oldRangeObj) { return; }
                var range = document.createRange();
                range.setStart(oldRangeObj.start, oldRangeObj.startO);
                range.setEnd(oldRangeObj.end, oldRangeObj.endO);
                var sel = window.getSelection();
                sel.removeAllRanges();
                sel.addRange(range);
            });
        }

        if (show) {
            Env.$container.show();
        } else {
            Env.$container.hide();
        }
    };

    var onChange = function(Env) {
        var md = Util.clone(Env.metadataMgr.getMetadata());
        Env.comments = md.comments;
        var changed = false;
        if (!Env.comments || !Env.comments.data) {
            changed = true;
            Env.comments = Util.clone(COMMENTS);
        }
        if (Env.ready === 0) {
            Env.ready = true;
            updateAuthorData(Env, function() {
                changed = true;
            });
            // On ready, if our user data have changed or if we've added the initial structure
            // of the comments, push the changes
            if (changed) {
                updateMetadata(Env);
                Env.framework.localChange();
            }
        } else if (Env.ready) {
            // Everytime there is a metadata change, check if our user data have changed
            // and push the updates if necessary
            updateAuthorData(Env, function() {
                updateMetadata(Env);
                Env.framework.localChange();
            });
        }
        redrawComments(Env);
    };

    // Check if comments have been deleted from the document but not from metadata
    var checkDeleted = function(Env) {
        if (!Env.comments || !Env.comments.data) { return; }

        // Don't recheck if there were no change
        var str = Env.$inner[0].innerHTML;
        if (str === Env.oldCheck) { return; }
        Env.oldCheck = str;

        // If there is no comment stored in the metadata, abort
        var comments = Object.keys(Env.comments.data || {}).filter(function(id) {
            return !Env.comments.data[id].d;
        });

        var changed = false;

        // Get the comments from the document
        var toUncomment = {};
        var uids = Env.$inner.find('comment').map(function(i, el) {
            var id = el.getAttribute('data-uid');
            // Empty comment: remove from dom
            if (!el.innerHTML && el.parentElement) {
                el.parentElement.removeChild(el);
                changed = true;
                return;
            }
            // Comment not in the metadata: uncomment (probably an undo)
            var obj = Env.comments.data[id];
            if (!obj) {
                toUncomment[id] = toUncomment[id] || [];
                toUncomment[id].push(el);
                changed = true;
                return;
            }
            // If this comment was deleted, we're probably using "undo" to restore it:
            // remove the "deleted" state and continue
            if (obj.d) {
                delete obj.d;
                changed = true;
            }
            return id;
        }).toArray();

        if (Object.keys(toUncomment).length) {
            Object.keys(toUncomment).forEach(function(id) {
                Env.editor.plugins.comments.uncomment(id, toUncomment[id]);
            });
        }

        // Check if a comment has been deleted
        comments.forEach(function(uid) {
            if (uids.indexOf(uid) !== -1) { return; }
            // comment has been deleted
            var data = Env.comments.data[uid];
            if (!data) { return; }
            data.d = 1;
            //delete Env.comments.data[uid];
            changed = true;
        });

        if (changed) {
            updateMetadata(Env);
        }
    };

    var removeCommentBubble = function(Env) {
        Env.bubble = undefined;
        Env.$contentContainer.find('.cp-comment-bubble').remove();
    };
    var updateBubble = function(Env) {
        if (!Env.bubble) { return; }
        var pos = Env.bubble.node.getBoundingClientRect();
        if (pos.y < 0 || pos.y > Env.$inner.outerHeight()) {
            //removeCommentBubble(Env);
        }
        Env.bubble.button.setAttribute('style', 'top:' + pos.y + 'px');
    };
    var addCommentBubble = function(Env) {
        var ranges = Env.editor.getSelectedRanges();
        if (!ranges.length) { return; }
        var el = ranges[0].endContainer || ranges[0].startContainer;
        var node = el && el.$;
        if (!node) { return; }
        if (node.nodeType === Node.TEXT_NODE) {
            node = node.parentNode;
            if (!node) { return; }
        }
        var pos = node.getBoundingClientRect();
        var y = pos.y;
        if (y < 0 || y > Env.$inner.outerHeight()) { return; }
        var button = h('button.btn.btn-secondary', {
            style: 'top:' + y + 'px;',
            title: Messages.comments_comment
        }, h('i.fa.fa-comment'));
        Env.bubble = {
            node: node,
            button: button
        };
        $(button).click(function(e)  {
            e.stopPropagation();
            Env.editor.execCommand('comment');
            Env.bubble = undefined;
        });
        Env.$contentContainer.append(h('div.cp-comment-bubble', button));
    };

    var isEditable = function (document) {
        try {
            return document.body.getAttribute('contenteditable') === 'true';
        } catch (err) {
            return false;
        }
    };

    var addAddCommentHandler = function(Env) {
        Env.editor.plugins.comments.addComment = function(uid, addMark) {
            if (!Env.ready) { return; }
            if (!Env.comments) { Env.comments = Util.clone(COMMENTS); }

            // Get all comments ID contained within the selection
            var applicable = Env.editor.plugins.comments.isApplicable();
            if (!applicable || !isEditable(Env.ifrWindow.document)) {
                // Abort if our selection contains a comment
                UI.warn(Messages.comments_error);
                return;
            }

            // Remove active class on other comments
            Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
            Env.$container.find('.cp-comment-form').remove();
            var form = getCommentForm(Env, false, function(val) {
                $(form).remove();
                Env.$inner.focus();

                if (!val) { return; }
                var applicable = Env.editor.plugins.comments.isApplicable();
                if (!applicable || !isEditable(Env.ifrWindow.document)) {
                    // text has been deleted by another user while we were typing our comment?
                    return void UI.warn(Messages.error);
                }

                // Don't override existing data
                if (Env.comments.data[uid]) { return; }

                var user = updateAuthorData(Env);
                Env.comments.data[uid] = {
                    m: [{
                        u: user, // Id or name
                        t: +new Date(),
                        m: val,
                        v: canonicalize(Env.editor.getSelection().getSelectedText())
                    }]
                };
                // There may be a race condition between updateMetadata and addMark that causes
                //  * updateMetadata first:  comment not rendered (redrawComments called
                //                           before addMark)
                //  * addMark first: comment deleted (checkDeleted called before updateMetadata)
                // ==> we're going to call updateMetadata first, and we'll invalidate the cache
                //     of rendered comments to display them properly in redrawComments
                updateMetadata(Env);
                addMark();

                Env.framework.localChange();

                Env.oldComments = undefined;
            });
            Env.$container.prepend(form).show();
        };


        Env.$iframe.on('scroll', function() {
            updateBubble(Env);
        });
        $(Env.ifrWindow.document).on('selectionchange', function() {
            removeCommentBubble(Env);
            var comments = Env.editor.plugins.comments;
            var applicable = comments.isApplicable();
            if (!applicable || !isEditable(Env.ifrWindow.document)) {
                return void comments.command.setState(0);
            }
            addCommentBubble(Env);
            comments.command.setState(2);
        });
    };

    var onContentUpdate = function(Env) {
        if (!Env.ready) { return; }
        // Check deleted
        onChange(Env);
        checkDeleted(Env);
    };

    var ready = function(Env) {
        Env.ready = 0;

        // If you're the only edit user online, clear "deleted" comments
        if (!Env.common.isLoggedIn()) { return; }
        var users = Env.metadataMgr.getMetadata().users || {};
        var isNotAlone = Object.keys(users).length > 1;
        if (isNotAlone) { return; }

        // Clear data
        var data = (Env.comments && Env.comments.data) || {};
        Object.keys(data).forEach(function(uid) {
            if (data[uid].d) { delete data[uid]; }
        });

        // Commit
        updateMetadata(Env);
        Env.framework.localChange();
    };

    Comments.create = function(cfg) {
        var Env = cfg;
        Env.comments = Util.clone(COMMENTS);

        // Add invisible label for accessibility tools
        var label = h('label#cp-comments-label', {
            style: "display:none;"
        }, Messages.comments_comment);
        Env.$container.before(label);

        var ro = cfg.framework.isReadOnly();
        var onEditableChange = function(unlocked) {
            Env.$container.removeClass('cp-comments-readonly');
            if (ro || !unlocked) {
                Env.$container.addClass('cp-comments-readonly');
            }
        };
        cfg.framework.onEditableChange(onEditableChange);
        onEditableChange();

        addAddCommentHandler(Env);

        // Unselect comment when clicking outside
        $(window).click(function(e) {
            var $target = $(e.target);
            if (!$target.length) { return; }
            if ($target.is('.cp-comment-container')) { return; }
            if ($target.closest('.cp-comment-container').length) { return; }
            if ($target.closest('.ui-autocomplete').length) { return; }
            // Add comment button? don't remove anything because this handler is called after
            // the button action
            if ($target.is('.cke_button__comment')) { return; }
            if ($target.closest('.cke_button__comment').length) { return; }
            Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
            Env.$inner.find('comment.active').removeClass('active');
            Env.$container.find('.cp-comment-form').remove();
        });
        // Unselect comment when clicking on another part of the doc
        Env.$inner.on('click', function(e) {
            if ($(e.target).closest('comment').length) { return; }
            Env.$container.find('.cp-comment-active').removeClass('cp-comment-active');
            Env.$inner.find('comment.active').removeClass('active');
            Env.$container.find('.cp-comment-form').remove();
        });
        Env.$inner.on('click', 'comment', function(e) {
            var $comment = $(e.target);
            var uid = $comment.attr('data-uid');
            if (!uid) { return; }
            Env.$container.find('.cp-comment-container[data-uid="' + uid + '"]').click();
        });

        var call = function(f) {
            return function() {
                try {
                    [].unshift.call(arguments, Env);
                    return f.apply(null, arguments);
                } catch (e) {
                    console.error(e);
                }
            };
        };

        Env.metadataMgr.onChange(call(onChange));

        return {
            onContentUpdate: call(onContentUpdate),
            ready: call(ready)
        };
    };

    return Comments;
});