WYSIWYG design editor di testo: sostituire tutti gli spazi con span o manipolazione dei nodi master?

L'obiettivo di questo editor div intuitivo è poter:

1. fai doppio clic sulle parole per aggiungere uno span attorno ad esso e altre funzioni
2. evidenzia l'intervallo di testo (più di 1 parola) per fare lo stesso di sopra
3. aggiungi 'nota' al punto di click

Attuali approcci utilizzati e quantità di successo:

1. Un modello di lavoro precedente faceva affidamento sulla ricerca di tutte le istanze di una stringa in un determinato blocco corrispondente a window.getSelection().toString() e confrontando le loro posizioni y e x nella vista. Era un po 'di lavoro a comprenderlo, ma ha funzionato bene.

2. Il principio simile è stato applicato a sezioni con più di 1 parola. Inoltre, era necessario poter accedere a singole parole all'interno dell'intervallo di frase. Ha funzionato principalmente ma aveva alcuni problemi irrisolti prima che decidessi di fare una ricostruzione.

3. Nella nuova build refactored voglio passare attraverso ciascuna funzionalità passo dopo passo e assicurarmi che sia fondamentalmente affidabile al 100%. Avevo acquisito un po 'di esperienza con l'accesso e la manipolazione di document.getSelection() e sono in grado di inserire div wrapper per la nota con range.insertNode() , MA, se cliccato all'interno di una parola dividerà la parola e potrebbe dividerlo su righe di testo anche. La mia idea era quella di spostare il cursore alla fine di una determinata parola, ma la mia comprensione dei textNode è insufficiente e non so quanto tempo mi occorrerà per capirlo, quanto sia fattibile e quale altro i problemi sorgerebbero dall'uso di questo approccio.

Soluzione possibile:

Sostituendo tutti gli spazi con un elemento DOM, sono in grado di controllare esattamente dove l'utente può posizionare sensibilmente la nota e segnalarla mentre è in bilico. Inoltre, e non ho ancora provato questo, immagino che la selezione di parole e frasi sarà più semplice e potenzialmente più affidabile, dal momento che ogni parola diventerà il proprio nodo. Il testo non sarà generalmente immenso (raramente più di 300 parole) e la durata della funzione usando regex per 5000 parole è accettabile a 50 ms.

Sono completamente nuovo nello sviluppo e nell'apprendimento web mentre vado, quindi prima di intraprendere questa strada, volevo controllare che non stia facendo nulla di troppo assurdo, o se c'è un approccio più semplice che potrei avere mancato, viste le mie esigenze sopra descritte (speriamo che siano abbastanza chiare)

Apprezza i commenti, non importa quanto siano soggettivi:)