Image support

[raineorshine]

• Drag-and-drop image
  • Upload to AWS
• Paste image
• Do not render URL
  • Do we need a new property on the Thought so that we don't have to wait for the =img child to load?
• Cursor support
• Caret support
  • Blur when cursor is no the image
  • Restore browser selection when the cursor moves away (like Divider)

Steps to Reproduce

- a
  - b
  - c
  - https://file.em.space/f/f/fd30f7c5-88ad-48cb-9499-fca6112ca02a.webp
    - =img
  - d

Current Behavior

Expected Behavior

When cursor is null:

When cursor is on the image:

Initial width/height:

Question: Should we embed width and height in Thought to avoid having to wait for descendants to load? Or does that go against idiomatic meta attribute usage?

    - =img
      - width
        - 200
      - height
        - 300

[RED-ROSE515]

In performance side, I think you need to consider these things.

• Embedding dimensions in metadata/thought would allow immediate space allocation.
• Prevents layout shifts during loading.
• Reduces descendant wait time.
• Aligns with modern best practices for performance optimization.