@anweb/nuxt-aneditor 0.1.3 → 0.1.5

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "AnEditor",
   "configKey": "aneditor",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -14,10 +14,12 @@ const module$1 = defineNuxtModule({
     const { resolve } = createResolver(import.meta.url);
     _nuxt.options.alias["#aneditor/types"] = resolve("./runtime/types");
     _nuxt.options.icon = _nuxt.options.icon || {};
-    _nuxt.options.icon.customCollections = [
-      ..._nuxt.options.icon.customCollections || [],
-      { prefix: "aneditor", dir: resolve("./runtime/assets/icons") }
-    ];
+    _nuxt.options.icon.customCollections = _nuxt.options.icon.customCollections || [];
+    _nuxt.options.icon.customCollections.push({ prefix: "aneditor", dir: resolve("./runtime/assets/icons") });
+    const appIcon = _nuxt.options.appConfig.icon || {};
+    _nuxt.options.appConfig.icon = appIcon;
+    appIcon.customCollections = appIcon.customCollections || [];
+    appIcon.customCollections.push("aneditor");
     addComponentsDir({
       path: resolve("./runtime/components")
     });

package/dist/runtime/assets/icons/iframe.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="2" y1="8" x2="22" y2="8"/><circle cx="5" cy="6" r="0.5" fill="currentColor"/><circle cx="7.5" cy="6" r="0.5" fill="currentColor"/><circle cx="10" cy="6" r="0.5" fill="currentColor"/></svg>

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

@@ -1,7 +1,7 @@
 <script setup>
-import { ref, computed, watch, onMounted } from "vue";
+import { ref, computed, watch, onMounted, nextTick } 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 { useTemplateRef, parseMarkdown, toMarkdown, extractYouTubeId, useAnDialogs, useSelection, useHistory, useBlocks, useTable, useEditorImage, useList } from "#imports";
 import { AnEditorToolbar, AnEditorPrompt } from "#components";
 const emit = defineEmits(["update:modelValue"]);
 const props = defineProps({
@@ -42,7 +42,7 @@ const syncToModel = () => {
 const history = useHistory(refContent, selection);
 const blocks = useBlocks(refContent, selection, syncToModel);
 const table = useTable(refContent, syncToModel);
-const image = useImage(refContent, syncToModel);
+const image = useEditorImage(refContent, syncToModel);
 const list = useList(refContent, selection, syncToModel, blocks.ensureBlockWrapped, blocks.isInsideCodeBlock);
 const focus = () => {
   refContent.value?.focus();
@@ -99,6 +99,12 @@ const cleanOrphanedFormatting = () => {
 const openPrompt = (params) => {
   Dialogs.open(AnEditorPrompt, { ...params });
 };
+const createHtmlElement = (html) => {
+  const div = document.createElement("div");
+  div.className = "an-editor__html";
+  div.innerHTML = html;
+  return div;
+};
 const createYouTubeElement = (ytId) => {
   const div = document.createElement("div");
   div.className = "an-editor__youtube";
@@ -260,6 +266,29 @@ const onToolbarAction = (type) => {
       });
       break;
     }
+    case "iframe": {
+      const savedBlock = blocks.getCurrentBlock();
+      openPrompt({
+        title: "Embed HTML",
+        fields: [
+          { key: "html", label: "HTML", placeholder: '<iframe src="https://..."></iframe>', type: "textarea" }
+        ],
+        onSubmit: (values) => {
+          if (!values.html) return;
+          const div = createHtmlElement(values.html);
+          const p = document.createElement("p");
+          p.innerHTML = "<br>";
+          if (savedBlock && savedBlock.parentNode) {
+            savedBlock.parentNode.insertBefore(div, savedBlock.nextSibling);
+          } else {
+            refContent.value?.appendChild(div);
+          }
+          div.parentNode.insertBefore(p, div.nextSibling);
+          syncToModel();
+        }
+      });
+      break;
+    }
     case "table": {
       openPrompt({
         title: "Insert table",
@@ -385,6 +414,33 @@ const onContentClick = (e) => {
     });
     return;
   }
+  const htmlDiv = target.closest(".an-editor__html");
+  if (htmlDiv) {
+    const currentHtml = htmlDiv.innerHTML.trim();
+    openPrompt({
+      title: "Edit HTML",
+      submitLabel: "Save",
+      deleteLabel: "Delete",
+      fields: [
+        { key: "html", label: "HTML", value: currentHtml, type: "textarea" }
+      ],
+      onSubmit: (values) => {
+        if (!values.html) return;
+        const newDiv = createHtmlElement(values.html);
+        htmlDiv.replaceWith(newDiv);
+        syncToModel();
+      },
+      onDelete: () => {
+        const next = htmlDiv.nextElementSibling;
+        htmlDiv.remove();
+        if (next && next.tagName === "P" && (!next.textContent || next.textContent.trim() === "") && next.innerHTML === "<br>") {
+          next.remove();
+        }
+        syncToModel();
+      }
+    });
+    return;
+  }
 };
 const onPaste = (e) => {
   e.preventDefault();
@@ -395,6 +451,12 @@ const onPaste = (e) => {
     blocks.insertBlockAtCursor(div);
     return;
   }
+  const trimmed = text.trim();
+  if (/^<\w/.test(trimmed) && /<\/\w+>$/.test(trimmed)) {
+    const div = createHtmlElement(trimmed);
+    blocks.insertBlockAtCursor(div);
+    return;
+  }
   const sel = selection.getSelection();
   if (!sel) return;
   sel.range.deleteContents();
@@ -509,10 +571,7 @@ const updateActiveFormats = () => {
   }
   activeFormats.value = formats;
 };
-const isEmpty = computed(() => {
-  const html = refContent.value?.innerHTML ?? "";
-  return !html || html === "<br>" || html === "<p><br></p>";
-});
+const isEmpty = computed(() => !props.modelValue);
 const throttledUpdateActiveFormats = useThrottleFn(updateActiveFormats, 100);
 useEventListener(document, "selectionchange", throttledUpdateActiveFormats);
 FileDialog.onChange((files) => {
@@ -522,11 +581,13 @@ FileDialog.onChange((files) => {
   FileDialog.reset();
 });
 onMounted(() => {
-  if (refContent.value && props.modelValue) {
-    refContent.value.innerHTML = parseMarkdown(props.modelValue);
-    internalMd = props.modelValue;
-  }
-  history.pushHistory();
+  nextTick(() => {
+    if (refContent.value && props.modelValue && !internalMd) {
+      refContent.value.innerHTML = parseMarkdown(props.modelValue);
+      internalMd = props.modelValue;
+    }
+    history.pushHistory();
+  });
 });
 watch(() => props.modelValue, (newMd) => {
   if (newMd === internalMd) return;
@@ -626,5 +687,5 @@ defineExpose({ focus, clear });
 </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}
+.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;width:100%}.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__html){cursor:pointer;margin:12px 0;width:100%}.an-editor__content :deep(.an-editor__html)>*{pointer-events:none}.an-editor__content :deep(.an-editor__html) iframe{border:none;border-radius:8px;min-height:300px;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/Prompt.vue

@@ -23,7 +23,15 @@ const onDelete = () => {
 
 		<div v-for="field in params.fields" :key="field.key" class="an-editor-prompt__field">
 			<label class="an-editor-prompt__label">{{ field.label }}</label>
+			<textarea
+				v-if="field.type === 'textarea'"
+				v-model="form[field.key]"
+				class="an-editor-prompt__input -textarea"
+				:placeholder="field.placeholder"
+				@keydown.enter.stop
+			/>
 			<input
+				v-else
 				v-model="form[field.key]"
 				class="an-editor-prompt__input"
 				:placeholder="field.placeholder"
@@ -46,5 +54,5 @@ const onDelete = () => {
 </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}
+.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__input.-textarea{font-family:SF Mono,Fira Code,monospace;font-size:13px;line-height:1.5;min-height:120px;resize:vertical}.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/Toolbar.vue

@@ -182,6 +182,13 @@ const isActive = (format) => {
 			>
 				<Icon name="aneditor:youtube" />
 			</button>
+			<button
+				class="an-editor-toolbar__btn"
+				title="Embed iframe"
+				@click.prevent="onAction('iframe')"
+			>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><rect x="2" y="4" width="20" height="16" rx="2"/><line x1="2" y1="8" x2="22" y2="8"/><circle cx="5" cy="6" r="0.5" fill="currentColor"/><circle cx="7.5" cy="6" r="0.5" fill="currentColor"/><circle cx="10" cy="6" r="0.5" fill="currentColor"/></svg>
+			</button>
 		</div>
 	</div>
 </template>

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

@@ -12,5 +12,5 @@ const html = computed(() => parseMarkdown(props.content));
 </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}
+.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;width:100%}.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__html){margin:12px 0;width:100%}.an-editor-viewer :deep(.an-editor__html) iframe{border:none;border-radius:8px;min-height:300px;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/composables/useImage.d.ts

@@ -1,5 +1,5 @@
 import { type Ref } from 'vue';
-export declare const useImage: (refContent: Ref<HTMLDivElement | null>, syncToModel: () => void) => {
+export declare const useEditorImage: (refContent: Ref<HTMLDivElement | null>, syncToModel: () => void) => {
     activeImage: Ref<{
         img: HTMLImageElement;
         figure: HTMLElement;

package/dist/runtime/composables/useImage.js

@@ -1,6 +1,6 @@
 import { ref, computed, nextTick, onScopeDispose } from "vue";
 import { useThrottleFn } from "@vueuse/core";
-export const useImage = (refContent, syncToModel) => {
+export const useEditorImage = (refContent, syncToModel) => {
   const activeImage = ref(null);
   const imageResizing = ref(null);
   const createImageElement = (url, alt = "") => {

package/dist/runtime/utils/parseMarkdown.js

@@ -54,6 +54,10 @@ export const parseMarkdown = (md) => {
       output.push(`<div class="an-editor__youtube"><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></div>`);
       continue;
     }
+    if (/^<(?!img\s)/i.test(block) && /<\/\w+>$/.test(block)) {
+      output.push(`<div class="an-editor__html">${block}</div>`);
+      continue;
+    }
     const imgMatch = block.match(/^!\[([^\]]*)\]\(([^)]+)\)$/);
     if (imgMatch) {
       output.push(`<figure class="an-editor__image"><img src="${escapeHtml(imgMatch[2])}" alt="${escapeHtml(imgMatch[1])}" /></figure>`);

package/dist/runtime/utils/toMarkdown.js

@@ -206,6 +206,10 @@ ${content}
         }
       }
     }
+    if (tag === "div" && el.classList.contains("an-editor__html")) {
+      result += el.innerHTML.trim() + "\n\n";
+      continue;
+    }
     if (tag === "p") {
       const inner = walkNodes(el).trim();
       if (inner) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@anweb/nuxt-aneditor",
-	"version": "0.1.3",
+	"version": "0.1.5",
 	"description": "AnEditor Nuxt module — WYSIWYG markdown editor",
 	"repository": "https://github.com/ANLTD/aneditor",
 	"license": "MIT",