kaishuu0123/index.js

## index.js
'use strict'

import markdownitfence from 'markdown-it-fence'

const drawioViewerDefaultURL = () => {
  return '//www.draw.io/js/viewer.min.js'
}

const render = (code, drawioViewerURL, idx) => {
  let trimedCode = code.trim()
  if (!trimedCode) {
    return ''
  }

  let iframe = document.createElement('iframe')
  iframe.style.visibility = 'hidden'

  let body = document.getElementsByTagName('body')[0]
  body.appendChild(iframe)

  let rootDiv = document.createElement('div')
  rootDiv.class = 'markdownItDrawio'

  let drawioDiv = document.createElement('div')
  drawioDiv.classList.add('mxgraph')
  drawioDiv.style.maxWidth = '100%'
  drawioDiv.style.border = '1px solid transparent'

  let mxGraphData = {
    editable: false,
    highlight: '#0000ff',
    nav: true,
    resize: true,
    toolbar: "zoom layers",
    edit: '_blank',
    xml: code
  }

  const escapedData = JSON.stringify(mxGraphData)

  drawioDiv.setAttribute(
    'data-mxgraph',
    escapedData
  )

  let drawioScript = document.createElement('script');
  drawioScript.type = 'text/javascript'
  drawioScript.src = drawioViewerURL

  rootDiv.appendChild(drawioDiv)
  rootDiv.appendChild(drawioScript)

  var iframeDocument = iframe.contentWindow.document;
  iframeDocument.open()
  iframeDocument.write(`<body>
  <script type="text/javascript">
  window.onDrawioViewerLoad = function () {
    GraphViewer.processElements();
    let svg = document.getElementsByTagName('svg')[0]
    window.parent.postMessage({
      type: 'drawioRendered',
      id: ${idx},
      svg: svg.outerHTML
    })
  }
</script>
  ${rootDiv.outerHTML}
</body>`)
  iframeDocument.close()

  window.addEventListener("message", function(event) {
    if (event.data.type != null && event.data.type == 'drawioRendered') {
      console.log(document.getElementsByClassName(`drawio-idx-${event.data.id}`))
      let element = document.getElementsByClassName(`drawio-idx-${event.data.id}`)[0]
      if (element) {
        element.innerHTML = event.data.svg
      }
    }
  }, false);

  return `<div class="drawio-idx-${idx}"></div>`
}

const DrawioRender = (drawioViewerURL) => {
  return (tokens, idx, options, env) => {
    const token = tokens[idx]
    const diag_type = token.info.trim()
    const code = token.content.trim()
    const renderStr = render(code, drawioViewerURL, idx)
    console.log(renderStr)
    return renderStr
  }
}

const MarkdownItDrawioValidate = (params) => {
  const diag_types = [
    'drawio'
  ]

  var type = params.trim().split(' ', 2)[0]
  return diag_types.includes(type)
}

const MarkdownItDrawioPlugin = (md, options) => {
  options = options || {}

  var drawioViewerURL = options.drawioViewerURL || drawioViewerDefaultURL()
  var render = options.render || md.renderer.rules.image
  var marker = options.marker || '```'

  return markdownitfence(md, 'drawio', {
    marker: marker,
    render: DrawioRender(drawioViewerURL),
    validate: MarkdownItDrawioValidate,
  })
}

module.exports = MarkdownItDrawioPlugin
	'use strict'

	import markdownitfence from 'markdown-it-fence'

	const drawioViewerDefaultURL = () => {
	return '//www.draw.io/js/viewer.min.js'
	}

	const render = (code, drawioViewerURL, idx) => {
	let trimedCode = code.trim()
	if (!trimedCode) {
	return ''
	}

	let iframe = document.createElement('iframe')
	iframe.style.visibility = 'hidden'

	let body = document.getElementsByTagName('body')[0]
	body.appendChild(iframe)

	let rootDiv = document.createElement('div')
	rootDiv.class = 'markdownItDrawio'

	let drawioDiv = document.createElement('div')
	drawioDiv.classList.add('mxgraph')
	drawioDiv.style.maxWidth = '100%'
	drawioDiv.style.border = '1px solid transparent'

	let mxGraphData = {
	editable: false,
	highlight: '#0000ff',
	nav: true,
	resize: true,
	toolbar: "zoom layers",
	edit: '_blank',
	xml: code
	}

	const escapedData = JSON.stringify(mxGraphData)

	drawioDiv.setAttribute(
	'data-mxgraph',
	escapedData
	)

	let drawioScript = document.createElement('script');
	drawioScript.type = 'text/javascript'
	drawioScript.src = drawioViewerURL

	rootDiv.appendChild(drawioDiv)
	rootDiv.appendChild(drawioScript)

	var iframeDocument = iframe.contentWindow.document;
	iframeDocument.open()
	iframeDocument.write(`<body>
	<script type="text/javascript">
	window.onDrawioViewerLoad = function () {
	GraphViewer.processElements();
	let svg = document.getElementsByTagName('svg')[0]
	window.parent.postMessage({
	type: 'drawioRendered',
	id: ${idx},
	svg: svg.outerHTML
	})
	}
	</script>
	${rootDiv.outerHTML}
	</body>`)
	iframeDocument.close()

	window.addEventListener("message", function(event) {
	if (event.data.type != null && event.data.type == 'drawioRendered') {
	console.log(document.getElementsByClassName(`drawio-idx-${event.data.id}`))
	let element = document.getElementsByClassName(`drawio-idx-${event.data.id}`)[0]
	if (element) {
	element.innerHTML = event.data.svg
	}
	}
	}, false);

	return `<div class="drawio-idx-${idx}"></div>`
	}

	const DrawioRender = (drawioViewerURL) => {
	return (tokens, idx, options, env) => {
	const token = tokens[idx]
	const diag_type = token.info.trim()
	const code = token.content.trim()
	const renderStr = render(code, drawioViewerURL, idx)
	console.log(renderStr)
	return renderStr
	}
	}

	const MarkdownItDrawioValidate = (params) => {
	const diag_types = [
	'drawio'
	]

	var type = params.trim().split(' ', 2)[0]
	return diag_types.includes(type)
	}

	const MarkdownItDrawioPlugin = (md, options) => {
	options = options \|\| {}

	var drawioViewerURL = options.drawioViewerURL \|\| drawioViewerDefaultURL()
	var render = options.render \|\| md.renderer.rules.image
	var marker = options.marker \|\| '```'

	return markdownitfence(md, 'drawio', {
	marker: marker,
	render: DrawioRender(drawioViewerURL),
	validate: MarkdownItDrawioValidate,
	})
	}

	module.exports = MarkdownItDrawioPlugin