Skip to content

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

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

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).

@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.

@lucasbesen

Copy link
Copy Markdown
Member

@sidgaikwad #30 was merged.

The demo covered theme, locale and the eight tool toggles, leaving several
documented options with nothing exercising them.

Adds an AI Assistant toggle, gated on a VITE_UNLAYER_PROJECT_ID read from
demo/.env.example so the rest of the demo still works without an account; a
corners toggle; and a custom icon on the text tool, which demonstrates the
object form of a tool entry.

Also fixes Snapshot, which fabricated `blob: new Blob()`. The object is
shaped like an ImageEditorSaveResult and people read the demo to learn the
API, so it should not lie about a field. It now builds the real blob.

The dock control originally in this branch is gone: unlayer#30 landed the same
control on main first, so this uses main's version and keeps its section
wording.
@sidgaikwad
sidgaikwad force-pushed the feat/demo-option-coverage branch from 6c4b9b1 to 0b0e185 Compare September 12, 2026 17:09
@sidgaikwad sidgaikwad changed the title feat(demo): exercise AI Assistant, dock, corners and custom icons feat(demo): exercise AI Assistant, corners and custom tool icons Sep 12, 2026
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)

2 participants