rich textarea

풍부한 텍스트

텍스트를 채색하고, 강조하고, 장식하고, 자동 완성 등을 제공하기위한 작은 맞춤형 텍스트 주레아.

메모

https://github.com/inokawa/edix를 좋아할 수도 있습니다

데모

https://inokawa.github.io/rich-textarea/

특징

• 스타일 텍스트 : 비슷한 라이브러리와 같은 텍스트를 강조 할뿐만 아니라이 라이브러리는 채색, 장식 등을 지원합니다. Regex 또는 모든 토큰 화제를 사용할 수 있습니다.
• 이벤트와 쉽게 상호 작용할 수 있습니다. 캐럿 위치를 얻을 수 있으며 텍스트에서 일부 마우스 이벤트를 포착 할 수 있으며, 이는 사용자 작업을 반영하는 데 유용합니다.
• TextRea와 호환 : 추가 기능을 제외 하고이 라이브러리는 가능한 한 원주민 TextRea로 작동하도록 설계되었습니다. 제대로 작동하지 않으면 문제 또는 PR 에보 고하십시오.
• 상자 통합 : 제어 및 통제되지 않은 상태로 작동합니다. formik, react-hook-form, @tanstack/react-form 등을 지원합니다. SSR을 지원합니다. Next.js의 서버 작업 및 Remix의 동작으로 양식을 지원합니다.
• IME 구성 처리 : IME 관련 이벤트에는 크로스 브라우저 문제가 있습니다. 이 라이브러리는 사용하기 쉽도록 처리합니다.
• 경량 : 많은 usecases를 지원하려고 노력하지만 번들 크기를 작게 유지합니다. 현재 ~ 3KB (Gzipped).

동기 부여

때로는 웹에서 맞춤형 텍스트 편집기가 필요합니다. 그러나 원시 만족 조정 가능성으로 만들기가 너무 어렵고 편집기 프레임 워크는 일반적으로 너무 무거워 ... 어쩌면 당신은 정말로 필요할 수도 있습니다. 아마도 당신은 정말로 필요할 것입니다. 강조 표시와 일부 메뉴가있는 텍스토리 일뿐입니다. 이 라이브러리는 문제를 해결하는 것을 목표로합니다.

설치하다

npm install rich-textarea

요구 사항

• 반응> = 16.14

ESM과 Webpack 5를 사용하는 경우 React> = 18을 사용하여 react/jsx-runtime 오류를 해결할 수 없습니다.

용법

제어

 import { useState } from "react" ;
import { RichTextarea } from "rich-textarea" ;

export const App = ( ) => {
  const [ text , setText ] = useState ( "Lorem ipsum" ) ;

  return (
    < RichTextarea
      value = { text }
      style = { { width : "600px" , height : "400px" } }
      onChange = { ( e ) => setText ( e . target . value ) }
    >
      { ( v ) => {
        return v . split ( "" ) . map ( ( t , i ) => (
          < span key = { i } style = { { color : i % 2 === 0 ? "red" : undefined } } >
            { t }
          </ span >
        ) ) ;
      } }
    </ RichTextarea >
  ) ;
} ;

억제 되지 않은

 import { RichTextarea } from "rich-textarea" ;

export const App = ( ) => {
  return (
    < RichTextarea
      defaultValue = "Lorem ipsum"
      style = { { width : "600px" , height : "400px" } }
    >
      { ( v ) => {
        return v . split ( "" ) . map ( ( t , i ) => (
          < span key = { i } style = { { color : i % 2 === 0 ? "red" : undefined } } >
            { t }
          </ span >
        ) ) ;
      } }
    </ RichTextarea >
  ) ;
} ;

리그 헬퍼

자신만의 렌더링 함수를 만들고 싶지 않은 경우 Regex에 헬퍼를 사용할 수 있습니다.

 import { useState } from "react" ;
import { RichTextarea , createRegexRenderer } from "rich-textarea" ;

const renderer = createRegexRenderer ( [
  [ / [A-Z][a-z]+ / g , { borderRadius : "3px" , backgroundColor : "#d0bfff" } ] ,
] ) ;

export const App = ( ) => {
  const [ text , setText ] = useState ( "Lorem ipsum" ) ;

  return (
    < RichTextarea
      value = { text }
      style = { { width : "600px" , height : "400px" } }
      onChange = { ( e ) => setText ( e . target . value ) }
    >
      { renderer }
    </ RichTextarea >
  ) ;
} ;

다음 .js 서버 작업

 // _components/Textarea.tsx
"use client" ;
import { RichTextarea , RichTextareaProps } from "rich-textarea" ;

export const Textarea = (
  props : Omit < RichTextareaProps , "children" | "ref" >
) => {
  return (
    < RichTextarea { ... props } >
      { ( v ) => {
        return v . split ( "" ) . map ( ( t , i ) => (
          < span key = { i } style = { { color : i % 2 === 0 ? "red" : undefined } } >
            { t }
          </ span >
        ) ) ;
      } }
    </ RichTextarea >
  ) ;
} ;

// page.tsx in App Router of Next.js
import { Textarea } from "../_components/Textarea" ;

async function hello ( formData : FormData ) {
  "use server" ;
  console . log ( formData . get ( "hello" ) ) ;
}

export default ( ) => {
  return (
    < div >
      < div > this is server! </ div >
      < form action = { hello } >
        < Textarea defaultValue = "Lorem ipsum" name = "hello" />
        < button type = "submit" > submit </ button >
      </ form >
    </ div >
  ) ;
} ;

리믹스 액션

 import type { ActionFunction } from "@remix-run/node" ;
import { Form } from "@remix-run/react" ;
import { RichTextarea , RichTextareaProps } from "rich-textarea" ;

const Textarea = ( props : Omit < RichTextareaProps , "children" | "ref" > ) => {
  return (
    < RichTextarea { ... props } >
      { ( v ) => {
        return v . split ( "" ) . map ( ( t , i ) => (
          < span key = { i } style = { { color : i % 2 === 0 ? "red" : undefined } } >
            { t }
          </ span >
        ) ) ;
      } }
    </ RichTextarea >
  ) ;
} ;

export const action : ActionFunction = async ( { request } ) => {
  console . log ( ( await request . formData ( ) ) . get ( "hello" ) ) ;
} ;

export default ( ) => {
  return (
    < Form method = "post" >
      < Textarea defaultValue = "Lorem ipsum" name = "hello" />
      < button type = "submit" > submit </ button >
    </ Form >
  ) ;
} ; 

선적 서류 비치

• API 참조
• 더 많은 사용법에 대한 예

기여하다

모든 기부금을 환영합니다. 문제를 발견하면 문제 나 PR을 자유롭게 만들 수 있습니다.

풀 요청

1. 이 repo를 포크하십시오.
2. npm install 실행하십시오.
3. 수정 사항을 커밋하십시오.
4. PR을 만들고 통과 된 모든 CI 수표를 확인하십시오.