import { app } from '@/boot-app.js'
export default function(editor) {
	// panel 中需要用到的id
	const inputIFrameId = 'kityformula_' + Math.ceil(Math.random() * 10)
	const btnOkId = 'kityformula-btn' + Math.ceil(Math.random() * 10)

	const conf = {
		width: 900,
		height: 560,

		// panel 中可包含多个 tab
		tabs: [{
				// tab 的标题
				title: editor.i18next.t('menus.panelMenus.formula.插入公式'),
				// 模板
				tpl: `<div>
                  <iframe id="${inputIFrameId}" class="iframe" height="500px" width="100%" frameborder="0" scrolling="no" src="/kityformula/index.html"></iframe>
                  <div class="w-e-button-container">
                      <button id="${btnOkId}" class="right">
                          ${editor.i18next.t('确认插入')}
                      </button>
                  </div>
              </div>`,
				// 事件绑定
				events: [{
					selector: '#' + btnOkId,
					type: 'click',
					fn: () => {
						// 执行插入公式
						const node = document.getElementById(inputIFrameId)
						const kfe = node.contentWindow.kfe
						let latex = kfe.execCommand('get.source')
						// 将latex转换成svg输出
						const html = window.MathJax.tex2svg(latex,{em: 12, ex: 6})
						// 匹配输出的svg标签内容直接插入到编辑器中
						var regex = /\<svg .*\>.*\<\/svg\>/;
						var arr = html.outerHTML.match(regex);
						// 插入到富文本编辑器内
						editor.cmd["do"]('insertHTML', `<span class="formula"><span>&nbsp;</span>${ arr[0] }<span>&nbsp;</span></span>`);
						editor.change.emit()
						return true
					}
				}]
			} // tab end
		] // tabs end
	}

	return conf
}
