Media browser: recursive scan entire content/ tree, /-media/ URL prefix, editor change detection fix

- handleMediaList() now scans content/ recursively for all media files
- URLs use /-media/ prefix mapping directly to content/ (no special cases)
- index.php: added /-media/ route, kept /-assets/ for backward compat
- editor-toolbar.js: fixed editor.on('change') placement (was inside switchMode)
- content-edit.php and content-new.php: back-btn unsaved-changes detection
- Removed unused __editorCleanup global

public/assets/codemirror/addon/edit/closebrackets.min.js

@@ -0,0 +1 @@
+!function(e){"object"==typeof exports&&"object"==typeof module?e(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],e):e(CodeMirror)}(function(S){var n={pairs:"()[]{}''\"\"",closeBefore:")]}'\":;>",triples:"",explode:"[]{}"},k=S.Pos;function y(e,t){return"pairs"==t&&"string"==typeof e?e:("object"==typeof e&&null!=e[t]?e:n)[t]}S.defineOption("autoCloseBrackets",!1,function(e,t,n){n&&n!=S.Init&&(e.removeKeyMap(i),e.state.closeBrackets=null),t&&(r(y(t,"pairs")),e.state.closeBrackets=t,e.addKeyMap(i))});var i={Backspace:function(e){var t=O(e);if(!t||e.getOption("disableInput"))return S.Pass;for(var n=y(t,"pairs"),r=e.listSelections(),i=0;i<r.length;i++){if(!r[i].empty())return S.Pass;var a=s(e,r[i].head);if(!a||n.indexOf(a)%2!=0)return S.Pass}for(i=r.length-1;0<=i;i--){var o=r[i].head;e.replaceRange("",k(o.line,o.ch-1),k(o.line,o.ch+1),"+delete")}},Enter:function(r){var e=O(r),t=e&&y(e,"explode");if(!t||r.getOption("disableInput"))return S.Pass;for(var i=r.listSelections(),n=0;n<i.length;n++){if(!i[n].empty())return S.Pass;var a=s(r,i[n].head);if(!a||t.indexOf(a)%2!=0)return S.Pass}r.operation(function(){var e=r.lineSeparator()||"\n";r.replaceSelection(e+e,null),m(r,-1),i=r.listSelections();for(var t=0;t<i.length;t++){var n=i[t].head.line;r.indentLine(n,null,!0),r.indentLine(n+1,null,!0)}})}};function r(e){for(var t=0;t<e.length;t++){var n=e.charAt(t),r="'"+n+"'";i[r]||(i[r]=function(P){return function(e){var i=e,t=P,e=O(i);if(!e||i.getOption("disableInput"))return S.Pass;var n=y(e,"pairs"),r=n.indexOf(t);if(-1==r)return S.Pass;for(var a,o=y(e,"closeBefore"),s=y(e,"triples"),l=n.charAt(r+1)==t,c=i.listSelections(),h=r%2==0,f=0;f<c.length;f++){var u,d=c[f],p=d.head,g=i.getRange(p,k(p.line,p.ch+1));if(h&&!d.empty())u="surround";else if(!l&&h||g!=t)if(l&&1<p.ch&&0<=s.indexOf(t)&&i.getRange(k(p.line,p.ch-2),p)==t+t){if(2<p.ch&&/\bstring/.test(i.getTokenTypeAt(k(p.line,p.ch-2))))return S.Pass;u="addFour"}else if(l){d=0==p.ch?" ":i.getRange(k(p.line,p.ch-1),p);if(S.isWordChar(g)||d==t||S.isWordChar(d))return S.Pass;u="both"}else{if(!h||!(0===g.length||/\s/.test(g)||-1<o.indexOf(g)))return S.Pass;u="both"}else u=l&&function(e,t){var n=e.getTokenAt(k(t.line,t.ch+1));return/\bstring/.test(n.type)&&n.start==t.ch&&(0==t.ch||!/\bstring/.test(e.getTokenTypeAt(t)))}(i,p)?"both":0<=s.indexOf(t)&&i.getRange(p,k(p.line,p.ch+3))==t+t+t?"skipThree":"skip";if(a){if(a!=u)return S.Pass}else a=u}var v=r%2?n.charAt(r-1):t,b=r%2?t:n.charAt(r+1);i.operation(function(){if("skip"==a)m(i,1);else if("skipThree"==a)m(i,3);else if("surround"==a){for(var e=i.getSelections(),t=0;t<e.length;t++)e[t]=v+e[t]+b;i.replaceSelections(e,"around");for(e=i.listSelections().slice(),t=0;t<e.length;t++)e[t]=(n=e[t],r=void 0,r=0<S.cmpPos(n.anchor,n.head),{anchor:new k(n.anchor.line,n.anchor.ch+(r?-1:1)),head:new k(n.head.line,n.head.ch+(r?1:-1))});i.setSelections(e)}else"both"==a?(i.replaceSelection(v+b,null),i.triggerElectric(v+b),m(i,-1)):"addFour"==a&&(i.replaceSelection(v+v+v+v,"before"),m(i,1));var n,r})}}(n))}}function O(e){var t=e.state.closeBrackets;return t&&!t.override&&e.getModeAt(e.getCursor()).closeBrackets||t}function m(e,t){for(var n=[],r=e.listSelections(),i=0,a=0;a<r.length;a++){var o=r[a],o=(o.head==e.getCursor()&&(i=a),o.head.ch||0<t?{line:o.head.line,ch:o.head.ch+t}:{line:o.head.line-1});n.push({anchor:o,head:o})}e.setSelections(n,i)}function s(e,t){e=e.getRange(k(t.line,t.ch-1),k(t.line,t.ch+1));return 2==e.length?e:null}r(n.pairs+"`")});

public/assets/codemirror/addon/selection/active-line.min.js

@@ -0,0 +1 @@
+!function(e){"object"==typeof exports&&"object"==typeof module?e(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],e):e(CodeMirror)}(function(i){"use strict";var a="CodeMirror-activeline",s="CodeMirror-activeline-background",c="CodeMirror-activeline-gutter";function l(e){for(var t=0;t<e.state.activeLines.length;t++)e.removeLineClass(e.state.activeLines[t],"wrap",a),e.removeLineClass(e.state.activeLines[t],"background",s),e.removeLineClass(e.state.activeLines[t],"gutter",c)}function o(t,e){for(var n=[],i=0;i<e.length;i++){var o=e[i],r=t.getOption("styleActiveLine");("object"==typeof r&&r.nonEmpty?o.anchor.line==o.head.line:o.empty())&&(r=t.getLineHandleVisualStart(o.head.line),n[n.length-1]!=r&&n.push(r))}!function(e,t){if(e.length==t.length){for(var n=0;n<e.length;n++)if(e[n]!=t[n])return;return 1}}(t.state.activeLines,n)&&t.operation(function(){l(t);for(var e=0;e<n.length;e++)t.addLineClass(n[e],"wrap",a),t.addLineClass(n[e],"background",s),t.addLineClass(n[e],"gutter",c);t.state.activeLines=n})}function r(e,t){o(e,t.ranges)}i.defineOption("styleActiveLine",!1,function(e,t,n){n=n!=i.Init&&n;t!=n&&(n&&(e.off("beforeSelectionChange",r),l(e),delete e.state.activeLines),t&&(e.state.activeLines=[],o(e,e.listSelections()),e.on("beforeSelectionChange",r)))})});

public/assets/codemirror/mode/htmlmixed.min.js

@@ -0,0 +1 @@
+!function(t){"object"==typeof exports&&"object"==typeof module?t(require("../../lib/codemirror"),require("../xml/xml"),require("../javascript/javascript"),require("../css/css")):"function"==typeof define&&define.amd?define(["../../lib/codemirror","../xml/xml","../javascript/javascript","../css/css"],t):t(CodeMirror)}(function(m){"use strict";var l={script:[["lang",/(javascript|babel)/i,"javascript"],["type",/^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^module$|^$/i,"javascript"],["type",/./,"text/plain"],[null,null,"javascript"]],style:[["lang",/^css$/i,"css"],["type",/^(text\/)?(x-)?(stylesheet|css)$/i,"css"],["type",/./,"text/plain"],[null,null,"css"]]};var a={};function d(t,e){e=t.match(a[t=e]||(a[t]=new RegExp("\\s+"+t+"\\s*=\\s*('|\")?([^'\"]+)('|\")?\\s*")));return e?/^\s*(.*?)\s*$/.exec(e[2])[1]:""}function g(t,e){return new RegExp((e?"^":"")+"</\\s*"+t+"\\s*>","i")}function o(t,e){for(var a in t)for(var n=e[a]||(e[a]=[]),l=t[a],o=l.length-1;0<=o;o--)n.unshift(l[o])}m.defineMode("htmlmixed",function(i,t){var c=m.getMode(i,{name:"xml",htmlMode:!0,multilineTagIndentFactor:t.multilineTagIndentFactor,multilineTagIndentPastTag:t.multilineTagIndentPastTag,allowMissingTagName:t.allowMissingTagName}),s={},e=t&&t.tags,a=t&&t.scriptTypes;if(o(l,s),e&&o(e,s),a)for(var n=a.length-1;0<=n;n--)s.script.unshift(["type",a[n].matches,a[n].mode]);function u(t,e){var a,o,r,n=c.token(t,e.htmlState),l=/\btag\b/.test(n);return l&&!/[<>\s\/]/.test(t.current())&&(a=e.htmlState.tagName&&e.htmlState.tagName.toLowerCase())&&s.hasOwnProperty(a)?e.inTag=a+" ":e.inTag&&l&&/>$/.test(t.current())?(a=/^([\S]+) (.*)/.exec(e.inTag),e.inTag=null,l=">"==t.current()&&function(t,e){for(var a=0;a<t.length;a++){var n=t[a];if(!n[0]||n[1].test(d(e,n[0])))return n[2]}}(s[a[1]],a[2]),l=m.getMode(i,l),o=g(a[1],!0),r=g(a[1],!1),e.token=function(t,e){return t.match(o,!1)?(e.token=u,e.localState=e.localMode=null):(a=t,n=r,t=e.localMode.token(t,e.localState),e=a.current(),-1<(l=e.search(n))?a.backUp(e.length-l):e.match(/<\/?$/)&&(a.backUp(e.length),a.match(n,!1)||a.match(e)),t);var a,n,l},e.localMode=l,e.localState=m.startState(l,c.indent(e.htmlState,"",""))):e.inTag&&(e.inTag+=t.current(),t.eol()&&(e.inTag+=" ")),n}return{startState:function(){return{token:u,inTag:null,localMode:null,localState:null,htmlState:m.startState(c)}},copyState:function(t){var e;return t.localState&&(e=m.copyState(t.localMode,t.localState)),{token:t.token,inTag:t.inTag,localMode:t.localMode,localState:e,htmlState:m.copyState(c,t.htmlState)}},token:function(t,e){return e.token(t,e)},indent:function(t,e,a){return!t.localMode||/^\s*<\//.test(e)?c.indent(t.htmlState,e,a):t.localMode.indent?t.localMode.indent(t.localState,e,a):m.Pass},innerMode:function(t){return{state:t.localState||t.htmlState,mode:t.localMode||c}}}},"xml","javascript","css"),m.defineMIME("text/html","htmlmixed")});

public/assets/css/editor.css

@@ -0,0 +1,52 @@
+.CodeMirror {
+    height: auto;
+    min-height: 500px;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+    font-size: 0.9rem;
+    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+.CodeMirror-scroll {
+    min-height: 500px;
+}
+
+.editor-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.125rem;
+    padding: 0.375rem 0.5rem;
+    background: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-bottom: none;
+    border-radius: 0.25rem 0.25rem 0 0;
+}
+
+.editor-toolbar .vr {
+    height: 22px;
+    opacity: 0.3;
+}
+
+.editor-toolbar .btn {
+    line-height: 1;
+}
+
+.editor-wrapper {
+    border-radius: 0 0 0.25rem 0.25rem;
+    overflow: hidden;
+}
+
+.editor-wrapper .CodeMirror {
+    border-top: none;
+    border-radius: 0;
+}
+
+.card-media-item {
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    border: 1px solid #dee2e6;
+}
+.card-media-item:hover {
+    border-color: #0d6efd;
+    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
+}

public/assets/js/editor-toolbar.js

@@ -0,0 +1,233 @@
+(function () {
+    'use strict';
+
+    var textarea = document.getElementById('editor-textarea');
+    if (!textarea || typeof CodeMirror === 'undefined') return;
+
+    var ext = textarea.dataset.ext || 'md';
+
+    var modeMap = { md: 'markdown', html: 'htmlmixed', php: 'php' };
+
+    var editor = CodeMirror.fromTextArea(textarea, {
+        mode: modeMap[ext] || 'markdown',
+        lineNumbers: true,
+        lineWrapping: true,
+        matchBrackets: true,
+        autoCloseBrackets: true,
+        styleActiveLine: true,
+        indentUnit: 4,
+        tabSize: 4,
+        indentWithTabs: true,
+        viewportMargin: Infinity,
+        extraKeys: {
+            'Ctrl-S': function () { document.getElementById('editor-form').submit(); },
+            'Cmd-S': function () { document.getElementById('editor-form').submit(); }
+        }
+    });
+
+    var commands = {
+        md: [
+            { cmd: 'bold',     icon: 'bi-type-bold',      title: 'Vet' },
+            { cmd: 'italic',   icon: 'bi-type-italic',    title: 'Cursief' },
+            { cmd: 'heading',  icon: 'bi-type-h2',        title: 'Kop' },
+            { cmd: 'link',     icon: 'bi-link-45deg',     title: 'Link' },
+            null,
+            { cmd: 'ulist',    icon: 'bi-list-ul',        title: 'Ongenummerde lijst' },
+            { cmd: 'olist',    icon: 'bi-list-ol',        title: 'Genummerde lijst' },
+            { cmd: 'code',     icon: 'bi-code-slash',     title: 'Code' },
+            { cmd: 'quote',    icon: 'bi-chat-quote',     title: 'Citaat' },
+            null,
+            { cmd: 'hr',       icon: 'bi-hr',             title: 'Horizontale lijn' },
+            null,
+            { cmd: 'media',    icon: 'bi-images',         title: 'Media invoegen' }
+        ],
+        html: [
+            { cmd: 'strong',   icon: 'bi-type-bold',      title: '<strong>' },
+            { cmd: 'em',       icon: 'bi-type-italic',    title: '<em>' },
+            null,
+            { cmd: 'link',     icon: 'bi-link-45deg',     title: 'Link' },
+            { cmd: 'image',    icon: 'bi-image',          title: 'Afbeelding' },
+            null,
+            { cmd: 'comment',  icon: 'bi-chat-square-dots', title: 'Commentaar' },
+            null,
+            { cmd: 'media',    icon: 'bi-images',         title: 'Media invoegen' }
+        ],
+        php: [
+            { cmd: 'comment_php', icon: 'bi-slash-circle',  title: '// Commentaar' },
+            { cmd: 'docblock',    icon: 'bi-blockquote-left', title: '/** DocBlock */' },
+            null,
+            { cmd: 'media',    icon: 'bi-images',         title: 'Media invoegen' }
+        ]
+    };
+
+    function wrap(editor, before, after) {
+        var sel = editor.getSelection();
+        editor.replaceSelection(before + sel + after);
+        if (!sel) {
+            var cur = editor.getCursor();
+            editor.setCursor({ line: cur.line, ch: cur.ch - after.length });
+        }
+        editor.focus();
+    }
+
+    function insert(editor, text, cursorOffset) {
+        editor.replaceSelection(text);
+        if (cursorOffset !== undefined) {
+            var cur = editor.getCursor();
+            editor.setCursor({ line: cur.line, ch: cur.ch - text.length + cursorOffset });
+        }
+        editor.focus();
+    }
+
+    function prependLine(editor, prefix) {
+        var cur = editor.getCursor();
+        editor.replaceRange(prefix, { line: cur.line, ch: 0 }, { line: cur.line, ch: 0 });
+        editor.setCursor({ line: cur.line, ch: prefix.length });
+        editor.focus();
+    }
+
+    function execute(cmd) {
+        var sel = editor.getSelection();
+
+        switch (cmd) {
+            case 'bold':
+                sel ? wrap(editor, '**', '**') : insert(editor, '****', 2);
+                break;
+            case 'italic':
+                sel ? wrap(editor, '*', '*') : insert(editor, '**', 1);
+                break;
+            case 'heading':
+                prependLine(editor, '## ');
+                break;
+            case 'link':
+                sel ? wrap(editor, '[', '](url)') : insert(editor, '[linktekst](url)', 1);
+                break;
+            case 'ulist':
+                prependLine(editor, '- ');
+                break;
+            case 'olist':
+                prependLine(editor, '1. ');
+                break;
+            case 'code':
+                sel ? wrap(editor, '`', '`') : insert(editor, '``', 1);
+                break;
+            case 'quote':
+                prependLine(editor, '> ');
+                break;
+            case 'hr':
+                insert(editor, '\n---\n', 0);
+                break;
+            case 'strong':
+                sel ? wrap(editor, '<strong>', '</strong>') : insert(editor, '<strong></strong>', 8);
+                break;
+            case 'em':
+                sel ? wrap(editor, '<em>', '</em>') : insert(editor, '<em></em>', 4);
+                break;
+            case 'image':
+                insert(editor, '<img src="" alt="">', 10);
+                break;
+            case 'comment':
+                sel ? wrap(editor, '<!-- ', ' -->') : insert(editor, '<!-- -->', 4);
+                break;
+            case 'comment_php':
+                if (sel) {
+                    sel.indexOf('\n') !== -1
+                        ? insert(editor, '/* ' + sel + ' */', 0)
+                        : insert(editor, '// ' + sel, 0);
+                } else {
+                    prependLine(editor, '// ');
+                }
+                break;
+            case 'docblock':
+                insert(editor, '/**\n * \n */', 7);
+                break;
+            case 'media':
+                var modal = new bootstrap.Modal(document.getElementById('mediaModal'));
+                if (modal) modal.show();
+                break;
+        }
+    }
+
+    function buildToolbar(ext) {
+        var toolbar = document.getElementById('editor-toolbar');
+        if (!toolbar) return;
+
+        toolbar.innerHTML = '';
+        var cmds = commands[ext] || [];
+        cmds.forEach(function (item) {
+            if (item === null) {
+                var sep = document.createElement('div');
+                sep.className = 'vr';
+                toolbar.appendChild(sep);
+                return;
+            }
+            var btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = 'btn btn-sm btn-outline-secondary';
+            btn.title = item.title;
+            btn.innerHTML = '<i class="bi ' + item.icon + '"></i>';
+            btn.addEventListener('click', function () { execute(item.cmd); });
+            toolbar.appendChild(btn);
+        });
+    }
+
+    var templates = {
+        md: '# Nieuwe Pagina\n\nSchrijf hier je inhoud...\n',
+        html: '<h1>Nieuwe Pagina</h1>\n<p>Dit is een HTML content pagina.</p>\n',
+        php: '---\ntitle: Nieuwe Pagina\n---\n\n<?php\n$pageTitle = "Nieuwe Pagina";\n?>\n\n<h1><?= $pageTitle ?></h1>\n<p>PHP content - alles wat je hier echo&#39;t wordt weergegeven.</p>\n\n<?php\n$items = [\'Item 1\', \'Item 2\', \'Item 3\'];\n?>\n<ul>\n<?php foreach ($items as $item): ?>\n    <li><?= $item ?></li>\n<?php endforeach; ?>\n</ul>\n'
+    };
+
+    var defaultContents = {};
+
+    function getTemplate(ext) {
+        return templates[ext] || '';
+    }
+
+    function setDefaultContent(ext) {
+        var tpl = getTemplate(ext);
+        editor.setValue(tpl);
+        editor.setCursor({ line: 0, ch: 0 });
+        editor.focus();
+        defaultContents[ext] = tpl;
+    }
+
+    function switchMode(ext, forceContent) {
+        var mode = modeMap[ext] || 'markdown';
+        editor.setOption('mode', mode);
+        textarea.dataset.ext = ext;
+
+        if (forceContent) {
+            setDefaultContent(ext);
+        } else {
+            var cur = editor.getValue().trim();
+            var expected = defaultContents[ext];
+            if (cur === '' || (expected && cur === expected.trim())) {
+                setDefaultContent(ext);
+            }
+        }
+    }
+
+    editor.on('change', function () {
+        if (window.__onContentChange) window.__onContentChange();
+    });
+
+    buildToolbar(ext);
+
+    var form = document.getElementById('editor-form');
+    var isNewPage = form && form.hasAttribute('data-new-page');
+
+    if (isNewPage && editor.getValue().trim() === '') {
+        setDefaultContent(ext);
+    }
+
+    var typeSelect = document.querySelector('[data-editor-mode]');
+    if (typeSelect && isNewPage) {
+        typeSelect.addEventListener('change', function () {
+            switchMode(this.value, true);
+        });
+    }
+
+    document.getElementById('editor-form').addEventListener('submit', function () {
+        editor.save();
+    });
+})();