@mittwald/flow-react-components 0.2.0-alpha.461 → 0.2.0-alpha.462
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/dist/assets/doc-properties.json +607 -565
- package/dist/js/components/src/components/Markdown/Markdown.mjs +56 -7
- package/dist/js/components/src/components/Markdown/Markdown.mjs.map +1 -1
- package/dist/js/components/src/components/Markdown/lib/getHeadingLevelWithOffset.mjs +9 -0
- package/dist/js/components/src/components/Markdown/lib/getHeadingLevelWithOffset.mjs.map +1 -0
- package/dist/js/components/src/components/MarkdownEditor/MarkdownEditor.mjs +2 -0
- package/dist/js/components/src/components/MarkdownEditor/MarkdownEditor.mjs.map +1 -1
- package/dist/types/components/List/typedList.d.ts +2 -2
- package/dist/types/components/Markdown/Markdown.d.ts +2 -0
- package/dist/types/components/Markdown/Markdown.d.ts.map +1 -1
- package/dist/types/components/Markdown/lib/getHeadingLevelWithOffset.d.ts +2 -0
- package/dist/types/components/Markdown/lib/getHeadingLevelWithOffset.d.ts.map +1 -0
- package/dist/types/components/Markdown/lib/getHeadingLevelWithOffset.test.d.ts +2 -0
- package/dist/types/components/Markdown/lib/getHeadingLevelWithOffset.test.d.ts.map +1 -0
- package/dist/types/components/Markdown/stories/Default.stories.d.ts +1 -0
- package/dist/types/components/Markdown/stories/Default.stories.d.ts.map +1 -1
- package/dist/types/components/MarkdownEditor/MarkdownEditor.d.ts +3 -2
- package/dist/types/components/MarkdownEditor/MarkdownEditor.d.ts.map +1 -1
- package/package.json +4 -4
|
@@ -13,21 +13,70 @@ import styles from './Markdown.module.scss.mjs';
|
|
|
13
13
|
import { extractTextFromFirstChild } from '../../lib/react/remote.mjs';
|
|
14
14
|
import clsx from 'clsx';
|
|
15
15
|
import remarkGfm from 'remark-gfm';
|
|
16
|
+
import { getHeadingLevelWithOffset } from './lib/getHeadingLevelWithOffset.mjs';
|
|
16
17
|
|
|
17
18
|
const Markdown = (props) => {
|
|
18
|
-
const {
|
|
19
|
+
const {
|
|
20
|
+
children,
|
|
21
|
+
color = "default",
|
|
22
|
+
className,
|
|
23
|
+
headingOffset = 0,
|
|
24
|
+
...rest
|
|
25
|
+
} = props;
|
|
19
26
|
const headingAndLinkColor = color === "default" ? "primary" : color;
|
|
20
27
|
const textColor = color === "default" ? void 0 : color;
|
|
21
28
|
const components = {
|
|
22
29
|
a: (props2) => /* @__PURE__ */ jsx(Link, { target: "_blank", color: headingAndLinkColor, href: props2.href, children: props2.children }),
|
|
23
30
|
p: (props2) => /* @__PURE__ */ jsx(Text, { elementType: "p", color: textColor, children: props2.children }),
|
|
24
31
|
code: (props2) => /* @__PURE__ */ jsx(InlineCode, { color, children: props2.children }),
|
|
25
|
-
h1: (props2) => /* @__PURE__ */ jsx(
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
32
|
+
h1: (props2) => /* @__PURE__ */ jsx(
|
|
33
|
+
Heading,
|
|
34
|
+
{
|
|
35
|
+
level: getHeadingLevelWithOffset(1, headingOffset),
|
|
36
|
+
color: headingAndLinkColor,
|
|
37
|
+
children: props2.children
|
|
38
|
+
}
|
|
39
|
+
),
|
|
40
|
+
h2: (props2) => /* @__PURE__ */ jsx(
|
|
41
|
+
Heading,
|
|
42
|
+
{
|
|
43
|
+
level: getHeadingLevelWithOffset(2, headingOffset),
|
|
44
|
+
color: headingAndLinkColor,
|
|
45
|
+
children: props2.children
|
|
46
|
+
}
|
|
47
|
+
),
|
|
48
|
+
h3: (props2) => /* @__PURE__ */ jsx(
|
|
49
|
+
Heading,
|
|
50
|
+
{
|
|
51
|
+
level: getHeadingLevelWithOffset(3, headingOffset),
|
|
52
|
+
color: headingAndLinkColor,
|
|
53
|
+
children: props2.children
|
|
54
|
+
}
|
|
55
|
+
),
|
|
56
|
+
h4: (props2) => /* @__PURE__ */ jsx(
|
|
57
|
+
Heading,
|
|
58
|
+
{
|
|
59
|
+
level: getHeadingLevelWithOffset(4, headingOffset),
|
|
60
|
+
color: headingAndLinkColor,
|
|
61
|
+
children: props2.children
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
h5: (props2) => /* @__PURE__ */ jsx(
|
|
65
|
+
Heading,
|
|
66
|
+
{
|
|
67
|
+
level: getHeadingLevelWithOffset(5, headingOffset),
|
|
68
|
+
color: headingAndLinkColor,
|
|
69
|
+
children: props2.children
|
|
70
|
+
}
|
|
71
|
+
),
|
|
72
|
+
h6: (props2) => /* @__PURE__ */ jsx(
|
|
73
|
+
Heading,
|
|
74
|
+
{
|
|
75
|
+
level: getHeadingLevelWithOffset(6, headingOffset),
|
|
76
|
+
color: headingAndLinkColor,
|
|
77
|
+
children: props2.children
|
|
78
|
+
}
|
|
79
|
+
),
|
|
31
80
|
hr: () => /* @__PURE__ */ jsx(Separator, {}),
|
|
32
81
|
pre: (props2) => {
|
|
33
82
|
const preElementContent = Children.toArray(props2.children)[0];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.mjs","sources":["../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, ReactNode } from \"react\";\nimport React, { Children, isValidElement } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\n\nexport interface MarkdownProps\n extends PropsWithClassName,\n Omit<Options, \"components\"> {\n /** The color schema of the markdown component. */\n color?: \"dark\" | \"light\" | \"default\";\n /** @internal */\n style?: CSSProperties;\n}\n\n/** @flr-generate all */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n const {
|
|
1
|
+
{"version":3,"file":"Markdown.mjs","sources":["../../../../../../src/components/Markdown/Markdown.tsx"],"sourcesContent":["import { CodeBlock } from \"@/components/CodeBlock\";\nimport { Heading } from \"@/components/Heading\";\nimport { InlineCode } from \"@/components/InlineCode\";\nimport { Link } from \"@/components/Link\";\nimport { Separator } from \"@/components/Separator\";\nimport { Text } from \"@/components/Text\";\nimport type { CSSProperties, FC, ReactNode } from \"react\";\nimport React, { Children, isValidElement } from \"react\";\nimport type { Components, Options } from \"react-markdown\";\nimport ReactMarkdown from \"react-markdown\";\nimport styles from \"./Markdown.module.scss\";\nimport { extractTextFromFirstChild } from \"@/lib/react/remote\";\nimport type { PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\n\nexport interface MarkdownProps\n extends PropsWithClassName,\n Omit<Options, \"components\"> {\n /** The color schema of the markdown component. */\n color?: \"dark\" | \"light\" | \"default\";\n /** Shifts all heading levels by the given offset. @default 0 */\n headingOffset?: number;\n /** @internal */\n style?: CSSProperties;\n}\n\n/** @flr-generate all */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n const {\n children,\n color = \"default\",\n className,\n headingOffset = 0,\n ...rest\n } = props;\n\n const headingAndLinkColor = color === \"default\" ? \"primary\" : color;\n const textColor = color === \"default\" ? undefined : color;\n\n const components: Components = {\n a: (props) => (\n <Link target=\"_blank\" color={headingAndLinkColor} href={props.href}>\n {props.children}\n </Link>\n ),\n p: (props) => (\n <Text elementType=\"p\" color={textColor}>\n {props.children}\n </Text>\n ),\n code: (props) => <InlineCode color={color}>{props.children}</InlineCode>,\n h1: (props) => (\n <Heading\n level={getHeadingLevelWithOffset(1, headingOffset)}\n color={headingAndLinkColor}\n >\n {props.children}\n </Heading>\n ),\n h2: (props) => (\n <Heading\n level={getHeadingLevelWithOffset(2, headingOffset)}\n color={headingAndLinkColor}\n >\n {props.children}\n </Heading>\n ),\n h3: (props) => (\n <Heading\n level={getHeadingLevelWithOffset(3, headingOffset)}\n color={headingAndLinkColor}\n >\n {props.children}\n </Heading>\n ),\n h4: (props) => (\n <Heading\n level={getHeadingLevelWithOffset(4, headingOffset)}\n color={headingAndLinkColor}\n >\n {props.children}\n </Heading>\n ),\n h5: (props) => (\n <Heading\n level={getHeadingLevelWithOffset(5, headingOffset)}\n color={headingAndLinkColor}\n >\n {props.children}\n </Heading>\n ),\n h6: (props) => (\n <Heading\n level={getHeadingLevelWithOffset(6, headingOffset)}\n color={headingAndLinkColor}\n >\n {props.children}\n </Heading>\n ),\n hr: () => <Separator />,\n pre: (props) => {\n const preElementContent = Children.toArray(props.children)[0];\n\n return (\n <CodeBlock\n copyable={false}\n color=\"dark\"\n language={\n isValidElement<{ className?: string }>(preElementContent) &&\n preElementContent.props.className\n ? preElementContent.props.className.replace(\"language-\", \"\")\n : undefined\n }\n code={String(\n isValidElement<{ children: string }>(preElementContent)\n ? preElementContent.props.children\n : preElementContent,\n )}\n />\n );\n },\n ul: (props) => (\n <Text color={textColor}>\n <ul>{props.children as ReactNode}</ul>\n </Text>\n ),\n ol: (props) => (\n <Text color={textColor}>\n <ol>{props.children as ReactNode}</ol>\n </Text>\n ),\n blockquote: (props) => (\n <Text color={textColor}>\n <blockquote>{props.children}</blockquote>\n </Text>\n ),\n };\n\n const textContent = extractTextFromFirstChild(children);\n\n return (\n <div className={clsx(styles.markdown, className)} {...rest}>\n <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>\n {textContent}\n </ReactMarkdown>\n </div>\n );\n};\n\nexport default Markdown;\n"],"names":["props"],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
const getHeadingLevelWithOffset = (level, offset) => {
|
|
4
|
+
const levelWithOffset = level + offset;
|
|
5
|
+
return levelWithOffset > 6 ? 6 : levelWithOffset < 1 ? 1 : levelWithOffset;
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export { getHeadingLevelWithOffset };
|
|
9
|
+
//# sourceMappingURL=getHeadingLevelWithOffset.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getHeadingLevelWithOffset.mjs","sources":["../../../../../../../src/components/Markdown/lib/getHeadingLevelWithOffset.ts"],"sourcesContent":["export const getHeadingLevelWithOffset = (level: number, offset: number) => {\n const levelWithOffset = level + offset;\n return levelWithOffset > 6 ? 6 : levelWithOffset < 1 ? 1 : levelWithOffset;\n};\n"],"names":[],"mappings":"AAAa,MAAA,yBAAA,GAA4B,CAAC,KAAA,EAAe,MAAmB,KAAA;AAC1E,EAAA,MAAM,kBAAkB,KAAQ,GAAA,MAAA;AAChC,EAAA,OAAO,eAAkB,GAAA,CAAA,GAAI,CAAI,GAAA,eAAA,GAAkB,IAAI,CAAI,GAAA,eAAA;AAC7D;;;;"}
|
|
@@ -19,6 +19,7 @@ const MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
|
|
|
19
19
|
onChange,
|
|
20
20
|
rows,
|
|
21
21
|
autoResizeMaxRows,
|
|
22
|
+
headingOffset,
|
|
22
23
|
...rest
|
|
23
24
|
} = props;
|
|
24
25
|
const [markdown, setMarkdown] = useState(value ?? "");
|
|
@@ -62,6 +63,7 @@ const MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
|
|
|
62
63
|
/* @__PURE__ */ jsx(
|
|
63
64
|
Markdown,
|
|
64
65
|
{
|
|
66
|
+
headingOffset,
|
|
65
67
|
className: styles.markdown,
|
|
66
68
|
style: {
|
|
67
69
|
maxHeight: `calc(var(--line-height--m) * ${autoResizeMaxRows ?? rows} + (var(--form-control--padding-y) * 2))`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport { Markdown } from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { handleKeyDown } from \"@/components/MarkdownEditor/lib/handleKeyDown\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport type MarkdownEditorProps = TextAreaProps
|
|
1
|
+
{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport { Markdown, type MarkdownProps } from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { handleKeyDown } from \"@/components/MarkdownEditor/lib/handleKeyDown\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport type MarkdownEditorProps = TextAreaProps &\n Pick<MarkdownProps, \"headingOffset\">;\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n const {\n isDisabled,\n children,\n className,\n value,\n onChange,\n rows,\n autoResizeMaxRows,\n headingOffset,\n ...rest\n } = props;\n\n const [markdown, setMarkdown] = useState(value ?? \"\");\n const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n const textAreaRef = useRef<HTMLTextAreaElement>(null);\n\n const rootClassName = clsx(\n styles.markdownEditor,\n className,\n styles[`mode-${mode}`],\n );\n\n return (\n <TextArea\n {...rest}\n isDisabled={isDisabled || mode === \"preview\"}\n className={rootClassName}\n ref={textAreaRef}\n value={value !== undefined ? value : markdown}\n rows={rows}\n autoResizeMaxRows={autoResizeMaxRows}\n onChange={(v) => {\n if (onChange) {\n onChange(v);\n }\n setMarkdown(v);\n }}\n onKeyDown={(e) => handleKeyDown(e, textAreaRef, setMarkdown, onChange)}\n >\n <Toolbar\n markdown={markdown}\n setMarkdown={setMarkdown}\n textAreaRef={textAreaRef}\n setMode={setMode}\n mode={mode}\n isDisabled={isDisabled}\n onChange={onChange}\n />\n\n <Markdown\n headingOffset={headingOffset}\n className={styles.markdown}\n style={{\n maxHeight: `calc(var(--line-height--m) * ${autoResizeMaxRows ?? rows} + (var(--form-control--padding-y) * 2))`,\n }}\n >\n {markdown}\n </Markdown>\n\n {children}\n </TextArea>\n );\n});\n\nexport default MarkdownEditor;\n"],"names":[],"mappings":";;;;;;;;;;AAeO,MAAM,cAAiB,GAAA,aAAA,CAAc,gBAAkB,EAAA,CAAC,KAAU,KAAA;AACvE,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAAS,SAAS,EAAE,CAAA;AACpD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA6B,QAAQ,CAAA;AAC7D,EAAM,MAAA,WAAA,GAAc,OAA4B,IAAI,CAAA;AAEpD,EAAA,MAAM,aAAgB,GAAA,IAAA;AAAA,IACpB,MAAO,CAAA,cAAA;AAAA,IACP,SAAA;AAAA,IACA,MAAA,CAAO,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA;AAAA,GACvB;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,UAAA,EAAY,cAAc,IAAS,KAAA,SAAA;AAAA,MACnC,SAAW,EAAA,aAAA;AAAA,MACX,GAAK,EAAA,WAAA;AAAA,MACL,KAAA,EAAO,KAAU,KAAA,MAAA,GAAY,KAAQ,GAAA,QAAA;AAAA,MACrC,IAAA;AAAA,MACA,iBAAA;AAAA,MACA,QAAA,EAAU,CAAC,CAAM,KAAA;AACf,QAAA,IAAI,QAAU,EAAA;AACZ,UAAA,QAAA,CAAS,CAAC,CAAA;AAAA;AAEZ,QAAA,WAAA,CAAY,CAAC,CAAA;AAAA,OACf;AAAA,MACA,WAAW,CAAC,CAAA,KAAM,cAAc,CAAG,EAAA,WAAA,EAAa,aAAa,QAAQ,CAAA;AAAA,MAErE,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,QAAA;AAAA,YACA,WAAA;AAAA,YACA,WAAA;AAAA,YACA,OAAA;AAAA,YACA,IAAA;AAAA,YACA,UAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,aAAA;AAAA,YACA,WAAW,MAAO,CAAA,QAAA;AAAA,YAClB,KAAO,EAAA;AAAA,cACL,SAAA,EAAW,CAAgC,6BAAA,EAAA,iBAAA,IAAqB,IAAI,CAAA,wCAAA;AAAA,aACtE;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAEC;AAAA;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
|
|
@@ -99,15 +99,15 @@ export declare const typedList: <T>() => {
|
|
|
99
99
|
onTransitionStartCapture?: import('react').TransitionEventHandler<HTMLTableRowElement> | undefined;
|
|
100
100
|
id?: import('react-aria').Key | undefined;
|
|
101
101
|
rel?: string | undefined;
|
|
102
|
+
isDisabled?: boolean | undefined;
|
|
103
|
+
value?: undefined;
|
|
102
104
|
target?: import('react').HTMLAttributeAnchorTarget | undefined;
|
|
103
105
|
href?: import('@react-types/shared').Href | undefined;
|
|
104
|
-
isDisabled?: boolean | undefined;
|
|
105
106
|
onPress?: ((e: import('react-aria').PressEvent) => void) | undefined;
|
|
106
107
|
onPressStart?: ((e: import('react-aria').PressEvent) => void) | undefined;
|
|
107
108
|
onPressEnd?: ((e: import('react-aria').PressEvent) => void) | undefined;
|
|
108
109
|
onPressChange?: ((isPressed: boolean) => void) | undefined;
|
|
109
110
|
onPressUp?: ((e: import('react-aria').PressEvent) => void) | undefined;
|
|
110
|
-
value?: undefined;
|
|
111
111
|
onHoverStart?: ((e: import('react-aria').HoverEvent) => void) | undefined;
|
|
112
112
|
onHoverEnd?: ((e: import('react-aria').HoverEvent) => void) | undefined;
|
|
113
113
|
onHoverChange?: ((isHovering: boolean) => void) | undefined;
|
|
@@ -4,6 +4,8 @@ import { PropsWithClassName } from '../../lib/types/props';
|
|
|
4
4
|
export interface MarkdownProps extends PropsWithClassName, Omit<Options, "components"> {
|
|
5
5
|
/** The color schema of the markdown component. */
|
|
6
6
|
color?: "dark" | "light" | "default";
|
|
7
|
+
/** Shifts all heading levels by the given offset. @default 0 */
|
|
8
|
+
headingOffset?: number;
|
|
7
9
|
}
|
|
8
10
|
/** @flr-generate all */
|
|
9
11
|
export declare const Markdown: FC<MarkdownProps>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Markdown/Markdown.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAiB,EAAE,EAAa,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAc,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAI1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../../src/components/Markdown/Markdown.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAiB,EAAE,EAAa,MAAM,OAAO,CAAC;AAE1D,OAAO,KAAK,EAAc,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAI1D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAK5D,MAAM,WAAW,aACf,SAAQ,kBAAkB,EACxB,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC;IAC7B,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACrC,gEAAgE;IAChE,aAAa,CAAC,EAAE,MAAM,CAAC;CAGxB;AAED,wBAAwB;AACxB,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAwHtC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getHeadingLevelWithOffset.d.ts","sourceRoot":"","sources":["../../../../../src/components/Markdown/lib/getHeadingLevelWithOffset.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,yBAAyB,GAAI,OAAO,MAAM,EAAE,QAAQ,MAAM,WAGtE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getHeadingLevelWithOffset.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/Markdown/lib/getHeadingLevelWithOffset.test.ts"],"names":[],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Markdown/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,
|
|
1
|
+
{"version":3,"file":"Default.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Markdown/stories/Default.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CAoB/B,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,QAAQ,CAAC,CAAC;AAEvC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AAEjC,eAAO,MAAM,IAAI,EAAE,KAQlB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAOnB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAsC,CAAC"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
+
import { MarkdownProps } from '../Markdown';
|
|
2
3
|
import { TextAreaProps } from '../TextArea';
|
|
3
4
|
export type MarkdownEditorMode = "editor" | "preview";
|
|
4
|
-
export type MarkdownEditorProps = TextAreaProps
|
|
5
|
+
export type MarkdownEditorProps = TextAreaProps & Pick<MarkdownProps, "headingOffset">;
|
|
5
6
|
/** @flr-generate all */
|
|
6
|
-
export declare const MarkdownEditor: React.FunctionComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
7
|
+
export declare const MarkdownEditor: React.FunctionComponent<TextAreaProps & Pick<MarkdownProps, "headingOffset"> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
7
8
|
export default MarkdownEditor;
|
|
8
9
|
//# sourceMappingURL=MarkdownEditor.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MarkdownEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAMrE,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG,aAAa,GAC7C,IAAI,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC;AAEvC,wBAAwB;AACxB,eAAO,MAAM,cAAc,0HA+DzB,CAAC;AAEH,eAAe,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.2.0-alpha.
|
|
3
|
+
"version": "0.2.0-alpha.462",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"dependencies": {
|
|
58
58
|
"@internationalized/string-compiler": "^3.2.6",
|
|
59
59
|
"@mittwald/password-tools-js": "3.0.0-alpha.18",
|
|
60
|
-
"@mittwald/react-tunnel": "0.2.0-alpha.
|
|
60
|
+
"@mittwald/react-tunnel": "0.2.0-alpha.462",
|
|
61
61
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
62
62
|
"@react-aria/form": "^3.1.0",
|
|
63
63
|
"@react-aria/live-announcer": "^3.4.4",
|
|
@@ -100,7 +100,7 @@
|
|
|
100
100
|
"@faker-js/faker": "^9.9.0",
|
|
101
101
|
"@internationalized/date": "^3.8.2",
|
|
102
102
|
"@mittwald/flow-core": "",
|
|
103
|
-
"@mittwald/flow-design-tokens": "0.2.0-alpha.
|
|
103
|
+
"@mittwald/flow-design-tokens": "0.2.0-alpha.462",
|
|
104
104
|
"@mittwald/react-use-promise": "^3.0.4",
|
|
105
105
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.3",
|
|
106
106
|
"@mittwald/typescript-config": "",
|
|
@@ -173,5 +173,5 @@
|
|
|
173
173
|
"optional": true
|
|
174
174
|
}
|
|
175
175
|
},
|
|
176
|
-
"gitHead": "
|
|
176
|
+
"gitHead": "b45ea2fff577a38068c140f495c92d76cd2e32f1"
|
|
177
177
|
}
|