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);