md-editor-v3
Version:
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...
1,251 lines • 111 kB
JavaScript
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
import { defineComponent, createVNode, inject, ref, onMounted, reactive, computed, watch, toRef, nextTick, Fragment, cloneVNode, shallowRef, onBeforeUnmount } from "vue";
import { p as prefix, g as globalConfig, a as allToolbar, M as MinInputBoxWidth, b as allFooter } from "./chunks/config.mjs";
import { draggingScroll, linkTo, throttle, createSmoothScroll } from "@vavt/util";
import { a as Dropdown, D as DropdownToolbar } from "./chunks/index.mjs";
import { b as bus, C as CHANGE_FULL_SCREEN, E as ERROR_CATCHER, U as UPLOAD_IMAGE, O as OPEN_MODALS, R as REPLACE, a as CHANGE_CATALOG_VISIBLE, c as ON_SAVE, d as CTRL_SHIFT_Z, e as CTRL_Z, f as EVENT_LISTENER, T as TASK_STATE_CHANGED, S as SEND_EDITOR_VIEW, G as GET_EDITOR_VIEW } from "./chunks/event-name.mjs";
import { a as appendHandler } from "./chunks/dom.mjs";
import { C as CDN_IDS, c as contentProps, a as ContentPreview, e as editorEmits, b as editorProps, u as useProvide, d as useConfig, f as useCatalog, g as useOnSave, h as useExpansion, i as useErrorCatcher, j as useExpose, M as MdPreview } from "./chunks/index3.mjs";
import { M as MdModal, I as Icon } from "./chunks/index2.mjs";
import { b as base642File } from "./chunks/index5.mjs";
import { s as scrollAuto, a as scrollAutoWithScale, M as MdCatalog } from "./chunks/index4.mjs";
import { EditorView as EditorView$1 } from "codemirror";
import { EditorView, placeholder, keymap, drawSelection } from "@codemirror/view";
import { languages } from "@codemirror/language-data";
import { markdown } from "@codemirror/lang-markdown";
import { EditorSelection, EditorState, Compartment, StateEffect } from "@codemirror/state";
import { deleteLine, defaultKeymap, historyKeymap, indentWithTab, history, undo, redo } from "@codemirror/commands";
import { syntaxHighlighting, HighlightStyle, indentUnit } from "@codemirror/language";
import { tags } from "@lezer/highlight";
import { autocompletion } from "@codemirror/autocomplete";
import { searchKeymap } from "@codemirror/search";
import { g as getSlot } from "./chunks/vue-tsx.mjs";
import NormalToolbar from "./NormalToolbar.mjs";
import ModalToolbar from "./ModalToolbar.mjs";
const Divider = /* @__PURE__ */ defineComponent({
name: `${prefix}-divider`,
setup() {
return () => createVNode("div", {
"class": `${prefix}-divider`
}, null);
}
});
const toolbarProps = {
noPrettier: {
type: Boolean
},
// 工具栏选择显示
toolbars: {
type: Array,
default: () => []
},
// 工具栏选择不显示
toolbarsExclude: {
type: Array,
default: () => []
},
setting: {
type: Object,
default: () => ({})
},
screenfull: {
type: Object,
default: null
},
screenfullJs: {
type: String,
default: ""
},
updateSetting: {
type: Function,
default: () => {
}
},
tableShape: {
type: Array,
default: () => [6, 4]
},
defToolbars: {
type: Object
},
noUploadImg: {
type: Boolean
},
/**
* 是否在工具栏下面显示对应的文字名称
*
* @default false
*/
showToolbarName: {
type: Boolean
},
catalogVisible: {
type: Boolean
},
codeTheme: {
type: String
},
insertLinkDirect: {
type: Boolean
}
};
const useSreenfull = (props2) => {
const editorId = inject("editorId");
const { editorExtensions, editorExtensionsAttrs } = globalConfig;
let screenfull = editorExtensions.screenfull.instance;
const screenfullMe = ref(false);
const fullscreenHandler = (status) => {
if (!screenfull) {
bus.emit(editorId, ERROR_CATCHER, {
name: "fullscreen",
message: "fullscreen is undefined"
});
return;
}
if (screenfull.isEnabled) {
screenfullMe.value = true;
const targetStatus = status === void 0 ? !screenfull.isFullscreen : status;
if (targetStatus) {
screenfull.request();
} else {
screenfull.exit();
}
} else {
console.error("browser does not support screenfull!");
}
};
const onScreenfullEvent = () => {
if (screenfull && screenfull.isEnabled) {
screenfull.on("change", () => {
if (screenfullMe.value || props2.setting.fullscreen) {
screenfullMe.value = false;
props2.updateSetting("fullscreen");
}
});
}
};
const screenfullLoad = () => {
screenfull = window.screenfull;
onScreenfullEvent();
};
onMounted(() => {
var _a;
onScreenfullEvent();
if (!screenfull) {
appendHandler(
"script",
{
...(_a = editorExtensionsAttrs.screenfull) == null ? void 0 : _a.js,
src: editorExtensions.screenfull.js,
id: CDN_IDS.screenfull,
onload: screenfullLoad
},
"screenfull"
);
}
});
onMounted(() => {
bus.on(editorId, {
name: CHANGE_FULL_SCREEN,
callback: fullscreenHandler
});
});
return { fullscreenHandler };
};
const props$6 = {
tableShape: {
type: Array,
default: () => [6, 4]
},
onSelected: {
type: Function,
default: () => {
}
}
};
const TableShape = /* @__PURE__ */ defineComponent({
name: "TableShape",
props: props$6,
setup(props2) {
const hoverPosition = reactive({
x: -1,
y: -1
});
const tableShapeStr = computed(() => {
return JSON.stringify(props2.tableShape);
});
const initShape = () => {
const shape = [...JSON.parse(tableShapeStr.value)];
if (!shape[2] || shape[2] < shape[0]) {
shape[2] = shape[0];
}
if (!shape[3] || shape[3] < shape[3]) {
shape[3] = shape[1];
}
return shape;
};
const tableShape = ref(initShape());
watch([tableShapeStr], () => {
tableShape.value = initShape();
});
return () => createVNode("div", {
"class": `${prefix}-table-shape`,
"onMouseleave": () => {
tableShape.value = initShape();
hoverPosition.x = -1;
hoverPosition.y = -1;
}
}, [new Array(tableShape.value[1]).fill("").map((_, rowIndex) => createVNode("div", {
"class": `${prefix}-table-shape-row`,
"key": `table-shape-row-${rowIndex}`
}, [new Array(tableShape.value[0]).fill("").map((_2, colIndex) => createVNode("div", {
"class": `${prefix}-table-shape-col`,
"key": `table-shape-col-${colIndex}`,
"onMouseenter": () => {
hoverPosition.x = rowIndex;
hoverPosition.y = colIndex;
if (colIndex + 1 === tableShape.value[0] && colIndex + 1 < tableShape.value[2]) {
tableShape.value[0]++;
} else if (colIndex + 2 < tableShape.value[0] && tableShape.value[0] > props2.tableShape[0]) {
tableShape.value[0]--;
}
if (rowIndex + 1 === tableShape.value[1] && rowIndex + 1 < tableShape.value[3]) {
tableShape.value[1]++;
} else if (rowIndex + 2 < tableShape.value[1] && tableShape.value[1] > props2.tableShape[1]) {
tableShape.value[1]--;
}
},
"onClick": () => {
props2.onSelected(hoverPosition);
}
}, [createVNode("div", {
"class": [`${prefix}-table-shape-col-default`, rowIndex <= hoverPosition.x && colIndex <= hoverPosition.y && `${prefix}-table-shape-col-include`]
}, null)]))]))]);
}
});
const props$5 = {
type: {
type: String,
default: "link"
},
visible: {
type: Boolean,
default: false
},
onCancel: {
type: Function,
default: () => {
}
},
onOk: {
type: Function,
default: () => {
}
}
};
const LinkModal = /* @__PURE__ */ defineComponent({
name: `${prefix}-modal-link`,
props: props$5,
setup(props2) {
const ult = inject("usedLanguageText");
const editorId = inject("editorId");
const title = computed(() => {
var _a, _b;
switch (props2.type) {
case "link": {
return (_a = ult.value.linkModalTips) == null ? void 0 : _a.linkTitle;
}
case "image": {
return (_b = ult.value.linkModalTips) == null ? void 0 : _b.imageTitle;
}
default: {
return "";
}
}
});
const linkData = reactive({
desc: "",
url: ""
});
watch(() => props2.visible, (nVal) => {
if (!nVal) {
setTimeout(() => {
linkData.desc = "";
linkData.url = "";
}, 200);
}
});
return () => createVNode(MdModal, {
"title": title.value,
"visible": props2.visible,
"onClose": props2.onCancel
}, {
default: () => {
var _a, _b, _c, _d, _e;
return [createVNode("div", {
"class": `${prefix}-form-item`
}, [createVNode("label", {
"class": `${prefix}-label`,
"for": `link-desc-${editorId}`
}, [(_a = ult.value.linkModalTips) == null ? void 0 : _a.descLabel]), createVNode("input", {
"placeholder": (_b = ult.value.linkModalTips) == null ? void 0 : _b.descLabelPlaceHolder,
"class": `${prefix}-input`,
"id": `link-desc-${editorId}`,
"type": "text",
"value": linkData.desc,
"onChange": (e) => {
linkData.desc = e.target.value;
},
"autocomplete": "off"
}, null)]), createVNode("div", {
"class": `${prefix}-form-item`
}, [createVNode("label", {
"class": `${prefix}-label`,
"for": `link-url-${editorId}`
}, [(_c = ult.value.linkModalTips) == null ? void 0 : _c.urlLabel]), createVNode("input", {
"placeholder": (_d = ult.value.linkModalTips) == null ? void 0 : _d.urlLabelPlaceHolder,
"class": `${prefix}-input`,
"id": `link-url-${editorId}`,
"type": "text",
"value": linkData.url,
"onChange": (e) => {
linkData.url = e.target.value;
},
"autocomplete": "off"
}, null)]), createVNode("div", {
"class": `${prefix}-form-item`
}, [createVNode("button", {
"class": [`${prefix}-btn`, `${prefix}-btn-row`],
"type": "button",
"onClick": () => {
props2.onOk(linkData);
linkData.desc = "";
linkData.url = "";
}
}, [(_e = ult.value.linkModalTips) == null ? void 0 : _e.buttonOK])])];
}
});
}
});
const props$4 = {
visible: {
type: Boolean,
default: false
},
onCancel: {
type: Function,
default: () => {
}
},
onOk: {
type: Function,
default: () => {
}
}
};
const ClipModal = /* @__PURE__ */ defineComponent({
name: `${prefix}-modal-clip`,
props: props$4,
setup(props2) {
const ult = inject("usedLanguageText");
const editorId = inject("editorId");
const rootRef = inject("rootRef");
let Cropper = globalConfig.editorExtensions.cropper.instance;
const uploadRef = ref();
const uploadImgRef = ref();
const previewTargetRef = ref();
const data = reactive({
cropperInited: false,
imgSelected: false,
imgSrc: "",
// 是否全屏
isFullscreen: false
});
let cropper = null;
watch(() => props2.visible, () => {
if (props2.visible && !data.cropperInited) {
Cropper = Cropper || window.Cropper;
uploadRef.value.onchange = () => {
if (!Cropper) {
bus.emit(editorId, ERROR_CATCHER, {
name: "Cropper",
message: "Cropper is undefined"
});
return;
}
const fileList = uploadRef.value.files || [];
data.imgSelected = true;
if ((fileList == null ? void 0 : fileList.length) > 0) {
const fileReader = new FileReader();
fileReader.onload = (e) => {
data.imgSrc = e.target.result;
};
fileReader.readAsDataURL(fileList[0]);
}
};
}
});
watch(() => [data.imgSelected], () => {
previewTargetRef.value.style = "";
});
watch([toRef(() => data.isFullscreen), toRef(() => data.imgSrc)], () => {
if (data.imgSrc) {
nextTick(() => {
cropper == null ? void 0 : cropper.destroy();
previewTargetRef.value.style = "";
if (uploadImgRef.value) {
cropper = new Cropper(uploadImgRef.value, {
viewMode: 2,
preview: rootRef.value.getRootNode().querySelector(`.${prefix}-clip-preview-target`)
// aspectRatio: 16 / 9,
});
}
});
}
});
const reset = () => {
cropper.clear();
cropper.destroy();
cropper = null;
uploadRef.value.value = "";
data.imgSelected = false;
};
return () => {
var _a;
return createVNode(MdModal, {
"class": `${prefix}-modal-clip`,
"title": (_a = ult.value.clipModalTips) == null ? void 0 : _a.title,
"visible": props2.visible,
"onClose": props2.onCancel,
"showAdjust": true,
"isFullscreen": data.isFullscreen,
"onAdjust": (val) => {
data.isFullscreen = val;
},
"width": "668px",
"height": "421px"
}, {
default: () => {
var _a2, _b, _c;
return [createVNode("div", {
"class": `${prefix}-form-item ${prefix}-clip`
}, [createVNode("div", {
"class": `${prefix}-clip-main`
}, [data.imgSelected ? createVNode("div", {
"class": `${prefix}-clip-cropper`
}, [createVNode("img", {
"src": data.imgSrc,
"ref": uploadImgRef,
"style": {
display: "none"
},
"alt": ""
}, null), createVNode("div", {
"class": `${prefix}-clip-delete`,
"onClick": reset
}, [createVNode(Icon, {
"name": "delete"
}, null)])]) : createVNode("div", {
"class": `${prefix}-clip-upload`,
"onClick": () => {
uploadRef.value.click();
},
"role": "button",
"tabindex": "0",
"aria-label": (_a2 = ult.value.imgTitleItem) == null ? void 0 : _a2.upload
}, [createVNode(Icon, {
"name": "upload"
}, null)])]), createVNode("div", {
"class": `${prefix}-clip-preview`
}, [createVNode("div", {
"class": `${prefix}-clip-preview-target`,
"ref": previewTargetRef
}, null)])]), createVNode("div", {
"class": `${prefix}-form-item`
}, [createVNode("button", {
"class": `${prefix}-btn`,
"type": "button",
"onClick": () => {
if (cropper) {
const cvs = cropper.getCroppedCanvas();
bus.emit(editorId, UPLOAD_IMAGE, [base642File(cvs.toDataURL("image/png"))], props2.onOk);
reset();
}
}
}, [((_b = ult.value.clipModalTips) == null ? void 0 : _b.buttonUpload) || ((_c = ult.value.linkModalTips) == null ? void 0 : _c.buttonOK)])]), createVNode("input", {
"ref": uploadRef,
"accept": "image/*",
"type": "file",
"multiple": false,
"style": {
display: "none"
},
"aria-hidden": "true"
}, null)];
}
});
};
}
});
const props$3 = {
type: {
type: String,
default: "link"
},
linkVisible: {
type: Boolean,
default: false
},
clipVisible: {
type: Boolean,
default: false
},
onCancel: {
type: Function,
default: () => {
}
},
onOk: {
type: Function,
default: () => {
}
}
};
const Modals = /* @__PURE__ */ defineComponent({
name: `${prefix}-modals`,
props: props$3,
setup(props2) {
return () => createVNode(Fragment, null, [createVNode(LinkModal, {
"type": props2.type,
"visible": props2.linkVisible,
"onOk": props2.onOk,
"onCancel": props2.onCancel
}, null), createVNode(ClipModal, {
"visible": props2.clipVisible,
"onOk": props2.onOk,
"onCancel": props2.onCancel
}, null)]);
}
});
const ToolBar = /* @__PURE__ */ defineComponent({
name: "MDEditorToolbar",
props: toolbarProps,
setup(props2) {
const editorId = inject("editorId");
const ult = inject("usedLanguageText");
const theme = inject("theme");
const previewTheme = inject("previewTheme");
const language = inject("language");
const disabled = inject("disabled");
const {
fullscreenHandler
} = useSreenfull(props2);
const wrapperId = `${editorId}-toolbar-wrapper`;
const wrapperRef = ref();
const visible = reactive({
title: false,
catalog: false,
// 图片上传下拉
image: false,
// 表格预选
table: false,
// mermaid
mermaid: false,
katex: false
});
const emitHandler = (direct, params) => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
bus.emit(editorId, REPLACE, direct, params);
};
const modalData = reactive({
type: "link",
linkVisible: false,
clipVisible: false
});
const toolbarLeftRef = ref();
onMounted(() => {
bus.on(editorId, {
name: OPEN_MODALS,
callback(type) {
modalData.type = type;
modalData.linkVisible = true;
}
});
});
const splitedbar = computed(() => {
const excluedBars = props2.toolbars.filter((barItem) => !props2.toolbarsExclude.includes(barItem));
const moduleSplitIndex = excluedBars.indexOf("=");
const barLeft = moduleSplitIndex === -1 ? excluedBars : excluedBars.slice(0, moduleSplitIndex + 1);
const barRight = moduleSplitIndex === -1 ? [] : excluedBars.slice(moduleSplitIndex, Number.MAX_SAFE_INTEGER);
return [barLeft, barRight];
});
const uploadRef = ref();
const uploadHandler = () => {
bus.emit(editorId, UPLOAD_IMAGE, Array.from(uploadRef.value.files || []));
uploadRef.value.value = "";
};
onMounted(() => {
uploadRef.value.addEventListener("change", uploadHandler);
});
const barRender = (barItem) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z, __, _$, _aa, _ba, _ca, _da, _ea, _fa, _ga, _ha, _ia, _ja, _ka, _la, _ma, _na, _oa, _pa, _qa, _ra, _sa, _ta, _ua, _va, _wa, _xa, _ya, _za, _Aa;
if (allToolbar.includes(barItem)) {
switch (barItem) {
case "-": {
return createVNode(Divider, null, null);
}
case "bold": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_a = ult.value.toolbarTips) == null ? void 0 : _a.bold,
"onClick": () => {
emitHandler("bold");
}
}, [createVNode(Icon, {
"name": "bold"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_b = ult.value.toolbarTips) == null ? void 0 : _b.bold])]);
}
case "underline": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_c = ult.value.toolbarTips) == null ? void 0 : _c.underline,
"onClick": () => {
emitHandler("underline");
}
}, [createVNode(Icon, {
"name": "underline"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_d = ult.value.toolbarTips) == null ? void 0 : _d.underline])]);
}
case "italic": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_e = ult.value.toolbarTips) == null ? void 0 : _e.italic,
"onClick": () => {
emitHandler("italic");
}
}, [createVNode(Icon, {
"name": "italic"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_f = ult.value.toolbarTips) == null ? void 0 : _f.italic])]);
}
case "strikeThrough": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_g = ult.value.toolbarTips) == null ? void 0 : _g.strikeThrough,
"onClick": () => {
emitHandler("strikeThrough");
}
}, [createVNode(Icon, {
"name": "strike-through"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_h = ult.value.toolbarTips) == null ? void 0 : _h.strikeThrough])]);
}
case "title": {
return createVNode(Dropdown, {
"relative": `#${wrapperId}`,
"visible": visible.title,
"onChange": (v) => {
visible.title = v;
},
"disabled": disabled == null ? void 0 : disabled.value,
"overlay": createVNode("ul", {
"class": `${prefix}-menu`,
"onClick": () => {
visible.title = false;
},
"role": "menu"
}, [createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-title`,
"onClick": () => {
emitHandler("h1");
},
"role": "menuitem",
"tabindex": "0"
}, [(_i = ult.value.titleItem) == null ? void 0 : _i.h1]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-title`,
"onClick": () => {
emitHandler("h2");
},
"role": "menuitem",
"tabindex": "0"
}, [(_j = ult.value.titleItem) == null ? void 0 : _j.h2]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-title`,
"onClick": () => {
emitHandler("h3");
},
"role": "menuitem",
"tabindex": "0"
}, [(_k = ult.value.titleItem) == null ? void 0 : _k.h3]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-title`,
"onClick": () => {
emitHandler("h4");
},
"role": "menuitem",
"tabindex": "0"
}, [(_l = ult.value.titleItem) == null ? void 0 : _l.h4]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-title`,
"onClick": () => {
emitHandler("h5");
},
"role": "menuitem",
"tabindex": "0"
}, [(_m = ult.value.titleItem) == null ? void 0 : _m.h5]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-title`,
"onClick": () => {
emitHandler("h6");
},
"role": "menuitem",
"tabindex": "0"
}, [(_n = ult.value.titleItem) == null ? void 0 : _n.h6])])
}, {
default: () => {
var _a2, _b2;
return [createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_a2 = ult.value.toolbarTips) == null ? void 0 : _a2.title
}, [createVNode(Icon, {
"name": "title"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_b2 = ult.value.toolbarTips) == null ? void 0 : _b2.title])])];
}
});
}
case "sub": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_o = ult.value.toolbarTips) == null ? void 0 : _o.sub,
"onClick": () => {
emitHandler("sub");
}
}, [createVNode(Icon, {
"name": "sub"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_p = ult.value.toolbarTips) == null ? void 0 : _p.sub])]);
}
case "sup": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_q = ult.value.toolbarTips) == null ? void 0 : _q.sup,
"onClick": () => {
emitHandler("sup");
}
}, [createVNode(Icon, {
"name": "sup"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_r = ult.value.toolbarTips) == null ? void 0 : _r.sup])]);
}
case "quote": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_s = ult.value.toolbarTips) == null ? void 0 : _s.quote,
"onClick": () => {
emitHandler("quote");
}
}, [createVNode(Icon, {
"name": "quote"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_t = ult.value.toolbarTips) == null ? void 0 : _t.quote])]);
}
case "unorderedList": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_u = ult.value.toolbarTips) == null ? void 0 : _u.unorderedList,
"onClick": () => {
emitHandler("unorderedList");
}
}, [createVNode(Icon, {
"name": "unordered-list"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_v = ult.value.toolbarTips) == null ? void 0 : _v.unorderedList])]);
}
case "orderedList": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_w = ult.value.toolbarTips) == null ? void 0 : _w.orderedList,
"onClick": () => {
emitHandler("orderedList");
}
}, [createVNode(Icon, {
"name": "ordered-list"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_x = ult.value.toolbarTips) == null ? void 0 : _x.orderedList])]);
}
case "task": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_y = ult.value.toolbarTips) == null ? void 0 : _y.task,
"onClick": () => {
emitHandler("task");
}
}, [createVNode(Icon, {
"name": "task"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_z = ult.value.toolbarTips) == null ? void 0 : _z.task])]);
}
case "codeRow": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_A = ult.value.toolbarTips) == null ? void 0 : _A.codeRow,
"onClick": () => {
emitHandler("codeRow");
}
}, [createVNode(Icon, {
"name": "code-row"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_B = ult.value.toolbarTips) == null ? void 0 : _B.codeRow])]);
}
case "code": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_C = ult.value.toolbarTips) == null ? void 0 : _C.code,
"onClick": () => {
emitHandler("code");
}
}, [createVNode(Icon, {
"name": "code"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_D = ult.value.toolbarTips) == null ? void 0 : _D.code])]);
}
case "link": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_E = ult.value.toolbarTips) == null ? void 0 : _E.link,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
if (props2.insertLinkDirect) {
emitHandler("link");
} else {
modalData.type = "link";
modalData.linkVisible = true;
}
}
}, [createVNode(Icon, {
"name": "link"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_F = ult.value.toolbarTips) == null ? void 0 : _F.link])]);
}
case "image": {
return props2.noUploadImg ? createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_G = ult.value.toolbarTips) == null ? void 0 : _G.image,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
if (props2.insertLinkDirect) {
emitHandler("image");
} else {
modalData.type = "image";
modalData.linkVisible = true;
}
}
}, [createVNode(Icon, {
"name": "image"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_H = ult.value.toolbarTips) == null ? void 0 : _H.image])]) : createVNode(Dropdown, {
"relative": `#${wrapperId}`,
"visible": visible.image,
"onChange": (v) => {
visible.image = v;
},
"disabled": disabled == null ? void 0 : disabled.value,
"overlay": createVNode("ul", {
"class": `${prefix}-menu`,
"onClick": () => {
visible.image = false;
},
"role": "menu"
}, [createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-image`,
"onClick": () => {
if (props2.insertLinkDirect) {
emitHandler("image");
} else {
modalData.type = "image";
modalData.linkVisible = true;
}
},
"role": "menuitem",
"tabindex": "0"
}, [(_I = ult.value.imgTitleItem) == null ? void 0 : _I.link]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-image`,
"onClick": () => {
uploadRef.value.click();
},
"role": "menuitem",
"tabindex": "0"
}, [(_J = ult.value.imgTitleItem) == null ? void 0 : _J.upload]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-image`,
"onClick": () => {
modalData.clipVisible = true;
},
"role": "menuitem",
"tabindex": "0"
}, [(_K = ult.value.imgTitleItem) == null ? void 0 : _K.clip2upload])])
}, {
default: () => {
var _a2, _b2;
return [createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_a2 = ult.value.toolbarTips) == null ? void 0 : _a2.image
}, [createVNode(Icon, {
"name": "image"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_b2 = ult.value.toolbarTips) == null ? void 0 : _b2.image])])];
}
});
}
case "table": {
return createVNode(Dropdown, {
"relative": `#${wrapperId}`,
"visible": visible.table,
"onChange": (v) => {
visible.table = v;
},
"disabled": disabled == null ? void 0 : disabled.value,
"key": "bar-table",
"overlay": createVNode(TableShape, {
"tableShape": props2.tableShape,
"onSelected": (selectedShape) => {
emitHandler("table", {
selectedShape
});
}
}, null)
}, {
default: () => {
var _a2, _b2;
return [createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_a2 = ult.value.toolbarTips) == null ? void 0 : _a2.table
}, [createVNode(Icon, {
"name": "table"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_b2 = ult.value.toolbarTips) == null ? void 0 : _b2.table])])];
}
});
}
case "revoke": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_L = ult.value.toolbarTips) == null ? void 0 : _L.revoke,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
bus.emit(editorId, CTRL_Z);
}
}, [createVNode(Icon, {
"name": "revoke"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_M = ult.value.toolbarTips) == null ? void 0 : _M.revoke])]);
}
case "next": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_N = ult.value.toolbarTips) == null ? void 0 : _N.next,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
bus.emit(editorId, CTRL_SHIFT_Z);
}
}, [createVNode(Icon, {
"name": "next"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_O = ult.value.toolbarTips) == null ? void 0 : _O.next])]);
}
case "save": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_P = ult.value.toolbarTips) == null ? void 0 : _P.save,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
bus.emit(editorId, ON_SAVE);
}
}, [createVNode(Icon, {
"name": "save"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_Q = ult.value.toolbarTips) == null ? void 0 : _Q.save])]);
}
case "prettier": {
return !props2.noPrettier ? createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_R = ult.value.toolbarTips) == null ? void 0 : _R.prettier,
"onClick": () => {
emitHandler("prettier");
}
}, [createVNode(Icon, {
"name": "prettier"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_S = ult.value.toolbarTips) == null ? void 0 : _S.prettier])]) : "";
}
case "pageFullscreen": {
return !props2.setting.fullscreen && createVNode("div", {
"class": [`${prefix}-toolbar-item`, props2.setting.pageFullscreen && `${prefix}-toolbar-active`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_T = ult.value.toolbarTips) == null ? void 0 : _T.pageFullscreen,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
props2.updateSetting("pageFullscreen");
}
}, [createVNode(Icon, {
"name": props2.setting.pageFullscreen ? "minimize" : "maximize"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_U = ult.value.toolbarTips) == null ? void 0 : _U.pageFullscreen])]);
}
case "fullscreen": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, props2.setting.fullscreen && `${prefix}-toolbar-active`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_V = ult.value.toolbarTips) == null ? void 0 : _V.fullscreen,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
fullscreenHandler();
}
}, [createVNode(Icon, {
"name": props2.setting.fullscreen ? "fullscreen-exit" : "fullscreen"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_W = ult.value.toolbarTips) == null ? void 0 : _W.fullscreen])]);
}
case "preview": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, props2.setting.preview && `${prefix}-toolbar-active`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_X = ult.value.toolbarTips) == null ? void 0 : _X.preview,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
props2.updateSetting("preview");
}
}, [createVNode(Icon, {
"name": "preview"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_Y = ult.value.toolbarTips) == null ? void 0 : _Y.preview])]);
}
case "previewOnly": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, props2.setting.previewOnly && `${prefix}-toolbar-active`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_Z = ult.value.toolbarTips) == null ? void 0 : _Z.previewOnly,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
props2.updateSetting("previewOnly");
}
}, [createVNode(Icon, {
"name": "preview-only"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(__ = ult.value.toolbarTips) == null ? void 0 : __.previewOnly])]);
}
case "htmlPreview": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, props2.setting.htmlPreview && `${prefix}-toolbar-active`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_$ = ult.value.toolbarTips) == null ? void 0 : _$.htmlPreview,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
props2.updateSetting("htmlPreview");
}
}, [createVNode(Icon, {
"name": "preview-html"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_aa = ult.value.toolbarTips) == null ? void 0 : _aa.htmlPreview])]);
}
case "catalog": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, props2.catalogVisible && `${prefix}-toolbar-active`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_ba = ult.value.toolbarTips) == null ? void 0 : _ba.catalog,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
bus.emit(editorId, CHANGE_CATALOG_VISIBLE);
},
"key": "bar-catalog"
}, [createVNode(Icon, {
"name": "catalog"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_ca = ult.value.toolbarTips) == null ? void 0 : _ca.catalog])]);
}
case "github": {
return createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_da = ult.value.toolbarTips) == null ? void 0 : _da.github,
"onClick": () => {
if (disabled == null ? void 0 : disabled.value) {
return false;
}
linkTo("https://github.com/imzbf/md-editor-v3");
}
}, [createVNode(Icon, {
"name": "github"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_ea = ult.value.toolbarTips) == null ? void 0 : _ea.github])]);
}
case "mermaid": {
return createVNode(Dropdown, {
"relative": `#${wrapperId}`,
"visible": visible.mermaid,
"onChange": (v) => {
visible.mermaid = v;
},
"disabled": disabled == null ? void 0 : disabled.value,
"overlay": createVNode("ul", {
"class": `${prefix}-menu`,
"onClick": () => {
visible.mermaid = false;
},
"role": "menu"
}, [createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-mermaid`,
"onClick": () => {
emitHandler("flow");
},
"role": "menuitem",
"tabindex": "0"
}, [(_fa = ult.value.mermaid) == null ? void 0 : _fa.flow]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-mermaid`,
"onClick": () => {
emitHandler("sequence");
},
"role": "menuitem",
"tabindex": "0"
}, [(_ga = ult.value.mermaid) == null ? void 0 : _ga.sequence]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-mermaid`,
"onClick": () => {
emitHandler("gantt");
},
"role": "menuitem",
"tabindex": "0"
}, [(_ha = ult.value.mermaid) == null ? void 0 : _ha.gantt]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-mermaid`,
"onClick": () => {
emitHandler("class");
},
"role": "menuitem",
"tabindex": "0"
}, [(_ia = ult.value.mermaid) == null ? void 0 : _ia.class]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-mermaid`,
"onClick": () => {
emitHandler("state");
},
"role": "menuitem",
"tabindex": "0"
}, [(_ja = ult.value.mermaid) == null ? void 0 : _ja.state]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-mermaid`,
"onClick": () => {
emitHandler("pie");
},
"role": "menuitem",
"tabindex": "0"
}, [(_ka = ult.value.mermaid) == null ? void 0 : _ka.pie]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-mermaid`,
"onClick": () => {
emitHandler("relationship");
},
"role": "menuitem",
"tabindex": "0"
}, [(_la = ult.value.mermaid) == null ? void 0 : _la.relationship]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-mermaid`,
"onClick": () => {
emitHandler("journey");
},
"role": "menuitem",
"tabindex": "0"
}, [(_ma = ult.value.mermaid) == null ? void 0 : _ma.journey])]),
"key": "bar-mermaid"
}, {
default: () => {
var _a2, _b2;
return [createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_a2 = ult.value.toolbarTips) == null ? void 0 : _a2.mermaid
}, [createVNode(Icon, {
"name": "mermaid"
}, null), props2.showToolbarName && createVNode("div", {
"class": `${prefix}-toolbar-item-name`
}, [(_b2 = ult.value.toolbarTips) == null ? void 0 : _b2.mermaid])])];
}
});
}
case "katex": {
return createVNode(Dropdown, {
"relative": `#${wrapperId}`,
"visible": visible.katex,
"onChange": (v) => {
visible.katex = v;
},
"disabled": disabled == null ? void 0 : disabled.value,
"overlay": createVNode("ul", {
"class": `${prefix}-menu`,
"onClick": () => {
visible.katex = false;
},
"role": "menu"
}, [createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-katex`,
"onClick": () => {
emitHandler("katexInline");
},
"role": "menuitem",
"tabindex": "0"
}, [(_na = ult.value.katex) == null ? void 0 : _na.inline]), createVNode("li", {
"class": `${prefix}-menu-item ${prefix}-menu-item-katex`,
"onClick": () => {
emitHandler("katexBlock");
},
"role": "menuitem",
"tabindex": "0"
}, [(_oa = ult.value.katex) == null ? void 0 : _oa.block])]),
"key": "bar-katex"
}, {
default: () => {
var _a2, _b2;
return [createVNode("div", {
"class": [`${prefix}-toolbar-item`, (disabled == null ? void 0 : disabled.value) && `${prefix}-disabled`],
"title": (_a2 = ult.value.toolbarTips) == null ? void 0 : _a2.katex
}, [createVNode(Icon, {
"name": "formula"
}, null), props2.showToolbarName && createVNode