@mittwald/flow-react-components 0.2.0-alpha.570 → 0.2.0-alpha.571
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/CHANGELOG.md +6 -0
- package/dist/assets/doc-properties.json +176 -176
- package/dist/js/components/src/components/MarkdownEditor/MarkdownEditor.mjs +16 -31
- package/dist/js/components/src/components/MarkdownEditor/MarkdownEditor.mjs.map +1 -1
- package/dist/types/components/MarkdownEditor/MarkdownEditor.d.ts.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.2.0-alpha.571](https://github.com/mittwald/flow/compare/0.2.0-alpha.570...0.2.0-alpha.571) (2025-11-26)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **MarkdownEditor:** remove effect handler ([#2157](https://github.com/mittwald/flow/issues/2157)) ([ad5049c](https://github.com/mittwald/flow/commit/ad5049c302ac95230eefdeb5755f19298a2974f7))
|
|
11
|
+
|
|
6
12
|
# [0.2.0-alpha.570](https://github.com/mittwald/flow/compare/0.2.0-alpha.569...0.2.0-alpha.570) (2025-11-26)
|
|
7
13
|
|
|
8
14
|
### Bug Fixes
|
|
@@ -56244,6 +56244,182 @@
|
|
|
56244
56244
|
}
|
|
56245
56245
|
}
|
|
56246
56246
|
},
|
|
56247
|
+
{
|
|
56248
|
+
"tags": {},
|
|
56249
|
+
"filePath": "/home/runner/work/flow/flow/packages/components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
56250
|
+
"description": "",
|
|
56251
|
+
"displayName": "OverlayTrigger",
|
|
56252
|
+
"methods": [],
|
|
56253
|
+
"props": {
|
|
56254
|
+
"overlayType": {
|
|
56255
|
+
"defaultValue": null,
|
|
56256
|
+
"description": "",
|
|
56257
|
+
"name": "overlayType",
|
|
56258
|
+
"parent": {
|
|
56259
|
+
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
56260
|
+
"name": "Props"
|
|
56261
|
+
},
|
|
56262
|
+
"declarations": [
|
|
56263
|
+
{
|
|
56264
|
+
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
56265
|
+
"name": "Props"
|
|
56266
|
+
}
|
|
56267
|
+
],
|
|
56268
|
+
"required": true,
|
|
56269
|
+
"type": {
|
|
56270
|
+
"name": "keyof FlowComponentPropsTypes"
|
|
56271
|
+
}
|
|
56272
|
+
},
|
|
56273
|
+
"component": {
|
|
56274
|
+
"defaultValue": null,
|
|
56275
|
+
"description": "",
|
|
56276
|
+
"name": "component",
|
|
56277
|
+
"parent": {
|
|
56278
|
+
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
56279
|
+
"name": "Props"
|
|
56280
|
+
},
|
|
56281
|
+
"declarations": [
|
|
56282
|
+
{
|
|
56283
|
+
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
56284
|
+
"name": "Props"
|
|
56285
|
+
}
|
|
56286
|
+
],
|
|
56287
|
+
"required": true,
|
|
56288
|
+
"type": {
|
|
56289
|
+
"name": "AriaComponentType"
|
|
56290
|
+
}
|
|
56291
|
+
},
|
|
56292
|
+
"isDefaultOpen": {
|
|
56293
|
+
"defaultValue": null,
|
|
56294
|
+
"description": "Whether the overlay should be open initially.",
|
|
56295
|
+
"name": "isDefaultOpen",
|
|
56296
|
+
"parent": {
|
|
56297
|
+
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
56298
|
+
"name": "OverlayTriggerProps"
|
|
56299
|
+
},
|
|
56300
|
+
"declarations": [
|
|
56301
|
+
{
|
|
56302
|
+
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
56303
|
+
"name": "OverlayTriggerProps"
|
|
56304
|
+
}
|
|
56305
|
+
],
|
|
56306
|
+
"required": false,
|
|
56307
|
+
"type": {
|
|
56308
|
+
"name": "boolean"
|
|
56309
|
+
}
|
|
56310
|
+
},
|
|
56311
|
+
"controller": {
|
|
56312
|
+
"defaultValue": null,
|
|
56313
|
+
"description": "A controller to control the state of the overlay.",
|
|
56314
|
+
"name": "controller",
|
|
56315
|
+
"parent": {
|
|
56316
|
+
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
56317
|
+
"name": "OverlayTriggerProps"
|
|
56318
|
+
},
|
|
56319
|
+
"declarations": [
|
|
56320
|
+
{
|
|
56321
|
+
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
56322
|
+
"name": "OverlayTriggerProps"
|
|
56323
|
+
}
|
|
56324
|
+
],
|
|
56325
|
+
"required": false,
|
|
56326
|
+
"type": {
|
|
56327
|
+
"name": "OverlayController"
|
|
56328
|
+
}
|
|
56329
|
+
},
|
|
56330
|
+
"wrapWith": {
|
|
56331
|
+
"defaultValue": null,
|
|
56332
|
+
"description": "",
|
|
56333
|
+
"name": "wrapWith",
|
|
56334
|
+
"parent": {
|
|
56335
|
+
"fileName": "components/src/lib/componentFactory/flowComponent.tsx",
|
|
56336
|
+
"name": "FlowComponentProps"
|
|
56337
|
+
},
|
|
56338
|
+
"declarations": [
|
|
56339
|
+
{
|
|
56340
|
+
"fileName": "components/src/lib/componentFactory/flowComponent.tsx",
|
|
56341
|
+
"name": "FlowComponentProps"
|
|
56342
|
+
}
|
|
56343
|
+
],
|
|
56344
|
+
"required": false,
|
|
56345
|
+
"type": {
|
|
56346
|
+
"name": "ReactElement<unknown, string | JSXElementConstructor<any>>"
|
|
56347
|
+
}
|
|
56348
|
+
},
|
|
56349
|
+
"tunnelId": {
|
|
56350
|
+
"defaultValue": null,
|
|
56351
|
+
"description": "@internal",
|
|
56352
|
+
"name": "tunnelId",
|
|
56353
|
+
"parent": {
|
|
56354
|
+
"fileName": "components/src/lib/types/props.ts",
|
|
56355
|
+
"name": "PropsWithTunnel"
|
|
56356
|
+
},
|
|
56357
|
+
"declarations": [
|
|
56358
|
+
{
|
|
56359
|
+
"fileName": "components/src/lib/types/props.ts",
|
|
56360
|
+
"name": "PropsWithTunnel"
|
|
56361
|
+
}
|
|
56362
|
+
],
|
|
56363
|
+
"required": false,
|
|
56364
|
+
"type": {
|
|
56365
|
+
"name": "string | null"
|
|
56366
|
+
}
|
|
56367
|
+
},
|
|
56368
|
+
"ref": {
|
|
56369
|
+
"defaultValue": null,
|
|
56370
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",
|
|
56371
|
+
"name": "ref",
|
|
56372
|
+
"parent": {
|
|
56373
|
+
"fileName": "flow/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts",
|
|
56374
|
+
"name": "RefAttributes"
|
|
56375
|
+
},
|
|
56376
|
+
"declarations": [
|
|
56377
|
+
{
|
|
56378
|
+
"fileName": "flow/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts",
|
|
56379
|
+
"name": "RefAttributes"
|
|
56380
|
+
}
|
|
56381
|
+
],
|
|
56382
|
+
"required": false,
|
|
56383
|
+
"type": {
|
|
56384
|
+
"name": "Ref<HTMLSpanElement>"
|
|
56385
|
+
}
|
|
56386
|
+
},
|
|
56387
|
+
"key": {
|
|
56388
|
+
"defaultValue": null,
|
|
56389
|
+
"description": "",
|
|
56390
|
+
"name": "key",
|
|
56391
|
+
"parent": {
|
|
56392
|
+
"fileName": "flow/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts",
|
|
56393
|
+
"name": "Attributes"
|
|
56394
|
+
},
|
|
56395
|
+
"declarations": [
|
|
56396
|
+
{
|
|
56397
|
+
"fileName": "flow/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts",
|
|
56398
|
+
"name": "Attributes"
|
|
56399
|
+
}
|
|
56400
|
+
],
|
|
56401
|
+
"required": false,
|
|
56402
|
+
"type": {
|
|
56403
|
+
"name": "Key | null"
|
|
56404
|
+
}
|
|
56405
|
+
},
|
|
56406
|
+
"children": {
|
|
56407
|
+
"defaultValue": null,
|
|
56408
|
+
"description": "",
|
|
56409
|
+
"name": "children",
|
|
56410
|
+
"declarations": [
|
|
56411
|
+
{
|
|
56412
|
+
"fileName": "flow/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts",
|
|
56413
|
+
"name": "TypeLiteral"
|
|
56414
|
+
}
|
|
56415
|
+
],
|
|
56416
|
+
"required": false,
|
|
56417
|
+
"type": {
|
|
56418
|
+
"name": "ReactNode"
|
|
56419
|
+
}
|
|
56420
|
+
}
|
|
56421
|
+
}
|
|
56422
|
+
},
|
|
56247
56423
|
{
|
|
56248
56424
|
"tags": {},
|
|
56249
56425
|
"filePath": "/home/runner/work/flow/flow/packages/components/src/components/Overlay/Overlay.tsx",
|
|
@@ -58480,182 +58656,6 @@
|
|
|
58480
58656
|
}
|
|
58481
58657
|
}
|
|
58482
58658
|
},
|
|
58483
|
-
{
|
|
58484
|
-
"tags": {},
|
|
58485
|
-
"filePath": "/home/runner/work/flow/flow/packages/components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
58486
|
-
"description": "",
|
|
58487
|
-
"displayName": "OverlayTrigger",
|
|
58488
|
-
"methods": [],
|
|
58489
|
-
"props": {
|
|
58490
|
-
"overlayType": {
|
|
58491
|
-
"defaultValue": null,
|
|
58492
|
-
"description": "",
|
|
58493
|
-
"name": "overlayType",
|
|
58494
|
-
"parent": {
|
|
58495
|
-
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
58496
|
-
"name": "Props"
|
|
58497
|
-
},
|
|
58498
|
-
"declarations": [
|
|
58499
|
-
{
|
|
58500
|
-
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
58501
|
-
"name": "Props"
|
|
58502
|
-
}
|
|
58503
|
-
],
|
|
58504
|
-
"required": true,
|
|
58505
|
-
"type": {
|
|
58506
|
-
"name": "keyof FlowComponentPropsTypes"
|
|
58507
|
-
}
|
|
58508
|
-
},
|
|
58509
|
-
"component": {
|
|
58510
|
-
"defaultValue": null,
|
|
58511
|
-
"description": "",
|
|
58512
|
-
"name": "component",
|
|
58513
|
-
"parent": {
|
|
58514
|
-
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
58515
|
-
"name": "Props"
|
|
58516
|
-
},
|
|
58517
|
-
"declarations": [
|
|
58518
|
-
{
|
|
58519
|
-
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
58520
|
-
"name": "Props"
|
|
58521
|
-
}
|
|
58522
|
-
],
|
|
58523
|
-
"required": true,
|
|
58524
|
-
"type": {
|
|
58525
|
-
"name": "AriaComponentType"
|
|
58526
|
-
}
|
|
58527
|
-
},
|
|
58528
|
-
"isDefaultOpen": {
|
|
58529
|
-
"defaultValue": null,
|
|
58530
|
-
"description": "Whether the overlay should be open initially.",
|
|
58531
|
-
"name": "isDefaultOpen",
|
|
58532
|
-
"parent": {
|
|
58533
|
-
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
58534
|
-
"name": "OverlayTriggerProps"
|
|
58535
|
-
},
|
|
58536
|
-
"declarations": [
|
|
58537
|
-
{
|
|
58538
|
-
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
58539
|
-
"name": "OverlayTriggerProps"
|
|
58540
|
-
}
|
|
58541
|
-
],
|
|
58542
|
-
"required": false,
|
|
58543
|
-
"type": {
|
|
58544
|
-
"name": "boolean"
|
|
58545
|
-
}
|
|
58546
|
-
},
|
|
58547
|
-
"controller": {
|
|
58548
|
-
"defaultValue": null,
|
|
58549
|
-
"description": "A controller to control the state of the overlay.",
|
|
58550
|
-
"name": "controller",
|
|
58551
|
-
"parent": {
|
|
58552
|
-
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
58553
|
-
"name": "OverlayTriggerProps"
|
|
58554
|
-
},
|
|
58555
|
-
"declarations": [
|
|
58556
|
-
{
|
|
58557
|
-
"fileName": "components/src/components/OverlayTrigger/OverlayTrigger.tsx",
|
|
58558
|
-
"name": "OverlayTriggerProps"
|
|
58559
|
-
}
|
|
58560
|
-
],
|
|
58561
|
-
"required": false,
|
|
58562
|
-
"type": {
|
|
58563
|
-
"name": "OverlayController"
|
|
58564
|
-
}
|
|
58565
|
-
},
|
|
58566
|
-
"wrapWith": {
|
|
58567
|
-
"defaultValue": null,
|
|
58568
|
-
"description": "",
|
|
58569
|
-
"name": "wrapWith",
|
|
58570
|
-
"parent": {
|
|
58571
|
-
"fileName": "components/src/lib/componentFactory/flowComponent.tsx",
|
|
58572
|
-
"name": "FlowComponentProps"
|
|
58573
|
-
},
|
|
58574
|
-
"declarations": [
|
|
58575
|
-
{
|
|
58576
|
-
"fileName": "components/src/lib/componentFactory/flowComponent.tsx",
|
|
58577
|
-
"name": "FlowComponentProps"
|
|
58578
|
-
}
|
|
58579
|
-
],
|
|
58580
|
-
"required": false,
|
|
58581
|
-
"type": {
|
|
58582
|
-
"name": "ReactElement<unknown, string | JSXElementConstructor<any>>"
|
|
58583
|
-
}
|
|
58584
|
-
},
|
|
58585
|
-
"tunnelId": {
|
|
58586
|
-
"defaultValue": null,
|
|
58587
|
-
"description": "@internal",
|
|
58588
|
-
"name": "tunnelId",
|
|
58589
|
-
"parent": {
|
|
58590
|
-
"fileName": "components/src/lib/types/props.ts",
|
|
58591
|
-
"name": "PropsWithTunnel"
|
|
58592
|
-
},
|
|
58593
|
-
"declarations": [
|
|
58594
|
-
{
|
|
58595
|
-
"fileName": "components/src/lib/types/props.ts",
|
|
58596
|
-
"name": "PropsWithTunnel"
|
|
58597
|
-
}
|
|
58598
|
-
],
|
|
58599
|
-
"required": false,
|
|
58600
|
-
"type": {
|
|
58601
|
-
"name": "string | null"
|
|
58602
|
-
}
|
|
58603
|
-
},
|
|
58604
|
-
"ref": {
|
|
58605
|
-
"defaultValue": null,
|
|
58606
|
-
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",
|
|
58607
|
-
"name": "ref",
|
|
58608
|
-
"parent": {
|
|
58609
|
-
"fileName": "flow/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts",
|
|
58610
|
-
"name": "RefAttributes"
|
|
58611
|
-
},
|
|
58612
|
-
"declarations": [
|
|
58613
|
-
{
|
|
58614
|
-
"fileName": "flow/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts",
|
|
58615
|
-
"name": "RefAttributes"
|
|
58616
|
-
}
|
|
58617
|
-
],
|
|
58618
|
-
"required": false,
|
|
58619
|
-
"type": {
|
|
58620
|
-
"name": "Ref<HTMLSpanElement>"
|
|
58621
|
-
}
|
|
58622
|
-
},
|
|
58623
|
-
"key": {
|
|
58624
|
-
"defaultValue": null,
|
|
58625
|
-
"description": "",
|
|
58626
|
-
"name": "key",
|
|
58627
|
-
"parent": {
|
|
58628
|
-
"fileName": "flow/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts",
|
|
58629
|
-
"name": "Attributes"
|
|
58630
|
-
},
|
|
58631
|
-
"declarations": [
|
|
58632
|
-
{
|
|
58633
|
-
"fileName": "flow/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts",
|
|
58634
|
-
"name": "Attributes"
|
|
58635
|
-
}
|
|
58636
|
-
],
|
|
58637
|
-
"required": false,
|
|
58638
|
-
"type": {
|
|
58639
|
-
"name": "Key | null"
|
|
58640
|
-
}
|
|
58641
|
-
},
|
|
58642
|
-
"children": {
|
|
58643
|
-
"defaultValue": null,
|
|
58644
|
-
"description": "",
|
|
58645
|
-
"name": "children",
|
|
58646
|
-
"declarations": [
|
|
58647
|
-
{
|
|
58648
|
-
"fileName": "flow/node_modules/.pnpm/@types+react@19.2.2/node_modules/@types/react/index.d.ts",
|
|
58649
|
-
"name": "TypeLiteral"
|
|
58650
|
-
}
|
|
58651
|
-
],
|
|
58652
|
-
"required": false,
|
|
58653
|
-
"type": {
|
|
58654
|
-
"name": "ReactNode"
|
|
58655
|
-
}
|
|
58656
|
-
}
|
|
58657
|
-
}
|
|
58658
|
-
},
|
|
58659
58659
|
{
|
|
58660
58660
|
"tags": {
|
|
58661
58661
|
"flr-generate": "all"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
3
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
-
import { useState
|
|
4
|
+
import { useState } from 'react';
|
|
5
5
|
import styles from './MarkdownEditor.module.scss.mjs';
|
|
6
6
|
import { Markdown } from '../Markdown/Markdown.mjs';
|
|
7
7
|
import { TextArea } from '../TextArea/TextArea.mjs';
|
|
@@ -12,7 +12,7 @@ import { useObjectRef } from '@react-aria/utils';
|
|
|
12
12
|
import '../../lib/propsContext/propsContext.mjs';
|
|
13
13
|
import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
|
|
14
14
|
import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
|
|
15
|
-
import {
|
|
15
|
+
import { modifyValueByMarkdownSyntax, scrollToCursor } from './lib/modifyValueByMarkdownSyntax.mjs';
|
|
16
16
|
import { modifyValueByType } from './lib/modifyValueByType.mjs';
|
|
17
17
|
import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
|
|
18
18
|
|
|
@@ -32,25 +32,6 @@ const MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
|
|
|
32
32
|
} = useControlledHostValueProps(props);
|
|
33
33
|
const inputRef = useObjectRef(ref);
|
|
34
34
|
const [mode, setMode] = useState("editor");
|
|
35
|
-
const selectionPresent = useRef(null);
|
|
36
|
-
useEffect(() => {
|
|
37
|
-
const ref2 = inputRef.current;
|
|
38
|
-
const present = selectionPresent.current;
|
|
39
|
-
if (!present || !ref2) {
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
setTimeout(() => {
|
|
43
|
-
requestAnimationFrame(() => {
|
|
44
|
-
requestAnimationFrame(() => {
|
|
45
|
-
ref2.setSelectionRange(present.selectionStart, present.selectionEnd);
|
|
46
|
-
if (present.shouldScrollToCursor) {
|
|
47
|
-
scrollToCursor(value ?? "", ref2);
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
});
|
|
51
|
-
selectionPresent.current = null;
|
|
52
|
-
}, 0);
|
|
53
|
-
}, [value]);
|
|
54
35
|
const rootClassName = clsx(
|
|
55
36
|
styles.markdownEditor,
|
|
56
37
|
className,
|
|
@@ -65,11 +46,13 @@ const MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
|
|
|
65
46
|
return;
|
|
66
47
|
}
|
|
67
48
|
const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
49
|
+
requestAnimationFrame(() => {
|
|
50
|
+
if (inputRef.current) {
|
|
51
|
+
inputRef.current.value = newValue;
|
|
52
|
+
inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);
|
|
53
|
+
scrollToCursor(newValue, inputRef.current);
|
|
54
|
+
}
|
|
55
|
+
});
|
|
73
56
|
event.preventDefault();
|
|
74
57
|
onChange(newValue);
|
|
75
58
|
};
|
|
@@ -79,11 +62,13 @@ const MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
|
|
|
79
62
|
type,
|
|
80
63
|
inputRef
|
|
81
64
|
);
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
65
|
+
requestAnimationFrame(() => {
|
|
66
|
+
if (inputRef.current) {
|
|
67
|
+
inputRef.current.value = newValue;
|
|
68
|
+
inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);
|
|
69
|
+
inputRef.current.focus();
|
|
70
|
+
}
|
|
71
|
+
});
|
|
87
72
|
onChange(newValue);
|
|
88
73
|
};
|
|
89
74
|
const propsContext = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type KeyboardEventHandler,
|
|
1
|
+
{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type KeyboardEventHandler, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport { Markdown, type MarkdownProps } from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\nimport {\n modifyValueByMarkdownSyntax,\n scrollToCursor,\n} from \"@/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax\";\nimport {\n type InsertType,\n modifyValueByType,\n} from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport interface MarkdownEditorProps\n extends TextAreaProps,\n Pick<MarkdownProps, \"headingOffset\"> {}\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n const {\n isDisabled,\n isReadOnly,\n children,\n className,\n rows = 5,\n autoResizeMaxRows,\n headingOffset,\n value,\n onChange,\n ref,\n ...rest\n } = useControlledHostValueProps(props);\n\n const inputRef = useObjectRef(ref);\n const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n\n const rootClassName = clsx(\n styles.markdownEditor,\n className,\n styles[`mode-${mode}`],\n );\n\n const handleKeyDown: KeyboardEventHandler = (event) => {\n if (event.key !== \"Enter\") {\n return;\n }\n\n const modifyParams = modifyValueByMarkdownSyntax(value, inputRef);\n if (!modifyParams) {\n return;\n }\n\n const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;\n\n requestAnimationFrame(() => {\n if (inputRef.current) {\n inputRef.current.value = newValue;\n inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);\n scrollToCursor(newValue, inputRef.current);\n }\n });\n\n event.preventDefault();\n onChange(newValue);\n };\n\n const handleToolButtonPressed = (type: InsertType) => {\n const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(\n value,\n type,\n inputRef,\n );\n\n requestAnimationFrame(() => {\n if (inputRef.current) {\n inputRef.current.value = newValue;\n inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);\n inputRef.current.focus();\n }\n });\n\n onChange(newValue);\n };\n\n const propsContext: PropsContext = {\n Label: {\n tunnelId: \"label\",\n },\n };\n\n return (\n <div className={rootClassName}>\n <TunnelProvider>\n <TunnelExit id=\"label\" />\n <Toolbar\n currentMode={mode}\n isDisabled={isDisabled}\n onModeChange={setMode}\n onToolPressed={handleToolButtonPressed}\n />\n <TextArea\n {...rest}\n aria-hidden={mode === \"preview\"}\n isReadOnly={isReadOnly || mode === \"preview\"}\n isDisabled={isDisabled}\n ref={inputRef}\n value={value}\n rows={rows}\n autoResizeMaxRows={autoResizeMaxRows}\n onChange={onChange}\n onKeyDown={handleKeyDown}\n >\n <Markdown\n headingOffset={headingOffset}\n className={styles.markdown}\n style={{\n height: inputRef.current?.offsetHeight,\n }}\n >\n {value}\n </Markdown>\n <PropsContextProvider props={propsContext}>\n {children}\n </PropsContextProvider>\n </TextArea>\n </TunnelProvider>\n </div>\n );\n});\n\nexport default MarkdownEditor;\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAiBrE,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,mBACf,SAAQ,aAAa,EACnB,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC;CAAG;AAE3C,wBAAwB;AACxB,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAiBrE,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtD,MAAM,WAAW,mBACf,SAAQ,aAAa,EACnB,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC;CAAG;AAE3C,wBAAwB;AACxB,eAAO,MAAM,cAAc,6GA8GzB,CAAC;AAEH,eAAe,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.571",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@internationalized/string-compiler": "^3.2.6",
|
|
60
60
|
"@mittwald/password-tools-js": "3.0.0-alpha.18",
|
|
61
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
61
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.571",
|
|
62
62
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
63
63
|
"@react-aria/form": "^3.1.2",
|
|
64
64
|
"@react-aria/live-announcer": "^3.4.4",
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
"@faker-js/faker": "^10.1.0",
|
|
104
104
|
"@internationalized/date": "^3.10.0",
|
|
105
105
|
"@mittwald/flow-core": "",
|
|
106
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
106
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.571",
|
|
107
107
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
108
108
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
109
109
|
"@mittwald/typescript-config": "",
|
|
@@ -176,5 +176,5 @@
|
|
|
176
176
|
"optional": true
|
|
177
177
|
}
|
|
178
178
|
},
|
|
179
|
-
"gitHead": "
|
|
179
|
+
"gitHead": "203e169c0e87c75a62dd624b8bcef720a042a116"
|
|
180
180
|
}
|