@frontify/guideline-blocks-settings 1.0.11 → 1.0.12
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 +6 -6
- package/dist/components/Link/LinkInput.es.js +15 -15
- package/dist/components/Link/LinkInput.es.js.map +1 -1
- package/dist/components/Link/LinkSelector/LinkSelector.es.js +40 -44
- package/dist/components/Link/LinkSelector/LinkSelector.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.es.js +19 -22
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.es.js.map +1 -1
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonInsert.es.js +16 -19
- package/dist/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonInsert.es.js.map +1 -1
- package/dist/index.cjs.js +11 -11
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +10 -10
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,7 +7,7 @@ Provides the block settings types for the guideline-blocks.
|
|
|
7
7
|
```ts
|
|
8
8
|
/* (c) Copyright Frontify Ltd., all rights reserved. */
|
|
9
9
|
|
|
10
|
-
import {
|
|
10
|
+
import { defineSettings } from '@frontify/guideline-blocks-settings';
|
|
11
11
|
|
|
12
12
|
export const settings = defineSettings({
|
|
13
13
|
main: [
|
|
@@ -19,12 +19,12 @@ export const settings = defineSettings({
|
|
|
19
19
|
choices: [
|
|
20
20
|
{
|
|
21
21
|
value: 'noline',
|
|
22
|
-
icon:
|
|
22
|
+
icon: 'LineSpacer',
|
|
23
23
|
label: 'Spacer (no line)',
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
value: 'solid',
|
|
27
|
-
icon:
|
|
27
|
+
icon: 'LineSolid',
|
|
28
28
|
label: 'Line',
|
|
29
29
|
},
|
|
30
30
|
],
|
|
@@ -43,9 +43,9 @@ export const settings = defineSettings({
|
|
|
43
43
|
|
|
44
44
|
## Code Structure
|
|
45
45
|
|
|
46
|
-
-
|
|
47
|
-
-
|
|
48
|
-
-
|
|
46
|
+
- `components` (React components which are reused across multiple blocks)
|
|
47
|
+
- `utilities` (functionality without business logic)
|
|
48
|
+
- `helpers` (functionality with business logic)
|
|
49
49
|
|
|
50
50
|
## Using components
|
|
51
51
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as s, jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { FormControl as
|
|
3
|
-
import { isValidUrlOrEmpty as
|
|
4
|
-
import { TextInput as
|
|
2
|
+
import { FormControl as h } from "@frontify/fondue";
|
|
3
|
+
import { isValidUrlOrEmpty as v } from "./utils/url.es.js";
|
|
4
|
+
import { TextInput as D } from "../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components29.es.js";
|
|
5
5
|
import "../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components3.es.js";
|
|
6
6
|
import "react";
|
|
7
7
|
import "../../node_modules/.pnpm/@frontify_fondue-icons@0.21.0_react@18.3.1/node_modules/@frontify/fondue-icons/dist/fondue-icons4.es.js";
|
|
@@ -399,34 +399,34 @@ const Je = ({
|
|
|
399
399
|
onToggleTab: r,
|
|
400
400
|
isValidUrlOrEmpty: e,
|
|
401
401
|
appBridge: p,
|
|
402
|
-
placeholder:
|
|
403
|
-
newTab:
|
|
402
|
+
placeholder: a,
|
|
403
|
+
newTab: c,
|
|
404
404
|
url: o = "",
|
|
405
|
-
required:
|
|
406
|
-
info:
|
|
405
|
+
required: l,
|
|
406
|
+
info: n,
|
|
407
407
|
label: d,
|
|
408
408
|
buttonSize: u,
|
|
409
409
|
hideInternalLinkButton: w
|
|
410
410
|
}) => {
|
|
411
|
-
const x = e ? e(o) :
|
|
411
|
+
const x = e ? e(o) : v(o);
|
|
412
412
|
return /* @__PURE__ */ s("div", { "data-test-id": "link-input", children: [
|
|
413
413
|
/* @__PURE__ */ t(
|
|
414
|
-
|
|
414
|
+
h,
|
|
415
415
|
{
|
|
416
416
|
label: {
|
|
417
417
|
children: d,
|
|
418
418
|
htmlFor: "url",
|
|
419
|
-
required:
|
|
420
|
-
tooltip:
|
|
419
|
+
required: l,
|
|
420
|
+
tooltip: n ? { content: n, position: "top" } : void 0
|
|
421
421
|
},
|
|
422
422
|
children: /* @__PURE__ */ t(
|
|
423
|
-
|
|
423
|
+
D,
|
|
424
424
|
{
|
|
425
425
|
"data-test-id": "text-input",
|
|
426
426
|
id: "url",
|
|
427
427
|
value: o,
|
|
428
428
|
onChange: (i) => m == null ? void 0 : m(i.target.value),
|
|
429
|
-
placeholder:
|
|
429
|
+
placeholder: a ?? "https://example.com"
|
|
430
430
|
}
|
|
431
431
|
)
|
|
432
432
|
}
|
|
@@ -444,8 +444,8 @@ const Je = ({
|
|
|
444
444
|
}
|
|
445
445
|
) }),
|
|
446
446
|
/* @__PURE__ */ s("div", { className: "tw-mt-3 tw-flex tw-items-center tw-gap-1.5", children: [
|
|
447
|
-
/* @__PURE__ */ t(f, { id: "new-tab", value:
|
|
448
|
-
/* @__PURE__ */ t(y, { id: "new-tab-label", htmlFor: "new-tab", children: "Open in new tab" })
|
|
447
|
+
/* @__PURE__ */ t(f, { id: "new-tab", value: c, onChange: () => r == null ? void 0 : r(!c) }),
|
|
448
|
+
/* @__PURE__ */ t(y, { id: "new-tab-label", htmlFor: "new-tab", className: "tw-whitespace-nowrap", children: "Open in new tab" })
|
|
449
449
|
] })
|
|
450
450
|
] });
|
|
451
451
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkInput.es.js","sources":["../../../src/components/Link/LinkInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type AppBridgeBlock } from '@frontify/app-bridge';\nimport { FormControl } from '@frontify/fondue';\nimport { TextInput, Checkbox, Label } from '@frontify/fondue/components';\n\nimport { LinkSelector } from './LinkSelector';\nimport { isValidUrlOrEmpty as internalIsValidUrlOrEmpty } from './utils';\n\ntype LinkInputProps = {\n url?: string;\n info?: string;\n label?: string;\n required?: boolean;\n newTab?: boolean;\n onUrlChange?: (value: string) => void;\n onToggleTab?: (checked: boolean) => void;\n isValidUrlOrEmpty?: (url: string) => boolean;\n appBridge: AppBridgeBlock;\n placeholder?: string;\n buttonSize?: 'small' | 'medium' | 'large';\n hideInternalLinkButton?: boolean;\n};\n\nexport const LinkInput = ({\n onUrlChange,\n onToggleTab,\n isValidUrlOrEmpty,\n appBridge,\n placeholder,\n newTab,\n url = '',\n required,\n info,\n label,\n buttonSize,\n hideInternalLinkButton,\n}: LinkInputProps) => {\n const isUrlValid = isValidUrlOrEmpty ? isValidUrlOrEmpty(url) : internalIsValidUrlOrEmpty(url);\n return (\n <div data-test-id=\"link-input\">\n <FormControl\n label={{\n children: label,\n htmlFor: 'url',\n required,\n tooltip: info ? { content: info, position: 'top' } : undefined,\n }}\n >\n <TextInput\n data-test-id=\"text-input\"\n id=\"url\"\n value={url}\n onChange={(event) => onUrlChange?.(event.target.value)}\n placeholder={placeholder ?? 'https://example.com'}\n />\n </FormControl>\n {!isUrlValid && <div className=\"tw-text-text-negative tw-mt-1 tw-text-s\">Please enter a valid URL.</div>}\n\n {!hideInternalLinkButton && (\n <div className=\"tw-mt-3\">\n <LinkSelector\n url={url}\n onUrlChange={onUrlChange}\n buttonSize={buttonSize ?? 'medium'}\n getAllDocuments={() => appBridge.getAllDocuments()}\n getDocumentPagesByDocumentId={(documentId) =>\n appBridge.getDocumentPagesByDocumentId(documentId)\n }\n getDocumentSectionsByDocumentPageId={(documentPageId) =>\n appBridge.getDocumentSectionsByDocumentPageId(documentPageId)\n }\n />\n </div>\n )}\n\n <div className=\"tw-mt-3 tw-flex tw-items-center tw-gap-1.5\">\n <Checkbox id=\"new-tab\" value={newTab} onChange={() => onToggleTab?.(!newTab)} />\n <Label id=\"new-tab-label\" htmlFor=\"new-tab\">\n Open in new tab\n </Label>\n </div>\n </div>\n );\n};\n"],"names":["LinkInput","onUrlChange","onToggleTab","isValidUrlOrEmpty","appBridge","placeholder","newTab","url","required","info","label","buttonSize","hideInternalLinkButton","isUrlValid","internalIsValidUrlOrEmpty","jsxs","jsx","FormControl","TextInput","event","LinkSelector","documentId","documentPageId","Checkbox","Label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAMA,KAAY,CAAC;AAAA,EACtB,aAAAC;AAAA,EACA,aAAAC;AAAA,EAAA,mBACAC;AAAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,wBAAAC;AACJ,MAAsB;AAClB,QAAMC,IAAaV,IAAoBA,EAAkBI,CAAG,IAAIO,EAA0BP,CAAG;AAC7F,SACI,gBAAAQ,EAAC,OAAA,EAAI,gBAAa,cACd,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAO;AAAA,UACH,UAAUP;AAAA,UACV,SAAS;AAAA,UACT,UAAAF;AAAA,UACA,SAASC,IAAO,EAAE,SAASA,GAAM,UAAU,UAAU;AAAA,QAAA;AAAA,QAGzD,UAAA,gBAAAO;AAAA,UAACE;AAAAA,UAAA;AAAA,YACG,gBAAa;AAAA,YACb,IAAG;AAAA,YACH,OAAOX;AAAA,YACP,UAAU,CAACY,MAAUlB,KAAA,gBAAAA,EAAckB,EAAM,OAAO;AAAA,YAChD,aAAad,KAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,IAEH,CAACQ,KAAc,gBAAAG,EAAC,OAAA,EAAI,WAAU,2CAA0C,UAAA,6BAAyB;AAAA,IAEjG,CAACJ,KACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,KAAAb;AAAA,QACA,aAAAN;AAAA,QACA,YAAYU,KAAc;AAAA,QAC1B,iBAAiB,MAAMP,EAAU,gBAAA;AAAA,QACjC,8BAA8B,CAACiB,MAC3BjB,EAAU,6BAA6BiB,CAAU;AAAA,QAErD,qCAAqC,CAACC,MAClClB,EAAU,oCAAoCkB,CAAc;AAAA,MAAA;AAAA,IAAA,GAGxE;AAAA,IAGJ,gBAAAP,EAAC,OAAA,EAAI,WAAU,8CACX,UAAA;AAAA,MAAA,gBAAAC,EAACO,GAAA,EAAS,IAAG,WAAU,OAAOjB,GAAQ,UAAU,MAAMJ,KAAA,gBAAAA,EAAc,CAACI,GAAM,CAAG;AAAA,
|
|
1
|
+
{"version":3,"file":"LinkInput.es.js","sources":["../../../src/components/Link/LinkInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type AppBridgeBlock } from '@frontify/app-bridge';\nimport { FormControl } from '@frontify/fondue';\nimport { TextInput, Checkbox, Label } from '@frontify/fondue/components';\n\nimport { LinkSelector } from './LinkSelector';\nimport { isValidUrlOrEmpty as internalIsValidUrlOrEmpty } from './utils';\n\ntype LinkInputProps = {\n url?: string;\n info?: string;\n label?: string;\n required?: boolean;\n newTab?: boolean;\n onUrlChange?: (value: string) => void;\n onToggleTab?: (checked: boolean) => void;\n isValidUrlOrEmpty?: (url: string) => boolean;\n appBridge: AppBridgeBlock;\n placeholder?: string;\n buttonSize?: 'small' | 'medium' | 'large';\n hideInternalLinkButton?: boolean;\n};\n\nexport const LinkInput = ({\n onUrlChange,\n onToggleTab,\n isValidUrlOrEmpty,\n appBridge,\n placeholder,\n newTab,\n url = '',\n required,\n info,\n label,\n buttonSize,\n hideInternalLinkButton,\n}: LinkInputProps) => {\n const isUrlValid = isValidUrlOrEmpty ? isValidUrlOrEmpty(url) : internalIsValidUrlOrEmpty(url);\n return (\n <div data-test-id=\"link-input\">\n <FormControl\n label={{\n children: label,\n htmlFor: 'url',\n required,\n tooltip: info ? { content: info, position: 'top' } : undefined,\n }}\n >\n <TextInput\n data-test-id=\"text-input\"\n id=\"url\"\n value={url}\n onChange={(event) => onUrlChange?.(event.target.value)}\n placeholder={placeholder ?? 'https://example.com'}\n />\n </FormControl>\n {!isUrlValid && <div className=\"tw-text-text-negative tw-mt-1 tw-text-s\">Please enter a valid URL.</div>}\n\n {!hideInternalLinkButton && (\n <div className=\"tw-mt-3\">\n <LinkSelector\n url={url}\n onUrlChange={onUrlChange}\n buttonSize={buttonSize ?? 'medium'}\n getAllDocuments={() => appBridge.getAllDocuments()}\n getDocumentPagesByDocumentId={(documentId) =>\n appBridge.getDocumentPagesByDocumentId(documentId)\n }\n getDocumentSectionsByDocumentPageId={(documentPageId) =>\n appBridge.getDocumentSectionsByDocumentPageId(documentPageId)\n }\n />\n </div>\n )}\n\n <div className=\"tw-mt-3 tw-flex tw-items-center tw-gap-1.5\">\n <Checkbox id=\"new-tab\" value={newTab} onChange={() => onToggleTab?.(!newTab)} />\n <Label id=\"new-tab-label\" htmlFor=\"new-tab\" className=\"tw-whitespace-nowrap\">\n Open in new tab\n </Label>\n </div>\n </div>\n );\n};\n"],"names":["LinkInput","onUrlChange","onToggleTab","isValidUrlOrEmpty","appBridge","placeholder","newTab","url","required","info","label","buttonSize","hideInternalLinkButton","isUrlValid","internalIsValidUrlOrEmpty","jsxs","jsx","FormControl","TextInput","event","LinkSelector","documentId","documentPageId","Checkbox","Label"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAMA,KAAY,CAAC;AAAA,EACtB,aAAAC;AAAA,EACA,aAAAC;AAAA,EAAA,mBACAC;AAAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,wBAAAC;AACJ,MAAsB;AAClB,QAAMC,IAAaV,IAAoBA,EAAkBI,CAAG,IAAIO,EAA0BP,CAAG;AAC7F,SACI,gBAAAQ,EAAC,OAAA,EAAI,gBAAa,cACd,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAO;AAAA,UACH,UAAUP;AAAA,UACV,SAAS;AAAA,UACT,UAAAF;AAAA,UACA,SAASC,IAAO,EAAE,SAASA,GAAM,UAAU,UAAU;AAAA,QAAA;AAAA,QAGzD,UAAA,gBAAAO;AAAA,UAACE;AAAAA,UAAA;AAAA,YACG,gBAAa;AAAA,YACb,IAAG;AAAA,YACH,OAAOX;AAAA,YACP,UAAU,CAACY,MAAUlB,KAAA,gBAAAA,EAAckB,EAAM,OAAO;AAAA,YAChD,aAAad,KAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,IAEH,CAACQ,KAAc,gBAAAG,EAAC,OAAA,EAAI,WAAU,2CAA0C,UAAA,6BAAyB;AAAA,IAEjG,CAACJ,KACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,KAAAb;AAAA,QACA,aAAAN;AAAA,QACA,YAAYU,KAAc;AAAA,QAC1B,iBAAiB,MAAMP,EAAU,gBAAA;AAAA,QACjC,8BAA8B,CAACiB,MAC3BjB,EAAU,6BAA6BiB,CAAU;AAAA,QAErD,qCAAqC,CAACC,MAClClB,EAAU,oCAAoCkB,CAAc;AAAA,MAAA;AAAA,IAAA,GAGxE;AAAA,IAGJ,gBAAAP,EAAC,OAAA,EAAI,WAAU,8CACX,UAAA;AAAA,MAAA,gBAAAC,EAACO,GAAA,EAAS,IAAG,WAAU,OAAOjB,GAAQ,UAAU,MAAMJ,KAAA,gBAAAA,EAAc,CAACI,GAAM,CAAG;AAAA,MAC9E,gBAAAU,EAACQ,KAAM,IAAG,iBAAgB,SAAQ,WAAU,WAAU,wBAAuB,UAAA,kBAAA,CAE7E;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
2
|
-
import { useState as c, useEffect as
|
|
1
|
+
import { jsx as t, jsxs as m } from "react/jsx-runtime";
|
|
2
|
+
import { useState as c, useEffect as x } from "react";
|
|
3
3
|
/* empty css */
|
|
4
|
-
import { DocumentLinks as
|
|
5
|
-
import { Dialog as
|
|
4
|
+
import { DocumentLinks as y } from "./DocumentLinks.es.js";
|
|
5
|
+
import { Dialog as r } from "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components9.es.js";
|
|
6
6
|
import "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components3.es.js";
|
|
7
7
|
import "../../../node_modules/.pnpm/@frontify_fondue-icons@0.21.0_react@18.3.1/node_modules/@frontify/fondue-icons/dist/fondue-icons4.es.js";
|
|
8
8
|
import "../../../node_modules/.pnpm/@frontify_fondue-icons@0.21.0_react@18.3.1/node_modules/@frontify/fondue-icons/dist/fondue-icons5.es.js";
|
|
@@ -202,7 +202,7 @@ import "../../../node_modules/.pnpm/@frontify_fondue-icons@0.21.0_react@18.3.1/n
|
|
|
202
202
|
import "../../../node_modules/.pnpm/@frontify_fondue-icons@0.21.0_react@18.3.1/node_modules/@frontify/fondue-icons/dist/fondue-icons199.es.js";
|
|
203
203
|
import "../../../node_modules/.pnpm/@frontify_fondue-icons@0.21.0_react@18.3.1/node_modules/@frontify/fondue-icons/dist/fondue-icons200.es.js";
|
|
204
204
|
import "../../../node_modules/.pnpm/@frontify_fondue-icons@0.21.0_react@18.3.1/node_modules/@frontify/fondue-icons/dist/fondue-icons201.es.js";
|
|
205
|
-
import { IconLink as
|
|
205
|
+
import { IconLink as C } from "../../../node_modules/.pnpm/@frontify_fondue-icons@0.21.0_react@18.3.1/node_modules/@frontify/fondue-icons/dist/fondue-icons202.es.js";
|
|
206
206
|
import "../../../node_modules/.pnpm/@frontify_fondue-icons@0.21.0_react@18.3.1/node_modules/@frontify/fondue-icons/dist/fondue-icons203.es.js";
|
|
207
207
|
import "../../../node_modules/.pnpm/@frontify_fondue-icons@0.21.0_react@18.3.1/node_modules/@frontify/fondue-icons/dist/fondue-icons204.es.js";
|
|
208
208
|
import "../../../node_modules/.pnpm/@frontify_fondue-icons@0.21.0_react@18.3.1/node_modules/@frontify/fondue-icons/dist/fondue-icons205.es.js";
|
|
@@ -381,7 +381,7 @@ import "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify
|
|
|
381
381
|
import "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components16.es.js";
|
|
382
382
|
import "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components17.es.js";
|
|
383
383
|
import "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components18.es.js";
|
|
384
|
-
import { ScrollArea as
|
|
384
|
+
import { ScrollArea as L } from "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components19.es.js";
|
|
385
385
|
import "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components20.es.js";
|
|
386
386
|
import "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components21.es.js";
|
|
387
387
|
import "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components22.es.js";
|
|
@@ -394,24 +394,24 @@ import "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify
|
|
|
394
394
|
import "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components29.es.js";
|
|
395
395
|
import "../../../node_modules/.pnpm/@frontify_fondue-components@23.0.0_@frontify_fondue-icons@0.21.0_react@18.3.1__@frontif_cbfac6a8d761b60ea046eb612bd6a8fe/node_modules/@frontify/fondue-components/dist/fondue-components32.es.js";
|
|
396
396
|
const qe = ({
|
|
397
|
-
url:
|
|
397
|
+
url: p,
|
|
398
398
|
onUrlChange: e,
|
|
399
399
|
buttonSize: n = "medium",
|
|
400
|
-
getAllDocuments:
|
|
401
|
-
getDocumentPagesByDocumentId:
|
|
400
|
+
getAllDocuments: f,
|
|
401
|
+
getDocumentPagesByDocumentId: h,
|
|
402
402
|
getDocumentSectionsByDocumentPageId: u
|
|
403
403
|
}) => {
|
|
404
|
-
const [k, s] = c(!1), [
|
|
405
|
-
|
|
406
|
-
},
|
|
407
|
-
o.key === "Enter" && (o.preventDefault(),
|
|
404
|
+
const [k, s] = c(!1), [i, a] = c(p), D = (o) => {
|
|
405
|
+
a(o);
|
|
406
|
+
}, P = (o) => {
|
|
407
|
+
o.key === "Enter" && (o.preventDefault(), d());
|
|
408
408
|
};
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
}, [
|
|
412
|
-
const
|
|
413
|
-
e == null || e(
|
|
414
|
-
},
|
|
409
|
+
x(() => {
|
|
410
|
+
p && !i && a(p);
|
|
411
|
+
}, [p, i]);
|
|
412
|
+
const d = () => {
|
|
413
|
+
e == null || e(i), s(!1);
|
|
414
|
+
}, g = {
|
|
415
415
|
onOpenAutoFocus: () => {
|
|
416
416
|
},
|
|
417
417
|
showUnderlay: !0,
|
|
@@ -422,40 +422,36 @@ const qe = ({
|
|
|
422
422
|
/* @__PURE__ */ t(
|
|
423
423
|
"div",
|
|
424
424
|
{
|
|
425
|
-
|
|
425
|
+
onPointerDownCapture: (o) => {
|
|
426
|
+
o.stopPropagation(), o.preventDefault();
|
|
427
|
+
},
|
|
428
|
+
onFocusCapture: (o) => {
|
|
429
|
+
o.stopPropagation(), o.preventDefault();
|
|
430
|
+
},
|
|
426
431
|
"data-test-id": "internal-link-selector",
|
|
427
|
-
onKeyDown:
|
|
428
|
-
children: /* @__PURE__ */
|
|
429
|
-
/* @__PURE__ */ t(
|
|
430
|
-
/* @__PURE__ */ t(
|
|
432
|
+
onKeyDown: P,
|
|
433
|
+
children: /* @__PURE__ */ m(r.Root, { modal: !0, open: k, onOpenChange: s, children: [
|
|
434
|
+
/* @__PURE__ */ t(r.Trigger, { asChild: !0, children: /* @__PURE__ */ m(l, { size: n, emphasis: "default", children: [
|
|
435
|
+
/* @__PURE__ */ t(C, { size: "20" }),
|
|
431
436
|
"Internal link"
|
|
432
437
|
] }) }),
|
|
433
|
-
/* @__PURE__ */
|
|
434
|
-
/* @__PURE__ */ t(
|
|
435
|
-
/* @__PURE__ */ t(
|
|
436
|
-
|
|
438
|
+
/* @__PURE__ */ m(r.Content, { ...g, children: [
|
|
439
|
+
/* @__PURE__ */ t(r.Header, { children: /* @__PURE__ */ t(r.Title, { children: "Select internal link" }) }),
|
|
440
|
+
/* @__PURE__ */ t(r.Body, { padding: "none", children: /* @__PURE__ */ t(L, { padding: "compact", children: /* @__PURE__ */ t(
|
|
441
|
+
y,
|
|
437
442
|
{
|
|
438
|
-
selectedUrl:
|
|
439
|
-
onSelectUrl:
|
|
440
|
-
getAllDocuments:
|
|
441
|
-
getDocumentPagesByDocumentId:
|
|
443
|
+
selectedUrl: i,
|
|
444
|
+
onSelectUrl: D,
|
|
445
|
+
getAllDocuments: f,
|
|
446
|
+
getDocumentPagesByDocumentId: h,
|
|
442
447
|
getDocumentSectionsByDocumentPageId: u
|
|
443
448
|
}
|
|
444
449
|
) }) }),
|
|
445
|
-
/* @__PURE__ */
|
|
450
|
+
/* @__PURE__ */ m(r.Footer, { children: [
|
|
446
451
|
/* @__PURE__ */ t(l, { size: n, emphasis: "default", onPress: () => s(!1), children: "Cancel" }),
|
|
447
|
-
/* @__PURE__ */ t(
|
|
448
|
-
l,
|
|
449
|
-
{
|
|
450
|
-
size: n,
|
|
451
|
-
disabled: !r,
|
|
452
|
-
emphasis: "strong",
|
|
453
|
-
onPress: () => a(),
|
|
454
|
-
children: "Choose"
|
|
455
|
-
}
|
|
456
|
-
)
|
|
452
|
+
/* @__PURE__ */ t(l, { size: n, disabled: !i, emphasis: "strong", onPress: () => d(), children: "Choose" })
|
|
457
453
|
] })
|
|
458
|
-
] })
|
|
454
|
+
] })
|
|
459
455
|
] })
|
|
460
456
|
}
|
|
461
457
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkSelector.es.js","sources":["../../../../src/components/Link/LinkSelector/LinkSelector.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Document, type DocumentPage, type DocumentSection } from '@frontify/app-bridge';\nimport { Button, Dialog, ScrollArea } from '@frontify/fondue/components';\nimport { IconLink } from '@frontify/fondue/icons';\nimport { type KeyboardEvent, type ReactElement, useEffect, useState } from 'react';\n\nimport './LinkSelector.css';\nimport { DocumentLinks } from './DocumentLinks';\n\ntype LinkSelectorProps = {\n url: string;\n onUrlChange?: (value: string) => void;\n buttonSize?: 'small' | 'medium' | 'large';\n getAllDocuments: () => Promise<Document[]>;\n getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;\n getDocumentPagesByDocumentId: (documentId: number) => Promise<DocumentPage[]>;\n};\n\nexport const LinkSelector = ({\n url,\n onUrlChange,\n buttonSize = 'medium',\n getAllDocuments,\n getDocumentPagesByDocumentId,\n getDocumentSectionsByDocumentPageId,\n}: LinkSelectorProps): ReactElement => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [selectedUrl, setSelectedUrl] = useState<string>(url);\n\n const onSelectUrl = (url: string) => {\n setSelectedUrl(url);\n };\n\n const onPressEnter = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n saveLink();\n }\n };\n\n useEffect(() => {\n if (url && !selectedUrl) {\n setSelectedUrl(url);\n }\n }, [url, selectedUrl]);\n\n const saveLink = () => {\n onUrlChange?.(selectedUrl);\n setIsModalOpen(false);\n };\n\n const dialogProps = {\n onOpenAutoFocus: () => {},\n showUnderlay: true,\n minWidth: '800px',\n };\n\n return (\n // eslint-disable-next-line jsx-a11y-x/no-static-element-interactions\n <div\n
|
|
1
|
+
{"version":3,"file":"LinkSelector.es.js","sources":["../../../../src/components/Link/LinkSelector/LinkSelector.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type Document, type DocumentPage, type DocumentSection } from '@frontify/app-bridge';\nimport { Button, Dialog, ScrollArea } from '@frontify/fondue/components';\nimport { IconLink } from '@frontify/fondue/icons';\nimport { type KeyboardEvent, type ReactElement, useEffect, useState } from 'react';\n\nimport './LinkSelector.css';\nimport { DocumentLinks } from './DocumentLinks';\n\ntype LinkSelectorProps = {\n url: string;\n onUrlChange?: (value: string) => void;\n buttonSize?: 'small' | 'medium' | 'large';\n getAllDocuments: () => Promise<Document[]>;\n getDocumentSectionsByDocumentPageId: (documentPageId: number) => Promise<DocumentSection[]>;\n getDocumentPagesByDocumentId: (documentId: number) => Promise<DocumentPage[]>;\n};\n\nexport const LinkSelector = ({\n url,\n onUrlChange,\n buttonSize = 'medium',\n getAllDocuments,\n getDocumentPagesByDocumentId,\n getDocumentSectionsByDocumentPageId,\n}: LinkSelectorProps): ReactElement => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n const [selectedUrl, setSelectedUrl] = useState<string>(url);\n\n const onSelectUrl = (url: string) => {\n setSelectedUrl(url);\n };\n\n const onPressEnter = (event: KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter') {\n event.preventDefault();\n saveLink();\n }\n };\n\n useEffect(() => {\n if (url && !selectedUrl) {\n setSelectedUrl(url);\n }\n }, [url, selectedUrl]);\n\n const saveLink = () => {\n onUrlChange?.(selectedUrl);\n setIsModalOpen(false);\n };\n\n const dialogProps = {\n onOpenAutoFocus: () => {},\n showUnderlay: true,\n minWidth: '800px',\n };\n\n return (\n // eslint-disable-next-line jsx-a11y-x/no-static-element-interactions\n <div\n onPointerDownCapture={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n onFocusCapture={(event) => {\n event.stopPropagation();\n event.preventDefault();\n }}\n data-test-id=\"internal-link-selector\"\n onKeyDown={onPressEnter}\n >\n <Dialog.Root modal open={isModalOpen} onOpenChange={setIsModalOpen}>\n <Dialog.Trigger asChild>\n <Button size={buttonSize} emphasis=\"default\">\n <IconLink size=\"20\" />\n Internal link\n </Button>\n </Dialog.Trigger>\n <Dialog.Content {...dialogProps}>\n <Dialog.Header>\n <Dialog.Title>Select internal link</Dialog.Title>\n </Dialog.Header>\n <Dialog.Body padding=\"none\">\n <ScrollArea padding=\"compact\">\n <DocumentLinks\n selectedUrl={selectedUrl}\n onSelectUrl={onSelectUrl}\n getAllDocuments={getAllDocuments}\n getDocumentPagesByDocumentId={getDocumentPagesByDocumentId}\n getDocumentSectionsByDocumentPageId={getDocumentSectionsByDocumentPageId}\n />\n </ScrollArea>\n </Dialog.Body>\n <Dialog.Footer>\n <Button size={buttonSize} emphasis=\"default\" onPress={() => setIsModalOpen(false)}>\n Cancel\n </Button>\n <Button size={buttonSize} disabled={!selectedUrl} emphasis=\"strong\" onPress={() => saveLink()}>\n Choose\n </Button>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog.Root>\n </div>\n );\n};\n"],"names":["LinkSelector","url","onUrlChange","buttonSize","getAllDocuments","getDocumentPagesByDocumentId","getDocumentSectionsByDocumentPageId","isModalOpen","setIsModalOpen","useState","selectedUrl","setSelectedUrl","onSelectUrl","onPressEnter","event","saveLink","useEffect","dialogProps","jsx","jsxs","Dialog","Button","IconLink","ScrollArea","DocumentLinks"],"mappings":"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"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { useEditorRef as
|
|
1
|
+
import { useEditorRef as F, useEditorVersion as y, getPluginOptions as C, getAboveNode as R, getPluginType as s, getRangeBoundingClientRect as h, getEndPoint as O, getStartPoint as b, getDefaultBoundingClientRect as N, someNode as P, useHotkeys as T, useComposedRef as k } from "@frontify/fondue";
|
|
2
2
|
import { useCallback as v, useEffect as S } from "react";
|
|
3
3
|
import { ELEMENT_BUTTON as o } from "../../createButtonPlugin.es.js";
|
|
4
|
-
import { triggerFloatingButtonEdit as
|
|
5
|
-
import { useVirtualFloatingButton as
|
|
6
|
-
import { getUrlFromEditor as
|
|
7
|
-
import { useFloatingButtonSelectors as u, floatingButtonActions as n, floatingButtonSelectors as
|
|
8
|
-
import { useFloatingButtonEnter as
|
|
9
|
-
import { useFloatingButtonEscape as
|
|
10
|
-
const
|
|
11
|
-
const t =
|
|
4
|
+
import { triggerFloatingButtonEdit as A } from "../../utils/triggerFloatingButtonEdit.es.js";
|
|
5
|
+
import { useVirtualFloatingButton as D } from "./useVirtualFloatingButton.es.js";
|
|
6
|
+
import { getUrlFromEditor as H } from "../../utils/getUrl.es.js";
|
|
7
|
+
import { useFloatingButtonSelectors as u, floatingButtonActions as n, floatingButtonSelectors as g } from "./floatingButtonStore.es.js";
|
|
8
|
+
import { useFloatingButtonEnter as U } from "./useFloatingButtonEnter.es.js";
|
|
9
|
+
import { useFloatingButtonEscape as V } from "./useFloatingButtonEscape.es.js";
|
|
10
|
+
const I = (l) => {
|
|
11
|
+
const t = F(), m = u().mode(), c = u().isOpen(t.id), a = y(), { triggerFloatingButtonHotkeys: d } = C(t, o), f = v(() => {
|
|
12
12
|
const e = R(t, {
|
|
13
13
|
match: { type: s(t, o) }
|
|
14
14
|
});
|
|
@@ -20,38 +20,35 @@ const G = (g) => {
|
|
|
20
20
|
});
|
|
21
21
|
}
|
|
22
22
|
return N();
|
|
23
|
-
}, [t]), p = c && m === "edit", { update: i, style: B, floating: E } =
|
|
23
|
+
}, [t]), p = c && m === "edit", { update: i, style: B, floating: E } = D({
|
|
24
24
|
open: p,
|
|
25
25
|
getBoundingClientRect: f,
|
|
26
|
-
...
|
|
26
|
+
...l
|
|
27
27
|
});
|
|
28
28
|
return S(() => {
|
|
29
|
-
const e =
|
|
29
|
+
const e = H(t);
|
|
30
30
|
if (e && n.url(e), t.selection && P(t, {
|
|
31
31
|
match: { type: s(t, o) }
|
|
32
32
|
})) {
|
|
33
33
|
n.show("edit", t.id), i();
|
|
34
34
|
return;
|
|
35
35
|
}
|
|
36
|
-
|
|
37
|
-
}, [t,
|
|
38
|
-
|
|
36
|
+
g.mode() === "edit" && n.reset();
|
|
37
|
+
}, [t, a, i]), T(
|
|
38
|
+
d,
|
|
39
39
|
(e) => {
|
|
40
|
-
e.preventDefault(),
|
|
40
|
+
e.preventDefault(), g.mode() === "edit" && A(t);
|
|
41
41
|
},
|
|
42
42
|
{
|
|
43
43
|
enableOnContentEditable: !0
|
|
44
44
|
},
|
|
45
45
|
[]
|
|
46
|
-
),
|
|
47
|
-
style:
|
|
48
|
-
...B,
|
|
49
|
-
zIndex: 1e3
|
|
50
|
-
},
|
|
46
|
+
), U(), V(), {
|
|
47
|
+
style: B,
|
|
51
48
|
ref: k(E)
|
|
52
49
|
};
|
|
53
50
|
};
|
|
54
51
|
export {
|
|
55
|
-
|
|
52
|
+
I as useFloatingButtonEdit
|
|
56
53
|
};
|
|
57
54
|
//# sourceMappingURL=useFloatingButtonEdit.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingButtonEdit.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n type UseVirtualFloatingOptions,\n getAboveNode,\n getDefaultBoundingClientRect,\n getEndPoint,\n getPluginOptions,\n getPluginType,\n getRangeBoundingClientRect,\n getStartPoint,\n someNode,\n useComposedRef,\n useEditorRef,\n useEditorVersion,\n useHotkeys,\n} from '@frontify/fondue';\nimport { type Ref, useCallback, useEffect } from 'react';\n\nimport { type ButtonPlugin, ELEMENT_BUTTON } from '../../createButtonPlugin';\nimport { getUrlFromEditor } from '../../utils';\nimport { triggerFloatingButtonEdit } from '../../utils/triggerFloatingButtonEdit';\n\nimport {\n floatingButtonActions,\n floatingButtonSelectors,\n useFloatingButtonEnter,\n useFloatingButtonEscape,\n useFloatingButtonSelectors,\n useVirtualFloatingButton,\n} from '.';\n\nexport const useFloatingButtonEdit = (\n floatingOptions: UseVirtualFloatingOptions,\n): React.HTMLAttributes<HTMLDivElement> & { ref: Ref<HTMLDivElement> } => {\n const editor = useEditorRef();\n const mode = useFloatingButtonSelectors().mode();\n const open = useFloatingButtonSelectors().isOpen(editor.id);\n const version = useEditorVersion();\n\n const { triggerFloatingButtonHotkeys } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);\n\n const getBoundingClientRect = useCallback(() => {\n const entry = getAboveNode(editor, {\n match: { type: getPluginType(editor, ELEMENT_BUTTON) },\n });\n\n if (entry) {\n const [, path] = entry;\n return getRangeBoundingClientRect(editor, {\n anchor: getStartPoint(editor, path),\n focus: getEndPoint(editor, path),\n });\n }\n\n return getDefaultBoundingClientRect();\n }, [editor]);\n\n const isOpen = open && mode === 'edit';\n\n const { update, style, floating } = useVirtualFloatingButton({\n open: isOpen,\n getBoundingClientRect,\n ...floatingOptions,\n });\n\n useEffect(() => {\n const url = getUrlFromEditor(editor);\n if (url) {\n floatingButtonActions.url(url);\n }\n\n if (\n editor.selection &&\n someNode(editor, {\n match: { type: getPluginType(editor, ELEMENT_BUTTON) },\n })\n ) {\n floatingButtonActions.show('edit', editor.id);\n update();\n return;\n }\n\n if (floatingButtonSelectors.mode() === 'edit') {\n floatingButtonActions.reset();\n }\n }, [editor, version, update]);\n\n useHotkeys(\n triggerFloatingButtonHotkeys,\n (e) => {\n e.preventDefault();\n\n if (floatingButtonSelectors.mode() === 'edit') {\n triggerFloatingButtonEdit(editor);\n }\n },\n {\n enableOnContentEditable: true,\n },\n [],\n );\n\n useFloatingButtonEnter();\n\n useFloatingButtonEscape();\n\n return {\n style
|
|
1
|
+
{"version":3,"file":"useFloatingButtonEdit.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonEdit.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n type UseVirtualFloatingOptions,\n getAboveNode,\n getDefaultBoundingClientRect,\n getEndPoint,\n getPluginOptions,\n getPluginType,\n getRangeBoundingClientRect,\n getStartPoint,\n someNode,\n useComposedRef,\n useEditorRef,\n useEditorVersion,\n useHotkeys,\n} from '@frontify/fondue';\nimport { type Ref, useCallback, useEffect } from 'react';\n\nimport { type ButtonPlugin, ELEMENT_BUTTON } from '../../createButtonPlugin';\nimport { getUrlFromEditor } from '../../utils';\nimport { triggerFloatingButtonEdit } from '../../utils/triggerFloatingButtonEdit';\n\nimport {\n floatingButtonActions,\n floatingButtonSelectors,\n useFloatingButtonEnter,\n useFloatingButtonEscape,\n useFloatingButtonSelectors,\n useVirtualFloatingButton,\n} from '.';\n\nexport const useFloatingButtonEdit = (\n floatingOptions: UseVirtualFloatingOptions,\n): React.HTMLAttributes<HTMLDivElement> & { ref: Ref<HTMLDivElement> } => {\n const editor = useEditorRef();\n const mode = useFloatingButtonSelectors().mode();\n const open = useFloatingButtonSelectors().isOpen(editor.id);\n const version = useEditorVersion();\n\n const { triggerFloatingButtonHotkeys } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);\n\n const getBoundingClientRect = useCallback(() => {\n const entry = getAboveNode(editor, {\n match: { type: getPluginType(editor, ELEMENT_BUTTON) },\n });\n\n if (entry) {\n const [, path] = entry;\n return getRangeBoundingClientRect(editor, {\n anchor: getStartPoint(editor, path),\n focus: getEndPoint(editor, path),\n });\n }\n\n return getDefaultBoundingClientRect();\n }, [editor]);\n\n const isOpen = open && mode === 'edit';\n\n const { update, style, floating } = useVirtualFloatingButton({\n open: isOpen,\n getBoundingClientRect,\n ...floatingOptions,\n });\n\n useEffect(() => {\n const url = getUrlFromEditor(editor);\n if (url) {\n floatingButtonActions.url(url);\n }\n\n if (\n editor.selection &&\n someNode(editor, {\n match: { type: getPluginType(editor, ELEMENT_BUTTON) },\n })\n ) {\n floatingButtonActions.show('edit', editor.id);\n update();\n return;\n }\n\n if (floatingButtonSelectors.mode() === 'edit') {\n floatingButtonActions.reset();\n }\n }, [editor, version, update]);\n\n useHotkeys(\n triggerFloatingButtonHotkeys,\n (e) => {\n e.preventDefault();\n\n if (floatingButtonSelectors.mode() === 'edit') {\n triggerFloatingButtonEdit(editor);\n }\n },\n {\n enableOnContentEditable: true,\n },\n [],\n );\n\n useFloatingButtonEnter();\n\n useFloatingButtonEscape();\n\n return {\n style,\n ref: useComposedRef<HTMLElement | null>(floating),\n };\n};\n"],"names":["useFloatingButtonEdit","floatingOptions","editor","useEditorRef","mode","useFloatingButtonSelectors","open","version","useEditorVersion","triggerFloatingButtonHotkeys","getPluginOptions","ELEMENT_BUTTON","getBoundingClientRect","useCallback","entry","getAboveNode","getPluginType","path","getRangeBoundingClientRect","getStartPoint","getEndPoint","getDefaultBoundingClientRect","isOpen","update","style","floating","useVirtualFloatingButton","useEffect","url","getUrlFromEditor","floatingButtonActions","someNode","floatingButtonSelectors","useHotkeys","triggerFloatingButtonEdit","useFloatingButtonEnter","useFloatingButtonEscape","useComposedRef"],"mappings":";;;;;;;;;AAgCO,MAAMA,IAAwB,CACjCC,MACsE;AACtE,QAAMC,IAASC,EAAA,GACTC,IAAOC,EAAA,EAA6B,KAAA,GACpCC,IAAOD,EAAA,EAA6B,OAAOH,EAAO,EAAE,GACpDK,IAAUC,EAAA,GAEV,EAAE,8BAAAC,EAAA,IAAiCC,EAA+BR,GAAQS,CAAc,GAExFC,IAAwBC,EAAY,MAAM;AAC5C,UAAMC,IAAQC,EAAab,GAAQ;AAAA,MAC/B,OAAO,EAAE,MAAMc,EAAcd,GAAQS,CAAc,EAAA;AAAA,IAAE,CACxD;AAED,QAAIG,GAAO;AACP,YAAM,CAAA,EAAGG,CAAI,IAAIH;AACjB,aAAOI,EAA2BhB,GAAQ;AAAA,QACtC,QAAQiB,EAAcjB,GAAQe,CAAI;AAAA,QAClC,OAAOG,EAAYlB,GAAQe,CAAI;AAAA,MAAA,CAClC;AAAA,IACL;AAEA,WAAOI,EAAA;AAAA,EACX,GAAG,CAACnB,CAAM,CAAC,GAELoB,IAAShB,KAAQF,MAAS,QAE1B,EAAE,QAAAmB,GAAQ,OAAAC,GAAO,UAAAC,EAAA,IAAaC,EAAyB;AAAA,IACzD,MAAMJ;AAAA,IACN,uBAAAV;AAAA,IACA,GAAGX;AAAA,EAAA,CACN;AAED,SAAA0B,EAAU,MAAM;AACZ,UAAMC,IAAMC,EAAiB3B,CAAM;AAKnC,QAJI0B,KACAE,EAAsB,IAAIF,CAAG,GAI7B1B,EAAO,aACP6B,EAAS7B,GAAQ;AAAA,MACb,OAAO,EAAE,MAAMc,EAAcd,GAAQS,CAAc,EAAA;AAAA,IAAE,CACxD,GACH;AACE,MAAAmB,EAAsB,KAAK,QAAQ5B,EAAO,EAAE,GAC5CqB,EAAA;AACA;AAAA,IACJ;AAEA,IAAIS,EAAwB,KAAA,MAAW,UACnCF,EAAsB,MAAA;AAAA,EAE9B,GAAG,CAAC5B,GAAQK,GAASgB,CAAM,CAAC,GAE5BU;AAAA,IACIxB;AAAA,IACA,CAAC,MAAM;AACH,QAAE,eAAA,GAEEuB,EAAwB,KAAA,MAAW,UACnCE,EAA0BhC,CAAM;AAAA,IAExC;AAAA,IACA;AAAA,MACI,yBAAyB;AAAA,IAAA;AAAA,IAE7B,CAAA;AAAA,EAAC,GAGLiC,EAAA,GAEAC,EAAA,GAEO;AAAA,IACH,OAAAZ;AAAA,IACA,KAAKa,EAAmCZ,CAAQ;AAAA,EAAA;AAExD;"}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { useEditorRef as
|
|
1
|
+
import { useEditorRef as f, useFocused as p, getPluginOptions as c, useHotkeys as d, useComposedRef as a, getSelectionBoundingClientRect as B } from "@frontify/fondue";
|
|
2
2
|
import { useEffect as E } from "react";
|
|
3
3
|
import { ELEMENT_BUTTON as F } from "../../createButtonPlugin.es.js";
|
|
4
|
-
import { triggerFloatingButtonInsert as
|
|
5
|
-
import { useFloatingButtonSelectors as i, floatingButtonActions as
|
|
6
|
-
import { useVirtualFloatingButton as
|
|
7
|
-
import { useFloatingButtonEscape as
|
|
8
|
-
const
|
|
9
|
-
const e =
|
|
10
|
-
|
|
4
|
+
import { triggerFloatingButtonInsert as C } from "../../utils/triggerFloatingButtonInsert.es.js";
|
|
5
|
+
import { useFloatingButtonSelectors as i, floatingButtonActions as O } from "./floatingButtonStore.es.js";
|
|
6
|
+
import { useVirtualFloatingButton as R } from "./useVirtualFloatingButton.es.js";
|
|
7
|
+
import { useFloatingButtonEscape as y } from "./useFloatingButtonEscape.es.js";
|
|
8
|
+
const N = (r) => {
|
|
9
|
+
const e = f(), o = p(), s = i().mode(), t = i().isOpen(e.id), { triggerFloatingButtonHotkeys: u } = c(e, F);
|
|
10
|
+
d(
|
|
11
11
|
u,
|
|
12
12
|
(m) => {
|
|
13
|
-
m.preventDefault(),
|
|
13
|
+
m.preventDefault(), C(e, {
|
|
14
14
|
focused: o
|
|
15
15
|
});
|
|
16
16
|
},
|
|
@@ -19,23 +19,20 @@ const M = (s) => {
|
|
|
19
19
|
},
|
|
20
20
|
[o]
|
|
21
21
|
);
|
|
22
|
-
const { update: n, style: l, floating: g } =
|
|
23
|
-
open: t &&
|
|
22
|
+
const { update: n, style: l, floating: g } = R({
|
|
23
|
+
open: t && s === "insert",
|
|
24
24
|
getBoundingClientRect: B,
|
|
25
25
|
whileElementsMounted: void 0,
|
|
26
|
-
...
|
|
26
|
+
...r
|
|
27
27
|
});
|
|
28
28
|
return E(() => {
|
|
29
|
-
t && n(),
|
|
30
|
-
}, [t, n]),
|
|
31
|
-
style:
|
|
32
|
-
...l,
|
|
33
|
-
zIndex: 1e3
|
|
34
|
-
},
|
|
29
|
+
t && n(), O.updated(t);
|
|
30
|
+
}, [t, n]), y(), {
|
|
31
|
+
style: l,
|
|
35
32
|
ref: a(g)
|
|
36
33
|
};
|
|
37
34
|
};
|
|
38
35
|
export {
|
|
39
|
-
|
|
36
|
+
N as useFloatingButtonInsert
|
|
40
37
|
};
|
|
41
38
|
//# sourceMappingURL=useFloatingButtonInsert.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFloatingButtonInsert.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonInsert.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n type UseVirtualFloatingOptions,\n getPluginOptions,\n getSelectionBoundingClientRect,\n useComposedRef,\n useEditorRef,\n useFocused,\n useHotkeys,\n} from '@frontify/fondue';\nimport { type Ref, useEffect } from 'react';\n\nimport { type ButtonPlugin, ELEMENT_BUTTON } from '../../createButtonPlugin';\nimport { triggerFloatingButtonInsert } from '../../utils/triggerFloatingButtonInsert';\n\nimport {\n floatingButtonActions,\n useFloatingButtonEscape,\n useFloatingButtonSelectors,\n useVirtualFloatingButton,\n} from '.';\n\nexport const useFloatingButtonInsert = (\n floatingOptions: UseVirtualFloatingOptions,\n): React.HTMLAttributes<HTMLDivElement> & { ref: Ref<HTMLDivElement> } => {\n const editor = useEditorRef();\n const focused = useFocused();\n const mode = useFloatingButtonSelectors().mode();\n const open = useFloatingButtonSelectors().isOpen(editor.id);\n\n const { triggerFloatingButtonHotkeys } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);\n\n useHotkeys(\n triggerFloatingButtonHotkeys,\n (e) => {\n e.preventDefault();\n\n triggerFloatingButtonInsert(editor, {\n focused,\n });\n },\n {\n enableOnContentEditable: true,\n },\n [focused],\n );\n\n const { update, style, floating } = useVirtualFloatingButton({\n open: open && mode === 'insert',\n getBoundingClientRect: getSelectionBoundingClientRect,\n whileElementsMounted: undefined,\n ...floatingOptions,\n });\n\n // wait for update before focusing input\n useEffect(() => {\n if (open) {\n update();\n }\n floatingButtonActions.updated(open);\n }, [open, update]);\n\n useFloatingButtonEscape();\n\n return {\n style
|
|
1
|
+
{"version":3,"file":"useFloatingButtonInsert.es.js","sources":["../../../../../../../src/components/RichTextEditor/plugins/ButtonPlugin/components/FloatingButton/useFloatingButtonInsert.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n type UseVirtualFloatingOptions,\n getPluginOptions,\n getSelectionBoundingClientRect,\n useComposedRef,\n useEditorRef,\n useFocused,\n useHotkeys,\n} from '@frontify/fondue';\nimport { type Ref, useEffect } from 'react';\n\nimport { type ButtonPlugin, ELEMENT_BUTTON } from '../../createButtonPlugin';\nimport { triggerFloatingButtonInsert } from '../../utils/triggerFloatingButtonInsert';\n\nimport {\n floatingButtonActions,\n useFloatingButtonEscape,\n useFloatingButtonSelectors,\n useVirtualFloatingButton,\n} from '.';\n\nexport const useFloatingButtonInsert = (\n floatingOptions: UseVirtualFloatingOptions,\n): React.HTMLAttributes<HTMLDivElement> & { ref: Ref<HTMLDivElement> } => {\n const editor = useEditorRef();\n const focused = useFocused();\n const mode = useFloatingButtonSelectors().mode();\n const open = useFloatingButtonSelectors().isOpen(editor.id);\n\n const { triggerFloatingButtonHotkeys } = getPluginOptions<ButtonPlugin>(editor, ELEMENT_BUTTON);\n\n useHotkeys(\n triggerFloatingButtonHotkeys,\n (e) => {\n e.preventDefault();\n\n triggerFloatingButtonInsert(editor, {\n focused,\n });\n },\n {\n enableOnContentEditable: true,\n },\n [focused],\n );\n\n const { update, style, floating } = useVirtualFloatingButton({\n open: open && mode === 'insert',\n getBoundingClientRect: getSelectionBoundingClientRect,\n whileElementsMounted: undefined,\n ...floatingOptions,\n });\n\n // wait for update before focusing input\n useEffect(() => {\n if (open) {\n update();\n }\n floatingButtonActions.updated(open);\n }, [open, update]);\n\n useFloatingButtonEscape();\n\n return {\n style,\n ref: useComposedRef<HTMLElement | null>(floating),\n };\n};\n"],"names":["useFloatingButtonInsert","floatingOptions","editor","useEditorRef","focused","useFocused","mode","useFloatingButtonSelectors","open","triggerFloatingButtonHotkeys","getPluginOptions","ELEMENT_BUTTON","useHotkeys","e","triggerFloatingButtonInsert","update","style","floating","useVirtualFloatingButton","getSelectionBoundingClientRect","useEffect","floatingButtonActions","useFloatingButtonEscape","useComposedRef"],"mappings":";;;;;;;AAuBO,MAAMA,IAA0B,CACnCC,MACsE;AACtE,QAAMC,IAASC,EAAA,GACTC,IAAUC,EAAA,GACVC,IAAOC,EAAA,EAA6B,KAAA,GACpCC,IAAOD,EAAA,EAA6B,OAAOL,EAAO,EAAE,GAEpD,EAAE,8BAAAO,EAAA,IAAiCC,EAA+BR,GAAQS,CAAc;AAE9F,EAAAC;AAAA,IACIH;AAAA,IACA,CAACI,MAAM;AACH,MAAAA,EAAE,eAAA,GAEFC,EAA4BZ,GAAQ;AAAA,QAChC,SAAAE;AAAA,MAAA,CACH;AAAA,IACL;AAAA,IACA;AAAA,MACI,yBAAyB;AAAA,IAAA;AAAA,IAE7B,CAACA,CAAO;AAAA,EAAA;AAGZ,QAAM,EAAE,QAAAW,GAAQ,OAAAC,GAAO,UAAAC,EAAA,IAAaC,EAAyB;AAAA,IACzD,MAAMV,KAAQF,MAAS;AAAA,IACvB,uBAAuBa;AAAA,IACvB,sBAAsB;AAAA,IACtB,GAAGlB;AAAA,EAAA,CACN;AAGD,SAAAmB,EAAU,MAAM;AACZ,IAAIZ,KACAO,EAAA,GAEJM,EAAsB,QAAQb,CAAI;AAAA,EACtC,GAAG,CAACA,GAAMO,CAAM,CAAC,GAEjBO,EAAA,GAEO;AAAA,IACH,OAAAN;AAAA,IACA,KAAKO,EAAmCN,CAAQ;AAAA,EAAA;AAExD;"}
|