Enhancing Your DokuWiki Forms with Custom JavaScript - Replacing Newlines with Markdown-Friendly Syntax

Author(s): Louis Ouellet

DokuWiki is a fantastic tool for creating and managing content collaboratively. However, working with custom markdown can sometimes be a hurdle, especially for users who aren’t familiar with its nuances. For instance, when dealing with form inputs, DokuWiki users often encounter issues with preserving newlines (\n) during form submission. To simplify this, I’ve developed a JavaScript solution that automatically converts \n to \, ensuring that forms work seamlessly with DokuWiki’s markdown syntax.

This script not only streamlines the user experience by handling markdown transformations but also makes it easier to display form inputs correctly. It’s particularly useful when forms are used in namespaces requiring strict markdown compliance. In this tutorial, I’ll show you how to set up and use this script in your DokuWiki instance.

Follow these steps to enhance your DokuWiki forms with this custom script:

Access your DokuWiki instance with administrator privileges.

Navigate to the Admin page from your DokuWiki site.

In the Admin menu, find and select Advanced Configurations.

Select to the Configurations section in the Table of Contents and select the User JavaScript tab.

Copy the following script and paste it into the User JavaScript field:

userscript.js

// Execute the script once the document is ready
jQuery(document).ready(function(){
 
    // List of namespaces to apply the script to
    var namespaces = ["namespace:page"];
 
    // Restrict to a specific namespace
    if (namespaces.indexOf(JSINFO['id']) > -1) {
 
        // Check if "?do=" & "&do=" is present in the URL
        if (window.location.search.indexOf("?do=") === -1 && window.location.search.indexOf("&do=") === -1) {
 
            // Find all the texteareas and Replace " \ " with newlines
            jQuery(this).find('textarea').each(function() {
 
                // Check if the textarea is visible
                if (jQuery(this).is(":visible")) {
 
                    // Replace " \ " with newlines
                    jQuery(this).val(jQuery(this).val().replace(/ \\ /gm, "\n"));
                }
            });
 
            // Replace default form submission with custom function
            jQuery("form").on("submit", function(event) {
 
                // Prevent the form from submitting immediately
                event.preventDefault();
 
                // Find all the texteareas and replace newlines with " \ "
                jQuery(this).find('textarea').each(function() {
 
                    // Check if the textarea is visible
                    if (jQuery(this).is(":visible")) {
 
                        // Replace newlines with " \ "
                        jQuery(this).val(jQuery(this).val().replace(/\n/gm, ' \\ '));
                    }
                });
 
                // After running the function, manually trigger the form submission
                this.submit();
            });
        }
    }
});

Click Save to apply the changes.

Clear your DokuWiki’s JavaScript cache to ensure the changes take effect. You can do this by adding ?purge=true to the URL or by pressing Purge JS Cache.

Visit a namespace specified in the script and test your forms. Enter multiline text, submit the form, and verify that the submission preserves newlines in the desired format.

Here is an example of how the script works:

bureaucracy.txt

<form>
action mail username@domain.com
 
fieldset "1."
textarea "Test multiple lines"
 
fieldset "2."
textarea "Test skipping lines"
 
fieldset "3."
textarea "Test no value" !
 
fieldset "Submit"
Submit submit
</form>

Result:

The following data was submitted on 2024/12/20 10:53.
 
1.
Test multiple lines asdf \\ asdf \\ asdf
2.
Test skipping lines asdf \\ \\ asdf \\ \\ asdf
3.
Submit

Your DokuWiki instance is now equipped with an enhanced form handling script that improves usability and ensures markdown compliance.

With this script, you can significantly improve the way multiline inputs are handled in DokuWiki forms. By automating the conversion of \n (newline) to
(markdown), you eliminate the need for users to manually adjust their inputs for DokuWiki’s markdown syntax. This not only simplifies the user experience but also ensures your forms maintain consistent formatting across submissions.

Feel free to tweak the namespaces in the script to suit your use case. If you encounter any issues or have suggestions for improvements, don’t hesitate to leave a comment!