0

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);
4
  • What do you mean "nothing"? Please share the code of your image component. Commented Feb 7, 2024 at 18:30
  • I don't have any Image component, I just use Transforms.insertNodes to add that object. Is that wrong? Commented Feb 8, 2024 at 9:51
  • Well yes... I think you should check the official example. Commented Feb 8, 2024 at 9:59
  • Ok thanks, apologies for the lack of attention to documentation Commented Feb 9, 2024 at 10:07

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.