@jihua/bytemd-vue-next 0.0.0-stage → 1.22.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Rongjian Zhang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,6 @@
-# Temporary Holding Version
+# ByteMD
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+> **Unofficial fork.** This package is an unofficial fork of ByteMD, not the official `bytemd` package, and is not affiliated with or endorsed by the original project.
+
+
+https://github.com/bytedance/bytemd

package/async.d.ts

@@ -0,0 +1 @@
+export * from './dist/async'

package/async.js

@@ -0,0 +1 @@
+module.exports = require('./dist/async.js')

package/async.mjs

@@ -0,0 +1 @@
+export * from './dist/async.mjs'

package/dist/async.d.ts

@@ -0,0 +1,111 @@
+import { type Component } from 'vue';
+export interface AsyncEditorLoaderResult {
+    default: Component;
+}
+export interface AsyncEditorOptions {
+    /** Custom module loader, mainly for tests or pre-bundled builds. */
+    loader?: () => Promise<any>;
+    /** Load timeout in milliseconds. Defaults to 30000. */
+    timeout?: number;
+}
+/**
+ * Editor loader that never runs during SSR: `onMounted` starts the request,
+ * so the server only renders the sized placeholder below.
+ */
+export declare function createAsyncEditor({ loader, timeout, }?: AsyncEditorOptions): import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Reserved height while the editor chunk loads; avoids layout shift. */
+    placeholderHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    loadingText: {
+        type: StringConstructor;
+        default: string;
+    };
+    errorText: {
+        type: StringConstructor;
+        default: string;
+    };
+    retryText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("ready" | "error")[], "ready" | "error", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** Reserved height while the editor chunk loads; avoids layout shift. */
+    placeholderHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    loadingText: {
+        type: StringConstructor;
+        default: string;
+    };
+    errorText: {
+        type: StringConstructor;
+        default: string;
+    };
+    retryText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}>, {
+    placeholderHeight: string | number;
+    loadingText: string;
+    errorText: string;
+    retryText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+/** Lazy-loaded Editor. Import from `@jihua/bytemd-vue-next/async` to keep it out
+ * of the initial bundle; the placeholder reserves space during the request. */
+export declare const AsyncEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** Reserved height while the editor chunk loads; avoids layout shift. */
+    placeholderHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    loadingText: {
+        type: StringConstructor;
+        default: string;
+    };
+    errorText: {
+        type: StringConstructor;
+        default: string;
+    };
+    retryText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("ready" | "error")[], "ready" | "error", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** Reserved height while the editor chunk loads; avoids layout shift. */
+    placeholderHeight: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: number;
+    };
+    loadingText: {
+        type: StringConstructor;
+        default: string;
+    };
+    errorText: {
+        type: StringConstructor;
+        default: string;
+    };
+    retryText: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onReady?: ((...args: any[]) => any) | undefined;
+    onError?: ((...args: any[]) => any) | undefined;
+}>, {
+    placeholderHeight: string | number;
+    loadingText: string;
+    errorText: string;
+    retryText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default AsyncEditor;

package/dist/async.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+function createAsyncEditor({
+  loader = () => Promise.resolve().then(() => require("./chunks/editor-D69QOIpJ.js")),
+  timeout = 3e4
+} = {}) {
+  return vue.defineComponent({
+    name: "AsyncByteMDEditor",
+    inheritAttrs: false,
+    props: {
+      /** Reserved height while the editor chunk loads; avoids layout shift. */
+      placeholderHeight: { type: [Number, String], default: 360 },
+      loadingText: { type: String, default: "Loading editor…" },
+      errorText: { type: String, default: "Editor failed to load." },
+      retryText: { type: String, default: "Retry" }
+    },
+    emits: ["ready", "error"],
+    setup(props, { attrs, emit, slots }) {
+      const component = vue.shallowRef();
+      const failed = vue.ref();
+      let active = true;
+      let timer;
+      let request = 0;
+      const clearTimer = () => {
+        if (timer) clearTimeout(timer);
+        timer = void 0;
+      };
+      const start = () => {
+        if (component.value || !active) return;
+        failed.value = void 0;
+        const current = ++request;
+        clearTimer();
+        timer = setTimeout(() => {
+          if (active && current === request && !component.value) {
+            request++;
+            failed.value = new Error("Editor load timed out.");
+            emit("error", failed.value);
+          }
+        }, timeout);
+        Promise.resolve().then(loader).then((module2) => {
+          if (!active || current !== request) return;
+          clearTimer();
+          component.value = module2.default;
+          emit("ready");
+        }).catch((error) => {
+          if (!active || current !== request) return;
+          clearTimer();
+          failed.value = error;
+          emit("error", error);
+        });
+      };
+      const retry = () => {
+        if (!active) return;
+        failed.value = void 0;
+        start();
+      };
+      vue.onMounted(start);
+      vue.onBeforeUnmount(() => {
+        active = false;
+        request++;
+        clearTimer();
+      });
+      return () => {
+        if (component.value)
+          return vue.h(component.value, { ...attrs, key: "editor" });
+        if (failed.value) {
+          return vue.h(
+            "div",
+            {
+              class: "bytemd-async-error",
+              role: "alert",
+              style: {
+                minHeight: typeof props.placeholderHeight === "number" ? `${props.placeholderHeight}px` : props.placeholderHeight
+              }
+            },
+            [
+              vue.h("p", props.errorText),
+              vue.h(
+                "button",
+                {
+                  type: "button",
+                  class: "bytemd-async-retry",
+                  onClick: retry
+                },
+                props.retryText
+              )
+            ]
+          );
+        }
+        return vue.h(
+          "div",
+          {
+            class: "bytemd-async-placeholder",
+            role: "status",
+            "aria-busy": "true",
+            style: {
+              minHeight: typeof props.placeholderHeight === "number" ? `${props.placeholderHeight}px` : props.placeholderHeight
+            }
+          },
+          slots.loading ? slots.loading() : [vue.h("p", props.loadingText)]
+        );
+      };
+    }
+  });
+}
+const AsyncEditor = createAsyncEditor();
+exports.AsyncEditor = AsyncEditor;
+exports.createAsyncEditor = createAsyncEditor;
+exports.default = AsyncEditor;

package/dist/async.mjs

@@ -0,0 +1,110 @@
+import { defineComponent, shallowRef, ref, onMounted, onBeforeUnmount, h } from "vue";
+function createAsyncEditor({
+  loader = () => import("./chunks/editor-DDwhN-P8.mjs"),
+  timeout = 3e4
+} = {}) {
+  return defineComponent({
+    name: "AsyncByteMDEditor",
+    inheritAttrs: false,
+    props: {
+      /** Reserved height while the editor chunk loads; avoids layout shift. */
+      placeholderHeight: { type: [Number, String], default: 360 },
+      loadingText: { type: String, default: "Loading editor…" },
+      errorText: { type: String, default: "Editor failed to load." },
+      retryText: { type: String, default: "Retry" }
+    },
+    emits: ["ready", "error"],
+    setup(props, { attrs, emit, slots }) {
+      const component = shallowRef();
+      const failed = ref();
+      let active = true;
+      let timer;
+      let request = 0;
+      const clearTimer = () => {
+        if (timer) clearTimeout(timer);
+        timer = void 0;
+      };
+      const start = () => {
+        if (component.value || !active) return;
+        failed.value = void 0;
+        const current = ++request;
+        clearTimer();
+        timer = setTimeout(() => {
+          if (active && current === request && !component.value) {
+            request++;
+            failed.value = new Error("Editor load timed out.");
+            emit("error", failed.value);
+          }
+        }, timeout);
+        Promise.resolve().then(loader).then((module) => {
+          if (!active || current !== request) return;
+          clearTimer();
+          component.value = module.default;
+          emit("ready");
+        }).catch((error) => {
+          if (!active || current !== request) return;
+          clearTimer();
+          failed.value = error;
+          emit("error", error);
+        });
+      };
+      const retry = () => {
+        if (!active) return;
+        failed.value = void 0;
+        start();
+      };
+      onMounted(start);
+      onBeforeUnmount(() => {
+        active = false;
+        request++;
+        clearTimer();
+      });
+      return () => {
+        if (component.value)
+          return h(component.value, { ...attrs, key: "editor" });
+        if (failed.value) {
+          return h(
+            "div",
+            {
+              class: "bytemd-async-error",
+              role: "alert",
+              style: {
+                minHeight: typeof props.placeholderHeight === "number" ? `${props.placeholderHeight}px` : props.placeholderHeight
+              }
+            },
+            [
+              h("p", props.errorText),
+              h(
+                "button",
+                {
+                  type: "button",
+                  class: "bytemd-async-retry",
+                  onClick: retry
+                },
+                props.retryText
+              )
+            ]
+          );
+        }
+        return h(
+          "div",
+          {
+            class: "bytemd-async-placeholder",
+            role: "status",
+            "aria-busy": "true",
+            style: {
+              minHeight: typeof props.placeholderHeight === "number" ? `${props.placeholderHeight}px` : props.placeholderHeight
+            }
+          },
+          slots.loading ? slots.loading() : [h("p", props.loadingText)]
+        );
+      };
+    }
+  });
+}
+const AsyncEditor = createAsyncEditor();
+export {
+  AsyncEditor,
+  createAsyncEditor,
+  AsyncEditor as default
+};

package/dist/chunks/editor-D69QOIpJ.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const bytemd = require("@jihua/bytemd");
+const _sfc_main = vue.defineComponent({
+  props: {
+    value: { type: String, default: "" },
+    plugins: { type: Array, default: () => [] },
+    sanitize: Function,
+    remarkRehype: Object,
+    headingIds: { type: [Boolean, Object], default: true },
+    mode: { type: String, default: "auto" },
+    previewDebounce: { type: Number, default: 300 },
+    layoutContainment: { type: Boolean, default: false },
+    placeholder: String,
+    editorConfig: Object,
+    locale: Object,
+    uploadImages: Function,
+    maxLength: { type: Number, default: Infinity },
+    overridePreview: Function,
+    renderer: Function
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const el = vue.ref(null);
+    let editor2 = null;
+    let unsubscribe;
+    vue.watch(
+      () => props,
+      (newValue) => {
+        editor2 == null ? void 0 : editor2.$set({ ...newValue });
+      },
+      { deep: true }
+    );
+    vue.onMounted(() => {
+      const instance = new bytemd.Editor({
+        target: el.value,
+        props
+      });
+      unsubscribe = instance.$on("change", (e) => {
+        emit("change", e.detail.value);
+      });
+      editor2 = instance;
+    });
+    vue.onBeforeUnmount(() => {
+      unsubscribe == null ? void 0 : unsubscribe();
+      editor2 == null ? void 0 : editor2.$destroy();
+      editor2 = null;
+    });
+    return { el };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { ref: "el" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock(
+    "div",
+    _hoisted_1,
+    null,
+    512
+    /* NEED_PATCH */
+  );
+}
+const editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.default = editor;

package/dist/chunks/editor-DDwhN-P8.mjs

@@ -0,0 +1,71 @@
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock } from "vue";
+import { Editor } from "@jihua/bytemd";
+const _sfc_main = defineComponent({
+  props: {
+    value: { type: String, default: "" },
+    plugins: { type: Array, default: () => [] },
+    sanitize: Function,
+    remarkRehype: Object,
+    headingIds: { type: [Boolean, Object], default: true },
+    mode: { type: String, default: "auto" },
+    previewDebounce: { type: Number, default: 300 },
+    layoutContainment: { type: Boolean, default: false },
+    placeholder: String,
+    editorConfig: Object,
+    locale: Object,
+    uploadImages: Function,
+    maxLength: { type: Number, default: Infinity },
+    overridePreview: Function,
+    renderer: Function
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const el = ref(null);
+    let editor2 = null;
+    let unsubscribe;
+    watch(
+      () => props,
+      (newValue) => {
+        editor2 == null ? void 0 : editor2.$set({ ...newValue });
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      const instance = new Editor({
+        target: el.value,
+        props
+      });
+      unsubscribe = instance.$on("change", (e) => {
+        emit("change", e.detail.value);
+      });
+      editor2 = instance;
+    });
+    onBeforeUnmount(() => {
+      unsubscribe == null ? void 0 : unsubscribe();
+      editor2 == null ? void 0 : editor2.$destroy();
+      editor2 = null;
+    });
+    return { el };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { ref: "el" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "div",
+    _hoisted_1,
+    null,
+    512
+    /* NEED_PATCH */
+  );
+}
+const editor = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  editor as default
+};

package/dist/editor.vue.d.ts

@@ -0,0 +1 @@
+export { DefineComponent as default } from 'vue';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Editor } from './editor.vue';
+export { default as Viewer } from './viewer.vue';

package/dist/index.js

@@ -0,0 +1,205 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const bytemd = require("@jihua/bytemd");
+const viewer$1 = require("@jihua/bytemd/viewer");
+const _sfc_main$1 = vue.defineComponent({
+  props: {
+    value: { type: String, default: "" },
+    plugins: { type: Array, default: () => [] },
+    sanitize: Function,
+    remarkRehype: Object,
+    headingIds: { type: [Boolean, Object], default: true },
+    mode: { type: String, default: "auto" },
+    previewDebounce: { type: Number, default: 300 },
+    layoutContainment: { type: Boolean, default: false },
+    placeholder: String,
+    editorConfig: Object,
+    locale: Object,
+    uploadImages: Function,
+    maxLength: { type: Number, default: Infinity },
+    overridePreview: Function,
+    renderer: Function
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const el = vue.ref(null);
+    let editor2 = null;
+    let unsubscribe;
+    vue.watch(
+      () => props,
+      (newValue) => {
+        editor2 == null ? void 0 : editor2.$set({ ...newValue });
+      },
+      { deep: true }
+    );
+    vue.onMounted(() => {
+      const instance = new bytemd.Editor({
+        target: el.value,
+        props
+      });
+      unsubscribe = instance.$on("change", (e) => {
+        emit("change", e.detail.value);
+      });
+      editor2 = instance;
+    });
+    vue.onBeforeUnmount(() => {
+      unsubscribe == null ? void 0 : unsubscribe();
+      editor2 == null ? void 0 : editor2.$destroy();
+      editor2 = null;
+    });
+    return { el };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1$1 = { ref: "el" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock(
+    "div",
+    _hoisted_1$1,
+    null,
+    512
+    /* NEED_PATCH */
+  );
+}
+const editor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = vue.defineComponent({
+  props: [
+    "value",
+    "plugins",
+    "sanitize",
+    "remarkRehype",
+    "headingIds",
+    "locale",
+    "renderer"
+  ],
+  setup(props, ctx) {
+    const markdownBody = vue.ref(null);
+    let cleanupEffects;
+    let active = true;
+    let effectVersion = 0;
+    let mounted = false;
+    let controller;
+    const asyncState = vue.shallowRef();
+    const asyncRequest = vue.shallowRef();
+    const request = vue.computed(() => ({
+      value: props.value,
+      plugins: props.plugins,
+      sanitize: props.sanitize,
+      remarkRehype: props.remarkRehype,
+      headingIds: props.headingIds,
+      renderer: props.renderer
+    }));
+    const pending = vue.computed(
+      () => !!props.renderer && (asyncRequest.value !== request.value || !asyncState.value || asyncState.value.status === "pending")
+    );
+    const file = vue.computed(() => {
+      var _a;
+      if (props.renderer)
+        return asyncRequest.value === request.value && ((_a = asyncState.value) == null ? void 0 : _a.status) === "ready" ? asyncState.value.result.file : void 0;
+      try {
+        return viewer$1.renderMarkdown(request.value).file;
+      } catch (error) {
+        console.error(error);
+      }
+    });
+    const html = vue.computed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = file.value) == null ? void 0 : _a.toString()) != null ? _b : pending.value ? viewer$1.renderPendingHtml(props.locale) : viewer$1.renderErrorHtml(props.locale);
+      }
+    );
+    const needUpdate = vue.computed(() => {
+      return [
+        file.value,
+        props.plugins,
+        props.sanitize,
+        props.remarkRehype,
+        props.locale
+      ];
+    });
+    vue.watch(
+      request,
+      () => {
+        if (!mounted) return;
+        controller == null ? void 0 : controller.destroy();
+        if (props.renderer) startRender();
+      },
+      { deep: true }
+    );
+    function startRender() {
+      off();
+      asyncRequest.value = request.value;
+      controller = viewer$1.createRenderController((state) => {
+        if (state.status === "error") console.error(state.error);
+        asyncState.value = state;
+      });
+      controller.render(request.value, props.renderer);
+    }
+    vue.watch(
+      needUpdate,
+      () => {
+        off();
+        const version = ++effectVersion;
+        vue.nextTick(() => {
+          if (active && version === effectVersion) on();
+        });
+      },
+      { deep: true }
+    );
+    vue.onMounted(() => {
+      mounted = true;
+      if (props.renderer) startRender();
+      else on();
+    });
+    vue.onUnmounted(() => {
+      active = false;
+      effectVersion++;
+      controller == null ? void 0 : controller.destroy();
+      off();
+    });
+    const handleClick = (e) => {
+      var _a;
+      const $ = e.target;
+      if ((_a = $.classList) == null ? void 0 : _a.contains("bytemd-copy-btn")) {
+        viewer$1.copyCodeFromButton($);
+        return;
+      }
+      if (markdownBody.value) viewer$1.scrollToAnchor(markdownBody.value, e);
+    };
+    const off = () => {
+      cleanupEffects == null ? void 0 : cleanupEffects();
+      cleanupEffects = void 0;
+    };
+    const on = () => {
+      if (!active || !markdownBody.value || !file.value) return;
+      viewer$1.addCopyButtons(markdownBody.value, props.locale);
+      cleanupEffects = viewer$1.runViewerEffects(
+        markdownBody.value,
+        file.value,
+        props.plugins,
+        props.locale
+      );
+    };
+    return { markdownBody, html, handleClick, pending };
+  }
+});
+const _hoisted_1 = ["innerHTML", "aria-busy"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    innerHTML: _ctx.html,
+    class: "markdown-body",
+    "aria-busy": _ctx.pending,
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    ref: "markdownBody"
+  }, null, 8, _hoisted_1);
+}
+const viewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.Editor = editor;
+exports.Viewer = viewer;

package/dist/index.mjs

@@ -0,0 +1,205 @@
+import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, shallowRef, computed, nextTick, onUnmounted } from "vue";
+import { Editor } from "@jihua/bytemd";
+import { renderMarkdown, renderPendingHtml, renderErrorHtml, addCopyButtons, runViewerEffects, createRenderController, copyCodeFromButton, scrollToAnchor } from "@jihua/bytemd/viewer";
+const _sfc_main$1 = defineComponent({
+  props: {
+    value: { type: String, default: "" },
+    plugins: { type: Array, default: () => [] },
+    sanitize: Function,
+    remarkRehype: Object,
+    headingIds: { type: [Boolean, Object], default: true },
+    mode: { type: String, default: "auto" },
+    previewDebounce: { type: Number, default: 300 },
+    layoutContainment: { type: Boolean, default: false },
+    placeholder: String,
+    editorConfig: Object,
+    locale: Object,
+    uploadImages: Function,
+    maxLength: { type: Number, default: Infinity },
+    overridePreview: Function,
+    renderer: Function
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const el = ref(null);
+    let editor2 = null;
+    let unsubscribe;
+    watch(
+      () => props,
+      (newValue) => {
+        editor2 == null ? void 0 : editor2.$set({ ...newValue });
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      const instance = new Editor({
+        target: el.value,
+        props
+      });
+      unsubscribe = instance.$on("change", (e) => {
+        emit("change", e.detail.value);
+      });
+      editor2 = instance;
+    });
+    onBeforeUnmount(() => {
+      unsubscribe == null ? void 0 : unsubscribe();
+      editor2 == null ? void 0 : editor2.$destroy();
+      editor2 = null;
+    });
+    return { el };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1$1 = { ref: "el" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock(
+    "div",
+    _hoisted_1$1,
+    null,
+    512
+    /* NEED_PATCH */
+  );
+}
+const editor = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = defineComponent({
+  props: [
+    "value",
+    "plugins",
+    "sanitize",
+    "remarkRehype",
+    "headingIds",
+    "locale",
+    "renderer"
+  ],
+  setup(props, ctx) {
+    const markdownBody = ref(null);
+    let cleanupEffects;
+    let active = true;
+    let effectVersion = 0;
+    let mounted = false;
+    let controller;
+    const asyncState = shallowRef();
+    const asyncRequest = shallowRef();
+    const request = computed(() => ({
+      value: props.value,
+      plugins: props.plugins,
+      sanitize: props.sanitize,
+      remarkRehype: props.remarkRehype,
+      headingIds: props.headingIds,
+      renderer: props.renderer
+    }));
+    const pending = computed(
+      () => !!props.renderer && (asyncRequest.value !== request.value || !asyncState.value || asyncState.value.status === "pending")
+    );
+    const file = computed(() => {
+      var _a;
+      if (props.renderer)
+        return asyncRequest.value === request.value && ((_a = asyncState.value) == null ? void 0 : _a.status) === "ready" ? asyncState.value.result.file : void 0;
+      try {
+        return renderMarkdown(request.value).file;
+      } catch (error) {
+        console.error(error);
+      }
+    });
+    const html = computed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = file.value) == null ? void 0 : _a.toString()) != null ? _b : pending.value ? renderPendingHtml(props.locale) : renderErrorHtml(props.locale);
+      }
+    );
+    const needUpdate = computed(() => {
+      return [
+        file.value,
+        props.plugins,
+        props.sanitize,
+        props.remarkRehype,
+        props.locale
+      ];
+    });
+    watch(
+      request,
+      () => {
+        if (!mounted) return;
+        controller == null ? void 0 : controller.destroy();
+        if (props.renderer) startRender();
+      },
+      { deep: true }
+    );
+    function startRender() {
+      off();
+      asyncRequest.value = request.value;
+      controller = createRenderController((state) => {
+        if (state.status === "error") console.error(state.error);
+        asyncState.value = state;
+      });
+      controller.render(request.value, props.renderer);
+    }
+    watch(
+      needUpdate,
+      () => {
+        off();
+        const version = ++effectVersion;
+        nextTick(() => {
+          if (active && version === effectVersion) on();
+        });
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      mounted = true;
+      if (props.renderer) startRender();
+      else on();
+    });
+    onUnmounted(() => {
+      active = false;
+      effectVersion++;
+      controller == null ? void 0 : controller.destroy();
+      off();
+    });
+    const handleClick = (e) => {
+      var _a;
+      const $ = e.target;
+      if ((_a = $.classList) == null ? void 0 : _a.contains("bytemd-copy-btn")) {
+        copyCodeFromButton($);
+        return;
+      }
+      if (markdownBody.value) scrollToAnchor(markdownBody.value, e);
+    };
+    const off = () => {
+      cleanupEffects == null ? void 0 : cleanupEffects();
+      cleanupEffects = void 0;
+    };
+    const on = () => {
+      if (!active || !markdownBody.value || !file.value) return;
+      addCopyButtons(markdownBody.value, props.locale);
+      cleanupEffects = runViewerEffects(
+        markdownBody.value,
+        file.value,
+        props.plugins,
+        props.locale
+      );
+    };
+    return { markdownBody, html, handleClick, pending };
+  }
+});
+const _hoisted_1 = ["innerHTML", "aria-busy"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    innerHTML: _ctx.html,
+    class: "markdown-body",
+    "aria-busy": _ctx.pending,
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    ref: "markdownBody"
+  }, null, 8, _hoisted_1);
+}
+const viewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  editor as Editor,
+  viewer as Viewer
+};

package/dist/viewer.d.ts

@@ -0,0 +1,2 @@
+export { default as Viewer } from './viewer.vue';
+export type { ViewerProps } from '@jihua/bytemd/viewer';

package/dist/viewer.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const viewer$1 = require("@jihua/bytemd/viewer");
+const _sfc_main = vue.defineComponent({
+  props: [
+    "value",
+    "plugins",
+    "sanitize",
+    "remarkRehype",
+    "headingIds",
+    "locale",
+    "renderer"
+  ],
+  setup(props, ctx) {
+    const markdownBody = vue.ref(null);
+    let cleanupEffects;
+    let active = true;
+    let effectVersion = 0;
+    let mounted = false;
+    let controller;
+    const asyncState = vue.shallowRef();
+    const asyncRequest = vue.shallowRef();
+    const request = vue.computed(() => ({
+      value: props.value,
+      plugins: props.plugins,
+      sanitize: props.sanitize,
+      remarkRehype: props.remarkRehype,
+      headingIds: props.headingIds,
+      renderer: props.renderer
+    }));
+    const pending = vue.computed(
+      () => !!props.renderer && (asyncRequest.value !== request.value || !asyncState.value || asyncState.value.status === "pending")
+    );
+    const file = vue.computed(() => {
+      var _a;
+      if (props.renderer)
+        return asyncRequest.value === request.value && ((_a = asyncState.value) == null ? void 0 : _a.status) === "ready" ? asyncState.value.result.file : void 0;
+      try {
+        return viewer$1.renderMarkdown(request.value).file;
+      } catch (error) {
+        console.error(error);
+      }
+    });
+    const html = vue.computed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = file.value) == null ? void 0 : _a.toString()) != null ? _b : pending.value ? viewer$1.renderPendingHtml(props.locale) : viewer$1.renderErrorHtml(props.locale);
+      }
+    );
+    const needUpdate = vue.computed(() => {
+      return [
+        file.value,
+        props.plugins,
+        props.sanitize,
+        props.remarkRehype,
+        props.locale
+      ];
+    });
+    vue.watch(
+      request,
+      () => {
+        if (!mounted) return;
+        controller == null ? void 0 : controller.destroy();
+        if (props.renderer) startRender();
+      },
+      { deep: true }
+    );
+    function startRender() {
+      off();
+      asyncRequest.value = request.value;
+      controller = viewer$1.createRenderController((state) => {
+        if (state.status === "error") console.error(state.error);
+        asyncState.value = state;
+      });
+      controller.render(request.value, props.renderer);
+    }
+    vue.watch(
+      needUpdate,
+      () => {
+        off();
+        const version = ++effectVersion;
+        vue.nextTick(() => {
+          if (active && version === effectVersion) on();
+        });
+      },
+      { deep: true }
+    );
+    vue.onMounted(() => {
+      mounted = true;
+      if (props.renderer) startRender();
+      else on();
+    });
+    vue.onUnmounted(() => {
+      active = false;
+      effectVersion++;
+      controller == null ? void 0 : controller.destroy();
+      off();
+    });
+    const handleClick = (e) => {
+      var _a;
+      const $ = e.target;
+      if ((_a = $.classList) == null ? void 0 : _a.contains("bytemd-copy-btn")) {
+        viewer$1.copyCodeFromButton($);
+        return;
+      }
+      if (markdownBody.value) viewer$1.scrollToAnchor(markdownBody.value, e);
+    };
+    const off = () => {
+      cleanupEffects == null ? void 0 : cleanupEffects();
+      cleanupEffects = void 0;
+    };
+    const on = () => {
+      if (!active || !markdownBody.value || !file.value) return;
+      viewer$1.addCopyButtons(markdownBody.value, props.locale);
+      cleanupEffects = viewer$1.runViewerEffects(
+        markdownBody.value,
+        file.value,
+        props.plugins,
+        props.locale
+      );
+    };
+    return { markdownBody, html, handleClick, pending };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["innerHTML", "aria-busy"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    innerHTML: _ctx.html,
+    class: "markdown-body",
+    "aria-busy": _ctx.pending,
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    ref: "markdownBody"
+  }, null, 8, _hoisted_1);
+}
+const viewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.Viewer = viewer;

package/dist/viewer.mjs

@@ -0,0 +1,144 @@
+import { defineComponent, ref, shallowRef, computed, watch, nextTick, onMounted, onUnmounted, openBlock, createElementBlock } from "vue";
+import { renderMarkdown, renderPendingHtml, renderErrorHtml, addCopyButtons, runViewerEffects, createRenderController, copyCodeFromButton, scrollToAnchor } from "@jihua/bytemd/viewer";
+const _sfc_main = defineComponent({
+  props: [
+    "value",
+    "plugins",
+    "sanitize",
+    "remarkRehype",
+    "headingIds",
+    "locale",
+    "renderer"
+  ],
+  setup(props, ctx) {
+    const markdownBody = ref(null);
+    let cleanupEffects;
+    let active = true;
+    let effectVersion = 0;
+    let mounted = false;
+    let controller;
+    const asyncState = shallowRef();
+    const asyncRequest = shallowRef();
+    const request = computed(() => ({
+      value: props.value,
+      plugins: props.plugins,
+      sanitize: props.sanitize,
+      remarkRehype: props.remarkRehype,
+      headingIds: props.headingIds,
+      renderer: props.renderer
+    }));
+    const pending = computed(
+      () => !!props.renderer && (asyncRequest.value !== request.value || !asyncState.value || asyncState.value.status === "pending")
+    );
+    const file = computed(() => {
+      var _a;
+      if (props.renderer)
+        return asyncRequest.value === request.value && ((_a = asyncState.value) == null ? void 0 : _a.status) === "ready" ? asyncState.value.result.file : void 0;
+      try {
+        return renderMarkdown(request.value).file;
+      } catch (error) {
+        console.error(error);
+      }
+    });
+    const html = computed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = file.value) == null ? void 0 : _a.toString()) != null ? _b : pending.value ? renderPendingHtml(props.locale) : renderErrorHtml(props.locale);
+      }
+    );
+    const needUpdate = computed(() => {
+      return [
+        file.value,
+        props.plugins,
+        props.sanitize,
+        props.remarkRehype,
+        props.locale
+      ];
+    });
+    watch(
+      request,
+      () => {
+        if (!mounted) return;
+        controller == null ? void 0 : controller.destroy();
+        if (props.renderer) startRender();
+      },
+      { deep: true }
+    );
+    function startRender() {
+      off();
+      asyncRequest.value = request.value;
+      controller = createRenderController((state) => {
+        if (state.status === "error") console.error(state.error);
+        asyncState.value = state;
+      });
+      controller.render(request.value, props.renderer);
+    }
+    watch(
+      needUpdate,
+      () => {
+        off();
+        const version = ++effectVersion;
+        nextTick(() => {
+          if (active && version === effectVersion) on();
+        });
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      mounted = true;
+      if (props.renderer) startRender();
+      else on();
+    });
+    onUnmounted(() => {
+      active = false;
+      effectVersion++;
+      controller == null ? void 0 : controller.destroy();
+      off();
+    });
+    const handleClick = (e) => {
+      var _a;
+      const $ = e.target;
+      if ((_a = $.classList) == null ? void 0 : _a.contains("bytemd-copy-btn")) {
+        copyCodeFromButton($);
+        return;
+      }
+      if (markdownBody.value) scrollToAnchor(markdownBody.value, e);
+    };
+    const off = () => {
+      cleanupEffects == null ? void 0 : cleanupEffects();
+      cleanupEffects = void 0;
+    };
+    const on = () => {
+      if (!active || !markdownBody.value || !file.value) return;
+      addCopyButtons(markdownBody.value, props.locale);
+      cleanupEffects = runViewerEffects(
+        markdownBody.value,
+        file.value,
+        props.plugins,
+        props.locale
+      );
+    };
+    return { markdownBody, html, handleClick, pending };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["innerHTML", "aria-busy"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    innerHTML: _ctx.html,
+    class: "markdown-body",
+    "aria-busy": _ctx.pending,
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    ref: "markdownBody"
+  }, null, 8, _hoisted_1);
+}
+const viewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  viewer as Viewer
+};

package/dist/viewer.vue.d.ts

@@ -0,0 +1 @@
+export { DefineComponent as default } from 'vue';

package/package.json

@@ -1,6 +1,52 @@
 {
   "name": "@jihua/bytemd-vue-next",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.22.0",
+  "description": "Unofficial ByteMD fork (not the official bytemd package). Hackable Markdown Editor and Viewer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/bigJiHua/bytemd.git",
+    "directory": "packages/vue-next"
+  },
+  "license": "MIT",
+  "author": "Rongjian Zhang",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./async": {
+      "types": "./dist/async.d.ts",
+      "import": "./dist/async.mjs",
+      "require": "./dist/async.js"
+    },
+    "./viewer": {
+      "types": "./dist/viewer.d.ts",
+      "import": "./dist/viewer.mjs",
+      "require": "./dist/viewer.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "async.mjs",
+    "async.js",
+    "async.d.ts",
+    "viewer.mjs",
+    "viewer.js",
+    "viewer.d.ts"
+  ],
+  "dependencies": {
+    "@jihua/bytemd": "workspace:*"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/server-renderer": "^3.5.13",
+    "vue": "^3.5.13"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  }
+}

package/viewer.d.ts

@@ -0,0 +1 @@
+export * from './dist/viewer'

package/viewer.js

@@ -0,0 +1 @@
+module.exports = require('./dist/viewer.js')

package/viewer.mjs

@@ -0,0 +1 @@
+export * from './dist/viewer.mjs'