@anweb/nuxt-aneditor 0.1.1

package/dist/runtime/components/AnEditor/Editor.vue

@@ -0,0 +1,630 @@
+<script setup>
+import { ref, computed, watch, onMounted } from "vue";
+import { useEventListener, useFileDialog, useDebounceFn, useThrottleFn } from "@vueuse/core";
+import { useTemplateRef, parseMarkdown, toMarkdown, extractYouTubeId, useAnDialogs, useSelection, useHistory, useBlocks, useTable, useImage, useList } from "#imports";
+import { AnEditorToolbar, AnEditorPrompt } from "#components";
+const emit = defineEmits(["update:modelValue"]);
+const props = defineProps({
+  modelValue: { type: String, required: false, default: "" },
+  placeholder: { type: String, required: false, default: "" },
+  upload: { type: Function, required: false },
+  disabled: { type: Boolean, required: false, default: false }
+});
+const Dialogs = useAnDialogs();
+const FileDialog = useFileDialog({ accept: "image/*", multiple: false });
+const refContent = useTemplateRef("refContent");
+const activeFormats = ref(/* @__PURE__ */ new Set());
+const isComposing = ref(false);
+let skipNextUpdate = false;
+let internalMd = "";
+let wasEmpty = false;
+const selection = useSelection(refContent);
+const flushModel = useDebounceFn(() => {
+  if (isComposing.value) return;
+  if (history.isUndoRedo) return;
+  history.pushHistory();
+  const html = refContent.value?.innerHTML ?? "";
+  const md = toMarkdown(html);
+  internalMd = md;
+  emit("update:modelValue", md);
+  updateActiveFormats();
+}, 150);
+const syncToModel = () => {
+  if (isComposing.value || skipNextUpdate) {
+    skipNextUpdate = false;
+    return;
+  }
+  if (history.isUndoRedo) return;
+  blocks.normalizeContent();
+  cleanOrphanedFormatting();
+  flushModel();
+};
+const history = useHistory(refContent, selection);
+const blocks = useBlocks(refContent, selection, syncToModel);
+const table = useTable(refContent, syncToModel);
+const image = useImage(refContent, syncToModel);
+const list = useList(refContent, selection, syncToModel, blocks.ensureBlockWrapped, blocks.isInsideCodeBlock);
+const focus = () => {
+  refContent.value?.focus();
+};
+const clear = () => {
+  if (!refContent.value) return;
+  refContent.value.innerHTML = "";
+  internalMd = "";
+  emit("update:modelValue", "");
+};
+const resetTypingStyle = () => {
+  if (!refContent.value) return;
+  const text = refContent.value.textContent ?? "";
+  if (text.trim()) return;
+  wasEmpty = true;
+  const inlines = refContent.value.querySelectorAll("strong, em, s, b, i, u, span:not([class])");
+  for (const el of inlines) {
+    const parent = el.parentNode;
+    while (el.firstChild) {
+      parent.insertBefore(el.firstChild, el);
+    }
+    el.remove();
+  }
+  refContent.value.innerHTML = "<p><br></p>";
+  const p = refContent.value.firstElementChild;
+  const sel = window.getSelection();
+  if (sel) {
+    const range = document.createRange();
+    range.setStart(p, 0);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+};
+const cleanOrphanedFormatting = () => {
+  if (!refContent.value) return;
+  if (!wasEmpty) return;
+  wasEmpty = false;
+  const caretOffset = selection.getCaretOffsetInContent();
+  const unwrapInlines = (parent) => {
+    const inlines = parent.querySelectorAll("strong, b, em, i, s, u, span:not([class])");
+    for (const el of inlines) {
+      const elParent = el.parentNode;
+      while (el.firstChild) {
+        elParent.insertBefore(el.firstChild, el);
+      }
+      el.remove();
+    }
+    parent.normalize();
+  };
+  unwrapInlines(refContent.value);
+  selection.restoreCaretOffset(refContent.value, caretOffset);
+};
+const openPrompt = (params) => {
+  Dialogs.open(AnEditorPrompt, { ...params });
+};
+const createYouTubeElement = (ytId) => {
+  const div = document.createElement("div");
+  div.className = "an-editor__youtube";
+  div.innerHTML = `<iframe src="https://www.youtube-nocookie.com/embed/${ytId}" style="border:none" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
+  return div;
+};
+const uploadAndInsert = async (file) => {
+  if (!props.upload) return;
+  try {
+    const url = await props.upload(file);
+    const figure = image.createImageElement(url, file.name);
+    blocks.insertBlockAtCursor(figure);
+  } catch {
+  }
+};
+const emitMd = (md) => {
+  internalMd = md;
+  emit("update:modelValue", md);
+  updateActiveFormats();
+};
+const onToolbarAction = (type) => {
+  if (props.disabled) return;
+  switch (type) {
+    case "undo":
+      history.undo(emitMd, toMarkdown);
+      return;
+    case "redo":
+      history.redo(emitMd, toMarkdown);
+      return;
+    case "bold":
+      blocks.wrapSelection("strong");
+      break;
+    case "italic":
+      blocks.wrapSelection("em");
+      break;
+    case "strikethrough":
+      blocks.wrapSelection("s");
+      break;
+    case "code":
+      blocks.wrapSelection("code", "an-editor__code");
+      break;
+    case "h1":
+    case "h2":
+    case "h3":
+    case "h4":
+    case "h5":
+    case "h6":
+      blocks.replaceBlock(type);
+      break;
+    case "unorderedList":
+      list.convertToList("ul");
+      break;
+    case "orderedList":
+      list.convertToList("ol");
+      break;
+    case "blockquote":
+      blocks.wrapBlockInTag("blockquote");
+      break;
+    case "horizontalRule": {
+      const hr = document.createElement("hr");
+      blocks.insertBlockAtCursor(hr);
+      break;
+    }
+    case "codeBlock": {
+      const sel = selection.getSelection();
+      const selectedText = sel && !sel.range.collapsed ? sel.range.toString() : "";
+      const pre = document.createElement("pre");
+      pre.className = "an-editor__codeblock";
+      const code = document.createElement("code");
+      code.textContent = selectedText || "\n";
+      pre.appendChild(code);
+      if (sel && !sel.range.collapsed) {
+        sel.range.deleteContents();
+      }
+      const currentSel = selection.getSelection();
+      if (!currentSel) {
+        refContent.value?.appendChild(pre);
+      } else {
+        const block = blocks.getCurrentBlock();
+        if (block) {
+          block.parentNode.insertBefore(pre, block.nextSibling);
+        } else {
+          refContent.value.appendChild(pre);
+        }
+      }
+      const p = document.createElement("p");
+      p.innerHTML = "<br>";
+      pre.parentNode.insertBefore(p, pre.nextSibling);
+      const range = document.createRange();
+      range.setStart(code, 0);
+      range.collapse(true);
+      const winSel = window.getSelection();
+      winSel?.removeAllRanges();
+      winSel?.addRange(range);
+      syncToModel();
+      break;
+    }
+    case "link": {
+      const sel = selection.getSelection();
+      const selectedText = sel && !sel.range.collapsed ? sel.range.toString() : "";
+      openPrompt({
+        title: "Insert link",
+        fields: [
+          { key: "url", label: "URL", placeholder: "https://" },
+          { key: "text", label: "Text", value: selectedText, placeholder: "Link text" }
+        ],
+        onSubmit: (values) => {
+          if (!values.url) return;
+          const currentSel = selection.getSelection();
+          const a = document.createElement("a");
+          a.href = values.url;
+          a.textContent = values.text || values.url;
+          if (currentSel && !currentSel.range.collapsed) {
+            currentSel.range.deleteContents();
+          }
+          if (currentSel) {
+            currentSel.range.insertNode(a);
+            currentSel.range.collapse(false);
+            currentSel.selection.removeAllRanges();
+            currentSel.selection.addRange(currentSel.range);
+          } else {
+            refContent.value?.appendChild(a);
+          }
+          syncToModel();
+        }
+      });
+      break;
+    }
+    case "image": {
+      openPrompt({
+        title: "Insert image",
+        fields: [
+          { key: "url", label: "URL", placeholder: "https://example.com/image.png" }
+        ],
+        onSubmit: (values) => {
+          if (!values.url) return;
+          const figure = image.createImageElement(values.url);
+          blocks.insertBlockAtCursor(figure);
+        }
+      });
+      break;
+    }
+    case "imageUpload": {
+      FileDialog.open();
+      break;
+    }
+    case "youtube": {
+      openPrompt({
+        title: "YouTube video",
+        fields: [
+          { key: "url", label: "URL", placeholder: "https://www.youtube.com/watch?v=..." }
+        ],
+        onSubmit: (values) => {
+          const ytId = extractYouTubeId(values.url ?? "");
+          if (!ytId) return;
+          const div = createYouTubeElement(ytId);
+          blocks.insertBlockAtCursor(div);
+        }
+      });
+      break;
+    }
+    case "table": {
+      openPrompt({
+        title: "Insert table",
+        fields: [
+          { key: "rows", label: "Rows", value: "3", placeholder: "3" },
+          { key: "cols", label: "Columns", value: "3", placeholder: "3" }
+        ],
+        onSubmit: (values) => {
+          const rows = Math.max(1, Math.min(20, parseInt(values.rows || "3")));
+          const cols = Math.max(1, Math.min(10, parseInt(values.cols || "3")));
+          const tbl = table.createTableElement(rows, cols);
+          blocks.insertBlockAtCursor(tbl);
+        }
+      });
+      break;
+    }
+  }
+};
+const openImagePrompt = (img, figure) => {
+  openPrompt({
+    title: "Edit image",
+    submitLabel: "Save",
+    deleteLabel: "Delete",
+    fields: [
+      { key: "url", label: "URL", value: img.src }
+    ],
+    onSubmit: (values) => {
+      if (!values.url) return;
+      img.src = values.url;
+      syncToModel();
+    },
+    onDelete: () => {
+      const toRemove = figure ?? img;
+      const next = toRemove.nextElementSibling;
+      toRemove.remove();
+      if (next && next.tagName === "P" && (!next.textContent || next.textContent.trim() === "") && next.innerHTML === "<br>") {
+        next.remove();
+      }
+      image.activeImage.value = null;
+      syncToModel();
+    }
+  });
+};
+const onContentClick = (e) => {
+  if (props.disabled) return;
+  const target = e.target;
+  if (!target) return;
+  if (!target.closest(".an-editor__table")) {
+    table.activeTable.value = null;
+  }
+  if (!target.closest(".an-editor__image")) {
+    image.activeImage.value = null;
+  }
+  const tableCell = target.closest("td, th");
+  if (tableCell) {
+    const tbl = tableCell.closest(".an-editor__table");
+    if (tbl) {
+      table.activeTable.value = { table: tbl, cell: tableCell };
+      return;
+    }
+  }
+  if (target.tagName === "A") {
+    e.preventDefault();
+    const a = target;
+    openPrompt({
+      title: "Edit link",
+      submitLabel: "Save",
+      deleteLabel: "Remove link",
+      fields: [
+        { key: "url", label: "URL", value: a.href },
+        { key: "text", label: "Text", value: a.textContent ?? "" }
+      ],
+      onSubmit: (values) => {
+        if (!values.url) return;
+        a.href = values.url;
+        a.textContent = values.text || values.url;
+        syncToModel();
+      },
+      onDelete: () => {
+        const text = document.createTextNode(a.textContent ?? "");
+        a.replaceWith(text);
+        syncToModel();
+      }
+    });
+    return;
+  }
+  const img = target.tagName === "IMG" ? target : null;
+  if (img) {
+    const figure = img.closest(".an-editor__image");
+    if (figure) {
+      image.activeImage.value = { img, figure };
+    }
+    return;
+  }
+  const ytDiv = target.closest(".an-editor__youtube");
+  if (ytDiv) {
+    const iframe = ytDiv.querySelector("iframe");
+    const src = iframe?.getAttribute("src") ?? "";
+    const ytMatch = src.match(/youtube(?:-nocookie)?\.com\/embed\/([A-Za-z0-9_-]{11})/);
+    const currentId = ytMatch ? ytMatch[1] : "";
+    openPrompt({
+      title: "Edit YouTube video",
+      submitLabel: "Save",
+      deleteLabel: "Delete",
+      fields: [
+        { key: "url", label: "URL", value: currentId ? `https://www.youtube.com/watch?v=${currentId}` : "" }
+      ],
+      onSubmit: (values) => {
+        const newId = extractYouTubeId(values.url ?? "");
+        if (!newId) return;
+        const newDiv = createYouTubeElement(newId);
+        ytDiv.replaceWith(newDiv);
+        syncToModel();
+      },
+      onDelete: () => {
+        const next = ytDiv.nextElementSibling;
+        ytDiv.remove();
+        if (next && next.tagName === "P" && (!next.textContent || next.textContent.trim() === "") && next.innerHTML === "<br>") {
+          next.remove();
+        }
+        syncToModel();
+      }
+    });
+    return;
+  }
+};
+const onPaste = (e) => {
+  e.preventDefault();
+  const text = e.clipboardData?.getData("text/plain") ?? "";
+  const ytId = extractYouTubeId(text);
+  if (ytId && /^https?:\/\//.test(text.trim())) {
+    const div = createYouTubeElement(ytId);
+    blocks.insertBlockAtCursor(div);
+    return;
+  }
+  const sel = selection.getSelection();
+  if (!sel) return;
+  sel.range.deleteContents();
+  sel.range.insertNode(document.createTextNode(text));
+  sel.range.collapse(false);
+  sel.selection.removeAllRanges();
+  sel.selection.addRange(sel.range);
+  syncToModel();
+};
+const onKeydown = (e) => {
+  if (props.disabled) return;
+  if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+    resetTypingStyle();
+  }
+  const mod = e.ctrlKey || e.metaKey;
+  if (mod && e.key === "z" && !e.shiftKey) {
+    e.preventDefault();
+    history.undo(emitMd, toMarkdown);
+    return;
+  }
+  if (mod && e.key === "z" && e.shiftKey) {
+    e.preventDefault();
+    history.redo(emitMd, toMarkdown);
+    return;
+  }
+  if (mod && e.key === "y") {
+    e.preventDefault();
+    history.redo(emitMd, toMarkdown);
+    return;
+  }
+  if (mod && e.key === "b") {
+    e.preventDefault();
+    onToolbarAction("bold");
+  }
+  if (mod && e.key === "i") {
+    e.preventDefault();
+    onToolbarAction("italic");
+  }
+  if (mod && e.key === "k") {
+    e.preventDefault();
+    onToolbarAction("link");
+  }
+  if (e.key === "Tab") {
+    const li = list.findParentLi();
+    if (li) {
+      e.preventDefault();
+      if (e.shiftKey) {
+        list.outdentListItem(li);
+      } else {
+        list.indentListItem(li);
+      }
+      return;
+    }
+  }
+  if (e.key === "Enter" && !e.shiftKey) {
+    const sel = selection.getSelection();
+    if (sel) {
+      let node = sel.range.commonAncestorContainer;
+      if (node.nodeType === Node.TEXT_NODE) node = node.parentNode;
+      const cell = node?.closest?.("td, th");
+      if (cell && refContent.value?.contains(cell)) {
+        e.preventDefault();
+        const br = document.createElement("br");
+        sel.range.deleteContents();
+        sel.range.insertNode(br);
+        sel.range.setStartAfter(br);
+        sel.range.collapse(true);
+        sel.selection.removeAllRanges();
+        sel.selection.addRange(sel.range);
+        syncToModel();
+        return;
+      }
+      const heading = node?.closest?.("h1, h2, h3, h4, h5, h6");
+      if (heading && refContent.value?.contains(heading)) {
+        e.preventDefault();
+        const p = document.createElement("p");
+        p.innerHTML = "<br>";
+        heading.parentNode.insertBefore(p, heading.nextSibling);
+        const range = document.createRange();
+        range.setStart(p, 0);
+        range.collapse(true);
+        sel.selection.removeAllRanges();
+        sel.selection.addRange(range);
+        syncToModel();
+        return;
+      }
+    }
+  }
+};
+const updateActiveFormats = () => {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return;
+  if (!refContent.value?.contains(sel.anchorNode)) {
+    activeFormats.value = /* @__PURE__ */ new Set();
+    return;
+  }
+  const formats = /* @__PURE__ */ new Set();
+  let node = sel.anchorNode;
+  while (node && node !== refContent.value) {
+    if (node instanceof HTMLElement) {
+      const tag = node.tagName.toLowerCase();
+      if (tag === "strong" || tag === "b") formats.add("bold");
+      if (tag === "em" || tag === "i") formats.add("italic");
+      if (tag === "s" || tag === "del" || tag === "strike") formats.add("strikethrough");
+      if (tag === "code" && node.parentElement?.tagName.toLowerCase() !== "pre") formats.add("code");
+      if (tag === "blockquote") formats.add("blockquote");
+      if (tag === "ul") formats.add("unorderedList");
+      if (tag === "ol") formats.add("orderedList");
+      if (/^h[1-6]$/.test(tag)) formats.add(tag);
+    }
+    node = node.parentNode;
+  }
+  activeFormats.value = formats;
+};
+const isEmpty = computed(() => {
+  const html = refContent.value?.innerHTML ?? "";
+  return !html || html === "<br>" || html === "<p><br></p>";
+});
+const throttledUpdateActiveFormats = useThrottleFn(updateActiveFormats, 100);
+useEventListener(document, "selectionchange", throttledUpdateActiveFormats);
+FileDialog.onChange((files) => {
+  if (!files?.length) return;
+  const file = files[0];
+  if (file) uploadAndInsert(file);
+  FileDialog.reset();
+});
+onMounted(() => {
+  if (refContent.value && props.modelValue) {
+    refContent.value.innerHTML = parseMarkdown(props.modelValue);
+    internalMd = props.modelValue;
+  }
+  history.pushHistory();
+});
+watch(() => props.modelValue, (newMd) => {
+  if (newMd === internalMd) return;
+  internalMd = newMd;
+  skipNextUpdate = true;
+  if (refContent.value) {
+    refContent.value.innerHTML = newMd ? parseMarkdown(newMd) : "";
+  }
+});
+defineExpose({ focus, clear });
+</script>
+
+<template>
+	<div
+		class="an-editor"
+		:class="{ '-disabled': disabled }"
+	>
+		<AnEditorToolbar
+			:active-formats="activeFormats"
+			:has-upload="!!upload"
+			@action="onToolbarAction"
+		/>
+
+		<div class="an-editor__body">
+			<div
+				ref="refContent"
+				class="an-editor__content"
+				:class="{ '-empty': isEmpty }"
+				:contenteditable="!disabled"
+				:data-placeholder="placeholder"
+				role="textbox"
+				aria-multiline="true"
+				:aria-disabled="disabled"
+				@input="syncToModel"
+				@keydown="onKeydown"
+				@compositionstart="isComposing = true"
+				@compositionend="isComposing = false;
+  syncToModel()"
+				@paste="onPaste"
+				@click="onContentClick"
+			/>
+
+			<!-- Table action bar -->
+			<div
+				v-if="table.activeTable.value"
+				class="an-editor__table-actions"
+				:style="table.tableActionsStyle.value"
+				@mousedown.prevent
+			>
+				<button v-if="table.canAddHeader.value" class="an-editor__table-action-btn" @click="table.tableAddHeader()">Add header</button>
+				<template v-if="!table.isHeaderCell.value">
+					<button class="an-editor__table-action-btn" @click="table.tableAddRow('above')">Add row above</button>
+					<button class="an-editor__table-action-btn" @click="table.tableAddRow('below')">Add row below</button>
+					<button class="an-editor__table-action-btn" @click="table.tableAddColumn('left')">Add column left</button>
+					<button class="an-editor__table-action-btn" @click="table.tableAddColumn('right')">Add column right</button>
+					<div class="an-editor__table-actions-divider" />
+					<button class="an-editor__table-action-btn -danger" @click="table.tableDeleteRow()">Delete row</button>
+				</template>
+				<button v-if="table.isHeaderCell.value" class="an-editor__table-action-btn -danger" @click="table.tableDeleteRow()">Delete header</button>
+				<button class="an-editor__table-action-btn -danger" @click="table.tableDeleteColumn()">Delete column</button>
+				<button class="an-editor__table-action-btn -danger" @click="table.tableDelete()">Delete table</button>
+			</div>
+
+			<!-- Image overlay -->
+			<div
+				v-if="image.activeImage.value"
+				class="an-editor__image-overlay"
+				:style="image.imageOverlayStyle.value"
+				@mousedown.prevent
+			>
+				<!-- Expand to 100% width button (top-right) -->
+				<button
+					class="an-editor__image-expand"
+					title="Expand to full width"
+					@click="image.imageExpandFull()"
+				>
+					<Icon name="aneditor:expand" />
+				</button>
+
+				<!-- Edit button (top-right, second) -->
+				<button
+					class="an-editor__image-edit"
+					title="Edit image"
+					@click="openImagePrompt(image.activeImage.value.img, image.activeImage.value.figure)"
+				>
+					<Icon name="aneditor:edit" />
+				</button>
+
+				<!-- Resize handle (bottom-right) -->
+				<div
+					class="an-editor__image-resize"
+					@mousedown="image.onImageResizeStart"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.an-editor{background:var(--an-editor-background,#fff);border:1px solid var(--an-editor-border,#e0e0e0);border-radius:8px;overflow:hidden}.an-editor:focus-within{border-color:var(--an-editor-border-focus,#7c83ff)}.an-editor.-disabled{opacity:.6;pointer-events:none}.an-editor__body{position:relative}.an-editor__content{font-size:var(--an-editor-font-size,15px);line-height:1.6;min-height:var(--an-editor-min-height,200px);outline:none;padding:16px}.an-editor__content.-empty:before{color:#999;content:attr(data-placeholder);pointer-events:none}.an-editor__content :deep(h1){font-size:2em;font-weight:700;margin:.5em 0}.an-editor__content :deep(h2){font-size:1.5em;font-weight:700;margin:.5em 0}.an-editor__content :deep(h3){font-size:1.17em;font-weight:700;margin:.5em 0}.an-editor__content :deep(h4){font-size:1em;font-weight:700;margin:.5em 0}.an-editor__content :deep(h5){font-size:.83em;font-weight:700;margin:.5em 0}.an-editor__content :deep(h6){font-size:.67em;font-weight:700;margin:.5em 0}.an-editor__content :deep(strong){font-weight:700}.an-editor__content :deep(em){font-style:italic}.an-editor__content :deep(s){text-decoration:line-through}.an-editor__content :deep(a){color:#7c83ff;cursor:pointer;text-decoration:underline}.an-editor__content :deep(blockquote){border-left:3px solid #e0e0e0;color:#666;margin:12px 0;padding-left:16px}.an-editor__content :deep(ol),.an-editor__content :deep(ul){margin:8px 0;padding-left:24px}.an-editor__content :deep(code){background:#f4f4f5;border-radius:4px;font-family:SF Mono,Fira Code,monospace;font-size:.9em;padding:2px 6px}.an-editor__content :deep(pre){background:#1e1e2e;border-radius:8px;color:#cdd6f4;margin:12px 0;min-height:3em;overflow-x:auto;padding:16px}.an-editor__content :deep(pre) code{background:none;border-radius:0;color:inherit;display:block;min-height:1.4em;outline:none;padding:0}.an-editor__content :deep(hr){border:none;border-top:2px solid #e0e0e0;margin:16px 0}.an-editor__content :deep(.an-editor__youtube){cursor:pointer;margin:12px 0}.an-editor__content :deep(.an-editor__youtube) iframe{aspect-ratio:16/9;border:none;border-radius:8px;pointer-events:none;width:100%}.an-editor__content :deep(.an-editor__image){cursor:pointer;margin:12px 0;position:relative}.an-editor__content :deep(.an-editor__image) img{border-radius:8px;display:block;max-width:100%;transition:filter .15s}.an-editor__content :deep(.an-editor__image):hover img{filter:brightness(.92)}.an-editor__content :deep(.an-editor__table){border-collapse:collapse;font-size:.95em;margin:12px 0;width:100%}.an-editor__content :deep(.an-editor__table) td,.an-editor__content :deep(.an-editor__table) th{border:1px solid #d0d5dd;box-sizing:border-box;cursor:text;line-height:1.5;min-width:60px;outline:none;padding:8px 12px;text-align:left}.an-editor__content :deep(.an-editor__table) th{background:#f4f5f7;font-weight:600}.an-editor__content :deep(.an-editor__table) tr:hover td{background:#f9fafb}.an-editor__content :deep(p){margin:8px 0}.an-editor__content :deep(p):first-child{margin-top:0}.an-editor__content :deep(p):last-child{margin-bottom:0}.an-editor__table-actions{background:#fff;border:1px solid #e8eaed;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.1);min-width:160px;padding:4px;position:absolute;z-index:10}.an-editor__table-actions-divider{background:#e8eaed;height:1px;margin:4px 0}.an-editor__table-action-btn{background:none;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;display:block;font-size:13px;padding:8px 12px;text-align:left;transition:background .1s;width:100%}.an-editor__table-action-btn:hover{background:#f4f5f7}.an-editor__table-action-btn.-danger{color:#ff6b6b}.an-editor__table-action-btn.-danger:hover{background:#fff5f5}.an-editor__image-overlay{border:2px solid #7c83ff;border-radius:8px;pointer-events:none;position:absolute;z-index:10}.an-editor__image-edit,.an-editor__image-expand{align-items:center;background:rgba(0,0,0,.55);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:18px;height:32px;justify-content:center;pointer-events:auto;position:absolute;top:8px;transition:background .15s;width:32px}.an-editor__image-edit:hover,.an-editor__image-expand:hover{background:rgba(0,0,0,.75)}.an-editor__image-expand{right:8px}.an-editor__image-edit{right:46px}.an-editor__image-resize{background:#7c83ff;border-radius:2px 0 8px 0;bottom:-2px;cursor:nwse-resize;height:16px;pointer-events:auto;position:absolute;right:-2px;width:16px}.an-editor__image-resize:before{border-bottom:2px solid #fff;border-right:2px solid #fff;bottom:3px;content:"";height:6px;position:absolute;right:3px;width:6px}
+</style>

package/dist/runtime/components/AnEditor/Editor.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/dist/runtime/components/AnEditor/Prompt.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { reactive } from "vue";
+const emit = defineEmits(["close"]);
+const props = defineProps({
+  params: { type: Object, required: true }
+});
+const form = reactive(
+  Object.fromEntries(props.params.fields.map((f) => [f.key, f.value ?? ""]))
+);
+const onSubmit = () => {
+  emit("close");
+  props.params.onSubmit(form);
+};
+const onDelete = () => {
+  emit("close");
+  props.params.onDelete?.();
+};
+</script>
+
+<template>
+	<div class="an-editor-prompt" @keydown.enter.prevent="onSubmit">
+		<h3 class="an-editor-prompt__title">{{ params.title }}</h3>
+
+		<div v-for="field in params.fields" :key="field.key" class="an-editor-prompt__field">
+			<label class="an-editor-prompt__label">{{ field.label }}</label>
+			<input
+				v-model="form[field.key]"
+				class="an-editor-prompt__input"
+				:placeholder="field.placeholder"
+				type="text"
+			/>
+		</div>
+
+		<div class="an-editor-prompt__actions">
+			<button class="an-editor-prompt__btn -primary" @click="onSubmit">
+				{{ params.submitLabel ?? "Insert" }}
+			</button>
+			<button v-if="params.onDelete" class="an-editor-prompt__btn -danger" @click="onDelete">
+				{{ params.deleteLabel ?? "Delete" }}
+			</button>
+			<button class="an-editor-prompt__btn -secondary" @click="emit('close')">
+				Cancel
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.an-editor-prompt{background:#fff;border-radius:12px;max-width:440px;min-width:360px;padding:24px}.an-editor-prompt__title{color:#1a1a2e;font-size:16px;font-weight:600;margin-bottom:16px}.an-editor-prompt__field{margin-bottom:12px}.an-editor-prompt__label{color:#344054;display:block;font-size:13px;font-weight:500;margin-bottom:4px}.an-editor-prompt__input{border:1px solid #d0d5dd;border-radius:6px;box-sizing:border-box;font-size:14px;outline:none;padding:8px 12px;transition:border-color .15s;width:100%}.an-editor-prompt__input:focus{border-color:#7c83ff}.an-editor-prompt__actions{display:flex;gap:8px;margin-top:16px}.an-editor-prompt__btn{border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;padding:8px 16px;transition:all .15s}.an-editor-prompt__btn.-primary{background:#7c83ff;color:#fff}.an-editor-prompt__btn.-primary:hover{background:#6269e0}.an-editor-prompt__btn.-secondary{background:#e8eaed;color:#1a1a2e}.an-editor-prompt__btn.-secondary:hover{background:#d0d5dd}.an-editor-prompt__btn.-danger{background:#ff6b6b;color:#fff;margin-left:auto}.an-editor-prompt__btn.-danger:hover{background:#e05555}
+</style>

package/dist/runtime/components/AnEditor/Prompt.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;