react-native-readium 1.0.0-alpha.1

package/android/src/main/java/com/reactnativereadium/epub/UserSettings.kt

@@ -0,0 +1,236 @@
+package com.reactnativereadium.epub
+
+import android.content.Context
+import android.content.SharedPreferences
+import androidx.appcompat.app.AppCompatActivity
+import org.json.JSONArray
+import org.readium.r2.navigator.R2BasicWebView
+import org.readium.r2.navigator.R2WebView
+import org.readium.r2.navigator.epub.fxl.R2FXLLayout
+import org.readium.r2.navigator.pager.R2ViewPager
+import org.readium.r2.shared.*
+import com.reactnativereadium.R
+import java.io.File
+
+class UserSettings(
+  var preferences: SharedPreferences,
+  val context: Context,
+  private val UIPreset: MutableMap<ReadiumCSSName, Boolean>
+) {
+
+    lateinit var resourcePager: R2ViewPager
+
+    private val appearanceValues = listOf("readium-default-on", "readium-sepia-on", "readium-night-on")
+    private val fontFamilyValues = listOf("Original", "PT Serif", "Roboto", "Source Sans Pro", "Vollkorn", "OpenDyslexic", "AccessibleDfA", "IA Writer Duospace")
+    private val textAlignmentValues = listOf("justify", "start")
+    private val columnCountValues = listOf("auto", "1", "2")
+
+    private var fontSize = 100f
+    private var fontOverride = false
+    private var fontFamily = 0
+    private var appearance = 0
+    private var verticalScroll = false
+
+    //Advanced settings
+    private var publisherDefaults = false
+    private var textAlignment = 0
+    private var columnCount = 0
+    private var wordSpacing = 0f
+    private var letterSpacing = 0f
+    private var pageMargins = 2f
+    private var lineHeight = 1f
+
+    private var userProperties: UserProperties
+
+    init {
+        appearance = preferences.getInt(APPEARANCE_REF, appearance)
+        verticalScroll = preferences.getBoolean(SCROLL_REF, verticalScroll)
+        fontFamily = preferences.getInt(FONT_FAMILY_REF, fontFamily)
+        if (fontFamily != 0) {
+            fontOverride = true
+        }
+        publisherDefaults = preferences.getBoolean(PUBLISHER_DEFAULT_REF, publisherDefaults)
+        textAlignment = preferences.getInt(TEXT_ALIGNMENT_REF, textAlignment)
+        columnCount = preferences.getInt(COLUMN_COUNT_REF, columnCount)
+
+
+        fontSize = preferences.getFloat(FONT_SIZE_REF, fontSize)
+        wordSpacing = preferences.getFloat(WORD_SPACING_REF, wordSpacing)
+        letterSpacing = preferences.getFloat(LETTER_SPACING_REF, letterSpacing)
+        pageMargins = preferences.getFloat(PAGE_MARGINS_REF, pageMargins)
+        lineHeight = preferences.getFloat(LINE_HEIGHT_REF, lineHeight)
+        userProperties = getUserSettings()
+
+        //Setting up screen brightness
+        val backLightValue = preferences.getInt("reader_brightness", 50).toFloat() / 100
+        val layoutParams = (context as AppCompatActivity).window.attributes
+        layoutParams.screenBrightness = backLightValue
+        context.window.attributes = layoutParams
+    }
+
+    fun updateSettingsFromMap(map: Map<String, Any>) {
+      userProperties.properties.forEach { property ->
+        val key = property.ref
+        val value = map[key]
+
+        val isPropertyModified = when (property) {
+          is Enumerable -> updateEnumerableFromKeyValue(property, key, value)
+          is Incremental -> updateIncrementalFromKeyValue(property, key, value)
+          is Switchable -> updateSwitchableFromKeyValue(property, key, value)
+        }
+
+        // apply the changes to the view
+        if (isPropertyModified) {
+          updateViewCSS(key)
+        }
+      }
+    }
+
+    private fun updateEnumerableFromKeyValue(property: Enumerable, key: String, value: Any?): Boolean {
+        if (value == null) return false
+        var update: Int?
+
+        if (value is Int) {
+          update = value
+        } else if (value is Float) {
+          update = value.toInt()
+        } else if (value is Double) {
+          update = value.toInt()
+        } else {
+          throw Error("Invalid value type '${value.javaClass.simpleName}' passed for setting: $key = $value")
+        }
+
+        property.index = update
+        updateEnumerable(property)
+        return true
+    }
+
+    private fun updateIncrementalFromKeyValue(property: Incremental, key: String, value: Any?): Boolean {
+      if (value == null) return false
+      var update: Float?
+
+      if (value is Int) {
+        update = value.toFloat()
+      } else if (value is Float) {
+        update = value
+      } else if (value is Double) {
+        update = value.toFloat()
+      } else {
+        throw Error("Invalid value type '${value.javaClass.simpleName}' passed for setting: $key = $value")
+      }
+
+      property.value = update
+      updateIncremental(property)
+      return true
+    }
+
+    private fun updateSwitchableFromKeyValue(property: Switchable, key: String, value: Any?): Boolean {
+      if (value == null) return false
+      var update: Boolean?
+
+      if (value is Boolean) {
+        update = value
+      } else {
+        throw Error("Invalid value type '${value.javaClass.simpleName}' passed for setting: $key = $value")
+      }
+
+      property.on = update
+      updateSwitchable(property)
+      return true
+    }
+
+    private fun getUserSettings(): UserProperties {
+
+        val userProperties = UserProperties()
+        // Publisher default system
+        userProperties.addSwitchable("readium-advanced-off", "readium-advanced-on", publisherDefaults, PUBLISHER_DEFAULT_REF, PUBLISHER_DEFAULT_NAME)
+        // Font override
+        userProperties.addSwitchable("readium-font-on", "readium-font-off", fontOverride, FONT_OVERRIDE_REF, FONT_OVERRIDE_NAME)
+        // Column count
+        userProperties.addEnumerable(columnCount, columnCountValues, COLUMN_COUNT_REF, COLUMN_COUNT_NAME)
+        // Appearance
+        userProperties.addEnumerable(appearance, appearanceValues, APPEARANCE_REF, APPEARANCE_NAME)
+        // Page margins
+        userProperties.addIncremental(pageMargins, 0.5f, 4f, 0.25f, "", PAGE_MARGINS_REF, PAGE_MARGINS_NAME)
+        // Text alignment
+        userProperties.addEnumerable(textAlignment, textAlignmentValues, TEXT_ALIGNMENT_REF, TEXT_ALIGNMENT_NAME)
+        // Font family
+        userProperties.addEnumerable(fontFamily, fontFamilyValues, FONT_FAMILY_REF, FONT_FAMILY_NAME)
+        // Font size
+        userProperties.addIncremental(fontSize, 100f, 300f, 25f, "%", FONT_SIZE_REF, FONT_SIZE_NAME)
+        // Line height
+        userProperties.addIncremental(lineHeight, 1f, 2f, 0.25f, "", LINE_HEIGHT_REF, LINE_HEIGHT_NAME)
+        // Word spacing
+        userProperties.addIncremental(wordSpacing, 0f, 0.5f, 0.25f, "rem", WORD_SPACING_REF, WORD_SPACING_NAME)
+        // Letter spacing
+        userProperties.addIncremental(letterSpacing, 0f, 0.5f, 0.0625f, "em", LETTER_SPACING_REF, LETTER_SPACING_NAME)
+        // Scroll
+        userProperties.addSwitchable("readium-scroll-on", "readium-scroll-off", verticalScroll, SCROLL_REF, SCROLL_NAME)
+
+        return userProperties
+    }
+
+    private fun makeJson(): JSONArray {
+        val array = JSONArray()
+        for (userProperty in userProperties.properties) {
+            array.put(userProperty.getJson())
+        }
+        return array
+    }
+
+
+    fun saveChanges() {
+        val json = makeJson()
+        val dir = File(context.filesDir.path + "/" + Injectable.Style.rawValue + "/")
+        dir.mkdirs()
+        val file = File(dir, "UserProperties.json")
+        file.printWriter().use { out ->
+            out.println(json)
+        }
+    }
+
+    private fun updateEnumerable(enumerable: Enumerable) {
+        preferences.edit().putInt(enumerable.ref, enumerable.index).apply()
+        saveChanges()
+    }
+
+
+    private fun updateSwitchable(switchable: Switchable) {
+        preferences.edit().putBoolean(switchable.ref, switchable.on).apply()
+        saveChanges()
+    }
+
+    private fun updateIncremental(incremental: Incremental) {
+        preferences.edit().putFloat(incremental.ref, incremental.value).apply()
+        saveChanges()
+    }
+
+    fun updateViewCSS(ref: String) {
+        for (i in 0 until resourcePager.childCount) {
+            val webView = resourcePager.getChildAt(i).findViewById(R.id.webView) as? R2WebView
+            webView?.let {
+                applyCSS(webView, ref)
+            } ?: run {
+                val zoomView = resourcePager.getChildAt(i).findViewById(R.id.r2FXLLayout) as R2FXLLayout
+                val webView1 = zoomView.findViewById(R.id.firstWebView) as? R2BasicWebView
+                val webView2 = zoomView.findViewById(R.id.secondWebView) as? R2BasicWebView
+                val webViewSingle = zoomView.findViewById(R.id.webViewSingle) as? R2BasicWebView
+
+                webView1?.let {
+                    applyCSS(webView1, ref)
+                }
+                webView2?.let {
+                    applyCSS(webView2, ref)
+                }
+                webViewSingle?.let {
+                    applyCSS(webViewSingle, ref)
+                }
+            }
+        }
+    }
+
+    private fun applyCSS(view: R2BasicWebView, ref: String) {
+        val userSetting = userProperties.getByRef<UserProperty>(ref)
+        view.setProperty(userSetting.name, userSetting.toString())
+    }
+}

package/android/src/main/java/com/reactnativereadium/reader/BaseReaderFragment.kt

@@ -0,0 +1,81 @@
+package com.reactnativereadium.reader
+
+import android.os.Bundle
+import android.view.*
+import androidx.fragment.app.Fragment
+import androidx.lifecycle.lifecycleScope
+import kotlinx.coroutines.flow.launchIn
+import kotlinx.coroutines.flow.onEach
+import org.readium.r2.navigator.*
+import org.readium.r2.shared.publication.Locator
+import com.reactnativereadium.R
+import com.reactnativereadium.utils.EventChannel
+import kotlinx.coroutines.channels.Channel
+
+/*
+ * Base reader fragment class
+ *
+ * Provides common menu items and saves last location on stop.
+ */
+@OptIn(ExperimentalDecorator::class)
+abstract class BaseReaderFragment : Fragment() {
+  val channel = EventChannel(
+    Channel<ReaderViewModel.Event>(Channel.BUFFERED),
+    lifecycleScope
+  )
+
+  protected abstract val model: ReaderViewModel
+    protected abstract val navigator: Navigator
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        setHasOptionsMenu(true)
+        super.onCreate(savedInstanceState)
+    }
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        val viewScope = viewLifecycleOwner.lifecycleScope
+
+        navigator.currentLocator
+            .onEach { channel.send(ReaderViewModel.Event.LocatorUpdate(it))  }
+            .launchIn(viewScope)
+    }
+
+    override fun onHiddenChanged(hidden: Boolean) {
+        super.onHiddenChanged(hidden)
+        setMenuVisibility(!hidden)
+        requireActivity().invalidateOptionsMenu()
+    }
+
+    // TODO: this should probably be removed
+    override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
+        menuInflater.inflate(R.menu.menu_reader, menu)
+        menu.findItem(R.id.drm).isVisible = false
+    }
+
+    override fun onOptionsItemSelected(item: MenuItem): Boolean {
+        return when (item.itemId) {
+            R.id.toc -> {
+                model.channel.send(ReaderViewModel.Event.OpenOutlineRequested)
+                true
+            }
+            R.id.drm -> {
+                model.channel.send(ReaderViewModel.Event.OpenDrmManagementRequested)
+                true
+            }
+            else -> false
+        }
+    }
+
+    fun go(locator: Locator, animated: Boolean): Boolean {
+      // don't attempt to navigate if we're already there
+      val currentLocator = navigator.currentLocator.value
+      if (locator.hashCode() == currentLocator.hashCode()) {
+        return true
+      }
+
+      return navigator.go(locator, animated)
+    }
+
+}

package/android/src/main/java/com/reactnativereadium/reader/EpubReaderFragment.kt

@@ -0,0 +1,375 @@
+/*
+ * Copyright 2021 Readium Foundation. All rights reserved.
+ * Use of this source code is governed by the BSD-style license
+ * available in the top-level LICENSE file of the project.
+ */
+
+package com.reactnativereadium.reader
+
+import android.graphics.Color
+import android.graphics.PointF
+import android.os.Bundle
+import android.view.*
+import android.view.accessibility.AccessibilityManager
+import androidx.appcompat.app.AppCompatActivity
+import androidx.appcompat.widget.SearchView
+import androidx.fragment.app.commitNow
+import androidx.lifecycle.lifecycleScope
+import androidx.lifecycle.ViewModelProvider
+import com.reactnativereadium.epub.UserSettings
+import com.reactnativereadium.R
+import com.reactnativereadium.utils.toggleSystemUi
+import java.net.URL
+import kotlinx.coroutines.delay
+import org.readium.r2.navigator.epub.EpubNavigatorFragment
+import org.readium.r2.navigator.ExperimentalDecorator
+import org.readium.r2.navigator.Navigator
+import org.readium.r2.shared.APPEARANCE_REF
+import org.readium.r2.shared.publication.Locator
+import org.readium.r2.shared.publication.Publication
+import org.readium.r2.shared.ReadiumCSSName
+import org.readium.r2.shared.SCROLL_REF
+
+@OptIn(ExperimentalDecorator::class)
+class EpubReaderFragment : VisualReaderFragment(), EpubNavigatorFragment.Listener {
+
+    override lateinit var model: ReaderViewModel
+    override lateinit var navigator: Navigator
+    private lateinit var publication: Publication
+    lateinit var navigatorFragment: EpubNavigatorFragment
+    private lateinit var factory: ReaderViewModel.Factory
+
+    private lateinit var menuScreenReader: MenuItem
+    private lateinit var menuSearch: MenuItem
+    lateinit var menuSearchView: SearchView
+
+    private lateinit var userSettings: UserSettings
+    private var isScreenReaderVisible = false
+    private var isSearchViewIconified = true
+
+    // Accessibility
+    private var isExploreByTouchEnabled = false
+
+    fun initFactory(
+      publication: Publication,
+      initialLocation: Locator?
+    ) {
+      factory = ReaderViewModel.Factory(
+        publication,
+        initialLocation
+      )
+    }
+
+    fun updateSettingsFromMap(map: Map<String, Any>) {
+      if (userSettings != null) {
+        userSettings.updateSettingsFromMap(map)
+      }
+    }
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        // FIXME: this should be checked
+        // check(R2App.isServerStarted)
+
+        if (savedInstanceState != null) {
+            isScreenReaderVisible = savedInstanceState.getBoolean(IS_SCREEN_READER_VISIBLE_KEY)
+            isSearchViewIconified = savedInstanceState.getBoolean(IS_SEARCH_VIEW_ICONIFIED)
+        }
+
+        ViewModelProvider(this, factory)
+          .get(ReaderViewModel::class.java)
+          .let {
+            model = it
+            publication = it.publication
+          }
+
+        val baseUrl = checkNotNull(requireArguments().getString(BASE_URL_ARG))
+
+        childFragmentManager.fragmentFactory =
+            EpubNavigatorFragment.createFactory(
+                publication = publication,
+                baseUrl = baseUrl,
+                initialLocator = model.initialLocation,
+                listener = this,
+                config = EpubNavigatorFragment.Configuration().apply {
+                    // Register the HTML template for our custom [DecorationStyleAnnotationMark].
+                    // TODO: remove?
+                    /* decorationTemplates[DecorationStyleAnnotationMark::class] = annotationMarkTemplate(activity) */
+                    /* selectionActionModeCallback = customSelectionActionModeCallback */
+                }
+            )
+// TODO: add search back in
+//        childFragmentManager.setFragmentResultListener(
+//            SearchFragment::class.java.name,
+//            this,
+//            FragmentResultListener { _, result ->
+//                menuSearch.collapseActionView()
+//                result.getParcelable<Locator>(SearchFragment::class.java.name)?.let {
+//                    navigatorFragment.go(it)
+//                }
+//            }
+//        )
+// TODO: add TTS back in
+//        childFragmentManager.setFragmentResultListener(
+//            ScreenReaderContract.REQUEST_KEY,
+//            this,
+//            FragmentResultListener { _, result ->
+//                val locator = ScreenReaderContract.parseResult(result).locator
+//                if (locator.href != navigator.currentLocator.value.href) {
+//                    navigator.go(locator)
+//                }
+//            }
+//        )
+
+        setHasOptionsMenu(true)
+
+        super.onCreate(savedInstanceState)
+    }
+
+    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
+        val view = super.onCreateView(inflater, container, savedInstanceState)
+        val navigatorFragmentTag = getString(R.string.epub_navigator_tag)
+
+        if (savedInstanceState == null) {
+            childFragmentManager.commitNow {
+                add(R.id.fragment_reader_container, EpubNavigatorFragment::class.java, Bundle(), navigatorFragmentTag)
+            }
+        }
+        navigator = childFragmentManager.findFragmentByTag(navigatorFragmentTag) as Navigator
+        navigatorFragment = navigator as EpubNavigatorFragment
+
+        return view
+    }
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        val activity = requireActivity()
+        userSettings = UserSettings(navigatorFragment.preferences, activity, publication.userSettingsUIPreset)
+
+       // This is a hack to draw the right background color on top and bottom blank spaces
+        navigatorFragment.lifecycleScope.launchWhenStarted {
+            val appearancePref = navigatorFragment.preferences.getInt(APPEARANCE_REF, 0)
+            val backgroundsColors = mutableListOf("#ffffff", "#faf4e8", "#000000")
+            navigatorFragment.resourcePager.setBackgroundColor(Color.parseColor(backgroundsColors[appearancePref]))
+        }
+    }
+
+    override fun onResume() {
+        super.onResume()
+        val activity = requireActivity()
+
+        userSettings.resourcePager = navigatorFragment.resourcePager
+
+        // If TalkBack or any touch exploration service is activated we force scroll mode (and
+        // override user preferences)
+        val am = activity.getSystemService(AppCompatActivity.ACCESSIBILITY_SERVICE) as AccessibilityManager
+        isExploreByTouchEnabled = am.isTouchExplorationEnabled
+
+        if (isExploreByTouchEnabled) {
+            // Preset & preferences adapted
+            publication.userSettingsUIPreset[ReadiumCSSName.ref(SCROLL_REF)] = true
+            navigatorFragment.preferences.edit().putBoolean(SCROLL_REF, true).apply() //overriding user preferences
+            userSettings.saveChanges()
+
+            lifecycleScope.launchWhenResumed {
+                delay(500)
+                userSettings.updateViewCSS(SCROLL_REF)
+            }
+        } else {
+            if (publication.cssStyle != "cjk-vertical") {
+                publication.userSettingsUIPreset.remove(ReadiumCSSName.ref(SCROLL_REF))
+            }
+        }
+    }
+
+    override fun onCreateOptionsMenu(menu: Menu, menuInflater: MenuInflater) {
+        super.onCreateOptionsMenu(menu, menuInflater)
+        menuInflater.inflate(R.menu.menu_epub, menu)
+
+        menuScreenReader = menu.findItem(R.id.screen_reader)
+        menuSearch = menu.findItem(R.id.search)
+        menuSearchView = menuSearch.actionView as SearchView
+
+        /* connectSearch() */
+        if (!isSearchViewIconified) menuSearch.expandActionView()
+    }
+
+    override fun onSaveInstanceState(outState: Bundle) {
+        super.onSaveInstanceState(outState)
+        outState.putBoolean(IS_SCREEN_READER_VISIBLE_KEY, isScreenReaderVisible)
+        outState.putBoolean(IS_SEARCH_VIEW_ICONIFIED, isSearchViewIconified)
+    }
+// TODO: add search
+//    private fun connectSearch() {
+//        menuSearch.setOnActionExpandListener(object : MenuItem.OnActionExpandListener {
+//
+//            override fun onMenuItemActionExpand(item: MenuItem?): Boolean {
+//                if (isSearchViewIconified) { // It is not a state restoration.
+//                    showSearchFragment()
+//                }
+//
+//                isSearchViewIconified = false
+//                return true
+//            }
+//
+//            override fun onMenuItemActionCollapse(item: MenuItem?): Boolean {
+//                isSearchViewIconified = true
+//                childFragmentManager.popBackStack()
+//                menuSearchView.clearFocus()
+//
+//                return true
+//            }
+//        })
+//
+//        menuSearchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
+//
+//            override fun onQueryTextSubmit(query: String): Boolean {
+//                model.search(query)
+//                menuSearchView.clearFocus()
+//
+//                return false
+//            }
+//
+//            override fun onQueryTextChange(s: String): Boolean {
+//                return false
+//            }
+//        })
+//
+//        menuSearchView.findViewById<ImageView>(R.id.search_close_btn).setOnClickListener {
+//            menuSearchView.requestFocus()
+//            model.cancelSearch()
+//            menuSearchView.setQuery("", false)
+//
+//            (activity?.getSystemService(Context.INPUT_METHOD_SERVICE) as? InputMethodManager)?.showSoftInput(
+//                this.view, InputMethodManager.SHOW_FORCED
+//            )
+//        }
+//    }
+
+    override fun onOptionsItemSelected(item: MenuItem): Boolean {
+        if (super.onOptionsItemSelected(item)) {
+            return true
+        }
+
+       return when (item.itemId) {
+           R.id.settings -> {
+               /* TODO: this should be stripped out */
+               /* userSettings.userSettingsPopUp().showAsDropDown(requireActivity().findViewById(R.id.settings), 0, 0, Gravity.END) */
+               true
+           }
+           R.id.search -> {
+               super.onOptionsItemSelected(item)
+           }
+
+           android.R.id.home -> {
+               menuSearch.collapseActionView()
+               true
+           }
+
+//         TODO: tts
+//           R.id.screen_reader -> {
+//               if (isScreenReaderVisible) {
+//                   closeScreenReaderFragment()
+//               } else {
+//                   showScreenReaderFragment()
+//               }
+//               true
+//           }
+            else -> false
+        }
+    }
+
+    override fun onTap(point: PointF): Boolean {
+        requireActivity().toggleSystemUi()
+        return true
+    }
+// TODO: search
+//    private fun showSearchFragment() {
+//        childFragmentManager.commit {
+//            childFragmentManager.findFragmentByTag(SEARCH_FRAGMENT_TAG)?.let { remove(it) }
+//            add(R.id.fragment_reader_container, SearchFragment::class.java, Bundle(), SEARCH_FRAGMENT_TAG)
+//            hide(navigatorFragment)
+//            addToBackStack(SEARCH_FRAGMENT_TAG)
+//        }
+//    }
+
+//  TODO: tts
+//    private fun showScreenReaderFragment() {
+//        menuScreenReader.title = resources.getString(R.string.epubactivity_read_aloud_stop)
+//        isScreenReaderVisible = true
+//        val arguments = ScreenReaderContract.createArguments(navigator.currentLocator.value)
+//        childFragmentManager.commit {
+//            add(R.id.fragment_reader_container, ScreenReaderFragment::class.java, arguments)
+//            hide(navigatorFragment)
+//            addToBackStack(null)
+//        }
+//    }
+//
+//    private fun closeScreenReaderFragment() {
+//        menuScreenReader.title = resources.getString(R.string.epubactivity_read_aloud_start)
+//        isScreenReaderVisible = false
+//        childFragmentManager.popBackStack()
+//    }
+
+    companion object {
+
+        private const val BASE_URL_ARG = "baseUrl"
+
+        private const val SEARCH_FRAGMENT_TAG = "search"
+
+        private const val IS_SCREEN_READER_VISIBLE_KEY = "isScreenReaderVisible"
+
+        private const val IS_SEARCH_VIEW_ICONIFIED = "isSearchViewIconified"
+
+        fun newInstance(baseUrl: URL): EpubReaderFragment {
+            return EpubReaderFragment().apply {
+                arguments = Bundle().apply {
+                    putString(BASE_URL_ARG, baseUrl.toString())
+                }
+            }
+        }
+    }
+}
+
+/* TODO: remove */
+// /**
+//  * Example of an HTML template for a custom Decoration Style.
+//  *
+//  * This one will display a tinted "pen" icon in the page margin to show that a highlight has an
+//  * associated note.
+//  */
+// @OptIn(ExperimentalDecorator::class)
+// private fun annotationMarkTemplate(context: Context, @ColorInt defaultTint: Int = Color.YELLOW): HtmlDecorationTemplate {
+//     // Converts the pen icon to a base 64 data URL, to be embedded in the decoration stylesheet.
+//     // Alternatively, serve the image with the local HTTP server and use its URL.
+//     val imageUrl = ContextCompat.getDrawable(context, R.drawable.ic_baseline_edit_24)
+//         ?.toBitmap()?.toDataUrl()
+//     requireNotNull(imageUrl)
+//
+//     val className = "testapp-annotation-mark"
+//     return HtmlDecorationTemplate(
+//         layout = HtmlDecorationTemplate.Layout.BOUNDS,
+//         width = HtmlDecorationTemplate.Width.PAGE,
+//         element = { decoration ->
+//             val style = decoration.style as? DecorationStyleAnnotationMark
+//             val tint = style?.tint ?: defaultTint
+//             // Using `data-activable=1` prevents the whole decoration container from being
+//             // clickable. Only the icon will respond to activation events.
+//             """
+//             <div><div data-activable="1" class="$className" style="background-color: ${tint.toCss()} !important"/></div>"
+//             """
+//         },
+//         stylesheet = """
+//             .$className {
+//                 float: left;
+//                 margin-left: 8px;
+//                 width: 30px;
+//                 height: 30px;
+//                 border-radius: 50%;
+//                 background: url('$imageUrl') no-repeat center;
+//                 background-size: auto 50%;
+//                 opacity: 0.8;
+//             }
+//             """
+//     )
+// }