').addClass('popup-content comment-modal-comment')));
+
+ // Add comments side bar container
+ target.prepend($('
').attr('id', 'comments'));
+
+ this.container = this.padOuter.find('#comments');
+};
+
+// Insert a comment node
+EpComments.prototype.insertComment = function (commentId, comment, index) {
+ let content = null;
+ const container = this.container;
+ const commentAfterIndex = container.find('.sidebar-comment').eq(index);
+
+ comment.commentId = commentId;
+ comment.reply = true;
+ content = $('#commentsTemplate').tmpl(comment);
+ if (comment.author !== clientVars.userId) {
+ $(content).find('.comment-actions-wrapper').addClass('hidden');
+ }
+ commentL10n.localize(content);
+
+ // position doesn't seem to be relative to rep
+
+ if (index === 0) {
+ content.prependTo(container);
+ } else if (commentAfterIndex.length === 0) {
+ content.appendTo(container);
+ } else {
+ commentAfterIndex.before(content);
+ }
+
+ // insert icon
+ commentIcons.addIcon(commentId, comment);
+};
+
+// Set all comments to be inline with their target REP
+EpComments.prototype.setYofComments = function () {
+ // for each comment in the pad
+ const padOuter = $('iframe[name="ace_outer"]').contents();
+ const padInner = padOuter.find('iframe[name="ace_inner"]');
+ const inlineComments = this.getFirstOcurrenceOfCommentIds();
+ const commentsToBeShown = [];
+
+ $.each(inlineComments, function () {
+ // classname is the ID of the comment
+ const commentId = /(?:^| )(c-[A-Za-z0-9]*)/.exec(this.className);
+ if (!commentId || !commentId[1]) return;
+ const commentEle = padOuter.find(`#${commentId[1]}`);
+
+ let topOffset = this.offsetTop;
+ topOffset += parseInt(padInner.css('padding-top').split('px')[0]);
+ topOffset += parseInt($(this).css('padding-top').split('px')[0]);
+
+ if (commentId) {
+ // adjust outer comment...
+ commentBoxes.adjustTopOf(commentId[1], topOffset);
+ // ... and adjust icons too
+ commentIcons.adjustTopOf(commentId[1], topOffset);
+
+ // mark this comment to be displayed if it was visible before we start adjusting its position
+ if (commentIcons.shouldShow(commentEle)) commentsToBeShown.push(commentEle);
+ }
+ });
+
+ // re-display comments that were visible before
+ _.each(commentsToBeShown, (commentEle) => {
+ commentEle.show();
+ });
+};
+
+EpComments.prototype.getFirstOcurrenceOfCommentIds = function () {
+ const padOuter = $('iframe[name="ace_outer"]').contents();
+ const padInner = padOuter.find('iframe[name="ace_inner"]').contents();
+ const commentsId = this.getUniqueCommentsId(padInner);
+ const firstOcurrenceOfCommentIds =
+ _.map(commentsId, (commentId) => padInner.find(`.${commentId}`).first().get(0));
+ return firstOcurrenceOfCommentIds;
+};
+
+EpComments.prototype.getUniqueCommentsId = function (padInner) {
+ const inlineComments = padInner.find('.comment');
+ const commentsId = _.map(inlineComments, (inlineComment) => {
+ const commentId = /(?:^| )(c-[A-Za-z0-9]*)/.exec(inlineComment.className);
+ // avoid when it has a '.comment' that it has a fakeComment class 'fakecomment-123' yet.
+ if (commentId && commentId[1]) return commentId[1];
+ });
+ return _.uniq(commentsId);
+};
+
+// Indicates if all comments are on the correct Y position, and don't need to
+// be adjusted
+EpComments.prototype.allCommentsOnCorrectYPosition = function () {
+ // for each comment in the pad
+ const padOuter = $('iframe[name="ace_outer"]').contents();
+ const padInner = padOuter.find('iframe[name="ace_inner"]');
+ const inlineComments = padInner.contents().find('.comment');
+ let allCommentsAreCorrect = true;
+
+ $.each(inlineComments, function () {
+ const y = this.offsetTop;
+ const commentId = /(?:^| )(c-[A-Za-z0-9]*)/.exec(this.className);
+ if (commentId && commentId[1]) {
+ if (!commentBoxes.isOnTop(commentId[1], y)) { // found one comment on the incorrect place
+ allCommentsAreCorrect = false;
+ return false; // to break loop
+ }
+ }
+ });
+
+ return allCommentsAreCorrect;
+};
+
+EpComments.prototype.localizeExistingComments = function () {
+ const self = this;
+ const padComments = this.padInner.contents().find('.comment');
+ const comments = this.comments;
+
+ padComments.each((key, it) => {
+ const $this = $(it);
+ const cls = $this.attr('class');
+ const classCommentId = /(?:^| )(c-[A-Za-z0-9]*)/.exec(cls);
+ const commentId = (classCommentId) ? classCommentId[1] : null;
+
+ if (commentId != null) {
+ const commentElm = self.container.find(`#${commentId}`);
+ const comment = comments[commentId];
+
+ // localize comment element...
+ commentL10n.localize(commentElm);
+ // ... and update its date
+ comment.data.date = moment(comment.data.timestamp).fromNow();
+ comment.data.formattedDate = new Date(comment.data.timestamp).toISOString();
+ $(commentElm).find('.comment-created-at').html(comment.data.date);
+ }
+ });
+};
+
+// Set comments content data
+EpComments.prototype.setComments = function (comments) {
+ for (const [commentId, comment] of Object.entries(comments)) {
+ this.setComment(commentId, comment);
+ }
+};
+
+// Set comment data
+EpComments.prototype.setComment = function (commentId, comment) {
+ const comments = this.comments;
+ comment.date = moment(comment.timestamp).fromNow();
+ comment.formattedDate = new Date(comment.timestamp).toISOString();
+
+ if (comments[commentId] == null) comments[commentId] = {};
+ comments[commentId].data = comment;
+};
+
+// commentReply = ['c-reply-123', commentDataObject]
+// commentDataObject = {author:..., name:..., text:..., ...}
+EpComments.prototype.setCommentReply = function (commentReply) {
+ const commentReplies = this.commentReplies;
+ const replyId = commentReply[0];
+ commentReplies[replyId] = commentReply[1];
+};
+
+// set the text of the comment or comment reply
+EpComments.prototype.setCommentOrReplyNewText = function (commentOrReplyId, text) {
+ if (this.comments[commentOrReplyId]) {
+ this.comments[commentOrReplyId].data.text = text;
+ } else if (this.commentReplies[commentOrReplyId]) {
+ this.commentReplies[commentOrReplyId].text = text;
+ }
+};
+
+// Get all comments
+EpComments.prototype.getComments = function (callback) {
+ const req = {padId: this.padId};
+
+ this.socket.emit('getComments', req, (res) => {
+ callback(res.comments);
+ });
+};
+
+// Get all comment replies
+EpComments.prototype.getCommentReplies = function (callback) {
+ const req = {padId: this.padId};
+ this.socket.emit('getCommentReplies', req, (res) => {
+ callback(res.replies);
+ });
+};
+
+EpComments.prototype.getCommentData = function () {
+ const data = {};
+
+ // Insert comment data
+ data.padId = this.padId;
+ data.comment = {};
+ data.comment.author = clientVars.userId;
+ data.comment.name = pad.myUserInfo.name;
+ data.comment.timestamp = new Date().getTime();
+
+ // If client is anonymous
+ if (data.comment.name === undefined) {
+ data.comment.name = clientVars.userAgent;
+ }
+
+ return data;
+};
+
+// Delete a pad comment
+EpComments.prototype.deleteComment = function (commentId) {
+ $('iframe[name="ace_outer"]').contents().find(`#${commentId}`).remove();
+};
+
+const parseMultiline = (text) => {
+ if (!text) return text;
+ text = JSON.stringify(text);
+ return text.substr(1, (text.length - 2));
+};
+
+EpComments.prototype.displayNewCommentForm = function () {
+ const rep = {};
+ const ace = this.ace;
+
+ ace.callWithAce((ace) => {
+ const saveRep = ace.ace_getRep();
+
+ rep.lines = saveRep.lines;
+ rep.selStart = saveRep.selStart;
+ rep.selEnd = saveRep.selEnd;
+ }, 'saveCommentedSelection', true);
+
+ const selectedText = this.getSelectedText(rep);
+ // we have nothing selected, do nothing
+ const noTextSelected = (selectedText.length === 0);
+ if (noTextSelected) {
+ $.gritter.add({
+ text: html10n.translations['ep_comments_page.add_comment.hint'] ||
+ 'Please first select the text to comment',
+ });
+ return;
+ }
+
+ this.createNewCommentFormIfDontExist(rep);
+
+ // Write the text to the changeFrom form
+ $('#newComment').find('.from-value').text(selectedText);
+
+ // Display form
+ newComment.showNewCommentPopup();
+
+ // Check if the first element selected is visible in the viewport
+ const $firstSelectedElement = this.getFirstElementSelected();
+ const firstSelectedElementInViewport = this.isElementInViewport($firstSelectedElement);
+
+ if (!firstSelectedElementInViewport) {
+ this.scrollViewportIfSelectedTextIsNotVisible($firstSelectedElement);
+ }
+
+ // Adjust focus on the form
+ $('#newComment').find('.comment-content').focus();
+};
+
+EpComments.prototype.scrollViewportIfSelectedTextIsNotVisible = function ($firstSelectedElement) {
+ // Set the top of the form to be the same Y as the target Rep
+ const y = $firstSelectedElement.offsetTop;
+ const padOuter = $('iframe[name="ace_outer"]').contents();
+ padOuter.find('#outerdocbody').scrollTop(y); // Works in Chrome
+ padOuter.find('#outerdocbody').parent().scrollTop(y); // Works in Firefox
+};
+
+EpComments.prototype.isElementInViewport = function (element) {
+ const elementPosition = element.getBoundingClientRect();
+ const outerdocbody = $('iframe[name="ace_outer"]').contents().find('#outerdocbody');
+ const scrolltop = (outerdocbody.scrollTop() ||
+ // Works only on Firefox:
+ outerdocbody.parent().scrollTop());
+ // position relative to the current viewport
+ const elementPositionTopOnViewport = elementPosition.top - scrolltop;
+ const elementPositionBottomOnViewport = elementPosition.bottom - scrolltop;
+
+ const $aceOuter = $('iframe[name="ace_outer"]');
+ const aceOuterHeight = $aceOuter.height();
+ const aceOuterPaddingTop = this.getIntValueOfCSSProperty($aceOuter, 'padding-top');
+
+ const clientHeight = aceOuterHeight - aceOuterPaddingTop;
+
+ const elementAboveViewportTop = elementPositionTopOnViewport < 0;
+ const elementBelowViewportBottom = elementPositionBottomOnViewport > clientHeight;
+
+ return !(elementAboveViewportTop || elementBelowViewportBottom);
+};
+
+EpComments.prototype.getIntValueOfCSSProperty = function ($element, property) {
+ const valueString = $element.css(property);
+ return parseInt(valueString) || 0;
+};
+
+EpComments.prototype.getFirstElementSelected = function () {
+ let element;
+
+ this.ace.callWithAce((ace) => {
+ const rep = ace.ace_getRep();
+ const line = rep.lines.atIndex(rep.selStart[0]);
+ const key = `#${line.key}`;
+ const padOuter = $('iframe[name="ace_outer"]').contents();
+ const padInner = padOuter.find('iframe[name="ace_inner"]').contents();
+ element = padInner.find(key);
+ }, 'getFirstElementSelected', true);
+
+ return element[0];
+};
+
+// Indicates if user selected some text on editor
+EpComments.prototype.checkNoTextSelected = function (rep) {
+ const noTextSelected = ((rep.selStart[0] === rep.selEnd[0]) &&
+ (rep.selStart[1] === rep.selEnd[1]));
+
+ return noTextSelected;
+};
+
+// Create form to add comment
+EpComments.prototype.createNewCommentFormIfDontExist = function (rep) {
+ const data = this.getCommentData();
+
+ // If a new comment box doesn't already exist, create one
+ data.changeFrom = parseMultiline(this.getSelectedText(rep));
+ newComment.insertNewCommentPopupIfDontExist(data, (comment, index) => {
+ if (comment.changeTo) {
+ data.comment.changeFrom = comment.changeFrom;
+ data.comment.changeTo = comment.changeTo;
+ }
+ data.comment.text = comment.text;
+
+ this.saveComment(data, rep);
+ });
+};
+
+// Get a string representation of the text selected on the editor
+EpComments.prototype.getSelectedText = function (rep) {
+ // The selection representation looks like this if it starts with the fifth character in the
+ // second line and ends at (but does not include) the third character in the eighth line:
+ // rep.selStart = [1, 4]; // 2nd line 5th char
+ // rep.selEnd = [7, 2]; // 8th line 3rd char
+ const selectedTextLines = [];
+ const lastLine = this.getLastLine(rep.selStart[0], rep);
+ for (let lineNumber = rep.selStart[0]; lineNumber <= lastLine; ++lineNumber) {
+ const line = rep.lines.atIndex(lineNumber);
+ const selStartsAfterLine = rep.selStart[0] > lineNumber ||
+ (rep.selStart[0] === lineNumber && rep.selStart[1] >= line.text.length);
+ if (selStartsAfterLine) continue; // Nothing in this line is selected.
+ const selEndsBeforeLine = rep.selEnd[0] < lineNumber ||
+ (rep.selEnd[0] === lineNumber && rep.selEnd[1] <= 0);
+ if (selEndsBeforeLine) continue; // Nothing in this line is selected.
+ const selStartsBeforeLine = rep.selStart[0] < lineNumber || rep.selStart[1] < 0;
+ const posStart = selStartsBeforeLine ? 0 : rep.selStart[1];
+ const selEndsAfterLine = rep.selEnd[0] > lineNumber || rep.selEnd[1] > line.text.length;
+ const posEnd = selEndsAfterLine ? line.text.length : rep.selEnd[1];
+ // If the selection includes the very beginning of line, and the line has a line marker, it
+ // means the line marker was selected as well. Exclude it from the selected text.
+ selectedTextLines.push(
+ line.text.substring((posStart === 0 && this.lineHasMarker(line)) ? 1 : posStart, posEnd));
+ }
+ return selectedTextLines.join('\n');
+};
+
+EpComments.prototype.getLastLine = function (firstLine, rep) {
+ let lastLineSelected = rep.selEnd[0];
+
+ if (lastLineSelected > firstLine) {
+ // Ignore last line if the selected text of it it is empty
+ if (this.lastLineSelectedIsEmpty(rep, lastLineSelected)) {
+ lastLineSelected--;
+ }
+ }
+ return lastLineSelected;
+};
+
+EpComments.prototype.lastLineSelectedIsEmpty = function (rep, lastLineSelected) {
+ const line = rep.lines.atIndex(lastLineSelected);
+ // when we've a line with line attribute, the first char line position
+ // in a line is 1 because of the *, otherwise is 0
+ const firstCharLinePosition = this.lineHasMarker(line) ? 1 : 0;
+ const lastColumnSelected = rep.selEnd[1];
+
+ return lastColumnSelected === firstCharLinePosition;
+};
+
+EpComments.prototype.lineHasMarker = function (line) {
+ return line.lineMarker === 1;
+};
+
+// Save comment
+EpComments.prototype.saveComment = function (data, rep) {
+ this.socket.emit('addComment', data, (commentId, comment) => {
+ comment.commentId = commentId;
+
+ this.ace.callWithAce((ace) => {
+ // we should get rep again because the document might have changed..
+ // details at https://github.com/ether/ep_comments/issues/133
+ rep = ace.ace_getRep();
+ ace.ace_performSelectionChange(rep.selStart, rep.selEnd, true);
+ ace.ace_setAttributeOnSelection('comment', commentId);
+ }, 'insertComment', true);
+
+ this.setComment(commentId, comment);
+ this.collectComments();
+ });
+};
+
+// commentData = {c-newCommentId123: data:{author:..., date:..., ...},
+// c-newCommentId124: data:{...}}
+EpComments.prototype.saveCommentWithoutSelection = function (padId, commentData) {
+ const data = this.buildComments(commentData);
+ this.socket.emit('bulkAddComment', padId, data, (comments) => {
+ this.setComments(comments);
+ this.shouldCollectComment = true;
+ });
+};
+
+EpComments.prototype.buildComments = function (commentsData) {
+ const comments =
+ _.map(commentsData, (commentData, commentId) => this.buildComment(commentId, commentData.data));
+ return comments;
+};
+
+// commentData = {c-newCommentId123: data:{author:..., date:..., ...}, ...
+EpComments.prototype.buildComment = function (commentId, commentData) {
+ const data = {};
+ data.padId = this.padId;
+ data.commentId = commentId;
+ data.text = commentData.text;
+ data.changeTo = commentData.changeTo;
+ data.changeFrom = commentData.changeFrom;
+ data.name = commentData.name;
+ data.timestamp = parseInt(commentData.timestamp);
+
+ return data;
+};
+
+EpComments.prototype.getMapfakeComments = function () {
+ return this.mapFakeComments;
+};
+
+// commentReplyData = {c-reply-123:{commentReplyData1}, c-reply-234:{commentReplyData1}, ...}
+EpComments.prototype.saveCommentReplies = function (padId, commentReplyData) {
+ const data = this.buildCommentReplies(commentReplyData);
+ this.socket.emit('bulkAddCommentReplies', padId, data, (replies) => {
+ _.each(replies, (reply) => {
+ this.setCommentReply(reply);
+ });
+ this.shouldCollectComment = true; // force collect the comment replies saved
+ });
+};
+
+EpComments.prototype.buildCommentReplies = function (repliesData) {
+ const replies = _.map(repliesData, (replyData) => this.buildCommentReply(replyData));
+ return replies;
+};
+
+// take a replyData and add more fields necessary. E.g. 'padId'
+EpComments.prototype.buildCommentReply = function (replyData) {
+ const data = {};
+ data.padId = this.padId;
+ data.commentId = replyData.commentId;
+ data.text = replyData.text;
+ data.changeTo = replyData.changeTo;
+ data.changeFrom = replyData.changeFrom;
+ data.replyId = replyData.replyId;
+ data.name = replyData.name;
+ data.timestamp = parseInt(replyData.timestamp);
+
+ return data;
+};
+
+// Listen for comment
+EpComments.prototype.commentListen = function () {
+ const socket = this.socket;
+ socket.on('pushAddCommentInBulk', () => {
+ this.getComments((allComments) => {
+ if (!$.isEmptyObject(allComments)) {
+ // we get the comments in this format {c-123:{author:...}, c-124:{author:...}}
+ // but it's expected to be {c-123: {data: {author:...}}, c-124:{data:{author:...}}}
+ // in this.comments
+ const commentsProcessed = {};
+ _.map(allComments, (comment, commentId) => {
+ commentsProcessed[commentId] = {};
+ commentsProcessed[commentId].data = comment;
+ });
+ this.comments = commentsProcessed;
+ this.collectCommentsAfterSomeIntervalsOfTime(); // here we collect on the collaborators
+ }
+ });
+ });
+};
+
+// Listen for comment replies
+EpComments.prototype.commentRepliesListen = function () {
+ this.socket.on('pushAddCommentReply', (replyId, reply) => {
+ this.getCommentReplies((replies) => {
+ if (!$.isEmptyObject(replies)) {
+ this.commentReplies = replies;
+ this.collectCommentReplies();
+ }
+ });
+ });
+};
+
+EpComments.prototype.updateCommentBoxText = function (commentId, commentText) {
+ const $comment = this.container.parent().find(`[data-commentid='${commentId}']`);
+ const textBox = this.findCommentText($comment);
+ textBox.text(commentText);
+};
+
+EpComments.prototype.showChangeAsAccepted = function (commentId) {
+ const self = this;
+
+ // Get the comment
+ const comment = this.container.parent().find(`[data-commentid='${commentId}']`);
+ // Revert other comment that have already been accepted
+ comment.closest('.sidebar-comment')
+ .find('.comment-container.change-accepted').addBack('.change-accepted')
+ .each(function () {
+ $(this).removeClass('change-accepted');
+ const data = {commentId: $(this).attr('data-commentid'), padId: self.padId};
+ self.socket.emit('revertChange', data, () => {});
+ });
+
+ // this comment get accepted
+ comment.addClass('change-accepted');
+};
+
+EpComments.prototype.showChangeAsReverted = function (commentId) {
+ // Get the comment
+ const comment = this.container.parent().find(`[data-commentid='${commentId}']`);
+ comment.removeClass('change-accepted');
+};
+
+// Push comment from collaborators
+EpComments.prototype.pushComment = function (eventType, callback) {
+ const socket = this.socket;
+
+ socket.on('textCommentUpdated', (commentId, commentText) => {
+ this.updateCommentBoxText(commentId, commentText);
+ });
+
+ socket.on('commentDeleted', (commentId) => {
+ this.deleteComment(commentId);
+ });
+
+ socket.on('changeAccepted', (commentId) => {
+ this.showChangeAsAccepted(commentId);
+ });
+
+ socket.on('changeReverted', (commentId) => {
+ this.showChangeAsReverted(commentId);
+ });
+
+ // On collaborator add a comment in the current pad
+ if (eventType === 'add') {
+ socket.on('pushAddComment', (commentId, comment) => {
+ callback(commentId, comment);
+ });
+ } else if (eventType === 'addCommentReply') {
+ socket.on('pushAddCommentReply', (replyId, reply) => {
+ callback(replyId, reply);
+ });
+ }
+};
+
+/* ********************************************************************
+ * Etherpad Hooks *
+ ******************************************************************** */
+
+const hooks = {
+
+ // Init pad comments
+ postAceInit: (hookName, context, cb) => {
+ if (!pad.plugins) pad.plugins = {};
+ const Comments = new EpComments(context);
+ pad.plugins.ep_comments_page = Comments;
+
+ if (!$('#editorcontainerbox').hasClass('flex-layout')) {
+ $.gritter.add({
+ title: 'Error',
+ text: 'Ep_comments_page: Please upgrade to etherpad 1.8.3 ' +
+ 'for this plugin to work correctly',
+ sticky: true,
+ class_name: 'error',
+ });
+ }
+ return cb();
+ },
+
+ postToolbarInit: (hookName, args, cb) => {
+ const editbar = args.toolbar;
+
+ editbar.registerCommand('addComment', () => {
+ pad.plugins.ep_comments_page.displayNewCommentForm();
+ });
+ return cb();
+ },
+
+ aceEditEvent: (hookName, context, cb) => {
+ if (!pad.plugins) pad.plugins = {};
+ // first check if some text is being marked/unmarked to add comment to it
+ const eventType = context.callstack.editEvent.eventType;
+ if (eventType === 'unmarkPreSelectedTextToComment') {
+ pad.plugins.ep_comments_page.preCommentMarker.handleUnmarkText(context);
+ } else if (eventType === 'markPreSelectedTextToComment') {
+ pad.plugins.ep_comments_page.preCommentMarker.handleMarkText(context);
+ }
+
+ if (['setup', 'setBaseText', 'importText'].includes(eventType)) return cb();
+
+ if (context.callstack.docTextChanged && pad.plugins.ep_comments_page) {
+ pad.plugins.ep_comments_page.setYofComments();
+ }
+
+ // some times on init ep_comments_page is not yet on the plugin list
+ if (pad.plugins.ep_comments_page) {
+ const commentWasPasted = pad.plugins.ep_comments_page.shouldCollectComment;
+ const domClean = context.callstack.domClean;
+ // we have to wait the DOM update from a fakeComment 'fakecomment-123' to a comment class
+ // 'c-123'
+ if (commentWasPasted && domClean) {
+ pad.plugins.ep_comments_page.collectComments(() => {
+ pad.plugins.ep_comments_page.collectCommentReplies();
+ pad.plugins.ep_comments_page.shouldCollectComment = false;
+ });
+ }
+ }
+ return cb();
+ },
+
+ // Insert comments classes
+ aceAttribsToClasses: (hookName, context, cb) => {
+ if (context.key === 'comment' && context.value !== 'comment-deleted') {
+ return cb(['comment', context.value]);
+ }
+ // only read marks made by current user
+ if (context.key === preCommentMark.MARK_CLASS && context.value === clientVars.userId) {
+ return cb([preCommentMark.MARK_CLASS, context.value]);
+ }
+ return cb();
+ },
+
+ aceEditorCSS: (hookName, context, cb) => cb(cssFiles),
+};
+
+exports.aceEditorCSS = hooks.aceEditorCSS;
+exports.postAceInit = hooks.postAceInit;
+exports.postToolbarInit = hooks.postToolbarInit;
+exports.aceAttribsToClasses = hooks.aceAttribsToClasses;
+exports.aceEditEvent = hooks.aceEditEvent;
+
+// Given a CSS selector and a target element (in this case pad inner)
+// return the rep as an array of array of tuples IE [[[0,1],[0,2]], [[1,3],[1,5]]]
+// We have to return an array of a array of tuples because there can be multiple reps
+// For a given selector
+// A more sane data structure might be an object such as..
+/*
+0:{
+ xStart: 0,
+ xEnd: 1,
+ yStart: 0,
+ yEnd: 1
+},
+1:...
+*/
+// Alas we follow the Etherpad convention of using tuples here.
+const getRepFromSelector = function (selector, container) {
+ const attributeManager = this.documentAttributeManager;
+
+ const repArr = [];
+
+ // first find the element
+ const elements = container.contents().find(selector);
+ // One might expect this to be a rep for the entire document
+ // However what we actually need to do is find each selection that includes
+ // this comment and remove it. This is because content can be pasted
+ // Mid comment which would mean a remove selection could have unexpected consequences
+
+ $.each(elements, (index, span) => {
+ // create a rep array container we can push to..
+ const rep = [[], []];
+
+ // span not be the div so we have to go to parents until we find a div
+ const parentDiv = $(span).closest('div');
+ // line Number is obviously relative to entire document
+ // So find out how many elements before in this parent?
+ const lineNumber = $(parentDiv).prevAll('div').length;
+ // We can set beginning of rep Y (lineNumber)
+ rep[0][0] = lineNumber;
+
+ // We can also update the end rep Y
+ rep[1][0] = lineNumber;
+
+ // Given the comment span, how many characters are before it?
+
+ // All we need to know is the number of characters before .foo
+ /*
+
+
+ hello
+
+ world
+
+ are you
+
+ here?
+
+
+
+ */
+ // In the example before the correct number would be 21
+ // I guess we could do prevAll each length?
+ // If there are no spans before we get 0, simples!
+ // Note that this only works if spans are being used, which imho
+ // Is the correct container however if block elements are registered
+ // It's plausable that attributes are not maintained :(
+ let leftOffset = 0;
+
+ // If the line has a lineAttribute then leftOffset should be +1
+ // Get each line Attribute on this line..
+ let hasLineAttribute = false;
+ const attrArr = attributeManager.getAttributesOnLine(lineNumber);
+ $.each(attrArr, (attrK, value) => {
+ if (value[0] === 'lmkr') hasLineAttribute = true;
+ });
+ if (hasLineAttribute) leftOffset++;
+
+ $(span).prevAll('span').each(function () {
+ const spanOffset = $(this).text().length;
+ leftOffset += spanOffset;
+ });
+ rep[0][1] = leftOffset;
+ rep[1][1] = rep[0][1] + $(span).text().length; // Easy!
+ repArr.push(rep);
+ });
+ return repArr;
+};
+
+// Once ace is initialized, we set ace_doInsertHeading and bind it to the context
+exports.aceInitialized = (hookName, context, cb) => {
+ const editorInfo = context.editorInfo;
+ editorInfo.ace_getRepFromSelector = _(getRepFromSelector).bind(context);
+ editorInfo.ace_getCommentIdOnFirstPositionSelected =
+ _(getCommentIdOnFirstPositionSelected).bind(context);
+ editorInfo.ace_hasCommentOnSelection = _(hasCommentOnSelection).bind(context);
+ return cb();
+};