editor: mover imagenes a un figure aparte si no lo están

This commit is contained in:
void 2021-02-25 22:29:14 +00:00
parent b8e9e4799a
commit dfc9d6a2a4

View file

@ -1,5 +1,5 @@
import { storeContent, restoreContent } from 'editor/storage' import { storeContent, restoreContent } from 'editor/storage'
import { isDirectChild, moveChildren, safeGetSelection, safeGetRangeAt, setAuxiliaryToolbar } from 'editor/utils' import { isDirectChild, moveChildren, safeGetSelection, safeGetRangeAt, setAuxiliaryToolbar, parentBlockNames } from 'editor/utils'
import { types, getValidChildren, getType } from 'editor/types' import { types, getValidChildren, getType } from 'editor/types'
import { setupButtons as setupMarksButtons } from 'editor/types/marks' import { setupButtons as setupMarksButtons } from 'editor/types/marks'
import { setupButtons as setupBlocksButtons } from 'editor/types/blocks' import { setupButtons as setupBlocksButtons } from 'editor/types/blocks'
@ -14,7 +14,7 @@ import { setupAuxiliaryToolbar as setupMarkAuxiliaryToolbar } from 'editor/types
// Esta funcion corrije errores que pueden haber como: // Esta funcion corrije errores que pueden haber como:
// * que un nodo que no tiene 'text' permitido no tenga children (se les // * que un nodo que no tiene 'text' permitido no tenga children (se les
// inserta un allowedChildren[0]) // inserta un allowedChildren[0])
// * TODO: que haya una imágen sin <figure> o que no esté como bloque (se ponen // * que haya una imágen sin <figure> o que no esté como bloque (se ponen
// después del bloque en el que están como bloque de por si) // después del bloque en el que están como bloque de por si)
// * convierte <i> y <b> en <em> y <strong> // * convierte <i> y <b> en <em> y <strong>
// Lo hace para que siga la estructura del documento y que no se borren por // Lo hace para que siga la estructura del documento y que no se borren por
@ -38,6 +38,33 @@ function fixContent (editor: Editor, node: Element = editor.contentEl): void {
node = el node = el
} }
if (node instanceof HTMLImageElement) {
node.dataset.multimediaInner = ''
const figureEl = types.multimedia.create(editor)
let targetEl = node.parentElement
if (!targetEl) throw new Error('No encontré lx objetivo')
while (true) {
const type = getType(targetEl)
if (!type) throw new Error('lx objetivo tiene tipo')
if (type.type.allowedChildren.includes('multimedia')) break
if (!targetEl.parentElement) throw new Error('No encontré lx objetivo')
targetEl = targetEl.parentElement
}
let parentEl = [...targetEl.childNodes].find(
el => el.contains(node)
)
if (!parentEl) throw new Error('no encontré lx pariente')
const innerEl = figureEl.querySelector('[data-multimedia-inner]')
if (!innerEl) throw new Error('Raro.')
figureEl.replaceChild(node, innerEl)
targetEl.insertBefore(figureEl, parentEl)
node = figureEl
}
const _type = getType(node) const _type = getType(node)
if (!_type) return if (!_type) return