There is a bug with chart plugin and tab previewStyle in vue3.

[Mhanto0712]

Describe the bug

Chart plugin can't use in the editor which is set previewStyle:'tab'.

To Reproduce

1. Paste chart code in the write block.
2. "STATUS_BREAKPOINT" in Chrome and "invalid chart data" in Firefox and Edge.

Expected behavior

Successful chart in preview block and WYSIWYG.

Setting

• Vue3+Vite(both latest)
• Import and setting

  
  <script setup>
  import { ref, onMounted } from 'vue';
  // toast ui
  import '@toast-ui/editor/dist/toastui-editor.css';
  import '@toast-ui/chart/dist/toastui-chart.css';
  import 'prismjs/themes/prism.css';
  import '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css';
  import 'tui-color-picker/dist/tui-color-picker.css';
  import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';
  import '@toast-ui/editor-plugin-table-merged-cell/dist/toastui-editor-plugin-table-merged-cell.css';
  import Editor from '@toast-ui/editor';
  import chart from '@toast-ui/editor-plugin-chart';
  import codeSyntaxHighlight from '@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all';
  import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
  import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';
  import uml from '@toast-ui/editor-plugin-uml';
  import '@toast-ui/editor/dist/i18n/zh-tw';

// toast-ui vue3 wrapper const props = defineProps({ modelValue: { type: String, required: false, default: '', }, }); const emit = defineEmits(['update:modelValue']); const toastUiEditor = ref(); const chartOptions = { minWidth: 100, maxWidth: 600, minHeight: 100, maxHeight: 300, };

onMounted(() => { // toast ui const e = new Editor({ el: toastUiEditor.value, height: '70vh', initialEditType: 'markdown', previewStyle: 'tab', plugins: [ [chart, chartOptions], [codeSyntaxHighlight, { highlighter: Prism }], colorSyntax, tableMergedCell, uml, ], language: 'zh-TW', events: { change: () => emit('update:modelValue', e.getMarkdown()), }, }); });

### _Screenshots_

https://github.com/nhn/tui.editor/assets/115198861/772fe57c-5e99-469b-9e33-c76017866311

### _Solution(temporary)_
I add styling to preview block for preventing it become display:none after tab clicking, like the code below:

.toastui-editor-md-preview { display: block !important; }

(I have similar situation at other module which is using mermaid plugin, but I'm not sure if this solution will bring other problems.)