@anweb/nuxt-aneditor 0.1.1

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

@@ -0,0 +1,191 @@
+<script setup>
+import { AnDropdown, Icon } from "#components";
+const emit = defineEmits(["action"]);
+const props = defineProps({
+  activeFormats: { type: Set, required: false },
+  hasUpload: { type: Boolean, required: false }
+});
+const onAction = (type, event) => {
+  event?.preventDefault();
+  emit("action", type);
+};
+const isActive = (format) => {
+  return props.activeFormats?.has(format) ?? false;
+};
+</script>
+
+<template>
+	<div class="an-editor-toolbar" role="toolbar">
+		<!-- Undo / Redo -->
+		<div class="an-editor-toolbar__group">
+			<button
+				class="an-editor-toolbar__btn"
+				title="Undo (Ctrl+Z)"
+				@mousedown.prevent="onAction('undo')"
+			>
+				<Icon name="aneditor:undo" />
+			</button>
+			<button
+				class="an-editor-toolbar__btn"
+				title="Redo (Ctrl+Shift+Z)"
+				@mousedown.prevent="onAction('redo')"
+			>
+				<Icon name="aneditor:redo" />
+			</button>
+		</div>
+
+		<!-- Text formatting -->
+		<div class="an-editor-toolbar__group">
+			<button
+				class="an-editor-toolbar__btn"
+				:class="{ '-active': isActive('bold') }"
+				title="Bold (Ctrl+B)"
+				@mousedown.prevent="onAction('bold')"
+			>
+				<Icon name="aneditor:bold" />
+			</button>
+			<button
+				class="an-editor-toolbar__btn"
+				:class="{ '-active': isActive('italic') }"
+				title="Italic (Ctrl+I)"
+				@mousedown.prevent="onAction('italic')"
+			>
+				<Icon name="aneditor:italic" />
+			</button>
+			<button
+				class="an-editor-toolbar__btn"
+				:class="{ '-active': isActive('strikethrough') }"
+				title="Strikethrough"
+				@mousedown.prevent="onAction('strikethrough')"
+			>
+				<Icon name="aneditor:strikethrough" />
+			</button>
+			<AnDropdown area="bottom span-right">
+				<template #button="{ toggle }">
+					<button
+						class="an-editor-toolbar__btn"
+						:class="{ '-active': isActive('h1') || isActive('h2') || isActive('h3') || isActive('h4') || isActive('h5') || isActive('h6') }"
+						title="Heading"
+						@mousedown.prevent="toggle()"
+					>
+						<Icon name="aneditor:heading" />
+					</button>
+				</template>
+				<template #menu="{ close }">
+					<div class="an-editor-toolbar__submenu">
+						<button v-for="n in 6" :key="n" class="an-editor-toolbar__submenu-item" :class="{ '-active': isActive(`h${n}`) }" @mousedown.prevent="onAction(`h${n}`);
+  close()">
+							H{{ n }}
+						</button>
+					</div>
+				</template>
+			</AnDropdown>
+		</div>
+
+		<!-- Lists & structure -->
+		<div class="an-editor-toolbar__group">
+			<button
+				class="an-editor-toolbar__btn"
+				:class="{ '-active': isActive('unorderedList') }"
+				title="Bullet list"
+				@mousedown.prevent="onAction('unorderedList')"
+			>
+				<Icon name="aneditor:unordered-list" />
+			</button>
+			<button
+				class="an-editor-toolbar__btn"
+				:class="{ '-active': isActive('orderedList') }"
+				title="Numbered list"
+				@mousedown.prevent="onAction('orderedList')"
+			>
+				<Icon name="aneditor:ordered-list" />
+			</button>
+			<button
+				class="an-editor-toolbar__btn"
+				:class="{ '-active': isActive('blockquote') }"
+				title="Blockquote"
+				@mousedown.prevent="onAction('blockquote')"
+			>
+				<Icon name="aneditor:blockquote" />
+			</button>
+			<button
+				class="an-editor-toolbar__btn"
+				title="Horizontal rule"
+				@mousedown.prevent="onAction('horizontalRule')"
+			>
+				<Icon name="aneditor:horizontal-rule" />
+			</button>
+			<button
+				class="an-editor-toolbar__btn"
+				title="Insert table"
+				@click.prevent="onAction('table')"
+			>
+				<Icon name="aneditor:table" />
+			</button>
+		</div>
+
+		<!-- Code -->
+		<div class="an-editor-toolbar__group">
+			<button
+				class="an-editor-toolbar__btn"
+				:class="{ '-active': isActive('code') }"
+				title="Inline code"
+				@mousedown.prevent="onAction('code')"
+			>
+				<Icon name="aneditor:code" />
+			</button>
+			<button
+				class="an-editor-toolbar__btn"
+				title="Code block"
+				@mousedown.prevent="onAction('codeBlock')"
+			>
+				<Icon name="aneditor:code-block" />
+			</button>
+		</div>
+
+		<!-- Media -->
+		<div class="an-editor-toolbar__group">
+			<button
+				class="an-editor-toolbar__btn"
+				title="Insert link (Ctrl+K)"
+				@click.prevent="onAction('link')"
+			>
+				<Icon name="aneditor:link" />
+			</button>
+			<AnDropdown area="bottom span-right">
+				<template #button="{ toggle }">
+					<button
+						class="an-editor-toolbar__btn"
+						title="Insert image"
+						@mousedown.prevent="toggle()"
+					>
+						<Icon name="aneditor:image" />
+					</button>
+				</template>
+				<template #menu="{ close }">
+					<div class="an-editor-toolbar__submenu">
+						<button class="an-editor-toolbar__submenu-item" @click.prevent="onAction('image');
+  close()">
+							By URL
+						</button>
+						<button v-if="hasUpload" class="an-editor-toolbar__submenu-item" @mousedown.prevent="onAction('imageUpload');
+  close()">
+							Upload
+						</button>
+					</div>
+				</template>
+			</AnDropdown>
+			<button
+				class="an-editor-toolbar__btn"
+				title="YouTube video"
+				@click.prevent="onAction('youtube')"
+			>
+				<Icon name="aneditor:youtube" />
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.an-editor-toolbar{background:var(--an-editor-toolbar-background,#fafafa);border-bottom:1px solid var(--an-editor-border,#e0e0e0);border-radius:8px 8px 0 0;flex-wrap:wrap;padding:8px 12px}.an-editor-toolbar,.an-editor-toolbar__group{align-items:center;display:flex;gap:2px}.an-editor-toolbar__group:not(:last-child):after{background:var(--an-editor-border,#e0e0e0);content:"";height:20px;margin:0 6px;width:1px}.an-editor-toolbar__btn{align-items:center;background:none;border:none;border-radius:6px;color:#555;cursor:pointer;display:flex;font-size:18px;height:32px;justify-content:center;transition:all .15s;width:32px}.an-editor-toolbar__btn:hover{background:rgba(0,0,0,.06);color:#1a1a2e}.an-editor-toolbar__btn.-active{background:rgba(124,131,255,.15);color:#7c83ff}.an-editor-toolbar__submenu{background:#fff;border:1px solid #e8eaed;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.1);min-width:120px;padding:4px}.an-editor-toolbar__submenu-item{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-toolbar__submenu-item:hover{background:#f4f5f7}.an-editor-toolbar__submenu-item.-active{color:#7c83ff;font-weight:600}
+</style>

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

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

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

@@ -0,0 +1,16 @@
+<script setup>
+import { computed } from "vue";
+import { parseMarkdown } from "#imports";
+const props = defineProps({
+  content: { type: String, required: true }
+});
+const html = computed(() => parseMarkdown(props.content));
+</script>
+
+<template>
+	<div class="an-editor-viewer" v-html="html" />
+</template>
+
+<style scoped>
+.an-editor-viewer{font-size:var(--an-editor-font-size,15px);line-height:1.6}.an-editor-viewer :deep(h1){font-size:2em;font-weight:700;margin:.5em 0}.an-editor-viewer :deep(h2){font-size:1.5em;font-weight:700;margin:.5em 0}.an-editor-viewer :deep(h3){font-size:1.17em;font-weight:700;margin:.5em 0}.an-editor-viewer :deep(h4){font-size:1em;font-weight:700;margin:.5em 0}.an-editor-viewer :deep(h5){font-size:.83em;font-weight:700;margin:.5em 0}.an-editor-viewer :deep(h6){font-size:.67em;font-weight:700;margin:.5em 0}.an-editor-viewer :deep(strong){font-weight:700}.an-editor-viewer :deep(em){font-style:italic}.an-editor-viewer :deep(s){text-decoration:line-through}.an-editor-viewer :deep(a){color:#7c83ff;text-decoration:underline}.an-editor-viewer :deep(blockquote){border-left:3px solid #e0e0e0;color:#666;margin:12px 0;padding-left:16px}.an-editor-viewer :deep(ol),.an-editor-viewer :deep(ul){margin:8px 0;padding-left:24px}.an-editor-viewer :deep(code){background:#f4f4f5;border-radius:4px;font-family:SF Mono,Fira Code,monospace;font-size:.9em;padding:2px 6px}.an-editor-viewer :deep(pre){background:#1e1e2e;border-radius:8px;color:#cdd6f4;margin:12px 0;min-height:3em;overflow-x:auto;padding:16px}.an-editor-viewer :deep(pre) code{background:none;border-radius:0;color:inherit;display:block;min-height:1.4em;padding:0}.an-editor-viewer :deep(hr){border:none;border-top:2px solid #e0e0e0;margin:16px 0}.an-editor-viewer :deep(.an-editor__youtube){margin:12px 0}.an-editor-viewer :deep(.an-editor__youtube) iframe{aspect-ratio:16/9;border:none;border-radius:8px;width:100%}.an-editor-viewer :deep(.an-editor__image){margin:12px 0}.an-editor-viewer :deep(.an-editor__image) img{border-radius:8px;display:block;max-width:100%}.an-editor-viewer :deep(.an-editor__table){border-collapse:collapse;font-size:.95em;margin:12px 0;width:100%}.an-editor-viewer :deep(.an-editor__table) td,.an-editor-viewer :deep(.an-editor__table) th{border:1px solid #d0d5dd;box-sizing:border-box;line-height:1.5;min-width:60px;padding:8px 12px;text-align:left}.an-editor-viewer :deep(.an-editor__table) th{background:#f4f5f7;font-weight:600}.an-editor-viewer :deep(.an-editor__table) tr:hover td{background:#f9fafb}.an-editor-viewer :deep(p){margin:8px 0}.an-editor-viewer :deep(p):first-child{margin-top:0}.an-editor-viewer :deep(p):last-child{margin-bottom:0}
+</style>

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

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

package/dist/runtime/composables/useBlocks.d.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'vue';
+import type { useSelection } from './useSelection.js';
+type TSelectionUtils = ReturnType<typeof useSelection>;
+export declare const useBlocks: (refContent: Ref<HTMLDivElement | null>, sel: TSelectionUtils, syncToModel: () => void) => {
+    BLOCK_TAGS: Set<string>;
+    getCurrentBlock: () => HTMLElement | null;
+    isInsideCodeBlock: () => boolean;
+    ensureBlockWrapped: () => HTMLElement | null;
+    replaceBlock: (tagName: string) => void;
+    insertBlockAtCursor: (element: HTMLElement) => void;
+    wrapBlockInTag: (tagName: string) => void;
+    wrapSelection: (tagName: string, className?: string) => void;
+    normalizeContent: () => void;
+};
+export {};

package/dist/runtime/composables/useBlocks.js

@@ -0,0 +1,258 @@
+const BLOCK_TAGS = /* @__PURE__ */ new Set([
+  "p",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "ul",
+  "ol",
+  "li",
+  "blockquote",
+  "pre",
+  "hr",
+  "table",
+  "figure",
+  "div"
+]);
+export const useBlocks = (refContent, sel, syncToModel) => {
+  const getCurrentBlock = () => {
+    const s = sel.getSelection();
+    if (!s) return null;
+    let node = s.range.commonAncestorContainer;
+    if (node.nodeType === Node.TEXT_NODE) node = node.parentNode;
+    while (node && node !== refContent.value && node.parentNode !== refContent.value) {
+      node = node.parentNode;
+    }
+    return node && node !== refContent.value ? node : null;
+  };
+  const isInsideCodeBlock = () => {
+    const s = sel.getSelection();
+    if (!s) return false;
+    let node = s.range.commonAncestorContainer;
+    if (node.nodeType === Node.TEXT_NODE) node = node.parentNode;
+    while (node && node !== refContent.value) {
+      if (node instanceof HTMLElement && node.tagName.toLowerCase() === "pre") return true;
+      node = node.parentNode;
+    }
+    return false;
+  };
+  const ensureBlockWrapped = () => {
+    const block = getCurrentBlock();
+    if (block && BLOCK_TAGS.has(block.tagName.toLowerCase())) return block;
+    const s = sel.getSelection();
+    if (!s) return null;
+    let directChild = s.range.commonAncestorContainer;
+    if (directChild.nodeType === Node.TEXT_NODE) directChild = directChild.parentNode;
+    while (directChild && directChild.parentNode !== refContent.value) {
+      directChild = directChild.parentNode;
+    }
+    if (!directChild || directChild === refContent.value) {
+      if (!refContent.value) return null;
+      const p2 = document.createElement("p");
+      p2.innerHTML = "<br>";
+      refContent.value.appendChild(p2);
+      return p2;
+    }
+    const p = document.createElement("p");
+    refContent.value.insertBefore(p, directChild);
+    p.appendChild(directChild);
+    return p;
+  };
+  const replaceBlock = (tagName) => {
+    if (isInsideCodeBlock()) return;
+    const block = ensureBlockWrapped();
+    if (!block) return;
+    const offset = sel.getCaretOffset(block);
+    if (block.tagName.toLowerCase() === tagName.toLowerCase()) {
+      const p = document.createElement("p");
+      p.innerHTML = block.innerHTML;
+      block.replaceWith(p);
+      sel.restoreCaretOffset(p, offset);
+      syncToModel();
+      return;
+    }
+    const newEl = document.createElement(tagName);
+    newEl.innerHTML = block.innerHTML;
+    block.replaceWith(newEl);
+    sel.restoreCaretOffset(newEl, offset);
+    syncToModel();
+  };
+  const insertBlockAtCursor = (element) => {
+    const s = sel.getSelection();
+    if (!s) {
+      refContent.value?.appendChild(element);
+    } else {
+      const block = getCurrentBlock();
+      if (block) {
+        block.parentNode.insertBefore(element, block.nextSibling);
+      } else {
+        refContent.value.appendChild(element);
+      }
+    }
+    const p = document.createElement("p");
+    p.innerHTML = "<br>";
+    element.parentNode.insertBefore(p, element.nextSibling);
+    const range = document.createRange();
+    range.setStart(p, 0);
+    range.collapse(true);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    syncToModel();
+  };
+  const wrapBlockInTag = (tagName) => {
+    if (isInsideCodeBlock()) return;
+    const block = ensureBlockWrapped();
+    if (!block) return;
+    const offset = sel.getCaretOffset(block);
+    if (block.tagName.toLowerCase() === tagName.toLowerCase()) {
+      const p = document.createElement("p");
+      p.innerHTML = block.innerHTML;
+      block.replaceWith(p);
+      sel.restoreCaretOffset(p, offset);
+      syncToModel();
+      return;
+    }
+    const wrapper = document.createElement(tagName);
+    wrapper.innerHTML = `<p>${block.innerHTML}</p>`;
+    block.replaceWith(wrapper);
+    sel.restoreCaretOffset(wrapper, offset);
+    syncToModel();
+  };
+  const wrapSelection = (tagName, className) => {
+    const s = sel.getSelection();
+    if (!s) return;
+    if (isInsideCodeBlock()) return;
+    const { selection, range } = s;
+    let node = range.commonAncestorContainer;
+    if (node.nodeType === Node.TEXT_NODE) node = node.parentNode;
+    while (node && node !== refContent.value) {
+      if (node instanceof HTMLElement && node.tagName.toLowerCase() === tagName.toLowerCase()) {
+        const wrapper = node;
+        const parent = wrapper.parentNode;
+        const wrapperRange = document.createRange();
+        wrapperRange.selectNodeContents(wrapper);
+        const coversAll = range.compareBoundaryPoints(Range.START_TO_START, wrapperRange) <= 0 && range.compareBoundaryPoints(Range.END_TO_END, wrapperRange) >= 0;
+        if (coversAll) {
+          const offsets = sel.getSelectionOffsets(parent);
+          while (wrapper.firstChild) {
+            parent.insertBefore(wrapper.firstChild, wrapper);
+          }
+          parent.removeChild(wrapper);
+          parent.normalize();
+          sel.restoreSelectionOffsets(parent, offsets.start, offsets.end);
+        } else {
+          const beforeRange = document.createRange();
+          beforeRange.setStart(wrapperRange.startContainer, wrapperRange.startOffset);
+          beforeRange.setEnd(range.startContainer, range.startOffset);
+          const afterRange = document.createRange();
+          afterRange.setStart(range.endContainer, range.endOffset);
+          afterRange.setEnd(wrapperRange.endContainer, wrapperRange.endOffset);
+          const beforeContent = beforeRange.cloneContents();
+          const selectedContent = range.cloneContents();
+          const afterContent = afterRange.cloneContents();
+          const frag = document.createDocumentFragment();
+          if (beforeContent.textContent) {
+            const beforeEl = document.createElement(tagName);
+            if (className) beforeEl.className = className;
+            beforeEl.appendChild(beforeContent);
+            frag.appendChild(beforeEl);
+          }
+          frag.appendChild(selectedContent);
+          if (afterContent.textContent) {
+            const afterEl = document.createElement(tagName);
+            if (className) afterEl.className = className;
+            afterEl.appendChild(afterContent);
+            frag.appendChild(afterEl);
+          }
+          const parentOffsets = sel.getSelectionOffsets(parent);
+          parent.replaceChild(frag, wrapper);
+          parent.normalize();
+          sel.restoreSelectionOffsets(parent, parentOffsets.start, parentOffsets.end);
+        }
+        syncToModel();
+        return;
+      }
+      node = node.parentNode;
+    }
+    if (range.collapsed) return;
+    try {
+      const wrapper = document.createElement(tagName);
+      if (className) wrapper.className = className;
+      range.surroundContents(wrapper);
+      const newRange = document.createRange();
+      newRange.selectNodeContents(wrapper);
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+    } catch {
+      const fragment = range.extractContents();
+      const wrapper = document.createElement(tagName);
+      if (className) wrapper.className = className;
+      wrapper.appendChild(fragment);
+      range.insertNode(wrapper);
+      const newRange = document.createRange();
+      newRange.selectNodeContents(wrapper);
+      selection.removeAllRanges();
+      selection.addRange(newRange);
+    }
+    syncToModel();
+  };
+  const normalizeContent = () => {
+    if (!refContent.value) return;
+    let caretSaved = false;
+    let caretOffset = 0;
+    const saveCaret = () => {
+      if (!caretSaved) {
+        caretOffset = sel.getCaretOffsetInContent();
+        caretSaved = true;
+      }
+    };
+    for (const node of Array.from(refContent.value.childNodes)) {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node;
+        if (el.tagName.toLowerCase() === "div" && !el.classList.length) {
+          saveCaret();
+          const p = document.createElement("p");
+          p.innerHTML = el.innerHTML;
+          el.replaceWith(p);
+        }
+      }
+    }
+    const children = Array.from(refContent.value.childNodes);
+    let i = 0;
+    while (i < children.length) {
+      const node = children[i];
+      const isBareInline = node.nodeType === Node.TEXT_NODE ? !!node.textContent?.trim() : node.nodeType === Node.ELEMENT_NODE && !BLOCK_TAGS.has(node.tagName.toLowerCase());
+      if (isBareInline) {
+        saveCaret();
+        const p = document.createElement("p");
+        refContent.value.insertBefore(p, node);
+        while (i < children.length) {
+          const n = children[i];
+          const isInline = n.nodeType === Node.TEXT_NODE || n.nodeType === Node.ELEMENT_NODE && !BLOCK_TAGS.has(n.tagName.toLowerCase());
+          if (!isInline) break;
+          p.appendChild(n);
+          i++;
+        }
+        continue;
+      }
+      i++;
+    }
+    if (caretSaved) {
+      sel.restoreCaretOffset(refContent.value, caretOffset);
+    }
+  };
+  return {
+    BLOCK_TAGS,
+    getCurrentBlock,
+    isInsideCodeBlock,
+    ensureBlockWrapped,
+    replaceBlock,
+    insertBlockAtCursor,
+    wrapBlockInTag,
+    wrapSelection,
+    normalizeContent
+  };
+};

package/dist/runtime/composables/useHistory.d.ts

@@ -0,0 +1,12 @@
+import type { Ref } from 'vue';
+import type { useSelection } from './useSelection.js';
+type TSelectionUtils = ReturnType<typeof useSelection>;
+export declare const useHistory: (refContent: Ref<HTMLDivElement | null>, selection: TSelectionUtils, options?: {
+    limit?: number;
+}) => {
+    pushHistory: () => void;
+    undo: (emit: (md: string) => void, toMarkdown: (html: string) => string) => void;
+    redo: (emit: (md: string) => void, toMarkdown: (html: string) => string) => void;
+    readonly isUndoRedo: boolean;
+};
+export {};

package/dist/runtime/composables/useHistory.js

@@ -0,0 +1,56 @@
+export const useHistory = (refContent, selection, options = {}) => {
+  const HISTORY_LIMIT = options.limit ?? 50;
+  const history = [];
+  let historyIndex = -1;
+  let isUndoRedo = false;
+  const pushHistory = () => {
+    if (!refContent.value) return;
+    const html = refContent.value.innerHTML;
+    const caretOffset = selection.getCaretOffsetInContent();
+    if (historyIndex >= 0 && history[historyIndex].html === html) return;
+    history.splice(historyIndex + 1);
+    history.push({ html, caretOffset });
+    if (history.length > HISTORY_LIMIT) {
+      history.shift();
+    }
+    historyIndex = history.length - 1;
+  };
+  const applyHistory = (emit, toMarkdown) => {
+    const entry = history[historyIndex];
+    if (!entry || !refContent.value) return;
+    isUndoRedo = true;
+    refContent.value.innerHTML = entry.html;
+    selection.restoreCaretOffset(refContent.value, entry.caretOffset);
+    const html = refContent.value.innerHTML;
+    const md = toMarkdown(html);
+    emit(md);
+    isUndoRedo = false;
+  };
+  const undo = (emit, toMarkdown) => {
+    if (historyIndex <= 0 || !refContent.value) return;
+    if (historyIndex === history.length - 1) {
+      const html = refContent.value.innerHTML;
+      const caretOffset = selection.getCaretOffsetInContent();
+      if (history[historyIndex].html !== html) {
+        history.splice(historyIndex + 1);
+        history.push({ html, caretOffset });
+        historyIndex = history.length - 1;
+      }
+    }
+    historyIndex--;
+    applyHistory(emit, toMarkdown);
+  };
+  const redo = (emit, toMarkdown) => {
+    if (historyIndex >= history.length - 1 || !refContent.value) return;
+    historyIndex++;
+    applyHistory(emit, toMarkdown);
+  };
+  return {
+    pushHistory,
+    undo,
+    redo,
+    get isUndoRedo() {
+      return isUndoRedo;
+    }
+  };
+};

package/dist/runtime/composables/useImage.d.ts

@@ -0,0 +1,27 @@
+import { type Ref } from 'vue';
+export declare const useImage: (refContent: Ref<HTMLDivElement | null>, syncToModel: () => void) => {
+    activeImage: Ref<{
+        img: HTMLImageElement;
+        figure: HTMLElement;
+    } | null, {
+        img: HTMLImageElement;
+        figure: HTMLElement;
+    } | {
+        img: HTMLImageElement;
+        figure: HTMLElement;
+    } | null>;
+    createImageElement: (url: string, alt?: string) => HTMLElement;
+    imageOverlayStyle: import("vue").ComputedRef<{
+        top?: undefined;
+        left?: undefined;
+        width?: undefined;
+        height?: undefined;
+    } | {
+        top: string;
+        left: string;
+        width: string;
+        height: string;
+    }>;
+    onImageResizeStart: (e: MouseEvent) => void;
+    imageExpandFull: () => void;
+};

package/dist/runtime/composables/useImage.js

@@ -0,0 +1,81 @@
+import { ref, computed, nextTick, onScopeDispose } from "vue";
+import { useThrottleFn } from "@vueuse/core";
+export const useImage = (refContent, syncToModel) => {
+  const activeImage = ref(null);
+  const imageResizing = ref(null);
+  const createImageElement = (url, alt = "") => {
+    const figure = document.createElement("figure");
+    figure.className = "an-editor__image";
+    const img = document.createElement("img");
+    img.src = url;
+    img.alt = alt;
+    figure.appendChild(img);
+    return figure;
+  };
+  const imageOverlayStyle = computed(() => {
+    if (!activeImage.value) return {};
+    const editorRect = refContent.value?.getBoundingClientRect();
+    if (!editorRect) return {};
+    const rect = activeImage.value.img.getBoundingClientRect();
+    return {
+      top: `${rect.top - editorRect.top}px`,
+      left: `${rect.left - editorRect.left}px`,
+      width: `${rect.width}px`,
+      height: `${rect.height}px`
+    };
+  });
+  const onImageResizeMove = useThrottleFn((e) => {
+    if (!imageResizing.value) return;
+    const { startX, startWidth, img } = imageResizing.value;
+    const delta = e.clientX - startX;
+    const newWidth = Math.max(80, startWidth + delta);
+    const maxWidth = refContent.value?.clientWidth ?? 800;
+    img.style.width = `${Math.min(newWidth, maxWidth)}px`;
+    activeImage.value = { ...activeImage.value };
+  }, 32);
+  const handleResizeMove = (e) => onImageResizeMove(e);
+  const handleResizeEnd = () => {
+    if (!imageResizing.value) return;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    imageResizing.value = null;
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", handleResizeEnd);
+    syncToModel();
+  };
+  const onImageResizeStart = (e) => {
+    if (!activeImage.value) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const { img } = activeImage.value;
+    document.body.style.cursor = "nwse-resize";
+    document.body.style.userSelect = "none";
+    imageResizing.value = {
+      startX: e.clientX,
+      startWidth: img.offsetWidth,
+      img
+    };
+    document.addEventListener("mousemove", handleResizeMove);
+    document.addEventListener("mouseup", handleResizeEnd);
+  };
+  const imageExpandFull = () => {
+    if (!activeImage.value) return;
+    const { img } = activeImage.value;
+    img.style.width = "100%";
+    nextTick(() => {
+      activeImage.value = { ...activeImage.value };
+    });
+    syncToModel();
+  };
+  onScopeDispose(() => {
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", handleResizeEnd);
+  });
+  return {
+    activeImage,
+    createImageElement,
+    imageOverlayStyle,
+    onImageResizeStart,
+    imageExpandFull
+  };
+};

package/dist/runtime/composables/useList.d.ts

@@ -0,0 +1,10 @@
+import type { Ref } from 'vue';
+import type { useSelection } from './useSelection.js';
+type TSelectionUtils = ReturnType<typeof useSelection>;
+export declare const useList: (refContent: Ref<HTMLDivElement | null>, sel: TSelectionUtils, syncToModel: () => void, ensureBlockWrapped: () => HTMLElement | null, isInsideCodeBlock: () => boolean) => {
+    findParentLi: () => HTMLElement | null;
+    indentListItem: (li: HTMLElement) => void;
+    outdentListItem: (li: HTMLElement) => void;
+    convertToList: (tagName: "ul" | "ol") => void;
+};
+export {};