How to edit text after it was added inside a shape rectangle (as a group)?

[pibolito]

<title>Simple Fabric.js Text and Rectangle Example (Edit on Load)</title> <style> body { margin: 0; } canvas { border: 1px solid #ccc; } </style>

<canvas id="myCanvas" width="500" height="300"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
<script>
    const canvas = new fabric.Canvas('myCanvas');

    const rect = new fabric.Rect({
        left: 100,
        top: 100,
        width: 150,
        height: 80,
        fill: 'lightblue',
        stroke: 'black',
        strokeWidth: 2,
        originX: 'left',
        originY: 'top',
        selectable: false,
        evented: false
    });

    const simpleText = new fabric.IText('Text Here', {
        left: 100 + 75, // Center horizontally within the rectangle
        top: 100 + 40,  // Center vertically within the rectangle
        fill: 'green',
        selectable: true,
        evented: true,
        hasControls: true,
        hasBorders: true,
        originX: 'center',
        originY: 'center',
        textBaseline: 'top'
    });

    const group = new fabric.Group([rect, simpleText], {
        selectable: true,
        evented: true,
        hasControls: true,
        hasBorders: true
    });

    canvas.add(group);
    canvas.renderAll();

    console.log("Group with rectangle and text added and rendered.");

    requestAnimationFrame(() => {
        const textInGroup = group.item(1);
        if (textInGroup && textInGroup.type === 'i-text') {
            canvas.setActiveObject(textInGroup);
            textInGroup.enterEditing();
            if (textInGroup.hiddenTextarea) {
                setTimeout(() => {
                    textInGroup.hiddenTextarea.focus();
                    textInGroup.selectAll();
                    console.log("Programmatic selection and focus attempted with longer delay.");
                }, 150); // Increased delay to 150ms
            } else {
                console.log("hiddenTextarea NOT found immediately (direct).");
            }
            canvas.renderAll();
        }
    });

    canvas.on('mouse:down', function(options) {
        console.log('Canvas was clicked!');
        console.log('Clicked target:', options.target);
        if (options.target && options.target === group) {
            const textInGroup = group.item(1); // Assuming text is the second item
            if (textInGroup && textInGroup.type === 'i-text' && !textInGroup.isEditing) {
                canvas.setActiveObject(textInGroup);
                textInGroup.enterEditing();
                if (textInGroup.hiddenTextarea) {
                    textInGroup.hiddenTextarea.focus();
                }
                canvas.renderAll();
                console.log("Re-entered editing mode on text within the group.");
            }
        } else if (canvas.getActiveObject() && canvas.getActiveObject().type === 'i-text' && canvas.getActiveObject().isEditing && canvas.getActiveObject() !== simpleText) {
            canvas.getActiveObject().exitEditing();
            canvas.discardActiveObject().renderAll();
            console.log("Exited editing of another text object.");
        } else if (!options.target) {
            canvas.discardActiveObject().renderAll();
            console.log("Deselected all objects.");
        }
    });
</script>

[pibolito]

I managed to get to this version. Now I wanted to be able to move the inside text when ctr key is down. How can I achieve it?

<title>Simple Fabric.js Text and Rectangle Example (Edit on Load)</title> <style> body { margin: 0; } canvas { border: 1px solid #ccc; } .canvas { border: 1px solid Black; width: 300px; height: 300px; } </style>

<canvas id="canvas" width="500" height="300"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
<script>

var canvas = new fabric.Canvas('canvas');
canvas.setWidth(300);
canvas.setHeight(300);

// Double-click event handler
var fabricDblClick = function (obj, handler) {
return function () {
if (obj.clicked) handler(obj);
else {
obj.clicked = true;
setTimeout(function () {
obj.clicked = false;
}, 500);
}
};
};

// ungroup objects in group
var items;
var ungroup = function (group) {
items = group._objects;
group._restoreObjectsState();
canvas.remove(group);
for (var i = 0; i < items.length; i++) {
canvas.add(items[i]);
}
// if you have disabled render on addition
canvas.renderAll();
};

// Re-group when text editing finishes
var dimensionText = new fabric.IText("Text", {
fontFamily: 'Comic Sans',
fontSize: 14,
stroke: '#000',
strokeWidth: 1,
fill: "#000",
left: 170, // Initial position - will be adjusted
top: 60 // Initial position - will be adjusted
});

dimensionText.on('editing:exited', function () {
let theRect;
let theText;

canvas.forEachObject(function(obj) {
    if (obj.type === 'rect' && !obj.selectable) {
        theRect = obj;
    } else if (obj.type === 'i-text') {
        theText = obj;
    }
});

if (theRect && theText) {
    canvas.remove(theRect);
    canvas.remove(theText);

    var newGroup = new fabric.Group([theRect, theText], {
        left: theRect.left,
        top: theRect.top,
        selectable: true,
        evented: true,
        hasControls: true,
        hasBorders: true
    });
    canvas.add(newGroup);
    canvas.setActiveObject(newGroup);

    dimensionText = newGroup.item(1);

    newGroup.on('mousedown', fabricDblClick(newGroup, function (obj) {
        ungroup(obj);
        canvas.setActiveObject(theText);
        theText.enterEditing();
        theText.selectAll();
    }));
    canvas.renderAll();
}

});

function addRectangle() {
var dimension_mark = new fabric.Rect({
left: 150,
top: 70,
width: 150,
height: 30,
fill: 'lightblue',
stroke: '#333333',
strokeWidth: 2,
originX: 'center',
originY: 'center',
selectable: false,
evented: false
});

var dimensionTextLocal = new fabric.IText("Text", {
    fontFamily: 'Comic Sans',
    fontSize: 14,
    stroke: '#000',
    strokeWidth: 1,
    fill: "#000",
    left: dimension_mark.left,
    top: dimension_mark.top,
    selectable: true,
    evented: true,
    originX: 'center',
    originY: 'center'
});
dimensionText = dimensionTextLocal; // Assign to global

var dimension_group = new fabric.Group([dimension_mark, dimensionText], {
    left: 50,
    top: 50,
    selectable: true,
    evented: true,
    hasControls: true,
    hasBorders: true
});
canvas.add(dimension_group);
canvas.setActiveObject(dimension_group);

dimension_group.on('mousedown', fabricDblClick(dimension_group, function (obj) {
    ungroup(obj);
    canvas.setActiveObject(dimensionText);
    dimensionText.enterEditing();
    dimensionText.selectAll();
}));

let isCtrlDown = false;

document.addEventListener('keydown', function(e) {
    if (e.key === 'Control' && canvas.getActiveObject() === dimensionText) {
        isCtrlDown = true;
        canvas.wrapperEl.style.cursor = 'grab';
        dimension_group.set('selectable', false);
    }
});

document.addEventListener('keyup', function(e) {
    if (e.key === 'Control') {
        isCtrlDown = false;
        canvas.wrapperEl.style.cursor = 'default';
        dimension_group.set('selectable', true);
    }
});

dimensionText.on('mousedown', function() {
    if (!isCtrlDown) {
        canvas.setActiveObject(dimensionText);
    }
});

canvas.on('object:moved', function(e) {
    if (e.target === dimensionText && isCtrlDown) {
        // Text is moving with Ctrl
    }
});

canvas.on('mouse:up', function(e) {
    if (isCtrlDown && canvas.getActiveObject() === dimensionText) {
        canvas.setActiveObject(dimension_group);
        isCtrlDown = false;
        canvas.wrapperEl.style.cursor = 'default';
    }
});

dimensionText.on('editing:exited', function () {
    // Use the directly referenced dimension_mark and dimensionText
    canvas.remove(dimension_mark);
    canvas.remove(dimensionText);

    var newGroup = new fabric.Group([dimension_mark, dimensionText], {
        left: dimension_mark.left,
        top: dimension_mark.top,
        selectable: true,
        evented: true,
        hasControls: true,
        hasBorders: true
    });
    canvas.add(newGroup);
    canvas.setActiveObject(newGroup);

    newGroup.on('mousedown', fabricDblClick(newGroup, function (obj) {
        ungroup(obj);
        canvas.setActiveObject(dimensionText);
        dimensionText.enterEditing();
        dimensionText.selectAll();
    }));
    canvas.renderAll();
});

}
addRectangle();
</script>