Nabil's WYSIWYG Editor for Chakra UI

A powerful, customizable, and developer-friendly rich text editor built for React projects using Chakra UI.

This editor is built on top of a contentEditable div, providing a true WYSIWYG experience without relying on heavy dependencies like Draft.js or Slate. It's designed to be lightweight, easy to integrate, and highly extensible.

✨ Fitur Utama

• Dibangun dengan Chakra UI: Mengintegrasikan gaya dan sistem desain Chakra UI dengan mulus.
• Kustomisasi Penuh: Ganti gaya elemen HTML (h1, p, a, dll.) dengan mudah menggunakan prop overrides yang familier dengan sintaks Chakra UI.
• Toolbar Modular: Sembunyikan fitur yang tidak Anda perlukan dengan prop disable untuk menyederhanakan antarmuka.
• Sticky Toolbar: Toolbar tetap terlihat saat pengguna menggulir halaman, memberikan akses mudah ke semua fitur.
• Mode Layar Penuh: Edit konten tanpa gangguan dalam mode layar penuh.
• Lihat Kode Sumber: Beralih antara editor visual dan tampilan HTML mentah.
• Rendering Aman: Dilengkapi komponen <Viewer /> yang menggunakan html-react-parser untuk merender konten HTML dengan aman, sekaligus membersihkan markup khusus editor.
• Fitur Lengkap: Termasuk Heading, Font Size, Font Family, Text Case, Warna Teks & Latar, Alignment, List (UL/OL), Blockquote, Link, Emoji Picker, dan banyak lagi.

🚀 Instalasi

Proyek ini memerlukan react, react-dom, @chakra-ui/react, @emotion/react, @emotion/styled, dan framer-motion sebagai peer dependencies.

1. Instal Editor:

# Menggunakan npm
npm install nabil-wysiwyg

# Menggunakan yarn
yarn add nabil-wysiwyg

2. Instal Peer Dependencies: Jika Anda belum menginstalnya di proyek Anda:

# Menggunakan npm
npm install react react-dom @chakra-ui/react @emotion/react @emotion/styled framer-motion html-react-parser react-icons

# Menggunakan yarn
yarn add react react-dom @chakra-ui/react @emotion/react @emotion/styled framer-motion html-react-parser react-icons

📚 Panduan Penggunaan

1. Penggunaan Editor Dasar

Impor WysiwygEditor dan kelola state-nya menggunakan useState.

import { useState } from "react";
import WysiwygEditor from "your-package-name";
import { ChakraProvider } from "@chakra-ui/react";

function MyPage() {
  const [content, setContent] = useState("<p>Konten awal di sini.</p>");

  return (
    <ChakraProvider>
      <WysiwygEditor
        value={content}
        onChange={setContent}
        placeholder="Mulai menulis..."
        borderWidth="1px"
        borderRadius="md"
        minH="300px"
      />
    </ChakraProvider>
  );
}

2. Menampilkan Konten (Viewer)

Gunakan komponen <Viewer /> untuk menampilkan konten HTML yang disimpan dengan aman. Komponen ini secara otomatis menerapkan gaya yang sama dengan editor.

import Viewer from "your-package-name/Viewer"; // Asumsikan Anda mengekspor Viewer juga
import { ChakraProvider } from "@chakra-ui/react";

function MyArticle({ htmlContent }) {
  return (
    <ChakraProvider>
      <Viewer content={htmlContent} />
    </ChakraProvider>
  );
}

🎨 Kustomisasi

Mengganti Gaya (Overrides)

Anda dapat dengan mudah menyesuaikan tampilan elemen dengan prop overrides. Objek ini mengikuti sintaks properti gaya Chakra UI.

const styleOverrides = {
  h1: {
    fontSize: '4xl',
    color: 'purple.600',
    borderBottom: '2px solid',
    borderColor: 'purple.200',
    pb: '2',
  },
  p: {
    lineHeight: '1.8',
  },
  a: {
    color: 'teal.500',
    fontWeight: 'bold',
  },
};

<WysiwygEditor overrides={styleOverrides} ... />
<Viewer overrides={styleOverrides} ... />

Menonaktifkan Fitur

Sederhanakan toolbar dengan menonaktifkan fitur tertentu melalui prop disable.

// Ini akan menghapus tombol Emoji dan Teks Latar Belakang
const disabledFeatures = ['emoji', 'backgroundColor'];

<WysiwygEditor disable={disabledFeatures} ... />

Fitur yang tersedia untuk dinonaktifkan: showSource, fullscreen, heading, fontSize, fontFamily, textCase, textColor, backgroundColor, alignment, emoji, list, blockquote, inlineToggle (mengontrol Bold, Italic, Underline, Strikethrough), horizontalRule, link, translate.

⚙️ Props API

<WysiwygEditor />

| Prop | Tipe | Wajib | Deskripsi | | :------------ | :--------- | :---- | :----------------------------------------------------- | | value | string | Ya | Konten HTML yang akan ditampilkan di dalam editor. | | onChange | function | Ya | Fungsi callback yang dipicu saat konten berubah. | | placeholder | string | Tidak | Teks placeholder yang ditampilkan saat editor kosong. | | overrides | object | Tidak | Objek untuk menimpa gaya default elemen HTML. | | disable | string[] | Tidak | Array nama fitur yang akan disembunyikan dari toolbar. | | ...props | BoxProps | Tidak | Prop lain yang valid dari komponen Box Chakra UI. |

<Viewer />

| Prop | Tipe | Wajib | Deskripsi | | :---------- | :--------- | :---- | :------------------------------------------------------------------------- | | content | string | Ya | String HTML yang ingin Anda tampilkan. | | overrides | object | Tidak | Objek overrides yang sama dengan editor untuk memastikan gaya konsisten. | | ...props | BoxProps | Tidak | Prop lain yang valid dari komponen Box Chakra UI. |

🤝 Kontribusi

Kontribusi dalam bentuk apapun sangat diterima! Jika Anda menemukan bug atau punya ide untuk fitur baru, silakan buat issue baru. Pull request juga selalu diterima.

💖 Dukungan & Kontak

Jika Anda merasa proyek ini bermanfaat dan ingin mendukung pengembangan lebih lanjut, pertimbangkan untuk memberikan donasi. Dukungan Anda sangat berarti dan membantu saya untuk terus memelihara dan meningkatkan editor ini.

📜 Lisensi

Proyek ini dilisensikan di bawah Lisensi MIT.