Skip to content

Tiny to iframe #89

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

Merged
veronika-tseleva-cleantalk merged 15 commits into from
Mar 19, 2026
Merged

Tiny to iframe #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e02fb06
Tiny to Iframe
datorik Mar 4, 2026
0123110
Tiny to Iframe
datorik Mar 4, 2026
f12ece0
code review
datorik Mar 9, 2026
9b907e3
code review
datorik Mar 9, 2026
add4c28
Fix. fixed style
veronika-tseleva-cleantalk Mar 16, 2026
878bc03
Fix. fixed style
veronika-tseleva-cleantalk Mar 16, 2026
9f9fcad
Merge branch 'dev' into tiny-to-iframe.ab
veronika-tseleva-cleantalk Mar 17, 2026
1b72e16
Fix. fixed merge conflicts
veronika-tseleva-cleantalk Mar 17, 2026
bc934a8
Fix. fixed merge conflicts
veronika-tseleva-cleantalk Mar 17, 2026
3e03936
Fix. fixed merge conflicts
veronika-tseleva-cleantalk Mar 17, 2026
e9f597e
Fix. fixed conflicts
veronika-tseleva-cleantalk Mar 17, 2026
78598f7
Fix. fixed conflicts
veronika-tseleva-cleantalk Mar 17, 2026
e21adf7
Fix. fixed conflicts
veronika-tseleva-cleantalk Mar 17, 2026
6e6c535
Fix. fixed conflicts
veronika-tseleva-cleantalk Mar 17, 2026
c029391
Fix. fixed conflicts
veronika-tseleva-cleantalk Mar 17, 2026
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
952 changes: 720 additions & 232 deletions dist/doboard-widget-bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

160 changes: 151 additions & 9 deletions dist/doboard-widget-bundle.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/doboard-widget-bundle.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ function bundle_src_js() {
'js/src/loaders/SpotFixSVGLoader.js',
'js/src/loaders/SpotFixSourcesLoader.js',
'js/src/loaders/SpotFixLoaderEvent.js',
'js/src/iframe/DescriptionEditorIframe.js',
'js/src/iframe/MessageEditorIframe.js',
]);

return mergeStream(cssStream, jsStream)
Expand Down
60 changes: 0 additions & 60 deletions js/src/handlers.js
View file
Open in desktop

Large diffs are not rendered by default.

316 changes: 316 additions & 0 deletions js/src/iframe/DescriptionEditorIframe.js
View file
Open in desktop

Large diffs are not rendered by default.

336 changes: 336 additions & 0 deletions js/src/iframe/MessageEditorIframe.js
View file
Open in desktop

Large diffs are not rendered by default.

42 changes: 2 additions & 40 deletions js/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ function spotFixInit() {
new SpotFixSourcesLoader();
new CleanTalkWidgetDoboard({}, 'wrap');
loadBotDetector();
loadTinyMCE();
}

function loadBotDetector() {
Expand All @@ -33,45 +32,8 @@ function loadBotDetector() {
document.head.appendChild(script);
}

/**
* Downloads TinyMCE script from doboard.com
*/
function loadTinyMCE() {
return new Promise((resolve) => {
const existingTinyMCE_temp = window.tinymce;
window.tinymce = null;
const script = document.createElement('script');
script.src = 'https://doboard.com/tinymce/tinymce.min.js';
script.async = true;

script.onload = function () {
try {
window.SpotFixTinyMCE = window.tinymce;
if (existingTinyMCE_temp) {
window.tinymce = existingTinyMCE_temp;
}
addIconPack();
resolve(window.SpotFixTinyMCE);
} catch (error) {
if (existingTinyMCE_temp) {
window.tinymce = existingTinyMCE_temp;
}
console.error('Error loading TinyMCE:', error);
resolve(null);
}
};

script.onerror = function () {
if (existingTinyMCE_temp) {
window.tinymce = existingTinyMCE_temp;
}
console.error('Failed to load TinyMCE script');
resolve(null);
};

document.head.appendChild(script);
});
}
// TinyMCE is now loaded inside iframes by SpotFixMceIframe class
// The loadTinyMCE function has been removed as TinyMCE loads inside each iframe

document.addEventListener('selectionchange', function(e) {
// Do not run widget for non-document events (i.e. inputs focused)
Expand Down
192 changes: 62 additions & 130 deletions js/src/widget.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -681,56 +681,27 @@ class CleanTalkWidgetDoboard {
this.bindCreateTaskEvents();
this.bindShowLoginFormEvents();

if (tinymce?.get('doboard_task_widget-description')) {
tinymce?.remove('#doboard_task_widget-description');
}

const savedDescription = localStorage.getItem('spotfix-description-ls') || '';

SpotFixTinyMCE.init({
selector: '#doboard_task_widget-description',
plugins: 'link lists',
menubar: false,
statusbar: false,
toolbar_location: 'bottom',
height: '100%',
width: '100%',
toolbar: 'attachmentButton screenshotButton emoticons bullist numlist bold italic strikethrough underline blockquote',
icons: 'icon_pack_SpotFix',
file_picker_types: 'file image media',
setup: function (editor) {
editor.on('init', function() {
if (savedDescription) {
editor.setContent(savedDescription, { format: 'html' });
}

setTimeout(() => {
editor.save();
});
});
editor.on('change', function () {
editor.save();
const content = editor.getContent();
localStorage.setItem('spotfix-description-ls', content);
});
editor.ui.registry.addButton('attachmentButton', {
icon: 'paperclip',
tooltip: 'In development',
disabled: true,
onAction: (e) => {
// fileUploader?.fileInput?.click(e);
},
});
editor.ui.registry.addButton('screenshotButton', {
icon: 'screenshot',
tooltip: 'In development',
disabled: true,
onAction: (e) => {
// fileUploader?.makeScreenshot();
},
});
}
})
// Create description editor iframe
window.DescriptionEditorIframe.create({
savedContent: savedDescription,
onChange: function(content) {
localStorage.setItem('spotfix-description-ls', content);
},
handlers: {
onAttachmentClick: function() {
// Attachment button clicked in description editor
// Currently disabled
},
onScreenshotClick: function() {
// Screenshot button clicked in description editor
// Currently disabled
}
}
}).catch(function(error) {
console.error('Failed to create description editor:', error);
});

break;
case 'wrap':
Expand Down Expand Up @@ -1119,89 +1090,44 @@ class CleanTalkWidgetDoboard {
issuesCommentsContainer.innerHTML = ksesFilter('No comments');
}

// textarea (new comment) behaviour
const textarea = document.querySelector('.doboard_task_widget-send_message_input');
if (textarea) {
function handleTextareaChange() {
const triggerChars = 40;

if (this.value.length > triggerChars) {
this.classList.add('high');
} else {
this.classList.remove('high');
}
}
textarea.addEventListener('input', handleTextareaChange)
textarea.addEventListener('change', handleTextareaChange)

const fileUploader = this.fileUploader;
// textarea (new comment) behaviour - using iframe editor
const mainThis = this;
const fileUploader = this.fileUploader;

if (tinymce?.get('doboard_task_widget-send_message_input_SpotFix')) {
tinymce?.remove('#doboard_task_widget-send_message_input_SpotFix');
}

const mainThis = this;

SpotFixTinyMCE.init({
selector: '#doboard_task_widget-send_message_input_SpotFix',
plugins: 'link lists autoresize',
menubar: false,
placeholder: 'Write a message...',
content_style: `body[data-mce-placeholder]:not(.mce-content-body:not([data-mce-placeholder]))::before {
color: #707A83 !important;}
body {background-color: #F3F6F9;}`,
statusbar: false,
toolbar_location: 'bottom',
toolbar: 'attachmentButton screenshotButton emoticons bullist numlist bold italic strikethrough underline blockquote sendCommentButton',
min_height: 100,
max_height: 200,
autoresize_bottom_margin: 0,
resize: false,
icons: 'icon_pack_SpotFix',
file_picker_types: 'file image media',
setup: function (editor) {
editor.on('change', function () {
editor.save();
});
editor.on('init', () => {
// Scroll to the bottom comments
if(!this.nonRequesting) {
const container = document.querySelector('.doboard_task_widget-concrete_issues-container');

if (container) {
setTimeout(() => {
const scrollPosition = container.scrollHeight;
container.scrollTo({ top: scrollPosition, behavior: 'smooth' });
}, 50);
}
// Remove existing iframe editor if any
if (window.MessageEditorIframe.iframe && !this.nonRequesting) {
window.MessageEditorIframe.remove();
}
if(!this.nonRequesting) {
// Create message editor iframe
window.MessageEditorIframe.create({
onReady: function() {
// Scroll to the bottom comments
if (!mainThis.nonRequesting) {
const container = document.querySelector('.doboard_task_widget-concrete_issues-container');
if (container) {
setTimeout(() => {
const scrollPosition = container.scrollHeight;
container.scrollTo({top: scrollPosition, behavior: 'smooth'});
}, 50);
}
});
editor.ui.registry.addButton('attachmentButton', {
icon: 'paperclip',
tooltip: 'Add file',
onAction: (e) => {
fileUploader?.fileInput?.click(e);

},
});
editor.ui.registry.addButton('screenshotButton', {
icon: 'screenshot',
tooltip: 'Screenshot',
onAction: (e) => {
fileUploader?.makeScreenshot();
},
});
editor.ui.registry.addButton('sendCommentButton', {
icon: 'sendComment',
tooltip: 'Send comment',
onAction: (e) => {
clickHandler(mainThis, editor);
},
});
}
});
}

},
handlers: {
onAttachmentClick: function() {
fileUploader?.fileInput?.click();
},
onScreenshotClick: function() {
fileUploader?.makeScreenshot();
},
onSendComment: function(eventData) {
clickHandler(mainThis, null, eventData.content);
},
},
}).catch(function(error) {
console.error('Failed to create message editor:', error);
});
}
if(this.nonRequesting) {
const container = document.querySelector('.doboard_task_widget-concrete_issues-container');

Expand All @@ -1219,12 +1145,18 @@ class CleanTalkWidgetDoboard {

this.fileUploader.init();

async function clickHandler(mainThis, editor) {
async function clickHandler(mainThis, editor, contentFromIframe) {
const sendButton = document.querySelector('.doboard_task_widget-send_message_button');
const sendMessageContainer = sendButton?.closest('.doboard_task_widget-send_message');
const input = sendMessageContainer?.querySelector('.doboard_task_widget-send_message_input');

const commentText = editor?.getContent({ format: 'html' })?.trim();
// Get content from iframe or from editor parameter
let commentText;
if (contentFromIframe) {
commentText = contentFromIframe.trim();
} else if (editor) {
commentText = editor?.getContent({ format: 'html' })?.trim();
}

if (!commentText) return;

Expand Down
4 changes: 4 additions & 0 deletions styles/doboard-widget.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1474,6 +1474,10 @@ input:checked + .slider:before {
color: #252A2F;
}

#spotfix-message-editor-iframe {
margin-bottom: 0px !important;
}

.doboard_task_widget-concrete_issue .tox-tinymce .tox-toolbar__group {
display: inline-flex !important;
width: 100% !important;
Expand Down
Loading