Fixed Draft button is only hidden from editor but is still usable

[TickTackk]

Affected version

2.1

Steps to reproduce:

1. Open a page with editor and draft system enabled (saveDrafts being checked)
2. Disable draft system (saveDrafts being unchecked)
3. Enter some random text in editor
4. Click on the floppy-disk icon
5. Check xf_draft table and you should see a new try
6. Reload the page and you should see the message in the editor comes from the draft instead of being empty

 

[Chris D]

This is really just a transient issue that arises from an editor instance being told saving drafts is an available function then it becoming unavailable after it has already loaded.

I don't particularly see a compelling reason to change this given that on the next page load the issue resolves itself.

 

[TickTackk]

This is really just a transient issue that arises from an editor instance being told saving drafts is an available function then it becoming unavailable after it has already loaded.

Agree to disagree. Someone devious could easily make use of this snippet:

$(function()
{
    /**
     * Primary button in the editor toolbar
     */
    var $draftButton = $('<button>', {
        id: "xfDraft-1",
        type: 'button',
        tabindex: '-1',
        role: 'button',
        'aria-controls': 'dropdown-menu-xfDraft-1',
        'aria-expanded': "false",
        'aria-haspopup': 'true',
        class: 'fr-command fr-btn fr-dropdown',
        'data-cmd': 'xfDraft',
        'data-title': 'Drafts'
    });

    var $faIcon = $('<i>', {
        class: 'far fa-save',
        ariaHidden: 'true'
    })

    var $srOnlyLabel = $('<span>', {
        class: 'fr-sr-only'
    }).text('Drafts');

    $faIcon.appendTo($draftButton);
    $srOnlyLabel.appendTo($draftButton);

    $($draftButton).appendTo($('.rte-tab--beforePreview'));

    /**
     * Drop-down menu for the primary button added
     */
    var $draftMenuContainer = $('<div />', {
        id: 'dropdown-menu-xfDraft-1',
        class: 'fr-dropdown-menu',
        role: 'listbox',
        'aria-labelledby': 'xfDraft-1',
        'aria-hidden': 'true'
    });

    var $dropdownWrapper = $('<div />', {
        class: 'fr-dropdown-wrapper',
        role: 'presentation'
    });

    var $dropdownContent = $('<div />', {
        class: 'fr-dropdown-content',
        role: 'presentation'
    });

    var $dropdownList = $('<ul />', {
        class: 'fr-dropdown-list',
        role: 'presentation'
    });

    var dropdownListButtons = [
        {param: 'xfDraftSave', title: 'Save draft'},
        {param: 'xfDraftDelete', title: 'Delete draft'}
    ];

    $.each(dropdownListButtons, function ()
    {
        var $listItem = $('<li />', {
            role: 'presentation'
        });

        $('<a />', {
            class: 'fr-command',
            tabindex: '-1',
            role: 'option',
            'data-cmd': 'xfDraft',
            'data-param1': this.param,
            title: this.title
        }).text(this.title).appendTo($listItem);

        $listItem.appendTo($dropdownList)
    });

    $dropdownList.appendTo($dropdownContent);
    $dropdownContent.appendTo($dropdownWrapper);
    $dropdownWrapper.appendTo($draftMenuContainer);
    $draftMenuContainer.insertAfter('#xfDraft-1');

    // Update the quick reply form
    var $quickReplyForm = $('.js-quickReply'),
        initList = $quickReplyForm.attr('data-xf-init');
    if (initList === undefined)
    {
        initList = '';
    }
    initList += ' draft';

    var draftUrl = location.pathname;
    if (window.location.search) // don't care about having /page-420 or anything like that
    {
        draftUrl += location.search;
    }
    draftUrl += '/draft';

    $quickReplyForm
        .attr('data-xf-init', initList)
        .data('draft-url', draftUrl)
        .data('auto-draft-autosave', '69') // hehe

    XF.activate($quickReplyForm);

    var $messageHtml = $quickReplyForm.find('textarea[name="message_html"]');
    if (XF.isElementWithinDraftForm($quickReplyForm))
    {
        $quickReplyForm.data('delay', 500);
        XF.Element.applyHandler($quickReplyForm, 'draft-trigger');
    }
});

and enable draft system for themselves even if the board has disabled draft system. To further make the life easier, user could install this: https://chrome.google.com/webstore/...or-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en when using Chrome/Chromedge

(Totally did not spend like an hour trying to come up with this answer)

 

[Chris D]

I mean people could do that. I wouldn't call it devious exactly.

Crucially, I don't think anyone would do that.

If you wanted to build your own draft system you could easily do it with much fewer lines of code. I'd probably do it by writing the editor contents out to local storage and reading from that on page load.

Although I will say I've had a small change of heart due to something specific so I will probably make some changes, after all.

 

[XF Bug Bot]

Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.2.0 RC2).

Change log:

Assert that draft saving is available when saving drafts.

There may be a delay before changes are rolled out to the XenForo Community.