HTMLEditor: Detached editor does not support disable-light-dismiss

[FlowIT-JIT]

The HTML Editor (Input.js) registers data-disable-light-dismiss="true" attributes on its dialogs, which allows for e.g. Fluent UI's Callout component to ignore OnDismiss, if a focused/clicked/touched element, or one of its parents, has this attribute set. However, this attribute is not registered on the detached HTML editor, its modal background, or on the confirmation dialog shown if canceling changes in the detached editor. Therefore, the detached editor can not be used in light dismissable callouts and panels.

Workaround: Disable the detach button in the editor, or suppress the Callout's onDismiss callback when focus is moved away from the callout, and instead add a custom background layer that dismisses the callout when clicked.

Code opening the detached editor:

Fit.UI/Controls/Input/Input.js

Line 3579 in d853656

function openDetachedDesignEditor()

Code registering detach button:

Fit.UI/Controls/Input/Input.js

Line 2237 in d853656

if (config.Toolbar.Detach === true)

Example of how the disable-light-dismiss attribute is applied:

Fit.UI/Controls/Input/Input.js

Line 1747 in d853656

// Allow light dismissable panels/callouts to prevent close/dismiss