@seorii/tiptap 0.4.1 → 0.4.2

package/dist/i18n/es/index.d.ts

@@ -0,0 +1,51 @@
+declare const _default: {
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: string;
+    default: string;
+    auto: string;
+    title: string;
+    paragraph: string;
+    link: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    alignJustify: string;
+    unorderedList: string;
+    numberList: string;
+    codeBlock: string;
+    mathBlock: string;
+    table: string;
+    twoColumns: string;
+    threeColumns: string;
+    image: string;
+    iframe: string;
+    youtube: string;
+    blockquote: string;
+    title1Info: string;
+    title2Info: string;
+    title3Info: string;
+    unorderedListInfo: string;
+    numberListInfo: string;
+    codeBlockInfo: string;
+    mathBlockInfo: string;
+    tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
+    imageInfo: string;
+    iframeInfo: string;
+    youtubeInfo: string;
+    blockquoteInfo: string;
+    newLineInfo: string;
+    placeholder: string;
+    insertCode: string;
+};
+export default _default;

package/dist/i18n/es/index.js

@@ -0,0 +1,50 @@
+export default {
+    target: ['es', 'es-ES', 'es-419', 'es-MX'],
+    lang: 'es',
+    country: 'ES',
+    text: 'Texto',
+    block: 'Bloque',
+    loading: 'Cargando...',
+    delete: 'Eliminar',
+    close: 'Cerrar',
+    cancel: 'Cancelar',
+    insert: 'Insertar',
+    noResult: 'Sin resultados',
+    default: 'predeterminado',
+    auto: 'auto',
+    title: 'Título',
+    paragraph: 'Párrafo',
+    link: 'Enlace',
+    alignLeft: 'Alinear a la izquierda',
+    alignCenter: 'Centrar',
+    alignRight: 'Alinear a la derecha',
+    alignJustify: 'Justificar',
+    unorderedList: 'Lista con viñetas',
+    numberList: 'Lista numerada',
+    codeBlock: 'Bloque de código',
+    mathBlock: 'Bloque matemático',
+    table: 'Tabla',
+    twoColumns: '2 columnas',
+    threeColumns: '3 columnas',
+    image: 'Imagen',
+    iframe: 'iframe',
+    youtube: 'YouTube',
+    blockquote: 'Cita',
+    title1Info: 'Título grande',
+    title2Info: 'Título más pequeño',
+    title3Info: 'Título mediano',
+    unorderedListInfo: 'Lista sin orden',
+    numberListInfo: '1, 2, 3, 4',
+    codeBlockInfo: 'Bloque de código con resaltado de sintaxis',
+    mathBlockInfo: 'Bloque matemático',
+    tableInfo: 'Tabla',
+    twoColumnsInfo: 'Diseño de dos columnas',
+    threeColumnsInfo: 'Diseño de tres columnas',
+    imageInfo: 'Imagen',
+    iframeInfo: 'Insertar otro sitio web',
+    youtubeInfo: 'Insertar video de YouTube',
+    blockquoteInfo: 'Cita',
+    newLineInfo: 'Pulsa / para abrir comandos. O',
+    placeholder: 'Escribe contenido aquí...',
+    insertCode: 'Insertar código'
+};

package/dist/i18n/index.d.ts

@@ -96,6 +96,202 @@ declare const locales: readonly [{
     newLineInfo: string;
     placeholder: string;
     insertCode: string;
+}, {
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: string;
+    default: string;
+    auto: string;
+    title: string;
+    paragraph: string;
+    link: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    alignJustify: string;
+    unorderedList: string;
+    numberList: string;
+    codeBlock: string;
+    mathBlock: string;
+    table: string;
+    twoColumns: string;
+    threeColumns: string;
+    image: string;
+    iframe: string;
+    youtube: string;
+    blockquote: string;
+    title1Info: string;
+    title2Info: string;
+    title3Info: string;
+    unorderedListInfo: string;
+    numberListInfo: string;
+    codeBlockInfo: string;
+    mathBlockInfo: string;
+    tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
+    imageInfo: string;
+    iframeInfo: string;
+    youtubeInfo: string;
+    blockquoteInfo: string;
+    newLineInfo: string;
+    placeholder: string;
+    insertCode: string;
+}, {
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: string;
+    default: string;
+    auto: string;
+    title: string;
+    paragraph: string;
+    link: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    alignJustify: string;
+    unorderedList: string;
+    numberList: string;
+    codeBlock: string;
+    mathBlock: string;
+    table: string;
+    twoColumns: string;
+    threeColumns: string;
+    image: string;
+    iframe: string;
+    youtube: string;
+    blockquote: string;
+    title1Info: string;
+    title2Info: string;
+    title3Info: string;
+    unorderedListInfo: string;
+    numberListInfo: string;
+    codeBlockInfo: string;
+    mathBlockInfo: string;
+    tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
+    imageInfo: string;
+    iframeInfo: string;
+    youtubeInfo: string;
+    blockquoteInfo: string;
+    newLineInfo: string;
+    placeholder: string;
+    insertCode: string;
+}, {
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: string;
+    default: string;
+    auto: string;
+    title: string;
+    paragraph: string;
+    link: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    alignJustify: string;
+    unorderedList: string;
+    numberList: string;
+    codeBlock: string;
+    mathBlock: string;
+    table: string;
+    twoColumns: string;
+    threeColumns: string;
+    image: string;
+    iframe: string;
+    youtube: string;
+    blockquote: string;
+    title1Info: string;
+    title2Info: string;
+    title3Info: string;
+    unorderedListInfo: string;
+    numberListInfo: string;
+    codeBlockInfo: string;
+    mathBlockInfo: string;
+    tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
+    imageInfo: string;
+    iframeInfo: string;
+    youtubeInfo: string;
+    blockquoteInfo: string;
+    newLineInfo: string;
+    placeholder: string;
+    insertCode: string;
+}, {
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: string;
+    default: string;
+    auto: string;
+    title: string;
+    paragraph: string;
+    link: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    alignJustify: string;
+    unorderedList: string;
+    numberList: string;
+    codeBlock: string;
+    mathBlock: string;
+    table: string;
+    twoColumns: string;
+    threeColumns: string;
+    image: string;
+    iframe: string;
+    youtube: string;
+    blockquote: string;
+    title1Info: string;
+    title2Info: string;
+    title3Info: string;
+    unorderedListInfo: string;
+    numberListInfo: string;
+    codeBlockInfo: string;
+    mathBlockInfo: string;
+    tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
+    imageInfo: string;
+    iframeInfo: string;
+    youtubeInfo: string;
+    blockquoteInfo: string;
+    newLineInfo: string;
+    placeholder: string;
+    insertCode: string;
 }];
 type Locale = (typeof locales)[number];
 export type LocaleInput = string | Locale | null | undefined;

package/dist/i18n/index.js

@@ -1,8 +1,25 @@
 import enUs from './en-us/index';
 import koKr from './ko-kr/index';
-const locales = [enUs, koKr];
+import es from './es/index';
+import ja from './ja/index';
+import zhHans from './zh-hans/index';
+import zhHant from './zh-hant/index';
+const locales = [enUs, koKr, es, ja, zhHans, zhHant];
 export const I18N_CONTEXT = Symbol('tiptap-i18n');
-const normalizeLocaleCode = (value) => (value ?? '').trim().replace(/_/g, '-').toLowerCase();
+const normalizeLocaleCode = (value) => {
+    const normalized = (value ?? '').trim().replace(/_/g, '-').toLowerCase();
+    if (!normalized)
+        return '';
+    if (!normalized.startsWith('zh'))
+        return normalized;
+    if (normalized.includes('hant') ||
+        normalized.startsWith('zh-tw') ||
+        normalized.startsWith('zh-hk') ||
+        normalized.startsWith('zh-mo')) {
+        return 'zh-hant';
+    }
+    return 'zh-hans';
+};
 const findLocale = (localeList, language) => {
     const normalized = normalizeLocaleCode(language);
     if (!normalized)

package/dist/i18n/ja/index.d.ts

@@ -0,0 +1,51 @@
+declare const _default: {
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: string;
+    default: string;
+    auto: string;
+    title: string;
+    paragraph: string;
+    link: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    alignJustify: string;
+    unorderedList: string;
+    numberList: string;
+    codeBlock: string;
+    mathBlock: string;
+    table: string;
+    twoColumns: string;
+    threeColumns: string;
+    image: string;
+    iframe: string;
+    youtube: string;
+    blockquote: string;
+    title1Info: string;
+    title2Info: string;
+    title3Info: string;
+    unorderedListInfo: string;
+    numberListInfo: string;
+    codeBlockInfo: string;
+    mathBlockInfo: string;
+    tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
+    imageInfo: string;
+    iframeInfo: string;
+    youtubeInfo: string;
+    blockquoteInfo: string;
+    newLineInfo: string;
+    placeholder: string;
+    insertCode: string;
+};
+export default _default;

package/dist/i18n/ja/index.js

@@ -0,0 +1,50 @@
+export default {
+    target: ['ja', 'ja-JP'],
+    lang: 'ja',
+    country: 'JP',
+    text: 'テキスト',
+    block: 'ブロック',
+    loading: '読み込み中...',
+    delete: '削除',
+    close: '閉じる',
+    cancel: 'キャンセル',
+    insert: '挿入',
+    noResult: '結果なし',
+    default: 'デフォルト',
+    auto: '自動',
+    title: '見出し',
+    paragraph: '本文',
+    link: 'リンク',
+    alignLeft: '左揃え',
+    alignCenter: '中央揃え',
+    alignRight: '右揃え',
+    alignJustify: '両端揃え',
+    unorderedList: '箇条書き',
+    numberList: '番号付きリスト',
+    codeBlock: 'コードブロック',
+    mathBlock: '数式ブロック',
+    table: '表',
+    twoColumns: '2カラム',
+    threeColumns: '3カラム',
+    image: '画像',
+    iframe: 'iframe',
+    youtube: 'YouTube',
+    blockquote: '引用',
+    title1Info: '大きな見出し',
+    title2Info: 'やや小さい見出し',
+    title3Info: '中くらいの見出し',
+    unorderedListInfo: '順序なしリスト',
+    numberListInfo: '1, 2, 3, 4',
+    codeBlockInfo: 'シンタックスハイライト付きコードブロック',
+    mathBlockInfo: '数式ブロック',
+    tableInfo: '表',
+    twoColumnsInfo: '2カラムレイアウト',
+    threeColumnsInfo: '3カラムレイアウト',
+    imageInfo: '画像',
+    iframeInfo: '別のウェブサイトを埋め込む',
+    youtubeInfo: 'YouTube動画を埋め込む',
+    blockquoteInfo: '引用ブロック',
+    newLineInfo: '/ でコマンドを開く。または',
+    placeholder: 'ここに内容を入力...',
+    insertCode: 'コードを挿入'
+};

package/dist/i18n/zh-hans/index.d.ts

@@ -0,0 +1,51 @@
+declare const _default: {
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: string;
+    default: string;
+    auto: string;
+    title: string;
+    paragraph: string;
+    link: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    alignJustify: string;
+    unorderedList: string;
+    numberList: string;
+    codeBlock: string;
+    mathBlock: string;
+    table: string;
+    twoColumns: string;
+    threeColumns: string;
+    image: string;
+    iframe: string;
+    youtube: string;
+    blockquote: string;
+    title1Info: string;
+    title2Info: string;
+    title3Info: string;
+    unorderedListInfo: string;
+    numberListInfo: string;
+    codeBlockInfo: string;
+    mathBlockInfo: string;
+    tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
+    imageInfo: string;
+    iframeInfo: string;
+    youtubeInfo: string;
+    blockquoteInfo: string;
+    newLineInfo: string;
+    placeholder: string;
+    insertCode: string;
+};
+export default _default;

package/dist/i18n/zh-hans/index.js

@@ -0,0 +1,50 @@
+export default {
+    target: ['zh', 'zh-CN', 'zh-SG', 'zh-Hans'],
+    lang: 'zh',
+    country: 'CN',
+    text: '文本',
+    block: '区块',
+    loading: '加载中...',
+    delete: '删除',
+    close: '关闭',
+    cancel: '取消',
+    insert: '插入',
+    noResult: '无结果',
+    default: '默认',
+    auto: '自动',
+    title: '标题',
+    paragraph: '正文',
+    link: '链接',
+    alignLeft: '左对齐',
+    alignCenter: '居中对齐',
+    alignRight: '右对齐',
+    alignJustify: '两端对齐',
+    unorderedList: '无序列表',
+    numberList: '有序列表',
+    codeBlock: '代码块',
+    mathBlock: '公式块',
+    table: '表格',
+    twoColumns: '2 列',
+    threeColumns: '3 列',
+    image: '图片',
+    iframe: 'iframe',
+    youtube: 'YouTube',
+    blockquote: '引用',
+    title1Info: '大标题',
+    title2Info: '较小标题',
+    title3Info: '中等标题',
+    unorderedListInfo: '无序列表',
+    numberListInfo: '1, 2, 3, 4',
+    codeBlockInfo: '带语法高亮的代码块',
+    mathBlockInfo: '公式块',
+    tableInfo: '插入表格',
+    twoColumnsInfo: '两列布局',
+    threeColumnsInfo: '三列布局',
+    imageInfo: '图片',
+    iframeInfo: '嵌入其他网站',
+    youtubeInfo: '嵌入 YouTube 视频',
+    blockquoteInfo: '引用块',
+    newLineInfo: '按 / 输入命令，或',
+    placeholder: '在此输入内容...',
+    insertCode: '插入代码'
+};

package/dist/i18n/zh-hant/index.d.ts

@@ -0,0 +1,51 @@
+declare const _default: {
+    target: string[];
+    lang: string;
+    country: string;
+    text: string;
+    block: string;
+    loading: string;
+    delete: string;
+    close: string;
+    cancel: string;
+    insert: string;
+    noResult: string;
+    default: string;
+    auto: string;
+    title: string;
+    paragraph: string;
+    link: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    alignJustify: string;
+    unorderedList: string;
+    numberList: string;
+    codeBlock: string;
+    mathBlock: string;
+    table: string;
+    twoColumns: string;
+    threeColumns: string;
+    image: string;
+    iframe: string;
+    youtube: string;
+    blockquote: string;
+    title1Info: string;
+    title2Info: string;
+    title3Info: string;
+    unorderedListInfo: string;
+    numberListInfo: string;
+    codeBlockInfo: string;
+    mathBlockInfo: string;
+    tableInfo: string;
+    twoColumnsInfo: string;
+    threeColumnsInfo: string;
+    imageInfo: string;
+    iframeInfo: string;
+    youtubeInfo: string;
+    blockquoteInfo: string;
+    newLineInfo: string;
+    placeholder: string;
+    insertCode: string;
+};
+export default _default;

package/dist/i18n/zh-hant/index.js

@@ -0,0 +1,50 @@
+export default {
+    target: ['zh-TW', 'zh-HK', 'zh-MO', 'zh-Hant'],
+    lang: 'zh',
+    country: 'TW',
+    text: '文字',
+    block: '區塊',
+    loading: '載入中...',
+    delete: '刪除',
+    close: '關閉',
+    cancel: '取消',
+    insert: '插入',
+    noResult: '無結果',
+    default: '預設',
+    auto: '自動',
+    title: '標題',
+    paragraph: '段落',
+    link: '連結',
+    alignLeft: '靠左對齊',
+    alignCenter: '置中對齊',
+    alignRight: '靠右對齊',
+    alignJustify: '左右對齊',
+    unorderedList: '項目清單',
+    numberList: '編號清單',
+    codeBlock: '程式碼區塊',
+    mathBlock: '數學區塊',
+    table: '表格',
+    twoColumns: '2 欄',
+    threeColumns: '3 欄',
+    image: '圖片',
+    iframe: 'iframe',
+    youtube: 'YouTube',
+    blockquote: '引用',
+    title1Info: '大標題',
+    title2Info: '較小標題',
+    title3Info: '中等標題',
+    unorderedListInfo: '無序清單',
+    numberListInfo: '1, 2, 3, 4',
+    codeBlockInfo: '含語法高亮的程式碼區塊',
+    mathBlockInfo: '數學區塊',
+    tableInfo: '插入表格',
+    twoColumnsInfo: '雙欄版面',
+    threeColumnsInfo: '三欄版面',
+    imageInfo: '圖片',
+    iframeInfo: '嵌入其他網站',
+    youtubeInfo: '嵌入 YouTube 影片',
+    blockquoteInfo: '引用區塊',
+    newLineInfo: '按 / 輸入指令，或',
+    placeholder: '在此輸入內容...',
+    insertCode: '插入程式碼'
+};

package/dist/plugin/resize/index.js

@@ -19,6 +19,15 @@ const minHeight = {
     attr: 160
 };
 const maxHeight = 1600;
+const aspectRatioOptions = [
+    { label: 'Auto', value: null },
+    { label: '16:9', value: '16:9' },
+    { label: '3:2', value: '3:2' },
+    { label: '21:9', value: '21:9' },
+    { label: '1:1', value: '1:1' },
+    { label: '4:3', value: '4:3' },
+    { label: '9:16', value: '9:16' }
+];
 function isResizableType(value) {
     return typeSet.has(value);
 }
@@ -37,6 +46,69 @@ function parseNumericSize(value) {
     const parsed = Number.parseFloat(normalized);
     return Number.isFinite(parsed) ? parsed : null;
 }
+function parseAspectRatio(value) {
+    if (typeof value === 'number')
+        return Number.isFinite(value) && value > 0 ? value : null;
+    if (typeof value !== 'string')
+        return null;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    const ratioMatch = /^([0-9]+(?:\.[0-9]+)?)\s*:\s*([0-9]+(?:\.[0-9]+)?)$/.exec(trimmed);
+    if (ratioMatch) {
+        const widthPart = Number.parseFloat(ratioMatch[1]);
+        const heightPart = Number.parseFloat(ratioMatch[2]);
+        if (!Number.isFinite(widthPart) || !Number.isFinite(heightPart))
+            return null;
+        if (widthPart <= 0 || heightPart <= 0)
+            return null;
+        return widthPart / heightPart;
+    }
+    const parsed = Number.parseFloat(trimmed);
+    if (!Number.isFinite(parsed) || parsed <= 0)
+        return null;
+    return parsed;
+}
+function formatDecimal(value, precision = 6) {
+    return String(Number(value.toFixed(precision)));
+}
+function normalizeAspectRatioAttr(value) {
+    if (typeof value === 'number') {
+        if (!Number.isFinite(value) || value <= 0)
+            return null;
+        return formatDecimal(value);
+    }
+    if (typeof value !== 'string')
+        return null;
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    const ratioMatch = /^([0-9]+(?:\.[0-9]+)?)\s*:\s*([0-9]+(?:\.[0-9]+)?)$/.exec(trimmed);
+    if (ratioMatch) {
+        const widthPart = Number.parseFloat(ratioMatch[1]);
+        const heightPart = Number.parseFloat(ratioMatch[2]);
+        if (!Number.isFinite(widthPart) || !Number.isFinite(heightPart))
+            return null;
+        if (widthPart <= 0 || heightPart <= 0)
+            return null;
+        return `${formatDecimal(widthPart, 4)}:${formatDecimal(heightPart, 4)}`;
+    }
+    const parsed = Number.parseFloat(trimmed);
+    if (!Number.isFinite(parsed) || parsed <= 0)
+        return null;
+    return formatDecimal(parsed);
+}
+function sameAspectRatio(left, right) {
+    if (!left && !right)
+        return true;
+    if (!left || !right)
+        return false;
+    const leftRatio = parseAspectRatio(left);
+    const rightRatio = parseAspectRatio(right);
+    if (leftRatio === null || rightRatio === null)
+        return false;
+    return Math.abs(leftRatio - rightRatio) <= 0.001;
+}
 function normalizeStringAttr(value) {
     if (typeof value !== 'string')
         return null;
@@ -113,6 +185,15 @@ function resolveStartHeight(kind, node, element) {
         return fromAttr;
     return defaultHeight[kind];
 }
+function resolveElementWidth(node, element) {
+    const rect = element.getBoundingClientRect();
+    if (rect.width > 0)
+        return rect.width;
+    const fromAttr = parseNumericSize(node.attrs.width);
+    if (fromAttr !== null)
+        return fromAttr;
+    return 0;
+}
 function resolveTargetElement(view, pos, resizeMeta, node) {
     const nodeDom = view.nodeDOM(pos);
     if (!(nodeDom instanceof HTMLElement))
@@ -153,7 +234,7 @@ function resolveTargetElement(view, pos, resizeMeta, node) {
         nodeDom.querySelector('iframe') ||
         nodeDom);
 }
-function buildResizeAttrs(kind, node, height, imageRatio) {
+function buildResizeAttrs(kind, node, height, imageRatio, aspectRatio = normalizeAspectRatioAttr(node.attrs.aspectRatio)) {
     const attrs = { ...node.attrs };
     const roundedHeight = String(Math.round(height));
     if (kind === 'image') {
@@ -162,11 +243,11 @@ function buildResizeAttrs(kind, node, height, imageRatio) {
         return { ...attrs, width: roundedWidth, height: null };
     }
     if (kind === 'iframe' || kind === 'embed') {
-        return { ...attrs, width: attrs.width || '100%', height: roundedHeight };
+        return { ...attrs, width: attrs.width || '100%', height: roundedHeight, aspectRatio };
     }
-    return { ...attrs, height: roundedHeight };
+    return { ...attrs, height: roundedHeight, aspectRatio };
 }
-function createResizeHandleDecoration(nodePos, widgetPos, resizeMeta) {
+function createResizeHandleDecoration(nodePos, widgetPos, resizeMeta, node) {
     return Decoration.widget(widgetPos, () => {
         const anchor = document.createElement('div');
         anchor.className = 'tiptap-media-resize-anchor';
@@ -175,8 +256,30 @@ function createResizeHandleDecoration(nodePos, widgetPos, resizeMeta) {
         button.className = 'tiptap-media-resize-handle';
         button.dataset.resizePos = String(nodePos);
         button.dataset.resizeKind = resizeMeta.kind;
-        button.setAttribute('aria-label', 'Resize media height');
+        button.setAttribute('aria-label', 'Resize media height (click for aspect ratio)');
         anchor.append(button);
+        if (resizeMeta.kind !== 'image') {
+            const selectedAspectRatio = normalizeAspectRatioAttr(node.attrs.aspectRatio);
+            const toolbar = document.createElement('div');
+            toolbar.className = 'tiptap-media-aspect-ratio-toolbar';
+            toolbar.setAttribute('role', 'toolbar');
+            toolbar.setAttribute('aria-label', 'Aspect ratio presets');
+            toolbar.dataset.resizePos = String(nodePos);
+            for (const option of aspectRatioOptions) {
+                const optionButton = document.createElement('button');
+                optionButton.type = 'button';
+                optionButton.className = 'tiptap-media-aspect-ratio-option';
+                optionButton.dataset.resizePos = String(nodePos);
+                optionButton.dataset.aspectRatio = option.value ?? 'auto';
+                optionButton.textContent = option.label;
+                const isActive = option.value
+                    ? sameAspectRatio(option.value, selectedAspectRatio)
+                    : !selectedAspectRatio;
+                optionButton.setAttribute('aria-pressed', isActive ? 'true' : 'false');
+                toolbar.append(optionButton);
+            }
+            anchor.append(toolbar);
+        }
         return anchor;
     }, { side: 1, key: `media-resize-${nodePos}-${resizeMeta.typeName}-${resizeMeta.kind}` });
 }
@@ -254,9 +357,7 @@ export default Extension.create({
                         default: false,
                         parseHTML: (element) => hasResizeHandler(element.getAttribute('data-resize-handler') ||
                             element.getAttribute('resize-handler')),
-                        renderHTML: (attributes) => hasResizeHandler(attributes.resizeHandler)
-                            ? { 'data-resize-handler': 'true' }
-                            : {}
+                        renderHTML: (attributes) => hasResizeHandler(attributes.resizeHandler) ? { 'data-resize-handler': 'true' } : {}
                     },
                     resizeTarget: {
                         default: null,
@@ -281,6 +382,14 @@ export default Extension.create({
                             const maxHeight = normalizeNumericAttr(attributes.maxHeight);
                             return maxHeight ? { 'data-resize-max-height': maxHeight } : {};
                         }
+                    },
+                    aspectRatio: {
+                        default: null,
+                        parseHTML: (element) => normalizeAspectRatioAttr(element.getAttribute('data-resize-aspect-ratio')),
+                        renderHTML: (attributes) => {
+                            const aspectRatio = normalizeAspectRatioAttr(attributes.aspectRatio);
+                            return aspectRatio ? { 'data-resize-aspect-ratio': aspectRatio } : {};
+                        }
                     }
                 }
             }
@@ -288,6 +397,15 @@ export default Extension.create({
     },
     addProseMirrorPlugins() {
         let removeDragListeners = null;
+        const closeOpenToolbars = (view, except = null) => {
+            view.dom
+                .querySelectorAll('.tiptap-media-resize-anchor.is-toolbar-open')
+                .forEach((anchor) => {
+                if (except && anchor === except)
+                    return;
+                anchor.classList.remove('is-toolbar-open');
+            });
+        };
         return [
             new Plugin({
                 key: pluginKey,
@@ -328,7 +446,7 @@ export default Extension.create({
                                 const resizeMeta = resolveResizeMeta(node);
                                 if (!resizeMeta || resizeMeta.kind === 'image' || node.isInline)
                                     return;
-                                decorations.push(createResizeHandleDecoration(pos, pos + node.nodeSize, resizeMeta));
+                                decorations.push(createResizeHandleDecoration(pos, pos + node.nodeSize, resizeMeta, node));
                                 handled.add(pos);
                             });
                         }
@@ -336,7 +454,7 @@ export default Extension.create({
                             const pos = state.selection.from;
                             const resizeMeta = resolveResizeMeta(state.selection.node);
                             if (resizeMeta && !handled.has(pos)) {
-                                decorations.push(createResizeHandleDecoration(pos, pos + state.selection.node.nodeSize, resizeMeta));
+                                decorations.push(createResizeHandleDecoration(pos, pos + state.selection.node.nodeSize, resizeMeta, state.selection.node));
                             }
                         }
                         if (!decorations.length)
@@ -349,9 +467,50 @@ export default Extension.create({
                                 return false;
                             if (!(event.target instanceof HTMLElement))
                                 return false;
+                            const ratioOption = event.target.closest('.tiptap-media-aspect-ratio-option');
+                            if (ratioOption) {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                const pos = Number.parseInt(ratioOption.dataset.resizePos || '', 10);
+                                if (!Number.isFinite(pos))
+                                    return true;
+                                const node = view.state.doc.nodeAt(pos);
+                                if (!node)
+                                    return true;
+                                const resizeMeta = resolveResizeMeta(node);
+                                if (!resizeMeta || resizeMeta.kind === 'image')
+                                    return true;
+                                const target = resolveTargetElement(view, pos, resizeMeta, node);
+                                if (!target)
+                                    return true;
+                                const selectedRatio = ratioOption.dataset.aspectRatio || 'auto';
+                                const normalizedAspectRatio = selectedRatio === 'auto' ? null : normalizeAspectRatioAttr(selectedRatio);
+                                if (selectedRatio !== 'auto' && !normalizedAspectRatio)
+                                    return true;
+                                let nextHeight = resolveStartHeight(resizeMeta.kind, node, target);
+                                const ratioValue = parseAspectRatio(normalizedAspectRatio);
+                                if (ratioValue !== null) {
+                                    const width = resolveElementWidth(node, target);
+                                    if (width > 0) {
+                                        nextHeight = clamp(width / ratioValue, resizeMeta.minHeight, resizeMeta.maxHeight);
+                                    }
+                                }
+                                const nextAttrs = buildResizeAttrs(resizeMeta.kind, node, nextHeight, 1, normalizedAspectRatio);
+                                const nextWidth = 'width' in nextAttrs ? nextAttrs.width : node.attrs.width;
+                                const nextAspectRatio = 'aspectRatio' in nextAttrs ? nextAttrs.aspectRatio : null;
+                                if (nextAttrs.height !== node.attrs.height ||
+                                    nextWidth !== node.attrs.width ||
+                                    nextAspectRatio !== node.attrs.aspectRatio) {
+                                    view.dispatch(view.state.tr.setNodeMarkup(pos, node.type, nextAttrs));
+                                }
+                                closeOpenToolbars(view);
+                                return true;
+                            }
                             const handle = event.target.closest('.tiptap-media-resize-handle');
-                            if (!handle)
+                            if (!handle) {
+                                closeOpenToolbars(view);
                                 return false;
+                            }
                             const pos = Number.parseInt(handle.dataset.resizePos || '', 10);
                             if (!Number.isFinite(pos))
                                 return false;
@@ -369,6 +528,8 @@ export default Extension.create({
                                 return false;
                             event.preventDefault();
                             event.stopPropagation();
+                            const anchor = handle.closest('.tiptap-media-resize-anchor');
+                            const startX = event.clientX;
                             const startY = event.clientY;
                             const startHeight = resolveStartHeight(resizeMeta.kind, node, target);
                             const imageRatio = resizeMeta.kind === 'image' ? resolveImageRatio(node, target) : 1;
@@ -377,21 +538,10 @@ export default Extension.create({
                             let restoreTarget = null;
                             let frame = 0;
                             let pendingHeight = startHeight;
-                            if (shouldShowProxy && target.parentElement) {
-                                const targetElement = target;
-                                const originalDisplay = targetElement.style.display;
-                                resizeProxy = document.createElement('div');
-                                resizeProxy.className = 'tiptap-media-resize-proxy';
-                                resizeProxy.style.height = `${Math.round(startHeight)}px`;
-                                target.parentElement.insertBefore(resizeProxy, targetElement);
-                                targetElement.style.display = 'none';
-                                restoreTarget = () => {
-                                    targetElement.style.display = originalDisplay;
-                                    resizeProxy?.remove();
-                                    resizeProxy = null;
-                                    restoreTarget = null;
-                                };
-                            }
+                            let isDragging = false;
+                            let appliedDragCursor = false;
+                            const previousCursor = document.body.style.cursor;
+                            const previousSelect = document.body.style.userSelect;
                             const dispatchHeight = (height) => {
                                 const current = view.state.doc.nodeAt(pos);
                                 if (!current || current.type.name !== resizeMeta.typeName)
@@ -399,19 +549,51 @@ export default Extension.create({
                                 const currentMeta = resolveResizeMeta(current);
                                 if (!currentMeta)
                                     return;
-                                const nextAttrs = buildResizeAttrs(currentMeta.kind, current, height, imageRatio);
-                                const nextWidth = 'width' in nextAttrs ? nextAttrs.width : current.attrs.width;
-                                if (nextAttrs.height === current.attrs.height && nextWidth === current.attrs.width)
+                                // Manual drag should unlock fixed aspect ratio.
+                                const aspectRatioForDrag = null;
+                                const nextAttrs = buildResizeAttrs(currentMeta.kind, current, height, imageRatio, aspectRatioForDrag);
+                                const nextWidth = 'width' in nextAttrs
+                                    ? nextAttrs.width
+                                    : current.attrs.width;
+                                const nextAspectRatio = 'aspectRatio' in nextAttrs ? nextAttrs.aspectRatio : null;
+                                if (nextAttrs.height === current.attrs.height &&
+                                    nextWidth === current.attrs.width &&
+                                    nextAspectRatio === current.attrs.aspectRatio)
                                     return;
-                                const tr = view.state.tr.setNodeMarkup(pos, current.type, nextAttrs);
-                                view.dispatch(tr);
+                                view.dispatch(view.state.tr.setNodeMarkup(pos, current.type, nextAttrs));
+                            };
+                            const beginDrag = () => {
+                                if (isDragging)
+                                    return;
+                                isDragging = true;
+                                closeOpenToolbars(view);
+                                if (shouldShowProxy && target.parentElement) {
+                                    const targetElement = target;
+                                    const originalDisplay = targetElement.style.display;
+                                    resizeProxy = document.createElement('div');
+                                    resizeProxy.className = 'tiptap-media-resize-proxy';
+                                    resizeProxy.style.height = `${Math.round(startHeight)}px`;
+                                    target.parentElement.insertBefore(resizeProxy, targetElement);
+                                    targetElement.style.display = 'none';
+                                    restoreTarget = () => {
+                                        targetElement.style.display = originalDisplay;
+                                        resizeProxy?.remove();
+                                        resizeProxy = null;
+                                        restoreTarget = null;
+                                    };
+                                }
+                                document.body.style.cursor = 'ns-resize';
+                                document.body.style.userSelect = 'none';
+                                appliedDragCursor = true;
                             };
-                            const previousCursor = document.body.style.cursor;
-                            const previousSelect = document.body.style.userSelect;
-                            document.body.style.cursor = 'ns-resize';
-                            document.body.style.userSelect = 'none';
                             const onMove = (moveEvent) => {
-                                const nextHeight = clamp(startHeight + moveEvent.clientY - startY, resizeMeta.minHeight, resizeMeta.maxHeight);
+                                const deltaX = moveEvent.clientX - startX;
+                                const deltaY = moveEvent.clientY - startY;
+                                if (!isDragging && Math.max(Math.abs(deltaX), Math.abs(deltaY)) < 4)
+                                    return;
+                                if (!isDragging)
+                                    beginDrag();
+                                const nextHeight = clamp(startHeight + deltaY, resizeMeta.minHeight, resizeMeta.maxHeight);
                                 pendingHeight = nextHeight;
                                 if (resizeProxy)
                                     resizeProxy.style.height = `${Math.round(nextHeight)}px`;
@@ -426,12 +608,21 @@ export default Extension.create({
                                     cancelAnimationFrame(frame);
                                 window.removeEventListener('mousemove', onMove);
                                 window.removeEventListener('mouseup', onUp);
-                                document.body.style.cursor = previousCursor;
-                                document.body.style.userSelect = previousSelect;
+                                if (appliedDragCursor) {
+                                    document.body.style.cursor = previousCursor;
+                                    document.body.style.userSelect = previousSelect;
+                                }
                                 restoreTarget?.();
                                 removeDragListeners = null;
                             };
                             const onUp = () => {
+                                if (!isDragging) {
+                                    const shouldOpen = Boolean(anchor) && !(anchor?.classList.contains('is-toolbar-open') ?? false);
+                                    closeOpenToolbars(view, shouldOpen && anchor ? anchor : null);
+                                    anchor?.classList.toggle('is-toolbar-open', shouldOpen);
+                                    cleanup();
+                                    return;
+                                }
                                 if (shouldShowProxy)
                                     dispatchHeight(pendingHeight);
                                 cleanup();

package/dist/tiptap/TipTap.svelte

@@ -81,6 +81,7 @@
 		'data-resize-target',
 		'data-resize-min-height',
 		'data-resize-max-height',
+		'data-resize-aspect-ratio',
 		'data-bubble-menu',
 		'data-hide-bubble-menu'
 	];
@@ -343,10 +344,13 @@
 	.editable :global(.tiptap-media-resize-anchor) {
 		width: 100%;
 		display: flex;
-		justify-content: center;
+		flex-direction: column;
+		align-items: center;
 		margin: 6px 0 2px;
 		line-height: 0;
 		pointer-events: none;
+		position: relative;
+		overflow: visible;
 	}
 
 	.editable :global(.tiptap-media-resize-handle) {
@@ -379,6 +383,56 @@
 		transform: translateY(1px);
 	}
 
+	.editable :global(.tiptap-media-aspect-ratio-toolbar) {
+		display: none;
+		align-items: center;
+		gap: 4px;
+		padding: 4px;
+		border: 1px solid var(--primary-light3, rgba(120, 120, 120, 0.4));
+		border-radius: 999px;
+		background: var(--surface, #fff);
+		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+		pointer-events: auto;
+		line-height: 1;
+		position: absolute;
+		top: calc(100% + 6px);
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 4;
+		white-space: nowrap;
+	}
+
+	.editable
+		:global(.tiptap-media-resize-anchor.is-toolbar-open .tiptap-media-aspect-ratio-toolbar) {
+		display: flex;
+	}
+
+	.editable :global(.tiptap-media-aspect-ratio-option) {
+		appearance: none;
+		-webkit-appearance: none;
+		margin: 0;
+		padding: 2px 8px;
+		border: 0;
+		border-radius: 999px;
+		background: transparent;
+		color: var(--on-surface, #000);
+		font-size: 11px;
+		font-weight: 600;
+		cursor: pointer;
+		transition: background-color 0.15s ease;
+	}
+
+	.editable :global(.tiptap-media-aspect-ratio-option:hover),
+	.editable :global(.tiptap-media-aspect-ratio-option:focus-visible) {
+		background: var(--primary-light1, rgba(120, 120, 120, 0.14));
+		outline: none;
+	}
+
+	.editable :global(.tiptap-media-aspect-ratio-option[aria-pressed='true']) {
+		background: var(--primary-light4, rgba(120, 120, 120, 0.3));
+		color: var(--on-primary, #000);
+	}
+
 	.editable :global(.tiptap-media-resize-proxy) {
 		width: 100%;
 		border-radius: 12px;
@@ -471,21 +525,58 @@
 			border-radius: 12px;
 		}
 
-		& :global(.iframe-wrapper) {
-			position: relative;
-			padding-bottom: 12px;
+		& :global(.iframe-wrapper),
+		& :global(.embed-wrapper) {
 			overflow: hidden;
 			width: 100%;
-			height: 600px;
 			border-radius: 12px;
 		}
 
-		& :global(iframe) {
-			position: absolute;
-			top: 0;
-			left: 0;
+		& :global(iframe),
+		& :global(embed) {
+			display: block;
 			width: 100%;
-			height: 100%;
+			max-width: 100%;
+		}
+
+		& :global([data-resize-aspect-ratio='16:9']) {
+			--tiptap-media-aspect-ratio: 16 / 9;
+		}
+
+		& :global([data-resize-aspect-ratio='3:2']) {
+			--tiptap-media-aspect-ratio: 3 / 2;
+		}
+
+		& :global([data-resize-aspect-ratio='21:9']) {
+			--tiptap-media-aspect-ratio: 21 / 9;
+		}
+
+		& :global([data-resize-aspect-ratio='1:1']) {
+			--tiptap-media-aspect-ratio: 1 / 1;
+		}
+
+		& :global([data-resize-aspect-ratio='4:3']) {
+			--tiptap-media-aspect-ratio: 4 / 3;
+		}
+
+		& :global([data-resize-aspect-ratio='9:16']) {
+			--tiptap-media-aspect-ratio: 9 / 16;
+		}
+
+		& :global(iframe[data-resize-aspect-ratio='16:9']),
+		& :global(iframe[data-resize-aspect-ratio='3:2']),
+		& :global(iframe[data-resize-aspect-ratio='21:9']),
+		& :global(iframe[data-resize-aspect-ratio='1:1']),
+		& :global(iframe[data-resize-aspect-ratio='4:3']),
+		& :global(iframe[data-resize-aspect-ratio='9:16']),
+		& :global(embed[data-resize-aspect-ratio='16:9']),
+		& :global(embed[data-resize-aspect-ratio='3:2']),
+		& :global(embed[data-resize-aspect-ratio='21:9']),
+		& :global(embed[data-resize-aspect-ratio='1:1']),
+		& :global(embed[data-resize-aspect-ratio='4:3']),
+		& :global(embed[data-resize-aspect-ratio='9:16']) {
+			aspect-ratio: var(--tiptap-media-aspect-ratio, auto);
+			height: auto;
 		}
 	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@seorii/tiptap",
-	"version": "0.4.1",
+	"version": "0.4.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "svelte-kit sync && svelte-package",