@uva-glass/component-library 1.52.0 → 1.53.0
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/{Lexical.prod-DSsdOWxu.js → Lexical.prod-DNRTKPfN.js} +264 -251
- package/dist/Lexical.prod-DNRTKPfN.js.map +1 -0
- package/dist/LexicalUtils.prod-D_BPEjfg.js +64 -0
- package/dist/LexicalUtils.prod-D_BPEjfg.js.map +1 -0
- package/dist/ListPlugin-CgNBzfIl.js +588 -0
- package/dist/ListPlugin-CgNBzfIl.js.map +1 -0
- package/dist/RteEditor.module-BjGyWKhW.js +26 -0
- package/dist/RteEditor.module-BjGyWKhW.js.map +1 -0
- package/dist/assets/RteEditor.css +1 -1
- package/dist/assets/useFlyout.css +1 -0
- package/dist/components/Buttons/Button.stories.js +1 -1
- package/dist/components/Buttons/Button.stories.js.map +1 -1
- package/dist/components/Buttons/LinkButton.stories.js +5 -5
- package/dist/components/Buttons/LinkButton.stories.js.map +1 -1
- package/dist/components/Buttons/MenuButton.stories.js +10 -10
- package/dist/components/Buttons/MenuButton.stories.js.map +1 -1
- package/dist/components/HorizontalList/HorizontalList.stories.js +1 -1
- package/dist/components/HorizontalList/HorizontalList.stories.js.map +1 -1
- package/dist/components/Icon/Icon.d.ts +1 -1
- package/dist/components/Icon/Icon.js.map +1 -1
- package/dist/components/Icon/icons/index.d.ts +9 -0
- package/dist/components/Icon/icons/index.js +52 -37
- package/dist/components/Icon/icons/index.js.map +1 -1
- package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js +2 -2
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.d.ts +1 -0
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +62 -0
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js.map +1 -0
- package/dist/components/RteEditor/Plugins/HistoryPlugin/index.d.ts +1 -0
- package/dist/components/RteEditor/Plugins/HistoryPlugin/index.js +5 -0
- package/dist/components/RteEditor/Plugins/HistoryPlugin/index.js.map +1 -0
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.d.ts +6 -0
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js +98 -0
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js.map +1 -0
- package/dist/components/RteEditor/Plugins/LinkPlugin/helpers.d.ts +8 -0
- package/dist/components/RteEditor/Plugins/LinkPlugin/helpers.js +7 -0
- package/dist/components/RteEditor/Plugins/LinkPlugin/helpers.js.map +1 -0
- package/dist/components/RteEditor/Plugins/LinkPlugin/index.d.ts +1 -0
- package/dist/components/RteEditor/Plugins/LinkPlugin/index.js +5 -0
- package/dist/components/RteEditor/Plugins/LinkPlugin/index.js.map +1 -0
- package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js +3 -3
- package/dist/components/RteEditor/Plugins/ListPlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.d.ts +6 -0
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +34 -27
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/index.d.ts +2 -0
- package/dist/components/RteEditor/Plugins/index.js +10 -6
- package/dist/components/RteEditor/Plugins/index.js.map +1 -1
- package/dist/components/RteEditor/RteEditor.js +681 -501
- package/dist/components/RteEditor/RteEditor.js.map +1 -1
- package/dist/components/RteEditor/RteEditor.stories.js +1 -1
- package/dist/components/RteEditor/RteEditor.stories.js.map +1 -1
- package/dist/components/RteEditor/UvaTheme/UvaTheme.d.ts +1 -0
- package/dist/components/RteEditor/UvaTheme/UvaTheme.js +5 -4
- package/dist/components/RteEditor/UvaTheme/UvaTheme.js.map +1 -1
- package/dist/components/RteEditor/hooks/index.d.ts +1 -0
- package/dist/components/RteEditor/hooks/index.js +5 -0
- package/dist/components/RteEditor/hooks/index.js.map +1 -0
- package/dist/components/RteEditor/hooks/useFlyout.d.ts +12 -0
- package/dist/components/RteEditor/hooks/useFlyout.js +45 -0
- package/dist/components/RteEditor/hooks/useFlyout.js.map +1 -0
- package/dist/helpers-TSjo3aAv.js +365 -0
- package/dist/helpers-TSjo3aAv.js.map +1 -0
- package/package.json +15 -15
- package/dist/Lexical.prod-DSsdOWxu.js.map +0 -1
- package/dist/ListPlugin-Bu2AbCDB.js +0 -643
- package/dist/ListPlugin-Bu2AbCDB.js.map +0 -1
- package/dist/RteEditor.module-RkKUrkOO.js +0 -21
- package/dist/RteEditor.module-RkKUrkOO.js.map +0 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { u as m, d as n } from "../../../../Lexical.prod-
|
|
2
|
+
import { u as m, d as n } from "../../../../Lexical.prod-DNRTKPfN.js";
|
|
3
3
|
import { c as s } from "../../../../clsx-OuTLNxxd.js";
|
|
4
4
|
import { Icon as d } from "../../../Icon/Icon.js";
|
|
5
|
-
import { s as t } from "../../../../RteEditor.module-
|
|
5
|
+
import { s as t } from "../../../../RteEditor.module-BjGyWKhW.js";
|
|
6
6
|
const b = {
|
|
7
7
|
bold: "FormatBold",
|
|
8
8
|
italic: "FormatItalic"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const HistoryPlugin: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsxs as b, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { c as i } from "../../../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { u as f, $ as _, K as h, h as C, g as U } from "../../../../Lexical.prod-DNRTKPfN.js";
|
|
4
|
+
import { useState as n, useEffect as a } from "react";
|
|
5
|
+
import { Icon as m } from "../../../Icon/Icon.js";
|
|
6
|
+
import "../../../Buttons/Button.js";
|
|
7
|
+
import "../../../Buttons/LinkButton.js";
|
|
8
|
+
import "@react-aria/button";
|
|
9
|
+
import "@react-aria/dialog";
|
|
10
|
+
import "@react-aria/focus";
|
|
11
|
+
import "@react-aria/overlays";
|
|
12
|
+
import "../../../OverlayCloseButton/OverlayCloseButton.js";
|
|
13
|
+
import "../../../GridRow/GridRow.js";
|
|
14
|
+
import "../../../IconButton/IconButton.js";
|
|
15
|
+
import "../../../Input/Input.js";
|
|
16
|
+
import "../../../InputField/InputField.js";
|
|
17
|
+
import "react-router-dom";
|
|
18
|
+
import "../../../../MultiSelect-D1FnMER4.js";
|
|
19
|
+
import { s as t } from "../../../../RteEditor.module-BjGyWKhW.js";
|
|
20
|
+
import "../../../SelectListbox/SelectListbox.js";
|
|
21
|
+
import "../../../SelectListbox/SelectProvider.js";
|
|
22
|
+
const F = () => {
|
|
23
|
+
const [o] = f(), [s, d] = n(!1), [l, p] = n(!1), c = () => {
|
|
24
|
+
o.dispatchCommand(C, void 0);
|
|
25
|
+
}, u = () => {
|
|
26
|
+
o.dispatchCommand(U, void 0);
|
|
27
|
+
};
|
|
28
|
+
return a(() => o.registerCommand(
|
|
29
|
+
_,
|
|
30
|
+
(e) => (d(e), !1),
|
|
31
|
+
1
|
|
32
|
+
), [o]), a(() => o.registerCommand(
|
|
33
|
+
h,
|
|
34
|
+
(e) => (p(e), !1),
|
|
35
|
+
1
|
|
36
|
+
), [o]), /* @__PURE__ */ b("div", { className: t["editor__toolbar-button-group"], children: [
|
|
37
|
+
/* @__PURE__ */ r(
|
|
38
|
+
"button",
|
|
39
|
+
{
|
|
40
|
+
onClick: c,
|
|
41
|
+
className: i(t["editor__toolbar-button"], t["editor__toolbar-button--undo"]),
|
|
42
|
+
"aria-label": "Undo",
|
|
43
|
+
disabled: !s,
|
|
44
|
+
children: /* @__PURE__ */ r(m, { name: "Undo", size: 20 })
|
|
45
|
+
}
|
|
46
|
+
),
|
|
47
|
+
/* @__PURE__ */ r(
|
|
48
|
+
"button",
|
|
49
|
+
{
|
|
50
|
+
onClick: u,
|
|
51
|
+
className: i(t["editor__toolbar-button"], t["editor__toolbar-button--redo"]),
|
|
52
|
+
"aria-label": "Undo",
|
|
53
|
+
disabled: !l,
|
|
54
|
+
children: /* @__PURE__ */ r(m, { name: "Redo", size: 20 })
|
|
55
|
+
}
|
|
56
|
+
)
|
|
57
|
+
] });
|
|
58
|
+
};
|
|
59
|
+
export {
|
|
60
|
+
F as HistoryPlugin
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=HistoryPlugin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HistoryPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { CAN_UNDO_COMMAND, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND } from 'lexical';\nimport { useEffect, useState } from 'react';\n\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\n\nexport const HistoryPlugin = () => {\n const [editor] = useLexicalComposerContext();\n const [canUndo, setCanUndo] = useState(false);\n const [canRedo, setCanRedo] = useState(false);\n\n const handleUndo = () => {\n editor.dispatchCommand(UNDO_COMMAND, undefined);\n };\n\n const handleRedo = () => {\n editor.dispatchCommand(REDO_COMMAND, undefined);\n };\n\n useEffect(() => {\n return editor.registerCommand<boolean>(\n CAN_UNDO_COMMAND,\n (payload) => {\n setCanUndo(payload);\n return false;\n },\n 1\n );\n }, [editor]);\n\n useEffect(() => {\n return editor.registerCommand<boolean>(\n CAN_REDO_COMMAND,\n (payload) => {\n setCanRedo(payload);\n return false;\n },\n 1\n );\n }, [editor]);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <button\n onClick={handleUndo}\n className={clsx(styles['editor__toolbar-button'], styles[`editor__toolbar-button--undo`])}\n aria-label={`Undo`}\n disabled={!canUndo}\n >\n <Icon name=\"Undo\" size={20} />\n </button>\n <button\n onClick={handleRedo}\n className={clsx(styles['editor__toolbar-button'], styles[`editor__toolbar-button--redo`])}\n aria-label={`Undo`}\n disabled={!canRedo}\n >\n <Icon name=\"Redo\" size={20} />\n </button>\n </div>\n );\n};\n"],"names":["HistoryPlugin","editor","useLexicalComposerContext","canUndo","setCanUndo","useState","canRedo","setCanRedo","handleUndo","UNDO_COMMAND","handleRedo","REDO_COMMAND","useEffect","CAN_UNDO_COMMAND","payload","CAN_REDO_COMMAND","jsxs","styles","jsx","clsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAQO,MAAMA,IAAgB,MAAM;AAC3B,QAAA,CAACC,CAAM,IAAIC,KACX,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAASC,CAAU,IAAIF,EAAS,EAAK,GAEtCG,IAAa,MAAM;AAChB,IAAAP,EAAA,gBAAgBQ,GAAc,MAAS;AAAA,EAAA,GAG1CC,IAAa,MAAM;AAChB,IAAAT,EAAA,gBAAgBU,GAAc,MAAS;AAAA,EAAA;AAGhD,SAAAC,EAAU,MACDX,EAAO;AAAA,IACZY;AAAAA,IACA,CAACC,OACCV,EAAWU,CAAO,GACX;AAAA,IAET;AAAA,EAAA,GAED,CAACb,CAAM,CAAC,GAEXW,EAAU,MACDX,EAAO;AAAA,IACZc;AAAAA,IACA,CAACD,OACCP,EAAWO,CAAO,GACX;AAAA,IAET;AAAA,EAAA,GAED,CAACb,CAAM,CAAC,GAGR,gBAAAe,EAAA,OAAA,EAAI,WAAWC,EAAO,8BAA8B,GACnD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASV;AAAA,QACT,WAAWW,EAAKF,EAAO,wBAAwB,GAAGA,EAAO,8BAA8B,CAAC;AAAA,QACxF,cAAY;AAAA,QACZ,UAAU,CAACd;AAAA,QAEX,UAAC,gBAAAe,EAAAE,GAAA,EAAK,MAAK,QAAO,MAAM,IAAI;AAAA,MAAA;AAAA,IAC9B;AAAA,IACA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASR;AAAA,QACT,WAAWS,EAAKF,EAAO,wBAAwB,GAAGA,EAAO,8BAA8B,CAAC;AAAA,QACxF,cAAY;AAAA,QACZ,UAAU,CAACX;AAAA,QAEX,UAAC,gBAAAY,EAAAE,GAAA,EAAK,MAAK,QAAO,MAAM,IAAI;AAAA,MAAA;AAAA,IAC9B;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './HistoryPlugin';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { jsxs as i, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { u as S } from "../../../../Lexical.prod-DNRTKPfN.js";
|
|
3
|
+
import { c as _ } from "../../../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { U as k, v as E } from "../../../../helpers-TSjo3aAv.js";
|
|
5
|
+
import { useState as g, useRef as R, useEffect as f } from "react";
|
|
6
|
+
import { useFlyout as T } from "../../hooks/useFlyout.js";
|
|
7
|
+
import { Icon as v } from "../../../Icon/Icon.js";
|
|
8
|
+
import { Button as F } from "../../../Buttons/Button.js";
|
|
9
|
+
import "../../../Buttons/LinkButton.js";
|
|
10
|
+
import "@react-aria/button";
|
|
11
|
+
import { Checkbox as V } from "../../../Checkbox/Checkbox.js";
|
|
12
|
+
import { Label as y } from "../../../Label/Label.js";
|
|
13
|
+
import "@react-aria/dialog";
|
|
14
|
+
import "@react-aria/focus";
|
|
15
|
+
import "@react-aria/overlays";
|
|
16
|
+
import "../../../OverlayCloseButton/OverlayCloseButton.js";
|
|
17
|
+
import { FeedbackBox as j } from "../../../FeedbackBox/FeedbackBox.js";
|
|
18
|
+
import { FormField as C } from "../../../FormField/FormField.js";
|
|
19
|
+
import "../../../GridRow/GridRow.js";
|
|
20
|
+
import "../../../IconButton/IconButton.js";
|
|
21
|
+
import "../../../Input/Input.js";
|
|
22
|
+
import { InputField as z } from "../../../InputField/InputField.js";
|
|
23
|
+
import "react-router-dom";
|
|
24
|
+
import "../../../../MultiSelect-D1FnMER4.js";
|
|
25
|
+
import { s as t } from "../../../../RteEditor.module-BjGyWKhW.js";
|
|
26
|
+
import "../../../SelectListbox/SelectListbox.js";
|
|
27
|
+
import "../../../SelectListbox/SelectProvider.js";
|
|
28
|
+
const cr = ({ isLink: o = { active: !1, url: "", target: "_self" } }) => {
|
|
29
|
+
const [c, m] = g(o.target === "_blank"), e = R(null), [p] = S(), { flyout: N, showFlyout: s, closeFlyout: u, isVisible: n } = T(), [a, h] = g(null), x = () => {
|
|
30
|
+
m((l) => !l);
|
|
31
|
+
}, w = () => {
|
|
32
|
+
var b;
|
|
33
|
+
const l = (b = e.current) == null ? void 0 : b.value;
|
|
34
|
+
if (!l && l.trim() === "" || E(l) === !1) {
|
|
35
|
+
h("Geen of geen geldige url ingevoerd");
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
p.dispatchCommand(k, {
|
|
39
|
+
url: l,
|
|
40
|
+
target: c ? "_blank" : "_self"
|
|
41
|
+
}), u();
|
|
42
|
+
}, U = () => {
|
|
43
|
+
p.dispatchCommand(k, null);
|
|
44
|
+
}, d = {
|
|
45
|
+
children: /* @__PURE__ */ i("div", { className: t.editor__linkform, children: [
|
|
46
|
+
/* @__PURE__ */ i(C, { className: t["editor__linkform-input-field"], children: [
|
|
47
|
+
/* @__PURE__ */ r(y, { htmlFor: "lnikUrl", children: "Link" }),
|
|
48
|
+
/* @__PURE__ */ r(z, { id: "lnikUrl", ref: e, placeholder: "http(s)://" }),
|
|
49
|
+
a && /* @__PURE__ */ r(j, { level: "error", feedback: a })
|
|
50
|
+
] }),
|
|
51
|
+
/* @__PURE__ */ i(C, { inline: !0, children: [
|
|
52
|
+
/* @__PURE__ */ r(V, { id: "linkTarget", onChange: x, checked: c }),
|
|
53
|
+
/* @__PURE__ */ r(y, { htmlFor: "linkTarget", children: "Open in nieuwe window" })
|
|
54
|
+
] }),
|
|
55
|
+
/* @__PURE__ */ i("div", { className: t["editor__linkform-footer"], children: [
|
|
56
|
+
/* @__PURE__ */ r(F, { variant: "secondary", onClick: u, children: "Annuleer" }),
|
|
57
|
+
/* @__PURE__ */ r(F, { variant: "primary", onClick: w, children: "Link" })
|
|
58
|
+
] })
|
|
59
|
+
] })
|
|
60
|
+
};
|
|
61
|
+
return f(() => {
|
|
62
|
+
a && s(d);
|
|
63
|
+
}, [a]), f(() => {
|
|
64
|
+
n && s(d);
|
|
65
|
+
}, [c]), f(() => {
|
|
66
|
+
!n && e.current ? (h(null), e.current.value = "", m(!1)) : e.current && o.url && (e.current.value = o.url || "", m(o.target === "_blank"), console.log("focus", e.current), e.current.focus());
|
|
67
|
+
}, [n, o.url, o.target]), /* @__PURE__ */ i("div", { className: t["editor__toolbar-button-group"], children: [
|
|
68
|
+
/* @__PURE__ */ i("div", { className: t["editor__toolbar-button-flyoutwrapper"], children: [
|
|
69
|
+
/* @__PURE__ */ r(
|
|
70
|
+
"button",
|
|
71
|
+
{
|
|
72
|
+
onClick: () => n ? u() : s(d),
|
|
73
|
+
className: _(
|
|
74
|
+
t["editor__toolbar-button"],
|
|
75
|
+
t["editor__toolbar-button--link"],
|
|
76
|
+
o.active && t["editor__toolbar-button--active"]
|
|
77
|
+
),
|
|
78
|
+
"aria-label": "Format link",
|
|
79
|
+
children: /* @__PURE__ */ r(v, { name: "Link", size: 20 })
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
N
|
|
83
|
+
] }),
|
|
84
|
+
/* @__PURE__ */ r(
|
|
85
|
+
"button",
|
|
86
|
+
{
|
|
87
|
+
onClick: U,
|
|
88
|
+
className: _(t["editor__toolbar-button"], t["editor__toolbar-button--link"]),
|
|
89
|
+
"aria-label": "Remove link",
|
|
90
|
+
children: /* @__PURE__ */ r(v, { name: "LinkSlash", size: 20 })
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
] });
|
|
94
|
+
};
|
|
95
|
+
export {
|
|
96
|
+
cr as LinkPlugin
|
|
97
|
+
};
|
|
98
|
+
//# sourceMappingURL=LinkPlugin.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LinkPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport clsx from 'clsx';\nimport { TOGGLE_LINK_COMMAND } from '@lexical/link';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { LinkType } from 'components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin';\n\nimport { validateUrlWithProtocol } from './helpers';\n\nimport { useFlyout } from 'components/RteEditor/hooks';\nimport { Button, InputField, Icon, Label, FormField, Checkbox, FeedbackBox } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\ninterface LinkPluginProps {\n isLink: LinkType;\n}\n\nexport const LinkPlugin = ({ isLink = { active: false, url: '', target: '_self' } }: LinkPluginProps) => {\n const [targetSelectedValue, setTargetSelectedValue] = useState<boolean>(isLink.target === '_blank');\n const urlRef = useRef<HTMLInputElement>(null);\n const [editor] = useLexicalComposerContext();\n const { flyout, showFlyout, closeFlyout, isVisible } = useFlyout();\n const [urlError, setUrlError] = useState<string | null>(null);\n\n const handleChange = () => {\n setTargetSelectedValue((prev) => !prev);\n };\n\n const insertLink = () => {\n const url = urlRef.current?.value as string;\n if ((!url && url.trim() === '') || validateUrlWithProtocol(url) === false) {\n setUrlError('Geen of geen geldige url ingevoerd');\n return;\n }\n\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, {\n url,\n target: targetSelectedValue ? '_blank' : '_self',\n });\n\n closeFlyout();\n };\n\n const removeLink = (): void => {\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);\n };\n\n const flyoutOptions = {\n children: (\n <div className={styles['editor__linkform']}>\n <FormField className={styles['editor__linkform-input-field']}>\n <Label htmlFor=\"lnikUrl\">Link</Label>\n <InputField id=\"lnikUrl\" ref={urlRef} placeholder=\"http(s)://\" />\n {urlError && <FeedbackBox level=\"error\" feedback={urlError} />}\n </FormField>\n <FormField inline>\n <Checkbox id=\"linkTarget\" onChange={handleChange} checked={targetSelectedValue} />\n <Label htmlFor=\"linkTarget\">Open in nieuwe window</Label>\n </FormField>\n <div className={styles['editor__linkform-footer']}>\n <Button variant={'secondary'} onClick={closeFlyout}>\n Annuleer\n </Button>\n <Button variant={'primary'} onClick={insertLink}>\n Link\n </Button>\n </div>\n </div>\n ),\n };\n\n useEffect(() => {\n if (urlError) {\n showFlyout(flyoutOptions);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [urlError]);\n\n useEffect(() => {\n if (isVisible) {\n showFlyout(flyoutOptions);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [targetSelectedValue]);\n\n useEffect(() => {\n if (!isVisible && urlRef.current) {\n setUrlError(null);\n urlRef.current.value = '';\n setTargetSelectedValue(false);\n } else if (urlRef.current && isLink.url) {\n urlRef.current.value = isLink.url || '';\n setTargetSelectedValue(isLink.target === '_blank');\n console.log('focus', urlRef.current);\n urlRef.current.focus();\n }\n }, [isVisible, isLink.url, isLink.target]);\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n <button\n onClick={() => (isVisible ? closeFlyout() : showFlyout(flyoutOptions))}\n className={clsx(\n styles['editor__toolbar-button'],\n styles[`editor__toolbar-button--link`],\n isLink.active && styles['editor__toolbar-button--active']\n )}\n aria-label={`Format link`}\n >\n <Icon name=\"Link\" size={20} />\n </button>\n {flyout}\n </div>\n <button\n onClick={removeLink}\n className={clsx(styles['editor__toolbar-button'], styles[`editor__toolbar-button--link`])}\n aria-label={`Remove link`}\n >\n <Icon name=\"LinkSlash\" size={20} />\n </button>\n </div>\n );\n};\n"],"names":["LinkPlugin","isLink","targetSelectedValue","setTargetSelectedValue","useState","urlRef","useRef","editor","useLexicalComposerContext","flyout","showFlyout","closeFlyout","isVisible","useFlyout","urlError","setUrlError","handleChange","prev","insertLink","url","_a","validateUrlWithProtocol","TOGGLE_LINK_COMMAND","removeLink","flyoutOptions","jsxs","styles","FormField","jsx","Label","InputField","FeedbackBox","Checkbox","Button","useEffect","clsx","Icon"],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const validateUrl: (url: string) => boolean;
|
|
2
|
+
export declare const validateUrlWithProtocol: (url: string) => boolean;
|
|
3
|
+
export declare const MATCHERS: ((text: string) => {
|
|
4
|
+
index: number;
|
|
5
|
+
length: number;
|
|
6
|
+
text: string;
|
|
7
|
+
url: string;
|
|
8
|
+
} | null)[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './LinkPlugin';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
|
-
import "../../../../Lexical.prod-
|
|
3
|
-
import { L as a } from "../../../../ListPlugin-
|
|
2
|
+
import "../../../../Lexical.prod-DNRTKPfN.js";
|
|
3
|
+
import { L as a } from "../../../../ListPlugin-CgNBzfIl.js";
|
|
4
4
|
import "react";
|
|
5
5
|
import "../../../../clsx-OuTLNxxd.js";
|
|
6
6
|
import "../../../Icon/Icon.js";
|
|
7
|
-
import "../../../../RteEditor.module-
|
|
7
|
+
import "../../../../RteEditor.module-BjGyWKhW.js";
|
|
8
8
|
export {
|
|
9
9
|
a as ListPlugin
|
|
10
10
|
};
|
|
@@ -1,38 +1,45 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { u as I, I as
|
|
3
|
-
import { useState as
|
|
4
|
-
import {
|
|
1
|
+
import { jsxs as _, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { u as I, I as P, m as k } from "../../../../Lexical.prod-DNRTKPfN.js";
|
|
3
|
+
import { useState as r, useCallback as N, useEffect as b } from "react";
|
|
4
|
+
import { L as B, H as h } from "../../../../ListPlugin-CgNBzfIl.js";
|
|
5
|
+
import { g as v } from "../../../../helpers-TSjo3aAv.js";
|
|
5
6
|
import { BlockFormatPlugin as x } from "../BlockFormatPlugin/BlockFormatPlugin.js";
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
7
|
+
import { LinkPlugin as F } from "../LinkPlugin/LinkPlugin.js";
|
|
8
|
+
import { HistoryPlugin as U } from "../HistoryPlugin/HistoryPlugin.js";
|
|
9
|
+
import { s as j } from "../../../../RteEditor.module-BjGyWKhW.js";
|
|
10
|
+
const n = (o, s) => {
|
|
11
|
+
let t = o, i;
|
|
12
|
+
for (; t !== null; ) {
|
|
13
|
+
if (s === "a" && v(t))
|
|
14
|
+
return { active: !0, url: t.__url, target: t.__target ? t.__target : "_self" };
|
|
15
|
+
if ((s === "ul" || s === "ol") && h(t))
|
|
16
|
+
return i = t.getTag(), i === s;
|
|
17
|
+
t = t.getParent();
|
|
18
|
+
}
|
|
19
|
+
return !1;
|
|
20
|
+
}, z = () => {
|
|
21
|
+
const [o] = I(), [s, t] = r(!1), [i, m] = r(!1), [c, u] = r(!1), [g, d] = r(!1), [p, L] = r({ active: !1, url: "", target: "_self" }), f = N(() => {
|
|
22
|
+
const e = P();
|
|
23
|
+
if (k(e)) {
|
|
24
|
+
t(e.hasFormat("bold")), m(e.hasFormat("italic"));
|
|
25
|
+
const a = e.anchor.getNode();
|
|
26
|
+
u(n(a, "ul")), d(n(a, "ol")), L(n(a, "a"));
|
|
22
27
|
}
|
|
23
28
|
}, []);
|
|
24
29
|
return b(() => {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
30
|
+
o.registerUpdateListener(({ editorState: e }) => {
|
|
31
|
+
e.read(() => {
|
|
32
|
+
f();
|
|
28
33
|
});
|
|
29
34
|
});
|
|
30
|
-
}, [
|
|
31
|
-
/* @__PURE__ */
|
|
32
|
-
/* @__PURE__ */
|
|
35
|
+
}, [o, f]), /* @__PURE__ */ _("div", { className: j.editor__toolbar, children: [
|
|
36
|
+
/* @__PURE__ */ l(x, { isBold: s, isItalic: i }),
|
|
37
|
+
/* @__PURE__ */ l(B, { isUList: c, isOList: g }),
|
|
38
|
+
/* @__PURE__ */ l(F, { isLink: p }),
|
|
39
|
+
/* @__PURE__ */ l(U, {})
|
|
33
40
|
] });
|
|
34
41
|
};
|
|
35
42
|
export {
|
|
36
|
-
|
|
43
|
+
z as ToolBarPlugin
|
|
37
44
|
};
|
|
38
45
|
//# sourceMappingURL=ToolbarPlugin.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToolbarPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { $getSelection, $isRangeSelection } from 'lexical';\nimport { useCallback, useEffect, useState } from 'react';\nimport { $isListNode } from '@lexical/list';\n\nimport type { ElementNode, TextNode } from 'lexical';\n\nimport { BlockFormatPlugin, ListPlugin } from 'components/RteEditor/Plugins';\nimport styles from 'components/RteEditor/RteEditor.module.css';\n\nexport const ToolBarPlugin = (): JSX.Element => {\n const [editor] = useLexicalComposerContext();\n const [isBold, setIsBold] = useState(false);\n const [isItalic, setIsItalic] = useState(false);\n const [isUList, setIsUList] = useState(false);\n const [isOList, setIsOList] = useState(false);\n\n const updateToolbar = useCallback(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n setIsBold(selection.hasFormat('bold'));\n setIsItalic(selection.hasFormat('italic'));\n\n const anchorNode = selection.anchor.getNode();\n
|
|
1
|
+
{"version":3,"file":"ToolbarPlugin.js","sources":["../../../../../src/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx"],"sourcesContent":["import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { $getSelection, $isRangeSelection } from 'lexical';\nimport { useCallback, useEffect, useState } from 'react';\nimport { $isListNode } from '@lexical/list';\nimport { $isLinkNode } from '@lexical/link';\n\nimport type { ElementNode, TextNode } from 'lexical';\n\nimport { LinkPlugin, BlockFormatPlugin, ListPlugin, HistoryPlugin } from 'components/RteEditor/Plugins';\nimport styles from 'components/RteEditor/RteEditor.module.css';\n\nexport type TargetType = '_blank' | '_self';\nexport interface LinkType {\n active: boolean;\n url: string;\n target: TargetType | string;\n}\n\nconst getNodeTag = (anchorNode: ElementNode | TextNode, tagToMatch: string): boolean | LinkType => {\n let currentNode: TextNode | ElementNode | null = anchorNode;\n let tag: string | null;\n\n while (currentNode !== null) {\n if (tagToMatch === 'a') {\n if ($isLinkNode(currentNode)) {\n return { active: true, url: currentNode.__url, target: !currentNode.__target ? '_self' : currentNode.__target };\n }\n }\n\n if (tagToMatch === 'ul' || tagToMatch === 'ol') {\n if ($isListNode(currentNode)) {\n tag = currentNode.getTag();\n return tag === tagToMatch;\n }\n }\n\n currentNode = currentNode.getParent();\n }\n\n return false;\n};\n\nexport const ToolBarPlugin = (): JSX.Element => {\n const [editor] = useLexicalComposerContext();\n const [isBold, setIsBold] = useState(false);\n const [isItalic, setIsItalic] = useState(false);\n const [isUList, setIsUList] = useState<boolean>(false);\n const [isOList, setIsOList] = useState<boolean>(false);\n const [isLink, setIsLink] = useState<LinkType>({ active: false, url: '', target: '_self' });\n\n const updateToolbar = useCallback(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n setIsBold(selection.hasFormat('bold'));\n setIsItalic(selection.hasFormat('italic'));\n\n const anchorNode = selection.anchor.getNode();\n setIsUList(getNodeTag(anchorNode, 'ul') as boolean);\n setIsOList(getNodeTag(anchorNode, 'ol') as boolean);\n setIsLink(getNodeTag(anchorNode, 'a') as LinkType);\n }\n }, []);\n\n useEffect(() => {\n editor.registerUpdateListener(({ editorState }) => {\n editorState.read(() => {\n updateToolbar();\n });\n });\n }, [editor, updateToolbar]);\n\n return (\n <div className={styles['editor__toolbar']}>\n <BlockFormatPlugin isBold={isBold} isItalic={isItalic} />\n <ListPlugin isUList={isUList} isOList={isOList} />\n <LinkPlugin isLink={isLink} />\n <HistoryPlugin />\n </div>\n );\n};\n"],"names":["getNodeTag","anchorNode","tagToMatch","currentNode","tag","$isLinkNode","$isListNode","ToolBarPlugin","editor","useLexicalComposerContext","isBold","setIsBold","useState","isItalic","setIsItalic","isUList","setIsUList","isOList","setIsOList","isLink","setIsLink","updateToolbar","useCallback","selection","$getSelection","$isRangeSelection","useEffect","editorState","jsxs","styles","jsx","BlockFormatPlugin","ListPlugin","LinkPlugin","HistoryPlugin"],"mappings":";;;;;;;;;AAkBA,MAAMA,IAAa,CAACC,GAAoCC,MAA2C;AACjG,MAAIC,IAA6CF,GAC7CG;AAEJ,SAAOD,MAAgB,QAAM;AAC3B,QAAID,MAAe,OACbG,EAAYF,CAAW;AACzB,aAAO,EAAE,QAAQ,IAAM,KAAKA,EAAY,OAAO,QAASA,EAAY,WAAqBA,EAAY,WAAtB,QAA+B;AAI9G,SAAAD,MAAe,QAAQA,MAAe,SACpCI,EAAYH,CAAW;AACzB,aAAAC,IAAMD,EAAY,UACXC,MAAQF;AAInB,IAAAC,IAAcA,EAAY;EAC5B;AAEO,SAAA;AACT,GAEaI,IAAgB,MAAmB;AACxC,QAAA,CAACC,CAAM,IAAIC,KACX,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAK,GACxC,CAACG,GAASC,CAAU,IAAIJ,EAAkB,EAAK,GAC/C,CAACK,GAASC,CAAU,IAAIN,EAAkB,EAAK,GAC/C,CAACO,GAAQC,CAAS,IAAIR,EAAmB,EAAE,QAAQ,IAAO,KAAK,IAAI,QAAQ,QAAS,CAAA,GAEpFS,IAAgBC,EAAY,MAAM;AACtC,UAAMC,IAAYC;AACd,QAAAC,EAAkBF,CAAS,GAAG;AACtB,MAAAZ,EAAAY,EAAU,UAAU,MAAM,CAAC,GACzBT,EAAAS,EAAU,UAAU,QAAQ,CAAC;AAEnC,YAAAtB,IAAasB,EAAU,OAAO,QAAQ;AACjC,MAAAP,EAAAhB,EAAWC,GAAY,IAAI,CAAY,GACvCiB,EAAAlB,EAAWC,GAAY,IAAI,CAAY,GACxCmB,EAAApB,EAAWC,GAAY,GAAG,CAAa;AAAA,IACnD;AAAA,EACF,GAAG,CAAE,CAAA;AAEL,SAAAyB,EAAU,MAAM;AACd,IAAAlB,EAAO,uBAAuB,CAAC,EAAE,aAAAmB,QAAkB;AACjD,MAAAA,EAAY,KAAK,MAAM;AACP,QAAAN;MAAA,CACf;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CAACb,GAAQa,CAAa,CAAC,GAGvB,gBAAAO,EAAA,OAAA,EAAI,WAAWC,EAAO,iBACrB,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAkB,QAAArB,GAAgB,UAAAG,EAAoB,CAAA;AAAA,IACvD,gBAAAiB,EAACE,GAAW,EAAA,SAAAjB,GAAkB,SAAAE,EAAkB,CAAA;AAAA,IAChD,gBAAAa,EAACG,KAAW,QAAAd,GAAgB;AAAA,sBAC3Be,GAAc,EAAA;AAAA,EACjB,EAAA,CAAA;AAEJ;"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
|
-
import { ToolBarPlugin as
|
|
2
|
-
import { BlockFormatPlugin as
|
|
3
|
-
import { L as
|
|
1
|
+
import { ToolBarPlugin as i } from "./ToolbarPlugin/ToolbarPlugin.js";
|
|
2
|
+
import { BlockFormatPlugin as l } from "./BlockFormatPlugin/BlockFormatPlugin.js";
|
|
3
|
+
import { L as n } from "../../../ListPlugin-CgNBzfIl.js";
|
|
4
|
+
import { LinkPlugin as f } from "./LinkPlugin/LinkPlugin.js";
|
|
5
|
+
import { HistoryPlugin as p } from "./HistoryPlugin/HistoryPlugin.js";
|
|
4
6
|
export {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
l as BlockFormatPlugin,
|
|
8
|
+
p as HistoryPlugin,
|
|
9
|
+
f as LinkPlugin,
|
|
10
|
+
n as ListPlugin,
|
|
11
|
+
i as ToolBarPlugin
|
|
8
12
|
};
|
|
9
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}
|