vue-markdown-wasm/dist/index.es.js

markdown-wasm for vue 2 & 3

/**
 * vue-markdown-wasm
 *
 * @description markdown-wasm for vue 2 & 3
 * @author Logue <logue@hotmail.co.jp>
 * @copyright 2022-2025 By Masashi Yoshikawa All rights reserved.
 * @license MIT
 * @version 1.0.1
 * @see {@link https://github.com/logue/vue-markdown-wasm}
 */

import { ParseFlags as u, ready as m, parse as c } from "@logue/markdown-wasm";
import { isVue2 as f, h as i, defineComponent as h, ref as d, watch as b, nextTick as g, onMounted as p } from "vue-demi";
const F = {
  name: "vue-markdown-wasm",
  version: "1.0.1",
  author: {
    name: "Logue",
    email: "logue@hotmail.co.jp",
    url: "https://logue.dev/"
  },
  date: "2025-10-23T01:25:22.768Z"
}, w = (e) => e ? Object.entries(e).reduce((o, [a, l]) => (a = a.charAt(0).toUpperCase() + a.slice(1), a = `on${a}`, { ...o, [a]: l }), {}) : {};
function y(e, o = {}, a) {
  if (f)
    return i(e, o, a);
  const { props: l, domProps: n, on: t, ...s } = o, r = t != null ? w(t) : {};
  return i(
    e,
    { ...s, ...l, ...n, ...r },
    a
  );
}
const B = h({
  /** Component Name */
  name: "VueMarkdown",
  /** Model Definition */
  model: {
    prop: "modelValue"
  },
  /** Props Definition */
  props: {
    /** Model value */
    modelValue: {
      type: String,
      default: ""
    },
    /**
     * HTML tag to be used for the wrapper element.
     */
    tag: {
      type: String,
      default: "article"
    },
    /** Customize parsing behavior with flags */
    parseFlags: {
      type: Number,
      default: u.DEFAULT
    },
    /** Select the output format (HTML or XHTML). */
    format: {
      type: String,
      default: "xhtml"
    },
    /**
     * bytes=true causes parse() to return the result as a Uint8Array instead of a string.
     *
     * The returned Uint8Array is only valid until the next call to parse().
     * If you need to keep the returned data around, call Uint8Array.slice() to make a copy,
     * as each call to parse() uses the same underlying memory.
     *
     * This only provides a performance benefit when you never need to convert the output
     * to a string. In most cases you're better off leaving this unset or false.
     */
    bytes: {
      type: Boolean,
      default: !1
    },
    /** Allow "javascript:" URIs in links */
    allowJsUri: {
      type: Boolean,
      default: !1
    },
    /**
     * Optional callback function that is called for each code block.
     * The langname parameter holds the "language tag", if any, of the block.
     *
     * The returned value is inserted into the resulting HTML verbatim, without HTML escaping.
     * Therefore, you should take care of properly escaping any special HTML characters.
     *
     * If the function returns null or undefined, or an exception occurs, the body will be
     * included as-is after going through HTML escaping.
     *
     * Note that using this callback has an adverse impact on performance as it causes
     * calls and data to be bridged between WASM and JS on every invocation.
     */
    onCodeBlock: {
      type: Function
    },
    /** Enable debug logging (default: false) */
    debug: {
      type: Boolean,
      default: !1
    },
    /** Output special characters as HTML entity references */
    verbatimEntities: {
      type: Boolean,
      default: !0
    },
    /** Disable anchor tags in headlines (default: false) */
    disableHeadlineAnchors: {
      type: Boolean,
      default: !1
    }
  },
  /** Event emitters */
  emits: {
    render: (e) => !0
  },
  /**
   * Component setup function
   *
   * @param props - Component properties
   * @param context - Component context
   */
  setup(e, o) {
    const a = d(), l = d("");
    b(
      () => e,
      async (t) => {
        l.value = n(t.modelValue, {
          parseFlags: t.parseFlags,
          xhtml: t.format === "xhtml",
          bytes: e.bytes,
          allowJSURIs: t.allowJsUri,
          onCodeBlock: t.onCodeBlock,
          debug: t.debug,
          verbatimEntities: t.verbatimEntities,
          disableHeadlineAnchors: t.disableHeadlineAnchors
        }), await g();
      },
      { deep: !0 }
    ), p(async () => {
      globalThis.window !== void 0 && (await m(), l.value = n(e.modelValue, {
        parseFlags: e.parseFlags,
        xhtml: e.format == "xhtml",
        bytes: e.bytes,
        allowJSURIs: e.allowJsUri,
        onCodeBlock: e.onCodeBlock,
        debug: e.debug,
        verbatimEntities: e.verbatimEntities,
        disableHeadlineAnchors: e.disableHeadlineAnchors
      }));
    });
    const n = (t, s) => {
      if (globalThis.window === void 0)
        return "";
      const r = c(t, s);
      return o.emit("render", r), r;
    };
    return o.expose({
      render: n
    }), {
      placeholder: a,
      html: l
    };
  },
  render() {
    return y(this.$props.tag, {
      ref: "placeholder",
      class: "vue-markdown",
      innerHTML: this.html
    });
  }
}), k = (e) => e.component("VueMarkdown", B);
export {
  F as Meta,
  B as default,
  k as install
};