Activate RTE on current cursor

src/dom_components/view/ComponentTextView.js

@@ -54,7 +54,7 @@ export default ComponentView.extend({
    * Enable element content editing
    * @private
    * */
-  async onActive(e) {
+  async onActive(ev) {
     const { rte, em } = this;
     const { result, delegate } = this.canActivate();
 
@@ -63,17 +63,17 @@ export default ComponentView.extend({
     if (!result) {
       if (delegate) {
         em.setSelected(delegate);
-        delegate.trigger('active', e);
+        delegate.trigger('active', ev);
       }
       return;
     }
 
-    e && e.stopPropagation && e.stopPropagation();
+    ev?.stopPropagation?.();
     this.lastContent = this.getContent();
 
     if (rte) {
       try {
-        this.activeRte = await rte.enable(this, this.activeRte);
+        this.activeRte = await rte.enable(this, this.activeRte, { event: ev });
       } catch (err) {
         em.logError(err);
       }

src/rich_text_editor/index.js

@@ -299,14 +299,14 @@ export default () => {
      * @param {Object} rte The instance of already defined RTE
      * @private
      * */
-    async enable(view, rte) {
+    async enable(view, rte, opts) {
       lastEl = view.el;
       const { customRte } = this;
       const em = config.em;
       const el = view.getChildrenContainer();
 
       toolbar.style.display = '';
-      const rteInst = await (customRte ? customRte.enable(el, rte) : this.initRte(el).enable());
+      const rteInst = await (customRte ? customRte.enable(el, rte) : this.initRte(el).enable(opts));
 
       if (em) {
         setTimeout(this.updatePosition.bind(this), 0);

src/rich_text_editor/model/RichTextEditor.js

@@ -2,7 +2,7 @@
 // and adapted to the GrapesJS's need
 
 import { isString } from 'underscore';
-import { on, off } from 'utils/mixins';
+import { on, off, getPointerEvent } from 'utils/mixins';
 
 const RTE_KEY = '_rte';
 
@@ -184,16 +184,16 @@ export default class RichTextEditor {
     });
   }
 
-  enable() {
+  enable(opts) {
     if (this.enabled) return this;
-    return this.__toggleEffects(true);
+    return this.__toggleEffects(true, opts);
   }
 
   disable() {
     return this.__toggleEffects(false);
   }
 
-  __toggleEffects(enable = false) {
+  __toggleEffects(enable = false, opts = {}) {
     const method = enable ? on : off;
     const { el, doc } = this;
     this.actionbarEl().style.display = enable ? '' : 'none';
@@ -203,8 +203,26 @@ export default class RichTextEditor {
     this.enabled = enable;
 
     if (enable) {
+      const { event } = opts;
       this.syncActions();
       this.updateActiveActions();
+
+      if (event) {
+        let range = null;
+
+        if (doc.caretRangeFromPoint) {
+          const poiner = getPointerEvent(event);
+          range = doc.caretRangeFromPoint(poiner.clientX, poiner.clientY);
+        } else if (event.rangeParent) {
+          range = doc.createRange();
+          range.setStart(event.rangeParent, event.rangeOffset);
+        }
+
+        const sel = doc.getSelection();
+        sel.removeAllRanges();
+        range && sel.addRange(range);
+      }
+
       el.focus();
     }