Render images in a view.

import { definePlugin } from '@editful/canvas-sdk';

export const CANVAS_UI_IMAGE_KIND = 'docs:image';
export const IMAGE_URL =
  'https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80';

export default definePlugin({
  register(context) {
    const kind = context.kind(CANVAS_UI_IMAGE_KIND);
    const ui = kind.ui;

    kind.hit('rect');
    kind.view({
      root: ui.image(
        { url: IMAGE_URL },
        { width: 'fill', height: 180 },
      ),
      width: { mode: 'user', min: 280 },
      height: { mode: 'fit-content' },
    });
  },
});

import { TextFont, definePlugin, hexColor } from '@editful/canvas-sdk';

export const CANVAS_UI_MEDIA_CARD_KIND = 'docs:media-card';

export default definePlugin({
  register(context) {
    const kind = context.kind(CANVAS_UI_MEDIA_CARD_KIND);
    const imageUrl = kind.field.string('image-url');
    const caption = kind.field.string('caption');
    const ui = kind.ui;

    kind.hit('rect');
    kind.view({
      root: ui.box({
        fill: hexColor('#0d1117'),
        stroke: hexColor('#30363d'),
        strokeWidth: 1,
        cornerRadius: 8,
        child: ui.stack({
          axis: 'block',
          children: [
            ui.image(
              { url: imageUrl },
              { width: 'fill', height: 180 },
            ),
            ui.box({
              padding: 18,
              child: ui.text(caption, {
                font: {
                  family: TextFont.Sans,
                  size: 14,
                  weight: 400,
                  lineHeight: 1.4,
                },
                color: hexColor('#f0f6fc'),
              }),
            }),
          ],
        }),
      }),
      width: { mode: 'user', min: 280 },
      height: { mode: 'fit-content' },
    });
  },
});