Кнопка удаления изображения в предпросмотре композитора

Здравствуйте,

Я думаю о новой функции для удобного удаления изображений из редактора. Часто бывает так, что пользователь загружает несколько изображений, но хочет удалить только одно. Если пользователь не знаком с Markdown, это становится довольно сложным. Конечно, они пытаются, но результат обычно — битые ссылки и прочее.

Было внесено изменение с альтернативным текстом изображений, которое работает довольно хорошо и удобно для пользователя. Оно добавляет возможность редактировать альтернативный текст на стороне предпросмотра.


Было бы здорово разместить кнопку удаления на изображении на стороне предпросмотра. Возможно, иконка :wastebasket: или крестик в углу изображения, и при нажатии на эту кнопку она будет находить и удалять соответствующий код Markdown изображения. :slightly_smiling_face:

Спасибо :slightly_smiling_face:

8 лайков

Спасибо, Дон, звучит как полезная кнопка, и, вероятно, её не так уж сложно добавить. Отмечу это как pr-welcome, рад видеть это добавление.

3 лайка

Я работаю над решением этой проблемы; у меня почти готов рабочий прототип.
У меня возник один вопрос по поводу двух компонентов: d-editor.js и composer-editor.js. Моё текущее решение основано на прослушивании обновлений превью/HTML-контента внутри компонента d-editor.js и т.д.
Я на правильном пути?

1 лайк

Наиболее подходящее место для удаления изображения — рядом с кнопками, которые отображаются при наведении для изменения размера изображений и добавления альтернативного текста в предпросмотре редактора.

image

Хук для удаления разметки изображения должен быть очень похож на кнопки 100%/75%/50%. Вы можете посмотреть здесь, как выполняется масштабирование изображений.

2 лайка

Я немного сомневаюсь насчёт добавления этого туда, так как такая необходимость возникает редко, а это добавит визуального шума.

Возможно, стоит разместить иконку «корзины» справа от этой строки, чтобы она не была слишком близко к кнопке редактирования?

@awesomerobot, что вы думаете?

Также интересно, правильно ли здесь порядок действий: не важнее ли сначала вращение и кадрирование?

3 лайка

Для простого добавления кнопки «Удалить» можно сделать так:

Переместить кнопку «Изменить» влево (бонус: уменьшение расстояния от курсора до поля ввода композитора), а кнопку «Удалить» разместить справа… Таким образом, между безопасными и опасными действиями появится зазор.

Другие желательные улучшения:

  • сделать иконку «Изменить» синей, как у меток 50% и 75%;
  • оставить текст чёрным, но сделать его кликабельным, чтобы переходить к полю ввода;
  • когда редактор заголовка открыт, можно ли расположить его так, чтобы он совпадал по базовой линии с текстом предварительного просмотра (то есть на слой выше)? Это сделает поведение менее «дёрганным» при клике:

Это более масштабная задача, но для поворота и кадрирования, возможно, потребуется совершенно другое меню?

На http://notion.so есть хороший пример:

У них есть кнопка с множеством опций, масштабирование осуществляется перетаскиванием за маркеры…

Один приятный нюанс: если добавляется изображение, слишком маленькое для наложения кнопки, система принудительно масштабирует его так, чтобы кнопка помещалась внутри, как только вы попытаетесь с ним взаимодействовать. Это предотвращает ситуацию, когда кнопка при наведении перекрывает окружающий контент.

7 лайков

@awesomerobot Спасибо за ваш отзыв. У меня есть ещё один вопрос, чтобы убедиться, что мы говорим об одном и том же. Касательно этого момента:

Поскольку есть два сценария отображения контейнера «кнопок масштабирования» вместе с кнопкой «alt edit»:

Обычно они появляются на одной строке; однако, если текст alt длинный, контейнер alt переносится на следующую строку:

Одна строка

Перенос

Теперь вернёмся к вашим пунктам выше: это имело бы смысл, если вы предполагаете, что поведение переноса должно быть по умолчанию. В противном случае для короткого текста alt кнопка удаления будет располагаться прямо рядом с кнопкой редактирования alt.

Также есть ещё один вариант — просто показывать контейнер alt перед кнопками масштабирования, например:

Одна строка:

Перенос:

Таким образом, понятно, что кнопка удаления появляется после 50%, но неясно, как это будет работать в двух описанных выше сценариях.

2 лайка

[Обновление]

Я последовал второму подходу выше:
Вот видео, как это выглядит

Если всем всё нравится, я проведу рефакторинг кода и создам пул-реквест (PR).

8 лайков

Спасибо за дополнительные пояснения! Мне кажется, всё выглядит отлично!

6 лайков

Спасибо; я уже отправил PR FEATURE: add image delete button in preview. by ghassanmas · Pull Request #17624 · discourse/discourse · GitHub

7 лайков

На сегодняшний день это уже было слито

6 лайков