| 1 |
(function () { |
| 2 |
|
| 3 |
const moonIcon = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"></path><path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.73 1.73 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.73 1.73 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.73 1.73 0 0 0 1.097-1.097zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.16 1.16 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.16 1.16 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732z"></path></svg>`; |
| 4 |
const sunIcon = `<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M11 4V2c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1s-1-.45-1-1zm7.36 3.05 1.41-1.42a.996.996 0 1 0-1.41-1.41l-1.41 1.42a.996.996 0 1 0 1.41 1.41zM22 11h-2c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1s-.45-1-1-1zm-10 8c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1zM5.64 7.05 4.22 5.64c-.39-.39-.39-1.03 0-1.41s1.03-.39 1.41 0l1.41 1.41c.39.39.39 1.03 0 1.41s-1.02.39-1.4 0zm11.31 9.9a.996.996 0 0 0 0 1.41l1.41 1.41c.39.39 1.03.39 1.41 0a.996.996 0 0 0 0-1.41l-1.41-1.41a.996.996 0 0 0-1.41 0zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm3.64 6.78 1.41-1.41c.39-.39.39-1.03 0-1.41s-1.03-.39-1.41 0l-1.41 1.41a.996.996 0 0 0 0 1.41c.38.39 1.02.39 1.41 0zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z"></path></svg>`; |
| 5 |
|
| 6 |
|
| 7 |
tinymce.PluginManager.add('darkify_button', function (editor, url) { |
| 8 |
|
| 9 |
editor.addButton('darkify_button', { |
| 10 |
text: ``, |
| 11 |
icon: 'darkify_button', |
| 12 |
tooltip: 'Toggle Dark Mode', |
| 13 |
onclick: function () { |
| 14 |
let currentMode = localStorage.getItem("darkify_classic_editor_mode") || 0; |
| 15 |
|
| 16 |
if ( currentMode == 1 ) { |
| 17 |
removeDarkModeOnMCE(); |
| 18 |
} else { |
| 19 |
applyDarkModeOnMCE(); |
| 20 |
} |
| 21 |
}, |
| 22 |
onPostRender: function () { |
| 23 |
// inject icon manually after rendering |
| 24 |
const btnEl = this.getEl(); |
| 25 |
const savedMode = localStorage.getItem("darkify_classic_editor_mode") || "0"; |
| 26 |
btnEl.innerHTML = '<button class="mce-dark-mode-button">' + (savedMode == 1 ? sunIcon : moonIcon) + '</button>' |
| 27 |
} |
| 28 |
}); |
| 29 |
|
| 30 |
editor.on('init', function () { |
| 31 |
initDarkModeOnMCE(); |
| 32 |
document.addEventListener('darkify', ( event ) => { |
| 33 |
if ( event.detail.isActive ) { |
| 34 |
applyDarkModeOnMCE(); |
| 35 |
} else { |
| 36 |
removeDarkModeOnMCE(); |
| 37 |
} |
| 38 |
}); |
| 39 |
}); |
| 40 |
|
| 41 |
}); |
| 42 |
|
| 43 |
|
| 44 |
|
| 45 |
/** |
| 46 |
* The Dark Reader admin engine, when this page is running it. |
| 47 |
* |
| 48 |
* Where it is present it owns the TinyMCE frame: it reads the same |
| 49 |
* localStorage key this button writes, so it paints the frame with the |
| 50 |
* chosen palette and the hand-written stylesheet below is not only |
| 51 |
* redundant but wrong — it hardcodes rgb(32,35,36) and skyblue links, |
| 52 |
* ignoring the palette entirely. |
| 53 |
*/ |
| 54 |
function darkifyEngine() { |
| 55 |
const engine = window.darkifyAdminEngine; |
| 56 |
return engine && typeof engine.reapply === "function" ? engine : null; |
| 57 |
} |
| 58 |
|
| 59 |
// Function to apply theme and save to localStorage |
| 60 |
function applyDarkModeOnMCE() { |
| 61 |
localStorage.setItem("darkify_classic_editor_mode", 1); |
| 62 |
|
| 63 |
const engine = darkifyEngine(); |
| 64 |
if ( engine ) { |
| 65 |
engine.reapply(); |
| 66 |
setButtonIcon(sunIcon); |
| 67 |
return; |
| 68 |
} |
| 69 |
|
| 70 |
const iframe = document.querySelector('.mce-container-body iframe'); |
| 71 |
if ( iframe ) { |
| 72 |
// Add css to iframe. |
| 73 |
const css = `body { background-color: rgb(32, 35, 36); |
| 74 |
color: #f0f0f0 !important; |
| 75 |
width: 100% !important; |
| 76 |
font-size: inherit !important; |
| 77 |
margin: inherit !important; |
| 78 |
} |
| 79 |
a { |
| 80 |
color: skyblue !important; |
| 81 |
} |
| 82 |
`; |
| 83 |
const style = document.createElement('style'); |
| 84 |
style.textContent = css; |
| 85 |
style.id = 'wp-dark-mode-classic-editor-style'; |
| 86 |
iframe.contentDocument.head.appendChild(style); |
| 87 |
} |
| 88 |
|
| 89 |
// Update the button icon. |
| 90 |
const btnEl = document.querySelector('.mce-dark-mode-button'); |
| 91 |
if ( btnEl ) { |
| 92 |
btnEl.innerHTML = sunIcon |
| 93 |
} |
| 94 |
} |
| 95 |
|
| 96 |
function setButtonIcon(icon) { |
| 97 |
const btnEl = document.querySelector('.mce-dark-mode-button'); |
| 98 |
if ( btnEl ) { |
| 99 |
btnEl.innerHTML = icon; |
| 100 |
} |
| 101 |
} |
| 102 |
|
| 103 |
function removeDarkModeOnMCE() { |
| 104 |
localStorage.setItem("darkify_classic_editor_mode", 0); |
| 105 |
|
| 106 |
const engine = darkifyEngine(); |
| 107 |
if ( engine ) { |
| 108 |
engine.reapply(); |
| 109 |
setButtonIcon(moonIcon); |
| 110 |
return; |
| 111 |
} |
| 112 |
|
| 113 |
const iframe = document.querySelector('.mce-container-body iframe'); |
| 114 |
if ( iframe ) { |
| 115 |
// Search the style inside the iframe. |
| 116 |
const style = iframe.contentDocument.querySelector('#wp-dark-mode-classic-editor-style'); |
| 117 |
if ( style ) { |
| 118 |
style.remove(); |
| 119 |
} |
| 120 |
} |
| 121 |
|
| 122 |
// Update the button icon. |
| 123 |
const btnEl = document.querySelector('.mce-dark-mode-button'); |
| 124 |
if ( btnEl ) { |
| 125 |
btnEl.innerHTML = moonIcon; |
| 126 |
} |
| 127 |
} |
| 128 |
|
| 129 |
// Initialize Classic Editor Dark Mode. |
| 130 |
const initDarkModeOnMCE = () => { |
| 131 |
const engine = darkifyEngine(); |
| 132 |
|
| 133 |
// With no remembered choice, follow the admin. Seeding the key rather |
| 134 |
// than just reading through to it keeps the button's icon honest: the |
| 135 |
// engine defaults this frame to the admin state too, so leaving the key |
| 136 |
// unset would show a moon over an already-dark frame. |
| 137 |
if ( engine && localStorage.getItem("darkify_classic_editor_mode") === null ) { |
| 138 |
localStorage.setItem("darkify_classic_editor_mode", engine.isDark() ? 1 : 0); |
| 139 |
} |
| 140 |
|
| 141 |
const savedMode = localStorage.getItem("darkify_classic_editor_mode") || 0; |
| 142 |
|
| 143 |
if ( savedMode == 1 ) { |
| 144 |
applyDarkModeOnMCE(); |
| 145 |
} else { |
| 146 |
removeDarkModeOnMCE(); |
| 147 |
} |
| 148 |
} |
| 149 |
})(); |
| 150 |
|
