rich textarea Download - rich textarea Code source Télécharger

rich textarea

Autres ressources

0.26.4

Télécharger

Rich-Textarea

Un petit texte personnalisable pour réagir pour coloriser, mettre en évidence, décorer des textes, offrir une assortie sectionnelle et bien plus encore.

Note

Vous pouvez également aimer https://github.com/inokawa/edix

Démo

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

Caractéristiques

Textes styléables: non seulement en surlitant des textes comme des bibliothèques similaires, cette bibliothèque prend également en charge la colorisation, la décoration et plus encore. Regex ou tout tokenzers peuvent être utilisés.
Facile à interagir avec les événements: vous pouvez obtenir une position de caret et peut assister à certains événements de souris sur des textes, qui sont utiles pour afficher quelque chose reflète les actions des utilisateurs.
Compatible avec TextArea: sauf les fonctionnalités ajoutées, cette bibliothèque est conçue autant que possible en tant que TextArea native. Si cela ne fonctionne pas correctement, veuillez le signaler dans un numéro ou PR.
Intégration hors boîte: fonctionne à la fois comme contrôlé et incontrôlé. Prend en charge FormIK, React-Hook-Form, @ Tanstack / React-forme et plus encore. Prend en charge SSR. Prend en charge le formulaire avec les actions du serveur dans next.js et l'action dans Remix.
Manipulation de la composition IME: les événements liés à l'IME ont des problèmes de navigateur croisé. Cette bibliothèque les gère pour une utilisation facile à utiliser.
Léger: Essayer de prendre en charge de nombreuses ucécases, mais aussi garder la taille du bundle petite. Actuellement ~ 3 Ko (gzipip).

Motivation

Parfois, nous avons besoin d'un éditeur de texte personnalisé sur le Web. Cependant, la création avec un contenu brut est si difficile à faire correctement et les frameworks de l'éditeur sont généralement trop lourds ... peut-être que vous avez vraiment besoin d'être une textarea avec des menus en surbrillance et en survol, mais la textare native et de nombreuses bibliothèques de TextArea sont loin de cela en raison de la personnalisation limitée. Cette bibliothèque vise à résoudre le problème.

Installer

npm install rich-textarea

Exigences

react> = 16.14

Si vous utilisez ESM et WebPack 5, utilisez React> = 18 pour éviter de résoudre l'erreur react/jsx-runtime .

Usage

Contrôlé

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

Incontrôlé

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

Assistance Regex

Vous pouvez utiliser Helper pour Regex si vous ne souhaitez pas créer votre propre fonction de rendu.

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

Actions du serveur suivantes

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

Action de remix

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