EPUB 웹 브라우저 상 필터 예시

epubFilterExample.ts

export interface IFilterInput {
  container: JSZip
  data: ICollectedData
  option: IFilterOption
  state: IState
}

export interface IFilterOption {
  styleType: 'basic' | 'poem'
}

import { ICollectedFile } from './epub'

export const getAssetPath = (asset: ICollectedFile, overrideExt = '') => {
  // 변경될 경로를 구성합니다.
  const middlePath = asset.filePaths.join('/')
  const fullPath = `OEBPS/${middlePath}${middlePath.length !== 0 ? '/' : ''}${
    asset.fileName
  }.${overrideExt ? overrideExt : asset.fileExt}`
  return { fullPath, middlePath }
}

/**
 * HTML 파일들을 모두 XHTML 확장자로 바꿉니다.
 */
export const changeToXHTML = async ({ data, container }: IFilterInput) => {
  // 변경 전 후 링크를 구성합니다.
  const beforeLinks: string[] = []
  const afterLinks: string[] = []

  // HTML -> XHTML 파일 확장자 변환
  for (const asset of data.files) {
    if (asset.fileExt !== 'html') continue

    // 변경될 경로를 구성합니다.
    const { fullPath, middlePath } = getAssetPath(asset, 'xhtml')

    beforeLinks.push(`${asset.fileName}.html`)
    afterLinks.push(`${asset.fileName}.xhtml`)

    // 기존 파일을 삭제하고 새 경로의 파일을 추가합니다.
    const content = await asset.file.async('string')
    container.remove(asset.originName)
    container.file(fullPath, content)
  }

  // xhtml 파일내 명시된 변경된 기존 html 링크를 모두 수정합니다.
  const effectedFileExts = ['opf', 'xhtml']
  for (const asset of data.files) {
    if (!effectedFileExts.includes(asset.fileExt)) continue

    let isChanged = false
    let content = await asset.file.async('string')
    for (const linkIndex in beforeLinks) {
      const beforeLink = beforeLinks[linkIndex]
      const afterLink = afterLinks[linkIndex]
      if (!content.indexOf(beforeLink)) continue
      isChanged = true

      content = content.replaceAll(beforeLink, afterLink)
    }

    if (isChanged) {
      const { fullPath } = getAssetPath(asset)
      container.remove(asset.originName)
      container.file(fullPath, content)
    }
  }
}