xref: /plugin/myshortcuts/test-debug.html (revision 61ef61f6aef59d2b4dc796cb87289ce67202085d) 
1*61ef61f6Sdavidjimenez75<!DOCTYPE html>
2*61ef61f6Sdavidjimenez75<html lang="en">
3*61ef61f6Sdavidjimenez75<head>
4*61ef61f6Sdavidjimenez75    <meta charset="UTF-8">
5*61ef61f6Sdavidjimenez75    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6*61ef61f6Sdavidjimenez75    <title>MyShortcuts Plugin Debug Test</title>
7*61ef61f6Sdavidjimenez75    <link rel="stylesheet" href="style.css">
8*61ef61f6Sdavidjimenez75    <style>
9*61ef61f6Sdavidjimenez75        body {
10*61ef61f6Sdavidjimenez75            font-family: Arial, sans-serif;
11*61ef61f6Sdavidjimenez75            max-width: 800px;
12*61ef61f6Sdavidjimenez75            margin: 50px auto;
13*61ef61f6Sdavidjimenez75            padding: 20px;
14*61ef61f6Sdavidjimenez75        }
15*61ef61f6Sdavidjimenez75        .test-section {
16*61ef61f6Sdavidjimenez75            background: #f5f5f5;
17*61ef61f6Sdavidjimenez75            padding: 20px;
18*61ef61f6Sdavidjimenez75            margin: 20px 0;
19*61ef61f6Sdavidjimenez75            border-radius: 5px;
20*61ef61f6Sdavidjimenez75        }
21*61ef61f6Sdavidjimenez75        .success { color: green; }
22*61ef61f6Sdavidjimenez75        .error { color: red; }
23*61ef61f6Sdavidjimenez75        #wiki__text {
24*61ef61f6Sdavidjimenez75            width: 100%;
25*61ef61f6Sdavidjimenez75            height: 200px;
26*61ef61f6Sdavidjimenez75            padding: 10px;
27*61ef61f6Sdavidjimenez75            font-family: monospace;
28*61ef61f6Sdavidjimenez75        }
29*61ef61f6Sdavidjimenez75        #debug-output {
30*61ef61f6Sdavidjimenez75            background: #000;
31*61ef61f6Sdavidjimenez75            color: #0f0;
32*61ef61f6Sdavidjimenez75            padding: 10px;
33*61ef61f6Sdavidjimenez75            font-family: monospace;
34*61ef61f6Sdavidjimenez75            font-size: 12px;
35*61ef61f6Sdavidjimenez75            max-height: 300px;
36*61ef61f6Sdavidjimenez75            overflow-y: auto;
37*61ef61f6Sdavidjimenez75        }
38*61ef61f6Sdavidjimenez75    </style>
39*61ef61f6Sdavidjimenez75</head>
40*61ef61f6Sdavidjimenez75<body>
41*61ef61f6Sdavidjimenez75    <h1>MyShortcuts Plugin Debug Test</h1>
42*61ef61f6Sdavidjimenez75
43*61ef61f6Sdavidjimenez75    <div class="test-section">
44*61ef61f6Sdavidjimenez75        <h2>Status Checks</h2>
45*61ef61f6Sdavidjimenez75        <div id="status-checks"></div>
46*61ef61f6Sdavidjimenez75    </div>
47*61ef61f6Sdavidjimenez75
48*61ef61f6Sdavidjimenez75    <div class="test-section">
49*61ef61f6Sdavidjimenez75        <h2>Test Editor (simulates DokuWiki editor)</h2>
50*61ef61f6Sdavidjimenez75        <p>This simulates the DokuWiki editor textarea:</p>
51*61ef61f6Sdavidjimenez75        <textarea id="wiki__text">Type here and test Ctrl+I for snippets...</textarea>
52*61ef61f6Sdavidjimenez75    </div>
53*61ef61f6Sdavidjimenez75
54*61ef61f6Sdavidjimenez75    <div class="test-section">
55*61ef61f6Sdavidjimenez75        <h2>Debug Console</h2>
56*61ef61f6Sdavidjimenez75        <div id="debug-output"></div>
57*61ef61f6Sdavidjimenez75    </div>
58*61ef61f6Sdavidjimenez75
59*61ef61f6Sdavidjimenez75    <div class="test-section">
60*61ef61f6Sdavidjimenez75        <h2>Instructions</h2>
61*61ef61f6Sdavidjimenez75        <ol>
62*61ef61f6Sdavidjimenez75            <li><strong>Check Status</strong>: Look at the status checks above</li>
63*61ef61f6Sdavidjimenez75            <li><strong>Test Ctrl+I</strong>: Click in the textarea and press Ctrl+I</li>
64*61ef61f6Sdavidjimenez75            <li><strong>Expected Result</strong>: A snippet dialog should appear</li>
65*61ef61f6Sdavidjimenez75            <li><strong>If it works here</strong>: The problem is with DokuWiki integration</li>
66*61ef61f6Sdavidjimenez75            <li><strong>If it doesn't work</strong>: There's a JavaScript error</li>
67*61ef61f6Sdavidjimenez75        </ol>
68*61ef61f6Sdavidjimenez75    </div>
69*61ef61f6Sdavidjimenez75
70*61ef61f6Sdavidjimenez75    <!-- Simulate DokuWiki config -->
71*61ef61f6Sdavidjimenez75    <script>
72*61ef61f6Sdavidjimenez75        // Simulate MYSHORTCUTS_CONFIG
73*61ef61f6Sdavidjimenez75        var MYSHORTCUTS_CONFIG = {
74*61ef61f6Sdavidjimenez75            shortcutEdit: 'ctrl+e',
75*61ef61f6Sdavidjimenez75            shortcutSave: 'ctrl+s',
76*61ef61f6Sdavidjimenez75            shortcutSnippet: 'ctrl+i',
77*61ef61f6Sdavidjimenez75            snippets: [
78*61ef61f6Sdavidjimenez75                { label: 'Test Snippet 1', text: 'This is test snippet 1' },
79*61ef61f6Sdavidjimenez75                { label: 'Test Snippet 2', text: 'This is test snippet 2' },
80*61ef61f6Sdavidjimenez75                { label: 'Meeting Notes', text: '## Meeting Notes\n\nDate: \nAttendees: ' }
81*61ef61f6Sdavidjimenez75            ]
82*61ef61f6Sdavidjimenez75        };
83*61ef61f6Sdavidjimenez75
84*61ef61f6Sdavidjimenez75        // Debug logging
85*61ef61f6Sdavidjimenez75        function debugLog(message, type) {
86*61ef61f6Sdavidjimenez75            var output = document.getElementById('debug-output');
87*61ef61f6Sdavidjimenez75            var time = new Date().toLocaleTimeString();
88*61ef61f6Sdavidjimenez75            var color = type === 'error' ? '#f00' : type === 'success' ? '#0f0' : '#0ff';
89*61ef61f6Sdavidjimenez75            output.innerHTML += '<span style="color:' + color + '">[' + time + '] ' + message + '</span><br>';
90*61ef61f6Sdavidjimenez75            output.scrollTop = output.scrollHeight;
91*61ef61f6Sdavidjimenez75        }
92*61ef61f6Sdavidjimenez75
93*61ef61f6Sdavidjimenez75        // Override console.log
94*61ef61f6Sdavidjimenez75        var originalLog = console.log;
95*61ef61f6Sdavidjimenez75        console.log = function() {
96*61ef61f6Sdavidjimenez75            originalLog.apply(console, arguments);
97*61ef61f6Sdavidjimenez75            debugLog(Array.from(arguments).join(' '), 'info');
98*61ef61f6Sdavidjimenez75        };
99*61ef61f6Sdavidjimenez75
100*61ef61f6Sdavidjimenez75        // Override console.error
101*61ef61f6Sdavidjimenez75        var originalError = console.error;
102*61ef61f6Sdavidjimenez75        console.error = function() {
103*61ef61f6Sdavidjimenez75            originalError.apply(console, arguments);
104*61ef61f6Sdavidjimenez75            debugLog('ERROR: ' + Array.from(arguments).join(' '), 'error');
105*61ef61f6Sdavidjimenez75        };
106*61ef61f6Sdavidjimenez75
107*61ef61f6Sdavidjimenez75        window.addEventListener('error', function(e) {
108*61ef61f6Sdavidjimenez75            debugLog('ERROR: ' + e.message + ' at ' + e.filename + ':' + e.lineno, 'error');
109*61ef61f6Sdavidjimenez75        });
110*61ef61f6Sdavidjimenez75
111*61ef61f6Sdavidjimenez75        debugLog('Debug test page loaded', 'success');
112*61ef61f6Sdavidjimenez75    </script>
113*61ef61f6Sdavidjimenez75
114*61ef61f6Sdavidjimenez75    <!-- Load the plugin script -->
115*61ef61f6Sdavidjimenez75    <script src="script.js"></script>
116*61ef61f6Sdavidjimenez75
117*61ef61f6Sdavidjimenez75    <!-- Status checks -->
118*61ef61f6Sdavidjimenez75    <script>
119*61ef61f6Sdavidjimenez75        function checkStatus() {
120*61ef61f6Sdavidjimenez75            var statusDiv = document.getElementById('status-checks');
121*61ef61f6Sdavidjimenez75            var checks = [];
122*61ef61f6Sdavidjimenez75
123*61ef61f6Sdavidjimenez75            // Check if config loaded
124*61ef61f6Sdavidjimenez75            if (typeof MYSHORTCUTS_CONFIG !== 'undefined') {
125*61ef61f6Sdavidjimenez75                checks.push('<p class="success">✓ MYSHORTCUTS_CONFIG is defined</p>');
126*61ef61f6Sdavidjimenez75                debugLog('Config loaded: ' + JSON.stringify(MYSHORTCUTS_CONFIG), 'success');
127*61ef61f6Sdavidjimenez75            } else {
128*61ef61f6Sdavidjimenez75                checks.push('<p class="error">✗ MYSHORTCUTS_CONFIG is NOT defined</p>');
129*61ef61f6Sdavidjimenez75                debugLog('Config NOT loaded', 'error');
130*61ef61f6Sdavidjimenez75            }
131*61ef61f6Sdavidjimenez75
132*61ef61f6Sdavidjimenez75            // Check if plugin object exists
133*61ef61f6Sdavidjimenez75            if (typeof MyShortcutsPlugin !== 'undefined') {
134*61ef61f6Sdavidjimenez75                checks.push('<p class="success">✓ MyShortcutsPlugin object exists</p>');
135*61ef61f6Sdavidjimenez75                debugLog('MyShortcutsPlugin object found', 'success');
136*61ef61f6Sdavidjimenez75            } else {
137*61ef61f6Sdavidjimenez75                checks.push('<p class="error">✗ MyShortcutsPlugin object NOT found</p>');
138*61ef61f6Sdavidjimenez75                debugLog('MyShortcutsPlugin object NOT found', 'error');
139*61ef61f6Sdavidjimenez75            }
140*61ef61f6Sdavidjimenez75
141*61ef61f6Sdavidjimenez75            // Check if editor exists
142*61ef61f6Sdavidjimenez75            var editor = document.getElementById('wiki__text');
143*61ef61f6Sdavidjimenez75            if (editor) {
144*61ef61f6Sdavidjimenez75                checks.push('<p class="success">✓ Editor textarea found (#wiki__text)</p>');
145*61ef61f6Sdavidjimenez75                debugLog('Editor textarea found', 'success');
146*61ef61f6Sdavidjimenez75            } else {
147*61ef61f6Sdavidjimenez75                checks.push('<p class="error">✗ Editor textarea NOT found</p>');
148*61ef61f6Sdavidjimenez75                debugLog('Editor textarea NOT found', 'error');
149*61ef61f6Sdavidjimenez75            }
150*61ef61f6Sdavidjimenez75
151*61ef61f6Sdavidjimenez75            statusDiv.innerHTML = checks.join('');
152*61ef61f6Sdavidjimenez75        }
153*61ef61f6Sdavidjimenez75
154*61ef61f6Sdavidjimenez75        // Run checks after a short delay
155*61ef61f6Sdavidjimenez75        setTimeout(checkStatus, 100);
156*61ef61f6Sdavidjimenez75
157*61ef61f6Sdavidjimenez75        debugLog('Status checks scheduled', 'info');
158*61ef61f6Sdavidjimenez75    </script>
159*61ef61f6Sdavidjimenez75</body>
160*61ef61f6Sdavidjimenez75</html>
161