Post HTML Issue Description with JIRA REST API v3

2022-04-11: I’ve updated the post below as the adf-schema package was changed just after I posted.

I hope somebody finds this helpful.

The @atlaskit documentation can be found here.

Below is the code to do the Wiki Markup <-> HTML conversions. I’m pretty sure that you can just stap out the WikiMarkupTransformer for the JSON transformer.

// (Markdown / Jira Markdown) <-> HTML
import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
import { WikiMarkupTransformer } from '@atlaskit/editor-wikimarkup-transformer';
import { DOMParser, DOMSerializer } from 'prosemirror-model';

/**
 * Convert Jira "Wiki Markup" -> ProseMirror -> HTML
 * @param {string} md The Jira "Markdown" string
 * @returns {string} The generated HTML
 */
const toHTML = md => {
  // Convert the Wiki Markup from Jira to a ProseMirror node
  const transformer = new WikiMarkupTransformer(defaultSchema);
  const pmNode = transformer.parse(md);

  // Serialize Prose Mirror Node to a DocumentFragment
  const dom = DOMSerializer.fromSchema(defaultSchema).serializeFragment(pmNode);

  // Get the HTML
  const div = document.createElement('div');
  div.appendChild(dom);
  const html = div.innerHTML;

  return html;
};

/**
 * Convert HTML -> DOM -> ParseMirror -> Jira "Wiki Markup"
 * @param {string} html The HTML
 * @returns {string} The generated Jira ADF
 */
const toMD = html => {
  // Create a new document and set the body
  const dom = document.implementation.createHTMLDocument();
  dom.body.innerHTML = html;
  console.debug('toMD', { dom });

  // Parse the DOM into ProseMirror and export to Wiki Markup
  const pmNode = DOMParser.fromSchema(defaultSchema).parse(dom);
  const transformer = new WikiMarkupTransformer(defaultSchema);
  const md = transformer.encode(pmNode);
  
  return md;
};

export { toHTML, toMD };
3 Likes