{"id":19370083,"url":"https://github.com/bustle/ember-mobiledoc-dom-renderer","last_synced_at":"2025-09-10T08:36:21.011Z","repository":{"id":2274987,"uuid":"46133944","full_name":"bustle/ember-mobiledoc-dom-renderer","owner":"bustle","description":"Render mobiledoc documents in an ember app","archived":false,"fork":false,"pushed_at":"2023-03-04T03:27:43.000Z","size":4160,"stargazers_count":15,"open_issues_count":25,"forks_count":12,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-04-29T19:06:24.288Z","etag":null,"topics":["ember-addon","mobiledoc","mobiledoc-editor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bustle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-11-13T16:35:24.000Z","updated_at":"2022-06-29T16:29:18.000Z","dependencies_parsed_at":"2023-01-13T12:15:18.549Z","dependency_job_id":"f092a959-0aae-411e-995c-c435b6efbfb8","html_url":"https://github.com/bustle/ember-mobiledoc-dom-renderer","commit_stats":null,"previous_names":["bustlelabs/ember-mobiledoc-dom-renderer"],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bustle%2Fember-mobiledoc-dom-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bustle%2Fember-mobiledoc-dom-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bustle%2Fember-mobiledoc-dom-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bustle%2Fember-mobiledoc-dom-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bustle","download_url":"https://codeload.github.com/bustle/ember-mobiledoc-dom-renderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250460503,"owners_count":21434256,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember-addon","mobiledoc","mobiledoc-editor"],"created_at":"2024-11-10T08:14:11.273Z","updated_at":"2025-04-23T15:31:51.876Z","avatar_url":"https://github.com/bustle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ember-mobiledoc-dom-renderer\n[![Build Status](https://travis-ci.org/bustle/ember-mobiledoc-dom-renderer.svg?branch=master)](https://travis-ci.org/bustle/ember-mobiledoc-dom-renderer)\n\nProvides:\n\n  * Component `\u003cRenderMobiledoc ... /\u003e` for rendering mobiledoc in your ember app\n  * (For advanced use) The ability to import the [`mobiledoc-dom-renderer`](https://github.com/bustlelabs/mobiledoc-dom-renderer) class\n  \nTo learn more about mobiledoc see [mobiledoc-kit](https://github.com/bustlelabs/mobiledoc-kit).\n\n## Installation\n\n* `ember install ember-mobiledoc-dom-renderer`\n\n## Requirements\n\n* Ember.js v3.16 or above (for older versions of Ember, try 0.7.0)\n* Ember CLI v3.16 or above\n* Node.js v12 or above\n\n### Usage\n\n#### Render basic mobiledoc in your template\n\n```hbs\n\u003cRenderMmobiledoc @mobiledoc={{myMobileDoc}} /\u003e\n```\n\n#### Render mobiledoc with cards, using ember components to render cards\n\n```hbs\n{{! myMobiledoc is the mobiledoc you want to render }}\n{{! myCardNames is an array of card names, e.g. ['embed-card', 'slideshow-card'] }}\n\u003cRenderMmobiledoc @mobiledoc={{myMobileDoc}} @cardNames={{myCardNames}} /\u003e\n```\n\nThe ember components with names matching the mobiledoc card names will be rendered\nand passed a `payload` property.\nThe ember components will be in a wrapper div with the class '__rendered-mobiledoc-card' and '__rendered-mobiledoc-card-${cardName}'.\n\n#### Customizing card lookup\n\nIf your mobiledoc card names do not match component names, you can pass an argument to\nthe `\u003cRenderMobiledoc...\u003e` component to provide your own mapping.\n\nE.g.:\n\n```hbs\n// components/my-component.hbs\n\u003cRenderMobiledoc\n  @mobiledoc={{...}}\n  @cardNameToComponentName={{this.cardNameToComponentName}}\n/\u003e\n```\n\n```javascript\n// components/my-component.js\nimport Component from '@glimmer/component';\nimport { action } from '@ember/object';\n\nexport default class extends Component {\n  @action\n  cardNameToComponentName(mobiledocCardName) {\n    return 'cards/' + mobiledocCardName;\n  }\n}\n```\n\n#### Render mobiledoc with atoms, using ember components to render atoms\n\nThis works the same way as rendering mobiledoc with ember components for cards.\nTo pass atom names to the renderer, use the `atomNames` property, e.g.:\n```hbs\n{{! myAtomNames is an array of atom names, e.g. ['mention-atom'] }}\n\u003cRenderMobiledoc @mobiledoc={{myMobileDoc}} @atomNames={{myAtomNames}} /\u003e\n```\n\nThe component will be passed a `payload` and `value` property.\n\nTo customize atom lookup, pass an `atomNameToComponentName` argument similar to\nwhat is shown above for `cardNameToComponentName`.\n\n#### Customizing markup and section rendering\nThe `sectionElementRenderer` and `markupElementRenderer` options can be used to\ncustomize the elements used for sections and inline text decorations respectively.\n\nE.g.:\n\n```hbs\n\u003cRenderMobiledoc @mobiledoc={{this.myMobileDoc}} @sectionElementRenderer={{this.mySectionElementRenderer}} /\u003e\n```\n\n```js\nmySectionElementRenderer: {\n  h1: (tagName, domDocument) =\u003e {\n    let element = domDocument.createElement('h1');\n    element.classList.add('primary-heading');\n    return element;\n  }\n}\n```\n\n#### Use mobiledoc-dom-renderer directly\n\nThis addon provides the mobiledoc-dom-renderer directly. Most of the time\nyou will want to use the `\u003cRenderMobiledoc /\u003e` component, but if you need\nto use the renderer directly in code, it can be imported:\n\n`import DOMRenderer from 'ember-mobiledoc-dom-renderer'`;\n\n\n#### Release process\n\nSee RELEASE.md\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbustle%2Fember-mobiledoc-dom-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbustle%2Fember-mobiledoc-dom-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbustle%2Fember-mobiledoc-dom-renderer/lists"}