Я думаю о новой функции для удобного удаления изображений из редактора. Часто бывает так, что пользователь загружает несколько изображений, но хочет удалить только одно. Если пользователь не знаком с Markdown, это становится довольно сложным. Конечно, они пытаются, но результат обычно — битые ссылки и прочее.
Было внесено изменение с альтернативным текстом изображений, которое работает довольно хорошо и удобно для пользователя. Оно добавляет возможность редактировать альтернативный текст на стороне предпросмотра.
Было бы здорово разместить кнопку удаления на изображении на стороне предпросмотра. Возможно, иконка или крестик в углу изображения, и при нажатии на эту кнопку она будет находить и удалять соответствующий код Markdown изображения.
Я работаю над решением этой проблемы; у меня почти готов рабочий прототип.
У меня возник один вопрос по поводу двух компонентов: d-editor.js и composer-editor.js. Моё текущее решение основано на прослушивании обновлений превью/HTML-контента внутри компонента d-editor.js и т.д.
Я на правильном пути?
Наиболее подходящее место для удаления изображения — рядом с кнопками, которые отображаются при наведении для изменения размера изображений и добавления альтернативного текста в предпросмотре редактора.
Хук для удаления разметки изображения должен быть очень похож на кнопки 100%/75%/50%. Вы можете посмотреть здесь, как выполняется масштабирование изображений.
Переместить кнопку «Изменить» влево (бонус: уменьшение расстояния от курсора до поля ввода композитора), а кнопку «Удалить» разместить справа… Таким образом, между безопасными и опасными действиями появится зазор.
Другие желательные улучшения:
сделать иконку «Изменить» синей, как у меток 50% и 75%;
оставить текст чёрным, но сделать его кликабельным, чтобы переходить к полю ввода;
когда редактор заголовка открыт, можно ли расположить его так, чтобы он совпадал по базовой линии с текстом предварительного просмотра (то есть на слой выше)? Это сделает поведение менее «дёрганным» при клике:
У них есть кнопка с множеством опций, масштабирование осуществляется перетаскиванием за маркеры…
Один приятный нюанс: если добавляется изображение, слишком маленькое для наложения кнопки, система принудительно масштабирует его так, чтобы кнопка помещалась внутри, как только вы попытаетесь с ним взаимодействовать. Это предотвращает ситуацию, когда кнопка при наведении перекрывает окружающий контент.
Теперь вернёмся к вашим пунктам выше: это имело бы смысл, если вы предполагаете, что поведение переноса должно быть по умолчанию. В противном случае для короткого текста alt кнопка удаления будет располагаться прямо рядом с кнопкой редактирования alt.
Также есть ещё один вариант — просто показывать контейнер alt перед кнопками масштабирования, например: