Extended example request

[ErlendKH]

Hello,

I was just wondering if the basic example could be extended in the future? I don't understand the basic examples for link and image, as the link has just a decorated underline and the image has just a hardcoded src of 'https://example.com/image.jpg'. How would one modify this example to let the user choose the href value for a link, and then be able to modify it later on? By the way, I found a way to choose a href by using the editor hook, but I don't know how to modify it (just add and remove). As for the image, how can one add an image, either from uploading from the computer, perhaps referencing an image from Sanity, or with an URL? Also, I would have liked to (have the option to) group some of the icons, like having the decorators and the styles in arrays.

[christianhg]

Hi there! Thank you for the request. As far as I can tell there are a few things in here:

1. How to modify the content of an annotation or object in the editor after it has been created.
2. An extended example for how to handle image uploads
3. Not 100% sure I understand the last one about icons. Is this in relation to building a toolbar?

I apologise for the lack of examples and documentation here. The plan is to provide an extended toolbar example in the https://github.com/portabletext/plugins repo that people can use for inspiration or pull in and use directly.

For (1) specifically, this is currently done by either updating the entire editor value outside of the editor and sending it back in using the update value event or, even better, by sending Sanity set/unset patches to the editor using the patches event: https://github.com/portabletext/editor/blob/main/packages/editor/tests/event.patches.test.tsx#L813-L818 (note that when you send patches you don't have to send in a snapshot). I know this is not ideal, and we'll soon have more ergonomic APIs to achieve this as part of the toolbar initiative mentioned abovce.

[christianhg]

For (1) specifically, this is currently done by either updating the entire editor value outside of the editor and sending it back in using the update value event or, even better, by sending Sanity set/unset patches to the editor using the patches event:

Sorry, I forgot to mention that we also have block.set and block.unset events for setting and unsetting props on blocks:

    // Set the `alt` prop
    editor.send({
      type: 'block.set',
      at: [{_key: '...'}],
      props: {
        alt: 'An example image'
      },
    })

    // Unset the `alt` prop
    editor.send({
      type: 'block.unset',
      at: [{_key: '...'}],
      props: ['alt']
    })

[raptoria]

Hi all, I took a stab at making an example repo that includes link and file upload. Not sure if it's quite in the right place. Here's the PR: #1287

[christianhg]

Thank you, @raptoria! I haven't had time to look at it yet, but will get around to it.

Should be noted, and this is relevant for @ErlendKH as well, that I've been busy improving the Playground that lives in this repository so it now actually shows examples of how to let the user choose what fields go on a link and let them be edited after the fact: https://playground.portabletext.org/

Please take it for a spin!

[raptoria]

oh sweet, I love the ability to edit after the fact! thanks for this! I've moved my example here since it doesn't make sense to be part of the main repo.