@jenkin-a/jeditor 1.0.0

package/dist/jeditor.css

@@ -0,0 +1,2 @@
+:root{--je-blue:#0052d9;--je-blue-active:#e6f0ff;--je-divider:#e0e0e0;--je-hover:#eee;--je-radius:4px}.je-container{-webkit-font-smoothing:antialiased;background:#fff;border:1px solid #e6e6e6;border-radius:4px;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,PingFang SC,Microsoft YaHei,sans-serif;display:flex;overflow:hidden}.je-toolbar-row{flex-shrink:0;align-items:center;gap:1px;padding:0 12px;display:flex}.je-toolbar-row--primary{background:#fff;height:44px}.je-toolbar-row--secondary{background:#f3f4f6;border-radius:6px;height:42px;margin:0 8px 4px}.je-spacer{flex:1}.v-divider{background-color:var(--je-divider);flex-shrink:0;width:1px;height:16px;margin:0 6px}.tool-btn,.tool-btn-text,.tool-btn-arrow-down{border-radius:var(--je-radius);color:#444;cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;gap:2px;line-height:1;transition:background-color .1s;display:inline-flex}.tool-btn{width:28px;height:28px;padding:0;font-size:13px}.tool-btn:hover{background-color:var(--je-hover)}.tool-btn-text{white-space:nowrap;height:28px;padding:0 6px;font-size:13px}.tool-btn-text:hover{background-color:var(--je-hover)}.tool-btn-arrow-down{color:#999;width:16px;height:28px;padding:0}.tool-btn-arrow-down:hover{background-color:var(--je-hover)}.tool-btn svg,.tool-btn-text svg,.tool-btn-arrow-down svg{flex-shrink:0;width:20px;height:20px}.tool-btn-text svg,.tool-btn-arrow-down svg{width:14px;height:14px}.je-color-group{flex-shrink:0;align-items:center;display:inline-flex}.je-color-inner{flex-direction:column;align-items:center;gap:1px;line-height:1;display:flex}.je-color-char{font-size:14px;font-weight:600}.je-color-bar{border-radius:1px;width:16px;height:3px}.tool-btn.is-active{background-color:var(--je-blue-active);color:var(--je-blue)}.tool-btn.is-disabled{opacity:.35;pointer-events:none;cursor:default}.je-editor-area{flex-direction:column;flex:1;display:flex}.je-editor-area .tiptap{cursor:text;color:#333;outline:none;flex:1;min-height:700px;padding:32px 60px;font-size:14px;line-height:1.7}.je-editor-area .tiptap h1{margin-bottom:.5em;font-size:2em;font-weight:700}.je-editor-area .tiptap h2{margin-bottom:.5em;font-size:1.5em;font-weight:700}.je-editor-area .tiptap h3{margin-bottom:.5em;font-size:1.25em;font-weight:700}.je-editor-area .tiptap p{margin-bottom:.8em;line-height:1.7}.je-editor-area .tiptap ul{margin-bottom:.8em;padding-left:1.5em;list-style-type:disc}.je-editor-area .tiptap ol{margin-bottom:.8em;padding-left:1.5em;list-style-type:decimal}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:#ddd;border-radius:10px}.image-node-wrapper{cursor:default;-webkit-user-select:none;user-select:none;line-height:0;display:inline-block;position:relative}.image-node-wrapper img{border:2px solid #0000;border-radius:2px;max-width:100%;transition:border-color .15s;display:block}.image-node-wrapper.is-selected img{border-color:var(--je-blue)}.image-resize-handle{background:var(--je-blue);z-index:10;border-radius:50%;width:10px;height:10px;display:none;position:absolute}.image-node-wrapper.is-selected .image-resize-handle{display:block}.image-resize-handle[data-corner=tl]{cursor:nwse-resize;top:-5px;left:-5px}.image-resize-handle[data-corner=tr]{cursor:nesw-resize;top:-5px;right:-5px}.image-resize-handle[data-corner=bl]{cursor:nesw-resize;bottom:-5px;left:-5px}.image-resize-handle[data-corner=br]{cursor:nwse-resize;bottom:-5px;right:-5px}
+/*$vite$:1*/

package/dist/jeditor.es.js

@@ -0,0 +1,523 @@
+import e from "@tiptap/extension-underline";
+import { Editor as t, Node as n, mergeAttributes as r } from "@tiptap/core";
+import i from "@tiptap/starter-kit";
+//#region src/core/plugin-manager.js
+var a = class {
+	constructor() {
+		this._plugins = /* @__PURE__ */ new Map();
+	}
+	register(e) {
+		if (!e.name) throw Error("[JEditor] Plugin 缺少 name 字段");
+		this._plugins.set(e.name, e);
+	}
+	registerAll(e) {
+		e.forEach((e) => this.register(e));
+	}
+	get(e) {
+		return this._plugins.get(e);
+	}
+	getAll() {
+		return Array.from(this._plugins.values());
+	}
+	getTiptapExtensions() {
+		return this.getAll().filter((e) => e.tiptapExtension != null).map((e) => e.tiptapExtension);
+	}
+	initAll(e, t = {}) {
+		this.getAll().forEach((n) => {
+			typeof n.init == "function" && n.init(e, t[n.name] || {});
+		});
+	}
+	destroyAll() {
+		this.getAll().forEach((e) => {
+			typeof e.destroy == "function" && e.destroy();
+		}), this._plugins.clear();
+	}
+}, o = {
+	placeholder: "开始在此编写文档...",
+	toolbar: [[
+		"undo",
+		"redo",
+		"|",
+		"insertImage",
+		"insert",
+		"|",
+		"attachment",
+		"table",
+		"link",
+		"mention",
+		"|",
+		"more",
+		"->",
+		"fullscreen"
+	], /* @__PURE__ */ "heading.|.fontFamily.|.fontSizeDown.fontSize.fontSizeUp.|.bold.italic.underline.strike.clearFormat.|.textColor.highlight.|.bulletList.orderedList.alignLeft.alignCenter.alignRight.lineHeight.|.blockquote.codeBlock".split(".")],
+	image: {
+		maxSize: 20 * 1024 * 1024,
+		uploadUrl: null,
+		accept: "image/png,image/jpeg,image/gif,image/webp,image/svg+xml"
+	}
+};
+function s(e = {}) {
+	let t = {
+		...o,
+		...e
+	};
+	return e.image && (t.image = {
+		...o.image,
+		...e.image
+	}), t;
+}
+//#endregion
+//#region src/plugins/bold.js
+var c = {
+	name: "bold",
+	toolbar: {
+		text: "B",
+		title: "粗体",
+		shortcut: "Ctrl+B",
+		className: "font-bold"
+	},
+	tiptapExtension: null,
+	command: (e) => e.chain().focus().toggleBold().run(),
+	isActive: (e) => e.isActive("bold")
+}, l = {
+	name: "italic",
+	toolbar: {
+		text: "I",
+		title: "斜体",
+		shortcut: "Ctrl+I",
+		className: "italic"
+	},
+	tiptapExtension: null,
+	command: (e) => e.chain().focus().toggleItalic().run(),
+	isActive: (e) => e.isActive("italic")
+}, u = {
+	name: "underline",
+	toolbar: {
+		text: "U",
+		title: "下划线",
+		shortcut: "Ctrl+U",
+		className: "underline"
+	},
+	tiptapExtension: e,
+	command: (e) => e.chain().focus().toggleUnderline().run(),
+	isActive: (e) => e.isActive("underline")
+}, d = {
+	name: "strike",
+	toolbar: {
+		text: "S",
+		title: "删除线",
+		shortcut: "Ctrl+Shift+X",
+		className: "line-through text-[13px]"
+	},
+	tiptapExtension: null,
+	command: (e) => e.chain().focus().toggleStrike().run(),
+	isActive: (e) => e.isActive("strike")
+}, f = {
+	name: "undo",
+	toolbar: {
+		icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"currentColor\">\n    <path d=\"M6.25 3.75 2.5 6.25l3.75 2.5V6.875h5.938a4.062 4.062 0 1 1 0 8.125H8.125a.625.625 0 1 0 0 1.25h4.063a5.313 5.313 0 0 0 0-10.625H6.25z\"></path>\n</svg>",
+		title: "撤销",
+		shortcut: "Ctrl+Z"
+	},
+	tiptapExtension: null,
+	command: (e) => e.chain().focus().undo().run(),
+	isActive: () => !1,
+	isDisabled: (e) => !e.can().undo()
+}, p = {
+	name: "redo",
+	toolbar: {
+		icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"currentColor\" style=\"transform:scaleX(-1)\">\n    <path d=\"M6.25 3.75 2.5 6.25l3.75 2.5V6.875h5.938a4.062 4.062 0 1 1 0 8.125H8.125a.625.625 0 1 0 0 1.25h4.063a5.313 5.313 0 0 0 0-10.625H6.25z\"></path>\n</svg>",
+		title: "重做",
+		shortcut: "Ctrl+Shift+Z"
+	},
+	tiptapExtension: null,
+	command: (e) => e.chain().focus().redo().run(),
+	isActive: () => !1,
+	isDisabled: (e) => !e.can().redo()
+}, m = {
+	name: "clearFormat",
+	toolbar: {
+		icon: "slash",
+		title: "清除格式"
+	},
+	tiptapExtension: null,
+	command: (e) => e.chain().focus().unsetAllMarks().run(),
+	isActive: () => !1
+}, h = {
+	name: "formatPainter",
+	toolbar: {
+		icon: "edit-3",
+		title: "格式刷"
+	},
+	tiptapExtension: null,
+	command: () => console.log("[JEditor] 格式刷功能待实现"),
+	isActive: () => !1
+}, g = class {
+	constructor({ node: e, editor: t, getPos: n }) {
+		this.node = e, this.editor = t, this.getPos = n, this._startX = 0, this._startWidth = 0, this._pendingWidth = null, this._activeCorner = null, this.dom = document.createElement("span"), this.dom.className = "image-node-wrapper", this.dom.contentEditable = "false", this.img = document.createElement("img"), this.img.src = e.attrs.src, this.img.alt = e.attrs.alt || "", this.img.draggable = !1, e.attrs.width && (this.img.style.width = e.attrs.width + "px"), this.dom.appendChild(this.img);
+		for (let e of [
+			"tl",
+			"tr",
+			"bl",
+			"br"
+		]) {
+			let t = document.createElement("span");
+			t.className = "image-resize-handle", t.dataset.corner = e, t.addEventListener("mousedown", (t) => this._onHandleMouseDown(t, e)), this.dom.appendChild(t);
+		}
+		this.dom.addEventListener("click", (e) => {
+			e.stopPropagation();
+			let t = this.getPos();
+			typeof t == "number" && this.editor.commands.setNodeSelection(t);
+		}), this._boundMouseMove = this._handleMouseMove.bind(this), this._boundMouseUp = this._handleMouseUp.bind(this);
+	}
+	selectNode() {
+		this.dom.classList.add("is-selected");
+	}
+	deselectNode() {
+		this.dom.classList.remove("is-selected");
+	}
+	_onHandleMouseDown(e, t) {
+		e.preventDefault(), e.stopPropagation(), this._activeCorner = t, this._startX = e.clientX, this._startWidth = this.img.getBoundingClientRect().width, document.addEventListener("mousemove", this._boundMouseMove), document.addEventListener("mouseup", this._boundMouseUp), document.body.style.userSelect = "none";
+	}
+	_handleMouseMove(e) {
+		let t = e.clientX - this._startX, n = this._activeCorner.includes("r") ? this._startWidth + t : this._startWidth - t;
+		n = Math.max(50, Math.round(n)), this.img.style.width = n + "px", this._pendingWidth = n;
+	}
+	_handleMouseUp() {
+		if (document.removeEventListener("mousemove", this._boundMouseMove), document.removeEventListener("mouseup", this._boundMouseUp), document.body.style.userSelect = "", this._pendingWidth !== null) {
+			let e = this.getPos();
+			typeof e == "number" && this.editor.view.dispatch(this.editor.state.tr.setNodeMarkup(e, null, {
+				...this.node.attrs,
+				width: this._pendingWidth
+			})), this._pendingWidth = null;
+		}
+	}
+	update(e) {
+		return e.type === this.node.type ? (this.node = e, this.img.src = e.attrs.src, this.img.alt = e.attrs.alt || "", e.attrs.width ? this.img.style.width = e.attrs.width + "px" : this.img.style.width = "", !0) : !1;
+	}
+	destroy() {
+		document.removeEventListener("mousemove", this._boundMouseMove), document.removeEventListener("mouseup", this._boundMouseUp), document.body.style.userSelect = "";
+	}
+}, _ = n.create({
+	name: "image",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	draggable: !0,
+	addAttributes() {
+		return {
+			src: { default: null },
+			alt: { default: null },
+			width: { default: null }
+		};
+	},
+	parseHTML() {
+		return [{ tag: "img[src]" }];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		let t = { ...e };
+		return t.width && (t.style = `width:${t.width}px`), delete t.width, ["img", r(t)];
+	},
+	addNodeView() {
+		return (e) => new g(e);
+	},
+	addCommands() {
+		return { setImage: (e) => ({ commands: t }) => t.insertContent({
+			type: this.name,
+			attrs: e
+		}) };
+	}
+}), v = null, y = null, b = {};
+function x(e) {
+	if (!e || !e.type.startsWith("image/")) return;
+	let t = b.maxSize || 20 * 1024 * 1024;
+	if (e.size > t) {
+		alert(`图片大小不能超过 ${Math.round(t / 1024 / 1024)}MB`);
+		return;
+	}
+	let n = new FileReader();
+	n.onload = (e) => {
+		y.chain().focus().setImage({ src: e.target.result }).run();
+	}, n.readAsDataURL(e);
+}
+function S(e) {
+	let t = e.clipboardData?.items;
+	if (t) {
+		for (let n of t) if (n.type.startsWith("image/")) {
+			e.preventDefault(), x(n.getAsFile());
+			return;
+		}
+	}
+}
+var C = {
+	name: "insertImage",
+	toolbar: {
+		icon: "image",
+		title: "插入图片"
+	},
+	tiptapExtension: _,
+	command: () => {
+		v && v.click();
+	},
+	isActive: () => !1,
+	init(e, t) {
+		y = e, b = t, v = document.createElement("input"), v.type = "file", v.accept = t.accept || "image/png,image/jpeg,image/gif,image/webp,image/svg+xml", v.style.display = "none", document.body.appendChild(v), v.addEventListener("change", () => {
+			let e = v.files[0];
+			e && x(e), v.value = "";
+		}), e.view.dom.addEventListener("paste", S);
+	},
+	destroy() {
+		v &&= (v.remove(), null), y &&= (y.view.dom.removeEventListener("paste", S), null);
+	}
+};
+//#endregion
+//#region src/plugins/placeholders.js
+function w(e, t) {
+	return {
+		name: e,
+		toolbar: t,
+		tiptapExtension: null,
+		command: () => console.log(`[JEditor] ${t.title} — 待实现`),
+		isActive: () => !1
+	};
+}
+//#endregion
+//#region src/plugins/index.js
+var T = [
+	f,
+	p,
+	c,
+	l,
+	u,
+	d,
+	m,
+	h,
+	C,
+	...[
+		w("insert", {
+			text: "插入",
+			title: "插入",
+			dropdown: !0
+		}),
+		w("attachment", {
+			icon: "paperclip",
+			title: "附件"
+		}),
+		w("table", {
+			icon: "grid",
+			title: "表格"
+		}),
+		w("link", {
+			icon: "link",
+			title: "链接"
+		}),
+		w("mention", {
+			icon: "at-sign",
+			title: "提及"
+		}),
+		w("more", {
+			icon: "more-horizontal",
+			title: "更多"
+		}),
+		w("fullscreen", {
+			icon: "maximize-2",
+			title: "全屏"
+		}),
+		w("heading", {
+			text: "正文",
+			title: "段落样式",
+			dropdown: !0
+		}),
+		w("fontFamily", {
+			text: "微软雅黑",
+			title: "字体",
+			dropdown: !0
+		}),
+		w("fontSizeDown", {
+			icon: "minus",
+			title: "减小字号"
+		}),
+		w("fontSize", {
+			text: "14",
+			title: "字号"
+		}),
+		w("fontSizeUp", {
+			icon: "plus",
+			title: "增大字号"
+		}),
+		w("textColor", {
+			type: "color",
+			text: "A",
+			colorBar: "#ef4444",
+			title: "文字颜色"
+		}),
+		w("highlight", {
+			type: "color",
+			text: "笔",
+			colorBar: "#facc15",
+			title: "背景颜色"
+		}),
+		w("bulletList", {
+			icon: "list",
+			title: "无序列表"
+		}),
+		w("orderedList", {
+			icon: "hash",
+			title: "有序列表"
+		}),
+		w("alignLeft", {
+			icon: "align-left",
+			title: "左对齐"
+		}),
+		w("alignCenter", {
+			icon: "align-center",
+			title: "居中"
+		}),
+		w("alignRight", {
+			icon: "align-right",
+			title: "右对齐"
+		}),
+		w("lineHeight", {
+			text: "1.5",
+			title: "行间距"
+		}),
+		w("blockquote", {
+			icon: "message-square",
+			title: "引用"
+		}),
+		w("codeBlock", {
+			text: "</>",
+			title: "代码块",
+			className: "font-mono font-bold text-indigo-600"
+		})
+	]
+];
+//#endregion
+//#region src/editor/index.js
+function E(e, n = [], r = {}) {
+	return new t({
+		element: e,
+		extensions: [i.configure({ history: !0 }), ...n],
+		editorProps: { attributes: {
+			class: "tiptap-editor",
+			spellcheck: "false"
+		} },
+		content: r.content || `<p>${r.placeholder || "开始在此编写文档..."}</p>`
+	});
+}
+//#endregion
+//#region src/toolbar/ui.js
+var D = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>", O = ["je-toolbar-row je-toolbar-row--primary", "je-toolbar-row je-toolbar-row--secondary"];
+function k(e) {
+	return e ? e.startsWith("<") ? e : window.feather?.icons[e] ? feather.icons[e].toSvg({
+		width: 20,
+		height: 20
+	}) : null : null;
+}
+function A(e) {
+	let t = e.toolbar, n = t.dropdown === !0;
+	if (t.type === "color") {
+		let n = document.createElement("div");
+		n.className = "je-color-group";
+		let r = document.createElement("button");
+		r.className = "tool-btn", r.dataset.command = e.name, r.title = t.title || "", r.innerHTML = `<span class="je-color-inner"><span class="je-color-char">${t.text || "A"}</span><span class="je-color-bar" style="background:${t.colorBar || "#000"}"></span></span>`;
+		let i = document.createElement("button");
+		return i.className = "tool-btn-arrow-down", i.innerHTML = D, n.append(r, i), n;
+	}
+	if (n) {
+		let n = document.createElement("button");
+		return n.className = "tool-btn-text", n.dataset.command = e.name, n.title = t.title || "", n.innerHTML = `${t.text || ""} ${D}`, n;
+	}
+	let r = document.createElement("button");
+	r.className = "tool-btn", t.className && (r.className += " " + t.className), r.dataset.command = e.name, r.title = t.shortcut ? `${t.title} (${t.shortcut})` : t.title || "";
+	let i = k(t.icon);
+	return i ? r.innerHTML = i : r.textContent = t.text || "", r;
+}
+function j() {
+	let e = document.createElement("div");
+	return e.className = "v-divider", e;
+}
+function M() {
+	let e = document.createElement("div");
+	return e.className = "je-spacer", e;
+}
+function N(e, t) {
+	let n = document.createDocumentFragment();
+	return e.toolbar.forEach((e, r) => {
+		let i = document.createElement("div");
+		i.className = O[r] || O[0], e.forEach((e) => {
+			if (e === "|") i.appendChild(j());
+			else if (e === "->") i.appendChild(M());
+			else {
+				let n = t.get(e);
+				n && i.appendChild(A(n));
+			}
+		}), n.appendChild(i);
+	}), n;
+}
+function P(e, t, n) {
+	e.querySelectorAll("[data-command]").forEach((e) => {
+		e.addEventListener("click", () => {
+			let r = n.get(e.dataset.command);
+			r && r.command(t);
+		});
+	});
+	let r = n.getAll();
+	function i() {
+		r.forEach((n) => {
+			let r = e.querySelector(`[data-command="${n.name}"]`);
+			r && (typeof n.isActive == "function" && r.classList.toggle("is-active", n.isActive(t)), typeof n.isDisabled == "function" && r.classList.toggle("is-disabled", n.isDisabled(t)));
+		});
+	}
+	t.on("selectionUpdate", i), t.on("update", i), i();
+}
+//#endregion
+//#region src/jeditor.js
+var F = class e {
+	static create(t, n = {}) {
+		let r = typeof t == "string" ? document.querySelector(t) : t;
+		if (!r) throw Error(`[JEditor] 找不到容器元素: ${t}`);
+		return new e(r, n);
+	}
+	constructor(e, t = {}) {
+		this._container = e, this._config = s(t), this._pm = new a(), this._editor = null, this._bootstrap();
+	}
+	_bootstrap() {
+		let { _container: e, _config: t, _pm: n } = this;
+		e.classList.add("je-container"), n.registerAll(T), e.appendChild(N(t, n));
+		let r = document.createElement("div");
+		r.className = "je-editor-area", e.appendChild(r), this._editor = E(r, n.getTiptapExtensions(), t), n.initAll(this._editor, t), P(e, this._editor, n);
+	}
+	getHTML() {
+		return this._editor.getHTML();
+	}
+	getJSON() {
+		return this._editor.getJSON();
+	}
+	getText() {
+		return this._editor.getText();
+	}
+	setContent(e, t = !1) {
+		this._editor.commands.setContent(e, t);
+	}
+	isEmpty() {
+		return this._editor.isEmpty;
+	}
+	focus() {
+		this._editor.commands.focus();
+	}
+	on(e, t) {
+		return this._editor.on(e, t), this;
+	}
+	off(e, t) {
+		return this._editor.off(e, t), this;
+	}
+	get tiptap() {
+		return this._editor;
+	}
+	destroy() {
+		this._pm.destroyAll(), this._editor.destroy(), this._container.innerHTML = "", this._container.classList.remove("je-container"), this._editor = null;
+	}
+};
+//#endregion
+export { F as JEditor };

package/dist/jeditor.umd.js

@@ -0,0 +1,5 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`@tiptap/extension-underline`),require(`@tiptap/core`),require(`@tiptap/starter-kit`)):typeof define==`function`&&define.amd?define([`exports`,`@tiptap/extension-underline`,`@tiptap/core`,`@tiptap/starter-kit`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.JEditor={},e.TiptapUnderline,e.TiptapCore,e.StarterKit))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,u=i.length,d;c<u;c++)d=i[c],!l.call(e,d)&&d!==n&&a(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=o(t,d))||r.enumerable});return e},d=(e,t,n)=>(n=e==null?{}:i(c(e)),u(t||!e||!e.__esModule?a(n,`default`,{value:e,enumerable:!0}):n,e));t=d(t),r=d(r);var f=class{constructor(){this._plugins=new Map}register(e){if(!e.name)throw Error(`[JEditor] Plugin 缺少 name 字段`);this._plugins.set(e.name,e)}registerAll(e){e.forEach(e=>this.register(e))}get(e){return this._plugins.get(e)}getAll(){return Array.from(this._plugins.values())}getTiptapExtensions(){return this.getAll().filter(e=>e.tiptapExtension!=null).map(e=>e.tiptapExtension)}initAll(e,t={}){this.getAll().forEach(n=>{typeof n.init==`function`&&n.init(e,t[n.name]||{})})}destroyAll(){this.getAll().forEach(e=>{typeof e.destroy==`function`&&e.destroy()}),this._plugins.clear()}},p={placeholder:`开始在此编写文档...`,toolbar:[[`undo`,`redo`,`|`,`insertImage`,`insert`,`|`,`attachment`,`table`,`link`,`mention`,`|`,`more`,`->`,`fullscreen`],`heading.|.fontFamily.|.fontSizeDown.fontSize.fontSizeUp.|.bold.italic.underline.strike.clearFormat.|.textColor.highlight.|.bulletList.orderedList.alignLeft.alignCenter.alignRight.lineHeight.|.blockquote.codeBlock`.split(`.`)],image:{maxSize:20*1024*1024,uploadUrl:null,accept:`image/png,image/jpeg,image/gif,image/webp,image/svg+xml`}};function m(e={}){let t={...p,...e};return e.image&&(t.image={...p.image,...e.image}),t}var h={name:`bold`,toolbar:{text:`B`,title:`粗体`,shortcut:`Ctrl+B`,className:`font-bold`},tiptapExtension:null,command:e=>e.chain().focus().toggleBold().run(),isActive:e=>e.isActive(`bold`)},g={name:`italic`,toolbar:{text:`I`,title:`斜体`,shortcut:`Ctrl+I`,className:`italic`},tiptapExtension:null,command:e=>e.chain().focus().toggleItalic().run(),isActive:e=>e.isActive(`italic`)},_={name:`underline`,toolbar:{text:`U`,title:`下划线`,shortcut:`Ctrl+U`,className:`underline`},tiptapExtension:t.default,command:e=>e.chain().focus().toggleUnderline().run(),isActive:e=>e.isActive(`underline`)},v={name:`strike`,toolbar:{text:`S`,title:`删除线`,shortcut:`Ctrl+Shift+X`,className:`line-through text-[13px]`},tiptapExtension:null,command:e=>e.chain().focus().toggleStrike().run(),isActive:e=>e.isActive(`strike`)},y={name:`undo`,toolbar:{icon:`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path d="M6.25 3.75 2.5 6.25l3.75 2.5V6.875h5.938a4.062 4.062 0 1 1 0 8.125H8.125a.625.625 0 1 0 0 1.25h4.063a5.313 5.313 0 0 0 0-10.625H6.25z"></path>
+</svg>`,title:`撤销`,shortcut:`Ctrl+Z`},tiptapExtension:null,command:e=>e.chain().focus().undo().run(),isActive:()=>!1,isDisabled:e=>!e.can().undo()},b={name:`redo`,toolbar:{icon:`<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" style="transform:scaleX(-1)">
+    <path d="M6.25 3.75 2.5 6.25l3.75 2.5V6.875h5.938a4.062 4.062 0 1 1 0 8.125H8.125a.625.625 0 1 0 0 1.25h4.063a5.313 5.313 0 0 0 0-10.625H6.25z"></path>
+</svg>`,title:`重做`,shortcut:`Ctrl+Shift+Z`},tiptapExtension:null,command:e=>e.chain().focus().redo().run(),isActive:()=>!1,isDisabled:e=>!e.can().redo()},x={name:`clearFormat`,toolbar:{icon:`slash`,title:`清除格式`},tiptapExtension:null,command:e=>e.chain().focus().unsetAllMarks().run(),isActive:()=>!1},S={name:`formatPainter`,toolbar:{icon:`edit-3`,title:`格式刷`},tiptapExtension:null,command:()=>console.log(`[JEditor] 格式刷功能待实现`),isActive:()=>!1},C=class{constructor({node:e,editor:t,getPos:n}){this.node=e,this.editor=t,this.getPos=n,this._startX=0,this._startWidth=0,this._pendingWidth=null,this._activeCorner=null,this.dom=document.createElement(`span`),this.dom.className=`image-node-wrapper`,this.dom.contentEditable=`false`,this.img=document.createElement(`img`),this.img.src=e.attrs.src,this.img.alt=e.attrs.alt||``,this.img.draggable=!1,e.attrs.width&&(this.img.style.width=e.attrs.width+`px`),this.dom.appendChild(this.img);for(let e of[`tl`,`tr`,`bl`,`br`]){let t=document.createElement(`span`);t.className=`image-resize-handle`,t.dataset.corner=e,t.addEventListener(`mousedown`,t=>this._onHandleMouseDown(t,e)),this.dom.appendChild(t)}this.dom.addEventListener(`click`,e=>{e.stopPropagation();let t=this.getPos();typeof t==`number`&&this.editor.commands.setNodeSelection(t)}),this._boundMouseMove=this._handleMouseMove.bind(this),this._boundMouseUp=this._handleMouseUp.bind(this)}selectNode(){this.dom.classList.add(`is-selected`)}deselectNode(){this.dom.classList.remove(`is-selected`)}_onHandleMouseDown(e,t){e.preventDefault(),e.stopPropagation(),this._activeCorner=t,this._startX=e.clientX,this._startWidth=this.img.getBoundingClientRect().width,document.addEventListener(`mousemove`,this._boundMouseMove),document.addEventListener(`mouseup`,this._boundMouseUp),document.body.style.userSelect=`none`}_handleMouseMove(e){let t=e.clientX-this._startX,n=this._activeCorner.includes(`r`)?this._startWidth+t:this._startWidth-t;n=Math.max(50,Math.round(n)),this.img.style.width=n+`px`,this._pendingWidth=n}_handleMouseUp(){if(document.removeEventListener(`mousemove`,this._boundMouseMove),document.removeEventListener(`mouseup`,this._boundMouseUp),document.body.style.userSelect=``,this._pendingWidth!==null){let e=this.getPos();typeof e==`number`&&this.editor.view.dispatch(this.editor.state.tr.setNodeMarkup(e,null,{...this.node.attrs,width:this._pendingWidth})),this._pendingWidth=null}}update(e){return e.type===this.node.type?(this.node=e,this.img.src=e.attrs.src,this.img.alt=e.attrs.alt||``,e.attrs.width?this.img.style.width=e.attrs.width+`px`:this.img.style.width=``,!0):!1}destroy(){document.removeEventListener(`mousemove`,this._boundMouseMove),document.removeEventListener(`mouseup`,this._boundMouseUp),document.body.style.userSelect=``}},w=n.Node.create({name:`image`,group:`inline`,inline:!0,atom:!0,draggable:!0,addAttributes(){return{src:{default:null},alt:{default:null},width:{default:null}}},parseHTML(){return[{tag:`img[src]`}]},renderHTML({HTMLAttributes:e}){let t={...e};return t.width&&(t.style=`width:${t.width}px`),delete t.width,[`img`,(0,n.mergeAttributes)(t)]},addNodeView(){return e=>new C(e)},addCommands(){return{setImage:e=>({commands:t})=>t.insertContent({type:this.name,attrs:e})}}}),T=null,E=null,D={};function O(e){if(!e||!e.type.startsWith(`image/`))return;let t=D.maxSize||20*1024*1024;if(e.size>t){alert(`图片大小不能超过 ${Math.round(t/1024/1024)}MB`);return}let n=new FileReader;n.onload=e=>{E.chain().focus().setImage({src:e.target.result}).run()},n.readAsDataURL(e)}function k(e){let t=e.clipboardData?.items;if(t){for(let n of t)if(n.type.startsWith(`image/`)){e.preventDefault(),O(n.getAsFile());return}}}var A={name:`insertImage`,toolbar:{icon:`image`,title:`插入图片`},tiptapExtension:w,command:()=>{T&&T.click()},isActive:()=>!1,init(e,t){E=e,D=t,T=document.createElement(`input`),T.type=`file`,T.accept=t.accept||`image/png,image/jpeg,image/gif,image/webp,image/svg+xml`,T.style.display=`none`,document.body.appendChild(T),T.addEventListener(`change`,()=>{let e=T.files[0];e&&O(e),T.value=``}),e.view.dom.addEventListener(`paste`,k)},destroy(){T&&=(T.remove(),null),E&&=(E.view.dom.removeEventListener(`paste`,k),null)}};function j(e,t){return{name:e,toolbar:t,tiptapExtension:null,command:()=>console.log(`[JEditor] ${t.title} — 待实现`),isActive:()=>!1}}var M=[y,b,h,g,_,v,x,S,A,...[j(`insert`,{text:`插入`,title:`插入`,dropdown:!0}),j(`attachment`,{icon:`paperclip`,title:`附件`}),j(`table`,{icon:`grid`,title:`表格`}),j(`link`,{icon:`link`,title:`链接`}),j(`mention`,{icon:`at-sign`,title:`提及`}),j(`more`,{icon:`more-horizontal`,title:`更多`}),j(`fullscreen`,{icon:`maximize-2`,title:`全屏`}),j(`heading`,{text:`正文`,title:`段落样式`,dropdown:!0}),j(`fontFamily`,{text:`微软雅黑`,title:`字体`,dropdown:!0}),j(`fontSizeDown`,{icon:`minus`,title:`减小字号`}),j(`fontSize`,{text:`14`,title:`字号`}),j(`fontSizeUp`,{icon:`plus`,title:`增大字号`}),j(`textColor`,{type:`color`,text:`A`,colorBar:`#ef4444`,title:`文字颜色`}),j(`highlight`,{type:`color`,text:`笔`,colorBar:`#facc15`,title:`背景颜色`}),j(`bulletList`,{icon:`list`,title:`无序列表`}),j(`orderedList`,{icon:`hash`,title:`有序列表`}),j(`alignLeft`,{icon:`align-left`,title:`左对齐`}),j(`alignCenter`,{icon:`align-center`,title:`居中`}),j(`alignRight`,{icon:`align-right`,title:`右对齐`}),j(`lineHeight`,{text:`1.5`,title:`行间距`}),j(`blockquote`,{icon:`message-square`,title:`引用`}),j(`codeBlock`,{text:`</>`,title:`代码块`,className:`font-mono font-bold text-indigo-600`})]];function N(e,t=[],i={}){return new n.Editor({element:e,extensions:[r.default.configure({history:!0}),...t],editorProps:{attributes:{class:`tiptap-editor`,spellcheck:`false`}},content:i.content||`<p>${i.placeholder||`开始在此编写文档...`}</p>`})}var P=`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>`,F=[`je-toolbar-row je-toolbar-row--primary`,`je-toolbar-row je-toolbar-row--secondary`];function I(e){return e?e.startsWith(`<`)?e:window.feather?.icons[e]?feather.icons[e].toSvg({width:20,height:20}):null:null}function L(e){let t=e.toolbar,n=t.dropdown===!0;if(t.type===`color`){let n=document.createElement(`div`);n.className=`je-color-group`;let r=document.createElement(`button`);r.className=`tool-btn`,r.dataset.command=e.name,r.title=t.title||``,r.innerHTML=`<span class="je-color-inner"><span class="je-color-char">${t.text||`A`}</span><span class="je-color-bar" style="background:${t.colorBar||`#000`}"></span></span>`;let i=document.createElement(`button`);return i.className=`tool-btn-arrow-down`,i.innerHTML=P,n.append(r,i),n}if(n){let n=document.createElement(`button`);return n.className=`tool-btn-text`,n.dataset.command=e.name,n.title=t.title||``,n.innerHTML=`${t.text||``} ${P}`,n}let r=document.createElement(`button`);r.className=`tool-btn`,t.className&&(r.className+=` `+t.className),r.dataset.command=e.name,r.title=t.shortcut?`${t.title} (${t.shortcut})`:t.title||``;let i=I(t.icon);return i?r.innerHTML=i:r.textContent=t.text||``,r}function R(){let e=document.createElement(`div`);return e.className=`v-divider`,e}function z(){let e=document.createElement(`div`);return e.className=`je-spacer`,e}function B(e,t){let n=document.createDocumentFragment();return e.toolbar.forEach((e,r)=>{let i=document.createElement(`div`);i.className=F[r]||F[0],e.forEach(e=>{if(e===`|`)i.appendChild(R());else if(e===`->`)i.appendChild(z());else{let n=t.get(e);n&&i.appendChild(L(n))}}),n.appendChild(i)}),n}function V(e,t,n){e.querySelectorAll(`[data-command]`).forEach(e=>{e.addEventListener(`click`,()=>{let r=n.get(e.dataset.command);r&&r.command(t)})});let r=n.getAll();function i(){r.forEach(n=>{let r=e.querySelector(`[data-command="${n.name}"]`);r&&(typeof n.isActive==`function`&&r.classList.toggle(`is-active`,n.isActive(t)),typeof n.isDisabled==`function`&&r.classList.toggle(`is-disabled`,n.isDisabled(t)))})}t.on(`selectionUpdate`,i),t.on(`update`,i),i()}e.JEditor=class e{static create(t,n={}){let r=typeof t==`string`?document.querySelector(t):t;if(!r)throw Error(`[JEditor] 找不到容器元素: ${t}`);return new e(r,n)}constructor(e,t={}){this._container=e,this._config=m(t),this._pm=new f,this._editor=null,this._bootstrap()}_bootstrap(){let{_container:e,_config:t,_pm:n}=this;e.classList.add(`je-container`),n.registerAll(M),e.appendChild(B(t,n));let r=document.createElement(`div`);r.className=`je-editor-area`,e.appendChild(r),this._editor=N(r,n.getTiptapExtensions(),t),n.initAll(this._editor,t),V(e,this._editor,n)}getHTML(){return this._editor.getHTML()}getJSON(){return this._editor.getJSON()}getText(){return this._editor.getText()}setContent(e,t=!1){this._editor.commands.setContent(e,t)}isEmpty(){return this._editor.isEmpty}focus(){this._editor.commands.focus()}on(e,t){return this._editor.on(e,t),this}off(e,t){return this._editor.off(e,t),this}get tiptap(){return this._editor}destroy(){this._pm.destroyAll(),this._editor.destroy(),this._container.innerHTML=``,this._container.classList.remove(`je-container`),this._editor=null}}});

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@jenkin-a/jeditor",
+  "version": "1.0.0",
+  "description": "JEditor - 腾讯系办公风格富文本编辑器",
+  "type": "module",
+  "main": "dist/jeditor.umd.js",
+  "module": "dist/jeditor.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/jeditor.es.js",
+      "require": "./dist/jeditor.umd.js"
+    },
+    "./dist/jeditor.css": "./dist/jeditor.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "editor",
+    "rich-text",
+    "tiptap",
+    "wysiwyg"
+  ],
+  "author": "jenkin",
+  "license": "MIT",
+  "peerDependencies": {
+    "@tiptap/core": "^3.0.0",
+    "@tiptap/starter-kit": "^3.0.0",
+    "@tiptap/extension-underline": "^3.0.0",
+    "@tiptap/extension-image": "^3.0.0",
+    "@tiptap/pm": "^3.0.0"
+  },
+  "devDependencies": {
+    "@tiptap/core": "^3.20.4",
+    "@tiptap/extension-image": "^3.20.4",
+    "@tiptap/extension-underline": "^3.20.4",
+    "@tiptap/pm": "^3.20.4",
+    "@tiptap/starter-kit": "^3.20.4",
+    "vite": "^8.0.1"
+  }
+}