Jemt / Fit.UI

Fit.UI is a JavaScript based UI framework built on Object Oriented principles
http://fitui.org
GNU Lesser General Public License v3.0
19 stars 7 forks source link

Input: Clean up code used to detect DesignMode and current state #147

Closed FlowIT-JIT closed 2 years ago

FlowIT-JIT commented 2 years ago

The input control uses 3 different approaches to detect whether DesignMode is enabled or not:

me.DesignMode() The result indicates whether DesignMode is enabled, but not whether editor is ready. It may be partially or fully reloaded if DesignMode() returns True. Interacting with the designEditor instance is not necessarily safe if DesignMode() returns True!

designEditor !== null The result indicates that an editor instance has been created, but it is not guaranteed to be ready yet. It may still be loading resources (plugins) and initializing. This check can't reliably be used to detect whether DesignMode is enabled, since initialization happens async - although it probably will work most of the time, since designEditor will in fact be set when the user interacts with the control (hence, it is loaded and ready for use).

designEditor !== null && designEditor._isReadyForInteraction === true The result indicates that the editor instance has been created and is ready for use. As with the 2nd example above, this check can't be used to reliably detect whether DesignMode is enabled.

One can easily make the mistake to use the 2nd approach without realizing that the editor may not be fully loaded, which in turn may result in errors. We should avoid this and make use of simpler checks such as:

me.DesignMode() - enabled or not designModeEnabledAndReady() - enabled and ready - or not

We should use designModeEnabledAndReady() whenever access to designEditor or designEditorDom is required.

function designModeEnabledAndReady()
{
    return designEditorDom !== null; // Editor is fully loaded when editor DOM is made available
}
FlowIT-JIT commented 2 years ago

Fixed as suggested