Exact steps to add custom styles

  • 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

    • This topic was modified 2 years, 4 months ago by sirdexter.
    • This topic was modified 2 years, 4 months ago by sirdexter.
    • This topic was modified 2 years, 4 months ago by sirdexter.

    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 sirdexter

    (@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?

    • This reply was modified 2 years, 4 months ago by sirdexter.
    Thread Starter sirdexter

    (@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.