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