jefago/tiny-markdown-editor

Command `insertImage` cannot work with pages containing <svg>

Closed this issue · 1 comments

// Check if there's an ancestor of class 'TMInlineFormatted' or 'TMBlankLine'
while (ancestor && ancestor != this.e) {
if (
ancestor.className &&
(ancestor.className.includes("TMInlineFormatted") ||
ancestor.className.includes("TMBlankLine"))
)
return true;
ancestor = ancestor.parentNode;
}

If ancestor is a <svg> element, it's className will be of type SVGAnimatedString, which has no method includes, which results in:

Uncaught TypeError: ancestor.className.includes is not a function
    isInlineFormattingAllowed file:///.../tiny-markdown-editor/dist/tiny-mde.js:2986
    enabled file:///.../tiny-markdown-editor/dist/tiny-mde.js:100
    handleSelection file:///.../tiny-markdown-editor/dist/tiny-mde.js:251
    setEditor file:///.../tiny-markdown-editor/dist/tiny-mde.js:245
    fireSelection file:///.../tiny-markdown-editor/dist/tiny-mde.js:3056
    handleSelectionChangeEvent file:///.../tiny-markdown-editor/dist/tiny-mde.js:2659
    createEditorElement file:///.../tiny-markdown-editor/dist/tiny-mde.js:1448
    createEditorElement file:///.../tiny-markdown-editor/dist/tiny-mde.js:1448
    Editor file:///.../tiny-markdown-editor/dist/tiny-mde.js:1423
    <anonymous> file:///.../tiny-markdown-editor/test.html:20

I've tested that classList.contains will be OK to work with this case.

The test.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<script src="dist/tiny-mde.js"></script>
<link rel="stylesheet" href="dist/tiny-mde.min.css"/>
<style>
.TinyMDE {
	height: 300px;
	overflow: auto;
}
</style>
</head>
<body>
<div id="container">
	<textarea id="content"></textarea>
	<div class="command-container"></div>
</div>
<script>
const editor = new TinyMDE.Editor({textarea: 'content'});
const commandBar = new TinyMDE.CommandBar({
	element: document.getElementById('command-container'),
	editor: editor,
	commands: [
		{
			name: `insertImage`,
			title: `上传图片/视频/文件`,
			innerHTML: `⏫`,
			action: editor => { },
		}
	],
});
</script>
<p>
	<svg class="play" title="播放" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="-16.39 -16.39 196.64 196.64" xml:space="preserve" stroke="#000000" stroke-width="0.00163861" transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="1.3108879999999998"></g><g> <g> <path d="M34.857,3.613C20.084-4.861,8.107,2.081,8.107,19.106v125.637c0,17.042,11.977,23.975,26.75,15.509L144.67,97.275 c14.778-8.477,14.778-22.211,0-30.686L34.857,3.613z"></path> </g> </g></svg>
</p>

</body>
</html>

Try open in Firefox and click the white space area under Play button.

Fixed in 0.1.20.