57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
|
import { CodeBracketSquareIcon } from '@heroicons/react/20/solid'
|
||
|
|
import MonacoEditor from '@monaco-editor/react'
|
||
|
|
import type { Dispatch, SetStateAction } from 'react'
|
||
|
|
import { Controller } from 'react-hook-form'
|
||
|
|
import { useRemixFormContext } from 'remix-hook-form'
|
||
|
|
|
||
|
|
import { EditorButton } from './editor-button'
|
||
|
|
|
||
|
|
type TProperties = {
|
||
|
|
name: string
|
||
|
|
disabled?: boolean
|
||
|
|
setIsPlainHTML: Dispatch<SetStateAction<boolean>>
|
||
|
|
}
|
||
|
|
|
||
|
|
// const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {
|
||
|
|
// ssr: false,
|
||
|
|
// })
|
||
|
|
|
||
|
|
export const EditorTextArea = (properties: TProperties) => {
|
||
|
|
const { setIsPlainHTML, name, disabled = false } = properties
|
||
|
|
|
||
|
|
const { control } = useRemixFormContext()
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="flex justify-end rounded-[5px_5px_0_0] border-x border-t border-[#D2D2D2] px-4 py-3">
|
||
|
|
<div className="flex gap-1 px-1">
|
||
|
|
<EditorButton
|
||
|
|
onClick={() => setIsPlainHTML(false)}
|
||
|
|
title="Switch to Rich Text"
|
||
|
|
isActive={true}
|
||
|
|
>
|
||
|
|
<CodeBracketSquareIcon />
|
||
|
|
</EditorButton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Controller
|
||
|
|
name={name}
|
||
|
|
control={control}
|
||
|
|
render={({ field }) => (
|
||
|
|
<MonacoEditor
|
||
|
|
language="html"
|
||
|
|
onChange={(newValue) => {
|
||
|
|
field.onChange(newValue)
|
||
|
|
}}
|
||
|
|
value={field.value}
|
||
|
|
options={{
|
||
|
|
readOnly: disabled,
|
||
|
|
wordWrap: 'on',
|
||
|
|
}}
|
||
|
|
className="mb-1 h-96 max-w-none overflow-y-auto rounded-[0_0_5px_5px] border border-[#D2D2D2] p-1"
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|