옵시디언 RunJS: 파일 탐색기에 "파일 경로 복사(클립보드)" 메뉴 추가하기

 

이번 글에서는 파일 경로를 클립보드로 복사하는 메뉴를 추가하는 방법을 안내합니다.

이전 글(옵시디언 RunJS: 파일 탐색기에 "VSCode에서 열기" 메뉴 추가하기)에서 파일 탐색기 컨텍스트 메뉴에 사용자 지정 메뉴를 추가하는 방법을 다뤘습니다. 기본적인 방법은 이전 글과 동일하며, 주요 차이점은 클립보드로 복사하는 코드 한 줄입니다.

 

 

미리 보기

아래 그림은 파일 탐색기 컨텍스트 메뉴에 "파일 경로 복사" 메뉴가 추가된 모습입니다. 클릭하면 클립보드로 파일 경로가 복사됩니다. 안드로이드 옵시디언 앱에서도 작동합니다.

 

소스 코드 작성

실행 소스 코드 작성

다음 코드블럭을 옵시디언의 노트에 복사하여 붙여 넣으세요. 이 코드는 파일 탐색기와 탭의 컨텍스트 메뉴에 "파일 경로 복사" 항목을 추가합니다.

```js RunJS="{n:'Event/file-menu/Copy file path'}"
const [menu, file, source, leaf] = arguments;

menu.addItem((item) => {
	menu.dom.appendChild(item.dom);
	item.setTitle("파일 경로 복사") // "Copy file path"
		.setIcon("lucide-copy")
		.setSection("info")
		.onClick(async () => {
			// 안드로이드 옵시디언 앱에서는 안됨
			// const url = require('url');
			// let filePath = url.fileURLToPath(
			// 	app.vault.adapter.getFilePath(file.path)
			// );
            
			// 옵시디언 Vault 내의 상대 경로를 복사하려면
			// window.navigator.clipboard.writeText(file.path);
            
			// 파일 시스템 절대 경로 복사
			let filePath = RunJS.app.vault.adapter.getFullPath(file.path);
			window.navigator.clipboard.writeText(filePath);
		});
});
```

 

코드 설명

이 코드는 이전 글과 거의 비슷합니다. 그 설명(주석)을 보면 됩니다.
다른 점만 설명하자면 다음과 같습니다.

• Clipboard API 사용:
  
  • window.navigator.clipboard.writeText를 사용하여 텍스트를 클립보드에 복사합니다.
  • 이 API는 대부분의 최신 브라우저 및 데스크톱 환경에서 지원됩니다.
  • Electron과 같은 옵시디언 데스크톱 환경뿐만 아니라 WebView를 사용하는 안드로이드 앱 환경에서도 지원됩니다. (아래 "참고: 옵시디언 실행 환경 살펴보기" 참고)
• 안드로이드 환경 제약:
  
  • 안드로이드 앱에서 Node.js의 url 모듈은 지원되지 않으므로, 옵시디언이 제공하는 경로 함수(app.vault.adapter.getFullPath)를 사용합니다.
  • 이전 글에서 일부러 Node.js의 'url' 모듈을 사용하는 예를 보이고자 사용했지만 사실 그 소스 코드나 이 소스 코드에서는 굳이 모듈을 쓸 필요가 없이 옵시디언에서 제공하는 함수를 사용하면 됩니다.

 

실행 코드 추가 확인

 

다음 그림에서 보이는 것처럼 RunJS 코드목록 패널에 실행 코드 "Copy file path"가 설치된 것을 확인할 수 있습니다.

RunJS 코드목록 패널에 설치된 실행 코드

 

이벤트 핸들러에 추가

RunJS 플러그인 설정에서 작성한 코드를 이벤트 핸들러로 추가합니다.

1. 옵시디언 설정에서 RunJS > Event handler로 이동합니다.
2. + 버튼을 눌러 새 이벤트 핸들러를 만듭니다.
3. 실행할 코드: 위에서 작성한 실행 소스 코드를 선택합니다.
4. 이벤트 객체: "작업공간(workspace)"을 선택합니다.
5. 이벤트 이름: "file-menu"로 설정합니다.
6. 이벤트 활성화: "사용(Enable)"으로 설정합니다.

이렇게 설정하게 되면 RunJS에서는 Workspace.on('file-menu') 메서드로 이벤트 핸들러를 추가합니다. 다음에 컨텍스트 메뉴를 보여 주게 될 때마다(trigger) 위 실행 코드가 실행되어 컨텍스트 메뉴를 추가하게 됩니다.

이벤트 핸들러에 추가된 코드

 

실행 확인

옵시디언의 파일 탐색기 또는 탭에서 파일을 선택한 후 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 열어보세요. "파일 경로 복사" 메뉴 항목이 나타납니다. 이 항목을 클릭하면 파일 경로가 클립보드에 복사됩니다.

 

 

참고: 옵시디언 실행 환경 살펴보기

다음 소스코드는 사용자의 브라우저 및 운영 체제 환경에 대한 힌트를 제공하는 userAgent 값을 활성화된 노트의 커서가 있는 위치에  넣도록 합니다.

```js RunJS="{n:'write userAgent'}"
import {setSelection} from 'RunJS/Utils';

setSelection(this.app, window.navigator.userAgent);
```

 

아니면 DevTools(윈도에서는 Ctrl + Shift + I, 안드로이드에서는 원격 디버깅)에서 직접 입력하여 얻을 수 있습니다.

window.navigator.userAgent

 

 

윈도우 옵시디언에서 실행 결과

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) obsidian/1.4.13 Chrome/114.0.5735.289 Electron/25.8.1 Safari/537.36

 

Electron:
크로스플랫폼 데스크톱 애플리케이션을 개발하기 위해 HTML, CSS, JavaScript를 사용하는 프레임워크입니다.

 

안드로이드 옵시디언 앱에서 실행 결과

Mozilla/5.0 (Linux; Android 14; SM-S9210 Build/UP1A.231005.007; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/130.0.6723.86 Mobile Safari/537.36

 

wv:
이것은 옵시디언이 안드로이드 환경에서는 WebView를 통해 실행되고 있음을 나타냅니다.

 

app 객체 비교

DevTools(로컬, 원격)에서 app을 입력하여 두 환경을 비교해 봤습니다

윈도우 옵시디언

안드로이드 옵시디언 앱

 

윈도 옵시디언에서는 url 모듈 없이 아래 그림에 보이는 app.vault.adapter.fileURLToPath 등의 함수를 사용할 수 있습니다. 안드로이드 앱에는 없네요.

 

마치며

이 글은 GitHub Discussions에서도 확인할 수 있습니다.

 

궁금한 점이나 의견이 있다면 댓글로 남겨 주세요!

 

 

.