RichTextEditor — konten HTML

Komponen RichTextEditor dari NexaJS menyediakan pengeditan teks kaya dengan toolbar (format, perataan, daftar, heading, undo/redo). Konten disimpan sebagai HTML; metode pada ref getContentHtml() mengambil string untuk dikirim ke server atau disimpan lokal.

Alur penggunaan di aplikasi

Pendaftaran route — "RichTextEditor" di MenuComponents (judul: "Rich Text Editor").
Navigasi — navigation.navigate("RichTextEditor"). MenuComponents.
Render — SafeAreaView + ScrollView; editor dengan ref; tombol Buttons untuk ambil HTML, simpan, pratinjau, dan bersihkan.

Cuplikan cepat

Ref + getContentHtml

import { useRef, useState } from "react";
import { RichTextEditor, Buttons } from "NexaJS";

export default function Screen() {
  const ref = useRef(null);
  const [html, setHtml] = useState("");

  return (
    <>
      <RichTextEditor
        ref={ref}
        value="<p>Halo</p>"
        placeholder="Tulis di sini..."
        onChangeText={(t) => console.log("changed", t)}
      />
      <Buttons
        label="Ambil HTML"
        onPress={() => setHtml(ref.current?.getContentHtml() || "")}
        background="#007bff"
        txColor="#FFF"
        border={8}
        vertical={6}
      />
    </>
  );
}

Properti pada demo

ref — akses imperatif ke getContentHtml().
value — HTML awal.
placeholder, onChangeText.

Impor campuran

Primitif layout dari react-native (SafeAreaView, ScrollView, dll.); tipografi dan warna dari NexaJS (FontFamily, Colors, fs, Buttons).

Praktik yang disarankan

Sanitasi HTML di server sebelum menyimpan atau merender di web.
Untuk “clear”, panggil API komponen jika tersedia; demo memakai Alert konfirmasi + state lokal.