[IMP] FontAwesome : Select the icon automaticaly when user click

Author: sebgeelen

packages/plugin-fontawesome/src/FontAwesomeDomObjectRenderer.ts

@@ -20,11 +20,28 @@ export class FontAwesomeDomObjectRenderer extends NodeRenderer<DomObject> {
         node: FontAwesomeNode,
         worker: RenderingEngineWorker<DomObject>,
     ): Promise<DomObject> {
+        const select = (ev: Event) => {
+            ev.preventDefault();
+            const selectFontAwesome = () => {
+                this.engine.editor.selection.select(node, node);
+            };
+            // The normaliser wait a tick before changing the selection when the user click
+            // in order to override the normalizer default behavior we also need to wait a tick
+            setTimeout(() => {
+                this.engine.editor.execCommand(selectFontAwesome);
+            });
+        };
         const fontawesome: DomObjectElement = {
             tag: node.htmlTag,
             attributes: {
                 class: new Set(node.faClasses),
             },
+            attach: (el: HTMLElement): void => {
+                el.addEventListener('mouseup', select, true);
+            },
+            detach: (el: HTMLElement): void => {
+                el.removeEventListener('mouseup', select, true);
+            },
         };
         // Surround the fontawesome with two invisible characters so the
         // selection can navigate around it.

packages/plugin-odoo/src/OdooFontAwesomeDomObjectRenderer.ts

@@ -26,7 +26,11 @@ export class OdooFontAwesomeDomObjectRenderer extends FontAwesomeDomObjectRender
                     }
                     el.addEventListener('dblclick', dbclickCallback);
                 };
+                const savedDetach = fa.detach;
                 fa.detach = (el: HTMLElement): void => {
+                    if (savedDetach) {
+                        savedDetach(el);
+                    }
                     el.removeEventListener('dblclick', dbclickCallback);
                 };
             }