@chaitrabhairappa/react-native-rich-text-editor 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Chaitra Bhairappa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,220 @@
+# react-native-richtext-editor
+
+A powerful native rich text editor for React Native with support for text formatting, lists, and more. Works on both iOS and Android.
+
+## Features
+
+- Bold, Italic, Underline, Strikethrough
+- Code and Highlight formatting
+- Bullet lists and Numbered lists
+- Headings
+- Quotes and Checklists
+- Link insertion
+- Undo/Redo
+- Text alignment (left, center, right)
+- Indent/Outdent
+- Floating toolbar with customizable options
+- Two variants: outlined and flat
+- Auto-growing height
+
+## Installation
+
+```bash
+npm install react-native-richtext-editor
+# or
+yarn add react-native-richtext-editor
+```
+
+### iOS
+
+```bash
+cd ios && pod install
+```
+
+### Android
+
+No additional setup required.
+
+## Usage
+
+```tsx
+import React, { useRef } from 'react';
+import { View } from 'react-native';
+import RichTextEditor, {
+  RichTextEditorRef,
+  Block,
+  ContentChangeEvent
+} from 'react-native-richtext-editor';
+
+const App = () => {
+  const editorRef = useRef<RichTextEditorRef>(null);
+
+  const handleContentChange = (event: ContentChangeEvent) => {
+    console.log('Content changed:', event.nativeEvent.blocks);
+  };
+
+  const initialContent: Block[] = [
+    {
+      type: 'paragraph',
+      text: 'Hello World',
+      styles: [{ style: 'bold', start: 0, end: 5 }],
+    },
+    {
+      type: 'bullet',
+      text: 'First item',
+      styles: [],
+    },
+    {
+      type: 'bullet',
+      text: 'Second item',
+      styles: [{ style: 'italic', start: 0, end: 6 }],
+    },
+  ];
+
+  return (
+    <View style={{ flex: 1, padding: 16 }}>
+      <RichTextEditor
+        ref={editorRef}
+        placeholder="Enter text..."
+        initialContent={initialContent}
+        onContentChange={handleContentChange}
+        maxHeight={300}
+        variant="outlined"
+      />
+    </View>
+  );
+};
+
+export default App;
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `placeholder` | `string` | `""` | Placeholder text |
+| `initialContent` | `Block[]` | `[]` | Initial content blocks |
+| `readOnly` | `boolean` | `false` | Make editor read-only |
+| `maxHeight` | `number` | `undefined` | Maximum height before scrolling |
+| `showToolbar` | `boolean` | `true` | Show/hide floating toolbar |
+| `toolbarOptions` | `ToolbarOption[]` | All options | Customize toolbar buttons |
+| `variant` | `'outlined' \| 'flat'` | `'outlined'` | Editor style variant |
+| `onContentChange` | `(event: ContentChangeEvent) => void` | `undefined` | Called when content changes |
+| `onSelectionChange` | `(event: SelectionChangeEvent) => void` | `undefined` | Called when selection changes |
+| `onFocus` | `() => void` | `undefined` | Called when editor gains focus |
+| `onBlur` | `() => void` | `undefined` | Called when editor loses focus |
+
+## Ref Methods
+
+```tsx
+const editorRef = useRef<RichTextEditorRef>(null);
+
+// Content management
+editorRef.current?.setContent(blocks);
+editorRef.current?.clear();
+const text = await editorRef.current?.getText();
+const blocks = await editorRef.current?.getBlocks();
+
+// Focus management
+editorRef.current?.focus();
+editorRef.current?.blur();
+
+// Text styles
+editorRef.current?.toggleBold();
+editorRef.current?.toggleItalic();
+editorRef.current?.toggleUnderline();
+editorRef.current?.toggleStrikethrough();
+editorRef.current?.toggleCode();
+editorRef.current?.toggleHighlight();
+
+// Block types
+editorRef.current?.setHeading();
+editorRef.current?.setBulletList();
+editorRef.current?.setNumberedList();
+editorRef.current?.setQuote();
+editorRef.current?.setChecklist();
+editorRef.current?.setParagraph();
+
+// Actions
+editorRef.current?.insertLink(url, text);
+editorRef.current?.undo();
+editorRef.current?.redo();
+editorRef.current?.clearFormatting();
+
+// Indentation
+editorRef.current?.indent();
+editorRef.current?.outdent();
+
+// Alignment
+editorRef.current?.setAlignment('left' | 'center' | 'right');
+```
+
+## Types
+
+```typescript
+interface Block {
+  type: BlockType;
+  text: string;
+  styles: StyleRange[];
+  alignment?: TextAlignment;
+  checked?: boolean;
+  indentLevel?: number;
+}
+
+type BlockType = 'paragraph' | 'bullet' | 'numbered' | 'heading' | 'quote' | 'checklist';
+type TextAlignment = 'left' | 'center' | 'right';
+
+interface StyleRange {
+  style: 'bold' | 'italic' | 'underline' | 'strikethrough' | 'link' | 'code' | 'highlight';
+  start: number;
+  end: number;
+  url?: string;
+  highlightColor?: string;
+}
+
+type ToolbarOption =
+  | 'bold' | 'italic' | 'strikethrough' | 'underline' | 'code' | 'highlight'
+  | 'heading' | 'bullet' | 'numbered' | 'quote' | 'checklist'
+  | 'link' | 'undo' | 'redo' | 'clearFormatting'
+  | 'indent' | 'outdent'
+  | 'alignLeft' | 'alignCenter' | 'alignRight';
+```
+
+## Customizing Toolbar
+
+```tsx
+import RichTextEditor, { ToolbarOption } from 'react-native-richtext-editor';
+
+const toolbarOptions: ToolbarOption[] = [
+  'bold',
+  'italic',
+  'underline',
+  'bullet',
+  'numbered',
+];
+
+<RichTextEditor
+  toolbarOptions={toolbarOptions}
+  // ...
+/>
+```
+
+## Android Setup
+
+Add the package to your `MainApplication.java` or `MainApplication.kt`:
+
+```java
+// MainApplication.java
+import com.richtext.editor.RichTextEditorPackage;
+
+@Override
+protected List<ReactPackage> getPackages() {
+    List<ReactPackage> packages = new PackageList(this).getPackages();
+    packages.add(new RichTextEditorPackage());
+    return packages;
+}
+```
+
+## License
+
+MIT

package/android/build.gradle

@@ -0,0 +1,61 @@
+buildscript {
+    ext.safeExtGet = {prop, fallback ->
+        rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath("com.android.tools.build:gradle:7.4.2")
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${safeExtGet('kotlinVersion', '1.8.0')}")
+    }
+}
+
+def isNewArchitectureEnabled() {
+    return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+android {
+    namespace "com.richtext.editor"
+    compileSdkVersion safeExtGet('compileSdkVersion', 34)
+
+    defaultConfig {
+        minSdkVersion safeExtGet('minSdkVersion', 21)
+        targetSdkVersion safeExtGet('targetSdkVersion', 34)
+    }
+
+    buildTypes {
+        release {
+            minifyEnabled false
+        }
+    }
+
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
+    }
+
+    kotlinOptions {
+        jvmTarget = '17'
+    }
+
+    sourceSets {
+        main {
+            java.srcDirs = ['src/main/java']
+        }
+    }
+}
+
+repositories {
+    google()
+    mavenCentral()
+}
+
+dependencies {
+    implementation "com.facebook.react:react-native:+"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:${safeExtGet('kotlinVersion', '1.8.0')}"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.richtext.editor">
+</manifest>

package/android/src/main/java/com/richtext/editor/FloatingToolbar.kt

@@ -0,0 +1,350 @@
+package com.richtext.editor
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.drawable.GradientDrawable
+import android.view.Gravity
+import android.view.View
+import android.view.ViewGroup
+import android.widget.HorizontalScrollView
+import android.widget.LinearLayout
+import android.widget.TextView
+import android.graphics.Typeface
+import android.text.SpannableString
+import android.text.Spanned
+import android.text.style.StrikethroughSpan
+import android.text.style.UnderlineSpan
+import android.text.style.BackgroundColorSpan
+
+class FloatingToolbar(context: Context) : LinearLayout(context) {
+
+    interface ToolbarActionListener {
+        fun onBoldClick()
+        fun onItalicClick()
+        fun onUnderlineClick()
+        fun onStrikethroughClick()
+        fun onCodeClick()
+        fun onHighlightClick()
+        fun onHeadingClick()
+        fun onBulletListClick()
+        fun onNumberedListClick()
+        fun onQuoteClick()
+        fun onChecklistClick()
+        fun onLinkClick()
+        fun onUndoClick()
+        fun onRedoClick()
+        fun onClearFormattingClick()
+        fun onIndentClick()
+        fun onOutdentClick()
+        fun onAlignLeftClick()
+        fun onAlignCenterClick()
+        fun onAlignRightClick()
+    }
+
+    var listener: ToolbarActionListener? = null
+
+    private val density = context.resources.displayMetrics.density
+    private val buttonSize = (36 * density).toInt()
+    private val toolbarHeight = (52 * density).toInt()
+    private val buttonSpacing = (8 * density).toInt()
+
+    private val toolbarBackgroundColor = Color.parseColor("#2D2D2D")
+    private val activeColor = Color.parseColor("#5082C8")
+    private val inactiveColor = Color.WHITE
+
+    private val buttons = mutableMapOf<String, TextView>()
+    private val buttonContainer: LinearLayout
+    private val scrollView: HorizontalScrollView
+
+    private var enabledOptions: List<String> = listOf(
+        "bold", "italic", "underline", "strikethrough", "code", "highlight",
+        "heading", "bullet", "numbered", "quote", "checklist",
+        "link", "undo", "redo", "clearFormatting",
+        "indent", "outdent",
+        "alignLeft", "alignCenter", "alignRight"
+    )
+
+    init {
+        orientation = HORIZONTAL
+        gravity = Gravity.CENTER_VERTICAL
+        setPadding((8 * density).toInt(), (8 * density).toInt(), (8 * density).toInt(), (8 * density).toInt())
+
+        // Set background with rounded corners and shadow
+        val bg = GradientDrawable().apply {
+            setColor(toolbarBackgroundColor)
+            cornerRadius = 10 * density
+        }
+        background = bg
+        elevation = 6 * density
+
+        // Left arrow
+        val leftArrow = createArrowButton("‹").apply {
+            setOnClickListener { scrollLeft() }
+        }
+        addView(leftArrow)
+
+        // Scroll view for buttons
+        scrollView = HorizontalScrollView(context).apply {
+            isHorizontalScrollBarEnabled = false
+            layoutParams = LayoutParams(0, ViewGroup.LayoutParams.MATCH_PARENT, 1f)
+        }
+
+        buttonContainer = LinearLayout(context).apply {
+            orientation = HORIZONTAL
+            gravity = Gravity.CENTER_VERTICAL
+        }
+
+        scrollView.addView(buttonContainer)
+        addView(scrollView)
+
+        // Right arrow
+        val rightArrow = createArrowButton("›").apply {
+            setOnClickListener { scrollRight() }
+        }
+        addView(rightArrow)
+
+        buildButtons()
+    }
+
+    private fun createArrowButton(text: String): TextView {
+        return TextView(context).apply {
+            this.text = text
+            textSize = 24f
+            setTextColor(Color.parseColor("#FFFFFF"))
+            gravity = Gravity.CENTER
+            isClickable = true
+            isFocusable = true
+            val params = LayoutParams((32 * density).toInt(), ViewGroup.LayoutParams.MATCH_PARENT)
+            layoutParams = params
+            // Add touch feedback
+            val bg = GradientDrawable().apply {
+                cornerRadius = 4 * density
+                setColor(Color.TRANSPARENT)
+            }
+            background = bg
+        }
+    }
+
+    private fun scrollLeft() {
+        val scrollAmount = (150 * density).toInt()
+        scrollView.smoothScrollBy(-scrollAmount, 0)
+    }
+
+    private fun scrollRight() {
+        val scrollAmount = (150 * density).toInt()
+        scrollView.smoothScrollBy(scrollAmount, 0)
+    }
+
+    fun setToolbarOptions(options: List<String>?) {
+        enabledOptions = options ?: listOf(
+            "bold", "italic", "underline", "strikethrough", "code", "highlight",
+            "heading", "bullet", "numbered", "quote", "checklist",
+            "link", "undo", "redo", "clearFormatting",
+            "indent", "outdent",
+            "alignLeft", "alignCenter", "alignRight"
+        )
+        buildButtons()
+    }
+
+    private fun buildButtons() {
+        buttonContainer.removeAllViews()
+        buttons.clear()
+
+        for (option in enabledOptions) {
+            val button = createButton(option)
+            if (button != null) {
+                buttons[option] = button
+                buttonContainer.addView(button)
+            }
+        }
+    }
+
+    private fun createButton(option: String): TextView? {
+        val button = TextView(context).apply {
+            gravity = Gravity.CENTER
+            setTextColor(inactiveColor)
+
+            val bg = GradientDrawable().apply {
+                cornerRadius = 6 * density
+                setColor(Color.TRANSPARENT)
+            }
+            background = bg
+
+            val params = LayoutParams(buttonSize, buttonSize)
+            params.marginEnd = buttonSpacing
+            layoutParams = params
+        }
+
+        when (option) {
+            "bold" -> {
+                button.text = "B"
+                button.textSize = 18f
+                button.setTypeface(null, Typeface.BOLD)
+                button.setOnClickListener { listener?.onBoldClick() }
+            }
+            "italic" -> {
+                button.text = "I"
+                button.textSize = 18f
+                button.setTypeface(null, Typeface.ITALIC)
+                button.setOnClickListener { listener?.onItalicClick() }
+            }
+            "underline" -> {
+                val spannable = SpannableString("U")
+                spannable.setSpan(UnderlineSpan(), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+                button.text = spannable
+                button.textSize = 18f
+                button.setOnClickListener { listener?.onUnderlineClick() }
+            }
+            "strikethrough" -> {
+                val spannable = SpannableString("S")
+                spannable.setSpan(StrikethroughSpan(), 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+                button.text = spannable
+                button.textSize = 18f
+                button.setOnClickListener { listener?.onStrikethroughClick() }
+            }
+            "code" -> {
+                button.text = "</>"
+                button.textSize = 12f
+                button.setTypeface(Typeface.MONOSPACE, Typeface.NORMAL)
+                button.setOnClickListener { listener?.onCodeClick() }
+            }
+            "highlight" -> {
+                // Use marker/highlighter icon representation
+                button.text = "✎"
+                button.textSize = 18f
+                button.setOnClickListener { listener?.onHighlightClick() }
+            }
+            "heading" -> {
+                button.text = "H1"
+                button.textSize = 14f
+                button.setTypeface(null, Typeface.BOLD)
+                button.setOnClickListener { listener?.onHeadingClick() }
+            }
+            "bullet" -> {
+                button.text = "•≡"
+                button.textSize = 14f
+                button.setOnClickListener { listener?.onBulletListClick() }
+            }
+            "numbered" -> {
+                button.text = "1."
+                button.textSize = 14f
+                button.setOnClickListener { listener?.onNumberedListClick() }
+            }
+            "quote" -> {
+                button.text = "❞"
+                button.textSize = 18f
+                button.setOnClickListener { listener?.onQuoteClick() }
+            }
+            "checklist" -> {
+                button.text = "☑"
+                button.textSize = 18f
+                button.setOnClickListener { listener?.onChecklistClick() }
+            }
+            "link" -> {
+                button.text = "🔗"
+                button.textSize = 14f
+                button.setOnClickListener { listener?.onLinkClick() }
+            }
+            "undo" -> {
+                button.text = "↩"
+                button.textSize = 18f
+                button.setOnClickListener { listener?.onUndoClick() }
+            }
+            "redo" -> {
+                button.text = "↪"
+                button.textSize = 18f
+                button.setOnClickListener { listener?.onRedoClick() }
+            }
+            "clearFormatting" -> {
+                val spannable = SpannableString("Tx")
+                spannable.setSpan(StrikethroughSpan(), 0, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
+                button.text = spannable
+                button.textSize = 14f
+                button.setOnClickListener { listener?.onClearFormattingClick() }
+            }
+            "indent" -> {
+                button.text = "→⊢"
+                button.textSize = 12f
+                button.setOnClickListener { listener?.onIndentClick() }
+            }
+            "outdent" -> {
+                button.text = "⊣←"
+                button.textSize = 12f
+                button.setOnClickListener { listener?.onOutdentClick() }
+            }
+            "alignLeft" -> {
+                button.text = "≡"
+                button.textSize = 18f
+                button.gravity = Gravity.START or Gravity.CENTER_VERTICAL
+                button.setOnClickListener { listener?.onAlignLeftClick() }
+            }
+            "alignCenter" -> {
+                button.text = "≡"
+                button.textSize = 18f
+                button.gravity = Gravity.CENTER
+                button.setOnClickListener { listener?.onAlignCenterClick() }
+            }
+            "alignRight" -> {
+                button.text = "≡"
+                button.textSize = 18f
+                button.gravity = Gravity.END or Gravity.CENTER_VERTICAL
+                button.setOnClickListener { listener?.onAlignRightClick() }
+            }
+            else -> return null
+        }
+
+        return button
+    }
+
+    fun updateButtonStates(
+        bold: Boolean = false,
+        italic: Boolean = false,
+        underline: Boolean = false,
+        strikethrough: Boolean = false,
+        code: Boolean = false,
+        highlight: Boolean = false,
+        heading: Boolean = false,
+        bullet: Boolean = false,
+        numbered: Boolean = false,
+        quote: Boolean = false,
+        checklist: Boolean = false,
+        alignLeft: Boolean = true,
+        alignCenter: Boolean = false,
+        alignRight: Boolean = false
+    ) {
+        val states = mapOf(
+            "bold" to bold,
+            "italic" to italic,
+            "underline" to underline,
+            "strikethrough" to strikethrough,
+            "code" to code,
+            "highlight" to highlight,
+            "heading" to heading,
+            "bullet" to bullet,
+            "numbered" to numbered,
+            "quote" to quote,
+            "checklist" to checklist,
+            "alignLeft" to alignLeft,
+            "alignCenter" to alignCenter,
+            "alignRight" to alignRight
+        )
+
+        for ((option, button) in buttons) {
+            val isActive = states[option] ?: false
+            button.setTextColor(if (isActive) activeColor else inactiveColor)
+            (button.background as? GradientDrawable)?.setColor(
+                if (isActive) Color.parseColor("#40FFFFFF") else Color.TRANSPARENT
+            )
+        }
+    }
+
+    fun getToolbarWidth(): Int {
+        val screenWidth = context.resources.displayMetrics.widthPixels
+        val maxWidth = (screenWidth * 0.9).toInt()
+        val buttonCount = enabledOptions.size
+        val calculatedWidth = (buttonCount * buttonSize) + ((buttonCount - 1) * buttonSpacing) + (56 * density).toInt()
+        return minOf(calculatedWidth, maxWidth)
+    }
+
+    fun getToolbarHeight(): Int = toolbarHeight
+}

package/android/src/main/java/com/richtext/editor/RichTextEditorPackage.kt

@@ -0,0 +1,16 @@
+package com.richtext.editor
+
+import com.facebook.react.ReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.uimanager.ViewManager
+
+class RichTextEditorPackage : ReactPackage {
+    override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
+        return emptyList()
+    }
+
+    override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+        return listOf(RichTextEditorViewManager())
+    }
+}