@frontify/fondue 12.0.0-beta.152 → 12.0.0-beta.154
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/components/ColorPicker/ColorInput.es.js +10 -10
- package/dist/components/ColorPicker/ColorInput.es.js.map +1 -1
- package/dist/components/LinkChooser/SearchInput.es.js +1 -1
- package/dist/components/LinkChooser/SearchInput.es.js.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.es.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/markdown/deserializer/deserialize.d.ts +1 -0
- package/dist/components/RichTextEditor/serializer/markdown/deserializer/deserialize.es.js +6 -6
- package/dist/components/RichTextEditor/serializer/markdown/deserializer/deserialize.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/markdown/remarkFondue/extensions/link/index.d.ts +2 -0
- package/dist/components/RichTextEditor/serializer/markdown/remarkFondue/extensions/link/index.es.js +28 -0
- package/dist/components/RichTextEditor/serializer/markdown/remarkFondue/extensions/link/index.es.js.map +1 -0
- package/dist/components/RichTextEditor/serializer/markdown/remarkFondue/extensions/list/index.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/markdown/remarkFondue/extensions/mention/index.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/markdown/remarkFondue/index.d.ts +2 -2
- package/dist/components/RichTextEditor/serializer/markdown/remarkFondue/index.es.js +4 -3
- package/dist/components/RichTextEditor/serializer/markdown/remarkFondue/index.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/markdown/remarkFondue/types.d.ts +5 -2
- package/dist/components/RichTextEditor/serializer/markdown/serializer/applyFormattingToBlockNode.es.js +20 -19
- package/dist/components/RichTextEditor/serializer/markdown/serializer/applyFormattingToBlockNode.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/markdown/types.d.ts +7 -1
- package/dist/components/RichTextEditor/serializer/markdown/types.es.js +4 -0
- package/dist/components/RichTextEditor/serializer/markdown/types.es.js.map +1 -1
- package/dist/components/RichTextEditor/serializer/nodes/link.es.js +4 -4
- package/dist/components/RichTextEditor/serializer/nodes/link.es.js.map +1 -1
- package/dist/components/TextInput/TextInput.es.js +5 -5
- package/dist/components/TextInput/TextInput.es.js.map +1 -1
- package/dist/index.cjs.js +30 -30
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.umd.js +30 -30
- package/dist/index.umd.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/tailwind.config.js +5 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TextInputType as
|
|
1
|
+
import { TextInputType as g } from "../TextInput/TextInput.es.js";
|
|
2
2
|
import { useMemoizedId as k } from "../../hooks/useMemoizedId.es.js";
|
|
3
3
|
import { useFocusRing as y } from "@react-aria/focus";
|
|
4
4
|
import { FOCUS_STYLE as R } from "../../utilities/focusStyle.es.js";
|
|
@@ -9,17 +9,17 @@ const T = ({
|
|
|
9
9
|
min: e,
|
|
10
10
|
max: l,
|
|
11
11
|
decorator: i,
|
|
12
|
-
onChange:
|
|
13
|
-
onEnterPressed:
|
|
12
|
+
onChange: o,
|
|
13
|
+
onEnterPressed: w,
|
|
14
14
|
size: c,
|
|
15
15
|
onBlur: u,
|
|
16
16
|
value: m = "",
|
|
17
17
|
decoratorPosition: a = "Left",
|
|
18
|
-
type: p =
|
|
18
|
+
type: p = g.Text
|
|
19
19
|
}) => {
|
|
20
|
-
const { isFocusVisible: f, focusProps: d } = y({ within: !0, isTextInput: !0 }), s = v(null),
|
|
21
|
-
const { key:
|
|
22
|
-
|
|
20
|
+
const { isFocusVisible: f, focusProps: d } = y({ within: !0, isTextInput: !0 }), s = v(null), h = (t) => {
|
|
21
|
+
const { key: x, shiftKey: b } = t;
|
|
22
|
+
x === "Enter" && !b && w && w(t);
|
|
23
23
|
};
|
|
24
24
|
return /* @__PURE__ */ r.createElement(
|
|
25
25
|
"div",
|
|
@@ -46,15 +46,15 @@ const T = ({
|
|
|
46
46
|
id: k(),
|
|
47
47
|
ref: s,
|
|
48
48
|
className: n([
|
|
49
|
-
"tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-text-black tw-placeholder-black-60 dark:tw-text-white
|
|
49
|
+
"tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-text-black tw-placeholder-black-60 dark:tw-text-white",
|
|
50
50
|
a === "Right" && "tw-text-right"
|
|
51
51
|
]),
|
|
52
52
|
onClick: () => {
|
|
53
53
|
var t;
|
|
54
54
|
return (t = s.current) == null ? void 0 : t.focus();
|
|
55
55
|
},
|
|
56
|
-
onKeyDown:
|
|
57
|
-
onChange: (t) =>
|
|
56
|
+
onKeyDown: h,
|
|
57
|
+
onChange: (t) => o && o(t.currentTarget.value),
|
|
58
58
|
onBlur: u,
|
|
59
59
|
value: m,
|
|
60
60
|
type: p,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColorInput.es.js","sources":["../../../src/components/ColorPicker/ColorInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInputBaseProps, TextInputType } from '@components/TextInput/TextInput';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, KeyboardEvent, useRef } from 'react';\n\nexport type ColorInputProps = { min?: number; max?: number; decoratorPosition?: DecoratorPosition } & Pick<\n TextInputBaseProps,\n 'decorator' | 'value' | 'onChange' | 'type' | 'size' | 'onBlur' | 'onEnterPressed'\n>;\n\nexport enum DecoratorPosition {\n Left = 'Left',\n Right = 'Right',\n}\n\nexport const ColorInput: FC<ColorInputProps> = ({\n min,\n max,\n decorator,\n onChange,\n onEnterPressed,\n size,\n onBlur,\n value = '',\n decoratorPosition = DecoratorPosition.Left,\n type = TextInputType.Text,\n}) => {\n const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n const inputElement = useRef<HTMLInputElement | null>(null);\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const { key, shiftKey } = event;\n if (key === 'Enter' && !shiftKey) {\n onEnterPressed && onEnterPressed(event);\n }\n };\n\n return (\n <div\n {...focusProps}\n className={merge([\n 'tw-flex tw-items-center tw-h-9 tw-px-2 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent focus-within:tw-border-black-90 tw-border-black-20',\n isFocusVisible && FOCUS_STYLE,\n ])}\n data-test-id=\"color-input\"\n >\n <div\n className={merge([\n 'tw-flex tw-gap-1',\n decoratorPosition === DecoratorPosition.Right && 'tw-flex-row-reverse',\n ])}\n >\n {decorator && (\n <div className=\"tw-flex tw-items-center tw-justify-center tw-text-black-80\">{decorator}</div>\n )}\n <input\n id={useMemoizedId()}\n ref={inputElement}\n className={merge([\n 'tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-text-black tw-placeholder-black-60 dark:tw-text-white
|
|
1
|
+
{"version":3,"file":"ColorInput.es.js","sources":["../../../src/components/ColorPicker/ColorInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { TextInputBaseProps, TextInputType } from '@components/TextInput/TextInput';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useFocusRing } from '@react-aria/focus';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { FC, KeyboardEvent, useRef } from 'react';\n\nexport type ColorInputProps = { min?: number; max?: number; decoratorPosition?: DecoratorPosition } & Pick<\n TextInputBaseProps,\n 'decorator' | 'value' | 'onChange' | 'type' | 'size' | 'onBlur' | 'onEnterPressed'\n>;\n\nexport enum DecoratorPosition {\n Left = 'Left',\n Right = 'Right',\n}\n\nexport const ColorInput: FC<ColorInputProps> = ({\n min,\n max,\n decorator,\n onChange,\n onEnterPressed,\n size,\n onBlur,\n value = '',\n decoratorPosition = DecoratorPosition.Left,\n type = TextInputType.Text,\n}) => {\n const { isFocusVisible, focusProps } = useFocusRing({ within: true, isTextInput: true });\n const inputElement = useRef<HTMLInputElement | null>(null);\n const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const { key, shiftKey } = event;\n if (key === 'Enter' && !shiftKey) {\n onEnterPressed && onEnterPressed(event);\n }\n };\n\n return (\n <div\n {...focusProps}\n className={merge([\n 'tw-flex tw-items-center tw-h-9 tw-px-2 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent focus-within:tw-border-black-90 tw-border-black-20',\n isFocusVisible && FOCUS_STYLE,\n ])}\n data-test-id=\"color-input\"\n >\n <div\n className={merge([\n 'tw-flex tw-gap-1',\n decoratorPosition === DecoratorPosition.Right && 'tw-flex-row-reverse',\n ])}\n >\n {decorator && (\n <div className=\"tw-flex tw-items-center tw-justify-center tw-text-black-80\">{decorator}</div>\n )}\n <input\n id={useMemoizedId()}\n ref={inputElement}\n className={merge([\n 'tw-grow tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n decoratorPosition === DecoratorPosition.Right && 'tw-text-right',\n ])}\n onClick={() => inputElement.current?.focus()}\n onKeyDown={handleKeyDown}\n onChange={(event) => onChange && onChange(event.currentTarget.value)}\n onBlur={onBlur}\n value={value}\n type={type}\n min={min}\n max={max}\n size={size}\n />\n </div>\n </div>\n );\n};\nColorInput.displayName = 'FondueColorInput';\n"],"names":["DecoratorPosition","ColorInput","min","max","decorator","onChange","onEnterPressed","size","onBlur","value","decoratorPosition","type","TextInputType","isFocusVisible","focusProps","useFocusRing","inputElement","useRef","handleKeyDown","event","key","shiftKey","React","merge","FOCUS_STYLE","useMemoizedId","_a"],"mappings":";;;;;;AAcY,IAAAA,sBAAAA,OACRA,EAAA,OAAO,QACPA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAkC,CAAC;AAAA,EAC5C,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,mBAAAC,IAAoB;AAAA,EACpB,MAAAC,IAAOC,EAAc;AACzB,MAAM;AACI,QAAA,EAAE,gBAAAC,GAAgB,YAAAC,EAAA,IAAeC,EAAa,EAAE,QAAQ,IAAM,aAAa,GAAA,CAAM,GACjFC,IAAeC,EAAgC,IAAI,GACnDC,IAAgB,CAACC,MAA2C;AACxD,UAAA,EAAE,KAAAC,GAAK,UAAAC,EAAa,IAAAF;AACtB,IAAAC,MAAQ,WAAW,CAACC,KACpBf,KAAkBA,EAAea,CAAK;AAAA,EAC1C;AAIA,SAAA,gBAAAG,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,WAAWS,EAAM;AAAA,QACb;AAAA,QACAV,KAAkBW;AAAA,MAAA,CACrB;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,IAEb,gBAAAF,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWC,EAAM;AAAA,UACb;AAAA,UACAb,MAAsB,WAA2B;AAAA,QAAA,CACpD;AAAA,MAAA;AAAA,MAEAN,KACG,gBAAAkB,EAAA,cAAC,OAAI,EAAA,WAAU,gEAA8DlB,CAAU;AAAA,MAE3F,gBAAAkB,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,IAAIG,EAAc;AAAA,UAClB,KAAKT;AAAA,UACL,WAAWO,EAAM;AAAA,YACb;AAAA,YACAb,MAAsB,WAA2B;AAAA,UAAA,CACpD;AAAA,UACD,SAAS,MAAM;;AAAA,oBAAAgB,IAAAV,EAAa,YAAb,gBAAAU,EAAsB;AAAA;AAAA,UACrC,WAAWR;AAAA,UACX,UAAU,CAACC,MAAUd,KAAYA,EAASc,EAAM,cAAc,KAAK;AAAA,UACnE,QAAAX;AAAA,UACA,OAAAC;AAAA,UACA,MAAAE;AAAA,UACA,KAAAT;AAAA,UACA,KAAAC;AAAA,UACA,MAAAI;AAAA,QAAA;AAAA,MACJ;AAAA,IACJ;AAAA,EAAA;AAGZ;AACAN,EAAW,cAAc;"}
|
|
@@ -56,7 +56,7 @@ const V = L(
|
|
|
56
56
|
readOnly: !C,
|
|
57
57
|
ref: u,
|
|
58
58
|
className: o([
|
|
59
|
-
"tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate
|
|
59
|
+
"tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate",
|
|
60
60
|
e ? "tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40" : "tw-text-black tw-placeholder-black-60 dark:tw-text-white"
|
|
61
61
|
]),
|
|
62
62
|
value: b,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchInput.es.js","sources":["../../../src/components/LinkChooser/SearchInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { FC, MouseEvent, forwardRef } from 'react';\nimport { IconButtonProps, SearchInputProps } from './types';\nimport { IconArrowOutExternal, IconClipboard, IconCross } from '@foundation/Icon/Generated';\n\nexport const SearchInput = forwardRef<HTMLInputElement | null, SearchInputProps>(\n (\n {\n disabled = false,\n clearable = true,\n ariaProps,\n selectedResult,\n decorator,\n machineService,\n onClear,\n validation = Validation.Default,\n onClick,\n onMouseDown,\n },\n inputElement,\n ) => {\n const { value } = ariaProps;\n const { isFocusVisible, focusProps, isFocused } = useFocusRing({ isTextInput: true });\n\n const [, send] = useActor(machineService);\n\n const isLoading = validation === Validation.Loading;\n\n return (\n <div\n data-test-id=\"link-chooser-search-wrapper\"\n className={merge([\n 'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-2.5 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n : merge([\n 'focus-within:tw-border-black-100',\n isFocusVisible && FOCUS_STYLE,\n validationClassMap[validation],\n ]),\n ])}\n onClick={onClick}\n onMouseDown={onMouseDown}\n >\n {decorator && (\n <div\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-flex-none',\n disabled || !selectedResult ? 'tw-text-black-40' : 'tw-text-violet-60',\n ])}\n data-test-id=\"link-chooser-decorator-icon\"\n >\n {decorator}\n </div>\n )}\n\n <input\n {...mergeProps(focusProps, ariaProps)}\n readOnly={!isFocused}\n ref={inputElement}\n className={merge([\n 'tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate
|
|
1
|
+
{"version":3,"file":"SearchInput.es.js","sources":["../../../src/components/LinkChooser/SearchInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\n/* eslint-disable jsx-a11y/no-static-element-interactions */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n\nimport { LoadingCircle, LoadingCircleSize } from '@components/LoadingCircle';\nimport { Validation, validationClassMap } from '@utilities/validation';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport { useActor } from '@xstate/react';\nimport React, { FC, MouseEvent, forwardRef } from 'react';\nimport { IconButtonProps, SearchInputProps } from './types';\nimport { IconArrowOutExternal, IconClipboard, IconCross } from '@foundation/Icon/Generated';\n\nexport const SearchInput = forwardRef<HTMLInputElement | null, SearchInputProps>(\n (\n {\n disabled = false,\n clearable = true,\n ariaProps,\n selectedResult,\n decorator,\n machineService,\n onClear,\n validation = Validation.Default,\n onClick,\n onMouseDown,\n },\n inputElement,\n ) => {\n const { value } = ariaProps;\n const { isFocusVisible, focusProps, isFocused } = useFocusRing({ isTextInput: true });\n\n const [, send] = useActor(machineService);\n\n const isLoading = validation === Validation.Loading;\n\n return (\n <div\n data-test-id=\"link-chooser-search-wrapper\"\n className={merge([\n 'tw-flex tw-items-center tw-h-9 tw-gap-2 tw-px-2.5 tw-border tw-rounded tw-text-s tw-font-sans tw-relative tw-bg-white dark:tw-bg-transparent',\n disabled\n ? 'tw-border-black-5 tw-bg-black-5 dark:tw-bg-black-90 dark:tw-border-black-90'\n : merge([\n 'focus-within:tw-border-black-100',\n isFocusVisible && FOCUS_STYLE,\n validationClassMap[validation],\n ]),\n ])}\n onClick={onClick}\n onMouseDown={onMouseDown}\n >\n {decorator && (\n <div\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-flex-none',\n disabled || !selectedResult ? 'tw-text-black-40' : 'tw-text-violet-60',\n ])}\n data-test-id=\"link-chooser-decorator-icon\"\n >\n {decorator}\n </div>\n )}\n\n <input\n {...mergeProps(focusProps, ariaProps)}\n readOnly={!isFocused}\n ref={inputElement}\n className={merge([\n 'tw-flex-auto tw-border-none tw-outline-none tw-bg-transparent tw-hide-input-arrows tw-min-w-0 tw-whitespace-nowrap tw-truncate',\n disabled\n ? 'tw-text-black-40 tw-placeholder-black-30 dark:tw-text-black-30 dark:tw-placeholder-black-40'\n : 'tw-text-black tw-placeholder-black-60 dark:tw-text-white',\n ])}\n value={value}\n disabled={disabled}\n data-test-id=\"link-chooser-search-input\"\n />\n {selectedResult && !isLoading && (\n <IconButton\n disabled={disabled}\n testId=\"link-chooser-preview-icon\"\n title=\"Preview link\"\n ariaLabel=\"preview link\"\n icon={<IconArrowOutExternal />}\n onClick={() => send('OPEN_PREVIEW')}\n />\n )}\n {selectedResult && !isLoading && (\n <IconButton\n disabled={disabled}\n testId=\"link-chooser-copy-icon\"\n title=\"Copy text to clipboard\"\n ariaLabel=\"copy text to clipboard\"\n icon={<IconClipboard />}\n onClick={() => send('COPY_TO_CLIPBOARD')}\n />\n )}\n {`${value}`.length > 0 && clearable && !isLoading && (\n <IconButton\n disabled={disabled}\n testId=\"link-chooser-clear-icon\"\n title=\"Clear text input\"\n ariaLabel=\"clear text input\"\n icon={<IconCross />}\n isComboBoxControl\n onClick={onClear}\n />\n )}\n {isLoading && (\n <span className=\"tw-flex tw-flex-none tw-justify-center tw-align-center\">\n <LoadingCircle size={LoadingCircleSize.ExtraSmall} />\n </span>\n )}\n </div>\n );\n },\n);\nSearchInput.displayName = 'SearchInput';\n\nconst IconButton: FC<IconButtonProps> = ({ disabled, title, ariaLabel, testId, icon, onClick, isComboBoxControl }) => {\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onClick && onClick();\n };\n\n return (\n <button\n className={merge([\n 'tw-flex tw-items-center tw-justify-center tw-transition-colors tw-rounded tw-flex-none',\n disabled ? 'tw-cursor-default tw-text-black-40' : 'tw-text-black-80 hover:tw-text-black-100',\n isFocusVisible && FOCUS_STYLE,\n ])}\n data-test-id={testId}\n title={title}\n aria-label={ariaLabel}\n data-combo-box-control={isComboBoxControl}\n disabled={disabled}\n onClick={handleClick}\n type=\"button\"\n {...focusProps}\n >\n {icon}\n </button>\n );\n};\n"],"names":["SearchInput","forwardRef","disabled","clearable","ariaProps","selectedResult","decorator","machineService","onClear","validation","Validation","onClick","onMouseDown","inputElement","value","isFocusVisible","focusProps","isFocused","useFocusRing","send","useActor","isLoading","React","merge","FOCUS_STYLE","validationClassMap","mergeProps","IconButton","IconArrowOutExternal","IconClipboard","IconCross","LoadingCircle","LoadingCircleSize","title","ariaLabel","testId","icon","isComboBoxControl","handleClick","event"],"mappings":";;;;;;;;;;;AAgBO,MAAMA,IAAcC;AAAA,EACvB,CACI;AAAA,IACI,UAAAC,IAAW;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC,IAAaC,EAAW;AAAA,IACxB,SAAAC;AAAA,IACA,aAAAC;AAAA,KAEJC,MACC;AACK,UAAA,EAAE,OAAAC,EAAU,IAAAV,GACZ,EAAE,gBAAAW,GAAgB,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAa,EAAE,aAAa,GAAA,CAAM,GAE9E,GAAGC,CAAI,IAAIC,EAASb,CAAc,GAElCc,IAAYZ,MAAeC,EAAW;AAGxC,WAAA,gBAAAY,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,WAAWC,EAAM;AAAA,UACb;AAAA,UACArB,IACM,gFACAqB,EAAM;AAAA,YACF;AAAA,YACAR,KAAkBS;AAAA,YAClBC,EAAmBhB,CAAU;AAAA,UAAA,CAChC;AAAA,QAAA,CACV;AAAA,QACD,SAAAE;AAAA,QACA,aAAAC;AAAA,MAAA;AAAA,MAECN,KACG,gBAAAgB,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAWC,EAAM;AAAA,YACb;AAAA,YACArB,KAAY,CAACG,IAAiB,qBAAqB;AAAA,UAAA,CACtD;AAAA,UACD,gBAAa;AAAA,QAAA;AAAA,QAEZC;AAAA,MACL;AAAA,MAGJ,gBAAAgB,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACI,GAAGI,EAAWV,GAAYZ,CAAS;AAAA,UACpC,UAAU,CAACa;AAAA,UACX,KAAKJ;AAAA,UACL,WAAWU,EAAM;AAAA,YACb;AAAA,YACArB,IACM,gGACA;AAAA,UAAA,CACT;AAAA,UACD,OAAAY;AAAA,UACA,UAAAZ;AAAA,UACA,gBAAa;AAAA,QAAA;AAAA,MACjB;AAAA,MACCG,KAAkB,CAACgB,KAChB,gBAAAC,EAAA;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,UAAAzB;AAAA,UACA,QAAO;AAAA,UACP,OAAM;AAAA,UACN,WAAU;AAAA,UACV,sCAAO0B,GAAqB,IAAA;AAAA,UAC5B,SAAS,MAAMT,EAAK,cAAc;AAAA,QAAA;AAAA,MACtC;AAAA,MAEHd,KAAkB,CAACgB,KAChB,gBAAAC,EAAA;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,UAAAzB;AAAA,UACA,QAAO;AAAA,UACP,OAAM;AAAA,UACN,WAAU;AAAA,UACV,sCAAO2B,GAAc,IAAA;AAAA,UACrB,SAAS,MAAMV,EAAK,mBAAmB;AAAA,QAAA;AAAA,MAC3C;AAAA,MAEH,GAAGL,IAAQ,SAAS,KAAKX,KAAa,CAACkB,KACpC,gBAAAC,EAAA;AAAA,QAACK;AAAA,QAAA;AAAA,UACG,UAAAzB;AAAA,UACA,QAAO;AAAA,UACP,OAAM;AAAA,UACN,WAAU;AAAA,UACV,sCAAO4B,GAAU,IAAA;AAAA,UACjB,mBAAiB;AAAA,UACjB,SAAStB;AAAA,QAAA;AAAA,MACb;AAAA,MAEHa,KACI,gBAAAC,EAAA,cAAA,QAAA,EAAK,WAAU,yDAAA,mCACXS,GAAc,EAAA,MAAMC,EAAkB,WAAY,CAAA,CACvD;AAAA,IAAA;AAAA,EAIhB;AACJ;AACAhC,EAAY,cAAc;AAE1B,MAAM2B,IAAkC,CAAC,EAAE,UAAAzB,GAAU,OAAA+B,GAAO,WAAAC,GAAW,QAAAC,GAAQ,MAAAC,GAAM,SAAAzB,GAAS,mBAAA0B,QAAwB;AAClH,QAAM,EAAE,gBAAAtB,GAAgB,YAAAC,EAAW,IAAIE,EAAa,GAE9CoB,IAAc,CAACC,MAAyC;AAC1D,IAAAA,EAAM,gBAAgB,GACtB5B,KAAWA,EAAQ;AAAA,EAAA;AAInB,SAAA,gBAAAW,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWC,EAAM;AAAA,QACb;AAAA,QACArB,IAAW,uCAAuC;AAAA,QAClDa,KAAkBS;AAAA,MAAA,CACrB;AAAA,MACD,gBAAcW;AAAA,MACd,OAAAF;AAAA,MACA,cAAYC;AAAA,MACZ,0BAAwBG;AAAA,MACxB,UAAAnC;AAAA,MACA,SAASoC;AAAA,MACT,MAAK;AAAA,MACJ,GAAGtB;AAAA,IAAA;AAAA,IAEHoB;AAAA,EAAA;AAGb;"}
|
|
@@ -130,7 +130,7 @@ const _e = ({
|
|
|
130
130
|
"input",
|
|
131
131
|
{
|
|
132
132
|
ref: k,
|
|
133
|
-
className: "focus:tw-outline-0 tw-text-s tw-bg-transparent
|
|
133
|
+
className: "focus:tw-outline-0 tw-text-s tw-bg-transparent",
|
|
134
134
|
style: { maxWidth: te },
|
|
135
135
|
placeholder: o.length === 0 ? f : S,
|
|
136
136
|
onChange: ae
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger';\nimport { Text } from '@typography/Text';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { ChangeEvent, FC, KeyboardEvent, useEffect, useRef, useState } from 'react';\nimport { getInputWidth, getPaddingClasses } from './helpers';\nimport { Menu } from '@components/Menu';\nimport { MenuItem } from '@components/MenuItem';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { DefaultItem, NoSearchResults, OptionalItems } from './SelectMenuItems';\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@components/Dropdown/useDropdownAutoHeight';\nimport { DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT } from '@components/Dropdown/Dropdown';\n\nexport enum MultiSelectType {\n Default = 'Default',\n Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n Small = 'Small',\n Medium = 'Medium',\n}\n\nexport enum MultiSelectEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport type MultiSelectItem = {\n value: string;\n isCategory?: boolean;\n isDivider?: boolean;\n avatar?: React.ReactNode;\n imgSrc?: string;\n ariaLabel?: string;\n};\n\nexport type MultiSelectProps = {\n items: MultiSelectItem[];\n activeItemKeys: (string | number)[];\n disabled?: boolean;\n onSelectionChange: (keys: (string | number)[]) => void;\n ariaLabel?: string;\n label?: string;\n placeholder?: string;\n type?: MultiSelectType;\n size?: MultiSelectSize;\n validation?: Validation;\n emphasis?: MultiSelectEmphasis;\n decorator?: React.ReactNode;\n filterable?: boolean;\n filterLabel?: string;\n noResultsLabel?: string;\n summarizedLabel?: string;\n indeterminateItemKeys?: (string | number)[];\n flip?: boolean;\n};\n\nexport type Item = {\n label: string;\n value: string;\n avatar?: React.ReactNode;\n isCategory?: boolean;\n isDivider?: boolean;\n imgSrc?: string;\n ariaLabel?: string;\n};\n\nexport const MultiSelect: FC<MultiSelectProps> = ({\n items,\n activeItemKeys,\n onSelectionChange,\n ariaLabel = 'Select list',\n disabled = false,\n placeholder,\n label,\n filterLabel,\n noResultsLabel,\n type = MultiSelectType.Default,\n size = MultiSelectSize.Medium,\n validation = Validation.Default,\n emphasis = MultiSelectEmphasis.Default,\n decorator = null,\n filterable = false,\n summarizedLabel: summarizedLabelFromProps,\n indeterminateItemKeys,\n flip = false,\n}) => {\n const [open, setOpen] = useState(false);\n const [checkboxes, setCheckboxes] = useState<Item[]>([]);\n const hasResults = !!checkboxes.find((item) => !item.isCategory && !item.isDivider);\n const multiSelectRef = useRef<HTMLDivElement | null>(null);\n\n const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null | HTMLDivElement>(null);\n const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n const filterInputRef = useRef<HTMLInputElement | null>(null);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n const hasSelectedItems = activeItemKeys.length > 0;\n const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n const inputWidth = getInputWidth(hasSelectedItems, filterLabel, placeholder);\n\n const handleClose = () => setOpen(false);\n\n useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n const toggleOpen = () => setOpen((open) => !open);\n\n const { buttonProps } = useButton(\n {\n onPress: toggleOpen,\n onKeyDown: (e) => {\n if (e.key === 'Escape') {\n setOpen(false);\n }\n },\n elementType: 'div',\n },\n { current: triggerRef },\n );\n\n const toggleSelection = (key: string | number) => {\n const keySet = new Set(activeItemKeys);\n\n if (keySet.has(key)) {\n keySet.delete(key);\n } else {\n keySet.add(key);\n }\n\n onSelectionChange(Array.from(keySet));\n };\n\n const handleSpacebarToggle = (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.code === 'Space' && (filterInputRef.current !== document.activeElement || !filterable)) {\n toggleOpen();\n }\n };\n\n const getDecoratorClasses = () => {\n if (emphasis === MultiSelectEmphasis.Weak) {\n return hasSelectedItems ? '' : 'tw-text-text-weak';\n }\n\n return '';\n };\n\n const getTagType = () => {\n if (emphasis === MultiSelectEmphasis.Weak || !open) {\n return TagType.Selected;\n }\n return TagType.SelectedWithFocus;\n };\n\n const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {\n setCheckboxes(\n items\n .filter((item) => {\n if (item.isCategory || item.isDivider) {\n return true;\n }\n\n return item.value.toLowerCase().includes(e.currentTarget.value.toLowerCase());\n })\n .map((item) => ({ ...item, label: item.value })),\n );\n };\n\n useEffect(() => {\n setCheckboxes(\n items.map((item) => {\n const checkboxBaseItem = { ...item, label: item.value };\n if (indeterminateItemKeys?.includes(item.value)) {\n return { ...checkboxBaseItem, state: CheckboxState.Mixed };\n }\n return checkboxBaseItem;\n }),\n );\n }, [items, indeterminateItemKeys]);\n\n const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n placement: 'bottom-start',\n strategy: 'fixed',\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n useEffect(() => {\n if (popperInstance.update) {\n popperInstance.update();\n }\n }, [activeItemKeys]);\n\n return (\n <div className=\"tw-relative\" ref={multiSelectRef}>\n <Trigger\n disabled={disabled}\n buttonProps={buttonProps}\n isFocusVisible={isFocusVisible}\n isOpen={open}\n validation={validation}\n emphasis={emphasis === MultiSelectEmphasis.Default ? TriggerEmphasis.Default : TriggerEmphasis.Weak}\n >\n <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n <div\n className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n onClick={(e) => {\n if (e.target === filterInputRef.current && open) {\n return;\n }\n toggleOpen();\n }}\n role=\"button\"\n {...focusProps}\n tabIndex={0}\n onKeyDown={handleSpacebarToggle}\n >\n <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n {decorator && <div className={getDecoratorClasses()}>{decorator}</div>}\n {label && hasSelectedItems && <Text weight=\"strong\">{label}</Text>}\n {type === MultiSelectType.Default &&\n activeItemKeys.map((key) => (\n <Tag\n key={key}\n type={getTagType()}\n label={key.toString()}\n size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={() => toggleSelection(key)}\n />\n ))}\n\n {type === MultiSelectType.Summarized && (hasSelectedItems || summarizedLabelFromProps) && (\n <Tag\n type={getTagType()}\n label={summarizedLabel}\n size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={\n indeterminateItemKeys?.length === 0 ? () => onSelectionChange([]) : undefined\n }\n />\n )}\n\n {!filterable && activeItemKeys.length === 0 && placeholder && (\n <Text color=\"weak\">{placeholder}</Text>\n )}\n </div>\n {filterable && (\n <input\n ref={filterInputRef}\n className=\"focus:tw-outline-0 tw-text-s tw-bg-transparent !tw-ring-0\"\n style={{ maxWidth: inputWidth }}\n placeholder={activeItemKeys.length === 0 ? placeholder : filterLabel}\n onChange={handleFilterChange}\n />\n )}\n </div>\n </div>\n </Trigger>\n\n {open &&\n heightIsReady &&\n emphasis === MultiSelectEmphasis.Default &&\n createPortal(\n <div\n ref={setMultiSelectMenuRef}\n className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-30 tw-bg-base tw-min-w-[18rem]\"\n key=\"content\"\n style={{\n ...popperInstance.styles.popper,\n width: triggerRef?.getBoundingClientRect().width,\n }}\n {...popperInstance.attributes.popper}\n >\n <FocusScope restoreFocus>\n <div\n className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n style={{ maxHeight }}\n >\n <Checklist\n activeValues={activeItemKeys.map((key) => key.toString())}\n setActiveValues={onSelectionChange}\n checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n direction={ChecklistDirection.Vertical}\n ariaLabel={ariaLabel}\n />\n </div>\n </FocusScope>\n </div>,\n document.body,\n )}\n {open &&\n heightIsReady &&\n emphasis === MultiSelectEmphasis.Weak &&\n createPortal(\n <AnimatePresence>\n <motion.div\n ref={setMultiSelectMenuRef}\n style={{\n ...popperInstance.styles.popper,\n width: 'fit-content',\n zIndex: 30,\n }}\n {...popperInstance.attributes.popper}\n initial={{ height: DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT }}\n animate={{ height: 'auto' }}\n transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n >\n <Menu open={open} onClose={handleClose}>\n {checkboxes.length > 0 && hasResults ? (\n checkboxes.map((item, index) => {\n const { label, value, avatar, imgSrc } = item;\n const isChecked = !!activeItemKeys.find((key) => key === value);\n const handleMenuItemClick = () => toggleSelection(label);\n\n if (item.isCategory || item.isDivider) {\n return (\n <OptionalItems\n key={value + item}\n {...{\n checkboxes,\n index,\n }}\n />\n );\n }\n\n return (\n <MenuItem checked={isChecked} onClick={handleMenuItemClick} key={value}>\n <DefaultItem {...{ label, value, avatar, imgSrc, isChecked }} />\n </MenuItem>\n );\n })\n ) : (\n <NoSearchResults label={noResultsLabel} />\n )}\n </Menu>\n </motion.div>\n </AnimatePresence>,\n document.body,\n )}\n </div>\n );\n};\nMultiSelect.displayName = 'FondueMultiSelect';\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelectEmphasis","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","filterLabel","noResultsLabel","type","size","validation","Validation","emphasis","decorator","filterable","summarizedLabelFromProps","indeterminateItemKeys","flip","open","setOpen","useState","checkboxes","setCheckboxes","hasResults","item","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","inputWidth","getInputWidth","handleClose","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getDecoratorClasses","getTagType","TagType","handleFilterChange","useEffect","checkboxBaseItem","CheckboxState","popperInstance","usePopper","React","Trigger","TriggerEmphasis","merge","getPaddingClasses","Text","Tag","TagSize","createPortal","FocusScope","Checklist","ChecklistDirection","AnimatePresence","motion","DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","Menu","index","value","avatar","imgSrc","isChecked","handleMenuItemClick","OptionalItems","MenuItem","DefaultItem","NoSearchResults"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBY,IAAAA,uBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,aAAa,cAFLA,IAAAA,MAAA,CAAA,CAAA,GAKAC,uBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,SAAS,UAFDA,IAAAA,MAAA,CAAA,CAAA,GAKAC,uBAAAA,OACRA,EAAA,UAAU,WACVA,EAAA,OAAO,QAFCA,IAAAA,MAAA,CAAA,CAAA;AA6CL,MAAMC,KAAoC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAaC,GAAW;AAAA,EACxB,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,iBAAiBC;AAAA,EACjB,uBAAAC;AAAA,EACA,MAAAC,IAAO;AACX,MAAM;AACF,QAAM,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChC,CAACC,GAAYC,CAAa,IAAIF,EAAiB,CAAE,CAAA,GACjDG,IAAa,CAAC,CAACF,EAAW,KAAK,CAACG,MAAS,CAACA,EAAK,cAAc,CAACA,EAAK,SAAS,GAC5EC,IAAiBC,EAA8B,IAAI,GAEnD,CAACC,GAAoBC,CAAqB,IAAIR,EAAgC,IAAI,GAClF,CAACS,GAAYC,CAAa,IAAIV,EAAgC,IAAI,GAElEW,IAAiBL,EAAgC,IAAI,GACrD,EAAE,gBAAAM,GAAgB,YAAAC,EAAW,IAAIC,GAAa,GAE9C,EAAE,WAAAC,EAAA,IAAcC,GAAsB,EAAE,SAASP,KAAc,EAAE,QAAQX,GAAM,YAAY,GAAM,CAAA,GAEjGmB,IAAmBrC,EAAe,SAAS,GAC3CsC,KAAkBvB,KAA4B,CAACf,EAAe,QAAQ,UAAU,EAAE,KAAK,GAAG,GAC1FuC,KAAaC,GAAcH,GAAkB/B,GAAaF,CAAW,GAErEqC,IAAc,MAAMtB,EAAQ,EAAK;AAEvC,EAAAuB,GAAgB,MAAMD,GAAa,CAAChB,KAAA,gBAAAA,EAAgB,SAAwBE,CAAiC,CAAC;AAE9G,QAAMgB,IAAgBR,MAAcS,IAE9BC,IAAa,MAAM1B,EAAQ,CAACD,MAAS,CAACA,CAAI,GAE1C,EAAE,aAAA4B,OAAgBC;AAAA,IACpB;AAAA,MACI,SAASF;AAAA,MACT,WAAW,CAAC,MAAM;AACV,QAAA,EAAE,QAAQ,YACV1B,EAAQ,EAAK;AAAA,MAErB;AAAA,MACA,aAAa;AAAA,IACjB;AAAA,IACA,EAAE,SAASU,EAAW;AAAA,EAAA,GAGpBmB,IAAkB,CAACC,MAAyB;AACxC,UAAAC,IAAS,IAAI,IAAIlD,CAAc;AAEjC,IAAAkD,EAAO,IAAID,CAAG,IACdC,EAAO,OAAOD,CAAG,IAEjBC,EAAO,IAAID,CAAG,GAGAhD,EAAA,MAAM,KAAKiD,CAAM,CAAC;AAAA,EAAA,GAGlCC,KAAuB,CAAC,MAAqC;AAC3D,IAAA,EAAE,SAAS,YAAYpB,EAAe,YAAY,SAAS,iBAAiB,CAACjB,MAClE+B;EACf,GAGEO,KAAsB,MACpBxC,MAAa,SACNyB,IAAmB,KAAK,sBAG5B,IAGLgB,IAAa,MACXzC,MAAa,UAA4B,CAACM,IACnCoC,EAAQ,WAEZA,EAAQ,mBAGbC,KAAqB,CAAC,MAAqC;AAC7D,IAAAjC;AAAA,MACIvB,EACK,OAAO,CAACyB,MACDA,EAAK,cAAcA,EAAK,YACjB,KAGJA,EAAK,MAAM,cAAc,SAAS,EAAE,cAAc,MAAM,YAAA,CAAa,CAC/E,EACA,IAAI,CAACA,OAAU,EAAE,GAAGA,GAAM,OAAOA,EAAK,MAAA,EAAQ;AAAA,IAAA;AAAA,EACvD;AAGJ,EAAAgC,EAAU,MAAM;AACZ,IAAAlC;AAAA,MACIvB,EAAM,IAAI,CAACyB,MAAS;AAChB,cAAMiC,IAAmB,EAAE,GAAGjC,GAAM,OAAOA,EAAK;AAChD,eAAIR,KAAA,QAAAA,EAAuB,SAASQ,EAAK,SAC9B,EAAE,GAAGiC,GAAkB,OAAOC,GAAc,MAAM,IAEtDD;AAAA,MAAA,CACV;AAAA,IAAA;AAAA,EACL,GACD,CAAC1D,GAAOiB,CAAqB,CAAC;AAE3B,QAAA2C,IAAiBC,GAAU/B,GAAYF,GAAoB;AAAA,IAC7D,WAAW;AAAA,IACX,UAAU;AAAA,IACV,WAAW;AAAA,MACP;AAAA,QACI,MAAM;AAAA,QACN,SAAS;AAAA,UACL,QAAQ,CAAC,GAAG,CAAC;AAAA,QACjB;AAAA,MACJ;AAAA,MACA;AAAA,QACI,MAAM;AAAA,QACN,SAASV;AAAA,MACb;AAAA,IACJ;AAAA,EAAA,CACH;AAED,SAAAuC,EAAU,MAAM;AACZ,IAAIG,EAAe,UACfA,EAAe,OAAO;AAAA,EAC1B,GACD,CAAC3D,CAAc,CAAC,GAGd,gBAAA6D,EAAA,cAAA,OAAA,EAAI,WAAU,eAAc,KAAKpC,KAC9B,gBAAAoC,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,UAAA3D;AAAA,MACA,aAAA2C;AAAA,MACA,gBAAAd;AAAA,MACA,QAAQd;AAAA,MACR,YAAAR;AAAA,MACA,UAAUE,MAAa,YAA8BmD,EAAgB,UAAUA,EAAgB;AAAA,IAAA;AAAA,IAE9F,gBAAAF,EAAA,cAAA,OAAA,EAAI,WAAWG,GAAM,CAAC,8BAA8BC,GAAkBxD,CAAI,CAAC,CAAC,GAAG,KAAKqB,EACjF,GAAA,gBAAA+B,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,SAAS,CAAC,MAAM;AACZ,UAAI,EAAE,WAAW9B,EAAe,WAAWb,KAGhC2B;QACf;AAAA,QACA,MAAK;AAAA,QACJ,GAAGZ;AAAA,QACJ,UAAU;AAAA,QACV,WAAWkB;AAAA,MAAA;AAAA,MAEX,gBAAAU,EAAA,cAAC,OAAI,EAAA,WAAU,gFACV,GAAAhD,qCAAc,OAAI,EAAA,WAAWuC,GAAoB,EAAA,GAAIvC,CAAU,GAC/DR,KAASgC,KAAoB,gBAAAwB,EAAA,cAACK,GAAK,EAAA,QAAO,SAAU,GAAA7D,CAAM,GAC1DG,MAAS,aACNR,EAAe,IAAI,CAACiD,MAChB,gBAAAY,EAAA;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,KAAAlB;AAAA,UACA,MAAMI,EAAW;AAAA,UACjB,OAAOJ,EAAI,SAAS;AAAA,UACpB,MAAMxC,MAAS,UAAwB2D,EAAQ,QAAQA,EAAQ;AAAA,UAC/D,SAAS,MAAMpB,EAAgBC,CAAG;AAAA,QAAA;AAAA,MAAA,CAEzC,GAEJzC,MAAS,iBAA+B6B,KAAoBtB,MACzD,gBAAA8C,EAAA;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,MAAMd,EAAW;AAAA,UACjB,OAAOf;AAAA,UACP,MAAM7B,MAAS,UAAwB2D,EAAQ,QAAQA,EAAQ;AAAA,UAC/D,UACIpD,KAAA,gBAAAA,EAAuB,YAAW,IAAI,MAAMf,EAAkB,CAAA,CAAE,IAAI;AAAA,QAAA;AAAA,MAK/E,GAAA,CAACa,KAAcd,EAAe,WAAW,KAAKI,KAC3C,gBAAAyD,EAAA,cAACK,GAAK,EAAA,OAAM,OAAQ,GAAA9D,CAAY,CAExC;AAAA,MACCU,KACG,gBAAA+C,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAK9B;AAAA,UACL,WAAU;AAAA,UACV,OAAO,EAAE,UAAUQ,GAAW;AAAA,UAC9B,aAAavC,EAAe,WAAW,IAAII,IAAcE;AAAA,UACzD,UAAUiD;AAAA,QAAA;AAAA,MACd;AAAA,IAAA,CAGZ;AAAA,EAGH,GAAArC,KACGyB,KACA/B,MAAa,aACbyD;AAAA,IACI,gBAAAR,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKjC;AAAA,QACL,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,OAAO;AAAA,UACH,GAAG+B,EAAe,OAAO;AAAA,UACzB,OAAO9B,KAAA,gBAAAA,EAAY,wBAAwB;AAAA,QAC/C;AAAA,QACC,GAAG8B,EAAe,WAAW;AAAA,MAAA;AAAA,MAE9B,gBAAAE,EAAA,cAACS,IAAW,EAAA,cAAY,GACpB,GAAA,gBAAAT,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAU;AAAA,UACV,OAAO,EAAE,WAAA1B,EAAU;AAAA,QAAA;AAAA,QAEnB,gBAAA0B,EAAA;AAAA,UAACU;AAAA,UAAA;AAAA,YACG,cAAcvE,EAAe,IAAI,CAACiD,MAAQA,EAAI,UAAU;AAAA,YACxD,iBAAiBhD;AAAA,YACjB,YAAYoB,EAAW,OAAO,CAACG,MAAS,CAACA,EAAK,aAAa,CAACA,EAAK,UAAU;AAAA,YAC3E,WAAWgD,GAAmB;AAAA,YAC9B,WAAAtE;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA,CAER;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,EAEhB,GAAAgB,KACGyB,KACA/B,MAAa,UACbyD;AAAA,oCACKI,IACG,MAAA,gBAAAZ,EAAA;AAAA,MAACa,GAAO;AAAA,MAAP;AAAA,QACG,KAAK9C;AAAA,QACL,OAAO;AAAA,UACH,GAAG+B,EAAe,OAAO;AAAA,UACzB,OAAO;AAAA,UACP,QAAQ;AAAA,QACZ;AAAA,QACC,GAAGA,EAAe,WAAW;AAAA,QAC9B,SAAS,EAAE,QAAQgB,GAAsC;AAAA,QACzD,SAAS,EAAE,QAAQ,OAAO;AAAA,QAC1B,YAAY,EAAE,MAAM,CAAC,MAAM,MAAM,MAAM,IAAI,GAAG,UAAU,IAAI;AAAA,MAAA;AAAA,MAE3D,gBAAAd,EAAA,cAAAe,IAAA,EAAK,MAAA1D,GAAY,SAASuB,KACtBpB,EAAW,SAAS,KAAKE,IACtBF,EAAW,IAAI,CAACG,GAAMqD,MAAU;AAC5B,cAAM,EAAE,OAAAxE,GAAO,OAAAyE,GAAO,QAAAC,IAAQ,QAAAC,GAAW,IAAAxD,GACnCyD,IAAY,CAAC,CAACjF,EAAe,KAAK,CAACiD,OAAQA,OAAQ6B,CAAK,GACxDI,KAAsB,MAAMlC,EAAgB3C,CAAK;AAEnD,eAAAmB,EAAK,cAAcA,EAAK,YAEpB,gBAAAqC,EAAA;AAAA,UAACsB;AAAA,UAAA;AAAA,YACG,KAAKL,IAAQtD;AAAA,YAET,YAAAH;AAAA,YACA,OAAAwD;AAAA,UACJ;AAAA,QAAA,oCAMPO,IAAS,EAAA,SAASH,GAAW,SAASC,IAAqB,KAAKJ,KAC7D,gBAAAjB,EAAA,cAACwB,MAAkB,OAAAhF,GAAO,OAAAyE,GAAO,QAAAC,IAAQ,QAAAC,IAAQ,WAAAC,GAAa,CAClE;AAAA,MAAA,CAEP,IAED,gBAAApB,EAAA,cAACyB,IAAgB,EAAA,OAAO/E,GAAgB,CAEhD;AAAA,IAAA,CAER;AAAA,IACA,SAAS;AAAA,EAAA,CAErB;AAER;AACAT,GAAY,cAAc;"}
|
|
1
|
+
{"version":3,"file":"MultiSelect.es.js","sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Checklist, ChecklistDirection } from '@components/Checklist/Checklist';\nimport { Tag, TagSize, TagType } from '@components/Tag';\nimport { Trigger, TriggerEmphasis } from '@components/Trigger';\nimport { Text } from '@typography/Text';\nimport { useButton } from '@react-aria/button';\nimport { FocusScope, useFocusRing } from '@react-aria/focus';\nimport { merge } from '@utilities/merge';\nimport { Validation } from '@utilities/validation';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport React, { ChangeEvent, FC, KeyboardEvent, useEffect, useRef, useState } from 'react';\nimport { getInputWidth, getPaddingClasses } from './helpers';\nimport { Menu } from '@components/Menu';\nimport { MenuItem } from '@components/MenuItem';\nimport { useClickOutside } from '@hooks/useClickOutside';\nimport { DefaultItem, NoSearchResults, OptionalItems } from './SelectMenuItems';\nimport { CheckboxState } from '@components/Checkbox/Checkbox';\nimport { createPortal } from 'react-dom';\nimport { usePopper } from 'react-popper';\nimport { DEFAULT_DROPDOWN_MAX_HEIGHT, useDropdownAutoHeight } from '@components/Dropdown/useDropdownAutoHeight';\nimport { DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT } from '@components/Dropdown/Dropdown';\n\nexport enum MultiSelectType {\n Default = 'Default',\n Summarized = 'Summarized',\n}\n\nexport enum MultiSelectSize {\n Small = 'Small',\n Medium = 'Medium',\n}\n\nexport enum MultiSelectEmphasis {\n Default = 'Default',\n Weak = 'Weak',\n}\n\nexport type MultiSelectItem = {\n value: string;\n isCategory?: boolean;\n isDivider?: boolean;\n avatar?: React.ReactNode;\n imgSrc?: string;\n ariaLabel?: string;\n};\n\nexport type MultiSelectProps = {\n items: MultiSelectItem[];\n activeItemKeys: (string | number)[];\n disabled?: boolean;\n onSelectionChange: (keys: (string | number)[]) => void;\n ariaLabel?: string;\n label?: string;\n placeholder?: string;\n type?: MultiSelectType;\n size?: MultiSelectSize;\n validation?: Validation;\n emphasis?: MultiSelectEmphasis;\n decorator?: React.ReactNode;\n filterable?: boolean;\n filterLabel?: string;\n noResultsLabel?: string;\n summarizedLabel?: string;\n indeterminateItemKeys?: (string | number)[];\n flip?: boolean;\n};\n\nexport type Item = {\n label: string;\n value: string;\n avatar?: React.ReactNode;\n isCategory?: boolean;\n isDivider?: boolean;\n imgSrc?: string;\n ariaLabel?: string;\n};\n\nexport const MultiSelect: FC<MultiSelectProps> = ({\n items,\n activeItemKeys,\n onSelectionChange,\n ariaLabel = 'Select list',\n disabled = false,\n placeholder,\n label,\n filterLabel,\n noResultsLabel,\n type = MultiSelectType.Default,\n size = MultiSelectSize.Medium,\n validation = Validation.Default,\n emphasis = MultiSelectEmphasis.Default,\n decorator = null,\n filterable = false,\n summarizedLabel: summarizedLabelFromProps,\n indeterminateItemKeys,\n flip = false,\n}) => {\n const [open, setOpen] = useState(false);\n const [checkboxes, setCheckboxes] = useState<Item[]>([]);\n const hasResults = !!checkboxes.find((item) => !item.isCategory && !item.isDivider);\n const multiSelectRef = useRef<HTMLDivElement | null>(null);\n\n const [multiSelectMenuRef, setMultiSelectMenuRef] = useState<null | HTMLDivElement>(null);\n const [triggerRef, setTriggerRef] = useState<HTMLDivElement | null>(null);\n\n const filterInputRef = useRef<HTMLInputElement | null>(null);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n const { maxHeight } = useDropdownAutoHeight({ current: triggerRef }, { isOpen: open, autoResize: true });\n\n const hasSelectedItems = activeItemKeys.length > 0;\n const summarizedLabel = summarizedLabelFromProps ?? [activeItemKeys.length, 'selected'].join(' ');\n const inputWidth = getInputWidth(hasSelectedItems, filterLabel, placeholder);\n\n const handleClose = () => setOpen(false);\n\n useClickOutside(null, handleClose, [multiSelectRef?.current as HTMLElement, multiSelectMenuRef as HTMLElement]);\n\n const heightIsReady = maxHeight !== DEFAULT_DROPDOWN_MAX_HEIGHT;\n\n const toggleOpen = () => setOpen((open) => !open);\n\n const { buttonProps } = useButton(\n {\n onPress: toggleOpen,\n onKeyDown: (e) => {\n if (e.key === 'Escape') {\n setOpen(false);\n }\n },\n elementType: 'div',\n },\n { current: triggerRef },\n );\n\n const toggleSelection = (key: string | number) => {\n const keySet = new Set(activeItemKeys);\n\n if (keySet.has(key)) {\n keySet.delete(key);\n } else {\n keySet.add(key);\n }\n\n onSelectionChange(Array.from(keySet));\n };\n\n const handleSpacebarToggle = (e: KeyboardEvent<HTMLDivElement>) => {\n if (e.code === 'Space' && (filterInputRef.current !== document.activeElement || !filterable)) {\n toggleOpen();\n }\n };\n\n const getDecoratorClasses = () => {\n if (emphasis === MultiSelectEmphasis.Weak) {\n return hasSelectedItems ? '' : 'tw-text-text-weak';\n }\n\n return '';\n };\n\n const getTagType = () => {\n if (emphasis === MultiSelectEmphasis.Weak || !open) {\n return TagType.Selected;\n }\n return TagType.SelectedWithFocus;\n };\n\n const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {\n setCheckboxes(\n items\n .filter((item) => {\n if (item.isCategory || item.isDivider) {\n return true;\n }\n\n return item.value.toLowerCase().includes(e.currentTarget.value.toLowerCase());\n })\n .map((item) => ({ ...item, label: item.value })),\n );\n };\n\n useEffect(() => {\n setCheckboxes(\n items.map((item) => {\n const checkboxBaseItem = { ...item, label: item.value };\n if (indeterminateItemKeys?.includes(item.value)) {\n return { ...checkboxBaseItem, state: CheckboxState.Mixed };\n }\n return checkboxBaseItem;\n }),\n );\n }, [items, indeterminateItemKeys]);\n\n const popperInstance = usePopper(triggerRef, multiSelectMenuRef, {\n placement: 'bottom-start',\n strategy: 'fixed',\n modifiers: [\n {\n name: 'offset',\n options: {\n offset: [0, 8],\n },\n },\n {\n name: 'flip',\n enabled: flip,\n },\n ],\n });\n\n useEffect(() => {\n if (popperInstance.update) {\n popperInstance.update();\n }\n }, [activeItemKeys]);\n\n return (\n <div className=\"tw-relative\" ref={multiSelectRef}>\n <Trigger\n disabled={disabled}\n buttonProps={buttonProps}\n isFocusVisible={isFocusVisible}\n isOpen={open}\n validation={validation}\n emphasis={emphasis === MultiSelectEmphasis.Default ? TriggerEmphasis.Default : TriggerEmphasis.Weak}\n >\n <div className={merge(['tw-flex tw-flex-1 tw-gap-2', getPaddingClasses(size)])} ref={setTriggerRef}>\n <div\n className=\"tw-flex tw-flex-1 tw-gap-2 focus:tw-outline-0\"\n onClick={(e) => {\n if (e.target === filterInputRef.current && open) {\n return;\n }\n toggleOpen();\n }}\n role=\"button\"\n {...focusProps}\n tabIndex={0}\n onKeyDown={handleSpacebarToggle}\n >\n <div className=\"tw-flex tw-flex-wrap tw-gap-2 tw-outline-none tw-items-center tw-min-h-[28px]\">\n {decorator && <div className={getDecoratorClasses()}>{decorator}</div>}\n {label && hasSelectedItems && <Text weight=\"strong\">{label}</Text>}\n {type === MultiSelectType.Default &&\n activeItemKeys.map((key) => (\n <Tag\n key={key}\n type={getTagType()}\n label={key.toString()}\n size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={() => toggleSelection(key)}\n />\n ))}\n\n {type === MultiSelectType.Summarized && (hasSelectedItems || summarizedLabelFromProps) && (\n <Tag\n type={getTagType()}\n label={summarizedLabel}\n size={size === MultiSelectSize.Small ? TagSize.Small : TagSize.Medium}\n onClick={\n indeterminateItemKeys?.length === 0 ? () => onSelectionChange([]) : undefined\n }\n />\n )}\n\n {!filterable && activeItemKeys.length === 0 && placeholder && (\n <Text color=\"weak\">{placeholder}</Text>\n )}\n </div>\n {filterable && (\n <input\n ref={filterInputRef}\n className=\"focus:tw-outline-0 tw-text-s tw-bg-transparent\"\n style={{ maxWidth: inputWidth }}\n placeholder={activeItemKeys.length === 0 ? placeholder : filterLabel}\n onChange={handleFilterChange}\n />\n )}\n </div>\n </div>\n </Trigger>\n\n {open &&\n heightIsReady &&\n emphasis === MultiSelectEmphasis.Default &&\n createPortal(\n <div\n ref={setMultiSelectMenuRef}\n className=\"tw-absolute tw-left-0 tw-w-full tw-overflow-hidden tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-30 tw-bg-base tw-min-w-[18rem]\"\n key=\"content\"\n style={{\n ...popperInstance.styles.popper,\n width: triggerRef?.getBoundingClientRect().width,\n }}\n {...popperInstance.attributes.popper}\n >\n <FocusScope restoreFocus>\n <div\n className=\"tw-p-4 tw-overflow-y-auto tw-overflow-x-hidden tw-w-full tw-relative\"\n style={{ maxHeight }}\n >\n <Checklist\n activeValues={activeItemKeys.map((key) => key.toString())}\n setActiveValues={onSelectionChange}\n checkboxes={checkboxes.filter((item) => !item.isDivider && !item.isCategory)}\n direction={ChecklistDirection.Vertical}\n ariaLabel={ariaLabel}\n />\n </div>\n </FocusScope>\n </div>,\n document.body,\n )}\n {open &&\n heightIsReady &&\n emphasis === MultiSelectEmphasis.Weak &&\n createPortal(\n <AnimatePresence>\n <motion.div\n ref={setMultiSelectMenuRef}\n style={{\n ...popperInstance.styles.popper,\n width: 'fit-content',\n zIndex: 30,\n }}\n {...popperInstance.attributes.popper}\n initial={{ height: DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT }}\n animate={{ height: 'auto' }}\n transition={{ ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 }}\n >\n <Menu open={open} onClose={handleClose}>\n {checkboxes.length > 0 && hasResults ? (\n checkboxes.map((item, index) => {\n const { label, value, avatar, imgSrc } = item;\n const isChecked = !!activeItemKeys.find((key) => key === value);\n const handleMenuItemClick = () => toggleSelection(label);\n\n if (item.isCategory || item.isDivider) {\n return (\n <OptionalItems\n key={value + item}\n {...{\n checkboxes,\n index,\n }}\n />\n );\n }\n\n return (\n <MenuItem checked={isChecked} onClick={handleMenuItemClick} key={value}>\n <DefaultItem {...{ label, value, avatar, imgSrc, isChecked }} />\n </MenuItem>\n );\n })\n ) : (\n <NoSearchResults label={noResultsLabel} />\n )}\n </Menu>\n </motion.div>\n </AnimatePresence>,\n document.body,\n )}\n </div>\n );\n};\nMultiSelect.displayName = 'FondueMultiSelect';\n"],"names":["MultiSelectType","MultiSelectSize","MultiSelectEmphasis","MultiSelect","items","activeItemKeys","onSelectionChange","ariaLabel","disabled","placeholder","label","filterLabel","noResultsLabel","type","size","validation","Validation","emphasis","decorator","filterable","summarizedLabelFromProps","indeterminateItemKeys","flip","open","setOpen","useState","checkboxes","setCheckboxes","hasResults","item","multiSelectRef","useRef","multiSelectMenuRef","setMultiSelectMenuRef","triggerRef","setTriggerRef","filterInputRef","isFocusVisible","focusProps","useFocusRing","maxHeight","useDropdownAutoHeight","hasSelectedItems","summarizedLabel","inputWidth","getInputWidth","handleClose","useClickOutside","heightIsReady","DEFAULT_DROPDOWN_MAX_HEIGHT","toggleOpen","buttonProps","useButton","toggleSelection","key","keySet","handleSpacebarToggle","getDecoratorClasses","getTagType","TagType","handleFilterChange","useEffect","checkboxBaseItem","CheckboxState","popperInstance","usePopper","React","Trigger","TriggerEmphasis","merge","getPaddingClasses","Text","Tag","TagSize","createPortal","FocusScope","Checklist","ChecklistDirection","AnimatePresence","motion","DEFAULT_DROPDOWN_MIN_ANIMATION_HEIGHT","Menu","index","value","avatar","imgSrc","isChecked","handleMenuItemClick","OptionalItems","MenuItem","DefaultItem","NoSearchResults"],"mappings":"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"}
|
|
@@ -20,6 +20,7 @@ export default function deserialize<T extends InputNodeTypes>(node: MarkdownAstN
|
|
|
20
20
|
lang?: string | undefined;
|
|
21
21
|
checked?: any;
|
|
22
22
|
position?: any;
|
|
23
|
+
target?: import("../types").TargetValue | undefined;
|
|
23
24
|
indent?: any;
|
|
24
25
|
ordered?: boolean | undefined;
|
|
25
26
|
depth?: 2 | 1 | 3 | 4 | 6 | 5 | undefined;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { MENTION_DESERIALIZE_REGEX as
|
|
2
|
-
function
|
|
1
|
+
import { MENTION_DESERIALIZE_REGEX as g } from "../utils.es.js";
|
|
2
|
+
function m(e, a) {
|
|
3
3
|
var s, u;
|
|
4
4
|
const t = a == null ? void 0 : a.nodeTypes, { linkDestinationKey: i, imageSourceKey: y, imageCaptionKey: h } = d(a);
|
|
5
5
|
let r = [{ text: "" }];
|
|
6
6
|
switch (o(e.children) && (r = e.children.flatMap(
|
|
7
|
-
(c) =>
|
|
7
|
+
(c) => m(
|
|
8
8
|
{
|
|
9
9
|
...c,
|
|
10
10
|
ordered: e.ordered || !1
|
|
@@ -13,7 +13,7 @@ function g(e, a) {
|
|
|
13
13
|
)
|
|
14
14
|
)), e.type) {
|
|
15
15
|
case "mention":
|
|
16
|
-
const c = e.children ? e.children[0].value : void 0, p = c == null ? void 0 : c.match(
|
|
16
|
+
const c = e.children ? e.children[0].value : void 0, p = c == null ? void 0 : c.match(g);
|
|
17
17
|
return {
|
|
18
18
|
type: t.mention,
|
|
19
19
|
category: p[1],
|
|
@@ -40,7 +40,7 @@ function g(e, a) {
|
|
|
40
40
|
return {
|
|
41
41
|
type: t.link,
|
|
42
42
|
[i]: e.url,
|
|
43
|
-
target:
|
|
43
|
+
target: e.target,
|
|
44
44
|
children: r
|
|
45
45
|
};
|
|
46
46
|
case "image":
|
|
@@ -109,6 +109,6 @@ const o = (e) => !!e && Array.isArray(e) && e.length > 0, l = (e) => ({
|
|
|
109
109
|
return { linkDestinationKey: a, imageSourceKey: t, imageCaptionKey: i };
|
|
110
110
|
};
|
|
111
111
|
export {
|
|
112
|
-
|
|
112
|
+
m as default
|
|
113
113
|
};
|
|
114
114
|
//# sourceMappingURL=deserialize.es.js.map
|
package/dist/components/RichTextEditor/serializer/markdown/deserializer/deserialize.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"deserialize.es.js","sources":["../../../../../../src/components/RichTextEditor/serializer/markdown/deserializer/deserialize.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n BlockQuoteNode,\n CodeBlockNode,\n DeserializedNode,\n HeadingNode,\n ImageNode,\n InputNodeTypes,\n ItalicNode,\n LinkNode,\n ListItemChildNode,\n ListItemNode,\n ListNode,\n MarkdownAstNode,\n OptionType,\n ParagraphNode,\n TextNode,\n ThematicBreakNode,\n} from '../types';\nimport { MENTION_DESERIALIZE_REGEX } from '../utils';\n\nexport default function deserialize<T extends InputNodeTypes>(node: MarkdownAstNode, options: OptionType) {\n const types = options?.nodeTypes as InputNodeTypes;\n const { linkDestinationKey, imageSourceKey, imageCaptionKey } = getOptions(options);\n\n let children: Array<DeserializedNode<T>> = [{ text: '' }];\n\n if (hasNodeChildren(node.children)) {\n children = node.children.flatMap((c: MarkdownAstNode) =>\n deserialize(\n {\n ...c,\n ordered: node.ordered || false,\n },\n options,\n ),\n );\n }\n\n switch (node.type) {\n case 'mention':\n const value = node.children ? node.children[0].value : undefined;\n const matches = value?.match(MENTION_DESERIALIZE_REGEX) as RegExpMatchArray;\n return {\n type: types.mention,\n category: matches[1],\n id: matches[2],\n children: [{ text: '' }],\n };\n case 'heading':\n return {\n type: types.heading[node.depth || 1],\n children,\n } as HeadingNode<T>;\n case 'list':\n return {\n type: node.ordered ? types.olList : types.ulList,\n children,\n } as ListNode<T>;\n case 'listItem':\n return { type: types.listItem, children } as ListItemNode<T>;\n case 'listItemChild':\n return { type: types.listItemChild, children } as ListItemChildNode<T>;\n case 'paragraph':\n return { type: types.paragraph, children } as ParagraphNode<T>;\n case 'link':\n return {\n type: types.link,\n [linkDestinationKey]: node.url,\n target:
|
|
1
|
+
{"version":3,"file":"deserialize.es.js","sources":["../../../../../../src/components/RichTextEditor/serializer/markdown/deserializer/deserialize.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n BlockQuoteNode,\n CodeBlockNode,\n DeserializedNode,\n HeadingNode,\n ImageNode,\n InputNodeTypes,\n ItalicNode,\n LinkNode,\n ListItemChildNode,\n ListItemNode,\n ListNode,\n MarkdownAstNode,\n OptionType,\n ParagraphNode,\n TextNode,\n ThematicBreakNode,\n} from '../types';\nimport { MENTION_DESERIALIZE_REGEX } from '../utils';\n\nexport default function deserialize<T extends InputNodeTypes>(node: MarkdownAstNode, options: OptionType) {\n const types = options?.nodeTypes as InputNodeTypes;\n const { linkDestinationKey, imageSourceKey, imageCaptionKey } = getOptions(options);\n\n let children: Array<DeserializedNode<T>> = [{ text: '' }];\n\n if (hasNodeChildren(node.children)) {\n children = node.children.flatMap((c: MarkdownAstNode) =>\n deserialize(\n {\n ...c,\n ordered: node.ordered || false,\n },\n options,\n ),\n );\n }\n\n switch (node.type) {\n case 'mention':\n const value = node.children ? node.children[0].value : undefined;\n const matches = value?.match(MENTION_DESERIALIZE_REGEX) as RegExpMatchArray;\n return {\n type: types.mention,\n category: matches[1],\n id: matches[2],\n children: [{ text: '' }],\n };\n case 'heading':\n return {\n type: types.heading[node.depth || 1],\n children,\n } as HeadingNode<T>;\n case 'list':\n return {\n type: node.ordered ? types.olList : types.ulList,\n children,\n } as ListNode<T>;\n case 'listItem':\n return { type: types.listItem, children } as ListItemNode<T>;\n case 'listItemChild':\n return { type: types.listItemChild, children } as ListItemChildNode<T>;\n case 'paragraph':\n return { type: types.paragraph, children } as ParagraphNode<T>;\n case 'link':\n return {\n type: types.link,\n [linkDestinationKey]: node.url,\n target: node.target,\n children,\n } as LinkNode<T>;\n case 'image':\n return {\n type: types.image,\n children: [{ text: '' }],\n [imageSourceKey]: node.url,\n [imageCaptionKey]: node.alt,\n } as ImageNode<T>;\n case 'blockquote':\n return { type: types.blockQuote, children } as BlockQuoteNode<T>;\n case 'code':\n return {\n type: types.codeBlock,\n language: node.lang ?? undefined,\n children: [{ text: node.value }],\n } as CodeBlockNode<T>;\n\n case 'html':\n if (node.value?.includes('<br>')) {\n return {\n break: true,\n type: types.paragraph,\n children: [{ text: node.value?.replace(/<br>/g, '') || '' }],\n } as ParagraphNode<T>;\n }\n return { type: 'paragraph', children: [{ text: node.value || '' }] };\n\n case 'emphasis':\n return {\n [types.emphasisMark as string]: true,\n ...forceLeafNode(children as Array<TextNode>),\n ...persistLeafFormats(children as Array<MarkdownAstNode>),\n } as unknown as ItalicNode<T>;\n case 'strong':\n return {\n [types.strongMark as string]: true,\n ...forceLeafNode(children as Array<TextNode>),\n ...persistLeafFormats(children as Array<MarkdownAstNode>),\n };\n case 'delete':\n return {\n [types.deleteMark as string]: true,\n ...forceLeafNode(children as Array<TextNode>),\n ...persistLeafFormats(children as Array<MarkdownAstNode>),\n };\n case 'inlineCode':\n return {\n [types.inlineCodeMark as string]: true,\n text: node.value,\n ...persistLeafFormats(children as Array<MarkdownAstNode>),\n };\n case 'thematicBreak':\n return {\n type: types.thematicBreak,\n children: [{ text: '' }],\n } as ThematicBreakNode<T>;\n\n case 'text':\n default:\n return { text: node.value ?? '' };\n }\n}\n\nconst hasNodeChildren = (children: MarkdownAstNode['children']): children is MarkdownAstNode[] =>\n !!children && Array.isArray(children) && children.length > 0;\n\nconst forceLeafNode = (children: Array<TextNode>) => ({\n text: children.map((k) => k?.text).join(''),\n});\n\n// This function is will take any unknown keys, and bring them up a level\n// allowing leaf nodes to have many different formats at once\n// for example, bold and italic on the same node\nconst persistLeafFormats = (children: Array<MarkdownAstNode>): Omit<MarkdownAstNode, 'children' | 'type' | 'text'> => {\n return children.reduce((acc, node) => {\n for (const key of Object.keys(node) as Array<keyof MarkdownAstNode>) {\n if (key === 'children' || key === 'type' || key === 'text') {\n continue;\n }\n\n acc[key] = node[key];\n }\n\n return acc;\n }, {});\n};\n\nconst getOptions = (options: OptionType) => {\n const linkDestinationKey = options.linkDestinationKey ?? 'link';\n const imageSourceKey = options.imageSourceKey ?? 'link';\n const imageCaptionKey = options.imageCaptionKey ?? 'caption';\n\n return { linkDestinationKey, imageSourceKey, imageCaptionKey };\n};\n"],"names":["deserialize","node","options","types","linkDestinationKey","imageSourceKey","imageCaptionKey","getOptions","children","hasNodeChildren","value","matches","MENTION_DESERIALIZE_REGEX","_a","_b","forceLeafNode","persistLeafFormats","k","acc","key"],"mappings":"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"}
|
package/dist/components/RichTextEditor/serializer/markdown/remarkFondue/extensions/link/index.es.js
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { visit as s } from "unist-util-visit";
|
|
2
|
+
import { Targets as n } from "../../../types.es.js";
|
|
3
|
+
function v() {
|
|
4
|
+
return c;
|
|
5
|
+
}
|
|
6
|
+
const c = (e) => {
|
|
7
|
+
s(e, "link", t);
|
|
8
|
+
function t(r, o, i) {
|
|
9
|
+
const u = i.children[o + 1];
|
|
10
|
+
g(r, u);
|
|
11
|
+
}
|
|
12
|
+
}, a = new RegExp(`{:target="(${Object.values(n).join("|")})"}`), l = (e) => {
|
|
13
|
+
var r;
|
|
14
|
+
const t = (r = e.value) == null ? void 0 : r.match(a);
|
|
15
|
+
if (!t)
|
|
16
|
+
return n.Self;
|
|
17
|
+
if (t[1] !== n.Blank)
|
|
18
|
+
return t[1];
|
|
19
|
+
}, f = (e) => {
|
|
20
|
+
var t;
|
|
21
|
+
return ((t = e.value) == null ? void 0 : t.replace(a, "")) ?? "";
|
|
22
|
+
}, g = (e, t) => {
|
|
23
|
+
t && (e.target = l(t), t.value = f(t));
|
|
24
|
+
};
|
|
25
|
+
export {
|
|
26
|
+
v as default
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=index.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../../../../../../src/components/RichTextEditor/serializer/markdown/remarkFondue/extensions/link/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { VisitorResult, visit } from 'unist-util-visit';\nimport { TargetValue, Targets } from '../../../types';\nimport { NodeChild, RemarkExtension, TreeNode } from '../../types';\n\nexport default function Extension(): RemarkExtension {\n return transformer;\n}\n\nconst transformer = (tree: TreeNode) => {\n visit(tree, 'link', visitor);\n\n function visitor(node: TreeNode, index: number, parent: TreeNode): VisitorResult {\n const child = parent.children[index + 1];\n updateLinkNodeWithTarget(node, child);\n }\n};\n\nconst targetValueRegex = new RegExp(`{:target=\"(${Object.values(Targets).join('|')})\"}`);\nconst getTarget = (child: NodeChild): TargetValue | undefined => {\n const match = child.value?.match(targetValueRegex);\n\n if (!match) {\n return Targets.Self;\n }\n\n if (match[1] === Targets.Blank) {\n return undefined;\n }\n\n return match[1] as TargetValue;\n};\nconst replaceChildValue = (child: NodeChild): string => child.value?.replace(targetValueRegex, '') ?? '';\n\nconst updateLinkNodeWithTarget = (node: TreeNode, child: NodeChild) => {\n if (!child) {\n return;\n }\n\n node.target = getTarget(child);\n child.value = replaceChildValue(child);\n};\n"],"names":["Extension","transformer","tree","visit","visitor","node","index","parent","child","updateLinkNodeWithTarget","targetValueRegex","Targets","getTarget","match","_a","replaceChildValue"],"mappings":";;AAMA,SAAwBA,IAA6B;AAC1C,SAAAC;AACX;AAEA,MAAMA,IAAc,CAACC,MAAmB;AAC9B,EAAAC,EAAAD,GAAM,QAAQE,CAAO;AAElB,WAAAA,EAAQC,GAAgBC,GAAeC,GAAiC;AAC7E,UAAMC,IAAQD,EAAO,SAASD,IAAQ,CAAC;AACvC,IAAAG,EAAyBJ,GAAMG,CAAK;AAAA,EACxC;AACJ,GAEME,IAAmB,IAAI,OAAO,cAAc,OAAO,OAAOC,CAAO,EAAE,KAAK,GAAG,MAAM,GACjFC,IAAY,CAACJ,MAA8C;;AAC7D,QAAMK,KAAQC,IAAAN,EAAM,UAAN,gBAAAM,EAAa,MAAMJ;AAEjC,MAAI,CAACG;AACD,WAAOF,EAAQ;AAGnB,MAAIE,EAAM,CAAC,MAAMF,EAAQ;AAIzB,WAAOE,EAAM,CAAC;AAClB,GACME,IAAoB,CAACP,MAA6B;;AAAA,WAAAM,IAAAN,EAAM,UAAN,gBAAAM,EAAa,QAAQJ,GAAkB,QAAO;AAAA,GAEhGD,IAA2B,CAACJ,GAAgBG,MAAqB;AACnE,EAAKA,MAIAH,EAAA,SAASO,EAAUJ,CAAK,GACvBA,EAAA,QAAQO,EAAkBP,CAAK;AACzC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../../../../../../src/components/RichTextEditor/serializer/markdown/remarkFondue/extensions/list/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { VisitorResult, visit } from 'unist-util-visit';\nimport { NodeChild,
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../../../../../../src/components/RichTextEditor/serializer/markdown/remarkFondue/extensions/list/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { VisitorResult, visit } from 'unist-util-visit';\nimport { NodeChild, RemarkExtension, TreeNode } from '../../types';\n\nexport default function Extension(): RemarkExtension {\n return transformer;\n}\n\nconst transformer = (tree: TreeNode) => {\n visit(tree, 'listItem', visitor);\n\n function visitor(node: TreeNode): VisitorResult {\n const { children } = node;\n\n for (const child of children) {\n if (!isType(child, 'paragraph')) {\n continue;\n }\n\n changeTypeToListItemChild(child);\n }\n }\n};\n\nconst isType = (node: NodeChild, type: string): boolean => node.type === type;\nconst changeTypeToListItemChild = (node: NodeChild) => (node.type = 'listItemChild');\n"],"names":["Extension","transformer","tree","visit","visitor","node","children","child","isType","changeTypeToListItemChild","type"],"mappings":";AAKA,SAAwBA,IAA6B;AAC1C,SAAAC;AACX;AAEA,MAAMA,IAAc,CAACC,MAAmB;AAC9B,EAAAC,EAAAD,GAAM,YAAYE,CAAO;AAE/B,WAASA,EAAQC,GAA+B;AACtC,UAAA,EAAE,UAAAC,EAAa,IAAAD;AAErB,eAAWE,KAASD;AAChB,MAAKE,EAAOD,GAAO,WAAW,KAI9BE,EAA0BF,CAAK;AAAA,EAEvC;AACJ,GAEMC,IAAS,CAACH,GAAiBK,MAA0BL,EAAK,SAASK,GACnED,IAA4B,CAACJ,MAAqBA,EAAK,OAAO;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../../../../../../src/components/RichTextEditor/serializer/markdown/remarkFondue/extensions/mention/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { VisitorResult, visit } from 'unist-util-visit';\nimport { NodeChild, NodeChildKey,
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../../../../../../src/components/RichTextEditor/serializer/markdown/remarkFondue/extensions/mention/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { VisitorResult, visit } from 'unist-util-visit';\nimport { NodeChild, NodeChildKey, RemarkExtension, TreeNode } from '../../types';\nimport { MENTION_SERIALIZE_REGEX } from '../../../utils';\nimport { RegExpMatchArray } from './types';\n\nexport default function Extension(): RemarkExtension {\n return transformer;\n}\n\nconst transformer = (tree: TreeNode) => {\n visit(tree, 'paragraph', visitor);\n\n function visitor(node: TreeNode): VisitorResult {\n const { children } = node;\n node.children = [];\n\n for (const child of children) {\n if (!is(child, 'text') || !child.value) {\n node.children.push(child);\n continue;\n }\n\n const matches = [...child.value.matchAll(MENTION_SERIALIZE_REGEX)] as RegExpMatchArray[];\n\n if (matches === null || matches.length === 0) {\n node.children.push(child);\n continue;\n }\n\n createNodes(matches, node, child.value);\n }\n }\n};\n\nconst is = (node: NodeChild, key: NodeChildKey): boolean => node[key] !== '' && !!node.value;\n\nconst createNodes = (matches: RegExpMatchArray[], node: TreeNode, value: string) => {\n if (matches[0].index > 0) {\n node.children.push({\n type: 'text',\n value: value.slice(0, matches[0].index),\n });\n }\n\n for (const [index, match] of matches.entries()) {\n node.children.push({\n type: 'mention',\n children: [{ type: 'text', value: match[0] }],\n });\n\n if (matches.length > index + 1 && value) {\n const startAt = match.index + match[0].length;\n node.children.push({\n type: 'text',\n value: value.slice(startAt, matches[index + 1].index),\n });\n }\n }\n\n const lastMatch = matches[matches.length - 1];\n\n if (lastMatch.index + lastMatch[0].length < value.length) {\n node.children.push({\n type: 'text',\n value: value.slice(lastMatch.index + lastMatch[0].length),\n });\n } else {\n node.children.push({\n type: 'text',\n value: '',\n });\n }\n};\n"],"names":["Extension","transformer","tree","visit","visitor","node","children","child","is","matches","MENTION_SERIALIZE_REGEX","createNodes","key","value","index","match","startAt","lastMatch"],"mappings":";;AAOA,SAAwBA,IAA6B;AAC1C,SAAAC;AACX;AAEA,MAAMA,IAAc,CAACC,MAAmB;AAC9B,EAAAC,EAAAD,GAAM,aAAaE,CAAO;AAEhC,WAASA,EAAQC,GAA+B;AACtC,UAAA,EAAE,UAAAC,EAAa,IAAAD;AACrB,IAAAA,EAAK,WAAW;AAEhB,eAAWE,KAASD,GAAU;AAC1B,UAAI,CAACE,EAAGD,GAAO,MAAM,KAAK,CAACA,EAAM,OAAO;AAC/B,QAAAF,EAAA,SAAS,KAAKE,CAAK;AACxB;AAAA,MACJ;AAEA,YAAME,IAAU,CAAC,GAAGF,EAAM,MAAM,SAASG,CAAuB,CAAC;AAEjE,UAAID,MAAY,QAAQA,EAAQ,WAAW,GAAG;AACrC,QAAAJ,EAAA,SAAS,KAAKE,CAAK;AACxB;AAAA,MACJ;AAEY,MAAAI,EAAAF,GAASJ,GAAME,EAAM,KAAK;AAAA,IAC1C;AAAA,EACJ;AACJ,GAEMC,IAAK,CAACH,GAAiBO,MAA+BP,EAAKO,CAAG,MAAM,MAAM,CAAC,CAACP,EAAK,OAEjFM,IAAc,CAACF,GAA6BJ,GAAgBQ,MAAkB;AAChF,EAAIJ,EAAQ,CAAC,EAAE,QAAQ,KACnBJ,EAAK,SAAS,KAAK;AAAA,IACf,MAAM;AAAA,IACN,OAAOQ,EAAM,MAAM,GAAGJ,EAAQ,CAAC,EAAE,KAAK;AAAA,EAAA,CACzC;AAGL,aAAW,CAACK,GAAOC,CAAK,KAAKN,EAAQ;AAMjC,QALAJ,EAAK,SAAS,KAAK;AAAA,MACf,MAAM;AAAA,MACN,UAAU,CAAC,EAAE,MAAM,QAAQ,OAAOU,EAAM,CAAC,GAAG;AAAA,IAAA,CAC/C,GAEGN,EAAQ,SAASK,IAAQ,KAAKD,GAAO;AACrC,YAAMG,IAAUD,EAAM,QAAQA,EAAM,CAAC,EAAE;AACvC,MAAAV,EAAK,SAAS,KAAK;AAAA,QACf,MAAM;AAAA,QACN,OAAOQ,EAAM,MAAMG,GAASP,EAAQK,IAAQ,CAAC,EAAE,KAAK;AAAA,MAAA,CACvD;AAAA,IACL;AAGJ,QAAMG,IAAYR,EAAQA,EAAQ,SAAS,CAAC;AAE5C,EAAIQ,EAAU,QAAQA,EAAU,CAAC,EAAE,SAASJ,EAAM,SAC9CR,EAAK,SAAS,KAAK;AAAA,IACf,MAAM;AAAA,IACN,OAAOQ,EAAM,MAAMI,EAAU,QAAQA,EAAU,CAAC,EAAE,MAAM;AAAA,EAAA,CAC3D,IAEDZ,EAAK,SAAS,KAAK;AAAA,IACf,MAAM;AAAA,IACN,OAAO;AAAA,EAAA,CACV;AAET;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const remarkFondue: () => (tree:
|
|
1
|
+
import { TreeNode } from './types';
|
|
2
|
+
export declare const remarkFondue: () => (tree: TreeNode) => void;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import e from "./extensions/mention/index.es.js";
|
|
2
2
|
import s from "./extensions/list/index.es.js";
|
|
3
|
+
import i from "./extensions/link/index.es.js";
|
|
3
4
|
const r = (o) => {
|
|
4
5
|
const n = /* @__PURE__ */ new Map();
|
|
5
|
-
n.set("mentionExtension", e()), n.set("listExtension", s());
|
|
6
|
+
n.set("mentionExtension", e()), n.set("listExtension", s()), n.set("linkExtension", i());
|
|
6
7
|
for (const t of n.values())
|
|
7
8
|
t(o);
|
|
8
|
-
},
|
|
9
|
+
}, E = () => r;
|
|
9
10
|
export {
|
|
10
|
-
|
|
11
|
+
E as remarkFondue
|
|
11
12
|
};
|
|
12
13
|
//# sourceMappingURL=index.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.js","sources":["../../../../../../src/components/RichTextEditor/serializer/markdown/remarkFondue/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {
|
|
1
|
+
{"version":3,"file":"index.es.js","sources":["../../../../../../src/components/RichTextEditor/serializer/markdown/remarkFondue/index.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { RemarkExtension, TreeNode } from './types';\nimport remarkMention from './extensions/mention';\nimport remarkList from './extensions/list';\nimport remarkLink from './extensions/link';\n\nconst transformer = (tree: TreeNode) => {\n const extensions = new Map<string, RemarkExtension>();\n\n extensions.set('mentionExtension', remarkMention());\n extensions.set('listExtension', remarkList());\n extensions.set('linkExtension', remarkLink());\n\n for (const extension of extensions.values()) {\n extension(tree);\n }\n};\n\nexport const remarkFondue = () => transformer;\n"],"names":["transformer","tree","extensions","remarkMention","remarkList","remarkLink","extension","remarkFondue"],"mappings":";;;AAOA,MAAMA,IAAc,CAACC,MAAmB;AAC9B,QAAAC,wBAAiB;AAEZ,EAAAA,EAAA,IAAI,oBAAoBC,EAAe,CAAA,GACvCD,EAAA,IAAI,iBAAiBE,EAAY,CAAA,GACjCF,EAAA,IAAI,iBAAiBG,EAAY,CAAA;AAEjC,aAAAC,KAAaJ,EAAW;AAC/B,IAAAI,EAAUL,CAAI;AAEtB,GAEaM,IAAe,MAAMP;"}
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
+
import { TargetValue } from '../types';
|
|
1
2
|
export type NodeChild = {
|
|
2
3
|
type: string;
|
|
3
4
|
value?: string;
|
|
4
5
|
text?: string;
|
|
6
|
+
target?: TargetValue;
|
|
5
7
|
children?: NodeChild[];
|
|
6
8
|
};
|
|
7
|
-
export type
|
|
9
|
+
export type TreeNode = {
|
|
8
10
|
type: string;
|
|
11
|
+
target?: TargetValue;
|
|
9
12
|
children: NodeChild[];
|
|
10
13
|
};
|
|
11
14
|
export type NodeChildKey = keyof NodeChild;
|
|
12
|
-
export type RemarkExtension = (tree:
|
|
15
|
+
export type RemarkExtension = (tree: TreeNode) => void;
|
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import g from "escape-html";
|
|
2
|
+
import { Targets as p } from "../types.es.js";
|
|
3
|
+
import { isLeafNode as l } from "./isLeafNode.es.js";
|
|
4
|
+
const m = (o) => `@[${o.category}:${o.id}]`, u = (o) => `${o}
|
|
5
|
+
`, d = (o, t, s, a) => {
|
|
6
|
+
const r = s && s.parentType === o.olList, c = s.children.length === 1 && l(s.children[0]);
|
|
6
7
|
let e = "";
|
|
7
|
-
for (let n = 0;
|
|
8
|
-
|
|
9
|
-
return `${e}${
|
|
8
|
+
for (let n = 0; a > n; n++)
|
|
9
|
+
r ? e += " " : e += " ";
|
|
10
|
+
return `${e}${r ? "1." : "-"} ${t}${c ? `
|
|
10
11
|
` : ""}`;
|
|
11
|
-
},
|
|
12
|
+
}, f = (o, t, s, a) => (a === t.codeBlock || s === t.codeBlock || (o = g(o)), o), C = (o, t, s, a, r, c) => {
|
|
12
13
|
const e = o.nodeTypes;
|
|
13
|
-
switch (
|
|
14
|
+
switch (r) {
|
|
14
15
|
case e.heading[1]:
|
|
15
16
|
return `# ${t}
|
|
16
17
|
`;
|
|
@@ -37,20 +38,20 @@ ${t}
|
|
|
37
38
|
\`\`\`
|
|
38
39
|
`;
|
|
39
40
|
case e.link:
|
|
40
|
-
const n = s.url ?? "";
|
|
41
|
-
return `[${t}](${n})`;
|
|
41
|
+
const n = s.url ?? "", $ = s.target ?? p.Blank;
|
|
42
|
+
return `[${t}](${n}){:target="${$}"}`;
|
|
42
43
|
case e.image:
|
|
43
|
-
const
|
|
44
|
-
return `![${s.caption}](${
|
|
44
|
+
const i = s.link ?? "";
|
|
45
|
+
return ``;
|
|
45
46
|
case e.ulList:
|
|
46
47
|
case e.olList:
|
|
47
48
|
return `
|
|
48
49
|
${t}
|
|
49
50
|
`;
|
|
50
51
|
case e.listItem:
|
|
51
|
-
return
|
|
52
|
+
return d(e, t, s, a);
|
|
52
53
|
case e.listItemChild:
|
|
53
|
-
return
|
|
54
|
+
return u(t);
|
|
54
55
|
case e.paragraph:
|
|
55
56
|
return `${t}
|
|
56
57
|
|
|
@@ -61,12 +62,12 @@ ${t}
|
|
|
61
62
|
|
|
62
63
|
`;
|
|
63
64
|
case e.mention:
|
|
64
|
-
return
|
|
65
|
+
return m(s);
|
|
65
66
|
default:
|
|
66
|
-
return
|
|
67
|
+
return f(t, e, r, c);
|
|
67
68
|
}
|
|
68
69
|
};
|
|
69
70
|
export {
|
|
70
|
-
|
|
71
|
+
C as applyFormattingToBlockNode
|
|
71
72
|
};
|
|
72
73
|
//# sourceMappingURL=applyFormattingToBlockNode.es.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"applyFormattingToBlockNode.es.js","sources":["../../../../../../src/components/RichTextEditor/serializer/markdown/serializer/applyFormattingToBlockNode.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport escapeHtml from 'escape-html';\nimport { BlockType, InputNodeTypes, NodeType, OptionType } from '../types';\nimport { isLeafNode } from './isLeafNode';\n\nconst processMentionNode = (chunk: BlockType) => `@[${chunk.category}:${chunk.id}]`;\n\nconst processListItemChildNode = (children: string) => `${children}\\n`;\n\nconst processListItemNode = (\n nodeTypes: InputNodeTypes,\n children: string,\n chunk: NodeType,\n listDepth: number,\n): string => {\n const isOL = chunk && chunk.parentType === nodeTypes.olList;\n const treatAsLeaf = (chunk as BlockType).children.length === 1 && isLeafNode((chunk as BlockType).children[0]);\n\n let spacer = '';\n for (let k = 0; listDepth > k; k++) {\n if (isOL) {\n // https://github.com/remarkjs/remark-react/issues/65\n spacer += ' ';\n } else {\n spacer += ' ';\n }\n }\n return `${spacer}${isOL ? '1.' : '-'} ${children}${treatAsLeaf ? '\\n' : ''}`;\n};\n\nconst shouldEscapeNode = (children: string, nodeTypes: InputNodeTypes, type?: string, parentType?: string) => {\n // don't escape if: code block, image, img\n const isCodeBlock = parentType === nodeTypes.codeBlock || type === nodeTypes.codeBlock;\n if (!isCodeBlock) {\n children = escapeHtml(children);\n }\n\n return children;\n};\n\nexport const applyFormattingToBlockNode = (\n options: OptionType,\n children: string,\n chunk: NodeType,\n listDepth: number,\n type?: string,\n parentType?: string,\n) => {\n const nodeTypes = options.nodeTypes as InputNodeTypes;\n\n switch (type) {\n case nodeTypes.heading[1]:\n return `# ${children}\\n`;\n case nodeTypes.heading[2]:\n return `## ${children}\\n`;\n case nodeTypes.heading[3]:\n return `### ${children}\\n`;\n case nodeTypes.heading[4]:\n return `#### ${children}\\n`;\n case nodeTypes.heading[5]:\n return `##### ${children}\\n`;\n case nodeTypes.heading[6]:\n return `###### ${children}\\n`;\n\n case nodeTypes.blockQuote:\n /**\n * For some reason, marked is parsing blockquote w/ one new line as\n * continued blockquote, so adding two new lines ensures that doesn't\n * happen\n */\n return `> ${children}`;\n\n case nodeTypes.codeBlock:\n return `\\`\\`\\`${(chunk as BlockType).language || ''}\\n${children}\\n\\`\\`\\`\\n`;\n\n case nodeTypes.link:\n const linkUrl = (chunk as BlockType).url ?? '';\n return `[${children}](${linkUrl})`;\n\n case nodeTypes.image:\n const imageUrl = (chunk as BlockType).link ?? '';\n return ``;\n\n case nodeTypes.ulList:\n case nodeTypes.olList:\n return `\\n${children}\\n`;\n\n case nodeTypes.listItem:\n return processListItemNode(nodeTypes, children, chunk, listDepth);\n\n case nodeTypes.listItemChild:\n return processListItemChildNode(children);\n\n case nodeTypes.paragraph:\n return `${children}\\n\\n`;\n\n case nodeTypes.thematicBreak:\n return `\\n---${children}\\n\\n`;\n\n case nodeTypes.mention:\n return processMentionNode(chunk as BlockType);\n\n default:\n return shouldEscapeNode(children, nodeTypes, type, parentType);\n }\n};\n"],"names":["processMentionNode","chunk","processListItemChildNode","children","processListItemNode","nodeTypes","listDepth","isOL","treatAsLeaf","isLeafNode","spacer","k","shouldEscapeNode","type","parentType","escapeHtml","applyFormattingToBlockNode","options","linkUrl","imageUrl"],"mappings":"
|
|
1
|
+
{"version":3,"file":"applyFormattingToBlockNode.es.js","sources":["../../../../../../src/components/RichTextEditor/serializer/markdown/serializer/applyFormattingToBlockNode.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport escapeHtml from 'escape-html';\nimport { BlockType, InputNodeTypes, NodeType, OptionType, Targets } from '../types';\nimport { isLeafNode } from './isLeafNode';\n\nconst processMentionNode = (chunk: BlockType) => `@[${chunk.category}:${chunk.id}]`;\n\nconst processListItemChildNode = (children: string) => `${children}\\n`;\n\nconst processListItemNode = (\n nodeTypes: InputNodeTypes,\n children: string,\n chunk: NodeType,\n listDepth: number,\n): string => {\n const isOL = chunk && chunk.parentType === nodeTypes.olList;\n const treatAsLeaf = (chunk as BlockType).children.length === 1 && isLeafNode((chunk as BlockType).children[0]);\n\n let spacer = '';\n for (let k = 0; listDepth > k; k++) {\n if (isOL) {\n // https://github.com/remarkjs/remark-react/issues/65\n spacer += ' ';\n } else {\n spacer += ' ';\n }\n }\n return `${spacer}${isOL ? '1.' : '-'} ${children}${treatAsLeaf ? '\\n' : ''}`;\n};\n\nconst shouldEscapeNode = (children: string, nodeTypes: InputNodeTypes, type?: string, parentType?: string) => {\n // don't escape if: code block, image, img\n const isCodeBlock = parentType === nodeTypes.codeBlock || type === nodeTypes.codeBlock;\n if (!isCodeBlock) {\n children = escapeHtml(children);\n }\n\n return children;\n};\n\nexport const applyFormattingToBlockNode = (\n options: OptionType,\n children: string,\n chunk: NodeType,\n listDepth: number,\n type?: string,\n parentType?: string,\n) => {\n const nodeTypes = options.nodeTypes as InputNodeTypes;\n\n switch (type) {\n case nodeTypes.heading[1]:\n return `# ${children}\\n`;\n case nodeTypes.heading[2]:\n return `## ${children}\\n`;\n case nodeTypes.heading[3]:\n return `### ${children}\\n`;\n case nodeTypes.heading[4]:\n return `#### ${children}\\n`;\n case nodeTypes.heading[5]:\n return `##### ${children}\\n`;\n case nodeTypes.heading[6]:\n return `###### ${children}\\n`;\n\n case nodeTypes.blockQuote:\n /**\n * For some reason, marked is parsing blockquote w/ one new line as\n * continued blockquote, so adding two new lines ensures that doesn't\n * happen\n */\n return `> ${children}`;\n\n case nodeTypes.codeBlock:\n return `\\`\\`\\`${(chunk as BlockType).language || ''}\\n${children}\\n\\`\\`\\`\\n`;\n\n case nodeTypes.link:\n const linkUrl = (chunk as BlockType).url ?? '';\n const target = (chunk as BlockType).target ?? Targets.Blank;\n return `[${children}](${linkUrl}){:target=\"${target}\"}`;\n\n case nodeTypes.image:\n const imageUrl = (chunk as BlockType).link ?? '';\n return ``;\n\n case nodeTypes.ulList:\n case nodeTypes.olList:\n return `\\n${children}\\n`;\n\n case nodeTypes.listItem:\n return processListItemNode(nodeTypes, children, chunk, listDepth);\n\n case nodeTypes.listItemChild:\n return processListItemChildNode(children);\n\n case nodeTypes.paragraph:\n return `${children}\\n\\n`;\n\n case nodeTypes.thematicBreak:\n return `\\n---${children}\\n\\n`;\n\n case nodeTypes.mention:\n return processMentionNode(chunk as BlockType);\n\n default:\n return shouldEscapeNode(children, nodeTypes, type, parentType);\n }\n};\n"],"names":["processMentionNode","chunk","processListItemChildNode","children","processListItemNode","nodeTypes","listDepth","isOL","treatAsLeaf","isLeafNode","spacer","k","shouldEscapeNode","type","parentType","escapeHtml","applyFormattingToBlockNode","options","linkUrl","target","Targets","imageUrl"],"mappings":";;;AAMA,MAAMA,IAAqB,CAACC,MAAqB,KAAKA,EAAM,YAAYA,EAAM,OAExEC,IAA2B,CAACC,MAAqB,GAAGA;AAAA,GAEpDC,IAAsB,CACxBC,GACAF,GACAF,GACAK,MACS;AACT,QAAMC,IAAON,KAASA,EAAM,eAAeI,EAAU,QAC/CG,IAAeP,EAAoB,SAAS,WAAW,KAAKQ,EAAYR,EAAoB,SAAS,CAAC,CAAC;AAE7G,MAAIS,IAAS;AACb,WAASC,IAAI,GAAGL,IAAYK,GAAGA;AAC3B,IAAIJ,IAEUG,KAAA,QAEAA,KAAA;AAGlB,SAAO,GAAGA,IAASH,IAAO,OAAO,OAAOJ,IAAWK,IAAc;AAAA,IAAO;AAC5E,GAEMI,IAAmB,CAACT,GAAkBE,GAA2BQ,GAAeC,OAE9DA,MAAeT,EAAU,aAAaQ,MAASR,EAAU,cAEzEF,IAAWY,EAAWZ,CAAQ,IAG3BA,IAGEa,IAA6B,CACtCC,GACAd,GACAF,GACAK,GACAO,GACAC,MACC;AACD,QAAMT,IAAYY,EAAQ;AAE1B,UAAQJ,GAAM;AAAA,IACV,KAAKR,EAAU,QAAQ,CAAC;AACpB,aAAO,KAAKF;AAAA;AAAA,IAChB,KAAKE,EAAU,QAAQ,CAAC;AACpB,aAAO,MAAMF;AAAA;AAAA,IACjB,KAAKE,EAAU,QAAQ,CAAC;AACpB,aAAO,OAAOF;AAAA;AAAA,IAClB,KAAKE,EAAU,QAAQ,CAAC;AACpB,aAAO,QAAQF;AAAA;AAAA,IACnB,KAAKE,EAAU,QAAQ,CAAC;AACpB,aAAO,SAASF;AAAA;AAAA,IACpB,KAAKE,EAAU,QAAQ,CAAC;AACpB,aAAO,UAAUF;AAAA;AAAA,IAErB,KAAKE,EAAU;AAMX,aAAO,KAAKF;AAAA,IAEhB,KAAKE,EAAU;AACJ,aAAA,SAAUJ,EAAoB,YAAY;AAAA,EAAOE;AAAA;AAAA;AAAA,IAE5D,KAAKE,EAAU;AACL,YAAAa,IAAWjB,EAAoB,OAAO,IACtCkB,IAAUlB,EAAoB,UAAUmB,EAAQ;AAC/C,aAAA,IAAIjB,MAAae,eAAqBC;AAAA,IAEjD,KAAKd,EAAU;AACL,YAAAgB,IAAYpB,EAAoB,QAAQ;AACvC,aAAA,KAAMA,EAAoB,YAAYoB;AAAA,IAEjD,KAAKhB,EAAU;AAAA,IACf,KAAKA,EAAU;AACJ,aAAA;AAAA,EAAKF;AAAA;AAAA,IAEhB,KAAKE,EAAU;AACX,aAAOD,EAAoBC,GAAWF,GAAUF,GAAOK,CAAS;AAAA,IAEpE,KAAKD,EAAU;AACX,aAAOH,EAAyBC,CAAQ;AAAA,IAE5C,KAAKE,EAAU;AACX,aAAO,GAAGF;AAAA;AAAA;AAAA,IAEd,KAAKE,EAAU;AACJ,aAAA;AAAA,KAAQF;AAAA;AAAA;AAAA,IAEnB,KAAKE,EAAU;AACX,aAAOL,EAAmBC,CAAkB;AAAA,IAEhD;AACI,aAAOW,EAAiBT,GAAUE,GAAWQ,GAAMC,CAAU;AAAA,EACrE;AACJ;"}
|