diff --git a/src/previewAdv.js b/src/previewAdv.js new file mode 100644 index 0000000..c6b5860 --- /dev/null +++ b/src/previewAdv.js @@ -0,0 +1,152 @@ +/* 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 + const blacklist = params.blacklist + + let pCount = 0 // Counter for
tags
+ let advCount = 1 // Counter for adv divs
+
+ insertAdv()
+ togglePreviewAdv(isEnable)
+
+ // === TIMER ===
+ let typingTimer
+ const typingDebounce = 1000 // 1 second
+
+ // === EDITOR ACTIONS ===
+ 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 () {
+ // 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')
+
+ for (let i = 0; i < paragraphs.length; i++) {
+ if (pCount === thresholds[advCount]) {
+ if (paragraphs[i].nextElementSibling && paragraphs[i].nextElementSibling.classList.contains('adv-preview')) {
+ 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'
+ 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++
+ }
+ }
+
+ function addAdvInEditor () {
+ pCount = 0
+ advCount = 1
+
+ // const bookmark = editor.selection.getBookmark(2, true)
+ insertAdv()
+
+ setTimeout(function () {
+ editor.focus()
+ const nextNode = editor.selection.getNode().nextSibling
+
+ if (nextNode) {
+ editor.selection.setCursorLocation(nextNode, -1)
+ }
+ }, 0)
+ }
+ })
+
+ return {
+ getMetadata: () => ({
+ name: 'Preview Adv',
+ url: 'https://github.com/The-3Labs-Team/tinymce-laravel-shortcode-plus'
+ })
+ }
+})