Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rcasto/adaptive-html
HTML to Adaptive Card JSON converter library
https://github.com/rcasto/adaptive-html
adaptive-cards adaptivecards authoring-tool converter html wysiwyg
Last synced: about 2 months ago
JSON representation
HTML to Adaptive Card JSON converter library
- Host: GitHub
- URL: https://github.com/rcasto/adaptive-html
- Owner: rcasto
- License: mit
- Created: 2018-03-02T07:30:22.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-12T21:14:20.000Z (over 1 year ago)
- Last Synced: 2024-07-09T21:52:49.666Z (2 months ago)
- Topics: adaptive-cards, adaptivecards, authoring-tool, converter, html, wysiwyg
- Language: TypeScript
- Homepage: https://rcasto.github.io/adaptive-editor/
- Size: 923 KB
- Stars: 12
- Watchers: 1
- Forks: 5
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-adaptive-cards - HTML - HTML to Adaptive Card JSON converter library. (Uncategorized / Uncategorized)
README
# AdaptiveHtml
HTML to Adaptive Card JSON converter library ([Demo editor](https://rcasto.github.io/adaptive-editor/))
The goal of this project is to allow integration with existing WYSIWYG editors such as [CKEditor](https://ckeditor.com/) and convert their HTML output to an [Adaptive Card](https://adaptivecards.io/).
Under the hood, this project has taken the [Turndown](https://github.com/domchristie/turndown/) code and repurposed it.
## Table of contents
- [Getting started](#getting-started)
- [API](#api)
- [Currently supported HTML tags](#currently-supported-html-tags)
- [Known caveats](#known-caveats)
- [Building it yourself](#building-it-yourself)
## Getting started
You can either install the npm package or use a CDN.
### Via npm
`npm install adaptive-html`
### Via CDN
```html
```
## API
toJSON(string | [HTMLElement](https://devdocs.io/dom/htmlelement)) => Adaptive Card JSON
```javascript
var adaptiveCardJson = AdaptiveHtml.toJSON(`
Turn me into an Adaptive Card
`);
console.log(JSON.stringify(adaptiveCardJson, null, '\t'));
/*
JSON returned
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Turn me into an Adaptive Card",
"wrap": true
}
],
"actions": [],
"version": "1.0"
}
*/
```
### Override version of Adaptive Card schema used
The `toJSON` method has an optional options object that can be passed in as the second parameter. The only accepted property within this object at the moment is `version`, which should be the [version of the Adaptive Card schema](https://github.com/microsoft/AdaptiveCards/tree/main/schemas#referenceable-versions) that you would like associated with the generated Adaptive Card JSON output. By default, the version will be "1.0".
```javascript
var adaptiveCardJson = AdaptiveHtml.toJSON(`
Turn me into an Adaptive Card
`, {
version: '1.5',
});
console.log(JSON.stringify(adaptiveCardJson, null, '\t'));
/*
JSON returned
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"text": "Turn me into an Adaptive Card",
"wrap": true
}
],
"actions": [],
"version": "1.5"
}
*/
```
## Currently supported HTML tags
- p
- br
- h1, h2, h3, h4, h5, h6
- ul, ol
- li
- a
- em, i
- strong, b
- img
The default replacement for tags not listed above depends on whether the tag refers to a [block](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Elements) or [inline](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#Elements) level HTML element.
For block level elements, its contents are processed, and wrapped in a [Container](https://adaptivecards.io/explorer/Container.html).
For inline level elements, its contents are processed and simply returned.
## Known caveats
- Images in list steps and nested steps are pushed to the bottom of the corresponding list step
- Lists cannot contain headings
## Building it yourself
If you wish to build the library yourself then you can follow these steps:
1. Clone or download the [repository](https://github.com/rcasto/adaptive-html)
2. `cd` to the repository directory via the command line/terminal
3. Run `npm install` to install the necessary dependencies
- Note: Make sure you have [Node.js](https://nodejs.org/en/) installed
4. Hack away
5. Execute the command `npm run build`
6. You should now be able to view the built libraries under the `dist/` folder within your copy of the repository
### Test Client
To demonstrate the transformation there is a test client within the repository. To launch it follow these steps:
1. Execute the command `npm run client` from project root
2. Navigate to http://localhost:8080
### Running tests
You can run tests by executing the command `npm test`.
If you want to generate a code coverage report execute the command `npm run test:report`. Launch `coverage/index.html` in the browser to view the report.