adf2md v2.0.0
ADF2MD
ADF2MD offers you conversion of Atlassian's ADF (Atlassian Document Format) syntax into GitHub-flavored markdown, and conversion of GitHub-flavored markdown into ADF objects. Coverage for Atlassian-specific nodes is provided through MDX-style extension of the Markdown standard.
Why?
Because no developer wants to use a WYSIWYG editor to write notes.
Install
ADF2MD can be included as part of your project, or installed via CDN in the browser.
NPM
You can install the package via NPM:
npm install adf2mdThen, import the required functions into your project as needed:
import { convert, preview } from 'adf2md';If you're making use of the preview function, don't forget to include the stylesheet, adf2md.min.css, somewhere in your document or bundle.
Browser/CDN
Include the <script> and <link> tags in your documents' <head> from UNPKG, or another CDN:
<script src="//unpkg.com/adf2md@latest/dist/adf2md.min.js">
<link rel="stylesheet" href="//unpkg.com/adf2md@latest/dist/adf2md.min.css">Usage
ADF2MD includes two basic functions for working with markdown and the Atlassian Document format:
ADF2MD.convert()
Use ADF2MD.convert() to convert an ADF object into a markdown string or a markdown string into an ADF object.
| Arg | Default | Description |
|---|---|---|
adfOrMd | The ADF object to convert into markdown or the markdown to convert to ADF. |
(async () => {
const markdown = await fetch('https://xyz.atlassian.net/issues/ATL-22', {
method: 'GET',
headers: { Authorization: 'Bearer ...' },
})
.then((res) => res.json())
.then(({ fields: { description } }) => ADF2MD.convert(description));
console.log(markdown);
})();ADF2MD.preview()
Use ADF2MD.preview() to render an ADF object or ADF-style extended markdown string as GitHub-flavored markdown.
| Arg | Default | Description |
|---|---|---|
adfOrMd | The ADF object or markdown to preview. | |
el | 'body' | The target element or element selector where the preview should render. |
fetch('https://xyz.atlassian.net/issues/ATL-22', {
method: 'GET',
headers: { Authorization: 'Bearer ...' },
})
.then((res) => res.json())
.then(({ fields: { description } }) =>
ADF2MD.preview(description, '#markdown-preview'),
);Coverage
ADF2MD offers coverage for the following ADF nodes:
| Node | Status | Notes |
|---|---|---|
blockquote | Full Support | |
bulletList | Full Support | |
codeBlock | Full Support | |
emoji | Full Support | |
hardBreak | Full Support | |
heading | Full Support | |
inlineCard | No Support | |
listItem | Full Support | |
media | No support | |
mediaGroup | No support | |
mediaSingle | No support | |
mention | No support | |
orderedList | Full Support | |
panel | Full Support | Using MDX-style admonition. |
paragraph | Full Support | |
rule | Full Support | |
table | Partial Support | Column alignment is not supported in ADF. |
tableCell | Partial Support | Column alignment is not supported in ADF. |
tableHeader | Partial Support | Column alignment is not supported in ADF. |
tableRow | Partial Support | Column alignment is not supported in ADF. |
text | Full Support | |
code | Full Support | |
em | Full Support | |
link | Full Support | |
strike | No Support | |
strong | Full Support | |
subsup | No Support | |
textColor | No Support | |
underline | No Support |
License
MIT License | Copyright (c) 2022 Stephan Casas