XF 2.2 Using word_paste froala plugin

[Xon]

I've been trying to use the bundled word_paste.min.js to see if it helps with some complaints about copy&pasting from Word into XF.

Except I can't get it working to even determine if it would be useful.

Spoiler: setup

I can inject the javascript via a template pre-render hook for the "editor" template, and the js is successfully included and the browser fetches it.

public static function editorTemplatePreRender(\XF\Template\Templater $templater, string &$type, string &$template, array &$params)
{
...
   $templater->includeJs(['src' => 'vendor/froala/plugins/word_paste.min.js']);
}

I've prepped javascript to enable the plugin;

$(document).on('editor:config', function(event, config, xfEditor) {
...
            config.wordPasteModal = true;
            config.wordPasteKeepFormatting = true;

The problem is the plugin throws an error on being loaded by the browser;

Uncaught TypeError: Cannot read property 'DEFAULTS' of undefined
    at word_paste.min.js?_v=82104a58:formatted:12
    at word_paste.min.js?_v=82104a58:formatted:8
    at word_paste.min.js?_v=82104a58:formatted:9

De-minifying the code gives;

!function(e, t) {
    "object" == typeof exports && "undefined" != typeof module ? t(require("froala-editor")) : "function" == typeof define && define.amd ? define(["froala-editor"], t) : t(e.FroalaEditor)
}(this, function(w) {
    "use strict";
    w = w && w.hasOwnProperty("default") ? w["default"] : w,
    Object.assign(w.DEFAULTS, {
        wordDeniedTags: [],
        wordDeniedAttrs: [],
        wordAllowedStyleProps: ["font-family", "font-size", "background", "color", "width", "text-align", "vertical-align", "background-color", "padding", "margin", "height", "margin-top", "margin-left", "margin-right", "margin-bottom", "text-decoration", "font-weight", "font-style", "text-indent", "border", "border-.*", "line-height", "list-style-type"],
        wordPasteModal: !0,
        wordPasteKeepFormatting: !0
    }),

Tracing back the call stack, it looks like this code is expecting document.FroalaEditor to have contents.

So how is this plugin supposed to be loaded?

 

[Xon]

@Chris D @Mike would you have any info on this one?

 

[Chris D]

It looks like the word_paste.min.js file is being included before the main Froala JS.

As a quick test if you throw this into any template:

<xf:editorrow name="test" />

<xf:js src="vendor/froala/plugins/word_paste.min.js" />

It will work fine (editorrow loads the Froala JS then the word_paste.js is included after).

Doing it via the template_pre_render event includeJs is including the word_paste JS before the main Froala JS:

<script src="/22x/js/xf/message.js?_v=ba78e7d3"></script>
<script src="/22x/js/vendor/froala/plugins/word_paste.min.js?_v=ba78e7d3"></script>
<script src="/22x/js/vendor/froala/froala-compiled.full.js?_v=ba78e7d3"></script>
<script src="/22x/js/xf/editor.js?_v=ba78e7d3"></script>

If you want to include the JS in this same way, I think you need to use templater_template_post_render as that will include the word_paste plugin after the Froala JS.

Alternatively it would need a template modification to include it after the desired xf:editor tag or for every editor via a TM to the editor template. There's an extension point in that template already to make including additional JS easier:

<!--[XF:include_js]-->

 

[Xon]

That makes a lot of sense, thanks!

 

[Xon]

Disappointingly; the word plugin filter isn't very useful at all

 

[Nirjonadda]

@Xon Do you adding this functionally in your Advanced Bb Codes Pack addon? If so, Please also Adds Select all option to the toolbar and Spell Checker Plugins for Allows the user to see and correct misspellings while typing.

 

[Xon]

I've been aiming to improve Word copy & paste compatibility as it has been a semi-common complaint on my forums.

XenForo doesn't ship with the spell checker plugin; and it isn't really needed; browser spell checker can and does trigger on XF2 editor already.

Select All can be easily done with keyboard shortcuts, and a button for it takes up very constrained UI space. I'm more likely to add a "cancel" button which resets the editor and deletes the contents (well, saves it into the local undo buffer then deletes it)

 

[Xon]

I've ended up working on adding a pile of small improvements to XenForo's html to bb-code copy & paste support;

• Discord's html formatting (ctrl-c & ctrl-v, the copy context menu outputs text!)
• Better Microsoft Office/LibreOffice/OpenOffice support. All require slightly specialized support due to different handling of lines/paragraphs.
• Some more generic work-around on taking various CSS formatting on <p> tags and converting these into lines instead of line-spaced paragraphs.
• Support for copy & paste of XF's inline code/spoiler bb-code.
• Work-around for really janky editor behaviour if copy & paste results in a new-line (<br>) in the wrong spot.

All of this is a pile of ad-hoc javascript rather than trying to use the word_paste froala plugin.