is it a bug ? the video tag disappears after switching modes multiple times

[mengxinssfd]

https://user-images.githubusercontent.com/28827520/201994565-3673bc73-59b3-447c-b557-ddb7a09a35e3.mov

Version

3.2.1

Test Environment

macos

online demo

import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';

new Editor({
  el: document.querySelector('#editor') as HTMLElement,
  previewStyle: 'vertical',
  height: '600px',
  autofocus: false,
  customHTMLRenderer: {
    htmlBlock: {
      iframe(node) {
        return [
          {
            type: 'openTag',
            tagName: 'iframe',
            outerNewLine: true,
            attributes: node.attrs,
          },
          { type: 'html', content: node.childrenHTML as string },
          { type: 'closeTag', tagName: 'iframe', outerNewLine: true },
        ];
      },
      video(node) {
        return [
          {
            type: 'openTag',
            tagName: 'video',
            outerNewLine: true,
            attributes: node.attrs,
          },
          { type: 'html', content: node.childrenHTML as string },
          { type: 'closeTag', tagName: 'video', outerNewLine: true },
        ];
      },
    },
  },
  initialValue: `
# video demo

<video height="auto" width="100%" controls="controls" autoplay>
<source src="https://user-images.githubusercontent.com/6167532/197672283-38a2a749-2121-4a15-bfd7-473364cd2e24.mov">
</video>

<video></video> 

# iframe demo

<iframe></iframe>

  `,
});

[eugenejeonme]

I hope this code serves as a hint.

import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';

new Editor({
  el: document.querySelector('#editor') as HTMLElement,
  previewStyle: 'vertical',
  height: '600px',
  autofocus: false,
  customHTMLRenderer: {
    htmlBlock: {
      iframe(node, context) {
        // TODO: here, using context
        if (context.entering) {
            return [
              {
                type: 'openTag',
                tagName: 'iframe',
                outerNewLine: true,
                attributes: node.attrs,
              },
              { type: 'html', content: node.childrenHTML as string },
            ];
        }

        return { type: 'closeTag', tagName: 'iframe', outerNewLine: true };
      },
      video(node, context) {
        // TODO: here, using context
        if (!context.entering) {
            return { type: 'closeTag', tagName: 'video', outerNewLine: true };
        }

        return [
          {
            type: 'openTag',
            tagName: 'video',
            outerNewLine: true,
            attributes: node.attrs,
          },
          { type: 'html', content: node.childrenHTML as string },
        ];
      },
    },
  },
  initialValue: `
# video demo

<video height="auto" width="100%" controls="controls" autoplay>
<source src="https://user-images.githubusercontent.com/6167532/197672283-38a2a749-2121-4a15-bfd7-473364cd2e24.mov">
</video>

<video></video> 

# iframe demo

<iframe></iframe>

  `,
});

[mengxinssfd]

I hope this code serves as a hint.

import Editor from '@toast-ui/editor';
import '@toast-ui/editor/dist/toastui-editor.css';

new Editor({
  el: document.querySelector('#editor') as HTMLElement,
  previewStyle: 'vertical',
  height: '600px',
  autofocus: false,
  customHTMLRenderer: {
    htmlBlock: {
      iframe(node, context) {
      // TODO: here, using context
      if (context.entering) {
          return [
            {
              type: 'openTag',
              tagName: 'iframe',
              outerNewLine: true,
              attributes: node.attrs,
            },
            { type: 'html', content: node.childrenHTML as string },
          ];
      }

      return { type: 'closeTag', tagName: 'iframe', outerNewLine: true };
      },
      video(node, context) {
      // TODO: here, using context
          if (!context.entering) {
              return { type: 'closeTag', tagName: 'video', outerNewLine: true };
          }

        return [
          {
            type: 'openTag',
            tagName: 'video',
            outerNewLine: true,
            attributes: node.attrs,
          },
          { type: 'html', content: node.childrenHTML as string },
        ];
      },
    },
  },
  initialValue: `
# video demo

<video height="auto" width="100%" controls="controls" autoplay>
<source src="https://user-images.githubusercontent.com/6167532/197672283-38a2a749-2121-4a15-bfd7-473364cd2e24.mov">
</video>

<video></video> 

# iframe demo

<iframe></iframe>

  `,
});

First of all, thank you for your reply, but after I replaced it with your code and tried it, the result is still the same. Is there something wrong with me?

[jwlee1108]

I just reproduced your issue. I think we should try debugging this.

[cary-hu]

Any update? I have faced this problem now.

[cary-hu]

Seems here run into problem?

[jwlee1108]

I guess it is a bug. The problem occurs when the <video> contains the <source>.

When converted to WYSIWIG for the first time, the '\n' before and after '' disappears and becomes an HTML tag. After that, when markdown again, it is converted to ''. And when converting back to WYSIWIG, the problem is occurring as it is parsed to 'HTMLInline'.

There is no exact milestone, but I will fix it.

[mengxinssfd]

I guess it is a bug. The problem occurs when the <video> contains the <source>.

When converted to WYSIWIG for the first time, the '\n' before and after '' disappears and becomes an HTML tag. After that, when markdown again, it is converted to ''. And when converting back to WYSIWIG, the problem is occurring as it is parsed to 'HTMLInline'.

There is no exact milestone, but I will fix it.

That would be great and exciting to look forward to.

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[Xing-He]

Waitting for update.

I have to do this temporarily as follows:

In Markdown Editor

$$video
<video height="auto" width="100%" controls="controls" autoplay> <source src="https://user-images.githubusercontent.com/6167532/197672283-38a2a749-2121-4a15-bfd7-473364cd2e24.mov"> </video>
$$

Add this custom code

customHTMLRenderer:{
    video(node) {
            return [
              { type: 'openTag', tagName: 'div', outerNewLine: true },
              { type: 'html', content: node.literal },
              { type: 'closeTag', tagName: 'div', outerNewLine: true },
            ];
      },
 }

Refers to custom-block-node