@wikex/admin-kit 0.2.0

package/src/live-preview/LivePreviewEditor.tsx

@@ -0,0 +1,2088 @@
+'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