@wikex/admin-kit 0.2.0 → 0.2.1

package/src/live-preview/LivePreviewEditor.tsx

@@ -1,2088 +0,0 @@
-'use client'
-
-import { createPortal } from 'react-dom'
-import React, {
-  type KeyboardEvent,
-  type PointerEvent,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-
-import {
-  type EditableGlobalScope,
-  GlobalInlineInspector,
-  type GlobalInspectorSelection,
-  type InspectorValues,
-  updateGlobalFields,
-} from './GlobalInlineInspector'
-import {
-  saveTextStylePatch,
-  TextStyleInspector,
-  type TextInspectorSelection,
-} from './TextStyleInspector'
-import {
-  EDITABLE_INTERACTIVE_SELECTOR,
-  EDITABLE_PREVIEW_SELECTOR,
-  getEditableElementStyleKey,
-  getTextStyleCSS,
-  isSyntheticElementStyleKey,
-  type TextStyleValue,
-} from '../textStyles'
-import {
-  getBlockPickerOptions,
-  getVisualEditorRoute,
-  isVisualEditorRoute,
-  type BlockPickerOption,
-  type BlockPickerScope,
-  type VisualEditorScope,
-} from './runtimeConfig'
-
-const DEFAULT_EDIT_RATIO = 0.4
-const HANDLE_WIDTH = 12
-const LIVE_PREVIEW_TRANSITION_MS = 160
-const MIN_EDIT_WIDTH = 320
-const MIN_PREVIEW_WIDTH = 320
-const STORAGE_KEY = 'wikex-live-preview-edit-ratio'
-const LEGACY_STORAGE_KEY = 'aurea-live-preview-edit-ratio'
-const MIN_TEXT_WIDTH_PX = 72
-const RESIZABLE_TEXT_SELECTOR = 'h1,h2,h3,h4,h5,h6,p,li'
-
-const isEditableGlobalScope = (value?: string): value is EditableGlobalScope =>
-  value === 'header' || value === 'footer' || value === 'settings'
-
-type EditorTargets = {
-  container: HTMLElement
-  editor: HTMLElement
-  previewWrapper: HTMLElement
-  route: string
-  scope: VisualEditorScope
-}
-
-const normalizeText = (value: string) => value.replace(/\s+/g, ' ').trim()
-const readInlineText = (element: HTMLElement) =>
-  element.innerText
-    .replace(/\u00a0/g, ' ')
-    .replace(/\r\n/g, '\n')
-    .trim()
-
-const getMatchingPreviewFields = (element: HTMLElement, fieldPath: string) =>
-  isSyntheticElementStyleKey(fieldPath)
-    ? Array.from(
-        element.ownerDocument.querySelectorAll<HTMLElement>(EDITABLE_PREVIEW_SELECTOR),
-      ).filter((candidate) => getEditableElementStyleKey(candidate) === fieldPath)
-    : Array.from(element.ownerDocument.querySelectorAll<HTMLElement>('[data-wikex-field]')).filter(
-        (candidate) => candidate.dataset.wikexField === fieldPath,
-      )
-
-const EditorIcon = ({ name }: { name: 'elements' | 'pages' | 'sections' }) => {
-  if (name === 'elements') {
-    return (
-      <svg aria-hidden="true" viewBox="0 0 24 24">
-        <path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" />
-      </svg>
-    )
-  }
-
-  if (name === 'sections') {
-    return (
-      <svg aria-hidden="true" viewBox="0 0 24 24">
-        <path d="M4 5h16v5H4zM4 14h16v5H4z" />
-      </svg>
-    )
-  }
-
-  return (
-    <svg aria-hidden="true" viewBox="0 0 24 24">
-      <path d="M6 3h10l3 3v15H6zM16 3v4h4M9 11h7M9 15h7" />
-    </svg>
-  )
-}
-
-const getVisibleBlocksField = () => {
-  const fields = Array.from(
-    document.querySelectorAll<HTMLElement>('#field-customLayout, #field-layout, .blocks-field'),
-  )
-
-  return fields[0] ?? null
-}
-
-const getVisibleSectionsTarget = () =>
-  getVisibleBlocksField() ??
-  document.querySelector<HTMLElement>('#field-hero, #field-customHero, .collapsible-field')
-
-const getVisibleRichTextTarget = () =>
-  document.querySelector<HTMLElement>('.collection-edit__main .rich-text-lexical')
-
-const scrollEditorTo = (target: HTMLElement | null) => {
-  if (!target) return
-
-  target.scrollIntoView({ behavior: 'smooth', block: 'center' })
-  target.classList.remove('wikex-editor-target--active')
-  window.requestAnimationFrame(() => target.classList.add('wikex-editor-target--active'))
-  window.setTimeout(() => target.classList.remove('wikex-editor-target--active'), 1200)
-}
-
-const activateEditorTab = (label: 'content' | 'hero') => {
-  const tabLabels =
-    label === 'content' ? new Set(['content', 'nội dung']) : new Set(['hero', 'mở đầu'])
-  const tab = Array.from(
-    document.querySelectorAll<HTMLButtonElement>('.tabs-field__tab-button'),
-  ).find((button) => tabLabels.has(normalizeText(button.textContent || '').toLowerCase()))
-
-  if (tab && !tab.classList.contains('tabs-field__tab-button--active')) tab.click()
-}
-
-const getPageBlockTriggerWhenReady = (
-  onReady: (trigger: HTMLButtonElement) => void,
-  attempt = 0,
-) => {
-  const blocksField = getVisibleBlocksField()
-  if (!blocksField) {
-    activateEditorTab('content')
-
-    if (attempt < 12) {
-      window.setTimeout(() => getPageBlockTriggerWhenReady(onReady, attempt + 1), 100)
-    }
-
-    return
-  }
-
-  scrollEditorTo(blocksField)
-
-  const trigger = blocksField.querySelector<HTMLButtonElement>(
-    '.blocks-field__drawer-toggler button, .blocks-field__drawer-toggler',
-  )
-
-  if (trigger) window.setTimeout(() => onReady(trigger), 180)
-}
-
-const getPageBlockTrigger = (onReady: (trigger: HTMLButtonElement) => void) => {
-  const customLayoutRadio = document.querySelector<HTMLInputElement>(
-    '#field-layoutMode-custom, input[type="radio"][value="custom"]',
-  )
-
-  if (customLayoutRadio && !customLayoutRadio.checked) customLayoutRadio.click()
-  getPageBlockTriggerWhenReady(onReady)
-}
-
-const getPostBlockTriggerWhenReady = (
-  onReady: (trigger: HTMLButtonElement) => void,
-  attempt = 0,
-) => {
-  activateEditorTab('content')
-
-  const richTextTarget = getVisibleRichTextTarget()
-  const blockTrigger = richTextTarget?.querySelector<HTMLButtonElement>(
-    'button[aria-label="blocks dropdown"], button.add-block-menu',
-  )
-
-  if (!richTextTarget || !blockTrigger) {
-    if (attempt < 16) {
-      window.setTimeout(() => getPostBlockTriggerWhenReady(onReady, attempt + 1), 100)
-    }
-    return
-  }
-
-  scrollEditorTo(richTextTarget)
-  window.setTimeout(() => onReady(blockTrigger), 180)
-}
-
-const selectPostBlockWhenReady = (
-  blockTrigger: HTMLButtonElement,
-  itemKey: string,
-  attempt = 0,
-) => {
-  if (!blockTrigger.classList.contains('active')) blockTrigger.click()
-
-  const option = document.querySelector<HTMLButtonElement>(`[data-item-key="${itemKey}"]`)
-
-  if (option) {
-    option.click()
-    return
-  }
-
-  if (attempt < 12) {
-    window.setTimeout(() => selectPostBlockWhenReady(blockTrigger, itemKey, attempt + 1), 50)
-  }
-}
-
-const selectPageBlockWhenReady = (payloadLabel: string, attempt = 0) => {
-  const openDrawer = Array.from(document.querySelectorAll<HTMLElement>('.drawer--is-open')).find(
-    (drawer) => drawer.querySelector('.blocks-drawer__blocks'),
-  )
-  const option = Array.from(
-    openDrawer?.querySelectorAll<HTMLButtonElement>('.thumbnail-card') ?? [],
-  ).find((button) => button.title === payloadLabel)
-
-  if (option) {
-    option.click()
-    document.documentElement.removeAttribute('data-wikex-forwarding-block')
-    return
-  }
-
-  if (attempt < 12) {
-    window.setTimeout(() => selectPageBlockWhenReady(payloadLabel, attempt + 1), 50)
-    return
-  }
-
-  document.documentElement.removeAttribute('data-wikex-forwarding-block')
-}
-
-const BlockPickerModal = ({
-  onClose,
-  onSelect,
-  options,
-  title,
-}: {
-  onClose: () => void
-  onSelect: (option: BlockPickerOption) => void
-  options: readonly BlockPickerOption[]
-  title: string
-}) => {
-  useEffect(() => {
-    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
-      if (event.key === 'Escape') onClose()
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [onClose])
-
-  return (
-    <div className="wikex-block-picker" onMouseDown={onClose} role="presentation">
-      <section
-        aria-label={title}
-        aria-modal="true"
-        className="wikex-block-picker__dialog"
-        onMouseDown={(event) => event.stopPropagation()}
-        role="dialog"
-      >
-        <header className="wikex-block-picker__header">
-          <div>
-            <span>Thêm khối</span>
-            <h2>{title}</h2>
-          </div>
-          <button aria-label="Đóng bộ chọn component" onClick={onClose} type="button">
-            <svg aria-hidden="true" viewBox="0 0 24 24">
-              <path d="M6 6l12 12M18 6 6 18" />
-            </svg>
-          </button>
-        </header>
-        <div className="wikex-block-picker__grid">
-          {options.map((option) => (
-            <button
-              className="wikex-block-picker__card"
-              key={option.slug}
-              onClick={() => onSelect(option)}
-              type="button"
-            >
-              <span
-                aria-hidden="true"
-                className={`wikex-block-picker__thumbnail${option.image ? '' : ' wikex-block-picker__thumbnail--empty'}`}
-                style={option.image ? { backgroundImage: `url(${option.image})` } : undefined}
-              />
-              <span className="wikex-block-picker__copy">
-                <strong>{option.label}</strong>
-                <span>{option.description}</span>
-              </span>
-            </button>
-          ))}
-        </div>
-      </section>
-    </div>
-  )
-}
-
-const getAdminBasePath = () => {
-  const match = window.location.pathname.match(/^(.*\/admin)(?:\/|$)/)
-  return match?.[1] ?? '/admin'
-}
-
-const getEditorDocumentTarget = () => {
-  return getVisualEditorRoute(window.location.pathname)?.documentTarget ?? null
-}
-
-const getEditorScope = (pathname = window.location.pathname): VisualEditorScope =>
-  getVisualEditorRoute(pathname)?.scope ?? 'content'
-
-type FieldControl = HTMLInputElement | HTMLTextAreaElement
-
-type EditorDocumentTarget = NonNullable<ReturnType<typeof getEditorDocumentTarget>>
-
-type RichTextControl = {
-  editor: HTMLElement
-  textNode: HTMLElement
-}
-
-const getFieldControl = (fieldPath: string | undefined, text: string) => {
-  if (fieldPath) {
-    const namedControl = Array.from(document.getElementsByName(fieldPath)).find(
-      (control): control is FieldControl =>
-        control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement,
-    )
-
-    if (namedControl) return namedControl
-  }
-
-  if (!text) return null
-
-  const controls = Array.from(
-    document.querySelectorAll<FieldControl>(
-      '.collection-edit__main input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]), .collection-edit__main textarea',
-    ),
-  )
-
-  return controls.find((control) => normalizeText(control.value) === text) ?? null
-}
-
-const getFieldContainer = (control: FieldControl | null, fieldPath?: string) => {
-  if (control) return control.closest<HTMLElement>('.field-type')
-  if (!fieldPath) return null
-
-  const blockMatch = fieldPath.match(/^(customLayout|layout)\.(\d+)(?:\.|$)/)
-  if (blockMatch) {
-    return document.getElementById(`${blockMatch[1]}-row-${Number(blockMatch[2])}`)
-  }
-
-  const rowMatch = fieldPath.match(/^([^.]+)\.(\d+)(?:\.|$)/)
-  if (rowMatch) {
-    const row = document.getElementById(`${rowMatch[1]}-row-${Number(rowMatch[2])}`)
-    if (row) return row
-  }
-
-  return (
-    document.getElementById(`field-${fieldPath.replaceAll('.', '__')}`) ??
-    Array.from(document.querySelectorAll<HTMLElement>('[data-field-path]')).find(
-      (field) => field.dataset.fieldPath === fieldPath,
-    ) ??
-    null
-  )
-}
-
-const getRichTextControl = (
-  fieldPath: string | undefined,
-  text: string,
-): RichTextControl | null => {
-  if (!text) return null
-
-  const scope =
-    getFieldContainer(null, fieldPath) ?? document.querySelector('.collection-edit__main')
-  if (!scope) return null
-
-  const textNode = Array.from(
-    scope.querySelectorAll<HTMLElement>('.rich-text-lexical [data-lexical-text="true"]'),
-  ).find((node) => normalizeText(node.textContent || '') === normalizeText(text))
-  const editor = textNode?.closest<HTMLElement>('[contenteditable="true"]')
-
-  return textNode && editor ? { editor, textNode } : null
-}
-
-const expandEditorTarget = (target: HTMLElement | null) => {
-  const row = target?.matches('[id*="-row-"]')
-    ? target
-    : target?.closest<HTMLElement>('[id*="-row-"]')
-  const collapsible = row?.querySelector<HTMLElement>('.blocks-field__row, .array-field__row')
-
-  if (collapsible?.classList.contains('collapsible--collapsed')) {
-    collapsible.querySelector<HTMLButtonElement>('.collapsible__toggle')?.click()
-  }
-}
-
-const focusRichTextValue = (scope: HTMLElement | null, text: string) => {
-  if (!scope || !text) return false
-
-  const textNode = Array.from(
-    scope.querySelectorAll<HTMLElement>('.rich-text-lexical [data-lexical-text="true"]'),
-  ).find((node) => normalizeText(node.textContent || '') === text)
-  const editor = textNode?.closest<HTMLElement>('[contenteditable="true"]')
-
-  if (!textNode || !editor) return false
-
-  editor.focus({ preventScroll: true })
-  const selection = window.getSelection()
-  const range = document.createRange()
-
-  range.selectNodeContents(textNode)
-  selection?.removeAllRanges()
-  selection?.addRange(range)
-
-  return true
-}
-
-const inferEditableFieldPath = (element: HTMLElement, fieldPath?: string) => {
-  if (!fieldPath) return undefined
-
-  if (fieldPath === 'hero' || fieldPath === 'customHero') {
-    return `${fieldPath}.richText`
-  }
-
-  const blockType = element.closest<HTMLElement>('[data-block-type]')?.dataset.blockType
-
-  if (/^(customLayout|layout)\.\d+$/.test(fieldPath)) {
-    if (blockType === 'cta') return `${fieldPath}.richText`
-    if (blockType === 'archive') return `${fieldPath}.introContent`
-  }
-
-  return fieldPath
-}
-
-const isAggregateInspectorSelection = (
-  documentTarget: EditorDocumentTarget | null,
-  fieldPath?: string,
-) => {
-  if (!fieldPath) return false
-
-  // A rendered block only exposes its row path until the block component maps a
-  // concrete child field. Its properties therefore belong to the complete Payload
-  // row, not to the text-style drawer for the clicked heading or paragraph.
-  if (/^(customLayout|layout)\.\d+$/.test(fieldPath)) return true
-
-  // Post rich text is one Lexical field containing paragraphs, headings and blocks.
-  // Keep direct editing for a matched text node, but let "Thuộc tính" reveal the
-  // complete editor so block controls and formatting remain available.
-  return (
-    documentTarget?.kind === 'collection' &&
-    documentTarget.collection === 'posts' &&
-    fieldPath === 'content'
-  )
-}
-
-const updatePayloadControl = (control: FieldControl, value: string) => {
-  const prototype =
-    control instanceof HTMLTextAreaElement
-      ? HTMLTextAreaElement.prototype
-      : HTMLInputElement.prototype
-  const setter = Object.getOwnPropertyDescriptor(prototype, 'value')?.set
-
-  setter?.call(control, value)
-  control.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText' }))
-  control.dispatchEvent(new Event('change', { bubbles: true }))
-}
-
-const updateRichTextControl = ({ editor, textNode }: RichTextControl, value: string) => {
-  editor.focus({ preventScroll: true })
-
-  const selection = window.getSelection()
-  const range = document.createRange()
-  range.selectNodeContents(textNode)
-  selection?.removeAllRanges()
-  selection?.addRange(range)
-
-  // Lexical observes this browser edit and updates its editor state, which keeps
-  // formatting around the selected text intact and marks Payload's form modified.
-  const updated = document.execCommand('insertText', false, value)
-
-  if (!updated) {
-    textNode.textContent = value
-    editor.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText' }))
-  }
-
-  editor.dispatchEvent(new Event('change', { bubbles: true }))
-}
-
-const WixEditorChrome = ({ container, editor, previewWrapper, route, scope }: EditorTargets) => {
-  const pagesHref = `${getAdminBasePath()}/collections/pages`
-  const editorScopeRef = useRef(scope)
-  editorScopeRef.current = scope
-  const isGlobalEditor = scope === 'header' || scope === 'footer'
-  const selectedControl = useRef<FieldControl | null>(null)
-  const selectedRichTextControl = useRef<RichTextControl | null>(null)
-  const selectedFieldPath = useRef<string | undefined>(undefined)
-  const selectedGlobal = useRef<GlobalInspectorSelection | null>(null)
-  const selectedPreviewElement = useRef<HTMLElement | null>(null)
-  const selectedTextInspector = useRef<TextInspectorSelection | null>(null)
-  const selectedTextResize = useRef<TextInspectorSelection | null>(null)
-  const textWidthSaveController = useRef<AbortController | null>(null)
-  const blockPickerTrigger = useRef<HTMLButtonElement | null>(null)
-  const selectedText = useRef('')
-  const revealPreviewField = useRef<(fieldPath: string, attempt?: number) => void>(() => undefined)
-  const [globalInspectorSelection, setGlobalInspectorSelection] =
-    useState<GlobalInspectorSelection | null>(null)
-  const [textInspectorSelection, setTextInspectorSelection] =
-    useState<TextInspectorSelection | null>(null)
-  const [inspectorOpen, setInspectorOpen] = useState(false)
-  const [blockPickerScope, setBlockPickerScope] = useState<BlockPickerScope | null>(null)
-  const [selectionLabel, setSelectionLabel] = useState('Chọn một phần tử trên trang')
-
-  useEffect(() => {
-    selectedControl.current = null
-    selectedRichTextControl.current = null
-    selectedFieldPath.current = undefined
-    selectedGlobal.current = null
-    selectedPreviewElement.current = null
-    selectedTextInspector.current = null
-    selectedTextResize.current = null
-    textWidthSaveController.current?.abort()
-    blockPickerTrigger.current = null
-    selectedText.current = ''
-    setGlobalInspectorSelection(null)
-    setTextInspectorSelection(null)
-    setInspectorOpen(false)
-    setBlockPickerScope(null)
-    setSelectionLabel('Chọn một phần tử trên trang')
-  }, [previewWrapper, route])
-
-  const openInspector = useCallback(() => {
-    setInspectorOpen(true)
-
-    if (selectedGlobal.current) {
-      setGlobalInspectorSelection({ ...selectedGlobal.current })
-      setTextInspectorSelection(null)
-      return
-    }
-
-    if (selectedTextInspector.current) {
-      setGlobalInspectorSelection(null)
-      setTextInspectorSelection({ ...selectedTextInspector.current })
-      return
-    }
-
-    setGlobalInspectorSelection(null)
-    setTextInspectorSelection(null)
-
-    const revealSelectedField = (attempt = 0) => {
-      const fieldPath = selectedFieldPath.current
-      const target = getFieldContainer(selectedControl.current, fieldPath)
-
-      if (!target && attempt < 12) {
-        if (fieldPath?.startsWith('layout.')) activateEditorTab('content')
-        if (fieldPath === 'hero' || fieldPath?.startsWith('hero.')) activateEditorTab('hero')
-        window.setTimeout(() => revealSelectedField(attempt + 1), 100)
-        return
-      }
-
-      scrollEditorTo(target)
-      expandEditorTarget(target)
-
-      window.setTimeout(() => {
-        const control = getFieldControl(fieldPath, selectedText.current)
-
-        if (control) {
-          selectedControl.current = control
-          control.focus({ preventScroll: true })
-          control.select()
-          return
-        }
-
-        const refreshedTarget = getFieldContainer(null, fieldPath) ?? target
-        focusRichTextValue(refreshedTarget, selectedText.current)
-      }, 180)
-    }
-
-    window.setTimeout(revealSelectedField, 80)
-  }, [])
-
-  const applyGlobalInspectorValues = useCallback((values: InspectorValues) => {
-    const element = selectedPreviewElement.current
-    if (!element) return
-
-    const globalSelection = selectedGlobal.current
-    const matchingElements = globalSelection
-      ? getMatchingPreviewFields(element, globalSelection.fieldPath)
-      : [element]
-
-    for (const matchingElement of matchingElements) {
-      matchingElement.innerText = values.text
-      const interactiveElement = matchingElement.closest<HTMLElement>('a, button')
-
-      if (interactiveElement) {
-        interactiveElement.style.backgroundColor = values.backgroundColor
-        interactiveElement.style.color = values.textColor
-
-        const resolvedURL =
-          globalSelection?.scope === 'settings' && globalSelection.fieldPath === 'email'
-            ? `mailto:${values.text}`
-            : values.url
-
-        if (interactiveElement instanceof HTMLAnchorElement && resolvedURL) {
-          interactiveElement.setAttribute('href', resolvedURL)
-        }
-      }
-    }
-
-    selectedText.current = values.text
-    if (globalSelection) {
-      selectedGlobal.current = {
-        ...globalSelection,
-        href: values.url || globalSelection.href,
-        text: values.text,
-      }
-    }
-    setSelectionLabel(`Đã cập nhật · ${selectedGlobal.current?.scope || 'nội dung dùng chung'}`)
-  }, [])
-
-  const applyTextInspectorValues = useCallback((values: TextStyleValue) => {
-    const element = selectedPreviewElement.current
-    const selection = selectedTextInspector.current
-    if (!element || !selection) return
-
-    const style = getTextStyleCSS(values)
-    const matchingElements = getMatchingPreviewFields(element, selection.fieldPath)
-
-    for (const matchingElement of matchingElements.length ? matchingElements : [element]) {
-      if ('fontFamily' in values) matchingElement.style.fontFamily = style.fontFamily || ''
-      if ('lineHeight' in values) matchingElement.style.lineHeight = style.lineHeight || ''
-    }
-
-    setSelectionLabel(`Đã cập nhật kiểu chữ · ${selection.fieldPath}`)
-  }, [])
-
-  const applyTextInspectorText = useCallback((value: string) => {
-    const element = selectedPreviewElement.current
-    const control = selectedControl.current
-    const selection = selectedTextInspector.current
-    if (!element || !control || !selection) return
-
-    const matchingElements = getMatchingPreviewFields(element, selection.fieldPath)
-    for (const matchingElement of matchingElements.length ? matchingElements : [element]) {
-      matchingElement.innerText = value
-    }
-
-    updatePayloadControl(
-      control,
-      control instanceof HTMLInputElement ? value.replace(/\s+/g, ' ') : value,
-    )
-    selectedText.current = value
-    selectedTextInspector.current = { ...selection, text: value }
-    setSelectionLabel(`Đang tự động lưu nội dung · ${selection.fieldPath}`)
-
-    window.requestAnimationFrame(() => {
-      element.ownerDocument.defaultView?.dispatchEvent(new Event('resize'))
-    })
-  }, [])
-
-  const openElements = useCallback(() => {
-    setGlobalInspectorSelection(null)
-    setTextInspectorSelection(null)
-    // Pages and posts share the same visual picker. Only the final adapter differs:
-    // blocks fields use Payload's drawer command, while post content uses Lexical.
-    setInspectorOpen(false)
-
-    const documentTarget = getEditorDocumentTarget()
-
-    if (documentTarget?.kind === 'collection' && documentTarget.collection === 'posts') {
-      setSelectionLabel('Thêm component vào nội dung bài viết')
-      window.setTimeout(
-        () =>
-          getPostBlockTriggerWhenReady((trigger) => {
-            blockPickerTrigger.current = trigger
-            setBlockPickerScope('post')
-          }),
-        80,
-      )
-      return
-    }
-
-    setSelectionLabel('Thêm component vào bố cục trang')
-    window.setTimeout(
-      () =>
-        getPageBlockTrigger((trigger) => {
-          blockPickerTrigger.current = trigger
-          setBlockPickerScope('page')
-        }),
-      80,
-    )
-  }, [])
-
-  const closeBlockPicker = useCallback(() => setBlockPickerScope(null), [])
-
-  const selectBlock = useCallback(
-    (option: BlockPickerOption) => {
-      const trigger = blockPickerTrigger.current
-      const scopeToInsert = blockPickerScope
-      setBlockPickerScope(null)
-
-      if (!trigger?.isConnected || !scopeToInsert) return
-
-      if (scopeToInsert === 'post') {
-        window.setTimeout(() => selectPostBlockWhenReady(trigger, `block-${option.slug}`), 80)
-        return
-      }
-
-      document.documentElement.setAttribute('data-wikex-forwarding-block', 'true')
-      trigger.click()
-      window.setTimeout(() => selectPageBlockWhenReady(option.payloadLabel ?? option.label), 50)
-    },
-    [blockPickerScope],
-  )
-
-  const openSections = useCallback(() => {
-    setGlobalInspectorSelection(null)
-    setTextInspectorSelection(null)
-    setInspectorOpen(true)
-
-    const revealSections = (attempt = 0) => {
-      const documentTarget = getEditorDocumentTarget()
-      const isPostEditor =
-        documentTarget?.kind === 'collection' && documentTarget.collection === 'posts'
-      const target = isPostEditor ? getVisibleRichTextTarget() : getVisibleBlocksField()
-
-      if (!target && attempt < 12) {
-        activateEditorTab('content')
-        window.setTimeout(() => revealSections(attempt + 1), 100)
-        return
-      }
-
-      const resolvedTarget = target ?? getVisibleSectionsTarget()
-      scrollEditorTo(resolvedTarget)
-      if (!isPostEditor) expandEditorTarget(target)
-    }
-
-    window.setTimeout(revealSections, 80)
-  }, [])
-
-  useEffect(() => {
-    editor.classList.add('wikex-visual-editor')
-    editor.setAttribute('data-wikex-visual-editor', 'true')
-    editor.setAttribute('data-wikex-editor-route', route)
-
-    return () => {
-      editor.classList.remove('wikex-visual-editor', 'wikex-editor--inspecting')
-      editor.removeAttribute('data-wikex-visual-editor')
-      editor.removeAttribute('data-wikex-editor-route')
-      editor.removeAttribute('data-wikex-inspecting')
-      document.documentElement.removeAttribute('data-wikex-forwarding-block')
-    }
-  }, [editor, route])
-
-  useEffect(() => {
-    editor.classList.toggle('wikex-editor--inspecting', inspectorOpen)
-    editor.setAttribute('data-wikex-inspecting', String(inspectorOpen))
-  }, [editor, inspectorOpen])
-
-  useEffect(() => {
-    let activeIframe: HTMLIFrameElement | null = null
-    let cleanupActiveIframe = () => undefined
-    let bindFrame = 0
-
-    const bindIframe = () => {
-      const iframe = previewWrapper.querySelector<HTMLIFrameElement>('#live-preview-iframe')
-      if (iframe === activeIframe) return
-
-      cleanupActiveIframe()
-      activeIframe = iframe
-      if (!iframe) return
-
-      let cleanupFrame = () => undefined
-
-      const installFrameEditor = () => {
-        cleanupFrame()
-
-        let frameDocument: Document | null = null
-
-        try {
-          frameDocument = iframe.contentDocument
-        } catch {
-          return
-        }
-
-        if (!frameDocument?.body) return
-
-        const style = frameDocument.createElement('style')
-        style.dataset.wikexEditor = 'true'
-        style.textContent = `
-        #wikex-selection-box {
-          border: 1.5px solid #a67c3f;
-          border-radius: 4px;
-          display: none;
-          pointer-events: none;
-          position: fixed;
-          z-index: 30;
-        }
-        .wikex-text-resize-handle {
-          align-items: center;
-          background: #fff;
-          border: 2px solid #a67c3f;
-          border-radius: 999px;
-          box-shadow: 0 3px 12px rgba(15,20,17,.22);
-          cursor: ew-resize;
-          display: none;
-          height: 34px;
-          justify-content: center;
-          padding: 0;
-          position: fixed;
-          touch-action: none;
-          transform: translate(-50%, -50%);
-          width: 12px;
-          z-index: 62;
-        }
-        .wikex-text-resize-handle::after {
-          background: #a67c3f;
-          border-radius: 99px;
-          content: "";
-          height: 18px;
-          width: 2px;
-        }
-        .wikex-text-resize-handle:hover,
-        .wikex-text-resize-handle[data-active="true"] {
-          background: #f3dfb5;
-          box-shadow: 0 0 0 4px rgba(166,124,63,.18), 0 3px 12px rgba(15,20,17,.22);
-        }
-        #wikex-text-width-label {
-          background: #a67c3f;
-          border-radius: 6px;
-          color: #fff;
-          display: none;
-          font: 700 11px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-          padding: 5px 7px;
-          pointer-events: none;
-          position: fixed;
-          transform: translate(-50%, -100%);
-          white-space: nowrap;
-          z-index: 63;
-        }
-        #wikex-selection-toolbar {
-          align-items: center;
-          background: rgba(20,29,23,.96);
-          border: 1px solid rgba(255,255,255,.12);
-          border-radius: 12px;
-          box-shadow: 0 14px 40px rgba(15,20,17,.24);
-          color: #172019;
-          display: none;
-          font: 600 12px/1.2 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-          gap: 4px;
-          max-width: calc(100vw - 24px);
-          padding: 5px;
-          position: fixed;
-          z-index: 60;
-        }
-        #wikex-selection-toolbar span {
-          color: rgba(255,255,255,.7);
-          max-width: 220px;
-          overflow: hidden;
-          padding: 0 8px;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-        #wikex-selection-toolbar button {
-          background: rgba(255,255,255,.1);
-          border: 1px solid transparent;
-          border-radius: 8px;
-          color: #fff;
-          cursor: pointer;
-          font: inherit;
-          min-height: 30px;
-          padding: 6px 10px;
-          transition: background-color 140ms ease, border-color 140ms ease;
-          white-space: nowrap;
-        }
-        #wikex-selection-toolbar button:hover { background: rgba(255,255,255,.17); }
-        #wikex-selection-toolbar button[data-primary="true"] {
-          background: #d2b477;
-          color: #162019;
-        }
-        #wikex-selection-toolbar button[data-primary="true"]:hover { background: #e4cc9b; }
-        #wikex-selection-toolbar button:disabled { cursor: not-allowed; opacity: .45; }
-        [data-wikex-inline-editing="true"] {
-          caret-color: #a67c3f;
-          cursor: text !important;
-          min-width: 1ch;
-          outline: none !important;
-        }
-        [data-wikex-field]:is(h1,h2,h3,h4,h5,h6,p,span,strong),
-        [data-wikex-field] :is(h1,h2,h3,h4,h5,h6,p,span,strong) { cursor: text; }
-        [data-wikex-field]:is(h1,h2,h3,h4,h5,h6,p,span,strong):not([data-wikex-selected="true"]):hover {
-          outline: 1px dashed rgba(166,124,63,.58);
-          outline-offset: 4px;
-        }
-        .admin-bar { display: none !important; }
-        html { --admin-bar-height: 0px !important; }
-        body * { cursor: default; }
-        body a, body button { cursor: pointer; }
-      `
-        frameDocument.head.appendChild(style)
-
-        const selectionBox = frameDocument.createElement('div')
-        selectionBox.id = 'wikex-selection-box'
-        const leftResizeHandle = frameDocument.createElement('button')
-        leftResizeHandle.ariaLabel = 'Kéo để đổi chiều rộng từ bên trái'
-        leftResizeHandle.className = 'wikex-text-resize-handle'
-        leftResizeHandle.dataset.side = 'left'
-        leftResizeHandle.title = 'Kéo để đổi chiều rộng · Nhấp đúp để trả về tự động'
-        leftResizeHandle.type = 'button'
-        const rightResizeHandle = frameDocument.createElement('button')
-        rightResizeHandle.ariaLabel = 'Kéo để đổi chiều rộng từ bên phải'
-        rightResizeHandle.className = 'wikex-text-resize-handle'
-        rightResizeHandle.dataset.side = 'right'
-        rightResizeHandle.title = 'Kéo để đổi chiều rộng · Nhấp đúp để trả về tự động'
-        rightResizeHandle.type = 'button'
-        const widthLabel = frameDocument.createElement('span')
-        widthLabel.id = 'wikex-text-width-label'
-        const toolbar = frameDocument.createElement('div')
-        toolbar.id = 'wikex-selection-toolbar'
-        const label = frameDocument.createElement('span')
-        const propertiesButton = frameDocument.createElement('button')
-        propertiesButton.dataset.primary = 'true'
-        propertiesButton.textContent = 'Thuộc tính'
-        propertiesButton.type = 'button'
-        toolbar.append(label, propertiesButton)
-        frameDocument.body.append(
-          selectionBox,
-          leftResizeHandle,
-          rightResizeHandle,
-          widthLabel,
-          toolbar,
-        )
-
-        let selectedElement: HTMLElement | null = null
-        let inlineInputHandler: (() => void) | null = null
-        let inlineBlurHandler: (() => void) | null = null
-        let inlineKeyHandler: ((event: globalThis.KeyboardEvent) => void) | null = null
-        let inlineOriginalText = ''
-        const resizeHandles = [leftResizeHandle, rightResizeHandle]
-
-        const hideResizeControls = () => {
-          for (const handle of resizeHandles) handle.style.display = 'none'
-          widthLabel.style.display = 'none'
-        }
-
-        const updateSelectionPosition = () => {
-          if (!selectedElement?.isConnected) {
-            selectionBox.style.display = 'none'
-            toolbar.style.display = 'none'
-            hideResizeControls()
-            return
-          }
-
-          const bounds = selectedElement.getBoundingClientRect()
-          const isHeaderSelection = Boolean(
-            selectedElement.closest('header, [data-wikex-scope="header"]'),
-          )
-          const obstructedTop = isHeaderSelection
-            ? 0
-            : Array.from(
-                frameDocument?.querySelectorAll<HTMLElement>(
-                  'header, [data-wikex-scope="header"]',
-                ) ?? [],
-              ).reduce((top, candidate) => {
-                const style = iframe.contentWindow?.getComputedStyle(candidate)
-                const candidateBounds = candidate.getBoundingClientRect()
-                const obstructsCanvas =
-                  (style?.position === 'fixed' || style?.position === 'sticky') &&
-                  candidateBounds.top <= top + 1 &&
-                  candidateBounds.bottom > 0
-
-                return obstructsCanvas ? Math.max(top, candidateBounds.bottom) : top
-              }, 0)
-          const visibleLeft = Math.max(0, bounds.left)
-          const visibleTop = Math.max(obstructedTop, 0, bounds.top)
-          const visibleRight = Math.min(iframe.clientWidth, bounds.right)
-          const visibleBottom = Math.min(iframe.clientHeight, bounds.bottom)
-
-          if (visibleRight <= visibleLeft || visibleBottom <= visibleTop) {
-            selectionBox.style.display = 'none'
-            toolbar.style.display = 'none'
-            hideResizeControls()
-            return
-          }
-
-          selectionBox.style.display = 'block'
-          selectionBox.style.height = `${visibleBottom - visibleTop}px`
-          selectionBox.style.left = `${visibleLeft}px`
-          selectionBox.style.top = `${visibleTop}px`
-          selectionBox.style.width = `${visibleRight - visibleLeft}px`
-
-          const canResizeText = Boolean(selectedTextResize.current)
-          for (const [handle, horizontalPosition] of [
-            [leftResizeHandle, visibleLeft],
-            [rightResizeHandle, visibleRight],
-          ] as const) {
-            handle.style.display = canResizeText ? 'flex' : 'none'
-            handle.style.left = `${Math.max(8, Math.min(iframe.clientWidth - 8, horizontalPosition))}px`
-            handle.style.top = `${visibleTop + (visibleBottom - visibleTop) / 2}px`
-          }
-
-          toolbar.style.display = 'flex'
-          const toolbarBounds = toolbar.getBoundingClientRect()
-          const toolbarWidth = Math.min(toolbarBounds.width || 260, iframe.clientWidth - 16)
-          const toolbarHeight = toolbarBounds.height || 42
-          const belowTop = visibleBottom + 8
-          const aboveTop = visibleTop - toolbarHeight - 8
-          const toolbarTop =
-            belowTop + toolbarHeight <= iframe.clientHeight
-              ? belowTop
-              : aboveTop >= obstructedTop + 8
-                ? aboveTop
-                : Math.min(visibleTop + 8, iframe.clientHeight - toolbarHeight - 8)
-
-          toolbar.style.left = `${Math.max(8, Math.min(visibleLeft, iframe.clientWidth - toolbarWidth - 8))}px`
-          toolbar.style.top = `${Math.max(obstructedTop + 8, toolbarTop)}px`
-        }
-
-        type ActiveTextResize = {
-          contentLeft: number
-          contentWidth: number
-          element: HTMLElement
-          originalStyle: {
-            boxSizing: string
-            marginLeft: string
-            marginRight: string
-            maxWidth: string
-            width: string
-          }
-          selection: TextInspectorSelection
-          side: 'left' | 'right'
-          startLeft: number
-          startRight: number
-          width: number
-          widthOffset: number
-        }
-
-        let activeTextResize: ActiveTextResize | null = null
-
-        const startTextResize = (
-          event: globalThis.PointerEvent,
-          side: ActiveTextResize['side'],
-          handle: HTMLButtonElement,
-        ) => {
-          const element = selectedElement
-          const selection = selectedTextResize.current
-          const parent = element?.parentElement
-          if (!element || !selection || !parent) return
-
-          event.preventDefault()
-          event.stopPropagation()
-          event.stopImmediatePropagation()
-          stopInlineEditing(true)
-
-          const bounds = element.getBoundingClientRect()
-          const parentBounds = parent.getBoundingClientRect()
-          const parentStyle = iframe.contentWindow?.getComputedStyle(parent)
-          const paddingLeft = Number.parseFloat(parentStyle?.paddingLeft || '0') || 0
-          const paddingRight = Number.parseFloat(parentStyle?.paddingRight || '0') || 0
-          const contentLeft = parentBounds.left + paddingLeft
-          const contentWidth = Math.max(
-            MIN_TEXT_WIDTH_PX,
-            parentBounds.width - paddingLeft - paddingRight,
-          )
-          const contentRight = contentLeft + contentWidth
-          const startLeft = Math.max(contentLeft, Math.min(bounds.left, contentRight))
-          const startRight = Math.max(startLeft, Math.min(bounds.right, contentRight))
-
-          activeTextResize = {
-            contentLeft,
-            contentWidth,
-            element,
-            originalStyle: {
-              boxSizing: element.style.boxSizing,
-              marginLeft: element.style.marginLeft,
-              marginRight: element.style.marginRight,
-              maxWidth: element.style.maxWidth,
-              width: element.style.width,
-            },
-            selection,
-            side,
-            startLeft,
-            startRight,
-            width: Math.max(MIN_TEXT_WIDTH_PX, startRight - startLeft),
-            widthOffset: Math.max(0, startLeft - contentLeft),
-          }
-
-          handle.dataset.active = 'true'
-          handle.setPointerCapture(event.pointerId)
-          frameDocument.body.style.cursor = 'ew-resize'
-          frameDocument.body.style.userSelect = 'none'
-          widthLabel.style.display = 'block'
-          widthLabel.style.left = `${bounds.left + bounds.width / 2}px`
-          widthLabel.style.top = `${Math.max(28, bounds.top - 8)}px`
-          widthLabel.textContent = `${Math.round(activeTextResize.width)} px`
-          setSelectionLabel(`Đang chỉnh chiều rộng · ${selection.fieldPath}`)
-        }
-
-        const moveTextResize = (event: globalThis.PointerEvent) => {
-          const resize = activeTextResize
-          if (!resize) return
-
-          event.preventDefault()
-          event.stopPropagation()
-          const minimumWidth = Math.min(MIN_TEXT_WIDTH_PX, resize.contentWidth)
-          const contentRight = resize.contentLeft + resize.contentWidth
-          const nextLeft =
-            resize.side === 'left'
-              ? Math.max(
-                  resize.contentLeft,
-                  Math.min(event.clientX, resize.startRight - minimumWidth),
-                )
-              : resize.startLeft
-          const nextRight =
-            resize.side === 'right'
-              ? Math.min(contentRight, Math.max(event.clientX, resize.startLeft + minimumWidth))
-              : resize.startRight
-          const nextWidth = Math.max(minimumWidth, nextRight - nextLeft)
-          const width = Math.min(100, Math.max(5, (nextWidth / resize.contentWidth) * 100))
-          const widthOffset = Math.min(
-            100 - width,
-            Math.max(0, ((nextLeft - resize.contentLeft) / resize.contentWidth) * 100),
-          )
-
-          resize.width = Math.round(width * 1000) / 1000
-          resize.widthOffset = Math.round(widthOffset * 1000) / 1000
-          resize.element.style.boxSizing = 'border-box'
-          resize.element.style.marginLeft = `${resize.widthOffset}%`
-          resize.element.style.marginRight = 'auto'
-          resize.element.style.maxWidth = 'none'
-          resize.element.style.width = `${resize.width}%`
-
-          updateSelectionPosition()
-          const resizedBounds = resize.element.getBoundingClientRect()
-          widthLabel.style.display = 'block'
-          widthLabel.style.left = `${resizedBounds.left + resizedBounds.width / 2}px`
-          widthLabel.style.top = `${Math.max(28, resizedBounds.top - 8)}px`
-          widthLabel.textContent = `${Math.round(resizedBounds.width)} px`
-        }
-
-        const finishTextResize = (event: globalThis.PointerEvent) => {
-          const resize = activeTextResize
-          if (!resize) return
-
-          event.preventDefault()
-          event.stopPropagation()
-          activeTextResize = null
-          for (const handle of resizeHandles) delete handle.dataset.active
-          frameDocument.body.style.cursor = ''
-          frameDocument.body.style.userSelect = ''
-          widthLabel.style.display = 'none'
-
-          textWidthSaveController.current?.abort()
-          const controller = new AbortController()
-          textWidthSaveController.current = controller
-          setSelectionLabel(`Đang tự động lưu chiều rộng · ${resize.selection.fieldPath}`)
-
-          void saveTextStylePatch(
-            resize.selection,
-            { width: resize.width, widthOffset: resize.widthOffset },
-            controller.signal,
-          )
-            .then(() => {
-              if (controller.signal.aborted) return
-              setSelectionLabel(`Đã lưu chiều rộng · ${Math.round(resize.width)}%`)
-            })
-            .catch((error: unknown) => {
-              if (controller.signal.aborted) return
-              Object.assign(resize.element.style, resize.originalStyle)
-              updateSelectionPosition()
-              setSelectionLabel(
-                error instanceof Error
-                  ? `Không thể lưu chiều rộng · ${error.message}`
-                  : 'Không thể lưu chiều rộng · Thử lại',
-              )
-            })
-        }
-
-        const bindResizeHandle = (handle: HTMLButtonElement, side: ActiveTextResize['side']) => {
-          const handlePointerDown = (event: globalThis.PointerEvent) =>
-            startTextResize(event, side, handle)
-          const stopHandleClick = (event: Event) => {
-            event.preventDefault()
-            event.stopPropagation()
-            event.stopImmediatePropagation()
-          }
-          const resetTextWidth = (event: MouseEvent) => {
-            stopHandleClick(event)
-            const element = selectedElement
-            const selection = selectedTextResize.current
-            if (!element || !selection) return
-
-            const previousStyle = {
-              boxSizing: element.style.boxSizing,
-              marginLeft: element.style.marginLeft,
-              marginRight: element.style.marginRight,
-              maxWidth: element.style.maxWidth,
-              width: element.style.width,
-            }
-            element.style.boxSizing = ''
-            element.style.marginLeft = ''
-            element.style.marginRight = ''
-            element.style.maxWidth = ''
-            element.style.width = ''
-            updateSelectionPosition()
-
-            textWidthSaveController.current?.abort()
-            const controller = new AbortController()
-            textWidthSaveController.current = controller
-            setSelectionLabel(`Đang trả chiều rộng về tự động · ${selection.fieldPath}`)
-
-            void saveTextStylePatch(
-              selection,
-              { width: undefined, widthOffset: undefined },
-              controller.signal,
-            )
-              .then(() => {
-                if (!controller.signal.aborted) {
-                  setSelectionLabel(`Chiều rộng tự động · ${selection.fieldPath}`)
-                }
-              })
-              .catch((error: unknown) => {
-                if (controller.signal.aborted) return
-                Object.assign(element.style, previousStyle)
-                updateSelectionPosition()
-                setSelectionLabel(
-                  error instanceof Error
-                    ? `Không thể đặt lại chiều rộng · ${error.message}`
-                    : 'Không thể đặt lại chiều rộng · Thử lại',
-                )
-              })
-          }
-
-          handle.addEventListener('click', stopHandleClick)
-          handle.addEventListener('dblclick', resetTextWidth)
-          handle.addEventListener('pointerdown', handlePointerDown)
-          handle.addEventListener('pointermove', moveTextResize)
-          handle.addEventListener('pointerup', finishTextResize)
-          handle.addEventListener('pointercancel', finishTextResize)
-
-          return () => {
-            handle.removeEventListener('click', stopHandleClick)
-            handle.removeEventListener('dblclick', resetTextWidth)
-            handle.removeEventListener('pointerdown', handlePointerDown)
-            handle.removeEventListener('pointermove', moveTextResize)
-            handle.removeEventListener('pointerup', finishTextResize)
-            handle.removeEventListener('pointercancel', finishTextResize)
-          }
-        }
-
-        const unbindLeftResizeHandle = bindResizeHandle(leftResizeHandle, 'left')
-        const unbindRightResizeHandle = bindResizeHandle(rightResizeHandle, 'right')
-
-        const stopInlineEditing = (commit = true) => {
-          const element = selectedElement
-          if (!element?.hasAttribute('data-wikex-inline-editing')) return
-
-          if (inlineInputHandler) element.removeEventListener('input', inlineInputHandler)
-          if (inlineBlurHandler) element.removeEventListener('blur', inlineBlurHandler)
-          if (inlineKeyHandler) element.removeEventListener('keydown', inlineKeyHandler)
-
-          const nextText = commit ? readInlineText(element) : inlineOriginalText
-          if (!commit) element.innerText = inlineOriginalText
-          element.removeAttribute('contenteditable')
-          element.removeAttribute('data-wikex-inline-editing')
-
-          if (commit && nextText !== inlineOriginalText) {
-            const control = selectedControl.current
-            const richTextControl = selectedRichTextControl.current
-            const globalSelection = selectedGlobal.current
-
-            if (control) {
-              updatePayloadControl(
-                control,
-                control instanceof HTMLInputElement ? normalizeText(nextText) : nextText,
-              )
-            } else if (richTextControl) {
-              updateRichTextControl(richTextControl, nextText)
-            } else if (globalSelection) {
-              const previousText = inlineOriginalText
-              const savedElement = element
-
-              setSelectionLabel(`Đang lưu · ${globalSelection.scope}`)
-              void updateGlobalFields(globalSelection.scope, [
-                { path: globalSelection.fieldPath, value: nextText },
-              ])
-                .then(() => {
-                  for (const matchingElement of getMatchingPreviewFields(
-                    savedElement,
-                    globalSelection.fieldPath,
-                  )) {
-                    matchingElement.innerText = nextText
-
-                    if (
-                      globalSelection.scope === 'settings' &&
-                      globalSelection.fieldPath === 'email'
-                    ) {
-                      matchingElement
-                        .closest<HTMLAnchorElement>('a')
-                        ?.setAttribute('href', `mailto:${nextText}`)
-                    }
-                  }
-                  selectedGlobal.current = { ...globalSelection, text: nextText }
-                  setSelectionLabel(`Đã cập nhật · ${globalSelection.scope}`)
-                })
-                .catch(() => {
-                  if (savedElement.isConnected && readInlineText(savedElement) === nextText) {
-                    savedElement.innerText = previousText
-                  }
-                  selectedText.current = previousText
-                  setSelectionLabel('Không thể lưu nội dung dùng chung · Thử lại')
-                })
-            }
-
-            selectedText.current = nextText
-            if (!globalSelection) {
-              setSelectionLabel(`Đã cập nhật · ${selectedFieldPath.current || 'nội dung'}`)
-            }
-          } else {
-            setSelectionLabel(selectedFieldPath.current || 'Chọn một phần tử trên trang')
-          }
-
-          propertiesButton.textContent = 'Thuộc tính'
-          inlineInputHandler = null
-          inlineBlurHandler = null
-          inlineKeyHandler = null
-        }
-
-        const startInlineEditing = () => {
-          if (!selectedElement) return
-
-          if (
-            !selectedControl.current &&
-            !selectedRichTextControl.current &&
-            !selectedGlobal.current
-          ) {
-            openInspector()
-            return
-          }
-
-          stopInlineEditing(false)
-          inlineOriginalText = readInlineText(selectedElement)
-          selectedElement.setAttribute('contenteditable', 'plaintext-only')
-          selectedElement.dataset.wikexInlineEditing = 'true'
-          selectedElement.focus()
-          inlineInputHandler = () => {
-            updateSelectionPosition()
-            setSelectionLabel('Đang sửa trực tiếp · Enter để lưu · Esc để hủy')
-          }
-          inlineBlurHandler = () => stopInlineEditing(true)
-          inlineKeyHandler = (event) => {
-            if (event.key === 'Escape') {
-              event.preventDefault()
-              stopInlineEditing(false)
-              return
-            }
-
-            if (event.key === 'Enter' && !event.shiftKey) {
-              event.preventDefault()
-              stopInlineEditing(true)
-            }
-          }
-          selectedElement.addEventListener('input', inlineInputHandler)
-          selectedElement.addEventListener('blur', inlineBlurHandler)
-          selectedElement.addEventListener('keydown', inlineKeyHandler)
-          propertiesButton.textContent = 'Thuộc tính'
-
-          const selection = frameDocument?.getSelection()
-          const range = frameDocument?.createRange()
-          if (selection && range) {
-            range.selectNodeContents(selectedElement)
-            selection.removeAllRanges()
-            selection.addRange(range)
-          }
-        }
-
-        const selectElement = (element: HTMLElement) => {
-          stopInlineEditing(true)
-          selectedElement?.removeAttribute('data-wikex-selected')
-          selectedElement = element
-          selectedElement.dataset.wikexSelected = 'true'
-          selectedPreviewElement.current = element
-          const baseFieldPath =
-            element.dataset.wikexField ??
-            element.closest<HTMLElement>('[data-wikex-field]')?.dataset.wikexField
-          const text = normalizeText(element.innerText || element.textContent || '')
-          const fieldPath = inferEditableFieldPath(element, baseFieldPath)
-          const documentTarget = getEditorDocumentTarget()
-          const isAggregateSelection = isAggregateInspectorSelection(documentTarget, fieldPath)
-          const supportsTextStyles = Boolean(text) && element.matches(EDITABLE_PREVIEW_SELECTOR)
-          const elementStyleKey = supportsTextStyles
-            ? fieldPath || getEditableElementStyleKey(element)
-            : undefined
-          const resizeStyleKey = isAggregateSelection
-            ? getEditableElementStyleKey(element)
-            : elementStyleKey
-          const elementScope =
-            element.closest<HTMLElement>('[data-wikex-scope]')?.dataset.wikexScope
-          const configuredGlobalScope =
-            element.dataset.wikexGlobal ??
-            element.closest<HTMLElement>('[data-wikex-global]')?.dataset.wikexGlobal
-          const fieldGlobalScope = isEditableGlobalScope(configuredGlobalScope)
-            ? configuredGlobalScope
-            : isEditableGlobalScope(elementScope)
-              ? elementScope
-              : undefined
-          const externalGlobalScope =
-            fieldGlobalScope && fieldGlobalScope !== editorScopeRef.current
-              ? fieldGlobalScope
-              : undefined
-          const control = externalGlobalScope ? null : getFieldControl(fieldPath, text)
-          const richTextControl = control ? null : getRichTextControl(fieldPath, text)
-          const interactiveElement = element.closest<HTMLAnchorElement | HTMLButtonElement>(
-            'a, button',
-          )
-          const globalSelection =
-            externalGlobalScope && fieldPath
-              ? {
-                  fieldPath,
-                  href:
-                    interactiveElement instanceof HTMLAnchorElement
-                      ? interactiveElement.getAttribute('href') || undefined
-                      : undefined,
-                  scope: externalGlobalScope,
-                  supportsLink: Boolean(interactiveElement),
-                  text,
-                }
-              : null
-          const textInspector =
-            !globalSelection && !isAggregateSelection && documentTarget && elementStyleKey
-              ? {
-                  ...documentTarget,
-                  canEditText: Boolean(control),
-                  fieldPath: elementStyleKey,
-                  multiline: control instanceof HTMLTextAreaElement,
-                  tagName: element.tagName.toLowerCase(),
-                  text,
-                }
-              : null
-          const textResize =
-            !globalSelection &&
-            documentTarget &&
-            resizeStyleKey &&
-            element.matches(RESIZABLE_TEXT_SELECTOR)
-              ? {
-                  ...documentTarget,
-                  canEditText: false,
-                  fieldPath: resizeStyleKey,
-                  multiline: false,
-                  tagName: element.tagName.toLowerCase(),
-                  text,
-                }
-              : null
-          const tagLabel = element.tagName.toLowerCase()
-          const semanticLabel =
-            tagLabel === 'img' || element.querySelector('img')
-              ? 'Hình ảnh'
-              : /^h[1-6]$/.test(tagLabel)
-                ? 'Tiêu đề'
-                : tagLabel === 'p'
-                  ? 'Đoạn văn'
-                  : interactiveElement
-                    ? 'Liên kết / nút'
-                    : 'Nội dung'
-          const readableLabel =
-            fieldPath || control?.name || `${semanticLabel}${text ? ` · ${text.slice(0, 36)}` : ''}`
-
-          selectedControl.current = control
-          selectedRichTextControl.current = externalGlobalScope ? null : richTextControl
-          selectedFieldPath.current = fieldPath
-          selectedGlobal.current = globalSelection
-          selectedTextInspector.current = textInspector
-          selectedTextResize.current = textResize
-          setGlobalInspectorSelection(globalSelection)
-          setTextInspectorSelection(textInspector)
-          selectedText.current = text
-          // Every selectable preview element must have a way back to its editor.
-          // Elements without a precise CMS mapping fall back to the aggregate form.
-          propertiesButton.disabled = false
-          label.textContent = readableLabel
-          setSelectionLabel(readableLabel)
-          updateSelectionPosition()
-        }
-
-        const revealFieldInPreview = (fieldPath: string, attempt = 0) => {
-          const target = Array.from(
-            frameDocument?.querySelectorAll<HTMLElement>('[data-wikex-field]') ?? [],
-          ).find((element) => element.dataset.wikexField === fieldPath)
-
-          if (!target) {
-            if (attempt < 24) {
-              window.setTimeout(() => revealFieldInPreview(fieldPath, attempt + 1), 150)
-            }
-            return
-          }
-
-          target.scrollIntoView({ behavior: 'smooth', block: 'center' })
-          selectElement(target)
-        }
-
-        revealPreviewField.current = revealFieldInPreview
-
-        const handleFrameClick = (event: Event) => {
-          const rawTarget = event.target
-          if (!rawTarget || typeof (rawTarget as HTMLElement).closest !== 'function') return
-          const rawElement = rawTarget as HTMLElement
-          if (rawElement.closest('#wikex-selection-toolbar, .wikex-text-resize-handle')) {
-            return
-          }
-          if (rawElement.closest('[data-wikex-inline-editing="true"]')) return
-
-          const interactiveCandidate = rawElement.closest<HTMLElement>(
-            EDITABLE_INTERACTIVE_SELECTOR,
-          )
-          const fieldCandidate =
-            rawElement.closest<HTMLElement>('[data-wikex-field]') ??
-            interactiveCandidate?.querySelector<HTMLElement>('[data-wikex-field]')
-          const semanticCandidate = rawElement.closest<HTMLElement>(EDITABLE_PREVIEW_SELECTOR)
-          const candidate = fieldCandidate?.matches(EDITABLE_PREVIEW_SELECTOR)
-            ? fieldCandidate
-            : (semanticCandidate ?? fieldCandidate)
-          if (!candidate || candidate.closest('[data-wikex-no-edit]')) return
-
-          const candidateScope =
-            candidate.closest<HTMLElement>('[data-wikex-scope]')?.dataset.wikexScope
-          const isSharedGlobalInPage =
-            editorScopeRef.current === 'content' &&
-            (candidateScope === 'header' || candidateScope === 'footer')
-          if (
-            candidateScope &&
-            candidateScope !== editorScopeRef.current &&
-            !isSharedGlobalInPage
-          ) {
-            return
-          }
-
-          if (interactiveCandidate) event.preventDefault()
-          event.stopPropagation()
-          event.stopImmediatePropagation()
-          selectElement(candidate)
-        }
-
-        const handleDoubleClick = (event: Event) => {
-          const eventTarget = event.target
-          if (eventTarget instanceof Element && eventTarget.closest('.wikex-text-resize-handle')) {
-            return
-          }
-          event.preventDefault()
-          startInlineEditing()
-        }
-
-        const stopToolbarEvent = (event: Event) => event.stopPropagation()
-        const keepEditorFocus = (event: Event) => event.preventDefault()
-        const handlePropertiesClick = () => {
-          stopInlineEditing(true)
-          openInspector()
-        }
-        propertiesButton.addEventListener('click', handlePropertiesClick)
-        toolbar.addEventListener('click', stopToolbarEvent)
-        toolbar.addEventListener('pointerdown', keepEditorFocus)
-        frameDocument.addEventListener('click', handleFrameClick, true)
-        frameDocument.addEventListener('dblclick', handleDoubleClick, true)
-        frameDocument.addEventListener('scroll', updateSelectionPosition, true)
-        iframe.contentWindow?.addEventListener('resize', updateSelectionPosition)
-
-        cleanupFrame = () => {
-          stopInlineEditing(false)
-          textWidthSaveController.current?.abort()
-          activeTextResize = null
-          if (frameDocument?.body) {
-            frameDocument.body.style.cursor = ''
-            frameDocument.body.style.userSelect = ''
-          }
-          selectedElement?.removeAttribute('data-wikex-selected')
-          selectedTextResize.current = null
-          unbindLeftResizeHandle()
-          unbindRightResizeHandle()
-          propertiesButton.removeEventListener('click', handlePropertiesClick)
-          toolbar.removeEventListener('click', stopToolbarEvent)
-          toolbar.removeEventListener('pointerdown', keepEditorFocus)
-          frameDocument?.removeEventListener('click', handleFrameClick, true)
-          frameDocument?.removeEventListener('dblclick', handleDoubleClick, true)
-          frameDocument?.removeEventListener('scroll', updateSelectionPosition, true)
-          iframe.contentWindow?.removeEventListener('resize', updateSelectionPosition)
-          selectionBox.remove()
-          leftResizeHandle.remove()
-          rightResizeHandle.remove()
-          widthLabel.remove()
-          toolbar.remove()
-          style.remove()
-
-          if (revealPreviewField.current === revealFieldInPreview) {
-            revealPreviewField.current = () => undefined
-          }
-
-          selectedPreviewElement.current = null
-          selectedTextInspector.current = null
-        }
-      }
-
-      iframe.addEventListener('load', installFrameEditor)
-      installFrameEditor()
-
-      cleanupActiveIframe = () => {
-        iframe.removeEventListener('load', installFrameEditor)
-        cleanupFrame()
-      }
-    }
-
-    const scheduleBindIframe = () => {
-      if (bindFrame) return
-
-      bindFrame = window.requestAnimationFrame(() => {
-        bindFrame = 0
-        bindIframe()
-      })
-    }
-
-    bindIframe()
-    const observer = new MutationObserver(scheduleBindIframe)
-    observer.observe(previewWrapper, { childList: true, subtree: true })
-
-    return () => {
-      observer.disconnect()
-      window.cancelAnimationFrame(bindFrame)
-      cleanupActiveIframe()
-    }
-  }, [openInspector, previewWrapper])
-
-  useEffect(() => {
-    let activeBlocksFieldID = ''
-    let initialized = false
-    let knownRows = new Set<string>()
-    let revealTimer: number | undefined
-    let scanFrame = 0
-
-    const scanRows = () => {
-      const blocksField = getVisibleBlocksField()
-      if (!blocksField) return
-
-      const rows = Array.from(
-        blocksField.querySelectorAll<HTMLElement>(
-          '.blocks-field__rows > [id^="layout-row-"], .blocks-field__rows > [id^="customLayout-row-"]',
-        ),
-      )
-
-      if (!initialized || activeBlocksFieldID !== blocksField.id) {
-        activeBlocksFieldID = blocksField.id
-        knownRows = new Set(rows.map((row) => row.id))
-        initialized = true
-        return
-      }
-
-      if (!rows.length) {
-        knownRows.clear()
-        return
-      }
-
-      const addedRows = rows.filter((row) => !knownRows.has(row.id))
-      knownRows = new Set(rows.map((row) => row.id))
-
-      const addedRow = addedRows.at(-1)
-      const match = addedRow?.id.match(/^(customLayout|layout)-row-(\d+)$/)
-      if (!addedRow || !match) return
-
-      const fieldPath = `${match[1]}.${match[2]}`
-      setSelectionLabel(fieldPath)
-      scrollEditorTo(addedRow)
-      window.clearTimeout(revealTimer)
-      revealTimer = window.setTimeout(() => revealPreviewField.current(fieldPath), 300)
-    }
-
-    const scheduleScanRows = () => {
-      if (scanFrame) return
-
-      scanFrame = window.requestAnimationFrame(() => {
-        scanFrame = 0
-        scanRows()
-      })
-    }
-
-    scanRows()
-    const observer = new MutationObserver(scheduleScanRows)
-    observer.observe(document.body, { childList: true, subtree: true })
-
-    return () => {
-      observer.disconnect()
-      window.cancelAnimationFrame(scanFrame)
-      window.clearTimeout(revealTimer)
-    }
-  }, [])
-
-  return (
-    <>
-      {createPortal(
-        <>
-          <aside aria-label="Công cụ dựng trang" className="wikex-editor-rail">
-            <div aria-label="Wikex Editor" className="wikex-editor-rail__brand">
-              W
-            </div>
-            <button
-              className="wikex-editor-tool"
-              onClick={isGlobalEditor ? openInspector : openElements}
-              type="button"
-            >
-              <EditorIcon name="elements" />
-              <span>{isGlobalEditor ? 'Nội dung' : 'Thêm khối'}</span>
-            </button>
-            <button
-              className="wikex-editor-tool"
-              onClick={isGlobalEditor ? openInspector : openSections}
-              type="button"
-            >
-              <EditorIcon name="sections" />
-              <span>{isGlobalEditor ? 'Liên kết' : 'Bố cục'}</span>
-            </button>
-            <a className="wikex-editor-tool" href={pagesHref}>
-              <EditorIcon name="pages" />
-              <span>Trang</span>
-            </a>
-          </aside>
-          <div className="wikex-editor-canvas-title">
-            <strong>Trình chỉnh sửa Wikex</strong>
-            <span>{selectionLabel}</span>
-            <span className="wikex-editor-canvas-title__hint">Nhấp đúp văn bản để sửa</span>
-          </div>
-        </>,
-        previewWrapper,
-      )}
-      {inspectorOpen &&
-        globalInspectorSelection &&
-        createPortal(
-          <GlobalInlineInspector
-            key={`${globalInspectorSelection.scope}:${globalInspectorSelection.fieldPath}`}
-            onApply={applyGlobalInspectorValues}
-            selection={globalInspectorSelection}
-          />,
-          container,
-        )}
-      {inspectorOpen &&
-        textInspectorSelection &&
-        createPortal(
-          <TextStyleInspector
-            key={`${
-              textInspectorSelection.kind === 'collection'
-                ? `${textInspectorSelection.collection}:${textInspectorSelection.documentID}`
-                : `global:${textInspectorSelection.global}`
-            }:${textInspectorSelection.fieldPath}`}
-            onApply={applyTextInspectorValues}
-            onTextApply={applyTextInspectorText}
-            selection={textInspectorSelection}
-          />,
-          container,
-        )}
-      {inspectorOpen &&
-        createPortal(
-          <button
-            aria-label="Đóng bảng thuộc tính"
-            className="wikex-inspector-close"
-            onClick={() => setInspectorOpen(false)}
-            title="Đóng bảng thuộc tính"
-            type="button"
-          >
-            <svg aria-hidden="true" viewBox="0 0 24 24">
-              <path d="M6 6l12 12M18 6 6 18" />
-            </svg>
-          </button>,
-          container,
-        )}
-      {blockPickerScope &&
-        createPortal(
-          <BlockPickerModal
-            onClose={closeBlockPicker}
-            onSelect={selectBlock}
-            options={getBlockPickerOptions(blockPickerScope)}
-            title={
-              blockPickerScope === 'post'
-                ? 'Chọn component cho bài viết'
-                : 'Chọn component cho trang'
-            }
-          />,
-          document.body,
-        )}
-    </>
-  )
-}
-
-const clampEditWidth = (width: number, containerWidth: number) => {
-  const maximumWidth = Math.max(MIN_EDIT_WIDTH, containerWidth - HANDLE_WIDTH - MIN_PREVIEW_WIDTH)
-
-  return Math.min(Math.max(width, MIN_EDIT_WIDTH), maximumWidth)
-}
-
-const readStoredRatio = () => {
-  const storedRatio = Number(
-    window.localStorage.getItem(STORAGE_KEY) ?? window.localStorage.getItem(LEGACY_STORAGE_KEY),
-  )
-
-  return Number.isFinite(storedRatio) && storedRatio > 0 && storedRatio < 1
-    ? storedRatio
-    : DEFAULT_EDIT_RATIO
-}
-
-const setEditWidth = (container: HTMLElement, requestedWidth: number) => {
-  const containerWidth = container.getBoundingClientRect().width
-  const width = clampEditWidth(requestedWidth, containerWidth)
-  const ratio = width / containerWidth
-
-  container.style.setProperty('--live-preview-edit-width', `${width}px`)
-
-  return ratio
-}
-
-type DragState = {
-  containerLeft: number
-  pointerId: number
-}
-
-const LivePreviewResizeHandle = ({ container }: { container: HTMLElement }) => {
-  const dragState = useRef<DragState | null>(null)
-  const latestRatio = useRef(DEFAULT_EDIT_RATIO)
-  const [isDragging, setIsDragging] = useState(false)
-  const [ratio, setRatio] = useState(DEFAULT_EDIT_RATIO)
-
-  useEffect(() => {
-    const storedRatio = readStoredRatio()
-    const initialRatio = setEditWidth(
-      container,
-      container.getBoundingClientRect().width * storedRatio,
-    )
-    latestRatio.current = initialRatio
-    setRatio(initialRatio)
-
-    const resizeObserver = new ResizeObserver(() => {
-      if (!dragState.current) {
-        const nextRatio = setEditWidth(
-          container,
-          container.getBoundingClientRect().width * readStoredRatio(),
-        )
-        latestRatio.current = nextRatio
-        setRatio(nextRatio)
-      }
-    })
-
-    resizeObserver.observe(container)
-
-    return () => resizeObserver.disconnect()
-  }, [container])
-
-  const finishDragging = (event: PointerEvent<HTMLDivElement>) => {
-    if (dragState.current?.pointerId !== event.pointerId) return
-
-    window.localStorage.setItem(STORAGE_KEY, String(latestRatio.current))
-    dragState.current = null
-    setIsDragging(false)
-  }
-
-  const handlePointerDown = (event: PointerEvent<HTMLDivElement>) => {
-    const bounds = container.getBoundingClientRect()
-
-    event.preventDefault()
-    event.currentTarget.setPointerCapture(event.pointerId)
-    dragState.current = {
-      containerLeft: bounds.left,
-      pointerId: event.pointerId,
-    }
-    setIsDragging(true)
-  }
-
-  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
-    const drag = dragState.current
-    if (!drag || drag.pointerId !== event.pointerId) return
-
-    const nextRatio = setEditWidth(container, event.clientX - drag.containerLeft)
-    latestRatio.current = nextRatio
-    setRatio(nextRatio)
-  }
-
-  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (!['ArrowLeft', 'ArrowRight', 'Home'].includes(event.key)) return
-
-    event.preventDefault()
-    const containerWidth = container.getBoundingClientRect().width
-    const currentWidth = containerWidth * ratio
-    const step = event.shiftKey ? 40 : 10
-    const requestedWidth =
-      event.key === 'Home'
-        ? containerWidth * DEFAULT_EDIT_RATIO
-        : currentWidth + (event.key === 'ArrowLeft' ? -step : step)
-    const nextRatio = setEditWidth(container, requestedWidth)
-
-    latestRatio.current = nextRatio
-    setRatio(nextRatio)
-    window.localStorage.setItem(STORAGE_KEY, String(nextRatio))
-  }
-
-  const resetWidth = () => {
-    const nextRatio = setEditWidth(
-      container,
-      container.getBoundingClientRect().width * DEFAULT_EDIT_RATIO,
-    )
-
-    latestRatio.current = nextRatio
-    setRatio(nextRatio)
-    window.localStorage.setItem(STORAGE_KEY, String(nextRatio))
-  }
-
-  return (
-    <div
-      aria-label="Thay đổi độ rộng Live Preview"
-      aria-orientation="vertical"
-      aria-valuemax={Math.round(
-        (1 - MIN_PREVIEW_WIDTH / container.getBoundingClientRect().width) * 100,
-      )}
-      aria-valuemin={Math.round((MIN_EDIT_WIDTH / container.getBoundingClientRect().width) * 100)}
-      aria-valuenow={Math.round(ratio * 100)}
-      className={`live-preview-resizer${isDragging ? ' live-preview-resizer--dragging' : ''}`}
-      onDoubleClick={resetWidth}
-      onKeyDown={handleKeyDown}
-      onPointerCancel={finishDragging}
-      onPointerDown={handlePointerDown}
-      onPointerMove={handlePointerMove}
-      onPointerUp={finishDragging}
-      role="separator"
-      tabIndex={0}
-      title="Kéo để đổi độ rộng preview · Nhấp đúp để đặt lại"
-    >
-      <span aria-hidden="true" className="live-preview-resizer__grip" />
-    </div>
-  )
-}
-
-const LivePreviewResizer = ({ children }: { children?: React.ReactNode }) => {
-  const [targets, setTargets] = useState<EditorTargets | null>(null)
-
-  useEffect(() => {
-    let transitionTimer = 0
-
-    const clearTransitionState = () => {
-      document.documentElement.classList.remove('wikex-live-preview-switching')
-      document.documentElement.removeAttribute('data-wikex-live-preview-target')
-    }
-
-    const prepareLivePreviewToggle = (event: MouseEvent) => {
-      const eventTarget = event.target
-      if (!(eventTarget instanceof Element) || !eventTarget.closest('#live-preview-toggler')) {
-        return
-      }
-      if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
-
-      const editor = document.querySelector<HTMLElement>('.collection-edit')
-      if (!editor) return
-
-      window.clearTimeout(transitionTimer)
-      document.documentElement.dataset.wikexLivePreviewTarget = editor.classList.contains(
-        'collection-edit--is-live-previewing',
-      )
-        ? 'edit'
-        : 'preview'
-      document.documentElement.classList.add('wikex-live-preview-switching')
-      transitionTimer = window.setTimeout(clearTransitionState, LIVE_PREVIEW_TRANSITION_MS + 80)
-    }
-
-    document.addEventListener('click', prepareLivePreviewToggle, true)
-
-    return () => {
-      document.removeEventListener('click', prepareLivePreviewToggle, true)
-      window.clearTimeout(transitionTimer)
-      clearTransitionState()
-    }
-  }, [])
-
-  useEffect(() => {
-    const syncVisualEditorState = () => {
-      const pathname = window.location.pathname
-      const isVisualEditor = isVisualEditorRoute(pathname)
-      const editor = document.querySelector<HTMLElement>('.collection-edit')
-      const isActive = Boolean(
-        isVisualEditor && editor?.classList.contains('collection-edit--is-live-previewing'),
-      )
-
-      editor?.toggleAttribute('data-wikex-visual-editor', isActive)
-      if (editor && isActive) editor.dataset.wikexVisualEditor = 'true'
-      document.documentElement.classList.toggle('wikex-visual-preview-active', isActive)
-    }
-
-    const findTargets = () => {
-      syncVisualEditorState()
-      const previewWindow = document.querySelector<HTMLElement>(
-        '.collection-edit__main-wrapper > .live-preview-window',
-      )
-      const pathname = window.location.pathname
-      const isVisualEditor = isVisualEditorRoute(pathname)
-      const scope = getEditorScope(pathname)
-      const container = previewWindow?.parentElement ?? null
-      const editor = previewWindow?.closest<HTMLElement>('.collection-edit') ?? null
-      const previewWrapper = previewWindow?.querySelector<HTMLElement>(
-        '.live-preview-window__wrapper',
-      )
-      const activeIframe = previewWrapper?.querySelector<HTMLIFrameElement>('#live-preview-iframe')
-      const isLivePreviewing = editor?.classList.contains('collection-edit--is-live-previewing')
-
-      const nextTargets =
-        isVisualEditor && isLivePreviewing && container && editor && previewWrapper && activeIframe
-          ? { container, editor, previewWrapper, route: pathname, scope }
-          : null
-
-      setTargets((currentTargets) => {
-        if (!currentTargets || !nextTargets)
-          return currentTargets === nextTargets ? currentTargets : nextTargets
-
-        const targetsAreUnchanged =
-          currentTargets.container === nextTargets.container &&
-          currentTargets.editor === nextTargets.editor &&
-          currentTargets.previewWrapper === nextTargets.previewWrapper &&
-          currentTargets.route === nextTargets.route &&
-          currentTargets.scope === nextTargets.scope
-
-        return targetsAreUnchanged ? currentTargets : nextTargets
-      })
-    }
-
-    findTargets()
-    let scanFrame = 0
-    const scheduleFindTargets = () => {
-      if (scanFrame) return
-
-      scanFrame = window.requestAnimationFrame(() => {
-        scanFrame = 0
-        findTargets()
-      })
-    }
-    const previewStructureSelector =
-      '.collection-edit, .live-preview-window, .live-preview-window__wrapper, #live-preview-iframe'
-    const touchesPreviewStructure = (mutation: MutationRecord) => {
-      if (
-        mutation.type === 'attributes' &&
-        mutation.target instanceof HTMLElement &&
-        mutation.target.classList.contains('collection-edit')
-      ) {
-        return true
-      }
-
-      if (mutation.type !== 'childList') return false
-
-      return [...mutation.addedNodes, ...mutation.removedNodes].some(
-        (node) =>
-          node instanceof HTMLElement &&
-          (node.matches(previewStructureSelector) ||
-            Boolean(node.querySelector(previewStructureSelector))),
-      )
-    }
-    const observer = new MutationObserver((mutations) => {
-      if (mutations.some(touchesPreviewStructure)) {
-        window.cancelAnimationFrame(scanFrame)
-        scanFrame = 0
-        findTargets()
-        return
-      }
-
-      scheduleFindTargets()
-    })
-    observer.observe(document.body, {
-      attributeFilter: ['class'],
-      attributes: true,
-      childList: true,
-      subtree: true,
-    })
-
-    return () => {
-      observer.disconnect()
-      window.cancelAnimationFrame(scanFrame)
-      document.documentElement.classList.remove('wikex-visual-preview-active')
-    }
-  }, [])
-
-  return (
-    <>
-      {children}
-      {targets && (
-        <>
-          {createPortal(
-            <LivePreviewResizeHandle container={targets.container} />,
-            targets.container,
-          )}
-          <WixEditorChrome key={targets.route} {...targets} />
-        </>
-      )}
-    </>
-  )
-}
-
-export default LivePreviewResizer