Command `insertImage` cannot work with pages containing <svg>
Closed this issue · 1 comments
movsb commented
tiny-markdown-editor/src/TinyMDE.js
Lines 1821 to 1830 in a28ff35
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.
jefago commented
Fixed in 0.1.20.