ReactQuillで独自の変数を使えるようにしてみる【TypeScript】

まずは、Quillで入力できるようにフォームを作成していきます。
ちなみに、react-hook-formライブラリを使用してフォームを制御してます。

QuillForm.tsx

import { saveQuill } from 'quill_form'
import { Controller, useForm } from 'react-hook-form'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { Button, Form, FormGroup } from 'reactstrap'

type TQuillForm = {
  quill: string
}

const QuillForm: React.FC = () => {
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<TQuillForm>({
    defaultValues: { quill: '' },
  })

  const output = (data: TQuillForm) => outputQuill(data)
  
  return (
    <Form role="form" onSubmit={handleSubmit(output)}>
      <h4>変数みたいに入力できる入力欄</h4>
      <div>下記のように二重波括弧で特定の文字列を囲むと、出力時に変換されます。</div>
      <div>{`{{site_name}}：サイト名`}</div>
      <div>{`{{login_url}}：ログインURL`}</div>
      <FormGroup className="mb-5">
        <Controller
          name="quill"
          control={control}
          render={({ field }) => (
	    <ReactQuill field={field} />
  	)}
        />
      </FormGroup>
      <div className="text-center">
        <Button color="primary" type="submit">
          保存
        </Button>
      </div>
    </Form>
  )
}

保存ボタン押下時に、独自の変数に変換していく処理を作成していきます。

quill_form.ts

type TQuillForm = {
  quill: string
}

/**
 * Quillに入力した結果をコンソールに出力する
 * @param data `TQuillForm`
 */
export const outputQuill = (data: TQuillForm): void => {
  let quillData = ''
  const loginUrl = `${window.location.origin}/login`
  const variables: any = {
    site_name: 'hogehoge',
    login_url: `<a href="${loginUrl}">${loginUrl}</a>`,
  }
  const contents: string[] = data.quill.split(/\{{|}}/)
  let i = 1
  
  for (const content of contents) {
    if (i % 2 === 0) {
      quillData += variables[content]
    } else {
      quillData += content
    }
    i += 1
  }
  
  console.log(quillData)
}

ここまで処理を書いてきましたが、splitで二重波括弧ごとに区切って処理してますので、
入力欄に二重波括弧をミスって入力すると変に動作する可能性があります・・・

もっといい方法あったら知りたいです😆