Refactor textable creation

src/dom_components/view/ComponentTextView.js

@@ -1,4 +1,4 @@
-import { on, off } from 'utils/mixins';
+import { on, off, getModel } from 'utils/mixins';
 import ComponentView from './ComponentView';
 import { bindAll } from 'underscore';
 
@@ -136,6 +136,41 @@ export default ComponentView.extend({
     }
   },
 
+  insertAtCursor(content) {
+    const { model, el } = this;
+    const doc = el.ownerDocument;
+    const selection = doc.getSelection();
+
+    if (selection?.rangeCount) {
+      const range = selection.getRangeAt(0);
+      const textNode = range.startContainer;
+      const offset = range.startOffset;
+      const textModel = getModel(textNode);
+      const cmps = model.components();
+      const newCmps = [];
+
+      model.components().forEach(cmp => {
+        if (cmp === textModel) {
+          const cnt = cmp.get('content');
+          newCmps.push(cnt.slice(0, offset));
+          newCmps.push(content);
+          newCmps.push(cnt.slice(offset));
+        } else {
+          newCmps.push(cmp);
+        }
+      });
+
+      const result = newCmps.filter(Boolean);
+      const index = result.indexOf(content);
+      console.log({ newCmps, index, content });
+      cmps.reset(result);
+
+      return cmps.at(index);
+    }
+
+    return null;
+  },
+
   /**
    * Callback on input event
    * @param  {Event} e

src/utils/Sorter.js

@@ -1079,17 +1079,7 @@ export default Backbone.View.extend({
       }
 
       if (this.isTextableActive(srcModel, trgModel)) {
-        trgModel.trigger('active');
-        const modelEl = srcModel.getEl();
-        delete srcModel.opt.temporary;
-        srcModel.getView().render();
-        modelEl.setAttribute('data-gjs-textable', 'true');
-        trgModel.once('rte:enable', () => {
-          const trgView = trgModel.getView();
-          trgView.activeRte?.insertHTML(modelEl);
-          trgView.disableEditing({ keepIds: getComponentIds(srcModel) });
-        });
-        created = srcModel;
+        created = trgModel.getView().insertAtCursor(modelToDrop);
       } else {
         created = targetCollection.add(modelToDrop, opts);
       }

src/utils/mixins.js

@@ -187,7 +187,11 @@ export const escape = (str = '') => {
  */
 const getModel = (el, $) => {
   let model = el;
-  isElement(el) && (model = $(el).data('model'));
+  if (!$ && el.__cashData) {
+    model = el.__cashData.model;
+  } else if (isElement(el)) {
+    model = $(el).data('model');
+  }
   return model;
 };