UX improvements to the Cloud Image ComponentBlock

[JedWatson]

This improves the workflow and UX for the cloudImage component block, but needs some design love before it's ready to merge.

When you first insert the component block, it now prompts you to focus the field and paste image data (can be a URL, JSON, or Markdown, it just has to have a valid image src in it)

Once you paste an image in, it will validate the image and detect the width and height, then switch to the current UI:

Depending on browser capabilities, sometimes we can trigger a paste event on click, otherwise there's an invisible text field that receives focus as a fallback. Might need some tweaking as we try different browsers... I've tested it on iOS, but need someone to check that the UX flow is good on Android as well. Firefox and Safari on MacOS are good.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 925272b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
keystar-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 22, 2023 2:10am
keystatic	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 22, 2023 2:10am
keystatic-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 22, 2023 2:10am

[JedWatson]

Update

After a design session today, I've updated this with new and simpler/nicer UX.

Now when you insert a Cloud Image component into a document, you get this placeholder:

(@jossmac this isn't an ideal design, but I could get the DialogTrigger to work with anything other than a Button or ActionButton so I've made do, you may have some suggestions?)

(also @emmatown may come up with a way to open this dialog from the start, before the placeholder is inserted, but that's basically a progressive enhancement since we'll still need to handle empty Markdoc tags)

When you click it, you get this dialog:

Pasting a valid Image URL reveals the rest of the form and auto-fills the width and height:

And finally you get the image preview, you can use the edit button on the right to change the alt/width/height (or replace the image) and the delete button to remove it from the document:

This is probably pretty close to ready from a UX perspective, we can tweak the workflow a bit more when we figure out how to really dial it in, but it's working pretty well for now.

One thing it doesn't handle yet is if you have an invalid image URL in the document already (e.g if an image is deleted, or if you commit an invalid src directly into the codebase) but I think it's OK to handle that later.

[jossmac]

I think this is unnecessary, you should be able to move the flex prop to the Button e.g.

<Flex>
  <DialogTrigger>
    <Button flex />
  </DialogTrigger>
</Flex>

[jossmac]

What do these do?

[JedWatson]

Boxes (block) around the Text (inline) components so they get spaced out correctly by the VStack

[jossmac]

(@jossmac this isn't an ideal design, but I could get the DialogTrigger to work with anything other than a Button or ActionButton so I've made do, you may have some suggestions?)

This is by design, to stop people doing dodgy stuff.