【SwiftUI】TexのMarkdownのリンクを制御する

はじめに

SwiftUIのTextでマークダウンが使えるのを知っていますか？
マークダウンでリンクが使えるのですが、このリンクをタップした時の処理を自前で実装できるんです。

これができると何ができるのかというと、
同じマークダウン内に移動する目次なんかを簡単に実装することができるようになります。

サンプルアプリ

目次を選択すると、その項目へ移動します。

実装

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            ScrollViewReader { proxy in
                VStack {
                    Text("""
                        # 目次
                        - [テキスト10](10)
                        - [テキスト20](20)
                        - [テキスト30](30)
                        - [テキスト40](40)
                        - [テキスト50](50)
                        - [テキスト60](60)
                        """)
                        .environment(\.openURL, OpenURLAction { url in
                            // urlで受け取れるのは()の中のもの
                            // 現在、urlの型はURLなのでStringに変換する
                            let id = url.description
                            // ScrollViewを移動させる
                            withAnimation {
                                proxy.scrollTo(id, anchor: .center)
                            }
                            // handledを返すことによって自前で処理をかける
                            return .handled
                        })
                        .frame(maxWidth: .infinity, alignment: .leading)
                    
                    ForEach(0..<100) { index in
                        Text("テキスト\(index)")
                            .id(index.description)
                            .frame(maxWidth: .infinity)
                            .containerRelativeFrame(.vertical)
                            .background(.red.opacity(0.6), in: .rect(cornerRadius: 8))
                    }
                }
                .padding(20)
            }
        }
    }
}

おわり

公式ドキュメント見てたら発見しました

公式ドキュメント