안녕하세요,
컴포저에서 이미지를 쉽게 삭제할 수 있는 새로운 기능을 고민하고 있습니다. 사용자가 여러 이미지를 업로드한 후 그중 하나만 삭제하려고 할 때, 마크다운에 익숙하지 않은 사용자에게는 정말 복잡한 작업입니다. 물론 시도해 보지만, 결과적으로는 깨진 링크 등이 생기는 경우가 대부분입니다.
이미지 대체 텍스트(alt text)를 수정할 수 있도록 한 기능이 있었는데, 이 기능은 꽤 잘 작동하며 사용자 친화적이었습니다. 이 기능은 미리보기 화면에서 대체 텍스트를 편집할 수 있는 기능을 추가했습니다.
미리보기 화면의 이미지 위에 삭제 버튼을 배치할 수 있다면 정말 좋겠습니다. 예를 들어 이미지 모서리에 
아이콘이나 X 표시를 두고, 해당 버튼을 클릭하면 실제 이미지 마크다운 코드를 자동으로 찾아서 삭제할 수 있도록 하는 방식입니다. 
감사합니다
Don, 감사합니다. 유용한 버튼이네요. 추가하는 것도 어렵지 않을 것 같습니다. 이 이슈를 #pr-welcome으로 표시하겠습니다. 추가되는 것을 기대하겠습니다.
이 문제를 해결하는 중입니다. 거의 작동하는 개념 증명(Proof of Concept)을 만들었습니다.
d-editor.js와 composer-editor,js라는 두 컴포넌트 사이에 혼란스러운 부분이 하나 있습니다. 지금까지의 제 해결책은 d-editor.js 컴포넌트 내에서 미리보기/HTML 콘텐츠가 업데이트될 때 이를 청취하는 방식에 기반하고 있습니다… 등.
제 방향이 맞을까요?
이미지를 삭제하는 가장 적절한 위치는 컴포저 미리보기에서 마우스를 올리면 표시되는 이미지 크기 조절 및 대체 텍스트 추가 버튼 옆입니다.
이미지 마크업을 삭제하는 훅은 100%/75%/50% 버튼과 매우 유사해야 합니다. 이미지 크기가 어떻게 조정되는지 여기에서 확인할 수 있습니다.
거기에 추가하는 것에 대해서는 약간 의견이 갈립니다. 왜냐하면 그 기능이 필요한 경우가 매우 드물고, 시각적 노이즈를 더할 것 같아서입니다.
편집 버튼과 너무 가깝지 않도록, 해당 줄의 오른쪽 정렬에 “휴지통” 아이콘을 배치하는 것은 어떨까요?
@awesomerobot 의견은 어떠신가요?
또한, 여기서 작업 순서가 올바른지 궁금합니다. 회전과 자르기가 더 중요한가요?
삭제 버튼만 추가하는 것이라면 이렇게 할 수 있습니다:
편집 버튼을 왼쪽으로 이동하면(보너스: 작성 입력 필드까지 마우스 이동 거리가 줄어듦), 삭제 버튼을 오른쪽에 배치할 수 있습니다… 이렇게 하면 무해한 동작과 위험한 동작 사이에 일정한 간격이 생깁니다.
다른 좋은 아이디어들:
이는 더 큰 범위의 문제이지만, 회전과 자르기 기능을 위해 완전히 다른 종류의 메뉴가 필요할 수도 있습니다.
http://notion.so 에 좋은 예시가 있습니다:
여기서는 버튼에 여러 옵션이 있고, 크기는 핸들을 클릭하여 드래그하는 방식으로 조절합니다…
한 가지 좋은 세부 사항은, 버튼 오버레이보다 너무 작은 이미지를 추가했을 때, 사용자가 조작을 시도하면 버튼이 완전히 포함되도록 이미지 크기를 강제 조정한다는 점입니다. 이는 호버 시 주변 콘텐츠를 가리는 버튼이避免出现됩니다.
@awesomerobot 피드백 감사합니다. 같은 맥락인지 확인하기 위해 한 가지 더 질문이 있습니다. 이 부분에 대해:
“스케일 버튼” 컨테이너가 "대체 텍스트 편집 버튼"과 함께 나타나는 시나리오가 두 가지 있기 때문입니다.
보통은 같은 줄에 나타납니다. 하지만 대체 텍스트가 길면 대체 텍스트 컨테이너가 다음 줄로 넘칩니다:
같은 줄
넘침
다시 위 질문에 돌아가면, 넘침 동작을 기본값으로 원하신다면 그 제안이 타당해 보입니다. 그렇지 않다면 짧은 대체 텍스트의 경우 삭제 버튼이 대체 텍스트 편집 버튼 바로 옆에 놓이게 됩니다.
또 다른 대안으로, 스케일 버튼 앞에 대체 텍스트 컨테이너를 표시하는 방법이 있습니다. 예:
같은 줄:
넘침:
즉, 삭제 버튼이 50% 버튼 뒤에 오는 것은 명확하지만, 위에서 언급한 두 시나리오에서는 어떻게 작동할지 명확하지 않습니다.
[Update]
위에서 언급한 두 번째 접근 방식을 따랐습니다:
결과가 어떻게 보이는지 영상으로 공유합니다.
모두 괜찮아 보인다면, 코드를 리팩토링하여 PR을 생성/푸시하겠습니다.
추가 설명해 주셔서 감사합니다! 이 정도면 괜찮아 보입니다!
감사합니다. 이미 PR을 제출했습니다: FEATURE: add image delete button in preview. - Pull Request #17624 - discourse/discourse - GitHub
오늘부로 이 변경 사항이 병합되었습니다
