1/*  DokuWiki MoaiEditor Main.js file
2    Version : 0.5a (May 6, 2026)
3    Author  : MoaiTools <info@moaitools.org>
4    License : GPL 3 (http://www.gnu.org/licenses/gpl.html) */
5
6/* This is main class of MoaiEditor.
7*/
8MoaiEditor.Main = class {
9
10    constructor() {
11
12        // We are only supporting 'edit' mode for now (prehaps 'preview' mode might be worth too, e.g on captcha errors)
13        if (JSINFO.ACT !== 'edit')
14            return;
15
16        // Exit if there is no textarea (e.g edittable plugin)
17        if (!document.body.querySelector("#wiki__text"))
18            return;
19
20        // Handle the 'hide_editor_by_default' option (available in the Dokuwiki configuration manager)
21        if (this.editorIsHidden())
22            return;
23
24        // Specify release
25        this.version_number = '0.5a';
26        this.version_date = 'May 6, 2026';
27
28        // Settings
29        this.strict = false;    // strict mode will show more errors and crash the script on some errors (disable before release)
30
31        // Variables
32        this.layoutReady = false;   // Prevent actions before the layout is ready
33
34        // Continue initialization after the constructor has finished (so that the object exists already)
35        setTimeout(this.init.bind(this), 30);
36    }
37    // ────────────────────────────────────
38    init() {
39
40        // Create the button that starts the editor
41        this.start = new MoaiEditor.StartButton();
42
43        // Initialize the settings variable which controls if the editor starts enabled by default (exposed to the user by this.buttons.enabled)
44        this.enabled = new MoaiEditor.LocalStorage('btn_enabled', 'off', ['on','off']);
45
46        // Detect the template in use (aka theme or skin) and find needed DOM elements (textarea, form, etc)
47        this.template = this.detectTemplate();                      // Detect the template in use
48        this.template.findElements();                               // Try to find the HTML elements we need (asynchronous process, will call 'startEditor' if successful and editor is enabled)
49        this.loadCSS('templates/'+this.template.name+'.css');       // Load an optional template-specific CSS file
50
51        // Handle compatibility with other plugins
52        this.plugins = {
53            'captcha'    : new MoaiEditor.Captcha(),
54            'codemirror' : new MoaiEditor.Codemirror(),
55        };
56    }
57    // ────────────────────────────────────
58    detectTemplate() {
59
60        // Try to identify the template currently in use and create an object to handle it
61        for (let name of moaiEditor_templates) {
62            var template = eval("new MoaiEditor.Template_"+name+"(name);");
63            if (template.detectTemplate()) {
64                return template;
65            }
66        }
67        // If the template currently in use was not identified, use the default class (in templates/default.js)
68        return eval("new MoaiEditor.Template('default');");
69    }
70    // ────────────────────────────────────
71    loadCSS(name)  {
72        // Load an on-demand CSS file and add it to the head of the document
73        const link = this.createHTML('<link href="lib/plugins/moaieditor/'+name+'" rel="stylesheet" type="text/css"/>');
74        document.head.appendChild(link);
75    }
76    // ────────────────────────────────────
77    startEditor()  {
78
79        /* This function starts the editor.
80
81           It will get called whenever:
82             - the editor is enabled by default and the asynchronous process started by 'this.template.findElements()' finishes successfuly.
83             - the 'start editor' button is clicked.
84
85           The following conditions must be met for the editor to start:
86             - The needed elements of the DOM must have been found (signaled by 'this.template.ready')
87             - The editor must not have started already (signaled by '!this.layoutReady')  */
88
89        // Return if conditions are not met
90        if (!this.template.ready  ||  this.layoutReady)
91            return;
92
93        // Remember some user settings we don't want to get changed outside MoaiEditor.
94        this.persistCookies = {
95            'cm-nativeeditor': DokuCookie.getValue('cm-nativeeditor')
96        };
97        // ────────────────── Create objects ───────────────────
98
99        // Create SVG icons
100        this.icons = new MoaiEditor.Icons();
101
102        // Handle AJAX request for previews
103        this.ajax = new MoaiEditor.Ajax(this);
104
105        // Handle the preview pane
106        this.preview = new MoaiEditor.Preview(this);
107
108        // Create buttons
109        this.buttons = new MoaiEditor.Buttons(this);
110
111        // Manage the native editor (textarea mirroring for syntax highlighting and synchronized scrolling)
112        this.mirror = new MoaiEditor.TextAreaMirror(this);
113
114        // Manage html-to-markup matching (for synchronized scrolling, syntax highlight, and for faster previews by rendering only parts of the document)
115        this.matches = new MoaiEditor.Matches(this);
116
117        // Manage partial previews (which means rendering only changed areas of the document for faster previews)
118        this.dirty = new MoaiEditor.Dirty(this);
119
120        // Manage automated scrolling (synchronized panes, clickable html headers, table of contents)
121        this.scroll = new MoaiEditor.Scroll(this);
122
123        // Manage table of contents
124        this.toc = new MoaiEditor.ToC(this);
125
126        // Manage visual inidicator whenever a draft is saved
127        this.draft = new MoaiEditor.Draft(this);
128
129        // Setup the new DOM layout
130        this.layout = new MoaiEditor.Layout(this.template.elements);
131
132        // Manage the current editor and switch between them (native, codemirror, prosemirror, etc)
133        this.editor = new MoaiEditor.Editor();
134
135        // ─────────── Initialize (done only once) ────────────
136
137        this.initPluginsBeforeLayout();
138        this.editor.init();
139        this.layout.init();
140        this.initPluginsAfterLayout();
141        this.mirror.init();
142        this.preview.init();
143        this.scroll.init();
144
145        // ─────────── Add various event listeners ────────────
146
147        // Window resize
148        window.addEventListener("resize", this.onWindowResize.bind(this));
149
150        // Preview
151        this.preview.container.addEventListener("scroll", this.preview.onScroll.bind(this.preview), {passive:true});
152
153        // Textarea
154        var textarea = this.template.elements.textarea;
155        textarea.addEventListener("scroll",  this.mirror.onTextareaScroll.bind(this.mirror), {passive:true});
156        textarea.addEventListener("input",   this.mirror.onTextareaInput.bind(this.mirror));
157        textarea.addEventListener("keydown", this.mirror.onTextareaKeydown.bind(this.mirror));
158        new ResizeObserver(this.mirror.onTextareaResize.bind(this.mirror)).observe(textarea);
159
160        // Dokuwiki toolbar (catch text changes by toolbar button actions)
161        for (let button of document.querySelectorAll("button.toolbutton"))
162            button.addEventListener("click", this.editor.onToolbarButtonInput.bind(this.editor));
163
164        // OnBeforeUnload
165        window.addEventListener("beforeunload", this.onBeforeUnload.bind(this));
166
167        // ────────────────────── Start ───────────────────────
168
169        requestAnimationFrame(() => {
170
171            // Update the style of the exit buttons (Save, Cancel, Back)
172            this.buttons.styleExitButtons();
173
174            // Allow actions now that the layout is ready
175            this.layoutReady = true;
176
177            // Start the editor pane
178            this.editor.start();
179
180            // Show initial preview
181            this.ajax.request();
182        });
183        // Create debug line
184        //this.createDebugLine();
185    }
186    // ────────────────────────────────────
187    initPluginsBeforeLayout()  {
188        for (let name in this.plugins)
189            if (this.plugins[name].initBeforeLayout)
190                this.plugins[name].initBeforeLayout();
191    }
192    initPluginsAfterLayout()  {
193        for (let name in this.plugins)
194            if (this.plugins[name].initAfterLayout)
195                this.plugins[name].initAfterLayout();
196    }
197    // ────────────────────────────────────
198    onWindowResize()  {
199        this.layout.onWindowResize();
200        this.toc.redraw();           // The width of the dummy dropdown needs refreshing
201    }
202    // ────────────────────────────────────
203    onBeforeUnload() {
204        // Restore some settings cookies we don't want to interfer with outside MoaiEditor
205        if (this.persistCookies)
206            for (let name in this.persistCookies)
207                DokuCookie.setValue(name, this.persistCookies[name]);
208        // If MoaiEditor is enabled by default prevent CodeMirror to start by default to improve startup speed on big documents
209        if (moaiEditor.enabled.value == 'on')
210            DokuCookie.setValue('cm-nativeeditor', '1');
211    }
212    // ────────────────────────────────────
213    createHTML(htmlString) {
214        var div = document.createElement('div');
215        div.innerHTML = htmlString.trim();
216        return div.firstChild;  // Change this to div.childNodes to support multiple top-level nodes.
217    }
218    // ────────────────────────────────────
219    editorIsHidden()  {
220        /* This function makes it possible to hide MoaiEditor from regular users and only make it
221           available on a per-browser basis. Useful if you want to test the plugin in a plublic wiki
222           but not make it available to all users yet. You can enable/disable this option in the DokuWiki
223           configuration manager.
224        */
225        // Return false if the setting is not enabled in Dokuwiki
226        if (JSINFO.plugin_moaieditor.hide_editor_by_default == '0')
227            return false;
228
229        // Initialize the local-storage variable
230        const isHidden = new MoaiEditor.LocalStorage('editor_is_hidden', '1', [0,1]);
231
232        // Change local-storage variable depending on user query-string variable
233        if (window.location.href.includes("showeditor=0"))
234            isHidden.value = '1';
235        if (window.location.href.includes("showeditor=1"))
236            isHidden.value = '0';
237
238        // Return boolean
239        if (isHidden.value == '1')
240            return true;
241        else
242            return false;
243    }
244    // ────────────────────────────────────
245    dokuMessage(message, lvl) {
246        /* Displays a dokuwiki message, similar to inc/infoutils.php -> msg()
247        */
248        const levels = {
249            '-1': 'error',
250            '0' : 'info',
251            '1' : 'success',
252            '2' : 'notify'
253        };
254        const cls = levels[lvl];
255        const msg = moaiEditor.createHTML(`<div class="${cls}">${message}</div>`);
256        document.querySelector("#moaied__msg_area").appendChild(msg);
257    }
258    // ────────────────────────────────────
259    createDebugLine() {
260        const line = this.createHTML("<div id='moai__debug'>  <div></div>  <div></div>  <div></div>  <div></div>  </div>");
261        document.querySelector("html").appendChild(line);
262    }
263}; // End Class
264
265
266
267