Skip to content

feat(demo): exercise AI Assistant, dock, corners and custom icons - #65

Open
sidgaikwad wants to merge 1 commit into
unlayer:mainfrom
sidgaikwad:feat/demo-option-coverage
Open

feat(demo): exercise AI Assistant, dock, corners and custom icons#65
sidgaikwad wants to merge 1 commit into
unlayer:mainfrom
sidgaikwad:feat/demo-option-coverage

Conversation

@sidgaikwad

Copy link
Copy Markdown
Contributor

Fixes #40.

The demo is the main thing people try before adopting the component, but several documented options were never wired into it — including the AI Assistant, the README's headline feature.

Added

Option How
projectId + features.ai AI Assistant toggle, gated on VITE_UNLAYER_PROJECT_ID. When unset, the controls are replaced by a pointer to the new demo/.env.example, so the demo still works with no Unlayer account.
features.imageEditor.dock Left/Right tool-rail selector.
tools.corners Was missing from TOOL_NAMES entirely.
custom tool icon Raw <svg> markup on the Text tool.

Fixed: the snapshot lied about its blob

setSaved({ dataUrl, blob: new Blob() });   // 0 bytes

The Download link worked (it uses dataUrl), but the object claimed to be an ImageEditorSaveResult while fabricating blob — misleading in the file people read to learn the API. It now builds the real blob:

Snapshot taken via getImage() (1998122 bytes)

⚠️ A bug I found doing this — #64

The README's own Font Awesome icon example does not work. I started with icon: 'fa-font', saw no change, and checked properly against the live embed:

icon value result
'fa-crop-simple' (the README's example) ❌ silently ignored, default icon stays
'fa-star' ❌ silently ignored
raw '<svg …>' ✅ works

Filed as #64. This PR uses the raw-<svg> form, so the demo ships an example that actually does something rather than one that silently no-ops.

Verification

Driven against the live CDN embed at 1280×800:

  • new sidebar sections present: Layout (remounts editor), AI Assistant
  • corners present in the tool toggles
  • dock switch moves the rail: left: 968left: 0 in a 1040px editor
  • custom SVG icon rendered in the rail
  • snapshot produces a real 1,998,122-byte blob
  • AI hint shown (no projectId configured in my environment)

tsc --noEmit, vite build, root tests and Prettier all clean.

Left out deliberately

translations, offline/licenseUrl/env and scriptUrl. Each needs real scaffolding (a translations fixture, a license file, an alternate CDN) that would make this PR much harder to review, and none is as load-bearing as the AI Assistant gap. Happy to follow up.

Conflict note

Touches demo/src/App.tsx, Sidebar.tsx and styles.css, so it will conflict with #59 (demo responsive/theme).

The demo is what people try before adopting the component, but several
documented options were never wired into it — including the AI Assistant,
which is the README's headline feature.

- AI Assistant, gated on VITE_UNLAYER_PROJECT_ID. The controls are
  replaced by a pointer to demo/.env.example when it is unset, so the
  demo still works without an Unlayer account.
- features.imageEditor.dock, as a Left/Right tool rail selector.
- tools.corners, which was missing from TOOL_NAMES entirely — it is
  configured like any other tool but is the rounded-corners control
  inside Crop.
- A custom tool icon, using raw <svg> markup. Not the Font Awesome name
  form the README shows: that is silently ignored (unlayer#64).

Also fix snapshot(), which fabricated `blob: new Blob()`. The download
link worked because it uses dataUrl, but the object claimed to be an
ImageEditorSaveResult while lying about `blob` — misleading in the file
people read to learn the API. It now builds the real blob.
@vercel

vercel Bot commented Sep 4, 2026

Copy link
Copy Markdown

@sidgaikwad is attempting to deploy a commit to the Unlayer Team on Vercel.

A member of the Team first needs to authorize it.

@sidgaikwad

Copy link
Copy Markdown
Contributor Author

Heads-up on an overlap I missed before opening this: #30 by @brenopolanski already adds a dock control to the demo, and predates this PR by two days.

The dock portion here duplicates that work. Suggested resolution: merge #30 first and I will rebase this to drop the dock section, keeping the AI Assistant gating, corners, the custom icon and the blob fix — or if you would rather take this one whole, #30 should be closed in its favour. Happy either way; #30 was there first, so my preference is the former.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

demo: several documented options are never exercised (AI Assistant, dock, translations, custom icons)

1 participant