[FIX] FollowRange: prevent toolbar hide on click

Author: Goaman

packages/plugin-dom-follow-range/src/FollowRangeZoneDomObjectRenderer.ts

@@ -63,6 +63,14 @@ export class FollowRangeZoneDomObjectRenderer extends NodeRenderer<DomObject> {
             }
         } while (doc);
 
+        // If the selection goes into an input inside the jw-follow-range, do nothing.
+        if (
+            document.activeElement instanceof HTMLInputElement &&
+            document.activeElement.closest('JW-FOLLOW-RANGE')
+        ) {
+            return;
+        }
+
         if (selection.rangeCount && !isCollapsed) {
             if (container.parentElement.tagName !== 'BODY') {
                 document.body.append(container);

packages/plugin-dom-layout/src/ActionableDomObjectRenderer.ts

@@ -17,7 +17,8 @@ export class ActionableDomObjectRenderer extends NodeRenderer<DomObject> {
 
     async render(button: ActionableNode): Promise<DomObjectActionable> {
         let updateButton: () => void;
-        let handler: (ev: MouseEvent) => void;
+        let clickHandler: (ev: MouseEvent) => void;
+        let mousedownHandler: (ev: MouseEvent) => void;
         const objectButton: DomObjectActionable = {
             tag: 'BUTTON',
             attributes: {
@@ -29,17 +30,26 @@ export class ActionableDomObjectRenderer extends NodeRenderer<DomObject> {
                 }
             },
             attach: (el: HTMLButtonElement): void => {
-                handler = (ev): void => {
+                clickHandler = (ev): void => {
                     ev.stopImmediatePropagation();
+                    ev.stopPropagation();
+                    ev.preventDefault();
                     objectButton.handler();
                 };
-                el.addEventListener('click', handler);
+                mousedownHandler = (ev: MouseEvent): void => {
+                    ev.stopImmediatePropagation();
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                };
+                el.addEventListener('click', clickHandler);
+                el.addEventListener('mousedown', mousedownHandler);
                 updateButton = this._updateButton.bind(this, button, el);
                 updateButton();
                 this.engine.editor.dispatcher.registerCommandHook('*', updateButton);
             },
             detach: (el: HTMLButtonElement): void => {
-                el.removeEventListener('click', handler);
+                el.removeEventListener('click', clickHandler);
+                el.removeEventListener('mousedown', mousedownHandler);
                 this.engine.editor.dispatcher.removeCommandHook('*', updateButton);
             },
         };