@mittwald/flow-react-components 0.2.0-alpha.86 → 0.2.0-alpha.860

package/dist/js/packages/components/src/components/List/views/EmptyViewContainer/EmptyViewContainer.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import DivView from '../../../../views/DivView.mjs';
+import styles from '../../components/Items/Items.module.scss.mjs';
+import { EmptySearchResultView } from '../../components/EmptySearchResultView/EmptySearchResultView.mjs';
+import { EmptyView } from '../../components/EmptyView/EmptyView.mjs';
+
+const EmptyViewContainer = (props) => {
+  const emptyView = props.emptyView ?? /* @__PURE__ */ jsx(EmptyView, {});
+  const emptySearchResultView = props.emptySearchResultView ?? /* @__PURE__ */ jsx(EmptySearchResultView, {});
+  return /* @__PURE__ */ jsx(DivView, { className: styles.emptyView, children: props.viewType === "search" ? emptySearchResultView : emptyView });
+};
+
+export { EmptyViewContainer };
+//# sourceMappingURL=EmptyViewContainer.mjs.map

package/dist/js/packages/components/src/components/List/views/EmptyViewContainer/EmptyViewContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyViewContainer.mjs","sources":["../../../../../../../../../src/components/List/views/EmptyViewContainer/EmptyViewContainer.tsx"],"sourcesContent":["import DivView from \"@/views/DivView\";\nimport type { FC, ReactNode } from \"react\";\nimport styles from \"../../components/Items/Items.module.scss\";\nimport type { EmptyViewType } from \"../../model/types\";\nimport { EmptySearchResultView } from \"../../components/EmptySearchResultView\";\nimport { EmptyView } from \"../../components/EmptyView\";\n\nexport interface EmptyViewContainerProps {\n  emptyView?: ReactNode;\n  emptySearchResultView?: ReactNode;\n  viewType: EmptyViewType;\n}\n\n/** @flr-generate all */\nexport const EmptyViewContainer: FC<EmptyViewContainerProps> = (props) => {\n  const emptyView = props.emptyView ?? <EmptyView />;\n  const emptySearchResultView = props.emptySearchResultView ?? (\n    <EmptySearchResultView />\n  );\n  return (\n    <DivView className={styles.emptyView}>\n      {props.viewType === \"search\" ? emptySearchResultView : emptyView}\n    </DivView>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAcO,MAAM,kBAAA,GAAkD,CAAC,KAAA,KAAU;AACxE,EAAA,MAAM,SAAA,GAAY,KAAA,CAAM,SAAA,oBAAa,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA;AAChD,EAAA,MAAM,qBAAA,GAAwB,KAAA,CAAM,qBAAA,oBAClC,GAAA,CAAC,qBAAA,EAAA,EAAsB,CAAA;AAEzB,EAAA,uBACE,GAAA,CAAC,WAAQ,SAAA,EAAW,MAAA,CAAO,WACxB,QAAA,EAAA,KAAA,CAAM,QAAA,KAAa,QAAA,GAAW,qBAAA,GAAwB,SAAA,EACzD,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs

@@ -0,0 +1,45 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import '@mittwald/flow-icons';
+import '../Icon/components/IconSetProvider.mjs';
+import '../Icon/Icon.mjs';
+import '../../views/IconView.mjs';
+import { IconPending } from '../Icon/components/icons/IconPending.mjs';
+import styles from './LoadingSpinner.module.scss.mjs';
+import clsx from 'clsx';
+import { isAlphaColor } from '../../lib/types/props.mjs';
+import { useReducedMotion } from 'framer-motion';
+import { useDesignTokens } from '../../lib/theming/hooks/useDesignTokens.mjs';
+
+const globalSpinnerTime = performance.now();
+const LoadingSpinner = (props) => {
+  const { className, color = "default", ...rest } = props;
+  const preferReducedMotion = useReducedMotion();
+  const designTokens = useDesignTokens();
+  const loadingSpinnerTokens = designTokens["loading-spinner"];
+  const animationDurationMs = preferReducedMotion ? parseInt(loadingSpinnerTokens["transition-duration-slow"].value) : parseInt(loadingSpinnerTokens["transition-duration"].value);
+  const rootClassName = clsx(
+    styles.loadingSpinner,
+    isAlphaColor(color) && styles[color],
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    IconPending,
+    {
+      className: rootClassName,
+      ref: (element) => {
+        if (element) {
+          const elapsedMs = performance.now() - globalSpinnerTime;
+          const phaseMs = elapsedMs % animationDurationMs;
+          element.style.setProperty("--animation-delay", `${-phaseMs}ms`);
+        }
+      },
+      ...rest
+    }
+  );
+};
+
+export { LoadingSpinner, LoadingSpinner as default };
+//# sourceMappingURL=LoadingSpinner.mjs.map

package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.mjs","sources":["../../../../../../../src/components/LoadingSpinner/LoadingSpinner.tsx"],"sourcesContent":["import { type FC } from \"react\";\nimport React from \"react\";\nimport { IconPending } from \"@/components/Icon/components/icons\";\nimport styles from \"./LoadingSpinner.module.scss\";\nimport type { IconProps } from \"@/components/Icon\";\nimport clsx from \"clsx\";\nimport { type AlphaColor, isAlphaColor } from \"@/lib/types/props\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\nexport interface LoadingSpinnerProps extends IconProps {\n  /** The color of the loading spinner. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n}\n\nconst globalSpinnerTime = performance.now();\n\n/** @flr-generate all */\nexport const LoadingSpinner: FC<LoadingSpinnerProps> = (props) => {\n  const { className, color = \"default\", ...rest } = props;\n\n  const preferReducedMotion = useReducedMotion();\n\n  const designTokens = useDesignTokens();\n  const loadingSpinnerTokens = designTokens[\"loading-spinner\"];\n\n  const animationDurationMs = preferReducedMotion\n    ? parseInt(loadingSpinnerTokens[\"transition-duration-slow\"].value)\n    : parseInt(loadingSpinnerTokens[\"transition-duration\"].value);\n\n  const rootClassName = clsx(\n    styles.loadingSpinner,\n    isAlphaColor(color) && styles[color],\n    className,\n  );\n\n  return (\n    <IconPending\n      className={rootClassName}\n      ref={(element) => {\n        if (element) {\n          const elapsedMs = performance.now() - globalSpinnerTime;\n          const phaseMs = elapsedMs % animationDurationMs;\n\n          element.style.setProperty(\"--animation-delay\", `${-phaseMs}ms`);\n        }\n      }}\n      {...rest}\n    />\n  );\n};\n\nexport default LoadingSpinner;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAeA,MAAM,iBAAA,GAAoB,YAAY,GAAA,EAAI;AAGnC,MAAM,cAAA,GAA0C,CAAC,KAAA,KAAU;AAChE,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,GAAQ,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAElD,EAAA,MAAM,sBAAsB,gBAAA,EAAiB;AAE7C,EAAA,MAAM,eAAe,eAAA,EAAgB;AACrC,EAAA,MAAM,oBAAA,GAAuB,aAAa,iBAAiB,CAAA;AAE3D,EAAA,MAAM,mBAAA,GAAsB,mBAAA,GACxB,QAAA,CAAS,oBAAA,CAAqB,0BAA0B,CAAA,CAAE,KAAK,CAAA,GAC/D,QAAA,CAAS,oBAAA,CAAqB,qBAAqB,CAAA,CAAE,KAAK,CAAA;AAE9D,EAAA,MAAM,aAAA,GAAgB,IAAA;AAAA,IACpB,MAAA,CAAO,cAAA;AAAA,IACP,YAAA,CAAa,KAAK,CAAA,IAAK,MAAA,CAAO,KAAK,CAAA;AAAA,IACnC;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,aAAA;AAAA,MACX,GAAA,EAAK,CAAC,OAAA,KAAY;AAChB,QAAA,IAAI,OAAA,EAAS;AACX,UAAA,MAAM,SAAA,GAAY,WAAA,CAAY,GAAA,EAAI,GAAI,iBAAA;AACtC,UAAA,MAAM,UAAU,SAAA,GAAY,mBAAA;AAE5B,UAAA,OAAA,CAAQ,MAAM,WAAA,CAAY,mBAAA,EAAqB,CAAA,EAAG,CAAC,OAAO,CAAA,EAAA,CAAI,CAAA;AAAA,QAChE;AAAA,MACF,CAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.module.scss.mjs

@@ -0,0 +1,17 @@
+"use client"
+/* */
+const loadingSpinner = "flow--loading-spinner";
+const spin = "flow--loading-spinner--spin";
+const light = "flow--loading-spinner--light";
+const dark = "flow--loading-spinner--dark";
+const styles = {
+	loadingSpinner: loadingSpinner,
+	spin: spin,
+	light: light,
+	dark: dark,
+	"dark-static": "flow--loading-spinner--dark-static",
+	"light-static": "flow--loading-spinner--light-static"
+};
+
+export { dark, styles as default, light, loadingSpinner, spin };
+//# sourceMappingURL=LoadingSpinner.module.scss.mjs.map

package/dist/js/packages/components/src/components/LoadingSpinner/LoadingSpinner.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingSpinner.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}

package/dist/js/packages/components/src/components/Markdown/Markdown.mjs

@@ -0,0 +1,110 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { CodeBlock } from '../CodeBlock/CodeBlock.mjs';
+import { Heading } from '../Heading/Heading.mjs';
+import { InlineCode } from '../InlineCode/InlineCode.mjs';
+import { Link } from '../Link/Link.mjs';
+import { Separator } from '../Separator/Separator.mjs';
+import { Text } from '../Text/Text.mjs';
+import { Children, isValidElement } from 'react';
+import ReactMarkdown from 'react-markdown';
+import styles from './Markdown.module.scss.mjs';
+import { extractTextFromFirstChild } from '../../lib/react/remote.mjs';
+import clsx from 'clsx';
+import remarkGfm from 'remark-gfm';
+import { getHeadingLevelWithOffset } from './lib/getHeadingLevelWithOffset.mjs';
+
+const Markdown = (props) => {
+  const {
+    children,
+    color = "default",
+    className,
+    headingOffset = 0,
+    components: customComponents,
+    ref,
+    ...rest
+  } = props;
+  const defaultComponents = {
+    a: (props2) => /* @__PURE__ */ jsx(Link, { target: "_blank", color, href: props2.href, children: props2.children }),
+    p: (props2) => /* @__PURE__ */ jsx(Text, { elementType: "p", color, children: props2.children }),
+    code: (props2) => /* @__PURE__ */ jsx(InlineCode, { color, children: props2.children }),
+    h1: (props2) => /* @__PURE__ */ jsx(
+      Heading,
+      {
+        level: getHeadingLevelWithOffset(1, headingOffset),
+        color,
+        children: props2.children
+      }
+    ),
+    h2: (props2) => /* @__PURE__ */ jsx(
+      Heading,
+      {
+        level: getHeadingLevelWithOffset(2, headingOffset),
+        color,
+        children: props2.children
+      }
+    ),
+    h3: (props2) => /* @__PURE__ */ jsx(
+      Heading,
+      {
+        level: getHeadingLevelWithOffset(3, headingOffset),
+        color,
+        children: props2.children
+      }
+    ),
+    h4: (props2) => /* @__PURE__ */ jsx(
+      Heading,
+      {
+        level: getHeadingLevelWithOffset(4, headingOffset),
+        color,
+        children: props2.children
+      }
+    ),
+    h5: (props2) => /* @__PURE__ */ jsx(
+      Heading,
+      {
+        level: getHeadingLevelWithOffset(5, headingOffset),
+        color,
+        children: props2.children
+      }
+    ),
+    h6: (props2) => /* @__PURE__ */ jsx(
+      Heading,
+      {
+        level: getHeadingLevelWithOffset(6, headingOffset),
+        color,
+        children: props2.children
+      }
+    ),
+    hr: () => /* @__PURE__ */ jsx(Separator, {}),
+    pre: (props2) => {
+      const preElementContent = Children.toArray(props2.children)[0];
+      return /* @__PURE__ */ jsx(
+        CodeBlock,
+        {
+          copyable: false,
+          language: isValidElement(preElementContent) && preElementContent.props.className ? preElementContent.props.className.replace(
+            "language-",
+            ""
+          ) : void 0,
+          code: String(
+            isValidElement(preElementContent) ? preElementContent.props.children : preElementContent
+          ).trim()
+        }
+      );
+    },
+    ul: (props2) => /* @__PURE__ */ jsx(Text, { color, children: /* @__PURE__ */ jsx("ul", { children: props2.children }) }),
+    ol: (props2) => /* @__PURE__ */ jsx(Text, { color, children: /* @__PURE__ */ jsx("ol", { children: props2.children }) }),
+    blockquote: (props2) => /* @__PURE__ */ jsx(Text, { color, children: /* @__PURE__ */ jsx("blockquote", { children: props2.children }) })
+  };
+  const textContent = extractTextFromFirstChild(children);
+  const mergedComponents = {
+    ...defaultComponents,
+    ...customComponents
+  };
+  return /* @__PURE__ */ jsx("div", { className: clsx(styles.markdown, className), ...rest, ref, children: /* @__PURE__ */ jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], components: mergedComponents, children: textContent }) });
+};
+
+export { Markdown };
+//# sourceMappingURL=Markdown.mjs.map

package/dist/js/packages/components/src/components/Markdown/Markdown.mjs.map

@@ -0,0 +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, Ref } from \"react\";\nimport { 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 { AlphaColor, PropsWithClassName } from \"@/lib/types/props\";\nimport clsx from \"clsx\";\nimport remarkGfm from \"remark-gfm\";\nimport { getHeadingLevelWithOffset } from \"@/components/Markdown/lib/getHeadingLevelWithOffset\";\nimport type { CodeEditorLanguage } from \"@/components/CodeEditor/languages\";\n\nexport interface MarkdownProps\n  extends PropsWithClassName, Omit<Options, \"components\"> {\n  /** The color schema of the markdown component. @default \"default\" */\n  color?: \"default\" | AlphaColor;\n  /** Shifts all heading levels by the given offset. @default 0 */\n  headingOffset?: number;\n  /** Allows overriding markdown element renderers from outside. */\n  components?: Components;\n  /** @internal */\n  style?: CSSProperties;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @flr-generate all\n * @flr-ignore-props components\n */\nexport const Markdown: FC<MarkdownProps> = (props) => {\n  const {\n    children,\n    color = \"default\",\n    className,\n    headingOffset = 0,\n    components: customComponents,\n    ref,\n    ...rest\n  } = props;\n\n  const defaultComponents: Components = {\n    a: (props) => (\n      <Link target=\"_blank\" color={color} href={props.href}>\n        {props.children}\n      </Link>\n    ),\n    p: (props) => (\n      <Text elementType=\"p\" color={color}>\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={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h2: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(2, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h3: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(3, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h4: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(4, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h5: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(5, headingOffset)}\n        color={color}\n      >\n        {props.children}\n      </Heading>\n    ),\n    h6: (props) => (\n      <Heading\n        level={getHeadingLevelWithOffset(6, headingOffset)}\n        color={color}\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          language={\n            isValidElement<{ className?: string }>(preElementContent) &&\n            preElementContent.props.className\n              ? (preElementContent.props.className.replace(\n                  \"language-\",\n                  \"\",\n                ) as CodeEditorLanguage)\n              : undefined\n          }\n          code={String(\n            isValidElement<{ children: string }>(preElementContent)\n              ? preElementContent.props.children\n              : preElementContent,\n          ).trim()}\n        />\n      );\n    },\n    ul: (props) => (\n      <Text color={color}>\n        <ul>{props.children as ReactNode}</ul>\n      </Text>\n    ),\n    ol: (props) => (\n      <Text color={color}>\n        <ol>{props.children as ReactNode}</ol>\n      </Text>\n    ),\n    blockquote: (props) => (\n      <Text color={color}>\n        <blockquote>{props.children}</blockquote>\n      </Text>\n    ),\n  };\n\n  const textContent = extractTextFromFirstChild(children);\n  const mergedComponents: Components = {\n    ...defaultComponents,\n    ...customComponents,\n  };\n\n  return (\n    <div className={clsx(styles.markdown, className)} {...rest} ref={ref}>\n      <ReactMarkdown remarkPlugins={[remarkGfm]} components={mergedComponents}>\n        {textContent}\n      </ReactMarkdown>\n    </div>\n  );\n};\n\nexport default Markdown;\n"],"names":["props"],"mappings":"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"}

package/dist/js/packages/components/src/components/Markdown/lib/getHeadingLevelWithOffset.mjs

@@ -0,0 +1,9 @@
+"use client"
+/* */
+const getHeadingLevelWithOffset = (level, offset) => {
+  const levelWithOffset = level + offset;
+  return levelWithOffset > 6 ? 6 : levelWithOffset < 1 ? 1 : levelWithOffset;
+};
+
+export { getHeadingLevelWithOffset };
+//# sourceMappingURL=getHeadingLevelWithOffset.mjs.map

package/dist/js/packages/components/src/components/Markdown/lib/getHeadingLevelWithOffset.mjs.map

@@ -0,0 +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":"AAAO,MAAM,yBAAA,GAA4B,CAAC,KAAA,EAAe,MAAA,KAAmB;AAC1E,EAAA,MAAM,kBAAkB,KAAA,GAAQ,MAAA;AAChC,EAAA,OAAO,eAAA,GAAkB,CAAA,GAAI,CAAA,GAAI,eAAA,GAAkB,IAAI,CAAA,GAAI,eAAA;AAC7D;;;;"}

package/dist/js/packages/components/src/components/MarkdownEditor/MarkdownEditor.mjs

@@ -0,0 +1,113 @@
+"use client"
+/* */
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState } from 'react';
+import styles from './MarkdownEditor.module.scss.mjs';
+import { Markdown } from '../Markdown/Markdown.mjs';
+import { TextArea } from '../TextArea/TextArea.mjs';
+import { Toolbar } from './components/Toolbar.mjs';
+import clsx from 'clsx';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+import { useObjectRef } from '@react-aria/utils';
+import { modifyValueByMarkdownSyntax, scrollToCursor } from './lib/modifyValueByMarkdownSyntax.mjs';
+import { modifyValueByType } from './lib/modifyValueByType.mjs';
+import { useControlledHostValueProps } from '../../lib/remote/useControlledHostValueProps.mjs';
+
+const MarkdownEditor = flowComponent("MarkdownEditor", (props) => {
+  const {
+    isDisabled,
+    isReadOnly,
+    children,
+    className,
+    rows = 5,
+    autoResizeMaxRows,
+    headingOffset,
+    markdownComponent: MarkdownComponent = Markdown,
+    value,
+    onChange,
+    ref,
+    ...rest
+  } = useControlledHostValueProps(props);
+  const inputRef = useObjectRef(ref);
+  const [mode, setMode] = useState("editor");
+  const rootClassName = clsx(
+    styles.markdownEditor,
+    className,
+    styles[`mode-${mode}`]
+  );
+  const handleKeyDown = (event) => {
+    if (event.key !== "Enter") {
+      return;
+    }
+    const modifyParams = modifyValueByMarkdownSyntax(value, inputRef);
+    if (!modifyParams) {
+      return;
+    }
+    const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;
+    requestAnimationFrame(() => {
+      if (inputRef.current) {
+        inputRef.current.value = newValue;
+        inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);
+        scrollToCursor(newValue, inputRef.current);
+      }
+    });
+    event.preventDefault();
+    onChange(newValue);
+  };
+  const handleToolButtonPressed = (type) => {
+    const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(
+      value,
+      type,
+      inputRef
+    );
+    requestAnimationFrame(() => {
+      if (inputRef.current) {
+        inputRef.current.value = newValue;
+        inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);
+        inputRef.current.focus();
+      }
+    });
+    onChange(newValue);
+  };
+  return /* @__PURE__ */ jsx("div", { className: rootClassName, children: /* @__PURE__ */ jsxs(
+    TextArea,
+    {
+      ...rest,
+      "aria-hidden": mode === "preview",
+      isReadOnly: isReadOnly || mode === "preview",
+      isDisabled,
+      ref: inputRef,
+      value,
+      rows,
+      autoResizeMaxRows,
+      onChange,
+      onKeyDown: handleKeyDown,
+      children: [
+        mode === "preview" && /* @__PURE__ */ jsx(
+          MarkdownComponent,
+          {
+            headingOffset,
+            className: styles.markdown,
+            style: {
+              height: inputRef.current?.offsetHeight
+            },
+            children: value
+          }
+        ),
+        children,
+        /* @__PURE__ */ jsx(
+          Toolbar,
+          {
+            currentMode: mode,
+            isDisabled,
+            onModeChange: setMode,
+            onToolPressed: handleToolButtonPressed
+          }
+        )
+      ]
+    }
+  ) });
+});
+
+export { MarkdownEditor };
+//# sourceMappingURL=MarkdownEditor.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/MarkdownEditor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type ComponentType, type KeyboardEventHandler, useState } from \"react\";\nimport styles from \"./MarkdownEditor.module.scss\";\nimport {\n  Markdown as DefaultMarkdown,\n  type MarkdownProps,\n} from \"@/components/Markdown\";\nimport { TextArea, type TextAreaProps } from \"@/components/TextArea\";\nimport { Toolbar } from \"@/components/MarkdownEditor/components/Toolbar\";\nimport clsx from \"clsx\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport {\n  modifyValueByMarkdownSyntax,\n  scrollToCursor,\n} from \"@/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax\";\nimport {\n  type InsertType,\n  modifyValueByType,\n} from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { useControlledHostValueProps } from \"@/lib/remote/useControlledHostValueProps\";\n\nexport type MarkdownEditorMode = \"editor\" | \"preview\";\n\nexport interface MarkdownEditorProps\n  extends TextAreaProps, Pick<MarkdownProps, \"headingOffset\"> {\n  /**\n   * Allows replacing the markdown preview renderer implementation. Defaults to\n   * the internal `Markdown` component.\n   */\n  markdownComponent?: ComponentType<MarkdownProps>;\n}\n\n/** @flr-generate all */\nexport const MarkdownEditor = flowComponent(\"MarkdownEditor\", (props) => {\n  const {\n    isDisabled,\n    isReadOnly,\n    children,\n    className,\n    rows = 5,\n    autoResizeMaxRows,\n    headingOffset,\n    markdownComponent: MarkdownComponent = DefaultMarkdown,\n    value,\n    onChange,\n    ref,\n    ...rest\n  } = useControlledHostValueProps(props);\n\n  const inputRef = useObjectRef(ref);\n  const [mode, setMode] = useState<MarkdownEditorMode>(\"editor\");\n\n  const rootClassName = clsx(\n    styles.markdownEditor,\n    className,\n    styles[`mode-${mode}`],\n  );\n\n  const handleKeyDown: KeyboardEventHandler = (event) => {\n    if (event.key !== \"Enter\") {\n      return;\n    }\n\n    const modifyParams = modifyValueByMarkdownSyntax(value, inputRef);\n    if (!modifyParams) {\n      return;\n    }\n\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyParams;\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current?.setSelectionRange(newSelectionStart, newSelectionEnd);\n        scrollToCursor(newValue, inputRef.current);\n      }\n    });\n\n    event.preventDefault();\n    onChange(newValue);\n  };\n\n  const handleToolButtonPressed = (type: InsertType) => {\n    const { newValue, newSelectionStart, newSelectionEnd } = modifyValueByType(\n      value,\n      type,\n      inputRef,\n    );\n\n    requestAnimationFrame(() => {\n      if (inputRef.current) {\n        inputRef.current.value = newValue;\n        inputRef.current.setSelectionRange(newSelectionStart, newSelectionEnd);\n        inputRef.current.focus();\n      }\n    });\n\n    onChange(newValue);\n  };\n\n  return (\n    <div className={rootClassName}>\n      <TextArea\n        {...rest}\n        aria-hidden={mode === \"preview\"}\n        isReadOnly={isReadOnly || mode === \"preview\"}\n        isDisabled={isDisabled}\n        ref={inputRef}\n        value={value}\n        rows={rows}\n        autoResizeMaxRows={autoResizeMaxRows}\n        onChange={onChange}\n        onKeyDown={handleKeyDown}\n      >\n        {mode === \"preview\" && (\n          <MarkdownComponent\n            headingOffset={headingOffset}\n            className={styles.markdown}\n            style={{\n              height: inputRef.current?.offsetHeight,\n            }}\n          >\n            {value}\n          </MarkdownComponent>\n        )}\n        {children}\n        <Toolbar\n          currentMode={mode}\n          isDisabled={isDisabled}\n          onModeChange={setMode}\n          onToolPressed={handleToolButtonPressed}\n        />\n      </TextArea>\n    </div>\n  );\n});\n\nexport default MarkdownEditor;\n"],"names":["DefaultMarkdown"],"mappings":"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"}

package/dist/js/packages/components/src/components/MarkdownEditor/MarkdownEditor.module.scss.mjs

@@ -0,0 +1,19 @@
+"use client"
+/* */
+const markdownEditor = "flow--markdown-editor";
+const toolbar = "flow--markdown-editor--toolbar";
+const toolbarButtons = "flow--markdown-editor--toolbar-buttons";
+const modeButton = "flow--markdown-editor--mode-button";
+const markdown = "flow--markdown-editor--markdown";
+const styles = {
+	markdownEditor: markdownEditor,
+	toolbar: toolbar,
+	toolbarButtons: toolbarButtons,
+	modeButton: modeButton,
+	markdown: markdown,
+	"mode-editor": "flow--markdown-editor--mode-editor",
+	"mode-preview": "flow--markdown-editor--mode-preview"
+};
+
+export { styles as default, markdown, markdownEditor, modeButton, toolbar, toolbarButtons };
+//# sourceMappingURL=MarkdownEditor.module.scss.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/MarkdownEditor.module.scss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditor.module.scss.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}

package/dist/js/packages/components/src/components/MarkdownEditor/components/ModeButton.mjs

@@ -0,0 +1,34 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { Button } from '../../Button/Button.mjs';
+import { useLocalizedStringFormatter } from '../../TranslationProvider/useLocalizedStringFormatter.mjs';
+import locales from '../../../../../../_virtual/_.locale.json@bb0db7b5021f874310cbe5b6cc3d9cac.mjs';
+import styles from '../MarkdownEditor.module.scss.mjs';
+
+const ModeButton = (props) => {
+  const { currentMode, onChange, ...rest } = props;
+  const stringFormatter = useLocalizedStringFormatter(
+    locales,
+    "MarkdownEditor"
+  );
+  const otherMode = currentMode === "editor" ? "preview" : "editor";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: styles.modeButton,
+      size: "s",
+      variant: "plain",
+      color: "dark",
+      onPress: () => {
+        onChange?.(otherMode);
+      },
+      ...rest,
+      children: stringFormatter.format(`mode.${otherMode}`)
+    }
+  );
+};
+
+export { ModeButton };
+//# sourceMappingURL=ModeButton.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/components/ModeButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModeButton.mjs","sources":["../../../../../../../../src/components/MarkdownEditor/components/ModeButton.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\nimport type { MarkdownEditorMode } from \"@/components/MarkdownEditor/MarkdownEditor\";\nimport styles from \"../MarkdownEditor.module.scss\";\n\nexport interface ModeButtonProps extends Pick<ButtonProps, \"isDisabled\"> {\n  currentMode: MarkdownEditorMode;\n  onChange?: (newMode: MarkdownEditorMode) => void;\n}\n\nexport const ModeButton: FC<ModeButtonProps> = (props) => {\n  const { currentMode, onChange, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(\n    locales,\n    \"MarkdownEditor\",\n  );\n  const otherMode = currentMode === \"editor\" ? \"preview\" : \"editor\";\n\n  return (\n    <Button\n      className={styles.modeButton}\n      size=\"s\"\n      variant=\"plain\"\n      color=\"dark\"\n      onPress={() => {\n        onChange?.(otherMode);\n      }}\n      {...rest}\n    >\n      {stringFormatter.format(`mode.${otherMode}`)}\n    </Button>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAYO,MAAM,UAAA,GAAkC,CAAC,KAAA,KAAU;AACxD,EAAA,MAAM,EAAE,WAAA,EAAa,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAE3C,EAAA,MAAM,eAAA,GAAkB,2BAAA;AAAA,IACtB,OAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,SAAA,GAAY,WAAA,KAAgB,QAAA,GAAW,SAAA,GAAY,QAAA;AAEzD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAA,CAAO,UAAA;AAAA,MAClB,IAAA,EAAK,GAAA;AAAA,MACL,OAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAM,MAAA;AAAA,MACN,SAAS,MAAM;AACb,QAAA,QAAA,GAAW,SAAS,CAAA;AAAA,MACtB,CAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,eAAA,CAAgB,MAAA,CAAO,CAAA,KAAA,EAAQ,SAAS,CAAA,CAAE;AAAA;AAAA,GAC7C;AAEJ;;;;"}

package/dist/js/packages/components/src/components/MarkdownEditor/components/Toolbar.mjs

@@ -0,0 +1,49 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import styles from '../MarkdownEditor.module.scss.mjs';
+import '@mittwald/flow-icons';
+import '../../Icon/components/IconSetProvider.mjs';
+import '../../Icon/Icon.mjs';
+import '../../../views/IconView.mjs';
+import { IconBold } from '../../Icon/components/icons/IconBold.mjs';
+import { IconCode } from '../../Icon/components/icons/IconCode.mjs';
+import { IconItalic } from '../../Icon/components/icons/IconItalic.mjs';
+import { IconLink } from '../../Icon/components/icons/IconLink.mjs';
+import { IconOrderedList } from '../../Icon/components/icons/IconOrderedList.mjs';
+import { IconQuote } from '../../Icon/components/icons/IconQuote.mjs';
+import { IconStrikeThrough } from '../../Icon/components/icons/IconStrikeThrough.mjs';
+import { IconUnorderedList } from '../../Icon/components/icons/IconUnorderedList.mjs';
+import { ToolbarButton } from './ToolbarButton.mjs';
+import { ModeButton } from './ModeButton.mjs';
+
+const Toolbar = (props) => {
+  const sharedToolButtonProps = {
+    onPress: props.onToolPressed,
+    isDisabled: props.isDisabled || props.currentMode === "preview"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.toolbar, role: "toolbar", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbarButtons, children: [
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "bold", children: /* @__PURE__ */ jsx(IconBold, {}) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "italic", children: /* @__PURE__ */ jsx(IconItalic, {}) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "strikeThrough", children: /* @__PURE__ */ jsx(IconStrikeThrough, {}) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "quote", children: /* @__PURE__ */ jsx(IconQuote, {}) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "code", children: /* @__PURE__ */ jsx(IconCode, {}) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "link", children: /* @__PURE__ */ jsx(IconLink, {}) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "unorderedList", children: /* @__PURE__ */ jsx(IconUnorderedList, {}) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "orderedList", children: /* @__PURE__ */ jsx(IconOrderedList, {}) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ModeButton,
+      {
+        onChange: props.onModeChange,
+        currentMode: props.currentMode,
+        isDisabled: props.isDisabled
+      }
+    )
+  ] });
+};
+
+export { Toolbar };
+//# sourceMappingURL=Toolbar.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/components/Toolbar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.mjs","sources":["../../../../../../../../src/components/MarkdownEditor/components/Toolbar.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport styles from \"@/components/MarkdownEditor/MarkdownEditor.module.scss\";\nimport {\n  IconBold,\n  IconCode,\n  IconItalic,\n  IconLink,\n  IconOrderedList,\n  IconQuote,\n  IconStrikeThrough,\n  IconUnorderedList,\n} from \"@/components/Icon/components/icons\";\nimport {\n  ToolbarButton,\n  type ToolBarButtonProps,\n} from \"@/components/MarkdownEditor/components/ToolbarButton\";\nimport {\n  ModeButton,\n  type ModeButtonProps,\n} from \"@/components/MarkdownEditor/components/ModeButton\";\nimport type { ButtonProps } from \"@/components/Button\";\n\ninterface ToolbarProps extends Pick<ButtonProps, \"isDisabled\"> {\n  currentMode: ModeButtonProps[\"currentMode\"];\n  onModeChange: ModeButtonProps[\"onChange\"];\n  onToolPressed: ToolBarButtonProps[\"onPress\"];\n}\n\nexport const Toolbar: FC<ToolbarProps> = (props) => {\n  const sharedToolButtonProps: Partial<ToolBarButtonProps> = {\n    onPress: props.onToolPressed,\n    isDisabled: props.isDisabled || props.currentMode === \"preview\",\n  };\n\n  return (\n    <div className={styles.toolbar} role=\"toolbar\">\n      <div className={styles.toolbarButtons}>\n        <ToolbarButton {...sharedToolButtonProps} type=\"bold\">\n          <IconBold />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"italic\">\n          <IconItalic />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"strikeThrough\">\n          <IconStrikeThrough />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"quote\">\n          <IconQuote />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"code\">\n          <IconCode />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"link\">\n          <IconLink />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"unorderedList\">\n          <IconUnorderedList />\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"orderedList\">\n          <IconOrderedList />\n        </ToolbarButton>\n      </div>\n\n      <ModeButton\n        onChange={props.onModeChange}\n        currentMode={props.currentMode}\n        isDisabled={props.isDisabled}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AA4BO,MAAM,OAAA,GAA4B,CAAC,KAAA,KAAU;AAClD,EAAA,MAAM,qBAAA,GAAqD;AAAA,IACzD,SAAS,KAAA,CAAM,aAAA;AAAA,IACf,UAAA,EAAY,KAAA,CAAM,UAAA,IAAc,KAAA,CAAM,WAAA,KAAgB;AAAA,GACxD;AAEA,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,OAAA,EAAS,MAAK,SAAA,EACnC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,cAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,iBAAe,GAAG,qBAAA,EAAuB,MAAK,MAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,sBAEA,GAAA,CAAC,iBAAe,GAAG,qBAAA,EAAuB,MAAK,QAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,cAAW,CAAA,EACd,CAAA;AAAA,sBAEA,GAAA,CAAC,iBAAe,GAAG,qBAAA,EAAuB,MAAK,eAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,qBAAkB,CAAA,EACrB,CAAA;AAAA,sBAEA,GAAA,CAAC,iBAAe,GAAG,qBAAA,EAAuB,MAAK,OAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,aAAU,CAAA,EACb,CAAA;AAAA,sBAEA,GAAA,CAAC,iBAAe,GAAG,qBAAA,EAAuB,MAAK,MAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,sBAEA,GAAA,CAAC,iBAAe,GAAG,qBAAA,EAAuB,MAAK,MAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,YAAS,CAAA,EACZ,CAAA;AAAA,sBAEA,GAAA,CAAC,iBAAe,GAAG,qBAAA,EAAuB,MAAK,eAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,qBAAkB,CAAA,EACrB,CAAA;AAAA,sBAEA,GAAA,CAAC,iBAAe,GAAG,qBAAA,EAAuB,MAAK,aAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,mBAAgB,CAAA,EACnB;AAAA,KAAA,EACF,CAAA;AAAA,oBAEA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,UAAU,KAAA,CAAM,YAAA;AAAA,QAChB,aAAa,KAAA,CAAM,WAAA;AAAA,QACnB,YAAY,KAAA,CAAM;AAAA;AAAA;AACpB,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/js/packages/components/src/components/MarkdownEditor/components/ToolbarButton.mjs

@@ -0,0 +1,31 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { Button } from '../../Button/Button.mjs';
+import { useLocalizedStringFormatter } from '../../TranslationProvider/useLocalizedStringFormatter.mjs';
+import locales from '../../../../../../_virtual/_.locale.json@bb0db7b5021f874310cbe5b6cc3d9cac.mjs';
+
+const ToolbarButton = (props) => {
+  const { children, type, onPress, ...rest } = props;
+  const stringFormatter = useLocalizedStringFormatter(
+    locales,
+    "MarkdownEditor"
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...rest,
+      "data-button-type": type,
+      "aria-label": stringFormatter.format(`toolbar.${type}`),
+      size: "s",
+      variant: "plain",
+      color: "dark",
+      onPress: () => onPress?.(type),
+      children
+    }
+  );
+};
+
+export { ToolbarButton };
+//# sourceMappingURL=ToolbarButton.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/components/ToolbarButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.mjs","sources":["../../../../../../../../src/components/MarkdownEditor/components/ToolbarButton.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport { type InsertType } from \"@/components/MarkdownEditor/lib/modifyValueByType\";\nimport { Button, type ButtonProps } from \"@/components/Button\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport locales from \"../locales/*.locale.json\";\n\nexport interface ToolBarButtonProps extends Pick<\n  ButtonProps,\n  \"isDisabled\" | \"children\"\n> {\n  type: InsertType;\n  onPress?: (type: InsertType) => void;\n}\n\nexport const ToolbarButton: FC<ToolBarButtonProps> = (props) => {\n  const { children, type, onPress, ...rest } = props;\n\n  const stringFormatter = useLocalizedStringFormatter(\n    locales,\n    \"MarkdownEditor\",\n  );\n\n  return (\n    <Button\n      {...rest}\n      data-button-type={type}\n      aria-label={stringFormatter.format(`toolbar.${type}`)}\n      size=\"s\"\n      variant=\"plain\"\n      color=\"dark\"\n      onPress={() => onPress?.(type)}\n    >\n      {children}\n    </Button>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAcO,MAAM,aAAA,GAAwC,CAAC,KAAA,KAAU;AAC9D,EAAA,MAAM,EAAE,QAAA,EAAU,IAAA,EAAM,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AAE7C,EAAA,MAAM,eAAA,GAAkB,2BAAA;AAAA,IACtB,OAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,kBAAA,EAAkB,IAAA;AAAA,MAClB,YAAA,EAAY,eAAA,CAAgB,MAAA,CAAO,CAAA,QAAA,EAAW,IAAI,CAAA,CAAE,CAAA;AAAA,MACpD,IAAA,EAAK,GAAA;AAAA,MACL,OAAA,EAAQ,OAAA;AAAA,MACR,KAAA,EAAM,MAAA;AAAA,MACN,OAAA,EAAS,MAAM,OAAA,GAAU,IAAI,CAAA;AAAA,MAE5B;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/js/packages/components/src/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax.mjs

@@ -0,0 +1,58 @@
+"use client"
+/* */
+const scrollToCursor = (value = "", textarea) => {
+  const { selectionStart } = textarea;
+  const lineHeight = parseInt(
+    getComputedStyle(textarea).lineHeight || "20",
+    10
+  );
+  const lines = value.slice(0, selectionStart).split("\n").length;
+  textarea.scrollTop = (lines - 1) * lineHeight;
+};
+const modifyValueByMarkdownSyntax = (value = "", textAreaRef) => {
+  const textarea = textAreaRef.current;
+  if (!textarea) {
+    return;
+  }
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  const before = value.slice(0, start);
+  const after = value.slice(end);
+  const lineStart = before.lastIndexOf("\n") + 1;
+  const currentLine = before.slice(lineStart);
+  const orderedMatch = currentLine.match(/^(\s*)(\d+)\.\s+/);
+  const unorderedMatch = currentLine.match(/^(\s*)([-*+])\s+/);
+  if ((orderedMatch || unorderedMatch) && currentLine.trim().match(/^([-*+]|\d+\.)$/)) {
+    const newText = value.slice(0, lineStart) + "\n" + after;
+    return {
+      newValue: newText,
+      newSelectionStart: lineStart + 1,
+      newSelectionEnd: lineStart + 1
+    };
+  }
+  if (orderedMatch) {
+    const indent = orderedMatch[1];
+    const nextNum = parseInt(orderedMatch[2] ?? "", 10) + 1;
+    const insert = `
+${indent}${nextNum}. `;
+    return {
+      newValue: before + insert + after,
+      newSelectionStart: start + insert.length,
+      newSelectionEnd: start + insert.length
+    };
+  } else if (unorderedMatch) {
+    const indent = unorderedMatch[1];
+    const bullet = unorderedMatch[2];
+    const insert = `
+${indent}${bullet} `;
+    const newText = before + insert + after;
+    return {
+      newValue: newText,
+      newSelectionStart: start + insert.length,
+      newSelectionEnd: start + insert.length
+    };
+  }
+};
+
+export { modifyValueByMarkdownSyntax, scrollToCursor };
+//# sourceMappingURL=modifyValueByMarkdownSyntax.mjs.map

package/dist/js/packages/components/src/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modifyValueByMarkdownSyntax.mjs","sources":["../../../../../../../../src/components/MarkdownEditor/lib/modifyValueByMarkdownSyntax.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nexport const scrollToCursor = (value = \"\", textarea: HTMLTextAreaElement) => {\n  const { selectionStart } = textarea;\n  const lineHeight = parseInt(\n    getComputedStyle(textarea).lineHeight || \"20\",\n    10,\n  );\n  const lines = value.slice(0, selectionStart).split(\"\\n\").length;\n  textarea.scrollTop = (lines - 1) * lineHeight;\n};\n\nexport const modifyValueByMarkdownSyntax = (\n  value = \"\",\n  textAreaRef: RefObject<HTMLTextAreaElement | null>,\n) => {\n  const textarea = textAreaRef.current;\n  if (!textarea) {\n    return;\n  }\n\n  const start = textarea.selectionStart;\n  const end = textarea.selectionEnd;\n\n  const before = value.slice(0, start);\n  const after = value.slice(end);\n  const lineStart = before.lastIndexOf(\"\\n\") + 1;\n  const currentLine = before.slice(lineStart);\n\n  const orderedMatch = currentLine.match(/^(\\s*)(\\d+)\\.\\s+/);\n  const unorderedMatch = currentLine.match(/^(\\s*)([-*+])\\s+/);\n\n  if (\n    (orderedMatch || unorderedMatch) &&\n    currentLine.trim().match(/^([-*+]|\\d+\\.)$/)\n  ) {\n    const newText = value.slice(0, lineStart) + \"\\n\" + after;\n\n    return {\n      newValue: newText,\n      newSelectionStart: lineStart + 1,\n      newSelectionEnd: lineStart + 1,\n    } as const;\n  }\n\n  if (orderedMatch) {\n    const indent = orderedMatch[1];\n    const nextNum = parseInt(orderedMatch[2] ?? \"\", 10) + 1;\n    const insert = `\\n${indent}${nextNum}. `;\n\n    return {\n      newValue: before + insert + after,\n      newSelectionStart: start + insert.length,\n      newSelectionEnd: start + insert.length,\n    } as const;\n  } else if (unorderedMatch) {\n    const indent = unorderedMatch[1];\n    const bullet = unorderedMatch[2];\n    const insert = `\\n${indent}${bullet} `;\n\n    const newText = before + insert + after;\n    return {\n      newValue: newText,\n      newSelectionStart: start + insert.length,\n      newSelectionEnd: start + insert.length,\n    } as const;\n  }\n};\n"],"names":[],"mappings":"AAEO,MAAM,cAAA,GAAiB,CAAC,KAAA,GAAQ,EAAA,EAAI,QAAA,KAAkC;AAC3E,EAAA,MAAM,EAAE,gBAAe,GAAI,QAAA;AAC3B,EAAA,MAAM,UAAA,GAAa,QAAA;AAAA,IACjB,gBAAA,CAAiB,QAAQ,CAAA,CAAE,UAAA,IAAc,IAAA;AAAA,IACzC;AAAA,GACF;AACA,EAAA,MAAM,KAAA,GAAQ,MAAM,KAAA,CAAM,CAAA,EAAG,cAAc,CAAA,CAAE,KAAA,CAAM,IAAI,CAAA,CAAE,MAAA;AACzD,EAAA,QAAA,CAAS,SAAA,GAAA,CAAa,QAAQ,CAAA,IAAK,UAAA;AACrC;AAEO,MAAM,2BAAA,GAA8B,CACzC,KAAA,GAAQ,EAAA,EACR,WAAA,KACG;AACH,EAAA,MAAM,WAAW,WAAA,CAAY,OAAA;AAC7B,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA;AAAA,EACF;AAEA,EAAA,MAAM,QAAQ,QAAA,CAAS,cAAA;AACvB,EAAA,MAAM,MAAM,QAAA,CAAS,YAAA;AAErB,EAAA,MAAM,MAAA,GAAS,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,KAAK,CAAA;AACnC,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,KAAA,CAAM,GAAG,CAAA;AAC7B,EAAA,MAAM,SAAA,GAAY,MAAA,CAAO,WAAA,CAAY,IAAI,CAAA,GAAI,CAAA;AAC7C,EAAA,MAAM,WAAA,GAAc,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA;AAE1C,EAAA,MAAM,YAAA,GAAe,WAAA,CAAY,KAAA,CAAM,kBAAkB,CAAA;AACzD,EAAA,MAAM,cAAA,GAAiB,WAAA,CAAY,KAAA,CAAM,kBAAkB,CAAA;AAE3D,EAAA,IAAA,CACG,gBAAgB,cAAA,KACjB,WAAA,CAAY,MAAK,CAAE,KAAA,CAAM,iBAAiB,CAAA,EAC1C;AACA,IAAA,MAAM,UAAU,KAAA,CAAM,KAAA,CAAM,CAAA,EAAG,SAAS,IAAI,IAAA,GAAO,KAAA;AAEnD,IAAA,OAAO;AAAA,MACL,QAAA,EAAU,OAAA;AAAA,MACV,mBAAmB,SAAA,GAAY,CAAA;AAAA,MAC/B,iBAAiB,SAAA,GAAY;AAAA,KAC/B;AAAA,EACF;AAEA,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,MAAM,MAAA,GAAS,aAAa,CAAC,CAAA;AAC7B,IAAA,MAAM,UAAU,QAAA,CAAS,YAAA,CAAa,CAAC,CAAA,IAAK,EAAA,EAAI,EAAE,CAAA,GAAI,CAAA;AACtD,IAAA,MAAM,MAAA,GAAS;AAAA,EAAK,MAAM,GAAG,OAAO,CAAA,EAAA,CAAA;AAEpC,IAAA,OAAO;AAAA,MACL,QAAA,EAAU,SAAS,MAAA,GAAS,KAAA;AAAA,MAC5B,iBAAA,EAAmB,QAAQ,MAAA,CAAO,MAAA;AAAA,MAClC,eAAA,EAAiB,QAAQ,MAAA,CAAO;AAAA,KAClC;AAAA,EACF,WAAW,cAAA,EAAgB;AACzB,IAAA,MAAM,MAAA,GAAS,eAAe,CAAC,CAAA;AAC/B,IAAA,MAAM,MAAA,GAAS,eAAe,CAAC,CAAA;AAC/B,IAAA,MAAM,MAAA,GAAS;AAAA,EAAK,MAAM,GAAG,MAAM,CAAA,CAAA,CAAA;AAEnC,IAAA,MAAM,OAAA,GAAU,SAAS,MAAA,GAAS,KAAA;AAClC,IAAA,OAAO;AAAA,MACL,QAAA,EAAU,OAAA;AAAA,MACV,iBAAA,EAAmB,QAAQ,MAAA,CAAO,MAAA;AAAA,MAClC,eAAA,EAAiB,QAAQ,MAAA,CAAO;AAAA,KAClC;AAAA,EACF;AACF;;;;"}