Closeable Directive does not work for html plain text

[gerteck]

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

No response

Tell us about your environment

Win 11

MarkBind version

5.6.0

Describe the bug and the steps to reproduce it

To reproduce:

<div v-closeable>
  Plain text with closeable directive 
</div>

vs.

<div v-closeable>

  Markdown with closeable directive 
</div>

Here is a screenshot:

See that the v-closeable directive does not work with plain text.

If not familiar, some relevant understanding of 'plain text', 'markdown text', and 'closeable'.

Markdown Text vs Plaintext

• https://markbind.org/userGuide/usingHtmlJavaScriptCss.html#markdown-in-html
• https://markbind.org/userGuide/components/presentation.html#use-of-markdown-in-content

Closeable Directive (not obvious)

• https://markbind.org/userGuide/reusingContents.html#allowing-users-to-remove-some-contents

(Note that the built-in closeable directive in MarkBind shows a popup that allows it to be closed into a link.)

Expected behavior

Should work for plain text too. (shouldn't work only for elements such as markdown elements or <p> elements etc.

Anything else?

This is due to this line:

markbind/packages/vue-components/src/directives/Closeable.js

Lines 52 to 57 in c8f0e1a

	const content = document.createElement('div');
	content.classList.add('content');
	Array.from(el.children).forEach(child => content.append(child));
	el.replaceChildren();
	el.append(content);
	el.classList.add('closeable-wrapper');

Line 54: el.children.

This is an issue if the element contains text nodes (e.g., from whitespace, line breaks, or raw text content), those won't be selected by el.children. But if you're trying to move all contents, including those text nodes for plain text (e.g., Plain text), text nodes are lost — so the <div> will appears empty.

Instead, we should use el.childNode. Array.from(el.childNodes).forEach(child => content.append(child));

Lifted from: https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes

It is important to keep in mind that childNodes includes all child nodes, including non-element nodes like text and comment. To get a collection containing only elements, use Element.children instead.

[nightcityblade]

Hi, I'd like to work on this. I'll submit a PR shortly.