• Hi,

    I would like to ask about the steps I need to take to add custom styles to the mammoth plugin. It’s not very clear to me.

    I have the mammoth plugin installed on my WordPress site in the directory plugins/mammoth-docx-converter. I don’t know whether the files (mammoth-options.js and mammoth-options.php) should be placed in the “plugins/mammoth-docx-converter/mammoth-options” directory or directly in “plugins/mammoth-docx-converter”.

    I tried both ways. In Word, I have a style for code called “Code”. I have to manually add code to a file that is visible as
    <pre class="wp-block-code">

    When I import it with a plugin it is converted to paragraphs for each line instead of <pre class="wp-block-code">

    These are the lines I added to the MAMMOTH_OPTIONS function in “mammoth-options.js”:

    "p[style-name='Code'] => pre.wp-block-code:fresh",
    "p[style-name='Code'] => pre:separator('\\n')",

    It seems that it has no effect on the imported file. Works the same as before.
    What am I missing here?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Michael Williamson

    (@michaelwilliamson)

    There’s an example plugin on GitHub: https://github.com/mwilliamson/mammoth-wordpress-plugin/tree/master/examples/options-plugin

    This needs to be installed as a separate plugin, not part of the existing Mammoth plugin. In other words, you’ll need to install the mammoth-options directory as a WordPress plugin.

    Thread Starter Tomasz Decker

    (@sirdexter)

    Thank you for your help.

    I managed to change styles in mammoth-editor.js in mammoth-docx-converter-plugin and it works fine:

    "p[style-name='Code'] => pre.wp-block-code > code:separator('\\n')",
    "p[style-name='Result'] => pre.wp-block-preformatted:separator('\\n')",

    But it doesn’t seem to work after I installed the mammoth-options plugin and added both lines there. I installed WordPress on localhost to check it. This is the file:

    function MAMMOTH_OPTIONS(mammoth) {
        var styleMap = [
            "p[style-name='Custom Heading 1'] => h1",
            "p[style-name='Custom Heading 2'] => h2",
    
            "r[style-name='Custom Bold'] => strong",
            "r[style-name='Custom Italic'] => em",
    
            "p[style-name='Code Block C'] => pre.language-c:separator('\\n')",
            "p[style-name='Code Block JavaScript'] => pre.language-javascript:separator('\\n')",
            "p[style-name='Code Block'] => pre:separator('\\n')",
    		
            "p[style-name='Code'] => pre.wp-block-code > code:separator('\\n')",
            "p[style-name='Result'] => pre.wp-block-preformatted:separator('\\n')",
        ];
    
        function setParagraphStyleNameFromFonts(fonts, styleName, skipStyleNameRegex) {
            return mammoth.transforms.paragraph(function(paragraph) {
                var runs = mammoth.transforms.getDescendantsOfType(paragraph, "run");
                var isMatch = runs.length > 0 && runs.every(function(run) {
                    return run.font && fonts.indexOf(run.font.toLowerCase()) !== -1;
                });
                if (isMatch && !skipStyleNameRegex.test(paragraph.styleName)) {
                    return {...paragraaph, styleName: styleName};
                } else {
                    return paragraph;
                }
            });
        }
    
        return {
            styleMap: styleMap,
            // If a paragraph is entirely made up of runs that use monospace fonts,
            // update the paragraph to use the style "Code Block" if it doesn't
            // already have a "Code Block" style.
            transformDocument: setParagraphStyleNameFromFonts(
                ["consolas", "courier", "courier new"],
                "Code Block",
                /^Code Block/i
            )
        };
    }

    Shouldn’t it work the same as before?

    Thread Starter Tomasz Decker

    (@sirdexter)

    Everything works fine now. It was the browser caching problem. Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Exact steps to add custom styles’ is closed to new replies.