Componente

Introducción

Este componente renderizará un input de tipo markdown editor. El mismo se compone de dos partes, una de renderizado y otra de lógica (IrMarkdown Bone), esta ultima será la encargada de el manejo de los datos.

Uso

Es importante recalcar el nombre del componente IrMarkdown a nivel de código, ya que este deberá usarse para llamar al componente para renderizarlo, ya sea individiualmente o en un IrForm.

Ejemplo

Propiedades

Todas las propiedades se pueden obtener desde la librería utilizada: v-md-editor - Propiedades (opens new window)

Código fuente

<template>
  <ir-markdown-bone
    v-bind="$attrs"
  >
    <div
      slot-scope="{
        height,
        value,
        leftToolbar,
        rightToolbar,
        toolbars,
        fullscreen,
        noresize,
        disabledMenus,
        leftAreaVisible,
        leftAreaTitle,
        leftAreaWidth,
        leftAreaReverse,
        mode,
      }"
    >
      <vue-markdown-editor
        :value="value"
        :height="height"
        :left-toolbar="leftToolbar"
        :right-toolbar="rightToolbar"
        :toolbars="toolbars"
        :fullscreen="fullscreen"
        :noresize="noresize"
        :disabled-menus="disabledMenus"
        :left-area-visible="leftAreaVisible"
        :left-area-title="leftAreaTitle"
        :left-area-width="leftAreaWidth"
        :left-area-reverse="leftAreaReverse"
        :mode="mode"
        @change="(text, _) => $emit('input', text)"
      />
    </div>
  </ir-markdown-bone>
</template>

<script>
import IrMarkdownBone from './IrMarkdownBone.vue'

// Editor principal
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';

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

// Idioma
import esES from '@kangc/v-md-editor/lib/lang/es-ES.js';

// Prism: en Nuxt 2 / webpack el default import ESM suele quedar undefined.
// require() es el path confiable para este paquete CJS.
function resolvePrism () {
  // eslint-disable-next-line global-require
  const mod = require('prismjs')
  const candidate = (mod && mod.languages) ? mod : (mod && mod.default)
  if (candidate && candidate.languages) return candidate
  // Stub: evita crash en hasLang; los fences se muestran sin highlight
  return {
    languages: {},
    highlight (code) { return code },
  }
}

VueMarkdownEditor.use(vuepressTheme, {
  Prism: resolvePrism(),
});

VueMarkdownEditor.lang.use('es-ES', esES);

export default {
  name: 'IrMarkdown',
  components: {
    IrMarkdownBone,
    VueMarkdownEditor,
  }
}
</script>