@matthiaskrijgsman/mat-ui 0.0.30 → 0.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +30 -1
- package/dist/components/inputs/input-lexical/InputLexical.d.ts +5 -1
- package/dist/index.js +2515 -22698
- package/dist/index.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +2 -3
- package/dist/index.umd.cjs +0 -236
- package/dist/index.umd.cjs.map +0 -1
package/README.md
CHANGED
|
@@ -147,7 +147,11 @@ const StrikethroughButton = () => {
|
|
|
147
147
|
|
|
148
148
|
#### Registering extra Lexical nodes
|
|
149
149
|
|
|
150
|
-
|
|
150
|
+
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:
|
|
151
|
+
|
|
152
|
+
```bash
|
|
153
|
+
pnpm add @lexical/code
|
|
154
|
+
```
|
|
151
155
|
|
|
152
156
|
```tsx
|
|
153
157
|
import { CodeNode } from "@lexical/code";
|
|
@@ -155,6 +159,31 @@ import { CodeNode } from "@lexical/code";
|
|
|
155
159
|
<InputLexical nodes={[CodeNode]} renderToolbar={/* … */} />;
|
|
156
160
|
```
|
|
157
161
|
|
|
162
|
+
> 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.
|
|
163
|
+
|
|
164
|
+
#### Adding plugins (the `children` slot)
|
|
165
|
+
|
|
166
|
+
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:
|
|
167
|
+
|
|
168
|
+
```tsx
|
|
169
|
+
import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin";
|
|
170
|
+
import { CodeHighlightPlugin } from "@lexical/react/LexicalCodeHighlightPlugin";
|
|
171
|
+
|
|
172
|
+
<InputLexical nodes={[CodeNode]}>
|
|
173
|
+
<CodeHighlightPlugin />
|
|
174
|
+
<TabIndentationPlugin />
|
|
175
|
+
{/* …or your own plugin using useLexicalComposerContext() */}
|
|
176
|
+
</InputLexical>;
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
Style custom nodes by merging theme classes over the defaults with the `theme` prop:
|
|
180
|
+
|
|
181
|
+
```tsx
|
|
182
|
+
<InputLexical nodes={[CodeNode]} theme={{ code: "my-code-block" }}>
|
|
183
|
+
<CodeHighlightPlugin />
|
|
184
|
+
</InputLexical>;
|
|
185
|
+
```
|
|
186
|
+
|
|
158
187
|
## Dark Theme
|
|
159
188
|
|
|
160
189
|
mat-ui ships with built-in dark theme support. Add the `dark` class to the `<html>` element to activate it:
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import type { Klass, LexicalNode } from "lexical";
|
|
2
|
+
import type { EditorThemeClasses, Klass, LexicalNode } from "lexical";
|
|
3
3
|
import type { LexicalToolbarRender } from "@/components/inputs/input-lexical/use-lexical-toolbar.ts";
|
|
4
4
|
export type Size = "sm" | "md" | "lg";
|
|
5
5
|
export type LexicalToolbarVariant = "static" | "floating";
|
|
@@ -24,7 +24,11 @@ export type InputLexicalProps = {
|
|
|
24
24
|
namespace?: string;
|
|
25
25
|
/** Extra Lexical nodes to register alongside the built-in set. */
|
|
26
26
|
nodes?: Array<Klass<LexicalNode>>;
|
|
27
|
+
/** Theme classes merged over the defaults (e.g. to style custom nodes). */
|
|
28
|
+
theme?: EditorThemeClasses;
|
|
27
29
|
autoFocus?: boolean;
|
|
30
|
+
/** Extra Lexical plugins, mounted inside the editor alongside the built-ins. */
|
|
31
|
+
children?: React.ReactNode;
|
|
28
32
|
className?: string;
|
|
29
33
|
};
|
|
30
34
|
export declare const InputLexical: (props: InputLexicalProps) => import("react/jsx-runtime").JSX.Element;
|