@editora/core 1.0.1 → 1.0.2

package/dist/EmbedIframePlugin.native-ifr9KLdN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbedIframePlugin.native-ifr9KLdN.mjs","sources":["../../plugins/embed-iframe/src/EmbedIframePlugin.native.ts"],"sourcesContent":["import type { Plugin } from '@editora/core';\n\n/**\n * EmbedIframePlugin - Native implementation for embedding external content\n * \n * Features:\n * - Full-featured dialog with General and Advanced tabs\n * - Embed YouTube, Vimeo, Google Maps, and other iframe content\n * - Responsive aspect ratio presets (21x9, 16x9, 4x3, 1x1)\n * - Inline value sizing with constrain proportions\n * - Advanced options: name, title, long description, border, scrollbar\n * - Auto-conversion of YouTube/Vimeo URLs to embed format\n * - Security validation (HTTPS only)\n * - Multi-instance support\n * \n * Commands:\n * - openEmbedIframeDialog: Opens the embed iframe dialog\n * \n * UI/UX Features:\n * - Vertical tab navigation (General/Advanced)\n * - Size presets dropdown\n * - Width/Height inputs with lock/unlock proportions button\n * - Checkboxes for border and scrollbar options\n * - Form validation\n * - Responsive CSS classes for aspect ratios\n */\n\nconst SIZE_OPTIONS = [\n  { label: 'Inline Value', value: 'inline' },\n  { label: 'Responsive - 21x9', value: '21x9' },\n  { label: 'Responsive - 16x9', value: '16x9' },\n  { label: 'Responsive - 4x3', value: '4x3' },\n  { label: 'Responsive - 1x1', value: '1x1' },\n];\n\n// Per-editor instance state\nconst editorStates = new WeakMap<HTMLElement, {\n  dialogElement: HTMLElement | null;\n  activeTab: 'general' | 'advanced';\n  formData: {\n    src: string;\n    selectedSize: string;\n    width: string;\n    height: string;\n    constrainProportions: boolean;\n    name: string;\n    title: string;\n    longDescription: string;\n    descriptionUrl: string;\n    showBorder: boolean;\n    enableScrollbar: boolean;\n  };\n}>();\n\n/**\n * Get or create state for an editor element\n */\nconst getEditorState = (editorElement: HTMLElement) => {\n  if (!editorStates.has(editorElement)) {\n    editorStates.set(editorElement, {\n      dialogElement: null,\n      activeTab: 'general',\n      formData: {\n        src: '',\n        selectedSize: 'inline',\n        width: '100%',\n        height: '400px',\n        constrainProportions: true,\n        name: '',\n        title: '',\n        longDescription: '',\n        descriptionUrl: '',\n        showBorder: true,\n        enableScrollbar: true\n      }\n    });\n  }\n  return editorStates.get(editorElement)!;\n};\n\nexport const EmbedIframePlugin = (): Plugin => {\n  return {\n    name: 'embedIframe',\n    \n    toolbar: [\n      {\n        label: 'Embed Content',\n        command: 'openEmbedIframeDialog',\n        icon: '<svg width=\"24\" height=\"24\" focusable=\"false\"><path d=\"M19 6V5H5v14h2A13 13 0 0 1 19 6Zm0 1.4c-.8.8-1.6 2.4-2.2 4.6H19V7.4Zm0 5.6h-2.4c-.4 1.8-.6 3.8-.6 6h3v-6Zm-4 6c0-2.2.2-4.2.6-6H13c-.7 1.8-1.1 3.8-1.1 6h3Zm-4 0c0-2.2.4-4.2 1-6H9.6A12 12 0 0 0 8 19h3ZM4 3h16c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1H4a1 1 0 0 1-1-1V4c0-.6.4-1 1-1Zm11.8 9c.4-1.9 1-3.4 1.8-4.5a9.2 9.2 0 0 0-4 4.5h2.2Zm-3.4 0a12 12 0 0 1 2.8-4 12 12 0 0 0-5 4h2.2Z\" fill-rule=\"nonzero\"></path></svg>',\n        shortcut: 'Mod-Shift-e',\n        type: 'button'\n      }\n    ],\n\n    commands: {\n      openEmbedIframeDialog: (editorElement?: HTMLElement) => {\n        createEmbedDialog(editorElement);\n        return true;\n      }\n    },\n\n    keymap: {\n      'Mod-Shift-e': 'openEmbedIframeDialog'\n    }\n  };\n};\n\nfunction createEmbedDialog(editorElement?: HTMLElement): void {\n  // If no editor element provided, find the currently focused one\n  if (!editorElement) {\n    const focusedElement = document.activeElement;\n    if (focusedElement && focusedElement.closest('[data-editora-editor]')) {\n      editorElement = focusedElement.closest('[data-editora-editor]') as HTMLElement;\n    }\n  }\n\n  // Fallback to any editor if none found\n  if (!editorElement) {\n    editorElement = document.querySelector('[data-editora-editor]') as HTMLElement;\n  }\n\n  if (!editorElement) {\n    console.warn('Editor element not found');\n    return;\n  }\n\n  const state = getEditorState(editorElement);\n\n  // Reset form data\n  state.formData = {\n    src: '',\n    selectedSize: 'inline',\n    width: '100%',\n    height: '400px',\n    constrainProportions: true,\n    name: '',\n    title: '',\n    longDescription: '',\n    descriptionUrl: '',\n    showBorder: true,\n    enableScrollbar: true\n  };\n  \n  state.activeTab = 'general';\n\n  // Create dialog overlay\n  const overlay = document.createElement('div');\n  overlay.className = 'rte-dialog-overlay';\n  overlay.onclick = closeDialog;\n\n  // Create dialog content\n  const dialog = document.createElement('div');\n  dialog.className = 'rte-dialog-content embed-iframe-dialog';\n  dialog.onclick = (e) => e.stopPropagation();\n\n  dialog.innerHTML = `\n    <div class=\"rte-dialog-header\">\n      <h3>Embed Iframe</h3>\n      <button class=\"rte-dialog-close\">×</button>\n    </div>\n    <div class=\"rte-dialog-body\">\n      <div class=\"rte-vertical-tabs\">\n        <div class=\"rte-tab-buttons\">\n          <button class=\"rte-tab-button active\" data-tab=\"general\">General</button>\n          <button class=\"rte-tab-button\" data-tab=\"advanced\">Advanced</button>\n        </div>\n        <div class=\"rte-tab-content\">\n          <div class=\"rte-tab-panel\" data-panel=\"general\" style=\"display: block;\">\n            <div class=\"rte-form-group\">\n              <label class=\"rte-form-label\">Source</label>\n              <input type=\"url\" class=\"rte-form-input\" id=\"iframe-src\" placeholder=\"https://example.com\" required />\n            </div>\n            <div class=\"rte-form-group\">\n              <label class=\"rte-form-label\">Size</label>\n              <select class=\"rte-form-select\" id=\"iframe-size\">\n                ${SIZE_OPTIONS.map(opt => `<option value=\"${opt.value}\">${opt.label}</option>`).join('')}\n              </select>\n            </div>\n            <div class=\"rte-form-row\" id=\"dimensions-row\">\n              <div class=\"rte-form-group\">\n                <label class=\"rte-form-label\">Width</label>\n                <input type=\"text\" class=\"rte-form-input\" id=\"iframe-width\" placeholder=\"100%\" value=\"100%\" />\n              </div>\n              <div class=\"rte-form-group\">\n                <label class=\"rte-form-label\">Height</label>\n                <input type=\"text\" class=\"rte-form-input\" id=\"iframe-height\" placeholder=\"400px\" value=\"400px\" />\n              </div>\n              <div class=\"rte-form-group constrain-group\">\n                <button type=\"button\" class=\"rte-constrain-btn locked\" id=\"constrain-btn\" title=\"Unlock proportions\">🔒</button>\n              </div>\n            </div>\n          </div>\n          <div class=\"rte-tab-panel\" data-panel=\"advanced\" style=\"display: none;\">\n            <div class=\"rte-form-group\">\n              <label class=\"rte-form-label\">Name</label>\n              <input type=\"text\" class=\"rte-form-input\" id=\"iframe-name\" placeholder=\"Iframe name\" />\n            </div>\n            <div class=\"rte-form-group\">\n              <label class=\"rte-form-label\">Title</label>\n              <input type=\"text\" class=\"rte-form-input\" id=\"iframe-title\" placeholder=\"Iframe title\" />\n            </div>\n            <div class=\"rte-form-group\">\n              <label class=\"rte-form-label\">Long Description</label>\n              <textarea class=\"rte-form-textarea\" id=\"iframe-longdesc\" placeholder=\"Detailed description of the iframe content\" rows=\"3\"></textarea>\n            </div>\n            <div class=\"rte-form-group\">\n              <label class=\"rte-form-label\">Description URL</label>\n              <input type=\"url\" class=\"rte-form-input\" id=\"iframe-desc-url\" placeholder=\"https://example.com/description\" />\n            </div>\n            <div class=\"rte-form-group\">\n              <label class=\"rte-checkbox-label\">\n                <input type=\"checkbox\" id=\"iframe-border\" checked />\n                Show iframe border\n              </label>\n            </div>\n            <div class=\"rte-form-group\">\n              <label class=\"rte-checkbox-label\">\n                <input type=\"checkbox\" id=\"iframe-scrollbar\" checked />\n                Enable scrollbar\n              </label>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"rte-dialog-footer\">\n      <button type=\"button\" class=\"rte-btn rte-btn-secondary\" id=\"cancel-btn\">Cancel</button>\n      <button type=\"submit\" class=\"rte-btn rte-btn-primary\" id=\"save-btn\">Save</button>\n    </div>\n  `;\n\n  overlay.appendChild(dialog);\n  document.body.appendChild(overlay);\n  state.dialogElement = overlay;\n\n  // Add event listeners\n  setupDialogEventListeners(dialog, editorElement);\n  \n  // Inject styles\n  injectEmbedDialogStyles();\n\n  // Focus first input\n  setTimeout(() => {\n    (dialog.querySelector('#iframe-src') as HTMLInputElement)?.focus();\n  }, 100);\n}\n\nfunction setupDialogEventListeners(dialog: HTMLElement, editorElement: HTMLElement): void {\n  const state = getEditorState(editorElement);\n\n  // Close button\n  dialog.querySelector('.rte-dialog-close')?.addEventListener('click', () => closeDialog(editorElement));\n\n  // Tab switching\n  dialog.querySelectorAll('.rte-tab-button').forEach((btn) => {\n    btn.addEventListener('click', (e) => {\n      const tab = (e.target as HTMLElement).getAttribute('data-tab') as 'general' | 'advanced';\n      if (tab) switchTab(dialog, tab, editorElement);\n    });\n  });\n\n  // Size dropdown\n  const sizeSelect = dialog.querySelector('#iframe-size') as HTMLSelectElement;\n  sizeSelect?.addEventListener('change', (e) => handleSizeChange(dialog, (e.target as HTMLSelectElement).value, editorElement));\n\n  // Width/Height with proportions\n  const widthInput = dialog.querySelector('#iframe-width') as HTMLInputElement;\n  const heightInput = dialog.querySelector('#iframe-height') as HTMLInputElement;\n  \n  widthInput?.addEventListener('input', (e) => handleWidthChange(dialog, (e.target as HTMLInputElement).value, editorElement));\n  heightInput?.addEventListener('input', (e) => handleHeightChange(dialog, (e.target as HTMLInputElement).value, editorElement));\n\n  // Constrain proportions button\n  dialog.querySelector('#constrain-btn')?.addEventListener('click', () => toggleConstrainProportions(dialog, editorElement));\n\n  // Cancel button\n  dialog.querySelector('#cancel-btn')?.addEventListener('click', () => closeDialog(editorElement));\n\n  // Save button\n  dialog.querySelector('#save-btn')?.addEventListener('click', () => handleSave(dialog, editorElement));\n}\n\nfunction switchTab(dialog: HTMLElement, tab: 'general' | 'advanced', editorElement: HTMLElement): void {\n  const state = getEditorState(editorElement);\n  state.activeTab = tab;\n\n  // Update button states\n  dialog.querySelectorAll('.rte-tab-button').forEach((btn) => {\n    btn.classList.toggle('active', btn.getAttribute('data-tab') === tab);\n  });\n\n  // Update panel visibility\n  dialog.querySelectorAll('.rte-tab-panel').forEach((panel) => {\n    (panel as HTMLElement).style.display = panel.getAttribute('data-panel') === tab ? 'block' : 'none';\n  });\n}\n\nfunction handleSizeChange(dialog: HTMLElement, sizeValue: string, editorElement: HTMLElement): void {\n  const state = getEditorState(editorElement);\n  state.formData.selectedSize = sizeValue;\n\n  const dimensionsRow = dialog.querySelector('#dimensions-row') as HTMLElement;\n  const widthInput = dialog.querySelector('#iframe-width') as HTMLInputElement;\n  const heightInput = dialog.querySelector('#iframe-height') as HTMLInputElement;\n\n  if (sizeValue === 'inline') {\n    dimensionsRow.style.display = 'flex';\n    widthInput.value = '100%';\n    heightInput.value = '400px';\n    state.formData.width = '100%';\n    state.formData.height = '400px';\n  } else {\n    dimensionsRow.style.display = 'none';\n    state.formData.width = '100%';\n    state.formData.height = 'auto';\n  }\n}\n\nfunction handleWidthChange(dialog: HTMLElement, newWidth: string, editorElement: HTMLElement): void {\n  const state = getEditorState(editorElement);\n  state.formData.width = newWidth;\n\n  if (state.formData.constrainProportions && state.formData.selectedSize === 'inline') {\n    const widthValue = parseFloat(newWidth);\n    if (!isNaN(widthValue)) {\n      const heightValue = (widthValue * 9) / 16; // 16:9 aspect ratio\n      state.formData.height = `${heightValue}px`;\n      const heightInput = dialog.querySelector('#iframe-height') as HTMLInputElement;\n      if (heightInput) heightInput.value = state.formData.height;\n    }\n  }\n}\n\nfunction handleHeightChange(dialog: HTMLElement, newHeight: string, editorElement: HTMLElement): void {\n  const state = getEditorState(editorElement);\n  state.formData.height = newHeight;\n\n  if (state.formData.constrainProportions && state.formData.selectedSize === 'inline') {\n    const heightValue = parseFloat(newHeight);\n    if (!isNaN(heightValue)) {\n      const widthValue = (heightValue * 16) / 9; // 16:9 aspect ratio\n      state.formData.width = `${widthValue}px`;\n      const widthInput = dialog.querySelector('#iframe-width') as HTMLInputElement;\n      if (widthInput) widthInput.value = state.formData.width;\n    }\n  }\n}\n\nfunction toggleConstrainProportions(dialog: HTMLElement, editorElement: HTMLElement): void {\n  const state = getEditorState(editorElement);\n  state.formData.constrainProportions = !state.formData.constrainProportions;\n  const btn = dialog.querySelector('#constrain-btn') as HTMLButtonElement;\n  \n  if (btn) {\n    btn.textContent = state.formData.constrainProportions ? '🔒' : '🔓';\n    btn.className = `rte-constrain-btn ${state.formData.constrainProportions ? 'locked' : 'unlocked'}`;\n    btn.title = state.formData.constrainProportions ? 'Unlock proportions' : 'Lock proportions';\n  }\n}\n\nfunction handleSave(dialog: HTMLElement, editorElement: HTMLElement): void {\n  const state = getEditorState(editorElement);\n  \n  // Get values from form\n  const src = (dialog.querySelector('#iframe-src') as HTMLInputElement)?.value.trim();\n  \n  if (!src) {\n    alert('Please enter a source URL');\n    return;\n  }\n\n  // Validate HTTPS\n  if (!src.startsWith('https://') && !src.startsWith('http://')) {\n    alert('Please enter a valid URL starting with https:// or http://');\n    return;\n  }\n\n  // Get all form values\n  const name = (dialog.querySelector('#iframe-name') as HTMLInputElement)?.value.trim();\n  const title = (dialog.querySelector('#iframe-title') as HTMLInputElement)?.value.trim();\n  const longDescription = (dialog.querySelector('#iframe-longdesc') as HTMLTextAreaElement)?.value.trim();\n  const descriptionUrl = (dialog.querySelector('#iframe-desc-url') as HTMLInputElement)?.value.trim();\n  const showBorder = (dialog.querySelector('#iframe-border') as HTMLInputElement)?.checked ?? true;\n  const enableScrollbar = (dialog.querySelector('#iframe-scrollbar') as HTMLInputElement)?.checked ?? true;\n\n  // Get final dimensions\n  let finalWidth = state.formData.width;\n  let finalHeight = state.formData.height;\n  \n  if (state.formData.selectedSize !== 'inline') {\n    finalWidth = '100%';\n    finalHeight = 'auto';\n  }\n\n  // Insert iframe\n  insertIframe(editorElement, {\n    src,\n    width: finalWidth,\n    height: finalHeight,\n    aspectRatio: state.formData.selectedSize,\n    name: name || undefined,\n    title: title || undefined,\n    longDescription: longDescription || undefined,\n    descriptionUrl: descriptionUrl || undefined,\n    showBorder,\n    enableScrollbar\n  });\n\n  closeDialog(editorElement);\n}\n\nfunction insertIframe(editorElement: HTMLElement, data: {\n  src: string;\n  width: string;\n  height: string;\n  aspectRatio: string;\n  name?: string;\n  title?: string;\n  longDescription?: string;\n  descriptionUrl?: string;\n  showBorder: boolean;\n  enableScrollbar: boolean;\n}): void {\n  const contentEl = editorElement.querySelector('[contenteditable=\"true\"]') as HTMLElement;\n  if (!contentEl) return;\n\n  contentEl.focus();\n\n  setTimeout(() => {\n    const attributes = [\n      `src=\"${data.src}\"`,\n      `width=\"${data.width}\"`,\n      `height=\"${data.height}\"`,\n      'allowfullscreen',\n      `frameborder=\"${data.showBorder ? '1' : '0'}\"`,\n      `scrolling=\"${data.enableScrollbar ? 'auto' : 'no'}\"`,\n    ];\n\n    if (data.name) attributes.push(`name=\"${data.name}\"`);\n    if (data.title) attributes.push(`title=\"${data.title}\"`);\n    if (data.longDescription) attributes.push(`longdesc=\"${data.longDescription}\"`);\n\n    // Add CSS classes for responsive behavior\n    const classes = [];\n    if (data.aspectRatio !== 'inline') {\n      classes.push(`rte-iframe-${data.aspectRatio}`);\n    }\n\n    const classAttr = classes.length > 0 ? `class=\"${classes.join(' ')}\"` : '';\n    const dataAttr = `data-aspect-ratio=\"${data.aspectRatio}\"`;\n\n    const iframeHtml = `<iframe ${attributes.join(' ')} ${classAttr} ${dataAttr}></iframe>`;\n\n    const result = document.execCommand('insertHTML', false, iframeHtml);\n\n    if (!result) {\n      // Alternative approach\n      const selection = window.getSelection();\n      if (selection && selection.rangeCount > 0) {\n        const range = selection.getRangeAt(0);\n        range.deleteContents();\n        const tempDiv = document.createElement('div');\n        tempDiv.innerHTML = iframeHtml;\n        const fragment = document.createDocumentFragment();\n        while (tempDiv.firstChild) {\n          fragment.appendChild(tempDiv.firstChild);\n        }\n        range.insertNode(fragment);\n      }\n    }\n  }, 10);\n}\n\nfunction closeDialog(editorElement: HTMLElement): void {\n  const state = getEditorState(editorElement);\n  if (state.dialogElement) {\n    document.body.removeChild(state.dialogElement);\n    state.dialogElement = null;\n  }\n}\n\nfunction injectEmbedDialogStyles(): void {\n  if (document.getElementById('embed-iframe-dialog-styles')) return;\n\n  const style = document.createElement('style');\n  style.id = 'embed-iframe-dialog-styles';\n  style.textContent = `\n    /* Embed Iframe Dialog Styles */\n    .embed-iframe-dialog {\n      max-width: 600px;\n      width: 100%;\n    }\n\n    .rte-vertical-tabs {\n      display: flex;\n      gap: 20px;\n      min-height: 400px;\n    }\n\n    .rte-tab-buttons {\n      display: flex;\n      flex-direction: column;\n      width: 120px;\n      border-right: 1px solid #e1e5e9;\n    }\n\n    .rte-tab-button {\n      padding: 12px 16px;\n      border: none;\n      background: none;\n      text-align: left;\n      cursor: pointer;\n      font-size: 14px;\n      font-weight: 500;\n      color: #666;\n      border-right: 3px solid transparent;\n      transition: all 0.2s ease;\n    }\n\n    .rte-tab-button:hover {\n      background-color: #f8f9fa;\n      color: #333;\n    }\n\n    .rte-tab-button.active {\n      background-color: #e3f2fd;\n      color: #1976d2;\n      border-right-color: #1976d2;\n      font-weight: 600;\n    }\n\n    .rte-tab-content {\n      flex: 1;\n      padding: 0 0 0 20px;\n    }\n\n    .rte-tab-panel {\n      padding: 0;\n    }\n\n    .rte-form-group {\n      margin-bottom: 16px;\n    }\n\n    .rte-form-label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .rte-form-textarea,\n    .rte-form-select {\n      width: 100%;\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      font-size: 14px;\n      transition: border-color 0.2s ease;\n      box-sizing: border-box;\n    }\n\n    .rte-form-textarea:focus,\n    .rte-form-select:focus {\n      outline: none;\n      border-color: #0066cc;\n      box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);\n    }\n\n    .rte-form-textarea {\n      resize: vertical;\n      min-height: 80px;\n      font-family: inherit;\n    }\n\n    .rte-form-row {\n      display: flex;\n      gap: 12px;\n      align-items: flex-end;\n    }\n\n    .rte-form-row .rte-form-group {\n      flex: 1;\n    }\n\n    .rte-form-row .constrain-group {\n      flex: 0 0 auto;\n      margin-bottom: 0;\n    }\n\n    .rte-constrain-btn {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      background: white;\n      border-radius: 4px;\n      cursor: pointer;\n      font-size: 18px;\n      transition: all 0.2s ease;\n      height: 38px;\n      width: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .rte-constrain-btn:hover {\n      background-color: #f5f5f5;\n      border-color: #1976d2;\n    }\n\n    .rte-constrain-btn.locked {\n      background-color: #e3f2fd;\n      border-color: #1976d2;\n    }\n\n    .rte-checkbox-label {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      font-size: 14px;\n      color: #333;\n      cursor: pointer;\n      padding: 4px 0;\n    }\n\n    .rte-checkbox-label input[type=\"checkbox\"] {\n      width: 18px;\n      height: 18px;\n      cursor: pointer;\n      accent-color: #0066cc;\n    }\n\n    .rte-checkbox-label:hover {\n      color: #000;\n    }\n\n    /* Responsive iframe classes */\n    .rte-iframe-21x9,\n    .rte-iframe-16x9,\n    .rte-iframe-4x3,\n    .rte-iframe-1x1 {\n      position: relative;\n      width: 100%;\n      padding-bottom: 56.25%;\n      height: 0;\n      overflow: hidden;\n    }\n\n    .rte-iframe-21x9 {\n      padding-bottom: 42.857%;\n    }\n\n    .rte-iframe-16x9 {\n      padding-bottom: 56.25%;\n    }\n\n    .rte-iframe-4x3 {\n      padding-bottom: 75%;\n    }\n\n    .rte-iframe-1x1 {\n      padding-bottom: 100%;\n    }\n\n    .rte-iframe-21x9 iframe,\n    .rte-iframe-16x9 iframe,\n    .rte-iframe-4x3 iframe,\n    .rte-iframe-1x1 iframe {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n    }\n  `;\n  \n  document.head.appendChild(style);\n}\n"],"names":["SIZE_OPTIONS","editorStates","getEditorState","editorElement","EmbedIframePlugin","createEmbedDialog","focusedElement","state","overlay","closeDialog","dialog","e","opt","setupDialogEventListeners","injectEmbedDialogStyles","_a","_b","_c","_d","btn","tab","switchTab","sizeSelect","handleSizeChange","widthInput","heightInput","handleWidthChange","handleHeightChange","toggleConstrainProportions","handleSave","panel","sizeValue","dimensionsRow","newWidth","widthValue","heightValue","newHeight","_e","_f","_g","_h","_i","src","name","title","longDescription","showBorder","enableScrollbar","finalWidth","finalHeight","insertIframe","data","contentEl","attributes","classes","classAttr","dataAttr","iframeHtml","selection","range","tempDiv","fragment","style"],"mappings":"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"}