From 36f3c140860b375f5c5cb431dcba2838198da6d2 Mon Sep 17 00:00:00 2001 From: Claudio-Emmolo <113107618+Claudio-Emmolo@users.noreply.github.com> Date: Mon, 1 Jul 2024 11:53:49 +0200 Subject: [PATCH 1/6] Add previewAdv (WIP) --- src/previewAdv.js | 60 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 src/previewAdv.js diff --git a/src/previewAdv.js b/src/previewAdv.js new file mode 100644 index 0000000..4e1f6f9 --- /dev/null +++ b/src/previewAdv.js @@ -0,0 +1,60 @@ +/* global tinymce */ + +tinymce.PluginManager.add('previewAdv', (editor, url) => { + editor.on('init', function () { + const thresholds = { + 1: 0, + 2: 2, + 3: 8 + } + + let pCount = 0 // Counter for

tags + let advCount = 1 // Counter for adv divs + + // Funzione per inserire le div di pubblicità + function insertAdv () { + const advDivs = editor.getBody().querySelectorAll('.adv-preview') + for (let i = 0; i < advDivs.length; i++) { + advDivs[i].remove() + } + const body = editor.getBody() + const paragraphs = body.getElementsByTagName('p') + + for (let i = 0; i < paragraphs.length; i++) { + if (pCount === thresholds[advCount]) { + if (paragraphs[i].nextElementSibling && paragraphs[i].nextElementSibling.classList.contains('adv-preview')) { + continue + } + + const div = editor.dom.create('div', { class: 'adv-preview', contenteditable: 'false' }) + div.style.backgroundColor = '#f3f3f3' + div.style.color = '#666' + div.style.padding = '10px' + div.style.border = '1px solid #ccc' + div.style.textAlign = 'center' + div.style.margin = '10px 0' + div.innerHTML = 'Qui ci finiscono le ADV' + editor.dom.insertAfter(div, paragraphs[i]) + advCount++ + } + + pCount++ + } + } + + insertAdv() + + editor.on('change', function () { + pCount = 0 + advCount = 1 + insertAdv() + }) + }) + + return { + getMetadata: () => ({ + name: 'Preview Adv', + url: 'https://github.com/The-3Labs-Team/tinymce-laravel-shortcode-plus' + }) + } +}) From e3bb247014ea28c96435fca1f1eaf53b762e5e96 Mon Sep 17 00:00:00 2001 From: Claudio-Emmolo <113107618+Claudio-Emmolo@users.noreply.github.com> Date: Mon, 1 Jul 2024 14:15:37 +0200 Subject: [PATCH 2/6] Get thresholds from config + fix cursor --- src/previewAdv.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/previewAdv.js b/src/previewAdv.js index 4e1f6f9..654a23d 100644 --- a/src/previewAdv.js +++ b/src/previewAdv.js @@ -1,12 +1,10 @@ /* global tinymce */ tinymce.PluginManager.add('previewAdv', (editor, url) => { + editor.on('init', function () { - const thresholds = { - 1: 0, - 2: 2, - 3: 8 - } + const params = editor.getParam('previewAdv') + const thresholds = params.thresholds let pCount = 0 // Counter for

tags let advCount = 1 // Counter for adv divs @@ -45,9 +43,16 @@ tinymce.PluginManager.add('previewAdv', (editor, url) => { insertAdv() editor.on('change', function () { + const bookmark = editor.selection.getBookmark(2, true) + pCount = 0 advCount = 1 insertAdv() + + setTimeout(function () { + editor.selection.moveToBookmark(bookmark) + editor.focus() + }, 0) }) }) From 9a5d09bcdffc981094e4d33ebe38c0b82c5ac44b Mon Sep 17 00:00:00 2001 From: Claudio-Emmolo <113107618+Claudio-Emmolo@users.noreply.github.com> Date: Mon, 1 Jul 2024 15:01:06 +0200 Subject: [PATCH 3/6] Remove div.adv-preview after save --- src/previewAdv.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/previewAdv.js b/src/previewAdv.js index 654a23d..a04123e 100644 --- a/src/previewAdv.js +++ b/src/previewAdv.js @@ -1,7 +1,6 @@ /* global tinymce */ tinymce.PluginManager.add('previewAdv', (editor, url) => { - editor.on('init', function () { const params = editor.getParam('previewAdv') const thresholds = params.thresholds @@ -54,6 +53,18 @@ tinymce.PluginManager.add('previewAdv', (editor, url) => { editor.focus() }, 0) }) + + editor.on('SaveContent', function (e) { + const tempDiv = document.createElement('div') + tempDiv.innerHTML = e.content + + const advDivs = tempDiv.querySelectorAll('.adv-preview') + advDivs.forEach(function (div) { + div.remove() + }) + + e.content = tempDiv.innerHTML + }) }) return { From 46d60d7835767c8fc7deaa532da42d29d71de165 Mon Sep 17 00:00:00 2001 From: Claudio-Emmolo <113107618+Claudio-Emmolo@users.noreply.github.com> Date: Mon, 1 Jul 2024 15:42:53 +0200 Subject: [PATCH 4/6] previewAdv.js, fix cursor --- src/previewAdv.js | 73 +++++++++++++++++++++++++++++++++++------------ 1 file changed, 54 insertions(+), 19 deletions(-) diff --git a/src/previewAdv.js b/src/previewAdv.js index a04123e..1d22c97 100644 --- a/src/previewAdv.js +++ b/src/previewAdv.js @@ -8,7 +8,51 @@ tinymce.PluginManager.add('previewAdv', (editor, url) => { let pCount = 0 // Counter for

tags let advCount = 1 // Counter for adv divs - // Funzione per inserire le div di pubblicità + insertAdv() + + // === TIMER === + let typingTimer + const typingDebounce = 1000 // 1 second + + // === EDITOR ACTIONS === + // editor.on('change', function () { + // const bookmark = editor.selection.getBookmark(2, true) + // + // pCount = 0 + // advCount = 1 + // if (typing) { + // return + // } + // insertAdv() + // + // setTimeout(function () { + // editor.selection.moveToBookmark(bookmark) + // editor.focus() + // }, 0) + // }) + + editor.on('SaveContent', function (e) { + const tempDiv = document.createElement('div') + tempDiv.innerHTML = e.content + + const advDivs = tempDiv.querySelectorAll('.adv-preview') + advDivs.forEach(function (div) { + div.remove() + }) + + e.content = tempDiv.innerHTML + }) + + editor.on('keydown', function () { + clearTimeout(typingTimer) + }) + + editor.on('keyup', function () { + clearTimeout(typingTimer) + typingTimer = setTimeout(addAdvInEditor, typingDebounce) + }) + + // === FUNCTIONS === function insertAdv () { const advDivs = editor.getBody().querySelectorAll('.adv-preview') for (let i = 0; i < advDivs.length; i++) { @@ -39,32 +83,23 @@ tinymce.PluginManager.add('previewAdv', (editor, url) => { } } - insertAdv() - - editor.on('change', function () { - const bookmark = editor.selection.getBookmark(2, true) + function addAdvInEditor () { pCount = 0 advCount = 1 + + // const bookmark = editor.selection.getBookmark(2, true) insertAdv() setTimeout(function () { - editor.selection.moveToBookmark(bookmark) editor.focus() - }, 0) - }) + const nextNode = editor.selection.getNode().nextSibling - editor.on('SaveContent', function (e) { - const tempDiv = document.createElement('div') - tempDiv.innerHTML = e.content - - const advDivs = tempDiv.querySelectorAll('.adv-preview') - advDivs.forEach(function (div) { - div.remove() - }) - - e.content = tempDiv.innerHTML - }) + if (nextNode) { + editor.selection.setCursorLocation(nextNode, -1) + } + }, 0) + } }) return { From 4c000e0f4478d62038210eb91bc1a716970b1f91 Mon Sep 17 00:00:00 2001 From: Claudio-Emmolo <113107618+Claudio-Emmolo@users.noreply.github.com> Date: Thu, 4 Jul 2024 10:51:14 +0200 Subject: [PATCH 5/6] Add button for toggle preview ADV --- src/previewAdv.js | 48 ++++++++++++++++++++++++++++++----------------- 1 file changed, 31 insertions(+), 17 deletions(-) diff --git a/src/previewAdv.js b/src/previewAdv.js index 1d22c97..c756597 100644 --- a/src/previewAdv.js +++ b/src/previewAdv.js @@ -1,6 +1,36 @@ /* global tinymce */ tinymce.PluginManager.add('previewAdv', (editor, url) => { + let isEnable = true + + editor.ui.registry.addToggleButton('previewAdv', { + icon: 'preview', + tooltip: 'Enable Preview Adv', + onAction: async (_) => { + isEnable = !isEnable + togglePreviewAdv(isEnable) + } + }) + + function togglePreviewAdv (isEnable) { + const advDivs = editor.getBody().querySelectorAll('.adv-preview') + + for (let i = 0; i < advDivs.length; i++) { + advDivs[i].style.display = isEnable ? 'block' : 'none' + } + + // Update button state + setTimeout(() => { + const toolbar = editor.getContainer().querySelector('.tox-toolbar-overlord') + const btn = toolbar.querySelector('button[aria-label="Enable Preview Adv"]') + if (isEnable) { + btn.classList.add('tox-tbtn--enabled') + } else { + btn.classList.remove('tox-tbtn--enabled') + } + }, 0) + } + editor.on('init', function () { const params = editor.getParam('previewAdv') const thresholds = params.thresholds @@ -9,28 +39,13 @@ tinymce.PluginManager.add('previewAdv', (editor, url) => { let advCount = 1 // Counter for adv divs insertAdv() + togglePreviewAdv(isEnable) // === TIMER === let typingTimer const typingDebounce = 1000 // 1 second // === EDITOR ACTIONS === - // editor.on('change', function () { - // const bookmark = editor.selection.getBookmark(2, true) - // - // pCount = 0 - // advCount = 1 - // if (typing) { - // return - // } - // insertAdv() - // - // setTimeout(function () { - // editor.selection.moveToBookmark(bookmark) - // editor.focus() - // }, 0) - // }) - editor.on('SaveContent', function (e) { const tempDiv = document.createElement('div') tempDiv.innerHTML = e.content @@ -84,7 +99,6 @@ tinymce.PluginManager.add('previewAdv', (editor, url) => { } function addAdvInEditor () { - pCount = 0 advCount = 1 From 0569c554c98b32251cddd8f0f65d47f2fd9ecbe7 Mon Sep 17 00:00:00 2001 From: Claudio-Emmolo <113107618+Claudio-Emmolo@users.noreply.github.com> Date: Thu, 4 Jul 2024 11:44:38 +0200 Subject: [PATCH 6/6] previewAdv.js, add BLACKLIST --- src/previewAdv.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/previewAdv.js b/src/previewAdv.js index c756597..c6b5860 100644 --- a/src/previewAdv.js +++ b/src/previewAdv.js @@ -34,6 +34,7 @@ tinymce.PluginManager.add('previewAdv', (editor, url) => { editor.on('init', function () { const params = editor.getParam('previewAdv') const thresholds = params.thresholds + const blacklist = params.blacklist let pCount = 0 // Counter for

tags let advCount = 1 // Counter for adv divs @@ -69,10 +70,12 @@ tinymce.PluginManager.add('previewAdv', (editor, url) => { // === FUNCTIONS === function insertAdv () { + // REMOVE OLD ADV FOR LOAD NEW const advDivs = editor.getBody().querySelectorAll('.adv-preview') for (let i = 0; i < advDivs.length; i++) { advDivs[i].remove() } + const body = editor.getBody() const paragraphs = body.getElementsByTagName('p') @@ -82,6 +85,30 @@ tinymce.PluginManager.add('previewAdv', (editor, url) => { continue } + // === BLACKLIST === + const bfBlacklist = blacklist.before.slice(1, -1).split('|') + const afBlacklist = blacklist.after.slice(1, -1).split('|') + + bfBlacklist.push(' paragraphs[i].innerHTML.includes(item))) { + // continue + // } + if (bfBlacklist.some(item => new RegExp(item).test(paragraphs[i].innerHTML))) { + continue + } + + // AFTER BLACKLIST + // if (afBlacklist.some(item => paragraphs[i + 1].innerHTML.includes(item))) { + // continue + // } + if (afBlacklist.some(item => new RegExp(item).test(paragraphs[i + 1].innerHTML))) { + continue + } + // === END BLACKLIST === + const div = editor.dom.create('div', { class: 'adv-preview', contenteditable: 'false' }) div.style.backgroundColor = '#f3f3f3' div.style.color = '#666'