vue-flexible-text-editor 1.0.1

package/README.md

@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/vue-flex-editor.css

@@ -0,0 +1,2 @@
+.custom-editor-wrapper[data-v-222aa227]{background:#fff;border:2px solid #2c3e50;border-radius:12px;font-family:Segoe UI,sans-serif;overflow:hidden}.toolbar[data-v-222aa227]{background:#f8f9fa;border-bottom:2px solid #eee;flex-wrap:wrap;align-items:center;gap:10px;padding:12px;display:flex}.group[data-v-222aa227]{align-items:center;gap:5px;display:flex}.toolbar button[data-v-222aa227]{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:4px;padding:6px 10px;font-weight:600;transition:all .2s}.toolbar button[data-v-222aa227]:hover{background:#e9ecef}.preview-btn[data-v-222aa227]{color:#fff!important;background:#27ae60!important;border:none!important}.export-btn.pdf[data-v-222aa227]{color:#fff!important;background:#e74c3c!important;border:none!important}.export-btn.word[data-v-222aa227]{color:#fff!important;background:#2980b9!important;border:none!important}.toolbar button.active[data-v-222aa227]{color:#fff;background:#3498db;border-color:#2980b9}.font-select[data-v-222aa227],.size-select[data-v-222aa227]{border:1px solid #ddd;border-radius:4px;padding:5px}.color-picker[data-v-222aa227]{cursor:pointer;border:none;width:30px;height:30px;padding:0}.divider[data-v-222aa227]{background:#ddd;width:1px;height:30px}.editor-container[data-v-222aa227]{position:relative}.editor-area[data-v-222aa227]{outline:none;min-height:400px;padding:30px;font-size:16px;line-height:1.6}[data-v-222aa227] .resizable-media{cursor:pointer;vertical-align:top;border:2px solid #0000;margin:10px 5px;display:inline-block}[data-v-222aa227] table.resizable-media{border-collapse:collapse}[data-v-222aa227] .resizable-media:hover{border-color:#3498db}.resizer-overlay[data-v-222aa227]{pointer-events:none;z-index:10;border:2px solid #3498db;position:absolute}.resizer-handle[data-v-222aa227]{cursor:nwse-resize;pointer-events:auto;background:#3498db;border-radius:50%;width:15px;height:15px;position:absolute;bottom:-7px;right:-7px;box-shadow:0 0 5px #0003}.modal-overlay[data-v-222aa227]{z-index:2000;background:#000000b3;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content[data-v-222aa227]{background:#fff;border-radius:12px;flex-direction:column;width:85%;max-height:85%;display:flex;overflow:hidden}.modal-header[data-v-222aa227]{background:#f8f9fa;border-bottom:1px solid #eee;justify-content:space-between;align-items:center;padding:15px 20px;display:flex}.preview-body[data-v-222aa227]{flex-grow:1;padding:30px;overflow-y:auto}.close-modal[data-v-222aa227]{color:#fff;cursor:pointer;background:#e74c3c;border:none;border-radius:4px;padding:5px 12px}.footer[data-v-222aa227]{color:#ecf0f1;background:#2c3e50;justify-content:space-between;padding:10px 20px;font-size:12px;display:flex}
+/*$vite$:1*/

package/dist/vue-flex-editor.js

@@ -0,0 +1,245 @@
+import { Teleport, createBlock, createCommentVNode, createElementBlock, createElementVNode, normalizeClass, normalizeStyle, onMounted, openBlock, ref, toDisplayString, withModifiers } from "vue";
+var __plugin_vue_export_helper_default = (e, g) => {
+	let _ = e.__vccOpts || e;
+	for (let [e, v] of g) _[e] = v;
+	return _;
+}, _hoisted_1 = { class: "toolbar" }, _hoisted_2 = { class: "group" }, _hoisted_3 = { class: "group" }, _hoisted_4 = { class: "group" }, _hoisted_5 = { class: "group" }, _hoisted_6 = { class: "group" }, _hoisted_7 = { class: "editor-container" }, _hoisted_8 = { class: "modal-content" }, _hoisted_9 = { class: "modal-header" }, _hoisted_10 = ["innerHTML"], _hoisted_11 = { class: "footer" }, editor_default = /* @__PURE__ */ __plugin_vue_export_helper_default({
+	__name: "editor",
+	setup(C) {
+		let w = ref(null), T = ref(null), E = ref(""), D = ref(0), O = ref(null), k = ref(!1), A = ref({
+			top: 0,
+			left: 0,
+			width: 0,
+			height: 0
+		}), j = (e, g = null) => {
+			document.execCommand(e, !1, g), U(), w.value.focus();
+		}, M = (e) => w.value ? document.queryCommandValue("formatBlock") === e.toLowerCase() : !1, N = () => {
+			let e = document.getElementById("editor-content-area");
+			if (window.html2pdf) window.html2pdf().set({
+				margin: 10,
+				filename: "belge.pdf",
+				image: {
+					type: "jpeg",
+					quality: .98
+				},
+				html2canvas: {
+					scale: 2,
+					useCORS: !0
+				},
+				jsPDF: {
+					unit: "mm",
+					format: "a4",
+					orientation: "portrait"
+				}
+			}).from(e).save();
+			else {
+				let e = document.createElement("script");
+				e.src = "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js", e.onload = N, document.head.appendChild(e);
+			}
+		}, P = () => {
+			let e = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'></head><body>" + document.getElementById("editor-content-area").innerHTML + "</body></html>", g = "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(e), _ = document.createElement("a");
+			document.body.appendChild(_), _.href = g, _.download = "belge.doc", _.click(), document.body.removeChild(_);
+		}, F = () => {
+			let e = prompt("Satır sayısı:", "3"), g = prompt("Sütun sayısı:", "2");
+			if (e && g) {
+				let _ = "<table class=\"resizable-media\" style=\"width:100%; border-collapse:collapse; margin:10px 0; border:1px solid #ccc; display:inline-table;\">";
+				for (let v = 0; v < e; v++) {
+					_ += "<tr>";
+					for (let e = 0; e < g; e++) _ += "<td style=\"border:1px solid #ccc; padding:8px; min-width:50px;\">Hücre</td>";
+					_ += "</tr>";
+				}
+				_ += "</table><p>&nbsp;</p>", document.execCommand("insertHTML", !1, _), U();
+			}
+		}, I = () => {
+			let e = prompt("Youtube Video URL (örn: https://www.youtube.com/watch?v=dQw4w9WgXcQ):");
+			if (e) {
+				let g = `<iframe src="${`https://www.youtube.com/embed/${e.split("v=")[1]?.split("&")[0] || e.split("/").pop()}`}" class="resizable-media" style="width:400px; height:225px; display:inline-block;margin:5px;" frameborder="0" allowfullscreen></iframe>&nbsp;`;
+				document.execCommand("insertHTML", !1, g), U();
+			}
+		}, L = (e) => {
+			let g = e.target.files[0];
+			if (g) {
+				let _ = new FileReader();
+				_.onload = (e) => {
+					let g = `<img src="${e.target.result}" class="resizable-media" style="width:250px; display:inline-block; margin:5px;" />&nbsp;`;
+					document.execCommand("insertHTML", !1, g), U();
+				}, _.readAsDataURL(g), e.target.value = "";
+			}
+		}, R = () => {
+			let e = prompt("URL giriniz:", "https://");
+			e && j("createLink", e);
+		}, z = (e) => {
+			let g = e.target.closest(".resizable-media") || (e.target.tagName === "IMG" || e.target.tagName === "IFRAME" || e.target.tagName === "TABLE" ? e.target : null);
+			g && (g.classList.contains("resizable-media") || g.tagName === "IMG" || g.tagName === "IFRAME" || g.tagName === "TABLE") ? (O.value = g, B()) : O.value = null;
+		}, B = () => {
+			if (!O.value) return;
+			let e = O.value.getBoundingClientRect(), g = w.value.getBoundingClientRect();
+			A.value = {
+				top: e.top - g.top + w.value.scrollTop + "px",
+				left: e.left - g.left + "px",
+				width: e.width + "px",
+				height: e.height + "px"
+			};
+		}, V = (e) => {
+			let g = e.clientX, _ = O.value.clientWidth, v = O.value.clientHeight / _, y = (e) => {
+				let y = _ + (e.clientX - g);
+				O.value.style.width = y + "px", O.value.tagName === "IFRAME" ? O.value.style.height = y * v + "px" : O.value.style.height = "auto", B();
+			}, b = () => {
+				window.removeEventListener("mousemove", y), window.removeEventListener("mouseup", b), U();
+			};
+			window.addEventListener("mousemove", y), window.addEventListener("mouseup", b);
+		}, H = (e) => {
+			!e.target.closest(".resizable-media") && !e.target.classList.contains("resizer-handle") && (O.value = null);
+		}, U = () => {
+			w.value && (E.value = w.value.innerHTML, D.value = w.value.innerText.length);
+		};
+		return onMounted(() => {
+			w.value.innerHTML = "";
+		}), (x, S) => (openBlock(), createElementBlock("div", {
+			class: "custom-editor-wrapper",
+			onClick: H
+		}, [
+			createElementVNode("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, [
+					createElementVNode("button", {
+						onClick: S[0] ||= (e) => j("formatBlock", "H1"),
+						class: normalizeClass({ active: M("H1") })
+					}, " H1 ", 2),
+					createElementVNode("button", {
+						onClick: S[1] ||= (e) => j("formatBlock", "H2"),
+						class: normalizeClass({ active: M("H2") })
+					}, " H2 ", 2),
+					createElementVNode("button", {
+						onClick: S[2] ||= (e) => j("formatBlock", "H3"),
+						class: normalizeClass({ active: M("H3") })
+					}, " H3 ", 2),
+					createElementVNode("button", {
+						onClick: S[3] ||= (e) => j("formatBlock", "P"),
+						class: normalizeClass({ active: M("P") })
+					}, " Metin ", 2)
+				]),
+				S[22] ||= createElementVNode("div", { class: "divider" }, null, -1),
+				createElementVNode("div", _hoisted_3, [createElementVNode("select", {
+					onChange: S[4] ||= (e) => j("fontName", e.target.value),
+					class: "font-select"
+				}, [...S[17] ||= [
+					createElementVNode("option", { value: "Arial" }, "Arial", -1),
+					createElementVNode("option", { value: "Verdana" }, "Verdana", -1),
+					createElementVNode("option", { value: "Georgia" }, "Georgia", -1),
+					createElementVNode("option", { value: "Courier New" }, "Monospace", -1)
+				]], 32), createElementVNode("select", {
+					onChange: S[5] ||= (e) => j("fontSize", e.target.value),
+					class: "size-select"
+				}, [...S[18] ||= [
+					createElementVNode("option", { value: "1" }, "S", -1),
+					createElementVNode("option", {
+						value: "3",
+						selected: ""
+					}, "M", -1),
+					createElementVNode("option", { value: "5" }, "L", -1),
+					createElementVNode("option", { value: "7" }, "XL", -1)
+				]], 32)]),
+				S[23] ||= createElementVNode("div", { class: "divider" }, null, -1),
+				createElementVNode("div", _hoisted_4, [
+					createElementVNode("button", {
+						onClick: S[6] ||= (e) => j("bold"),
+						title: "Kalın"
+					}, [...S[19] ||= [createElementVNode("b", null, "B", -1)]]),
+					createElementVNode("button", {
+						onClick: S[7] ||= (e) => j("italic"),
+						title: "İtalik"
+					}, [...S[20] ||= [createElementVNode("i", null, "I", -1)]]),
+					createElementVNode("button", {
+						onClick: S[8] ||= (e) => j("underline"),
+						title: "Altı Çizili"
+					}, [...S[21] ||= [createElementVNode("u", null, "U", -1)]]),
+					createElementVNode("input", {
+						type: "color",
+						onInput: S[9] ||= (e) => j("foreColor", e.target.value),
+						class: "color-picker",
+						title: "Yazı Rengi"
+					}, null, 32)
+				]),
+				S[24] ||= createElementVNode("div", { class: "divider" }, null, -1),
+				createElementVNode("div", _hoisted_5, [
+					createElementVNode("button", {
+						onClick: R,
+						title: "Link Ekle"
+					}, "🔗"),
+					createElementVNode("button", {
+						onClick: S[10] ||= (e) => x.$refs.fileInput.click(),
+						title: "Resim Ekle"
+					}, "🖼️"),
+					createElementVNode("button", {
+						onClick: I,
+						title: "Youtube Ekle"
+					}, "📺"),
+					createElementVNode("button", {
+						onClick: F,
+						title: "Tablo Ekle"
+					}, "📊"),
+					createElementVNode("input", {
+						type: "file",
+						ref_key: "fileInput",
+						ref: T,
+						hidden: "",
+						accept: "image/*",
+						onChange: L
+					}, null, 544)
+				]),
+				S[25] ||= createElementVNode("div", { class: "divider" }, null, -1),
+				createElementVNode("div", _hoisted_6, [
+					createElementVNode("button", { onClick: S[11] ||= (e) => j("justifyLeft") }, "⬅️"),
+					createElementVNode("button", { onClick: S[12] ||= (e) => j("justifyCenter") }, "⬆️"),
+					createElementVNode("button", { onClick: S[13] ||= (e) => j("justifyRight") }, "➡️"),
+					createElementVNode("button", {
+						onClick: S[14] ||= (e) => k.value = !0,
+						class: "preview-btn",
+						title: "Ön İzleme"
+					}, " 👁️ ")
+				]),
+				S[26] ||= createElementVNode("div", { class: "divider" }, null, -1),
+				createElementVNode("div", { class: "group" }, [createElementVNode("button", {
+					onClick: N,
+					class: "export-btn pdf",
+					title: "PDF İndir"
+				}, " 📄 PDF "), createElementVNode("button", {
+					onClick: P,
+					class: "export-btn word",
+					title: "Word İndir"
+				}, " 📝 DOC ")])
+			]),
+			createElementVNode("div", _hoisted_7, [createElementVNode("div", {
+				id: "editor-content-area",
+				ref_key: "editorRef",
+				ref: w,
+				class: "editor-area",
+				contenteditable: "true",
+				onInput: U,
+				onClick: z
+			}, null, 544), O.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "resizer-overlay",
+				style: normalizeStyle(A.value)
+			}, [createElementVNode("div", {
+				class: "resizer-handle",
+				onMousedown: withModifiers(V, ["stop", "prevent"])
+			}, null, 32)], 4)) : createCommentVNode("", !0)]),
+			(openBlock(), createBlock(Teleport, { to: "body" }, [k.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "modal-overlay",
+				onClick: S[16] ||= withModifiers((e) => k.value = !1, ["self"])
+			}, [createElementVNode("div", _hoisted_8, [createElementVNode("div", _hoisted_9, [S[27] ||= createElementVNode("h3", null, "İçerik Ön İzleme", -1), createElementVNode("button", {
+				onClick: S[15] ||= (e) => k.value = !1,
+				class: "close-modal"
+			}, "X")]), createElementVNode("div", {
+				class: "preview-body",
+				innerHTML: E.value
+			}, null, 8, _hoisted_10)])])) : createCommentVNode("", !0)])),
+			createElementVNode("div", _hoisted_11, [createElementVNode("span", null, "Karakter: " + toDisplayString(D.value), 1), S[28] ||= createElementVNode("span", null, "Esnek Mod: Aktif (PDF/Word Aktarımı Eklendi)", -1)])
+		]));
+	}
+}, [["__scopeId", "data-v-222aa227"]]), rich_editor_1_default = { install: (e) => {
+	e.component("editor", editor_default);
+} };
+export { rich_editor_1_default as default, editor_default as editor };

package/dist/vue-flex-editor.umd.cjs

@@ -0,0 +1 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`)):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e[`vue-flex-editor`]={},e.Vue))})(this,function(e,t){Object.defineProperty(e,`__esModule`,{value:!0});var n=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},r={class:`toolbar`},i={class:`group`},a={class:`group`},o={class:`group`},s={class:`group`},c={class:`group`},l={class:`editor-container`},u={class:`modal-content`},d={class:`modal-header`},f=[`innerHTML`],p={class:`footer`},m=n({__name:`editor`,setup(e){let n=(0,t.ref)(null),m=(0,t.ref)(null),h=(0,t.ref)(``),g=(0,t.ref)(0),_=(0,t.ref)(null),v=(0,t.ref)(!1),y=(0,t.ref)({top:0,left:0,width:0,height:0}),b=(e,t=null)=>{document.execCommand(e,!1,t),M(),n.value.focus()},x=e=>n.value?document.queryCommandValue(`formatBlock`)===e.toLowerCase():!1,S=()=>{let e=document.getElementById(`editor-content-area`);if(window.html2pdf)window.html2pdf().set({margin:10,filename:`belge.pdf`,image:{type:`jpeg`,quality:.98},html2canvas:{scale:2,useCORS:!0},jsPDF:{unit:`mm`,format:`a4`,orientation:`portrait`}}).from(e).save();else{let e=document.createElement(`script`);e.src=`https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js`,e.onload=S,document.head.appendChild(e)}},C=()=>{let e=`<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'></head><body>`+document.getElementById(`editor-content-area`).innerHTML+`</body></html>`,t=`data:application/vnd.ms-word;charset=utf-8,`+encodeURIComponent(e),n=document.createElement(`a`);document.body.appendChild(n),n.href=t,n.download=`belge.doc`,n.click(),document.body.removeChild(n)},w=()=>{let e=prompt(`Satır sayısı:`,`3`),t=prompt(`Sütun sayısı:`,`2`);if(e&&t){let n=`<table class="resizable-media" style="width:100%; border-collapse:collapse; margin:10px 0; border:1px solid #ccc; display:inline-table;">`;for(let r=0;r<e;r++){n+=`<tr>`;for(let e=0;e<t;e++)n+=`<td style="border:1px solid #ccc; padding:8px; min-width:50px;">Hücre</td>`;n+=`</tr>`}n+=`</table><p>&nbsp;</p>`,document.execCommand(`insertHTML`,!1,n),M()}},T=()=>{let e=prompt(`Youtube Video URL (örn: https://www.youtube.com/watch?v=dQw4w9WgXcQ):`);if(e){let t=`<iframe src="${`https://www.youtube.com/embed/${e.split(`v=`)[1]?.split(`&`)[0]||e.split(`/`).pop()}`}" class="resizable-media" style="width:400px; height:225px; display:inline-block;margin:5px;" frameborder="0" allowfullscreen></iframe>&nbsp;`;document.execCommand(`insertHTML`,!1,t),M()}},E=e=>{let t=e.target.files[0];if(t){let n=new FileReader;n.onload=e=>{let t=`<img src="${e.target.result}" class="resizable-media" style="width:250px; display:inline-block; margin:5px;" />&nbsp;`;document.execCommand(`insertHTML`,!1,t),M()},n.readAsDataURL(t),e.target.value=``}},D=()=>{let e=prompt(`URL giriniz:`,`https://`);e&&b(`createLink`,e)},O=e=>{let t=e.target.closest(`.resizable-media`)||(e.target.tagName===`IMG`||e.target.tagName===`IFRAME`||e.target.tagName===`TABLE`?e.target:null);t&&(t.classList.contains(`resizable-media`)||t.tagName===`IMG`||t.tagName===`IFRAME`||t.tagName===`TABLE`)?(_.value=t,k()):_.value=null},k=()=>{if(!_.value)return;let e=_.value.getBoundingClientRect(),t=n.value.getBoundingClientRect();y.value={top:e.top-t.top+n.value.scrollTop+`px`,left:e.left-t.left+`px`,width:e.width+`px`,height:e.height+`px`}},A=e=>{let t=e.clientX,n=_.value.clientWidth,r=_.value.clientHeight/n,i=e=>{let i=n+(e.clientX-t);_.value.style.width=i+`px`,_.value.tagName===`IFRAME`?_.value.style.height=i*r+`px`:_.value.style.height=`auto`,k()},a=()=>{window.removeEventListener(`mousemove`,i),window.removeEventListener(`mouseup`,a),M()};window.addEventListener(`mousemove`,i),window.addEventListener(`mouseup`,a)},j=e=>{!e.target.closest(`.resizable-media`)&&!e.target.classList.contains(`resizer-handle`)&&(_.value=null)},M=()=>{n.value&&(h.value=n.value.innerHTML,g.value=n.value.innerText.length)};return(0,t.onMounted)(()=>{n.value.innerHTML=``}),(e,k)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`custom-editor-wrapper`,onClick:j},[(0,t.createElementVNode)(`div`,r,[(0,t.createElementVNode)(`div`,i,[(0,t.createElementVNode)(`button`,{onClick:k[0]||=e=>b(`formatBlock`,`H1`),class:(0,t.normalizeClass)({active:x(`H1`)})},` H1 `,2),(0,t.createElementVNode)(`button`,{onClick:k[1]||=e=>b(`formatBlock`,`H2`),class:(0,t.normalizeClass)({active:x(`H2`)})},` H2 `,2),(0,t.createElementVNode)(`button`,{onClick:k[2]||=e=>b(`formatBlock`,`H3`),class:(0,t.normalizeClass)({active:x(`H3`)})},` H3 `,2),(0,t.createElementVNode)(`button`,{onClick:k[3]||=e=>b(`formatBlock`,`P`),class:(0,t.normalizeClass)({active:x(`P`)})},` Metin `,2)]),k[22]||=(0,t.createElementVNode)(`div`,{class:`divider`},null,-1),(0,t.createElementVNode)(`div`,a,[(0,t.createElementVNode)(`select`,{onChange:k[4]||=e=>b(`fontName`,e.target.value),class:`font-select`},[...k[17]||=[(0,t.createElementVNode)(`option`,{value:`Arial`},`Arial`,-1),(0,t.createElementVNode)(`option`,{value:`Verdana`},`Verdana`,-1),(0,t.createElementVNode)(`option`,{value:`Georgia`},`Georgia`,-1),(0,t.createElementVNode)(`option`,{value:`Courier New`},`Monospace`,-1)]],32),(0,t.createElementVNode)(`select`,{onChange:k[5]||=e=>b(`fontSize`,e.target.value),class:`size-select`},[...k[18]||=[(0,t.createElementVNode)(`option`,{value:`1`},`S`,-1),(0,t.createElementVNode)(`option`,{value:`3`,selected:``},`M`,-1),(0,t.createElementVNode)(`option`,{value:`5`},`L`,-1),(0,t.createElementVNode)(`option`,{value:`7`},`XL`,-1)]],32)]),k[23]||=(0,t.createElementVNode)(`div`,{class:`divider`},null,-1),(0,t.createElementVNode)(`div`,o,[(0,t.createElementVNode)(`button`,{onClick:k[6]||=e=>b(`bold`),title:`Kalın`},[...k[19]||=[(0,t.createElementVNode)(`b`,null,`B`,-1)]]),(0,t.createElementVNode)(`button`,{onClick:k[7]||=e=>b(`italic`),title:`İtalik`},[...k[20]||=[(0,t.createElementVNode)(`i`,null,`I`,-1)]]),(0,t.createElementVNode)(`button`,{onClick:k[8]||=e=>b(`underline`),title:`Altı Çizili`},[...k[21]||=[(0,t.createElementVNode)(`u`,null,`U`,-1)]]),(0,t.createElementVNode)(`input`,{type:`color`,onInput:k[9]||=e=>b(`foreColor`,e.target.value),class:`color-picker`,title:`Yazı Rengi`},null,32)]),k[24]||=(0,t.createElementVNode)(`div`,{class:`divider`},null,-1),(0,t.createElementVNode)(`div`,s,[(0,t.createElementVNode)(`button`,{onClick:D,title:`Link Ekle`},`🔗`),(0,t.createElementVNode)(`button`,{onClick:k[10]||=t=>e.$refs.fileInput.click(),title:`Resim Ekle`},`🖼️`),(0,t.createElementVNode)(`button`,{onClick:T,title:`Youtube Ekle`},`📺`),(0,t.createElementVNode)(`button`,{onClick:w,title:`Tablo Ekle`},`📊`),(0,t.createElementVNode)(`input`,{type:`file`,ref_key:`fileInput`,ref:m,hidden:``,accept:`image/*`,onChange:E},null,544)]),k[25]||=(0,t.createElementVNode)(`div`,{class:`divider`},null,-1),(0,t.createElementVNode)(`div`,c,[(0,t.createElementVNode)(`button`,{onClick:k[11]||=e=>b(`justifyLeft`)},`⬅️`),(0,t.createElementVNode)(`button`,{onClick:k[12]||=e=>b(`justifyCenter`)},`⬆️`),(0,t.createElementVNode)(`button`,{onClick:k[13]||=e=>b(`justifyRight`)},`➡️`),(0,t.createElementVNode)(`button`,{onClick:k[14]||=e=>v.value=!0,class:`preview-btn`,title:`Ön İzleme`},` 👁️ `)]),k[26]||=(0,t.createElementVNode)(`div`,{class:`divider`},null,-1),(0,t.createElementVNode)(`div`,{class:`group`},[(0,t.createElementVNode)(`button`,{onClick:S,class:`export-btn pdf`,title:`PDF İndir`},` 📄 PDF `),(0,t.createElementVNode)(`button`,{onClick:C,class:`export-btn word`,title:`Word İndir`},` 📝 DOC `)])]),(0,t.createElementVNode)(`div`,l,[(0,t.createElementVNode)(`div`,{id:`editor-content-area`,ref_key:`editorRef`,ref:n,class:`editor-area`,contenteditable:`true`,onInput:M,onClick:O},null,544),_.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`resizer-overlay`,style:(0,t.normalizeStyle)(y.value)},[(0,t.createElementVNode)(`div`,{class:`resizer-handle`,onMousedown:(0,t.withModifiers)(A,[`stop`,`prevent`])},null,32)],4)):(0,t.createCommentVNode)(``,!0)]),((0,t.openBlock)(),(0,t.createBlock)(t.Teleport,{to:`body`},[v.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`modal-overlay`,onClick:k[16]||=(0,t.withModifiers)(e=>v.value=!1,[`self`])},[(0,t.createElementVNode)(`div`,u,[(0,t.createElementVNode)(`div`,d,[k[27]||=(0,t.createElementVNode)(`h3`,null,`İçerik Ön İzleme`,-1),(0,t.createElementVNode)(`button`,{onClick:k[15]||=e=>v.value=!1,class:`close-modal`},`X`)]),(0,t.createElementVNode)(`div`,{class:`preview-body`,innerHTML:h.value},null,8,f)])])):(0,t.createCommentVNode)(``,!0)])),(0,t.createElementVNode)(`div`,p,[(0,t.createElementVNode)(`span`,null,`Karakter: `+(0,t.toDisplayString)(g.value),1),k[28]||=(0,t.createElementVNode)(`span`,null,`Esnek Mod: Aktif (PDF/Word Aktarımı Eklendi)`,-1)])]))}},[[`__scopeId`,`data-v-222aa227`]]);e.default={install:e=>{e.component(`editor`,m)}},e.editor=m});

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>my-vue-library</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/index.js

@@ -0,0 +1,8 @@
+import editor from "./src/components/editor.vue";
+export default {
+  install: (app) => {
+    app.component("editor", editor);
+  },
+};
+
+export { editor };

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "vue-flexible-text-editor",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/solen13/rich-editor"
+  },
+  "private": false,
+  "version": "1.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.vue

@@ -0,0 +1,9 @@
+<script setup>
+import Editor from "./components/editor.vue";
+</script>
+
+<template>
+  <Editor></Editor>
+</template>
+
+<style scoped></style>

package/src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

package/src/components/editor.vue

@@ -0,0 +1,518 @@
+<template>
+  <div class="custom-editor-wrapper" @click="deselectMedia">
+    <div class="toolbar">
+      <div class="group">
+        <button
+          @click="execAction('formatBlock', 'H1')"
+          :class="{ active: isTag('H1') }"
+        >
+          H1
+        </button>
+        <button
+          @click="execAction('formatBlock', 'H2')"
+          :class="{ active: isTag('H2') }"
+        >
+          H2
+        </button>
+        <button
+          @click="execAction('formatBlock', 'H3')"
+          :class="{ active: isTag('H3') }"
+        >
+          H3
+        </button>
+        <button
+          @click="execAction('formatBlock', 'P')"
+          :class="{ active: isTag('P') }"
+        >
+          Metin
+        </button>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="group">
+        <select
+          @change="execAction('fontName', $event.target.value)"
+          class="font-select"
+        >
+          <option value="Arial">Arial</option>
+          <option value="Verdana">Verdana</option>
+          <option value="Georgia">Georgia</option>
+          <option value="Courier New">Monospace</option>
+        </select>
+        <select
+          @change="execAction('fontSize', $event.target.value)"
+          class="size-select"
+        >
+          <option value="1">S</option>
+          <option value="3" selected>M</option>
+          <option value="5">L</option>
+          <option value="7">XL</option>
+        </select>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="group">
+        <button @click="execAction('bold')" title="Kalın"><b>B</b></button>
+        <button @click="execAction('italic')" title="İtalik"><i>I</i></button>
+        <button @click="execAction('underline')" title="Altı Çizili">
+          <u>U</u>
+        </button>
+        <input
+          type="color"
+          @input="execAction('foreColor', $event.target.value)"
+          class="color-picker"
+          title="Yazı Rengi"
+        />
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="group">
+        <button @click="addLink" title="Link Ekle">🔗</button>
+        <button @click="$refs.fileInput.click()" title="Resim Ekle">🖼️</button>
+        <button @click="addYoutubeVideo" title="Youtube Ekle">📺</button>
+        <button @click="insertTable" title="Tablo Ekle">📊</button>
+        <input
+          type="file"
+          ref="fileInput"
+          hidden
+          accept="image/*"
+          @change="handleImageUpload"
+        />
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="group">
+        <button @click="execAction('justifyLeft')">⬅️</button>
+        <button @click="execAction('justifyCenter')">⬆️</button>
+        <button @click="execAction('justifyRight')">➡️</button>
+        <button
+          @click="showPreview = true"
+          class="preview-btn"
+          title="Ön İzleme"
+        >
+          👁️
+        </button>
+      </div>
+
+      <div class="divider"></div>
+
+      <div class="group">
+        <button @click="exportToPDF" class="export-btn pdf" title="PDF İndir">
+          📄 PDF
+        </button>
+        <button
+          @click="exportToWord"
+          class="export-btn word"
+          title="Word İndir"
+        >
+          📝 DOC
+        </button>
+      </div>
+    </div>
+
+    <div class="editor-container">
+      <div
+        id="editor-content-area"
+        ref="editorRef"
+        class="editor-area"
+        contenteditable="true"
+        @input="updateContent"
+        @click="handleEditorClick"
+      ></div>
+
+      <div v-if="selectedMedia" class="resizer-overlay" :style="resizerStyle">
+        <div
+          class="resizer-handle"
+          @mousedown.stop.prevent="startResizing"
+        ></div>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div
+        v-if="showPreview"
+        class="modal-overlay"
+        @click.self="showPreview = false"
+      >
+        <div class="modal-content">
+          <div class="modal-header">
+            <h3>İçerik Ön İzleme</h3>
+            <button @click="showPreview = false" class="close-modal">X</button>
+          </div>
+          <div class="preview-body" v-html="content"></div>
+        </div>
+      </div>
+    </Teleport>
+
+    <div class="footer">
+      <span>Karakter: {{ charCount }}</span>
+      <span>Esnek Mod: Aktif (PDF/Word Aktarımı Eklendi)</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+
+const editorRef = ref(null);
+const fileInput = ref(null);
+const content = ref("");
+const charCount = ref(0);
+const selectedMedia = ref(null);
+const showPreview = ref(false);
+const resizerStyle = ref({ top: 0, left: 0, width: 0, height: 0 });
+
+const execAction = (command, value = null) => {
+  document.execCommand(command, false, value);
+  updateContent();
+  editorRef.value.focus();
+};
+
+const isTag = (tagName) => {
+  if (!editorRef.value) return false;
+  return document.queryCommandValue("formatBlock") === tagName.toLowerCase();
+};
+
+const exportToPDF = () => {
+  const element = document.getElementById("editor-content-area");
+
+  if (window.html2pdf) {
+    const opt = {
+      margin: 10,
+      filename: "belge.pdf",
+      image: { type: "jpeg", quality: 0.98 },
+      html2canvas: { scale: 2, useCORS: true },
+      jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
+    };
+    window.html2pdf().set(opt).from(element).save();
+  } else {
+    const script = document.createElement("script");
+    script.src =
+      "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js";
+    script.onload = exportToPDF;
+    document.head.appendChild(script);
+  }
+};
+
+const exportToWord = () => {
+  const header =
+    "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'></head><body>";
+  const footer = "</body></html>";
+  const sourceHTML =
+    header + document.getElementById("editor-content-area").innerHTML + footer;
+
+  const source =
+    "data:application/vnd.ms-word;charset=utf-8," +
+    encodeURIComponent(sourceHTML);
+  const fileDownload = document.createElement("a");
+  document.body.appendChild(fileDownload);
+  fileDownload.href = source;
+  fileDownload.download = "belge.doc";
+  fileDownload.click();
+  document.body.removeChild(fileDownload);
+};
+
+const insertTable = () => {
+  const rows = prompt("Satır sayısı:", "3");
+  const cols = prompt("Sütun sayısı:", "2");
+  if (rows && cols) {
+    let tableHtml = `<table class="resizable-media" style="width:100%; border-collapse:collapse; margin:10px 0; border:1px solid #ccc; display:inline-table;">`;
+    for (let i = 0; i < rows; i++) {
+      tableHtml += "<tr>";
+      for (let j = 0; j < cols; j++) {
+        tableHtml += `<td style="border:1px solid #ccc; padding:8px; min-width:50px;">Hücre</td>`;
+      }
+      tableHtml += "</tr>";
+    }
+    tableHtml += "</table><p>&nbsp;</p>";
+    document.execCommand("insertHTML", false, tableHtml);
+    updateContent();
+  }
+};
+
+const addYoutubeVideo = () => {
+  const url = prompt(
+    "Youtube Video URL (örn: https://www.youtube.com/watch?v=dQw4w9WgXcQ):"
+  );
+  if (url) {
+    const videoId = url.split("v=")[1]?.split("&")[0] || url.split("/").pop();
+    const embedUrl = `https://www.youtube.com/embed/${videoId}`;
+    const html = `<iframe src="${embedUrl}" class="resizable-media" style="width:400px; height:225px; display:inline-block;margin:5px;" frameborder="0" allowfullscreen></iframe>&nbsp;`;
+    document.execCommand("insertHTML", false, html);
+    updateContent();
+  }
+};
+
+const handleImageUpload = (e) => {
+  const file = e.target.files[0];
+  if (file) {
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      const html = `<img src="${ev.target.result}" class="resizable-media" style="width:250px; display:inline-block; margin:5px;" />&nbsp;`;
+      document.execCommand("insertHTML", false, html);
+      updateContent();
+    };
+    reader.readAsDataURL(file);
+    e.target.value = "";
+  }
+};
+
+const addLink = () => {
+  const url = prompt("URL giriniz:", "https://");
+  if (url) execAction("createLink", url);
+};
+
+const handleEditorClick = (e) => {
+  const target =
+    e.target.closest(".resizable-media") ||
+    (e.target.tagName === "IMG" ||
+    e.target.tagName === "IFRAME" ||
+    e.target.tagName === "TABLE"
+      ? e.target
+      : null);
+  if (
+    target &&
+    (target.classList.contains("resizable-media") ||
+      target.tagName === "IMG" ||
+      target.tagName === "IFRAME" ||
+      target.tagName === "TABLE")
+  ) {
+    selectedMedia.value = target;
+    updateResizerPosition();
+  } else {
+    selectedMedia.value = null;
+  }
+};
+
+const updateResizerPosition = () => {
+  if (!selectedMedia.value) return;
+  const rect = selectedMedia.value.getBoundingClientRect();
+  const containerRect = editorRef.value.getBoundingClientRect();
+  resizerStyle.value = {
+    top: rect.top - containerRect.top + editorRef.value.scrollTop + "px",
+    left: rect.left - containerRect.left + "px",
+    width: rect.width + "px",
+    height: rect.height + "px",
+  };
+};
+
+const startResizing = (e) => {
+  const startX = e.clientX;
+  const startWidth = selectedMedia.value.clientWidth;
+  const ratio = selectedMedia.value.clientHeight / startWidth;
+  const onMouseMove = (mE) => {
+    const newWidth = startWidth + (mE.clientX - startX);
+    selectedMedia.value.style.width = newWidth + "px";
+    if (selectedMedia.value.tagName === "IFRAME") {
+      selectedMedia.value.style.height = newWidth * ratio + "px";
+    } else {
+      selectedMedia.value.style.height = "auto";
+    }
+    updateResizerPosition();
+  };
+  const onMouseUp = () => {
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", onMouseUp);
+    updateContent();
+  };
+  window.addEventListener("mousemove", onMouseMove);
+  window.addEventListener("mouseup", onMouseUp);
+};
+
+const deselectMedia = (e) => {
+  if (
+    !e.target.closest(".resizable-media") &&
+    !e.target.classList.contains("resizer-handle")
+  ) {
+    selectedMedia.value = null;
+  }
+};
+
+const updateContent = () => {
+  if (editorRef.value) {
+    content.value = editorRef.value.innerHTML;
+    charCount.value = editorRef.value.innerText.length;
+  }
+};
+
+onMounted(() => {
+  editorRef.value.innerHTML = "";
+});
+</script>
+
+<style scoped>
+/* Mevcut stiller korunuyor */
+.custom-editor-wrapper {
+  border: 2px solid #2c3e50;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+  font-family: "Segoe UI", sans-serif;
+}
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding: 12px;
+  background: #f8f9fa;
+  border-bottom: 2px solid #eee;
+  align-items: center;
+}
+.group {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+.toolbar button {
+  padding: 6px 10px;
+  border: 1px solid #ddd;
+  background: white;
+  cursor: pointer;
+  border-radius: 4px;
+  font-weight: 600;
+  transition: 0.2s;
+}
+.toolbar button:hover {
+  background: #e9ecef;
+}
+.preview-btn {
+  background: #27ae60 !important;
+  color: white !important;
+  border: none !important;
+}
+
+/* YENİ: Dışa Aktar Buton Stilleri */
+.export-btn.pdf {
+  background: #e74c3c !important;
+  color: white !important;
+  border: none !important;
+}
+.export-btn.word {
+  background: #2980b9 !important;
+  color: white !important;
+  border: none !important;
+}
+
+.toolbar button.active {
+  background: #3498db;
+  color: white;
+  border-color: #2980b9;
+}
+.font-select,
+.size-select {
+  padding: 5px;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+}
+.color-picker {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+}
+.divider {
+  width: 1px;
+  height: 30px;
+  background: #ddd;
+}
+.editor-container {
+  position: relative;
+}
+.editor-area {
+  min-height: 400px;
+  padding: 30px;
+  outline: none;
+  line-height: 1.6;
+  font-size: 16px;
+}
+
+/* Resizer ve Medya Stilleri (Mevcut olanlarla aynı) */
+:deep(.resizable-media) {
+  cursor: pointer;
+  margin: 10px 5px;
+  display: inline-block;
+  vertical-align: top;
+  border: 2px solid transparent;
+}
+:deep(table.resizable-media) {
+  border-collapse: collapse;
+}
+:deep(.resizable-media:hover) {
+  border-color: #3498db;
+}
+.resizer-overlay {
+  position: absolute;
+  pointer-events: none;
+  border: 2px solid #3498db;
+  z-index: 10;
+}
+.resizer-handle {
+  position: absolute;
+  width: 15px;
+  height: 15px;
+  background: #3498db;
+  right: -7px;
+  bottom: -7px;
+  cursor: nwse-resize;
+  pointer-events: auto;
+  border-radius: 50%;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+}
+
+/* Modal Stilleri (Mevcut olanlarla aynı) */
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+}
+.modal-content {
+  background: #fff;
+  width: 85%;
+  max-height: 85%;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.modal-header {
+  padding: 15px 20px;
+  background: #f8f9fa;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.preview-body {
+  padding: 30px;
+  overflow-y: auto;
+  flex-grow: 1;
+}
+.close-modal {
+  background: #e74c3c;
+  color: white;
+  border: none;
+  padding: 5px 12px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 20px;
+  background: #2c3e50;
+  color: #ecf0f1;
+  font-size: 12px;
+}
+</style>

package/src/index.js

@@ -0,0 +1,9 @@
+import editor from "./components/editor.vue";
+
+export { editor };
+
+export default {
+  install: (app) => {
+    app.component("editor", editor);
+  },
+};

package/src/main.js

@@ -0,0 +1,9 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import editor from "./components/editor.vue";
+
+const app = createApp(App);
+
+app.use(editor);
+
+app.mount("#app");

package/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { resolve } from "path";
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "index.js"),
+      name: "vue-flex-editor",
+      fileName: "vue-flex-editor",
+    },
+    rollupOptions: {
+      external: ["vue"], // Vue'yu paketin içine gömme, dışarıdan kullansın
+      output: {
+        globals: { vue: "Vue" },
+      },
+    },
+  },
+});