rich textarea

リッチテキストアレア

カスタマイズ可能な小さなテキストアレアは、テキストを色付けし、ハイライトし、テキストを飾り、オートコンプリートなどを提供します。

注記

https://github.com/inokawa/edixも好きです

デモ

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

特徴

• 様式可能なテキスト：同様のライブラリのようなテキストを強調するだけでなく、このライブラリは色付け、装飾などもサポートしています。正規表現またはトークンザーを使用できます。
• イベントとのやり取りが簡単：ケアレットの位置を取得し、テキストでマウスイベントをキャッチできます。これは、ユーザーアクションを反映するものを表示するのに役立ちます。
• Textareaと互換性がある：追加された機能を除いて、このライブラリは、可能な限りネイティブのTextareaとして動作するように設計されています。正しく機能していない場合は、問題またはPRで報告してください。
• ボックスから統合：制御されたものと制御されていないものの両方として機能します。 Formik、React-Hook-Form、 @Tanstack/React-Formなどをサポートしています。 SSRをサポートします。 next.jsのサーバーアクションとリミックスのアクションを使用してフォームをサポートします。
• IME組成の取り扱い： IME関連のイベントには、いくつかのクロスブラウザの問題があります。このライブラリは、使いやすいようにそれらを処理します。
• 軽量：多くのユーザーケースをサポートしようとしていますが、バンドルサイズを小さく保ちます。現在〜3kb（Gzipt）。

モチベーション

Webでカスタマイズされたテキストエディターが必要な場合があります。ただし、RAW満足できるものでそれを作成することは、適切に行うのが非常に難しく、エディターフレームワークは通常重すぎます...多分あなたは本当に必要なテキストアレアとホバリングされたメニューですが、ネイティブのテキストレアとテキストレアライブラリの多くは、カスタマイズが限られているため、それとはほど遠いものです。このライブラリは、問題を解決することを目指しています。

インストール

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

正規表現ヘルパー

独自のレンダリング関数を作成したくない場合は、ヘルパーに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 >
  ) ;
} ;

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. PRを作成し、合格したすべてのCIチェックを確認します。