@astryxdesign/lab 0.2.0-canary.f7ec5f5 → 0.2.0-canary.fce8b64
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/BottomSheet/BottomSheet.d.ts.map +1 -1
- package/dist/BottomSheet/BottomSheet.js +2 -2
- 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/RichTextEditorAutoLinkPlugin.d.ts +85 -0
- package/dist/RichTextEditor/RichTextEditorAutoLinkPlugin.d.ts.map +1 -0
- package/dist/RichTextEditor/RichTextEditorAutoLinkPlugin.js +95 -0
- package/dist/RichTextEditor/RichTextEditorToolbar.d.ts +126 -0
- package/dist/RichTextEditor/RichTextEditorToolbar.d.ts.map +1 -0
- package/dist/RichTextEditor/RichTextEditorToolbar.js +633 -0
- package/dist/RichTextEditor/RichTextView.d.ts.map +1 -1
- package/dist/RichTextEditor/RichTextView.js +48 -2
- package/dist/RichTextEditor/index.d.ts +5 -0
- package/dist/RichTextEditor/index.d.ts.map +1 -1
- package/dist/RichTextEditor/index.js +4 -1
- package/dist/RichTextEditor/linkUtils.d.ts +22 -0
- package/dist/RichTextEditor/linkUtils.d.ts.map +1 -0
- package/dist/RichTextEditor/linkUtils.js +91 -0
- package/dist/Stepper/Step.d.ts +1 -1
- package/dist/Stepper/Step.js +1 -1
- package/dist/Stepper/Stepper.d.ts +1 -1
- package/dist/Stepper/Stepper.js +1 -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 -2
- package/src/BottomSheet/BottomSheet.doc.mjs +3 -3
- package/src/BottomSheet/BottomSheet.test.tsx +13 -0
- package/src/BottomSheet/BottomSheet.tsx +4 -2
- package/src/BottomSheet/useSheetGestures.doc.mjs +1 -1
- package/src/Chart/ChartArea.doc.mjs +1 -1
- package/src/Chart/ChartBar.doc.mjs +1 -1
- package/src/Chart/ChartCandlestick.doc.mjs +1 -1
- package/src/Chart/ChartDot.doc.mjs +1 -1
- package/src/Chart/ChartDotGL.doc.mjs +1 -1
- package/src/Chart/ChartDotGLInteractive.doc.mjs +1 -1
- package/src/Chart/ChartHeatmapGL.doc.mjs +1 -1
- package/src/Chart/ChartLine.doc.mjs +1 -1
- package/src/Chart/ChartStreamGL.doc.mjs +1 -1
- package/src/Chart/index.ts +0 -1
- package/src/Chat/ChatEmojiPicker.doc.mjs +1 -1
- package/src/Chat/ChatReactionBar.doc.mjs +1 -1
- package/src/Chat/ChatTypingIndicator.doc.mjs +1 -1
- package/src/Chat/ChatUnreadDivider.doc.mjs +1 -1
- package/src/ChatReasoning/ChatReasoning.doc.mjs +1 -1
- package/src/CircularProgress/CircularProgress.doc.mjs +3 -3
- package/src/CodeEditor/CodeEditor.doc.mjs +1 -1
- package/src/Drawer/Drawer.doc.mjs +3 -3
- package/src/InfoTip/InfoTip.doc.mjs +3 -3
- package/src/LogStream/LogStream.doc.mjs +1 -1
- package/src/Radial/RadialChart.doc.mjs +1 -1
- package/src/RichTextEditor/RichTextEditor.doc.mjs +21 -1
- package/src/RichTextEditor/RichTextEditor.test.tsx +566 -21
- package/src/RichTextEditor/RichTextEditorAutoLinkPlugin.tsx +116 -0
- package/src/RichTextEditor/RichTextEditorToolbar.tsx +789 -0
- package/src/RichTextEditor/RichTextView.tsx +44 -1
- package/src/RichTextEditor/index.ts +20 -0
- package/src/RichTextEditor/linkUtils.ts +93 -0
- package/src/SVGIcon/SVGIcon.doc.mjs +1 -1
- package/src/Sankey/SankeyChart.doc.mjs +1 -1
- package/src/Schedule/Schedule.doc.mjs +1 -1
- package/src/Stat/Stat.doc.mjs +3 -3
- package/src/Stepper/Step.doc.mjs +1 -1
- package/src/Stepper/Step.tsx +1 -1
- package/src/Stepper/Stepper.doc.mjs +3 -3
- package/src/Stepper/Stepper.tsx +1 -1
- package/src/ThreeD/3DBar.doc.mjs +1 -1
- package/src/ThreeD/3DChart.doc.mjs +1 -1
- package/src/ThreeD/3DScatter.doc.mjs +1 -1
- package/src/ThreeD/3DScatterGL.doc.mjs +1 -1
- package/src/ThreeD/3DSurface.doc.mjs +1 -1
- package/src/index.ts +11 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAqBlD;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheet.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,oBAAoB,CAAC;AAqBlD;;;;;;GAMG;AACH,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAyJ5D,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACpE,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAEnC,8EAA8E;IAC9E,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;OAIG;IACH,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd,0EAA0E;IAC1E,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAE7C,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,MAAM,EACN,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAiB,EACjB,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAyKlB;yBAlLe,WAAW"}
|
|
@@ -248,10 +248,10 @@ export function BottomSheet({
|
|
|
248
248
|
return /*#__PURE__*/_jsx("dialog", {
|
|
249
249
|
...{
|
|
250
250
|
0: {
|
|
251
|
-
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4
|
|
251
|
+
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1s85apg x1a2a7pz xnixb3f x1abwkk1 xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
|
|
252
252
|
},
|
|
253
253
|
1: {
|
|
254
|
-
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4
|
|
254
|
+
className: "xixxii4 x10a8y8t x1o6l61p xtdtrs8 x1x1rfll x7ab17h x1ghz6dp x1717udv xjbqb8w x1rea2x4 x1a2a7pz x1lliihq xnixb3f x1abwkk1 xni466t xxiuuzi xc0dz0a xft5bk6 x15h3t91 x142juwg x1viac0w"
|
|
255
255
|
}
|
|
256
256
|
}[!!isOpen << 0],
|
|
257
257
|
ref: mergeRefs(ref, dialogRef),
|
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,85 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @file RichTextEditorAutoLinkPlugin.tsx
|
|
3
|
+
* @input Uses `@lexical/react/LexicalAutoLinkPlugin` (`AutoLinkPlugin`,
|
|
4
|
+
* `createLinkMatcherWithRegExp`) and the shared URL/email matchers from
|
|
5
|
+
* `linkUtils`.
|
|
6
|
+
* @output Exports `RichTextEditorAutoLinkPlugin` and its props type, plus the
|
|
7
|
+
* default `DEFAULT_LINK_MATCHERS`.
|
|
8
|
+
* @position Experimental (lab). Drop into RichTextEditor's `plugins` slot to
|
|
9
|
+
* auto-linkify URLs and emails as they are typed or pasted. Requires
|
|
10
|
+
* `AutoLinkNode` to be registered (it is, by default).
|
|
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 (story)
|
|
18
|
+
*
|
|
19
|
+
* NOTE: Experimental `@astryxdesign/lab` component (canary). `lexical` and
|
|
20
|
+
* `@lexical/*` are OPTIONAL peer dependencies — install them to use this.
|
|
21
|
+
*
|
|
22
|
+
* COMPATIBILITY: astryx aims for its RichTextEditor internals to eventually
|
|
23
|
+
* back Meta's EPS `EPSRichTextArea` (nest/libs/eps-lexical). EPS's auto-link is
|
|
24
|
+
* matcher-driven and applies `target="_blank"` + `rel="noopener noreferrer"` to
|
|
25
|
+
* created links (its `NEW_TAB_LINK_ATTRIBUTES`). This plugin uses the same
|
|
26
|
+
* matcher shape (`createLinkMatcherWithRegExp` + `attributes`) and the same
|
|
27
|
+
* new-tab defaults, so EPS can pass its own richer matcher set (e.g. shortform
|
|
28
|
+
* `D123` / `T456` / `S789` intern URLs) through the `matchers` prop without
|
|
29
|
+
* changing the contract. EPS ships a hardened fork of the transform itself
|
|
30
|
+
* (expanded separators, code-block exclusion) — astryx stays on the OSS
|
|
31
|
+
* `AutoLinkPlugin`, and EPS can substitute its own plugin in the same slot.
|
|
32
|
+
*/
|
|
33
|
+
import { type LinkMatcher } from '@lexical/react/LexicalAutoLinkPlugin';
|
|
34
|
+
/**
|
|
35
|
+
* Attributes written onto every auto-created link so it opens in a new tab.
|
|
36
|
+
* `rel="noopener noreferrer"` is required whenever `target="_blank"` is set, to
|
|
37
|
+
* prevent reverse-tabnabbing. Matches EPS eps-lexical's `NEW_TAB_LINK_ATTRIBUTES`.
|
|
38
|
+
*/
|
|
39
|
+
export declare const NEW_TAB_LINK_ATTRIBUTES: {
|
|
40
|
+
readonly target: "_blank";
|
|
41
|
+
readonly rel: "noopener noreferrer";
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* Default matchers: bare URLs (defaulting to `https://` when scheme-less) and
|
|
45
|
+
* email addresses (as `mailto:` links). Both carry {@link NEW_TAB_LINK_ATTRIBUTES}.
|
|
46
|
+
* URLs are passed through {@link sanitizeUrl} so only http/https/mailto/tel
|
|
47
|
+
* schemes are ever written.
|
|
48
|
+
*/
|
|
49
|
+
export declare const DEFAULT_LINK_MATCHERS: LinkMatcher[];
|
|
50
|
+
export interface RichTextEditorAutoLinkPluginProps {
|
|
51
|
+
/**
|
|
52
|
+
* Link matchers to use. Defaults to {@link DEFAULT_LINK_MATCHERS} (URLs +
|
|
53
|
+
* emails, opening in a new tab). Provide a custom array to recognize
|
|
54
|
+
* additional patterns (e.g. product-specific shortform references) — build
|
|
55
|
+
* each with `createLinkMatcherWithRegExp` from
|
|
56
|
+
* `@lexical/react/LexicalAutoLinkPlugin`.
|
|
57
|
+
*/
|
|
58
|
+
matchers?: LinkMatcher[];
|
|
59
|
+
/**
|
|
60
|
+
* Called when a link is created, updated, or removed by auto-linking.
|
|
61
|
+
* Receives the new URL (or `null` when removed) and the previous URL.
|
|
62
|
+
*/
|
|
63
|
+
onChange?: (url: string | null, prevUrl: string | null) => void;
|
|
64
|
+
}
|
|
65
|
+
/**
|
|
66
|
+
* Automatically converts typed/pasted URLs and email addresses into links.
|
|
67
|
+
* Render it inside the editor's `plugins` slot — it reaches the editor via
|
|
68
|
+
* `useLexicalComposerContext()`, so it must live within the editor's
|
|
69
|
+
* `LexicalComposer`. Requires `AutoLinkNode` (registered by default).
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* ```
|
|
73
|
+
* import {RichTextEditor, RichTextEditorAutoLinkPlugin} from '@astryxdesign/lab';
|
|
74
|
+
*
|
|
75
|
+
* <RichTextEditor
|
|
76
|
+
* label="Notes"
|
|
77
|
+
* plugins={<RichTextEditorAutoLinkPlugin />}
|
|
78
|
+
* />
|
|
79
|
+
* ```
|
|
80
|
+
*/
|
|
81
|
+
export declare function RichTextEditorAutoLinkPlugin({ matchers, onChange, }: RichTextEditorAutoLinkPluginProps): import("react").JSX.Element;
|
|
82
|
+
export declare namespace RichTextEditorAutoLinkPlugin {
|
|
83
|
+
var displayName: string;
|
|
84
|
+
}
|
|
85
|
+
//# sourceMappingURL=RichTextEditorAutoLinkPlugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RichTextEditorAutoLinkPlugin.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/RichTextEditorAutoLinkPlugin.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,sCAAsC,CAAC;AAG9C;;;;GAIG;AACH,eAAO,MAAM,uBAAuB;;;CAG1B,CAAC;AAEX;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,WAAW,EAc9C,CAAC;AAEF,MAAM,WAAW,iCAAiC;IAChD;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjE;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,4BAA4B,CAAC,EAC3C,QAAgC,EAChC,QAAQ,GACT,EAAE,iCAAiC,+BAEnC;yBALe,4BAA4B"}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
// Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
2
|
+
|
|
3
|
+
'use client';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @file RichTextEditorAutoLinkPlugin.tsx
|
|
7
|
+
* @input Uses `@lexical/react/LexicalAutoLinkPlugin` (`AutoLinkPlugin`,
|
|
8
|
+
* `createLinkMatcherWithRegExp`) and the shared URL/email matchers from
|
|
9
|
+
* `linkUtils`.
|
|
10
|
+
* @output Exports `RichTextEditorAutoLinkPlugin` and its props type, plus the
|
|
11
|
+
* default `DEFAULT_LINK_MATCHERS`.
|
|
12
|
+
* @position Experimental (lab). Drop into RichTextEditor's `plugins` slot to
|
|
13
|
+
* auto-linkify URLs and emails as they are typed or pasted. Requires
|
|
14
|
+
* `AutoLinkNode` to be registered (it is, by default).
|
|
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 (story)
|
|
22
|
+
*
|
|
23
|
+
* NOTE: Experimental `@astryxdesign/lab` component (canary). `lexical` and
|
|
24
|
+
* `@lexical/*` are OPTIONAL peer dependencies — install them to use this.
|
|
25
|
+
*
|
|
26
|
+
* COMPATIBILITY: astryx aims for its RichTextEditor internals to eventually
|
|
27
|
+
* back Meta's EPS `EPSRichTextArea` (nest/libs/eps-lexical). EPS's auto-link is
|
|
28
|
+
* matcher-driven and applies `target="_blank"` + `rel="noopener noreferrer"` to
|
|
29
|
+
* created links (its `NEW_TAB_LINK_ATTRIBUTES`). This plugin uses the same
|
|
30
|
+
* matcher shape (`createLinkMatcherWithRegExp` + `attributes`) and the same
|
|
31
|
+
* new-tab defaults, so EPS can pass its own richer matcher set (e.g. shortform
|
|
32
|
+
* `D123` / `T456` / `S789` intern URLs) through the `matchers` prop without
|
|
33
|
+
* changing the contract. EPS ships a hardened fork of the transform itself
|
|
34
|
+
* (expanded separators, code-block exclusion) — astryx stays on the OSS
|
|
35
|
+
* `AutoLinkPlugin`, and EPS can substitute its own plugin in the same slot.
|
|
36
|
+
*/
|
|
37
|
+
import { AutoLinkPlugin, createLinkMatcherWithRegExp } from '@lexical/react/LexicalAutoLinkPlugin';
|
|
38
|
+
import { URL_MATCHER, EMAIL_MATCHER, sanitizeUrl } from "./linkUtils.js";
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Attributes written onto every auto-created link so it opens in a new tab.
|
|
42
|
+
* `rel="noopener noreferrer"` is required whenever `target="_blank"` is set, to
|
|
43
|
+
* prevent reverse-tabnabbing. Matches EPS eps-lexical's `NEW_TAB_LINK_ATTRIBUTES`.
|
|
44
|
+
*/
|
|
45
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
46
|
+
export const NEW_TAB_LINK_ATTRIBUTES = {
|
|
47
|
+
target: '_blank',
|
|
48
|
+
rel: 'noopener noreferrer'
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
/**
|
|
52
|
+
* Default matchers: bare URLs (defaulting to `https://` when scheme-less) and
|
|
53
|
+
* email addresses (as `mailto:` links). Both carry {@link NEW_TAB_LINK_ATTRIBUTES}.
|
|
54
|
+
* URLs are passed through {@link sanitizeUrl} so only http/https/mailto/tel
|
|
55
|
+
* schemes are ever written.
|
|
56
|
+
*/
|
|
57
|
+
export const DEFAULT_LINK_MATCHERS = [text => {
|
|
58
|
+
const match = createLinkMatcherWithRegExp(URL_MATCHER, url => sanitizeUrl(url))(text);
|
|
59
|
+
return match ? {
|
|
60
|
+
...match,
|
|
61
|
+
attributes: NEW_TAB_LINK_ATTRIBUTES
|
|
62
|
+
} : null;
|
|
63
|
+
}, text => {
|
|
64
|
+
const match = createLinkMatcherWithRegExp(EMAIL_MATCHER, email => `mailto:${email}`)(text);
|
|
65
|
+
return match ? {
|
|
66
|
+
...match,
|
|
67
|
+
attributes: NEW_TAB_LINK_ATTRIBUTES
|
|
68
|
+
} : null;
|
|
69
|
+
}];
|
|
70
|
+
/**
|
|
71
|
+
* Automatically converts typed/pasted URLs and email addresses into links.
|
|
72
|
+
* Render it inside the editor's `plugins` slot — it reaches the editor via
|
|
73
|
+
* `useLexicalComposerContext()`, so it must live within the editor's
|
|
74
|
+
* `LexicalComposer`. Requires `AutoLinkNode` (registered by default).
|
|
75
|
+
*
|
|
76
|
+
* @example
|
|
77
|
+
* ```
|
|
78
|
+
* import {RichTextEditor, RichTextEditorAutoLinkPlugin} from '@astryxdesign/lab';
|
|
79
|
+
*
|
|
80
|
+
* <RichTextEditor
|
|
81
|
+
* label="Notes"
|
|
82
|
+
* plugins={<RichTextEditorAutoLinkPlugin />}
|
|
83
|
+
* />
|
|
84
|
+
* ```
|
|
85
|
+
*/
|
|
86
|
+
export function RichTextEditorAutoLinkPlugin({
|
|
87
|
+
matchers = DEFAULT_LINK_MATCHERS,
|
|
88
|
+
onChange
|
|
89
|
+
}) {
|
|
90
|
+
return /*#__PURE__*/_jsx(AutoLinkPlugin, {
|
|
91
|
+
matchers: matchers,
|
|
92
|
+
onChange: onChange
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
RichTextEditorAutoLinkPlugin.displayName = 'RichTextEditorAutoLinkPlugin';
|
|
@@ -0,0 +1,126 @@
|
|
|
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 link: "richtext:link";
|
|
45
|
+
readonly h1: "richtext:h1";
|
|
46
|
+
readonly h2: "richtext:h2";
|
|
47
|
+
readonly h3: "richtext:h3";
|
|
48
|
+
readonly quote: "richtext:quote";
|
|
49
|
+
readonly bullet: "richtext:bullet";
|
|
50
|
+
readonly number: "richtext:number";
|
|
51
|
+
readonly undo: "richtext:undo";
|
|
52
|
+
readonly redo: "richtext:redo";
|
|
53
|
+
};
|
|
54
|
+
export interface RichTextEditorToolbarProps {
|
|
55
|
+
/**
|
|
56
|
+
* Accessible label for the toolbar element.
|
|
57
|
+
* @default 'Text formatting'
|
|
58
|
+
*/
|
|
59
|
+
label?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Which heading levels to expose as block-type buttons, in order.
|
|
62
|
+
* @default ['h1', 'h2', 'h3']
|
|
63
|
+
*/
|
|
64
|
+
headingLevels?: ReadonlyArray<'h1' | 'h2' | 'h3'>;
|
|
65
|
+
/** Toolbar size, forwarded to the Astryx Toolbar. @default 'sm' */
|
|
66
|
+
size?: 'sm' | 'md' | 'lg';
|
|
67
|
+
/**
|
|
68
|
+
* Whether to show the insert/edit-link button. When enabled, pressing it on a
|
|
69
|
+
* collapsed or non-link selection prompts for a URL (via `promptForUrl`,
|
|
70
|
+
* `window.prompt` by default) and wraps the selection in a link; pressing it
|
|
71
|
+
* while a link is selected removes the link.
|
|
72
|
+
*
|
|
73
|
+
* Requires `LinkNode` to be registered (it is, by default) — no extra setup.
|
|
74
|
+
* The entered URL is sanitized (see `sanitizeUrl`) so only
|
|
75
|
+
* http/https/mailto/tel links are written.
|
|
76
|
+
* @default true
|
|
77
|
+
*/
|
|
78
|
+
hasLink?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Called to obtain a URL when the link button is pressed on a non-link
|
|
81
|
+
* selection. Return the URL string to link, or `null`/`''` to cancel.
|
|
82
|
+
* Receives the currently selected text as a hint. Defaults to
|
|
83
|
+
* `window.prompt`. Override to plug in a custom (e.g. Astryx Dialog) prompt.
|
|
84
|
+
*/
|
|
85
|
+
promptForUrl?: (selectedText: string) => string | null | undefined;
|
|
86
|
+
/**
|
|
87
|
+
* Whether links created via the toolbar open in a new tab. When `true`
|
|
88
|
+
* (default), the created link carries `target="_blank"` and
|
|
89
|
+
* `rel="noopener noreferrer"` — written into the link node's data (so it
|
|
90
|
+
* serializes and round-trips), not patched onto the DOM. Set `false` to
|
|
91
|
+
* create same-tab links.
|
|
92
|
+
* @default true
|
|
93
|
+
*/
|
|
94
|
+
linkOpensInNewTab?: boolean;
|
|
95
|
+
/**
|
|
96
|
+
* Extra items rendered at the end of the toolbar (after a divider). Use this
|
|
97
|
+
* to compose product-specific controls (e.g. mentions, AI) alongside the
|
|
98
|
+
* default formatting buttons.
|
|
99
|
+
*/
|
|
100
|
+
endContent?: ReactNode;
|
|
101
|
+
}
|
|
102
|
+
/**
|
|
103
|
+
* A composable formatting toolbar for {@link RichTextEditor}, built from Astryx
|
|
104
|
+
* `Toolbar` / `ToggleButton` primitives so it matches the active theme. Reads
|
|
105
|
+
* the current selection to keep the active states in sync and dispatches the
|
|
106
|
+
* standard Lexical formatting commands.
|
|
107
|
+
*
|
|
108
|
+
* Render it inside the editor's `plugins` slot — it uses
|
|
109
|
+
* `useLexicalComposerContext()` to reach the editor, so it must live within the
|
|
110
|
+
* `LexicalComposer` the editor sets up.
|
|
111
|
+
*
|
|
112
|
+
* @example
|
|
113
|
+
* ```
|
|
114
|
+
* import {RichTextEditor, RichTextEditorToolbar} from '@astryxdesign/lab';
|
|
115
|
+
*
|
|
116
|
+
* <RichTextEditor
|
|
117
|
+
* label="Notes"
|
|
118
|
+
* plugins={<RichTextEditorToolbar />}
|
|
119
|
+
* />
|
|
120
|
+
* ```
|
|
121
|
+
*/
|
|
122
|
+
export declare function RichTextEditorToolbar({ label, headingLevels, size, hasLink, promptForUrl, linkOpensInNewTab, endContent, }: RichTextEditorToolbarProps): import("react").JSX.Element;
|
|
123
|
+
export declare namespace RichTextEditorToolbar {
|
|
124
|
+
var displayName: string;
|
|
125
|
+
}
|
|
126
|
+
//# 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;AAqEvE;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;CAerB,CAAC;AAyNX,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;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAyB,EACzB,aAAkC,EAClC,IAAW,EACX,OAAc,EACd,YAAY,EACZ,iBAAwB,EACxB,UAAU,GACX,EAAE,0BAA0B,+BA+W5B;yBAvXe,qBAAqB"}
|