code-farmer-i / vue-markdown-editor

A markdown editor built on Vue
https://code-farmer-i.github.io/vue-markdown-editor/
MIT License
1.02k stars 107 forks source link

Impossible to include plugins #279

Open OlegLenskiy opened 2 months ago

OlegLenskiy commented 2 months ago

Hello. When i try import katex i'm getting errors import "@kangc/v-md-editor/lib/plugins/katex/cdn"

✘ [ERROR] Could not resolve "@babel/runtime/helpers/interopRequireDefault"

node_modules/@kangc/v-md-editor/lib/plugins/katex/cdn.js:3:37:
  3 │ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
    ╵                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

What i'm doing wrong? Help me please

cbrgpl commented 2 months ago

There is some problem with katex plugin. I'm catching this error, when import it:

Please import resources katex from cdn [parser-cdn.js:13:10](http://localhost:8081/node_modules/@kangc/v-md-editor/lib/plugins/katex/parser-cdn.js)
    js parser-cdn.js:13
    __require chunk-NIBQISYW.js:9
    js cdn.js:10
    __require chunk-NIBQISYW.js:9
    <anonymous> @kangc_v-md-editor_lib_plugins_katex_cdn.js:282

I imported and installed the plugin following the instructions from docs.

My code:

main.ts

import VueMarkdownEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'

import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/cdn'
import Prism from 'prismjs'

const app = createApp( App )

VueMarkdownEditor.use( vuepressTheme, {
  Prism,
} )
VueMarkdownEditor.use( createKatexPlugin() )

app.use( VueMarkdownEditor )

In vue

<template >
  <div class="grid items-center justify-center w-full h-full p-8 overflow-y-auto" >
    <!-- eslint-disable-next-line vue/component-name-in-template-casing -->
    <v-md-editor
      v-model="text"
      class="w-full"
      height="400px" ></v-md-editor>
  </div>
</template>

UPD my packages version:

 "@kangc/v-md-editor": "^2.3.18",
 "prismjs": "^1.29.0",