xdan / jodit

Jodit - Best WYSIWYG Editor for You
https://xdsoft.net/jodit/
MIT License
1.66k stars 351 forks source link

FileBrowser Upload Button Not Disabled Based on Permissions #1094

Open WatchfulEyeOfZod opened 7 months ago

WatchfulEyeOfZod commented 7 months ago

Jodit Version: 4.0.2

Browser: Chrome OS: Mac Is React App: False

Description

The Upload button on the FileBrowser is not Enabled/Disabled when changing sources based on the permissions returned by the back end. This seems to be due to the fact that the Upload Button is declared in config.ts with a getContent function which replaces the button with a container containing the UIFileInput class.

Code

Config.prototype.controls.filebrowser = {
    upload: {
        icon: 'plus',
        isInput: true,
        // isDisabled: (browser: IFileBrowser): boolean =>
        //  !browser.dataProvider.canI('FileUpload'),
        isDisabled: (browser: IFileBrowser): boolean => {

                         // THIS FUNCTION DOES NOT EVER FIRE
                         // The getContent section below replaces the HTML of the element and therefore
                         // The button is not iterated through in the toolbar and is not enabled/disabled

            console.log('Checking Disabled Status of Upload Button');
            return !browser.dataProvider.canI('FileUpload');
        },
        getContent: (filebrowser: IFileBrowser): HTMLElement => {
            const btn = new UIFileInput(filebrowser, {
                onlyImages: filebrowser.state.onlyImages
            });
            filebrowser.e.fire('bindUploader.filebrowser', btn.container);
            return btn.container;
        }
    } as IControlType,

Expected behavior:

When the permission check !browser.dataProvider.canI('FileUpload'); returns false, this button should be disabled.

Actual behavior:

The Upload button is not enabled / disabled base on the permissions response - the isDisabled function is never called on the upload button at all.

WatchfulEyeOfZod commented 7 months ago

After a LOT of poking around, the solution to this is actually pretty simple:

The issue is that when getContent is used, the object becomes a ToolbarContent which extends UIButton, and there for the update function the is in the ToolbarButton is never invoked. This patch fixes that without changing all the inheritance which may be a bigger lift.

diff --git a/src/modules/toolbar/button/content.ts b/src/modules/toolbar/button/content.ts
index 5274cfab..09f33a2d 100644
--- a/src/modules/toolbar/button/content.ts
+++ b/src/modules/toolbar/button/content.ts
@@ -43,6 +43,10 @@ export class ToolbarContent<T extends IViewBased = IViewBased>
                        );
                }

+               this.state.disabled = this.control.isDisabled?.(this.j, this) || false;
+               this.state.activated = this.control.isActive?.(this.j, this) || false;
+               this.control.update?.(this.j, this);
+
                super.update();
        }