훌륭합니다! @Johani 감사합니다. 이제 3가지 브라우저 모두에서 정상 작동하는 것을 확인했습니다.
4개의 좋아요
훌륭합니다. 이 개선 사항들은 확실히 훌륭하며, 이를 이루기 위해 상당한 노력이 들었음을 알 수 있습니다. 셀프호스팅 세계에서 우리를 좀 귀찮게 하지만 함께 손을 잡은 동맹군으로 생각해 주셔서 감사합니다!
컴포넌트가 이제 S3 업로드와 함께 작동합니까?
3개의 좋아요
직접 시도해 보지는 않았지만, 버킷이 올바르게 구성되어 있다면 작동해야 합니다. 이 컴포넌트는 PDF를 로드하기 위해 요청을 보냅니다.
JavaScript에서 이러한 유형의 요청은 출처가 파일에 대한 액세스 권한이 없으면 차단됩니다. 그러면 CORS 오류가 발생합니다. 콘솔을 확인하면 아마도 다음과 유사한 내용을 볼 수 있을 것입니다.
이 부분에 대해 컴포넌트가 할 수 있는 일은 많지 않습니다. 모든 것이 S3 구성에서 처리되어야 합니다. CORS 문제를 피하려면 출처(즉, Discourse 도메인)가 이러한 요청을 보낼 수 있도록 허용되어야 합니다.
9개의 좋아요
감사합니다! 곧 S3로 과감하게 도전해 보겠습니다.
또 다른 제안: 파일명 앞에 공백 입력 시 탭으로 열기
저는 기본적으로 PDF가 인라인으로 표시되기를 원하고, 파일명 앞에 공백을 입력하면 새 탭에서 열리기를 원합니다. 이렇게 하면 각 PDF별로 인라인 표시와 탭 열기 중 원하는 방식을 선택할 수 있어, 컴포넌트 단위로 설정하는 것보다 유연합니다.
아마도 컴포넌트 설정을 "기본 동작은 무엇으로 할까요?"로 변경하고, 공백을 입력하면 반대 동작이 적용되도록 하는 것이 좋을 것 같습니다.
또는 대안으로, 공백 입력 시 어떤 동작(인라인 / 탭 / 다운로드)을 수행할지 묻도록 할 수도 있습니다.
2개의 좋아요
아! 크롬에서 또 회색 박자만 표시되고 있어요. 파이어폭스와 사파리는 정상입니다.
3개의 좋아요
이 테마 컴포넌트가 PDF를 외부 인터프리터로 보내고 있나요?
외부 서비스에서 파일이 로드되는 것을 방지하고 싶어서 "보안 미디어"를 활성화해 두었습니다.
1개의 좋아요
다음 코드로 인해 이런 문제가 발생하는 것을 알게 되었습니다:
<a class="attachment pdf-attachment" href="...pdf">doc.pdf
<iframe src="blob:..." height="500" loading="lazy" class="pdf-preview">
</iframe>
</a>
위 코드를 다음과 같이 교체하면:
<a class="attachment pdf-attachment" href="...pdf">doc.pdf</a>
<iframe src="blob:..." height="500" loading="lazy" class="pdf-preview"></iframe>
정상적으로 동작합니다.
하지만 기존 코드에서 이 문제를 어떻게 수정해야 하는지 확실하지 않습니다.
5개의 좋아요
@Johani
오류는 다음 코드, 34~41번째 줄과 관련이 있습니다:
const setUpPreviewType = (pdf) => {
if (previewMode === "Inline") {
const preview = createPreviewElement();
pdf.classList.add("pdf-attachment");
pdf.append(preview);
return preview;
}
4개의 좋아요
이 솔루션은 모든 브라우저에서 작동하는 것 같습니다.
4개의 좋아요
pdf.parentNode.append(preview);가 문제를 해결하는 것 같습니다(단, PDF가 여러 개인 경우 미리보기가 각 링크 아래가 아니라 모든 링크 아래에 표시됩니다)
3개의 좋아요
하지만 parentNode가
태그라면, 링크와 iframe이 모두
태그 내부에 위치하기 때문에 이 문제가 발생하지 않아야 합니다.
따라서 이 문제를 우회하려면 첨부 파일 사이에 줄바꿈을 추가하기만 하면 됩니다:
[doc1.pdf|attachment](...)
[doc2.pdf|attachment](...)
그리고 제안하신 솔루션을 사용하면 Chrome에서도 PDF 미리보기가 올바르게 표시됩니다.
3개의 좋아요
일부 변경 사항을 push했습니다.
네, 파일을 무시하는 것보다 훨씬 합리적인 방법입니다. 업데이트 이후 작동 방식은 다음과 같습니다.
-
설정을 "새 탭"으로 하면, 해당 컴포넌트는 게시물에 미리보기를 첨부하지 않습니다. 링크를 클릭하면 PDF가 새 탭에서 열립니다.
-
설정을 "인라인"으로 하면, 해당 컴포넌트는 기본적으로 모든 PDF에 대해 게시물에 미리보기를 첨부합니다. 파일명이 공백으로 시작하는 경우 미리보기를 첨부하지 않지만, 링크를 클릭하면 다운로드 대신 새 탭에서 PDF가 열립니다.
모든 네이티브 브라우저 PDF 뷰어에는 다운로드 버튼이 있으므로, 원하시는 경우 해당 버튼에서 다운로드할 수 있습니다.
디버깅과 상세한 설명을 감사드립니다 @sharewoodsDavid. <a> 태그 내부의 <iframe> 태그는 검증에 실패하는 것으로 밝혀졌습니다.
iframe요소는a요소의 자손으로 나타날 수 없습니다
따라서, 당신의 수정 방식이 정확합니다. 위의 PR에서 해당 변경 사항을 적용했습니다.
다른 요소 뒤에 요소를 추가하려면 after()를 다음과 같이 사용할 수 있습니다
someElement.after(newElement)
다른 요소 앞에 요소를 추가하려면 insertBefore()를 다음과 같이 사용할 수 있습니다
// parentNode: 삽입할 요소의 부모
// newNode: 삽입할 요소
// referenceNode: 삽입 위치 기준이 되는 요소 (이 요소 앞에 삽입됨)
parentNode.insertBefore(newNode, referenceNode)
아니요. 여기에는 외부 서비스가 관여하지 않습니다. 작동 방식은 다음과 같습니다.
- 사용자가 PDF 첨부 파일이 있는 게시물을 방문합니다
- 사용자의 브라우저가 첨부 파일을 요청합니다
- 서버가 첨부 파일을 사용자의 브라우저로 전송합니다
- 사용자의 브라우저가 내장된 PDF 뷰어를 사용하여 파일을 읽습니다
그게 전부입니다.
7개의 좋아요
완벽해요 - @Johani 감사합니다. Chrome, FF, Safari에서 모두 정상 작동하는 것을 확인했습니다. 
3개의 좋아요
정말 좋습니다! 정말 감사합니다. 설치해서 작동하고 있습니다! 제가 찾던 바로 그거였어요.
5개의 좋아요
이 기능은 포럼에 이미 게시된 PDF에도 소급 적용되나요?
2개의 좋아요
방금 테스트 사이트에서 확인해 봤는데, 기존 항목들도 ‘HTML 재빌드’ 없이 정상적으로 작동하는 것 같습니다.
6개의 좋아요
지난주 소스에서 업데이트를 확인했으니, 이 컴포넌트가 아직 유지되고 있는 것으로 추측됩니다. 하지만 안타깝게도 저는 어떤 브라우저에서도 이 기능이 작동하지 않았습니다. 혹시 보안 설정에 문제가 있는 걸까요?
저만 이런 문제를 겪고 있는 건지, 아니면 일반적인 문제인지 궁금합니다.
2개의 좋아요
저한테도 안 됐어요.
2개의 좋아요
컴포넌트는 잘 작동합니다. 어떤 문제나 오류가 발생하나요?
3개의 좋아요
