Sutty/panel
5
0
Fork 0
mirror of https://0xacab.org/sutty/sutty synced 2024-06-02 06:04:17 +00:00
Code Issues Projects Releases Wiki Activity

editor: desrepetir código

Browse source 
esto me huele a que podría introducir bugs pero espero que no.
This commit is contained in:
void 2021-03-27 18:44:24 +00:00
parent 3b9237d870
commit b11346074a
4 changed files with 71 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
app/javascript/editor/types.ts
View file

@ -3,7 +3,7 @@ import { marks } from 'editor/types/marks'
import { blocks, li, EditorBlock } from 'editor/types/blocks'
import { parentBlocks } from 'editor/types/parentBlocks'
import { multimedia } from 'editor/types/multimedia'
import { blockNames, parentBlockNames } from 'editor/utils'
import { blockNames, parentBlockNames, safeGetRangeAt, safeGetSelection } from 'editor/utils'
export interface EditorNode {
selector: string,
@ -56,6 +56,54 @@ export function getType (node: Element): { typeName: string, type: EditorNode }
return null
}
// encuentra el primer pariente que pueda tener al type, y retorna un array
// donde
// array[0] = elemento que matchea el type
// array[array.len - 1] = primer elemento seleccionado
export function getValidParentInSelection (args: {
editor: Editor,
type: string,
}): Element[] {
const sel = safeGetSelection(args.editor)
if (!sel) throw new Error('No se donde insertar esto')
const range = safeGetRangeAt(sel)
if (!range) throw new Error('No se donde insertar esto')
let list: Element[] = []
if (!sel.anchorNode) {
throw new Error('No se donde insertar esto')
} else if (sel.anchorNode instanceof Element) {
list = [sel.anchorNode]
} else if (sel.anchorNode.parentElement) {
list = [sel.anchorNode.parentElement]
} else {
throw new Error('No se donde insertar esto')
}
while (true) {
const el = list[0]
if (!args.editor.contentEl.contains(el)
&& el != args.editor.contentEl)
throw new Error('No se donde insertar esto')
const type = getType(el)
if (type) {
//if (type.typeName === 'contentEl') break
//if (parentBlockNames.includes(type.typeName)) break
if ((type.type.allowedChildren instanceof Array)
&& type.type.allowedChildren.includes(args.type)) break
}
if (el.parentElement) {
list = [el.parentElement, ...list]
} else {
throw new Error('No se donde insertar esto')
}
}
return list
}
export function getValidChildren (node: Element, type: EditorNode): Node[] {
if (type.allowedChildren === 'ignore-children')
throw new Error('se llamó a getValidChildren con un type que no lo permite!')

38
app/javascript/editor/types/blocks.ts
View file

@ -2,9 +2,9 @@ import { Editor } from 'editor/editor'
import {
safeGetSelection, safeGetRangeAt,
moveChildren,
markNames, parentBlockNames,
markNames, blockNames, parentBlockNames,
} from 'editor/utils'
import { EditorNode, getType } from 'editor/types'
import { EditorNode, getType, getValidParentInSelection } from 'editor/types'
export interface EditorBlock extends EditorNode {
}
@ -49,40 +49,22 @@ export function setupButtons (editor: Editor): void {
buttonEl.addEventListener("click", event => {
event.preventDefault()
const sel = safeGetSelection(editor)
if (!sel) return
const range = safeGetRangeAt(sel)
if (!range) return
const list = getValidParentInSelection({ editor, type: name })
let blockEl = sel.anchorNode
while (true) {
if (!blockEl) throw new Error('WTF')
if (!blockEl.parentElement) throw new Error('No pude encontrar contentEl!')
let type = getType(blockEl.parentElement)
if (!type) throw new Error('La selección está en algo que no es un type!')
if (type.typeName === 'contentEl'
|| parentBlockNames.includes(type.typeName)
) break
blockEl = blockEl.parentElement
// No borrar cosas como multimedia
if (blockNames.indexOf(getType(list[1])!.typeName) === -1) {
return
}
if (!(blockEl instanceof Element))
throw new Error('La selección no está en un elemento!')
const parentEl = blockEl.parentElement
if (!parentEl) throw new Error('Inesperado')
let replacementType = blockEl.matches(type.selector)
let replacementType = list[1].matches(type.selector)
? blocks.paragraph
: type
const el = replacementType.create(editor)
replacementType.onClick && replacementType.onClick(editor, el)
moveChildren(blockEl, el, null)
parentEl.replaceChild(el, blockEl)
sel.collapse(el)
moveChildren(list[1], el, null)
list[0].replaceChild(el, list[1])
window.getSelection()?.collapse(el)
return false
})

31
app/javascript/editor/types/multimedia.ts
View file

@ -1,5 +1,5 @@
import { Editor } from 'editor/editor'
import { EditorNode, getType } from 'editor/types'
import { EditorNode, getValidParentInSelection } from 'editor/types'
import {
safeGetSelection, safeGetRangeAt,
markNames, parentBlockNames,
@ -192,34 +192,11 @@ export function setupButtons (editor: Editor): void {
buttonEl.addEventListener('click', event => {
event.preventDefault()
const sel = safeGetSelection(editor)
if (!sel) return
const range = safeGetRangeAt(sel)
if (!range) return
let blockEl = sel.anchorNode
while (true) {
if (!blockEl) throw new Error('WTF')
if (!blockEl.parentElement) throw new Error('No pude encontrar contentEl!')
let type = getType(blockEl.parentElement)
if (!type) throw new Error('La selección está en algo que no es un type!')
if (type.typeName === 'contentEl'
|| parentBlockNames.includes(type.typeName)
) break
blockEl = blockEl.parentElement
}
if (!(blockEl instanceof Element))
throw new Error('La selección no está en un elemento!')
const parentEl = blockEl.parentElement
if (!parentEl) throw new Error('Inesperado')
const list = getValidParentInSelection({ editor, type: 'multimedia' })
const el = multimedia.create(editor)
multimedia.onClick!(editor, el)
parentEl.insertBefore(el, blockEl.nextElementSibling)
list[0].insertBefore(el, list[1].nextElementSibling)
select(editor, el)
return false
})

40
app/javascript/editor/types/parentBlocks.ts
View file

@ -4,7 +4,7 @@ import {
moveChildren,
blockNames, parentBlockNames,
} from 'editor/utils'
import { EditorNode, getType } from 'editor/types'
import { EditorNode, getType, getValidParentInSelection } from 'editor/types'
function makeParentBlock (tag: string, create: EditorNode["create"]): EditorNode {
return {
@ -45,48 +45,24 @@ export function setupButtons (editor: Editor): void {
buttonEl.addEventListener("click", event => {
event.preventDefault()
const sel = safeGetSelection(editor)
if (!sel) return
const range = safeGetRangeAt(sel)
if (!range) return
// TODO: Esto solo mueve el bloque en el que está el final de la selección
// (anchorNode). quizás lo podemos hacer al revés (iterar desde contentEl
// para encontrar los bloques que están seleccionados y moverlos/cambiarles
// el parentBlock)
let blockEl = sel.anchorNode
while (true) {
if (!blockEl) throw new Error('WTF')
if (!blockEl.parentElement) throw new Error('No pude encontrar contentEl!')
let type = getType(blockEl.parentElement)
if (!type) throw new Error('La selección está en algo que no es un type!')
if (type.typeName === 'contentEl'
|| parentBlockNames.includes(type.typeName)
) break
blockEl = blockEl.parentElement
}
if (!(blockEl instanceof Element))
throw new Error('La selección no está en un elemento!')
const parentEl = blockEl.parentElement
if (!parentEl)
throw new Error('no')
const list = getValidParentInSelection({ editor, type: name })
const replacementEl = type.create(editor)
if (parentEl == editor.contentEl) {
if (list[0] == editor.contentEl) {
// no está en un parentBlock
editor.contentEl.insertBefore(replacementEl, blockEl)
replacementEl.appendChild(blockEl)
editor.contentEl.insertBefore(replacementEl, list[1])
replacementEl.appendChild(list[1])
} else {
// está en un parentBlock
moveChildren(parentEl, replacementEl, null)
editor.contentEl.replaceChild(replacementEl, parentEl)
moveChildren(list[0], replacementEl, null)
editor.contentEl.replaceChild(replacementEl, list[0])
}
sel.collapse(replacementEl)
window.getSelection()?.collapse(replacementEl)
return false
})