@matthiaskrijgsman/mat-ui 0.0.29 → 0.0.31

package/README.md

@@ -49,6 +49,141 @@ function App() {
 }
 ```
 
+## Rich text editor (`InputLexical`)
+
+`InputLexical` is a [Lexical](https://lexical.dev)-powered rich text editor styled like the rest of the kit. It ships with two toolbar variants that share the exact same controls:
+
+- **`static`** (default) — a light toolbar fixed at the top of the editor.
+- **`floating`** — a dark bar that appears above the editor while it is focused, matching the editor width.
+
+Lexical and its plugins are **peer dependencies** — install them alongside the library:
+
+```bash
+pnpm add lexical @lexical/react @lexical/rich-text @lexical/list @lexical/link @lexical/selection @lexical/utils
+```
+
+### Basic usage
+
+The value is a **serialized Lexical editor state** (a JSON string). Pass the last `onChange` value back as `value` to restore content.
+
+```tsx
+import { useState } from "react";
+import { InputLexical } from "@matthiaskrijgsman/mat-ui";
+
+function Editor() {
+  const [value, setValue] = useState<string>();
+
+  return (
+    <InputLexical
+      label={"Description"}
+      placeholder={"Write something…"}
+      toolbar={"floating"}     // or "static" (default)
+      value={value}
+      onChange={setValue}
+      autogrow                 // grow with content…
+      minRows={4}              // …from a 4-row floor…
+      maxRows={12}             // …up to 12 rows, then scroll
+    />
+  );
+}
+```
+
+Sizing mirrors `InputTextArea`: `minRows` sets a height floor, `maxRows` caps the height (content beyond it scrolls), and `autogrow` lets the editor grow with its content between the two. Without `autogrow` the editor is fixed at `minRows`.
+
+### Extending the toolbar
+
+The toolbar is assembled from exported **building blocks**, so you can reorder, drop, or add controls via the `renderToolbar` slot. It receives `{ editor, state, tone }` and renders into whichever variant is active — the same render function drives both the static and floating bars.
+
+```tsx
+import {
+  InputLexical,
+  LexicalBlockTypeSelect,
+  LexicalFormatButtons,
+  LexicalListButtons,
+  LexicalLinkButton,
+  LexicalHistoryButtons,
+  LexicalToolbarDivider,
+} from "@matthiaskrijgsman/mat-ui";
+
+<InputLexical
+  renderToolbar={() => (
+    <>
+      <LexicalFormatButtons/>
+      <LexicalToolbarDivider/>
+      <LexicalListButtons/>
+      <LexicalLinkButton/>
+      <LexicalToolbarDivider/>
+      <LexicalHistoryButtons/>
+    </>
+  )}
+/>;
+```
+
+Building blocks read the active editor and formatting `state`/`tone` from context, so they work in either variant with no extra wiring. Dividers automatically flip orientation (and the whole toolbar collapses overflowing controls into a vertical `⋮` dropdown) when space runs out — return each control as a top-level child so it stays individually measurable.
+
+#### Custom controls
+
+Build your own control with `LexicalToolbarButton` plus Lexical's editor context. `useLexicalToolbar()` exposes the current `{ state, tone }`:
+
+```tsx
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import { IconStrikethrough } from "@tabler/icons-react";
+import { LexicalToolbarButton, useLexicalToolbar } from "@matthiaskrijgsman/mat-ui";
+
+const StrikethroughButton = () => {
+  const [editor] = useLexicalComposerContext();
+  const { tone } = useLexicalToolbar();
+  return (
+    <LexicalToolbarButton
+      Icon={IconStrikethrough}
+      tone={tone}
+      aria-label={"Strikethrough"}
+      onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough")}
+    />
+  );
+};
+```
+
+#### Registering extra Lexical nodes
+
+The built-in set covers headings, lists, links, and quotes. For anything else (tables, mentions, code blocks, …) install the node's package yourself and pass the node via the `nodes` prop — it is registered alongside the built-in set:
+
+```bash
+pnpm add @lexical/code
+```
+
+```tsx
+import { CodeNode } from "@lexical/code";
+
+<InputLexical nodes={[CodeNode]} renderToolbar={/* … */} />;
+```
+
+> mat-ui does not bundle `lexical` or any `@lexical/*` package — they are peer dependencies, so a single shared copy is used. Only register a given node type once: don't pass a node that is already in the built-in set, or Lexical throws a duplicate-type error.
+
+#### Adding plugins (the `children` slot)
+
+A Lexical feature is usually a **node *plus* a plugin**. Register the node with `nodes`, then mount the plugin(s) as **children** — they run inside the editor alongside the built-ins (history, lists, links). Any `@lexical/react` plugin or your own works:
+
+```tsx
+import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
+import { CodeHighlightPlugin } from "@lexical/react/LexicalCodeHighlightPlugin";
+
+<InputLexical nodes={[CodeNode]}>
+  <CodeHighlightPlugin />
+  <TabIndentationPlugin />
+  {/* …or your own plugin using useLexicalComposerContext() */}
+</InputLexical>;
+```
+
+Style custom nodes by merging theme classes over the defaults with the `theme` prop:
+
+```tsx
+<InputLexical nodes={[CodeNode]} theme={{ code: "my-code-block" }}>
+  <CodeHighlightPlugin />
+</InputLexical>;
+```
+
 ## Dark Theme
 
 mat-ui ships with built-in dark theme support. Add the `dark` class to the `<html>` element to activate it:

package/dist/components/inputs/input-lexical/InputLexical.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { EditorThemeClasses, Klass, LexicalNode } from "lexical";
+import type { LexicalToolbarRender } from "@/components/inputs/input-lexical/use-lexical-toolbar.ts";
+export type Size = "sm" | "md" | "lg";
+export type LexicalToolbarVariant = "static" | "floating";
+export type InputLexicalProps = {
+    label?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    error?: string | React.ReactNode;
+    placeholder?: string;
+    /** Serialized editor state (JSON string from a previous onChange), or undefined for empty. */
+    value?: string;
+    onChange?: (value: string) => void;
+    size?: Size;
+    toolbar?: LexicalToolbarVariant;
+    /** Override the default toolbar content. Drop in the exported building blocks. */
+    renderToolbar?: LexicalToolbarRender;
+    /** Minimum visible rows — sets a height floor for the editable area. */
+    minRows?: number;
+    /** Maximum visible rows. Content beyond this scrolls. */
+    maxRows?: number;
+    /** Grow the editor with its content (between minRows and maxRows). */
+    autogrow?: boolean;
+    namespace?: string;
+    /** Extra Lexical nodes to register alongside the built-in set. */
+    nodes?: Array<Klass<LexicalNode>>;
+    /** Theme classes merged over the defaults (e.g. to style custom nodes). */
+    theme?: EditorThemeClasses;
+    autoFocus?: boolean;
+    /** Extra Lexical plugins, mounted inside the editor alongside the built-ins. */
+    children?: React.ReactNode;
+    className?: string;
+};
+export declare const InputLexical: (props: InputLexicalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalBlockTypeSelect.d.ts

@@ -0,0 +1 @@
+export declare const LexicalBlockTypeSelect: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalFloatingToolbar.d.ts

@@ -0,0 +1,5 @@
+import { type LexicalToolbarRender } from "@/components/inputs/input-lexical/use-lexical-toolbar.ts";
+export type LexicalFloatingToolbarProps = {
+    render?: LexicalToolbarRender;
+};
+export declare const LexicalFloatingToolbar: (props: LexicalFloatingToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalFormatButtons.d.ts

@@ -0,0 +1 @@
+export declare const LexicalFormatButtons: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalHistoryButtons.d.ts

@@ -0,0 +1 @@
+export declare const LexicalHistoryButtons: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalLinkButton.d.ts

@@ -0,0 +1 @@
+export declare const LexicalLinkButton: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalListButtons.d.ts

@@ -0,0 +1 @@
+export declare const LexicalListButtons: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalToolbar.d.ts

@@ -0,0 +1,8 @@
+import { type LexicalToolbarRender } from "@/components/inputs/input-lexical/use-lexical-toolbar.ts";
+export declare const lexicalDefaultToolbarItems: () => import("react/jsx-runtime").JSX.Element;
+export declare const LexicalDefaultToolbarContent: () => import("react/jsx-runtime").JSX.Element;
+export type LexicalToolbarProps = {
+    render?: LexicalToolbarRender;
+    className?: string;
+};
+export declare const LexicalToolbar: (props: LexicalToolbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalToolbarButton.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { TablerIcon } from "@tabler/icons-react";
+import type { LexicalToolbarTone } from "@/components/inputs/input-lexical/use-lexical-toolbar.ts";
+export type LexicalToolbarButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    Icon: TablerIcon;
+    active?: boolean;
+    tone?: LexicalToolbarTone;
+};
+export declare const LexicalToolbarButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    Icon: TablerIcon;
+    active?: boolean;
+    tone?: LexicalToolbarTone;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/inputs/input-lexical/LexicalToolbarDivider.d.ts

@@ -0,0 +1,6 @@
+import { type LexicalToolbarTone } from "@/components/inputs/input-lexical/use-lexical-toolbar.ts";
+export type LexicalToolbarDividerProps = {
+    tone?: LexicalToolbarTone;
+    className?: string;
+};
+export declare const LexicalToolbarDivider: (props: LexicalToolbarDividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/LexicalToolbarItems.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export type LexicalToolbarItemsProps = {
+    children: React.ReactNode;
+};
+export declare const LexicalToolbarItems: (props: LexicalToolbarItemsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/input-lexical/lexical-theme.d.ts

@@ -0,0 +1,26 @@
+import type { Klass, LexicalNode } from "lexical";
+export declare const LEXICAL_NODES: Array<Klass<LexicalNode>>;
+export declare const lexicalTheme: {
+    paragraph: string;
+    heading: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+    };
+    quote: string;
+    list: {
+        ul: string;
+        ol: string;
+        listitem: string;
+        nested: {
+            listitem: string;
+        };
+    };
+    link: string;
+    text: {
+        bold: string;
+        italic: string;
+        underline: string;
+    };
+};

package/dist/components/inputs/input-lexical/use-lexical-toolbar.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { type LexicalEditor } from "lexical";
+export type LexicalBlockType = "paragraph" | "h1" | "h2" | "h3" | "h4";
+export type LexicalToolbarState = {
+    isBold: boolean;
+    isItalic: boolean;
+    isUnderline: boolean;
+    isLink: boolean;
+    isUnorderedList: boolean;
+    isOrderedList: boolean;
+    blockType: LexicalBlockType;
+    canUndo: boolean;
+    canRedo: boolean;
+};
+export declare const DEFAULT_LEXICAL_TOOLBAR_STATE: LexicalToolbarState;
+export type LexicalToolbarTone = "light" | "dark";
+export type LexicalToolbarOrientation = "horizontal" | "vertical";
+export type LexicalToolbarContextValue = {
+    state: LexicalToolbarState;
+    tone: LexicalToolbarTone;
+    orientation?: LexicalToolbarOrientation;
+};
+export declare const LexicalToolbarContext: React.Context<LexicalToolbarContextValue>;
+export declare const useLexicalToolbar: () => LexicalToolbarContextValue;
+export declare const useLexicalToolbarState: () => LexicalToolbarState;
+export type LexicalToolbarRenderContext = {
+    editor: LexicalEditor;
+    state: LexicalToolbarState;
+    tone: LexicalToolbarTone;
+};
+export type LexicalToolbarRender = (ctx: LexicalToolbarRenderContext) => React.ReactNode;

package/dist/index.d.ts

@@ -18,6 +18,19 @@ export { InputIconButtonTray } from "./components/inputs/InputIconButtonTray.tsx
 export { InputFileSingle } from "./components/inputs/input-file/InputFileSingle.tsx";
 export { InputFileMultiple } from "./components/inputs/input-file/InputFileMultiple.tsx";
 export { UploadFileTile } from "./components/inputs/input-file/UploadFileTile.tsx";
+export { InputLexical } from "./components/inputs/input-lexical/InputLexical.tsx";
+export { LexicalToolbar, LexicalDefaultToolbarContent } from "./components/inputs/input-lexical/LexicalToolbar.tsx";
+export { LexicalFloatingToolbar } from "./components/inputs/input-lexical/LexicalFloatingToolbar.tsx";
+export { LexicalToolbarItems } from "./components/inputs/input-lexical/LexicalToolbarItems.tsx";
+export { LexicalToolbarButton } from "./components/inputs/input-lexical/LexicalToolbarButton.tsx";
+export { LexicalToolbarDivider } from "./components/inputs/input-lexical/LexicalToolbarDivider.tsx";
+export { LexicalBlockTypeSelect } from "./components/inputs/input-lexical/LexicalBlockTypeSelect.tsx";
+export { LexicalFormatButtons } from "./components/inputs/input-lexical/LexicalFormatButtons.tsx";
+export { LexicalListButtons } from "./components/inputs/input-lexical/LexicalListButtons.tsx";
+export { LexicalLinkButton } from "./components/inputs/input-lexical/LexicalLinkButton.tsx";
+export { LexicalHistoryButtons } from "./components/inputs/input-lexical/LexicalHistoryButtons.tsx";
+export { useLexicalToolbar, useLexicalToolbarState } from "./components/inputs/input-lexical/use-lexical-toolbar.ts";
+export { lexicalTheme, LEXICAL_NODES } from "./components/inputs/input-lexical/lexical-theme.ts";
 export { InputSelectNative } from "./components/inputs/InputSelectNative.tsx";
 export { InputSelect } from "./components/inputs/InputSelect.tsx";
 export { InputSelectSearchable } from "./components/inputs/InputSelectSearchable.tsx";