elemenote-global

Single-file IIFE build of Elemenote (elemenote.global.js) for:

• The browser extension (postbuild syncs into elemenote-extension/public/)
• <script src="…"> embedding on arbitrary sites

Source lives in ../elemenote/src; this package only owns the global bundle so it can declare "sideEffects": true while elemenote keeps "sideEffects": false for Next.js / app bundlers consuming elemenote/react.

npm run build -w elemenote-global

For React / Next.js, use the elemenote package (elemenote/react), not this artifact.

Deep dive (embed, fixes, troubleshooting): ../../docs/ELEMENOTE_GLOBAL_HTML_EMBED.md

Plain HTML embedding

The bundle does not auto-mount. Loading the script defines a global Elemenote object with init and destroy. You must call Elemenote.init() after the script loads (and when document.body exists).

Minimal example

<script src="./dist/elemenote.global.js"></script>
<script>
  if (typeof Elemenote !== 'undefined') {
    Elemenote.init({ toolbarPosition: 'bottom-right' })
  }
</script>

A runnable sample lives in example.html (build first, then serve the folder over HTTP if the browser blocks local file script loads).

API

| Method | Description | |--------|-------------| | Elemenote.init(options?) | Creates the host node, shadow root, and React widget. Safe to call more than once; skipped if #elemenote-root already exists. | | Elemenote.destroy() | Unmounts React and removes the host from the DOM. |

Common init options

These mirror ElemenoteInitOptions in the main package:

| Option | Type | Notes | |--------|------|--------| | toolbarPosition | 'bottom-right' \| 'bottom-left' | Floating toolbar corner | | locale | string | e.g. 'en', 'pt-BR' | | selectionColor | string | Highlight color (CSS color) | | appearance | 'light' \| 'dark' \| 'system' \| 'glass' | Chrome theme | | persistAnnotationsPerPage | boolean | | | mcpServerDistJsPath | string | | | showAiSettings | boolean | AI settings UI | | showAiSendButton | boolean | “Send to AI” control |

Troubleshooting

If nothing appears after loading the script:

1. Confirm you called Elemenote.init() (loading the file alone is not enough).
2. Open DevTools: typeof Elemenote should be 'object' and Elemenote.init a function.
3. After init, document.getElementById('elemenote-root') should be non-null.
4. Prefer serving the page over http(s) if ./dist/elemenote.global.js fails to load from file://.
5. Bundle size is large (~1.3MB+); ensure the request completes and check the Network tab for errors.
6. If the host page is painted dark (browser/OS dark mode) and the widget uses appearance: 'system' or 'dark', the dock can be low-contrast (dark-on-dark). Set a light background/color-scheme on your page or pass appearance: 'light' (or 'glass') in init() so the chrome is visible.
7. If #elemenote-root exists but the shadow mount stays empty, you may be on an old elemenote.global.js build: react-i18next previously suspended with no <Suspense> parent. Rebuild elemenote-global from a version that sets i18n.options.react.useSuspense = false after init (see elemenote src/i18n/instance.ts).