rich textarea

Rich-Textarea

一个小的可自定义文本方面的反应，以使其着色，突出显示，装饰文本，提供自动完成等等。

笔记

您也可能喜欢https://github.com/inokawa/edix

演示

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

特征

• 可观的文本：不仅突出显示类似库之类的文本，此库还支持着色，装饰等。可以使用正则或任何令牌。
• 易于与事件进行互动：您可以获得CARET位置，并且可以在文本上捕获一些鼠标事件，这些事件可用于显示某些内容反映用户操作。
• 与Textarea兼容：除了添加的功能外，该库的设计旨在尽可能地表现出本地文本方面的行为。如果无法正常工作，请在问题或公关中报告。
• 开箱即用的集成：作为受控和不受控制的工作。支持Formik，React-Hook-Form， @Tanstack/React-Form等。支持SSR。在Next.js中使用服务器操作和混音中的操作支持表单。
• IME组成处理：与IME相关的事件存在一些交叉浏览器问题。该库处理它们以易于使用。
• 轻量级：试图支持许多用户酶，但也要使捆绑尺寸较小。目前〜3KB（GZBIPPPECT）。

动机

有时我们需要Web中的自定义文本编辑器。但是，用原始的满足来创建它是如此的正确做到，并且编辑框架通常太重了……也许您真的需要一个文本方面，带有突出显示和一些盘旋的菜单，但是本机Textarea和许多Textarea库远非如此，因为有限的自定义性。该库的目的是解决问题。

安装

npm install rich-textarea

要求

• React> = 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 >
  ) ;
} ;

正则助手

如果您不想创建自己的渲染功能，则可以将助手用于正则。

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

Next.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. 叉这个存储库。
2. 运行npm install 。
3. 提交您的修复。
4. 制作公关并确认通过的所有CI检查。