Unduh rich textarea - Unduh Kode Sumber rich textarea

rich textarea

Sumber daya lainnya

0.26.4

Unduh

Rich-Textarea

Textarea kecil yang dapat disesuaikan untuk bereaksi terhadap mewarnai, menyorot, menghias teks, menawarkan pelengkapan otomatis dan banyak lagi.

Catatan

Anda mungkin juga menyukai https://github.com/inokawa/edix

Demo

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

Fitur

Teks yang dapat ditata: Tidak hanya menyoroti teks seperti perpustakaan serupa, perpustakaan ini juga mendukung mewarnai, dekorasi, dan banyak lagi. Regex atau tokenizer apa pun dapat digunakan.
Mudah berinteraksi dengan acara: Anda bisa mendapatkan posisi caret dan dapat menangkap beberapa acara mouse pada teks, yang berguna untuk menampilkan sesuatu yang mencerminkan tindakan pengguna.
Kompatibel dengan TextArea: Kecuali fitur yang ditambahkan, perpustakaan ini dirancang untuk berperilaku sebagai TextArea asli sebanyak mungkin. Jika tidak bekerja dengan baik, silakan laporkan dalam masalah atau PR.
Di luar integrasi kotak: berfungsi sebagai terkontrol dan tidak terkendali. Mendukung formik, react-hook-form, @tanstack/react-form dan banyak lagi. Mendukung SSR. Mendukung formulir dengan tindakan server di next.js dan tindakan di remix.
Penanganan komposisi IME: Acara terkait IME memiliki beberapa masalah browser lintas. Perpustakaan ini menanganinya agar mudah digunakan.
Ringan: Mencoba mendukung banyak usecases tetapi juga menjaga ukuran bundel kecil. Saat ini ~ 3KB (Gzipped).

Motivasi

Terkadang kita membutuhkan editor teks yang disesuaikan di web. Namun membuatnya dengan konten yang dapat diedit sangat sulit dilakukan dengan benar dan kerangka kerja editor biasanya terlalu berat ... mungkin Anda benar -benar membutuhkan hanyalah sebuah tekstaria dengan menyorot dan beberapa menu yang melayang, tetapi Textarea asli dan banyak perpustakaan TextArea jauh dari itu karena kemampuan penyesuaian yang terbatas. Perpustakaan ini bertujuan untuk menyelesaikan masalah.

Memasang

npm install rich-textarea

Persyaratan

Bereaksi> = 16.14

Jika Anda menggunakan ESM dan Webpack 5, gunakan React> = 18 untuk menghindari tidak dapat menyelesaikan kesalahan react/jsx-runtime .

Penggunaan

Dikendalikan

 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 >
  ) ;
} ;

Tidak terkendali

 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 >
  ) ;
} ;

Pembantu Regex

Anda dapat menggunakan helper untuk regex jika Anda tidak ingin membuat fungsi render Anda sendiri.

 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 >
  ) ;
} ;

Tindakan server selanjutnya.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 >
  ) ;
} ;

Remix Action

 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 >
  ) ;
} ;