imzbf / md-editor-v3

Markdown editor for vue3, developed in jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...
https://imzbf.github.io/md-editor-v3
MIT License
1.59k stars 154 forks source link

Preview Issue with Mermadi CSS #676

Closed ikkysleepy closed 3 weeks ago

ikkysleepy commented 3 weeks ago

Describe the issue

I get the preview working but I am getting a lot of errors due to mermiad and img

ERROR
Failed to execute 'querySelectorAll' on 'Element': '#10 .md-editor-mermaid' is not a valid selector.
    at eval (webpack-internal:///./node_modules/md-editor-v3/lib/es/chunks/index.mjs:2265:68)
ERROR
Failed to execute 'querySelectorAll' on 'Document': '#10-preview img:not(.not-zoom):not(.medium-zoom-image)' is not a valid selector.
    at eval (webpack-internal:///./node_modules/md-editor-v3/lib/es/chunks/index.mjs:66:27)
    at eval (webpack-internal:///./node_modules/@vavt/util/lib/es/index.mjs:66:9)
    at sentryWrapped (webpack-internal:///./node_modules/@sentry/browser/esm/helpers.js:102:17)
ERROR
Failed to execute 'querySelectorAll' on 'Element': '#10 .md-editor-mermaid' is not a valid selector.
    at eval (webpack-internal:///./node_modules/md-editor-v3/lib/es/chunks/index.mjs:2265:68)
ERROR
Failed to execute 'querySelectorAll' on 'Element': '#10 .md-editor-mermaid' is not a valid selector.
    at eval (webpack-internal:///./node_modules/md-editor-v3/lib/es/chunks/index.mjs:2265:68)

My Vue

<template>
    <div class='row'>
        <div class='col-md-10'>
            <MdPreview :editorId='item.id.toString()'
                       :modelValue='item.content'
                       :language="'en-US'"
                       v-if='item.content' class='mb-4'
                       :theme="isDarkMode ? 'dark': 'light'" />

        </div>
        <div class='col-2'>
            <MdCatalog :editorId='item.id.toString()'
                       :scrollElement='scrollElement'
                       :theme="isDarkMode ? 'dark': 'light'" />
        </div>
    </div>
</template>
<script setup>
    import { MdCatalog, MdPreview } from 'md-editor-v3';
    import { computed } from 'vue';
    import { useStore } from 'vuex';

    const props = defineProps({
        item: {
            type: Object,
            required: true
        }
    });

    const store = useStore();
    const scrollElement = document.documentElement;
    const isDarkMode = computed(() => store.state.is_dark_mode);
</script>

Procedure version

4.20.2

Reproduction link

No response

ikkysleepy commented 3 weeks ago

Issue was with the id name

this fixed it

        <MdPreview :editorId='"preview-"+ item.id.toString()' ...