diff --git a/ATOMS.md b/ATOMS.md index d889e077e..b2f13262d 100644 --- a/ATOMS.md +++ b/ATOMS.md @@ -2,62 +2,50 @@ Atoms are effectively read-only inline cards. -An atom is an object with a name and at least one of several hooks defined. For example: +An atom is an object with a name, type and render hook: ```js -var demoAtom = { +// package: mda-mention-dom +export default { name: 'mention', - display: { - setup(element, options, env, text, payload) { - element.innerHTML = `${text}`; - } + type: 'dom', + render({element, options, env, text, payload}) { + element.innerHTML = text; } -} +}; ``` -### Available hooks +### Teardown -Like [CARDS](CARDS.md) there are several hooks an atom should define. +Mobiledoc-kit will clear the children of a rendered atom, but there may be cases where you wish to manually teardown +any event listeners attached to the window etc... + +The return value of the `render` hook is a teardown function which will be called before the atom is removed from the DOM. ```js -var exampleAtom = { - name: 'example', - display: { - setup(element, options, env, text, payload) {}, - teardown(setupReturnValue) {} - }, - html: { - setup(buffer, options, env, text, payload) {}, - teardown(setupReturnValue) {} +// package: mda-mention-dom +export default { + name: 'mention', + type: 'dom', + render({element, options, env, text, payload}) { + element.innerHTML = text; + let popOver = new PopOver(element, { url: payload.url }); + return () => { + popOver.destroy(); + } } }; ``` -|Hook|Used by Mobiledoc Kit|Used by DOM Renderer|Used by HTML Renderer| -|---|---|---|---| -|`display`|✓|✓|| -|`html`|||✓| - -Atoms are read-only so, unlike cards, do not have an `edit` hook. +### Arguments -Each hook has a `setup` and `teardown` method. The arguments are: +The `render` hook receives a single object containing: -* `element` is a DOM element for that section. Nodes of that view for a atom - should be appended to the `element`. -* `buffer` is an array passed to the `html` hook instead of a DOM element. - The content for the atom should be pushed on that array as a string. +* `element` is a DOM element for the atom's content to be rendered. * `options` is the `cardOptions` argument passed to the editor or renderer. * `env` contains information about the running of this hook. It may contain the following properties: * `env.name` The name of this atom - * `env.remove()` remove this atom. This calls the current mode's `teardown()` - hook and removes the atom from DOM and from the post abstract. - the instance to edit mode. * `text` is the textual value used to display to the user. * `payload` is the payload for this atom instance. It was either loaded from a Mobiledoc or set when the atom was inserted. - -Additionally, *renderers may offer the ability to configure a non-standard -hook name at runtime*. An example would be having the DOM renderer called with -an option specifying the hook name `mobile-placeholder`. This allows for -variants of an atom in different situations.