@netzen/lexical-bknd

🚀 Feature-rich text editor built on Meta's Lexical framework with React support. Usage with bknd.io

Features

• ✨ Rich text formatting (bold, italic, underline, strikethrough)

• 📝 Headings, lists, quotes, and code blocks

• 🖼️ Image upload and resizing

• 🎨 Syntax highlighting with Shiki

• 🔗 Link previews

• ↩️ Undo/Redo support

• 🎯 Drag & drop support

• 🤝 Collaborative editing with Yjs (optional)

Installation

npm install @netzen/lexical-bknd
# or
yarn add @netzen/lexical-bknd

Usage with bknd.io

This editor is designed to be used with the bknd.io admin panel. You need to create a CustomAdmin.tsx file to override the default rendering for your content fields.

Here is an example CustomAdmin.tsx:

"use client";
import React from "react";
import { Admin } from "bknd/ui";
import type { SafeUser } from "bknd";
import { LexicalRichTextEditor } from "@netzen/lexical-bknd";
import "@netzen/lexical-bknd/styles.css";

export default function CustomAdmin({ user }: { user: SafeUser | null }) {
  const entities = ["pages", "posts"];
  
  const entitiesConfig = entities.reduce((acc, name) => {
    acc[name] = {
      list: {
          fields: ['title', 'id'], 
      },
      fields: {
        content: {
          render: (_ctx: any, _e: any, _f: any, ctx: any) => {
            const value =
              ctx.value && typeof ctx.value === "object"
                ? JSON.stringify(ctx.value)
                : ctx.value;
            return (
              <LexicalRichTextEditor
                value={value}
                onChange={ctx.handleChange}
              />
            );
          },
        },
      },
    };
    return acc;
  }, {} as any);

  return (
    <Admin
      withProvider={{ user }}
      config={{ basepath: "/admin", entities: entitiesConfig }}
    />
  );
}