@astryxdesign/lab 0.2.0-canary.dfccd57 → 0.2.0-canary.e424a04
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/dist/Chart/index.d.ts +1 -1
- package/dist/Chart/index.d.ts.map +1 -1
- package/dist/Chart/index.js +1 -1
- package/dist/RichTextEditor/RichTextEditorToolbar.d.ts +97 -0
- package/dist/RichTextEditor/RichTextEditorToolbar.d.ts.map +1 -0
- package/dist/RichTextEditor/RichTextEditorToolbar.js +487 -0
- package/dist/RichTextEditor/index.d.ts +2 -0
- package/dist/RichTextEditor/index.d.ts.map +1 -1
- package/dist/RichTextEditor/index.js +2 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/package.json +8 -3
- package/src/BottomSheet/BottomSheet.doc.mjs +1 -1
- package/src/Chart/index.ts +0 -1
- package/src/RichTextEditor/RichTextEditor.doc.mjs +10 -0
- package/src/RichTextEditor/RichTextEditor.test.tsx +117 -19
- package/src/RichTextEditor/RichTextEditorToolbar.tsx +594 -0
- package/src/RichTextEditor/index.ts +6 -0
- package/src/index.ts +3 -0
package/dist/Chart/index.d.ts
CHANGED
|
@@ -21,7 +21,7 @@ export { isBandScale, xPixel } from './utils';
|
|
|
21
21
|
export { useChartColors } from './useChartColors';
|
|
22
22
|
export { getChartColors, getChartColorsFromResolver, type ChartColorsAPI, type SequentialHue, type TokenResolver, } from './getChartColors';
|
|
23
23
|
export { useChartRange, type UseChartRangeOptions, type UseChartRangeReturn, } from './useChartRange';
|
|
24
|
-
export { hexToGL, getCanvasDPR, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, compileShader,
|
|
24
|
+
export { hexToGL, getCanvasDPR, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, compileShader, CIRCLE_FRAG_BODY, POINT_SIZE_COMPENSATION, } from './webgl';
|
|
25
25
|
export { ChartBrush, type ChartBrushProps, type BrushMode, type BrushRange, } from './ChartBrush';
|
|
26
26
|
export { ChartZoom, type ChartZoomProps, type ZoomToolbarPosition, } from './ChartZoom';
|
|
27
27
|
export { ChartSelect, type ChartSelectProps } from './ChartSelect';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Chart/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAC,MAAM,SAAS,CAAC;AAC/D,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EACL,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,GACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAC,QAAQ,EAAE,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AACxD,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAC,aAAa,EAAE,KAAK,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AACvE,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,QAAQ,EAAE,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AACxD,OAAO,EAAC,UAAU,EAAE,KAAK,eAAe,EAAC,MAAM,cAAc,CAAC;AAC9D,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,YAAY,EAAC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAC9E,OAAO,EAAC,QAAQ,EAAE,KAAK,OAAO,EAAC,MAAM,MAAM,CAAC;AAC5C,OAAO,EAAC,WAAW,EAAE,MAAM,EAAC,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EACL,cAAc,EACd,0BAA0B,EAC1B,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,aAAa,GACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,OAAO,EACP,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Chart/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAC,MAAM,SAAS,CAAC;AAC/D,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EACL,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,GACV,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAC,QAAQ,EAAE,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AACxD,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAC,SAAS,EAAE,KAAK,cAAc,EAAC,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAC,aAAa,EAAE,KAAK,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AACvE,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAC,QAAQ,EAAE,KAAK,aAAa,EAAC,MAAM,YAAY,CAAC;AACxD,OAAO,EAAC,UAAU,EAAE,KAAK,eAAe,EAAC,MAAM,cAAc,CAAC;AAC9D,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,cAAc,EACd,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,QAAQ,EAAC,MAAM,gBAAgB,CAAC;AACxC,YAAY,EAAC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAC,MAAM,SAAS,CAAC;AAC9E,OAAO,EAAC,QAAQ,EAAE,KAAK,OAAO,EAAC,MAAM,MAAM,CAAC;AAC5C,OAAO,EAAC,WAAW,EAAE,MAAM,EAAC,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,OAAO,EACL,cAAc,EACd,0BAA0B,EAC1B,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,aAAa,GACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EACL,aAAa,EACb,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,GACzB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,OAAO,EACP,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,UAAU,EACV,KAAK,eAAe,EACpB,KAAK,SAAS,EACd,KAAK,UAAU,GAChB,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,SAAS,EACT,KAAK,cAAc,EACnB,KAAK,mBAAmB,GACzB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,WAAW,EAAE,KAAK,gBAAgB,EAAC,MAAM,eAAe,CAAC;AACjE,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,GAC7B,MAAM,sBAAsB,CAAC"}
|
package/dist/Chart/index.js
CHANGED
|
@@ -22,7 +22,7 @@ export { isBandScale, xPixel } from "./utils.js";
|
|
|
22
22
|
export { useChartColors } from "./useChartColors.js";
|
|
23
23
|
export { getChartColors, getChartColorsFromResolver } from "./getChartColors.js";
|
|
24
24
|
export { useChartRange } from "./useChartRange.js";
|
|
25
|
-
export { hexToGL, getCanvasDPR, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, compileShader,
|
|
25
|
+
export { hexToGL, getCanvasDPR, getWebGLContext, setupGLState, sizeCanvas, mountCanvasOverSVG, compileShader, CIRCLE_FRAG_BODY, POINT_SIZE_COMPENSATION } from "./webgl.js";
|
|
26
26
|
export { ChartBrush } from "./ChartBrush.js";
|
|
27
27
|
export { ChartZoom } from "./ChartZoom.js";
|
|
28
28
|
export { ChartSelect } from "./ChartSelect.js";
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file RichTextEditorToolbar.tsx
|
|
3
|
+
* @input Uses React, @lexical/react (composer context), @lexical/rich-text,
|
|
4
|
+
* @lexical/selection, @lexical/list, @lexical/utils, and the lexical core
|
|
5
|
+
* command constants, plus Astryx Toolbar / ToggleButton / Divider primitives.
|
|
6
|
+
* @output Exports RichTextEditorToolbar (a composable formatting toolbar) and
|
|
7
|
+
* RichTextEditorToolbarProps.
|
|
8
|
+
* @position Experimental (lab). Drop into RichTextEditor's `plugins` slot to add
|
|
9
|
+
* a formatting toolbar. Themed via Astryx Toolbar/ToggleButton, so it inherits
|
|
10
|
+
* the active theme with no extra styling.
|
|
11
|
+
*
|
|
12
|
+
* SYNC: When modified, update:
|
|
13
|
+
* - /packages/lab/src/RichTextEditor/index.ts (exports)
|
|
14
|
+
* - /packages/lab/src/index.ts (barrel re-export)
|
|
15
|
+
* - /packages/lab/src/RichTextEditor/RichTextEditor.doc.mjs (usage notes)
|
|
16
|
+
* - /packages/lab/src/RichTextEditor/RichTextEditor.test.tsx (tests)
|
|
17
|
+
* - /apps/storybook/stories/RichTextEditor.stories.tsx (WithToolbar story)
|
|
18
|
+
*
|
|
19
|
+
* NOTE: Experimental `@astryxdesign/lab` component (canary). `lexical` and
|
|
20
|
+
* `@lexical/*` are OPTIONAL peer dependencies — install them to use this.
|
|
21
|
+
* Behavior mirrors the Lexical playground toolbar (selection sync + format
|
|
22
|
+
* commands); the UI is built from Astryx primitives so it matches the theme.
|
|
23
|
+
*
|
|
24
|
+
* ICONS: Each control resolves its glyph through the core icon registry under a
|
|
25
|
+
* stable `richtext:*` key (see {@link RICHTEXT_ICON_KEYS}), falling back to the
|
|
26
|
+
* bundled inline SVGs below. A theme can restyle any glyph by registering its
|
|
27
|
+
* own icon for that key — no need to fork the toolbar:
|
|
28
|
+
* import {registerIcons} from '@astryxdesign/core/Icon';
|
|
29
|
+
* registerIcons({'richtext:bold': <MyBoldIcon />});
|
|
30
|
+
*/
|
|
31
|
+
import { type ReactNode } from 'react';
|
|
32
|
+
/**
|
|
33
|
+
* Stable icon-registry keys for the toolbar's controls. Themes can override any
|
|
34
|
+
* of these via `registerIcons({'richtext:bold': <MyIcon />})` from
|
|
35
|
+
* `@astryxdesign/core/Icon`. Keys are namespaced (`richtext:*`) to avoid
|
|
36
|
+
* collisions with the core semantic icon set.
|
|
37
|
+
*/
|
|
38
|
+
export declare const RICHTEXT_ICON_KEYS: {
|
|
39
|
+
readonly bold: "richtext:bold";
|
|
40
|
+
readonly italic: "richtext:italic";
|
|
41
|
+
readonly underline: "richtext:underline";
|
|
42
|
+
readonly strikethrough: "richtext:strikethrough";
|
|
43
|
+
readonly code: "richtext:code";
|
|
44
|
+
readonly h1: "richtext:h1";
|
|
45
|
+
readonly h2: "richtext:h2";
|
|
46
|
+
readonly h3: "richtext:h3";
|
|
47
|
+
readonly quote: "richtext:quote";
|
|
48
|
+
readonly bullet: "richtext:bullet";
|
|
49
|
+
readonly number: "richtext:number";
|
|
50
|
+
readonly undo: "richtext:undo";
|
|
51
|
+
readonly redo: "richtext:redo";
|
|
52
|
+
};
|
|
53
|
+
export interface RichTextEditorToolbarProps {
|
|
54
|
+
/**
|
|
55
|
+
* Accessible label for the toolbar element.
|
|
56
|
+
* @default 'Text formatting'
|
|
57
|
+
*/
|
|
58
|
+
label?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Which heading levels to expose as block-type buttons, in order.
|
|
61
|
+
* @default ['h1', 'h2', 'h3']
|
|
62
|
+
*/
|
|
63
|
+
headingLevels?: ReadonlyArray<'h1' | 'h2' | 'h3'>;
|
|
64
|
+
/** Toolbar size, forwarded to the Astryx Toolbar. @default 'sm' */
|
|
65
|
+
size?: 'sm' | 'md' | 'lg';
|
|
66
|
+
/**
|
|
67
|
+
* Extra items rendered at the end of the toolbar (after a divider). Use this
|
|
68
|
+
* to compose product-specific controls (e.g. mentions, AI) alongside the
|
|
69
|
+
* default formatting buttons.
|
|
70
|
+
*/
|
|
71
|
+
endContent?: ReactNode;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* A composable formatting toolbar for {@link RichTextEditor}, built from Astryx
|
|
75
|
+
* `Toolbar` / `ToggleButton` primitives so it matches the active theme. Reads
|
|
76
|
+
* the current selection to keep the active states in sync and dispatches the
|
|
77
|
+
* standard Lexical formatting commands.
|
|
78
|
+
*
|
|
79
|
+
* Render it inside the editor's `plugins` slot — it uses
|
|
80
|
+
* `useLexicalComposerContext()` to reach the editor, so it must live within the
|
|
81
|
+
* `LexicalComposer` the editor sets up.
|
|
82
|
+
*
|
|
83
|
+
* @example
|
|
84
|
+
* ```
|
|
85
|
+
* import {RichTextEditor, RichTextEditorToolbar} from '@astryxdesign/lab';
|
|
86
|
+
*
|
|
87
|
+
* <RichTextEditor
|
|
88
|
+
* label="Notes"
|
|
89
|
+
* plugins={<RichTextEditorToolbar />}
|
|
90
|
+
* />
|
|
91
|
+
* ```
|
|
92
|
+
*/
|
|
93
|
+
export declare function RichTextEditorToolbar({ label, headingLevels, size, endContent, }: RichTextEditorToolbarProps): import("react").JSX.Element;
|
|
94
|
+
export declare namespace RichTextEditorToolbar {
|
|
95
|
+
var displayName: string;
|
|
96
|
+
}
|
|
97
|
+
//# sourceMappingURL=RichTextEditorToolbar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RichTextEditorToolbar.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditorToolbar.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAmC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AA6CvE;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;CAcrB,CAAC;AAyMX,MAAM,WAAW,0BAA0B;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;IAClD,mEAAmE;IACnE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAyB,EACzB,aAAkC,EAClC,IAAW,EACX,UAAU,GACX,EAAE,0BAA0B,+BAoP5B;yBAzPe,qBAAqB"}
|
|
@@ -0,0 +1,487 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file RichTextEditorToolbar.tsx
|
|
7
|
+
* @input Uses React, @lexical/react (composer context), @lexical/rich-text,
|
|
8
|
+
* @lexical/selection, @lexical/list, @lexical/utils, and the lexical core
|
|
9
|
+
* command constants, plus Astryx Toolbar / ToggleButton / Divider primitives.
|
|
10
|
+
* @output Exports RichTextEditorToolbar (a composable formatting toolbar) and
|
|
11
|
+
* RichTextEditorToolbarProps.
|
|
12
|
+
* @position Experimental (lab). Drop into RichTextEditor's `plugins` slot to add
|
|
13
|
+
* a formatting toolbar. Themed via Astryx Toolbar/ToggleButton, so it inherits
|
|
14
|
+
* the active theme with no extra styling.
|
|
15
|
+
*
|
|
16
|
+
* SYNC: When modified, update:
|
|
17
|
+
* - /packages/lab/src/RichTextEditor/index.ts (exports)
|
|
18
|
+
* - /packages/lab/src/index.ts (barrel re-export)
|
|
19
|
+
* - /packages/lab/src/RichTextEditor/RichTextEditor.doc.mjs (usage notes)
|
|
20
|
+
* - /packages/lab/src/RichTextEditor/RichTextEditor.test.tsx (tests)
|
|
21
|
+
* - /apps/storybook/stories/RichTextEditor.stories.tsx (WithToolbar story)
|
|
22
|
+
*
|
|
23
|
+
* NOTE: Experimental `@astryxdesign/lab` component (canary). `lexical` and
|
|
24
|
+
* `@lexical/*` are OPTIONAL peer dependencies — install them to use this.
|
|
25
|
+
* Behavior mirrors the Lexical playground toolbar (selection sync + format
|
|
26
|
+
* commands); the UI is built from Astryx primitives so it matches the theme.
|
|
27
|
+
*
|
|
28
|
+
* ICONS: Each control resolves its glyph through the core icon registry under a
|
|
29
|
+
* stable `richtext:*` key (see {@link RICHTEXT_ICON_KEYS}), falling back to the
|
|
30
|
+
* bundled inline SVGs below. A theme can restyle any glyph by registering its
|
|
31
|
+
* own icon for that key — no need to fork the toolbar:
|
|
32
|
+
* import {registerIcons} from '@astryxdesign/core/Icon';
|
|
33
|
+
* registerIcons({'richtext:bold': <MyBoldIcon />});
|
|
34
|
+
*/
|
|
35
|
+
import { useCallback, useEffect, useState } from 'react';
|
|
36
|
+
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
37
|
+
import { $setBlocksType } from '@lexical/selection';
|
|
38
|
+
import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode } from '@lexical/rich-text';
|
|
39
|
+
import { $isListNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND } from '@lexical/list';
|
|
40
|
+
import { $getNearestNodeOfType, mergeRegister } from '@lexical/utils';
|
|
41
|
+
import { Toolbar } from '@astryxdesign/core/Toolbar';
|
|
42
|
+
import { ToggleButton } from '@astryxdesign/core/ToggleButton';
|
|
43
|
+
import { Divider } from '@astryxdesign/core/Divider';
|
|
44
|
+
import { getExtendedIcon } from '@astryxdesign/core/Icon';
|
|
45
|
+
import { FORMAT_TEXT_COMMAND, UNDO_COMMAND, REDO_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, $getSelection, $isRangeSelection, $createParagraphNode } from 'lexical';
|
|
46
|
+
|
|
47
|
+
/** Block types the toolbar can toggle. */
|
|
48
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
49
|
+
const HEADING_LABELS = {
|
|
50
|
+
h1: 'Heading 1',
|
|
51
|
+
h2: 'Heading 2',
|
|
52
|
+
h3: 'Heading 3'
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Stable icon-registry keys for the toolbar's controls. Themes can override any
|
|
57
|
+
* of these via `registerIcons({'richtext:bold': <MyIcon />})` from
|
|
58
|
+
* `@astryxdesign/core/Icon`. Keys are namespaced (`richtext:*`) to avoid
|
|
59
|
+
* collisions with the core semantic icon set.
|
|
60
|
+
*/
|
|
61
|
+
export const RICHTEXT_ICON_KEYS = {
|
|
62
|
+
bold: 'richtext:bold',
|
|
63
|
+
italic: 'richtext:italic',
|
|
64
|
+
underline: 'richtext:underline',
|
|
65
|
+
strikethrough: 'richtext:strikethrough',
|
|
66
|
+
code: 'richtext:code',
|
|
67
|
+
h1: 'richtext:h1',
|
|
68
|
+
h2: 'richtext:h2',
|
|
69
|
+
h3: 'richtext:h3',
|
|
70
|
+
quote: 'richtext:quote',
|
|
71
|
+
bullet: 'richtext:bullet',
|
|
72
|
+
number: 'richtext:number',
|
|
73
|
+
undo: 'richtext:undo',
|
|
74
|
+
redo: 'richtext:redo'
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Bundled 16px inline default icons — no external icon dependency. These are
|
|
79
|
+
* the fallbacks used when a theme hasn't registered an override for the
|
|
80
|
+
* corresponding {@link RICHTEXT_ICON_KEYS} entry.
|
|
81
|
+
*/
|
|
82
|
+
const defaultToolbarIcons = {
|
|
83
|
+
bold: /*#__PURE__*/_jsx("svg", {
|
|
84
|
+
width: "16",
|
|
85
|
+
height: "16",
|
|
86
|
+
viewBox: "0 0 24 24",
|
|
87
|
+
fill: "none",
|
|
88
|
+
"aria-hidden": "true",
|
|
89
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
90
|
+
d: "M6 4h7a4 4 0 0 1 0 8H6zM6 12h8a4 4 0 0 1 0 8H6z",
|
|
91
|
+
stroke: "currentColor",
|
|
92
|
+
strokeWidth: "2",
|
|
93
|
+
strokeLinejoin: "round"
|
|
94
|
+
})
|
|
95
|
+
}),
|
|
96
|
+
italic: /*#__PURE__*/_jsx("svg", {
|
|
97
|
+
width: "16",
|
|
98
|
+
height: "16",
|
|
99
|
+
viewBox: "0 0 24 24",
|
|
100
|
+
fill: "none",
|
|
101
|
+
"aria-hidden": "true",
|
|
102
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
103
|
+
d: "M10 4h6M8 20h6M14 4l-4 16",
|
|
104
|
+
stroke: "currentColor",
|
|
105
|
+
strokeWidth: "2",
|
|
106
|
+
strokeLinecap: "round"
|
|
107
|
+
})
|
|
108
|
+
}),
|
|
109
|
+
underline: /*#__PURE__*/_jsx("svg", {
|
|
110
|
+
width: "16",
|
|
111
|
+
height: "16",
|
|
112
|
+
viewBox: "0 0 24 24",
|
|
113
|
+
fill: "none",
|
|
114
|
+
"aria-hidden": "true",
|
|
115
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
116
|
+
d: "M6 4v6a6 6 0 0 0 12 0V4M5 21h14",
|
|
117
|
+
stroke: "currentColor",
|
|
118
|
+
strokeWidth: "2",
|
|
119
|
+
strokeLinecap: "round"
|
|
120
|
+
})
|
|
121
|
+
}),
|
|
122
|
+
strikethrough: /*#__PURE__*/_jsx("svg", {
|
|
123
|
+
width: "16",
|
|
124
|
+
height: "16",
|
|
125
|
+
viewBox: "0 0 24 24",
|
|
126
|
+
fill: "none",
|
|
127
|
+
"aria-hidden": "true",
|
|
128
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
129
|
+
d: "M4 12h16M8 6a4 3 0 0 1 8 0M8 16a4 3 0 0 0 8 0",
|
|
130
|
+
stroke: "currentColor",
|
|
131
|
+
strokeWidth: "2",
|
|
132
|
+
strokeLinecap: "round"
|
|
133
|
+
})
|
|
134
|
+
}),
|
|
135
|
+
code: /*#__PURE__*/_jsx("svg", {
|
|
136
|
+
width: "16",
|
|
137
|
+
height: "16",
|
|
138
|
+
viewBox: "0 0 24 24",
|
|
139
|
+
fill: "none",
|
|
140
|
+
"aria-hidden": "true",
|
|
141
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
142
|
+
d: "M9 8l-4 4 4 4M15 8l4 4-4 4",
|
|
143
|
+
stroke: "currentColor",
|
|
144
|
+
strokeWidth: "2",
|
|
145
|
+
strokeLinecap: "round",
|
|
146
|
+
strokeLinejoin: "round"
|
|
147
|
+
})
|
|
148
|
+
}),
|
|
149
|
+
h1: /*#__PURE__*/_jsx(TextGlyph, {
|
|
150
|
+
label: "H1"
|
|
151
|
+
}),
|
|
152
|
+
h2: /*#__PURE__*/_jsx(TextGlyph, {
|
|
153
|
+
label: "H2"
|
|
154
|
+
}),
|
|
155
|
+
h3: /*#__PURE__*/_jsx(TextGlyph, {
|
|
156
|
+
label: "H3"
|
|
157
|
+
}),
|
|
158
|
+
quote: /*#__PURE__*/_jsx("svg", {
|
|
159
|
+
width: "16",
|
|
160
|
+
height: "16",
|
|
161
|
+
viewBox: "0 0 24 24",
|
|
162
|
+
fill: "none",
|
|
163
|
+
"aria-hidden": "true",
|
|
164
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
165
|
+
d: "M6 17h3l2-4V7H5v6h3zM15 17h3l2-4V7h-6v6h3z",
|
|
166
|
+
stroke: "currentColor",
|
|
167
|
+
strokeWidth: "2",
|
|
168
|
+
strokeLinejoin: "round"
|
|
169
|
+
})
|
|
170
|
+
}),
|
|
171
|
+
bullet: /*#__PURE__*/_jsxs("svg", {
|
|
172
|
+
width: "16",
|
|
173
|
+
height: "16",
|
|
174
|
+
viewBox: "0 0 24 24",
|
|
175
|
+
fill: "none",
|
|
176
|
+
"aria-hidden": "true",
|
|
177
|
+
children: [/*#__PURE__*/_jsx("path", {
|
|
178
|
+
d: "M9 6h11M9 12h11M9 18h11",
|
|
179
|
+
stroke: "currentColor",
|
|
180
|
+
strokeWidth: "2",
|
|
181
|
+
strokeLinecap: "round"
|
|
182
|
+
}), /*#__PURE__*/_jsx("circle", {
|
|
183
|
+
cx: "4.5",
|
|
184
|
+
cy: "6",
|
|
185
|
+
r: "1.5",
|
|
186
|
+
fill: "currentColor"
|
|
187
|
+
}), /*#__PURE__*/_jsx("circle", {
|
|
188
|
+
cx: "4.5",
|
|
189
|
+
cy: "12",
|
|
190
|
+
r: "1.5",
|
|
191
|
+
fill: "currentColor"
|
|
192
|
+
}), /*#__PURE__*/_jsx("circle", {
|
|
193
|
+
cx: "4.5",
|
|
194
|
+
cy: "18",
|
|
195
|
+
r: "1.5",
|
|
196
|
+
fill: "currentColor"
|
|
197
|
+
})]
|
|
198
|
+
}),
|
|
199
|
+
number: /*#__PURE__*/_jsxs("svg", {
|
|
200
|
+
width: "16",
|
|
201
|
+
height: "16",
|
|
202
|
+
viewBox: "0 0 24 24",
|
|
203
|
+
fill: "none",
|
|
204
|
+
"aria-hidden": "true",
|
|
205
|
+
children: [/*#__PURE__*/_jsx("path", {
|
|
206
|
+
d: "M10 6h10M10 12h10M10 18h10",
|
|
207
|
+
stroke: "currentColor",
|
|
208
|
+
strokeWidth: "2",
|
|
209
|
+
strokeLinecap: "round"
|
|
210
|
+
}), /*#__PURE__*/_jsx("text", {
|
|
211
|
+
x: "2",
|
|
212
|
+
y: "8",
|
|
213
|
+
fontSize: "6",
|
|
214
|
+
fill: "currentColor",
|
|
215
|
+
children: "1"
|
|
216
|
+
}), /*#__PURE__*/_jsx("text", {
|
|
217
|
+
x: "2",
|
|
218
|
+
y: "14",
|
|
219
|
+
fontSize: "6",
|
|
220
|
+
fill: "currentColor",
|
|
221
|
+
children: "2"
|
|
222
|
+
}), /*#__PURE__*/_jsx("text", {
|
|
223
|
+
x: "2",
|
|
224
|
+
y: "20",
|
|
225
|
+
fontSize: "6",
|
|
226
|
+
fill: "currentColor",
|
|
227
|
+
children: "3"
|
|
228
|
+
})]
|
|
229
|
+
}),
|
|
230
|
+
undo: /*#__PURE__*/_jsx("svg", {
|
|
231
|
+
width: "16",
|
|
232
|
+
height: "16",
|
|
233
|
+
viewBox: "0 0 24 24",
|
|
234
|
+
fill: "none",
|
|
235
|
+
"aria-hidden": "true",
|
|
236
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
237
|
+
d: "M9 7L4 12l5 5M4 12h11a5 5 0 0 1 0 10",
|
|
238
|
+
stroke: "currentColor",
|
|
239
|
+
strokeWidth: "2",
|
|
240
|
+
strokeLinecap: "round",
|
|
241
|
+
strokeLinejoin: "round"
|
|
242
|
+
})
|
|
243
|
+
}),
|
|
244
|
+
redo: /*#__PURE__*/_jsx("svg", {
|
|
245
|
+
width: "16",
|
|
246
|
+
height: "16",
|
|
247
|
+
viewBox: "0 0 24 24",
|
|
248
|
+
fill: "none",
|
|
249
|
+
"aria-hidden": "true",
|
|
250
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
251
|
+
d: "M15 7l5 5-5 5M20 12H9a5 5 0 0 0 0 10",
|
|
252
|
+
stroke: "currentColor",
|
|
253
|
+
strokeWidth: "2",
|
|
254
|
+
strokeLinecap: "round",
|
|
255
|
+
strokeLinejoin: "round"
|
|
256
|
+
})
|
|
257
|
+
})
|
|
258
|
+
};
|
|
259
|
+
|
|
260
|
+
/** Renders a short text label as a toolbar glyph (for heading buttons). */
|
|
261
|
+
function TextGlyph({
|
|
262
|
+
label
|
|
263
|
+
}) {
|
|
264
|
+
return /*#__PURE__*/_jsx("span", {
|
|
265
|
+
"aria-hidden": "true",
|
|
266
|
+
style: {
|
|
267
|
+
fontSize: '0.75rem',
|
|
268
|
+
fontWeight: 700,
|
|
269
|
+
fontVariantNumeric: 'tabular-nums'
|
|
270
|
+
},
|
|
271
|
+
children: label
|
|
272
|
+
});
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
/**
|
|
276
|
+
* Resolve a toolbar glyph: prefer a theme-registered icon for the stable
|
|
277
|
+
* `richtext:*` key, otherwise fall back to the bundled inline default.
|
|
278
|
+
*/
|
|
279
|
+
function resolveIcon(name) {
|
|
280
|
+
return getExtendedIcon(RICHTEXT_ICON_KEYS[name], defaultToolbarIcons[name]);
|
|
281
|
+
}
|
|
282
|
+
/**
|
|
283
|
+
* A composable formatting toolbar for {@link RichTextEditor}, built from Astryx
|
|
284
|
+
* `Toolbar` / `ToggleButton` primitives so it matches the active theme. Reads
|
|
285
|
+
* the current selection to keep the active states in sync and dispatches the
|
|
286
|
+
* standard Lexical formatting commands.
|
|
287
|
+
*
|
|
288
|
+
* Render it inside the editor's `plugins` slot — it uses
|
|
289
|
+
* `useLexicalComposerContext()` to reach the editor, so it must live within the
|
|
290
|
+
* `LexicalComposer` the editor sets up.
|
|
291
|
+
*
|
|
292
|
+
* @example
|
|
293
|
+
* ```
|
|
294
|
+
* import {RichTextEditor, RichTextEditorToolbar} from '@astryxdesign/lab';
|
|
295
|
+
*
|
|
296
|
+
* <RichTextEditor
|
|
297
|
+
* label="Notes"
|
|
298
|
+
* plugins={<RichTextEditorToolbar />}
|
|
299
|
+
* />
|
|
300
|
+
* ```
|
|
301
|
+
*/
|
|
302
|
+
export function RichTextEditorToolbar({
|
|
303
|
+
label = 'Text formatting',
|
|
304
|
+
headingLevels = ['h1', 'h2', 'h3'],
|
|
305
|
+
size = 'sm',
|
|
306
|
+
endContent
|
|
307
|
+
}) {
|
|
308
|
+
const [editor] = useLexicalComposerContext();
|
|
309
|
+
const [activeFormats, setActiveFormats] = useState(new Set());
|
|
310
|
+
const [blockType, setBlockType] = useState('paragraph');
|
|
311
|
+
const [canUndo, setCanUndo] = useState(false);
|
|
312
|
+
const [canRedo, setCanRedo] = useState(false);
|
|
313
|
+
const [isEditable, setIsEditable] = useState(() => editor.isEditable());
|
|
314
|
+
const $syncToolbar = useCallback(() => {
|
|
315
|
+
const selection = $getSelection();
|
|
316
|
+
if (!$isRangeSelection(selection)) {
|
|
317
|
+
return;
|
|
318
|
+
}
|
|
319
|
+
const formats = new Set();
|
|
320
|
+
for (const fmt of ['bold', 'italic', 'underline', 'strikethrough', 'code']) {
|
|
321
|
+
if (selection.hasFormat(fmt)) {
|
|
322
|
+
formats.add(fmt);
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
setActiveFormats(formats);
|
|
326
|
+
const anchorNode = selection.anchor.getNode();
|
|
327
|
+
const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
|
|
328
|
+
if ($isListNode(element)) {
|
|
329
|
+
const parentList = $getNearestNodeOfType(anchorNode, ListNode);
|
|
330
|
+
const type = parentList ? parentList.getListType() : element.getListType();
|
|
331
|
+
setBlockType(type === 'number' ? 'number' : 'bullet');
|
|
332
|
+
} else if ($isHeadingNode(element)) {
|
|
333
|
+
setBlockType(element.getTag());
|
|
334
|
+
} else if ($isQuoteNode(element)) {
|
|
335
|
+
setBlockType('quote');
|
|
336
|
+
} else {
|
|
337
|
+
setBlockType('paragraph');
|
|
338
|
+
}
|
|
339
|
+
}, []);
|
|
340
|
+
useEffect(() => {
|
|
341
|
+
return mergeRegister(editor.registerUpdateListener(({
|
|
342
|
+
editorState
|
|
343
|
+
}) => {
|
|
344
|
+
editorState.read($syncToolbar);
|
|
345
|
+
}), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
|
|
346
|
+
$syncToolbar();
|
|
347
|
+
return false;
|
|
348
|
+
}, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CAN_UNDO_COMMAND, payload => {
|
|
349
|
+
setCanUndo(payload);
|
|
350
|
+
return false;
|
|
351
|
+
}, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CAN_REDO_COMMAND, payload => {
|
|
352
|
+
setCanRedo(payload);
|
|
353
|
+
return false;
|
|
354
|
+
}, COMMAND_PRIORITY_CRITICAL), editor.registerEditableListener(editable => {
|
|
355
|
+
setIsEditable(editable);
|
|
356
|
+
}));
|
|
357
|
+
}, [editor, $syncToolbar]);
|
|
358
|
+
const toggleInlineFormat = format => {
|
|
359
|
+
// FORMAT_TEXT_COMMAND payload is a TextFormatType; the values we pass are
|
|
360
|
+
// all valid members.
|
|
361
|
+
editor.dispatchCommand(FORMAT_TEXT_COMMAND,
|
|
362
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
363
|
+
format);
|
|
364
|
+
};
|
|
365
|
+
const setBlock = next => {
|
|
366
|
+
if (next === 'bullet') {
|
|
367
|
+
editor.dispatchCommand(blockType === 'bullet' ? REMOVE_LIST_COMMAND : INSERT_UNORDERED_LIST_COMMAND, undefined);
|
|
368
|
+
return;
|
|
369
|
+
}
|
|
370
|
+
if (next === 'number') {
|
|
371
|
+
editor.dispatchCommand(blockType === 'number' ? REMOVE_LIST_COMMAND : INSERT_ORDERED_LIST_COMMAND, undefined);
|
|
372
|
+
return;
|
|
373
|
+
}
|
|
374
|
+
// Heading / quote / paragraph — toggle back to paragraph when already set.
|
|
375
|
+
const target = blockType === next ? 'paragraph' : next;
|
|
376
|
+
editor.update(() => {
|
|
377
|
+
const selection = $getSelection();
|
|
378
|
+
if (!$isRangeSelection(selection)) {
|
|
379
|
+
return;
|
|
380
|
+
}
|
|
381
|
+
$setBlocksType(selection, () => {
|
|
382
|
+
if (target === 'quote') {
|
|
383
|
+
return $createQuoteNode();
|
|
384
|
+
}
|
|
385
|
+
if (target === 'h1' || target === 'h2' || target === 'h3') {
|
|
386
|
+
return $createHeadingNode(target);
|
|
387
|
+
}
|
|
388
|
+
return $createParagraphNode();
|
|
389
|
+
});
|
|
390
|
+
});
|
|
391
|
+
};
|
|
392
|
+
return /*#__PURE__*/_jsx(Toolbar, {
|
|
393
|
+
label: label,
|
|
394
|
+
size: size,
|
|
395
|
+
startContent: /*#__PURE__*/_jsxs(_Fragment, {
|
|
396
|
+
children: [/*#__PURE__*/_jsx(ToggleButton, {
|
|
397
|
+
label: "Undo",
|
|
398
|
+
icon: resolveIcon('undo'),
|
|
399
|
+
isIconOnly: true,
|
|
400
|
+
isPressed: false,
|
|
401
|
+
isDisabled: !isEditable || !canUndo,
|
|
402
|
+
onPressedChange: () => editor.dispatchCommand(UNDO_COMMAND, undefined)
|
|
403
|
+
}), /*#__PURE__*/_jsx(ToggleButton, {
|
|
404
|
+
label: "Redo",
|
|
405
|
+
icon: resolveIcon('redo'),
|
|
406
|
+
isIconOnly: true,
|
|
407
|
+
isPressed: false,
|
|
408
|
+
isDisabled: !isEditable || !canRedo,
|
|
409
|
+
onPressedChange: () => editor.dispatchCommand(REDO_COMMAND, undefined)
|
|
410
|
+
}), /*#__PURE__*/_jsx(Divider, {
|
|
411
|
+
orientation: "vertical"
|
|
412
|
+
}), /*#__PURE__*/_jsx(ToggleButton, {
|
|
413
|
+
label: "Bold",
|
|
414
|
+
icon: resolveIcon('bold'),
|
|
415
|
+
isIconOnly: true,
|
|
416
|
+
isPressed: activeFormats.has('bold'),
|
|
417
|
+
isDisabled: !isEditable,
|
|
418
|
+
onPressedChange: () => toggleInlineFormat('bold')
|
|
419
|
+
}), /*#__PURE__*/_jsx(ToggleButton, {
|
|
420
|
+
label: "Italic",
|
|
421
|
+
icon: resolveIcon('italic'),
|
|
422
|
+
isIconOnly: true,
|
|
423
|
+
isPressed: activeFormats.has('italic'),
|
|
424
|
+
isDisabled: !isEditable,
|
|
425
|
+
onPressedChange: () => toggleInlineFormat('italic')
|
|
426
|
+
}), /*#__PURE__*/_jsx(ToggleButton, {
|
|
427
|
+
label: "Underline",
|
|
428
|
+
icon: resolveIcon('underline'),
|
|
429
|
+
isIconOnly: true,
|
|
430
|
+
isPressed: activeFormats.has('underline'),
|
|
431
|
+
isDisabled: !isEditable,
|
|
432
|
+
onPressedChange: () => toggleInlineFormat('underline')
|
|
433
|
+
}), /*#__PURE__*/_jsx(ToggleButton, {
|
|
434
|
+
label: "Strikethrough",
|
|
435
|
+
icon: resolveIcon('strikethrough'),
|
|
436
|
+
isIconOnly: true,
|
|
437
|
+
isPressed: activeFormats.has('strikethrough'),
|
|
438
|
+
isDisabled: !isEditable,
|
|
439
|
+
onPressedChange: () => toggleInlineFormat('strikethrough')
|
|
440
|
+
}), /*#__PURE__*/_jsx(ToggleButton, {
|
|
441
|
+
label: "Inline code",
|
|
442
|
+
icon: resolveIcon('code'),
|
|
443
|
+
isIconOnly: true,
|
|
444
|
+
isPressed: activeFormats.has('code'),
|
|
445
|
+
isDisabled: !isEditable,
|
|
446
|
+
onPressedChange: () => toggleInlineFormat('code')
|
|
447
|
+
}), /*#__PURE__*/_jsx(Divider, {
|
|
448
|
+
orientation: "vertical"
|
|
449
|
+
}), headingLevels.map(level => /*#__PURE__*/_jsx(ToggleButton, {
|
|
450
|
+
label: HEADING_LABELS[level],
|
|
451
|
+
icon: resolveIcon(level),
|
|
452
|
+
isIconOnly: true,
|
|
453
|
+
isPressed: blockType === level,
|
|
454
|
+
isDisabled: !isEditable,
|
|
455
|
+
onPressedChange: () => setBlock(level)
|
|
456
|
+
}, level)), /*#__PURE__*/_jsx(ToggleButton, {
|
|
457
|
+
label: "Quote",
|
|
458
|
+
icon: resolveIcon('quote'),
|
|
459
|
+
isIconOnly: true,
|
|
460
|
+
isPressed: blockType === 'quote',
|
|
461
|
+
isDisabled: !isEditable,
|
|
462
|
+
onPressedChange: () => setBlock('quote')
|
|
463
|
+
}), /*#__PURE__*/_jsx(Divider, {
|
|
464
|
+
orientation: "vertical"
|
|
465
|
+
}), /*#__PURE__*/_jsx(ToggleButton, {
|
|
466
|
+
label: "Bulleted list",
|
|
467
|
+
icon: resolveIcon('bullet'),
|
|
468
|
+
isIconOnly: true,
|
|
469
|
+
isPressed: blockType === 'bullet',
|
|
470
|
+
isDisabled: !isEditable,
|
|
471
|
+
onPressedChange: () => setBlock('bullet')
|
|
472
|
+
}), /*#__PURE__*/_jsx(ToggleButton, {
|
|
473
|
+
label: "Numbered list",
|
|
474
|
+
icon: resolveIcon('number'),
|
|
475
|
+
isIconOnly: true,
|
|
476
|
+
isPressed: blockType === 'number',
|
|
477
|
+
isDisabled: !isEditable,
|
|
478
|
+
onPressedChange: () => setBlock('number')
|
|
479
|
+
}), endContent != null && /*#__PURE__*/_jsxs(_Fragment, {
|
|
480
|
+
children: [/*#__PURE__*/_jsx(Divider, {
|
|
481
|
+
orientation: "vertical"
|
|
482
|
+
}), endContent]
|
|
483
|
+
})]
|
|
484
|
+
})
|
|
485
|
+
});
|
|
486
|
+
}
|
|
487
|
+
RichTextEditorToolbar.displayName = 'RichTextEditorToolbar';
|
|
@@ -14,4 +14,6 @@ export type { RichTextViewProps } from './RichTextView';
|
|
|
14
14
|
export { sharedEditorTheme } from './editorTheme';
|
|
15
15
|
export { markdownToEditorStateJSON, editorStateJSONToMarkdown, } from './markdownSerializers';
|
|
16
16
|
export type { MarkdownSerializerOptions } from './markdownSerializers';
|
|
17
|
+
export { RichTextEditorToolbar, RICHTEXT_ICON_KEYS, } from './RichTextEditorToolbar';
|
|
18
|
+
export type { RichTextEditorToolbarProps } from './RichTextEditorToolbar';
|
|
17
19
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEhD,OAAO,EACL,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAC,yBAAyB,EAAC,MAAM,uBAAuB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,EACxB,kBAAkB,EAClB,WAAW,GACZ,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEhD,OAAO,EACL,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAC,yBAAyB,EAAC,MAAM,uBAAuB,CAAC;AAErE,OAAO,EACL,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAC,0BAA0B,EAAC,MAAM,yBAAyB,CAAC"}
|
|
@@ -14,4 +14,5 @@
|
|
|
14
14
|
export { RichTextEditor } from "./RichTextEditor.js";
|
|
15
15
|
export { RichTextView } from "./RichTextView.js";
|
|
16
16
|
export { sharedEditorTheme } from "./editorTheme.js";
|
|
17
|
-
export { markdownToEditorStateJSON, editorStateJSONToMarkdown } from "./markdownSerializers.js";
|
|
17
|
+
export { markdownToEditorStateJSON, editorStateJSONToMarkdown } from "./markdownSerializers.js";
|
|
18
|
+
export { RichTextEditorToolbar, RICHTEXT_ICON_KEYS } from "./RichTextEditorToolbar.js";
|
package/dist/index.d.ts
CHANGED
|
@@ -28,5 +28,5 @@ export { SankeyChart, type SankeyChartProps, SankeyLink, type SankeyLinkProps, S
|
|
|
28
28
|
export * from './Stepper';
|
|
29
29
|
export * from './CircularProgress';
|
|
30
30
|
export { LogStream, type LogStreamProps, type LogEntry, type LogStreamLevel, } from './LogStream';
|
|
31
|
-
export { RichTextEditor, type RichTextEditorProps, type RichTextEditorRef, type RichTextEditorStatus, type RichTextEditorStatusType, type RichTextEditorSize, type Transformer, RichTextView, type RichTextViewProps, sharedEditorTheme, markdownToEditorStateJSON, editorStateJSONToMarkdown, type MarkdownSerializerOptions, } from './RichTextEditor';
|
|
31
|
+
export { RichTextEditor, type RichTextEditorProps, type RichTextEditorRef, type RichTextEditorStatus, type RichTextEditorStatusType, type RichTextEditorSize, type Transformer, RichTextView, type RichTextViewProps, sharedEditorTheme, markdownToEditorStateJSON, editorStateJSONToMarkdown, type MarkdownSerializerOptions, RichTextEditorToolbar, type RichTextEditorToolbarProps, RICHTEXT_ICON_KEYS, } from './RichTextEditor';
|
|
32
32
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|