SlateJS image styling

41 views Asked by At

I'm using SlateJS in my React project and I'm trying to put, in editor, an image with fixed width/height (600px/200px).

In this moment, when I click a button, the code insert the image:

const image = {
    type: 'image',
    url: 'https://images.unsplash.com/photo-1706562018252-5ce3eadb2288?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTcwNzIzODM1MA&ixlib=rb-4.0.3&q=80&w=600',
    children: [{ text: '' }]
};
Transforms.insertNodes(editor, image);

I've tried to specify properties width and height in the image const, but it doesn't work:

const image = {
    type: 'image',
    url: 'https://images.unsplash.com/photo-1706562018252-5ce3eadb2288?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTcwNzIzODM1MA&ixlib=rb-4.0.3&q=80&w=600',
    children: [{ text: '' }],
    width: "600px",
    heigth: "200px"
};
Transforms.insertNodes(editor, image);

I've also tried to add a property called style (ChatGPT recommended it to me) but nothing:

const image = {
    type: 'image',
    url: 'https://images.unsplash.com/photo-1706562018252-5ce3eadb2288?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=100&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTcwNzIzODM1MA&ixlib=rb-4.0.3&q=80&w=600',
    children: [{ text: '' }],
    style: {
        width: "600px",
        heigth: "200px"
    }
};
Transforms.insertNodes(editor, image);
0

There are 0 answers