Skip to content

wysiwyg-editor interface. #169

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.

Sign up for GitHub

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

Open
alexsilva wants to merge 11 commits into
base: master
Choose a base branch
from
Open

wysiwyg-editor interface. #169

Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
81ac222
wysiwyg-editor interface.
alexsilva Dec 10, 2019
36c7f5a
Fix: check editor is enable.
alexsilva Dec 10, 2019
6d4187b
Interface callback to close button.
alexsilva Dec 10, 2019
6084335
Adding the state of events in editor calls.
alexsilva Dec 10, 2019
bf8ba65
upstream merge.
geniofuturo Jan 26, 2021
f4d076a
merge fix.
geniofuturo Jan 26, 2021
0b25637
Fix textarea missing ref.
geniofuturo Feb 24, 2021
376af40
Set button type.
geniofuturo Feb 24, 2021
99dbf85
Merge branch 'master' of github.com:alexsilva/jquery-comments into wy…
alexsilva Sep 15, 2023
f814852
Merge branch 'Viima:master' into wysiwyg-editor
alexsilva Sep 15, 2023
d6f927c
Merge branch 'wysiwyg-editor' of github.com:alexsilva/jquery-comments…
alexsilva Sep 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 96 additions & 12 deletions js/jquery-comments.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,25 @@
textareaMaxRows: 5,
maxRepliesVisible: 2,

// wysiwyg-editor interface
wysiwyg_editor: {
opts: {
// Whether an external editor is being used.
enable: false,
// Indicates whether comments will be displayed with plain text or rendered as html.
is_html: true
},
// Initializes a new instance of the html editor.
init: function (textarea, html) {},
// jquery object within which the editor will be rendered.
get_container: function(textarea) {},
// Object that returns the html content of the edit (html text).
get_contents: function(editor) {},
// Call of events.
on_post_comment: function(editor, evt, status) {},
on_put_comment: function(editor, evt, status) {},
on_close_button: function (editor, evt) {}
},
fieldMappings: {
id: 'id',
parent: 'parent',
Expand Down Expand Up @@ -224,7 +243,7 @@
if($.browser.mobile) this.$el.addClass('mobile');

// Init options
this.options = $.extend(true, {}, this.getDefaultOptions(), options);;
this.options = $.extend(true, {}, this.getDefaultOptions(), options);

// Read-only mode
if(this.options.readOnly) this.$el.addClass('read-only');
Expand Down Expand Up @@ -746,7 +765,7 @@

// Select correct commenting field
var commentingField;
var parentCommentingField = $(ev.target).parents('.commenting-field').first();
var parentCommentingField = $(ev.target).parents('.commenting-field').first();
if(parentCommentingField.length) {
commentingField = parentCommentingField;
}
Expand Down Expand Up @@ -825,7 +844,11 @@
var commentingField = this.$el.find('.commenting-field.main');
var mainTextarea = commentingField.find('.textarea');
var mainControlRow = commentingField.find('.control-row');
var wysiwyg_editor = mainTextarea.data('wysiwyg_editor');

if (wysiwyg_editor && this.options.wysiwyg_editor.opts.enable) {
this.options.wysiwyg_editor.on_close_button(wysiwyg_editor, ev);
}
// Clear text area
this.clearTextarea(mainTextarea);

Expand Down Expand Up @@ -886,8 +909,13 @@
toggleSaveButton: function(commentingField) {
var textarea = commentingField.find('.textarea');
var saveButton = textarea.siblings('.control-row').find('.save');

var content = this.getTextareaContent(textarea, true);
var wysiwyg_editor = textarea.data('wysiwyg_editor');
var content;
if (wysiwyg_editor && this.options.wysiwyg_editor.opts.enable) {
content = this.options.wysiwyg_editor.get_contents(wysiwyg_editor);
} else {
content = this.getTextareaContent(textarea, true);
}
var attachments = this.getAttachmentsFromCommentingField(commentingField);
var enabled;

Expand Down Expand Up @@ -940,6 +968,8 @@
var self = this;
var sendButton = $(ev.currentTarget);
var commentingField = sendButton.parents('.commenting-field').first();
var textarea = commentingField.find('.textarea');
var wysiwyg_editor = textarea.data('wysiwyg_editor');

// Set button state to loading
this.setButtonState(sendButton, false, true);
Expand All @@ -950,7 +980,15 @@
// Reverse mapping
commentJSON = this.applyExternalMappings(commentJSON);

// Notify event to external editor
var editor_event_post_comment = function (status) {
if (wysiwyg_editor && self.options.wysiwyg_editor.opts.enable) {
self.options.wysiwyg_editor.on_post_comment(wysiwyg_editor, ev, status);
}
};

var success = function(commentJSON) {
editor_event_post_comment('success');
self.createComment(commentJSON);
commentingField.find('.close').trigger('click');

Expand All @@ -959,12 +997,13 @@
};

var error = function() {

editor_event_post_comment('error');
// Reset button state
self.setButtonState(sendButton, true, false);
};

this.options.postComment(commentJSON, success, error);
editor_event_post_comment();
},

createComment: function(commentJSON) {
Expand All @@ -986,6 +1025,7 @@
var saveButton = $(ev.currentTarget);
var commentingField = saveButton.parents('.commenting-field').first();
var textarea = commentingField.find('.textarea');
var wysiwyg_editor = textarea.data('wysiwyg_editor');

// Set button state to loading
this.setButtonState(saveButton, false, true);
Expand All @@ -1003,7 +1043,15 @@
// Reverse mapping
commentJSON = this.applyExternalMappings(commentJSON);

// Notify event to external editor
var editor_event_put_comment = function (status) {
if (wysiwyg_editor && self.options.wysiwyg_editor.opts.enable) {
self.options.wysiwyg_editor.on_put_comment(wysiwyg_editor, ev, status);
}
};
var success = function(commentJSON) {
editor_event_put_comment('success');

// The outermost parent can not be changed by editing the comment so the childs array
// of parent does not require an update

Expand All @@ -1030,6 +1078,8 @@
};

this.options.putComment(commentJSON, success, error);
// Notify event to external editor
editor_event_put_comment();
},

deleteComment: function(ev) {
Expand Down Expand Up @@ -1145,6 +1195,12 @@

// Move cursor to end
var textarea = replyField.find('.textarea');

// starts new editor instance (before cursor change).
// textarea saves the reference to the editor that will be used later.
if (this.options.wysiwyg_editor.opts.enable) {
textarea.data('wysiwyg_editor', this.options.wysiwyg_editor.init(textarea));
}
this.moveCursorToEnd(textarea);

// Ensure element stays visible
Expand All @@ -1169,6 +1225,14 @@
// Escaping HTML
textarea.append(this.getFormattedCommentContent(commentModel, true));

// starts new editor instance.
// textarea saves the reference to the editor that will be used later.
// In this case the editor starts with the content of the model (raw text).
if (this.options.wysiwyg_editor.opts.enable) {
textarea.data('wysiwyg_editor', this.options.wysiwyg_editor.init(
textarea, commentModel.content
));
}
// Move cursor to end
this.moveCursorToEnd(textarea);

Expand Down Expand Up @@ -1249,12 +1313,18 @@
// Commenting field
var mainCommentingField = this.createMainCommentingFieldElement();
this.$el.append(mainCommentingField);

// Hide control row and close button
var mainControlRow = mainCommentingField.find('.control-row');
mainControlRow.hide();
mainCommentingField.find('.close').hide();

// Starts a new instance of the editor.
// Connects the textarea with the corresponding editor.
if (this.options.wysiwyg_editor.opts.enable) {
var textarea = mainCommentingField.find('.textarea');
textarea.data('wysiwyg_editor', this.options.wysiwyg_editor.init(textarea));
}

// Navigation bar
if (this.options.enableNavigation) {
this.$el.append(this.createNavigationElement());
Expand Down Expand Up @@ -1486,12 +1556,16 @@
controlRow.append(attachmentsContainer);
}


// Populate the element
textareaWrapper.append(closeButton).append(textarea).append(controlRow);
// controle over external html editor
if (this.options.wysiwyg_editor.opts.enable) {
// Who assumes here is the external wysiwyg editor but the default api should keep working.
textarea.hide();
textareaWrapper.append(this.options.wysiwyg_editor.get_container(textarea)).append(controlRow);
}
commentingField.append(profilePicture).append(textareaWrapper);


if(parentId) {

// Set the parent id to the field if necessary
Expand Down Expand Up @@ -1858,8 +1932,11 @@
var content = $('<div/>', {
'class': 'content'
});
content.html(this.getFormattedCommentContent(commentModel));

if (this.options.wysiwyg_editor.opts.is_html) {
content.html(commentModel.content);
} else {
content.html(this.getFormattedCommentContent(commentModel));
}
// Edited timestamp
if(commentModel.modified && commentModel.modified != commentModel.created) {
var editedTime = this.options.timeFormatter(commentModel.modified);
Expand Down Expand Up @@ -1977,7 +2054,8 @@
if(commentModel.createdByCurrentUser || this.options.currentUserIsAdmin) {
var editButton = $('<button/>', {
'class': 'action edit',
text: this.options.textFormatter(this.options.editText)
'type': 'button',
text: this.options.textFormatter(this.options.editText),
});
actions.append(editButton);
}
Expand Down Expand Up @@ -2008,6 +2086,7 @@

// Upvotes
var upvoteEl = $('<button/>', {
'type': 'button',
'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
}).append($('<span/>', {
text: commentModel.upvoteCount,
Expand All @@ -2031,7 +2110,7 @@
},

createAttachmentTagElement: function(attachment, deletable) {

// Tag element
var attachmentTag = $('<a/>', {
'class': 'tag attachment',
Expand Down Expand Up @@ -2293,6 +2372,11 @@
},

getTextareaContent: function(textarea, humanReadable) {
var wysiwyg_editor = textarea.data('wysiwyg_editor');
if (wysiwyg_editor && this.options.wysiwyg_editor.opts.enable) {
return this.options.wysiwyg_editor.get_contents(wysiwyg_editor);
}
var parentId = textarea.data('parent');
var textareaClone = textarea.clone();

// Remove reply-to tag
Expand Down