Sto solo pensando a una nuova funzionalità per eliminare facilmente le immagini dall’editor. Molte volte succede che l’utente carichi più immagini e voglia eliminarne solo una, ma è davvero complicato se l’utente non ha familiarità con markdown. Ovviamente ci provano, ma il risultato di solito sono alcuni collegamenti interrotti, ecc.
C’è stata una modifica con il testo alternativo dell’immagine che funziona abbastanza bene e in modo intuitivo. Aggiunge la possibilità di modificare il testo alternativo sul lato di anteprima.
Sarebbe fantastico posizionare un pulsante di eliminazione sull’immagine nel lato di anteprima. Forse un’icona o una X sull’angolo dell’immagine e cliccando su quel pulsante potrebbe individuare e rimuovere il codice markdown effettivo dell’immagine.
Grazie Don, sembra un pulsante utile e probabilmente non è troppo difficile da aggiungere. Segnerò questo come pr-welcome, saremo lieti di vederlo aggiunto.
Sto lavorando per risolvere questo problema; ho quasi una prova di concetto funzionante.
Ho solo una confusione tra questi due componenti d-editor.js e composer-editor,js. La mia soluzione finora si basa sull’ascolto del contenuto di anteprima/html quando viene aggiornato all’interno del componente d-editor.js… ecc.
Sono nella giusta direzione?
Il posto più appropriato per eliminare un’immagine sarebbe accanto ai pulsanti che mostriamo al passaggio del mouse per ridimensionare le immagini e aggiungere testo alternativo nell’anteprima del composer.
L’hook per eliminare il markup dell’immagine dovrebbe essere molto simile ai pulsanti 100%/75%/50%. Puoi vedere qui come viene eseguito il ridimensionamento dell’immagine.
Sposta il pulsante di modifica a sinistra (bonus: minore distanza del mouse dall’input del compositore), e poi metti il pulsante di eliminazione a destra… così abbiamo una certa distanza tra azioni innocue e pericolose.
Altre cose utili:
rendi l’icona di modifica blu come il 50%, 75%
mantieni il testo nero, ma rendilo cliccabile anche sull’input
quando l’editor del titolo è aperto, possiamo posizionarlo in modo che corrisponda alla linea di base del testo di anteprima (quindi uno strato z sopra)? Questo rende le cose meno scattanti al clic:
Quindi hanno il loro pulsante con una serie di opzioni, il ridimensionamento è clicca e trascina sulle maniglie…
Un bel piccolo dettaglio è che se aggiungi un’immagine troppo piccola per l’overlay del pulsante, forzano l’immagine a una scala che contiene il pulsante una volta che provi a interagire con essa. Ciò evita di avere un pulsante al passaggio del mouse che sovrappone qualsiasi contenuto circostante.
@awesomerobot Grazie per il tuo feedback. Ho un’altra domanda per assicurarci di essere sulla stessa lunghezza d’onda. Riguardo a questo punto:
Poiché ci sono due scenari in cui il contenitore dei “pulsanti di ridimensionamento” appare insieme al “pulsante di modifica alternativo”
Normalmente questi appaiono sulla stessa linea; tuttavia, quando il testo alternativo è lungo, il contenitore alternativo traboccherà sulla riga successiva:
Ora tornando ai tuoi punti sopra; avrebbe senso presumendo che tu voglia che il comportamento di overflow sia quello predefinito. Altrimenti, per un alt breve, il pulsante di eliminazione sarebbe solo un pulsante di chiusura per modificare l’alt.
Un’altra alternativa è mostrare semplicemente il contenitore alt prima dei pulsanti di ridimensionamento, ad esempio: