@mittwald/flow-react-components 0.2.0-alpha.6 → 0.2.0-alpha.600

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

@@ -0,0 +1,123 @@
+"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 '../../lib/propsContext/propsContext.mjs';
+import { PropsContextProvider } from '../../lib/propsContext/components/PropsContextProvider.mjs';
+import { TunnelProvider, TunnelExit } from '@mittwald/react-tunnel';
+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,
+    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);
+  };
+  const propsContext = {
+    Label: {
+      tunnelId: "label"
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: rootClassName, children: /* @__PURE__ */ jsxs(TunnelProvider, { children: [
+    /* @__PURE__ */ jsx(TunnelExit, { id: "label" }),
+    /* @__PURE__ */ jsx(
+      Toolbar,
+      {
+        currentMode: mode,
+        isDisabled,
+        onModeChange: setMode,
+        onToolPressed: handleToolButtonPressed
+      }
+    ),
+    /* @__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(
+            Markdown,
+            {
+              headingOffset,
+              className: styles.markdown,
+              style: {
+                height: inputRef.current?.offsetHeight
+              },
+              children: value
+            }
+          ),
+          /* @__PURE__ */ jsx(PropsContextProvider, { props: propsContext, children })
+        ]
+      }
+    )
+  ] }) });
+});
+
+export { MarkdownEditor, MarkdownEditor as default };
+//# sourceMappingURL=MarkdownEditor.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownEditor.mjs","sources":["../../../../../../src/components/MarkdownEditor/MarkdownEditor.tsx"],"sourcesContent":["import { type KeyboardEventHandler, 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 { useObjectRef } from \"@react-aria/utils\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport { TunnelExit, TunnelProvider } from \"@mittwald/react-tunnel\";\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,\n    Pick<MarkdownProps, \"headingOffset\"> {}\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    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  const propsContext: PropsContext = {\n    Label: {\n      tunnelId: \"label\",\n    },\n  };\n\n  return (\n    <div className={rootClassName}>\n      <TunnelProvider>\n        <TunnelExit id=\"label\" />\n        <Toolbar\n          currentMode={mode}\n          isDisabled={isDisabled}\n          onModeChange={setMode}\n          onToolPressed={handleToolButtonPressed}\n        />\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            <Markdown\n              headingOffset={headingOffset}\n              className={styles.markdown}\n              style={{\n                height: inputRef.current?.offsetHeight,\n              }}\n            >\n              {value}\n            </Markdown>\n          )}\n          <PropsContextProvider props={propsContext}>\n            {children}\n          </PropsContextProvider>\n        </TextArea>\n      </TunnelProvider>\n    </div>\n  );\n});\n\nexport default MarkdownEditor;\n"],"names":[],"mappings":"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"}

package/dist/js/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/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/components/src/components/MarkdownEditor/components/ModeButton.mjs

@@ -0,0 +1,31 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { Button } from '../../Button/Button.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+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);
+  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/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 \"react-aria\";\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(locales);\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,4BAA4B,OAAO,CAAA;AAC3D,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/components/src/components/MarkdownEditor/components/Toolbar.mjs

@@ -0,0 +1,42 @@
+"use client"
+/* */
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import styles from '../MarkdownEditor.module.scss.mjs';
+import { Icon } from '../../Icon/Icon.mjs';
+import { IconBold, IconItalic, IconStrikethrough, IconBlockquote, IconList, IconListNumbers } from '@tabler/icons-react';
+import '../../../views/IconView.mjs';
+import { IconCode } from '../../Icon/components/icons/IconCode.mjs';
+import { IconLink } from '../../Icon/components/icons/IconLink.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("header", { className: styles.toolbar, role: "toolbar", children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.toolbarButtons, children: [
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "bold", children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(IconBold, {}) }) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "italic", children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(IconItalic, {}) }) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "strikeThrough", children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(IconStrikethrough, {}) }) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "quote", children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(IconBlockquote, {}) }) }),
+      /* @__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(Icon, { children: /* @__PURE__ */ jsx(IconList, {}) }) }),
+      /* @__PURE__ */ jsx(ToolbarButton, { ...sharedToolButtonProps, type: "orderedList", children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(IconListNumbers, {}) }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      ModeButton,
+      {
+        onChange: props.onModeChange,
+        currentMode: props.currentMode,
+        isDisabled: props.isDisabled
+      }
+    )
+  ] });
+};
+
+export { Toolbar };
+//# sourceMappingURL=Toolbar.mjs.map

package/dist/js/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 { Icon } from \"@/components/Icon\";\nimport {\n  IconBlockquote,\n  IconBold,\n  IconItalic,\n  IconList,\n  IconListNumbers,\n  IconStrikethrough,\n} from \"@tabler/icons-react\";\nimport { IconCode, IconLink } 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    <header className={styles.toolbar} role=\"toolbar\">\n      <div className={styles.toolbarButtons}>\n        <ToolbarButton {...sharedToolButtonProps} type=\"bold\">\n          <Icon>\n            <IconBold />\n          </Icon>\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"italic\">\n          <Icon>\n            <IconItalic />\n          </Icon>\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"strikeThrough\">\n          <Icon>\n            <IconStrikethrough />\n          </Icon>\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"quote\">\n          <Icon>\n            <IconBlockquote />\n          </Icon>\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          <Icon>\n            <IconList />\n          </Icon>\n        </ToolbarButton>\n\n        <ToolbarButton {...sharedToolButtonProps} type=\"orderedList\">\n          <Icon>\n            <IconListNumbers />\n          </Icon>\n        </ToolbarButton>\n      </div>\n\n      <ModeButton\n        onChange={props.onModeChange}\n        currentMode={props.currentMode}\n        isDisabled={props.isDisabled}\n      />\n    </header>\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,QAAA,EAAA,EAAO,SAAA,EAAW,MAAA,CAAO,OAAA,EAAS,MAAK,SAAA,EACtC,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,cAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,aAAA,EAAA,EAAe,GAAG,qBAAA,EAAuB,IAAA,EAAK,MAAA,EAC7C,8BAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA,EACZ,CAAA,EACF,CAAA;AAAA,sBAEA,GAAA,CAAC,aAAA,EAAA,EAAe,GAAG,qBAAA,EAAuB,IAAA,EAAK,QAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,CAAA,EACd,CAAA,EACF,CAAA;AAAA,sBAEA,GAAA,CAAC,aAAA,EAAA,EAAe,GAAG,qBAAA,EAAuB,IAAA,EAAK,eAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,CAAA,EACrB,CAAA,EACF,CAAA;AAAA,sBAEA,GAAA,CAAC,aAAA,EAAA,EAAe,GAAG,qBAAA,EAAuB,IAAA,EAAK,OAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,CAAA,EAClB,CAAA,EACF,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,aAAA,EAAA,EAAe,GAAG,qBAAA,EAAuB,IAAA,EAAK,eAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,CAAA,EACZ,CAAA,EACF,CAAA;AAAA,sBAEA,GAAA,CAAC,aAAA,EAAA,EAAe,GAAG,qBAAA,EAAuB,IAAA,EAAK,aAAA,EAC7C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,eAAA,EAAA,EAAgB,CAAA,EACnB,CAAA,EACF;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/components/src/components/MarkdownEditor/components/ToolbarButton.mjs

@@ -0,0 +1,28 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import 'react';
+import { Button } from '../../Button/Button.mjs';
+import { useLocalizedStringFormatter } from 'react-aria';
+import locales from '../../../../../_virtual/_.locale.json@bb0db7b5021f874310cbe5b6cc3d9cac.mjs';
+
+const ToolbarButton = (props) => {
+  const { children, type, onPress, ...rest } = props;
+  const stringFormatter = useLocalizedStringFormatter(locales);
+  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/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 \"react-aria\";\nimport locales from \"../locales/*.locale.json\";\n\nexport interface ToolBarButtonProps\n  extends Pick<ButtonProps, \"isDisabled\" | \"children\"> {\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(locales);\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":";;;;;;AAYO,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,4BAA4B,OAAO,CAAA;AAE3D,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/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/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;;;;"}

package/dist/js/components/src/components/MarkdownEditor/lib/modifyValueByType.mjs

@@ -0,0 +1,159 @@
+"use client"
+/* */
+import 'react';
+
+const markdownSyntax = {
+  bold: { before: "**", after: "**", toggleable: true },
+  italic: { before: "_", after: "_", toggleable: true },
+  strikeThrough: { before: "~~", after: "~~", toggleable: true },
+  quote: { before: "> " },
+  code: { before: "`", after: "`", toggleable: true },
+  link: { before: "[", after: "](https://)" },
+  unorderedList: { before: "- " },
+  orderedList: { before: "1. " }
+};
+const getLineStart = (text, pos) => {
+  const lastNewline = text.lastIndexOf("\n", pos - 1);
+  return lastNewline === -1 ? 0 : lastNewline + 1;
+};
+const getLineEnd = (text, pos) => {
+  const nextNewline = text.indexOf("\n", pos);
+  return nextNewline === -1 ? text.length : nextNewline;
+};
+const modifyValueByType = (markdown = "", type, textAreaRef) => {
+  if (!textAreaRef.current) {
+    return {
+      newValue: markdown,
+      newSelectionStart: null,
+      newSelectionEnd: null
+    };
+  }
+  const textarea = textAreaRef.current;
+  const { before, after = "", toggleable = false } = markdownSyntax[type];
+  const start = textarea.selectionStart;
+  const end = textarea.selectionEnd;
+  const selectedText = markdown.substring(start, end);
+  const lines = selectedText.split("\n");
+  let newText = markdown;
+  let selectionStart = start;
+  let selectionEnd = end;
+  if (type === "code" && selectedText.includes("\n")) {
+    newText = markdown.substring(0, start) + "```\n" + selectedText + "\n```\n" + markdown.substring(end);
+    selectionStart = start + 4;
+    selectionEnd = selectionStart + selectedText.length;
+  } else if (type === "orderedList") {
+    if (selectedText) {
+      const numbered = lines.map((line, i) => `${i + 1}. ${line}`).join("\n");
+      newText = markdown.substring(0, start) + numbered + markdown.substring(end);
+      selectionStart = start;
+      selectionEnd = start + numbered.length;
+    } else {
+      const lineStart = getLineStart(markdown, start);
+      const lineEnd = getLineEnd(markdown, start);
+      const numberedLine = `1. ${markdown.substring(lineStart, lineEnd)}`;
+      newText = markdown.substring(0, lineStart) + before + markdown.substring(lineStart);
+      selectionStart = lineStart + numberedLine.length;
+      selectionEnd = selectionStart;
+    }
+  } else if (type === "unorderedList") {
+    if (selectedText) {
+      const bulleted = lines.map((line) => `${before}${line}`).join("\n");
+      newText = markdown.substring(0, start) + bulleted + markdown.substring(end);
+      selectionStart = start;
+      selectionEnd = start + bulleted.length;
+    } else {
+      const lineStart = getLineStart(markdown, start);
+      const lineEnd = getLineEnd(markdown, start);
+      const bulletedLine = `- ${markdown.substring(lineStart, lineEnd)}`;
+      newText = markdown.substring(0, lineStart) + before + markdown.substring(lineStart);
+      selectionStart = lineStart + bulletedLine.length;
+      selectionEnd = selectionStart;
+    }
+  } else if (type === "quote") {
+    if (selectedText) {
+      const quoted = lines.map((line) => `${before}${line}`).join("\n");
+      newText = markdown.substring(0, start) + quoted + markdown.substring(end);
+      selectionStart = start;
+      selectionEnd = start + quoted.length;
+    } else {
+      const quoteLine = `
+${before} `;
+      newText = markdown.substring(0, start) + quoteLine + markdown.substring(end);
+      selectionStart = start + quoteLine.length;
+      selectionEnd = selectionStart;
+    }
+  } else if (toggleable) {
+    const prefix = markdown.substring(start - before.length, start);
+    const suffix = markdown.substring(end, end + after.length);
+    const isSurrounded = prefix === before && suffix === after;
+    const isWrappedInside = selectedText.startsWith(before) && selectedText.endsWith(after);
+    if (isSurrounded) {
+      newText = markdown.substring(0, start - before.length) + selectedText + markdown.substring(end + after.length);
+      selectionStart = start - before.length;
+      selectionEnd = selectionStart + selectedText.length;
+    } else if (isWrappedInside) {
+      const unwrapped = selectedText.slice(
+        before.length,
+        selectedText.length - after.length
+      );
+      newText = markdown.substring(0, start) + unwrapped + markdown.substring(end);
+      selectionStart = start;
+      selectionEnd = start + unwrapped.length;
+    } else {
+      newText = markdown.substring(0, start) + before + selectedText + after + markdown.substring(end);
+      if (selectedText.length === 0) {
+        selectionStart = start + before.length;
+        selectionEnd = selectionStart;
+      } else {
+        selectionStart = start + before.length;
+        selectionEnd = selectionStart + selectedText.length;
+      }
+    }
+  } else if (type === "link") {
+    let linkText = "";
+    let linkUrl = "";
+    let inserted = "";
+    let cursorOffsetStart = 0;
+    const isValidUrl = (str) => {
+      try {
+        new URL(str);
+        return true;
+      } catch {
+        return false;
+      }
+    };
+    if (selectedText) {
+      if (isValidUrl(selectedText)) {
+        linkUrl = selectedText;
+        inserted = `[](${linkUrl})`;
+        cursorOffsetStart = start + 1;
+      } else {
+        linkText = selectedText;
+        inserted = `[${linkText}]()`;
+        cursorOffsetStart = start + inserted.indexOf("](") + 2;
+      }
+    } else {
+      inserted = `[](https://)`;
+      cursorOffsetStart = start + 1;
+    }
+    newText = markdown.substring(0, start) + inserted + markdown.substring(end);
+    selectionStart = selectionEnd = cursorOffsetStart;
+  } else {
+    newText = markdown.substring(0, start) + before + selectedText + after + markdown.substring(end);
+    if (selectedText.length === 0) {
+      selectionStart = start + before.length;
+      selectionEnd = selectionStart;
+    } else {
+      selectionStart = start + before.length;
+      selectionEnd = selectionStart + selectedText.length;
+    }
+  }
+  return {
+    newValue: newText,
+    newSelectionStart: selectionStart,
+    newSelectionEnd: selectionEnd
+  };
+};
+
+export { modifyValueByType };
+//# sourceMappingURL=modifyValueByType.mjs.map

package/dist/js/components/src/components/MarkdownEditor/lib/modifyValueByType.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"modifyValueByType.mjs","sources":["../../../../../../../src/components/MarkdownEditor/lib/modifyValueByType.ts"],"sourcesContent":["import { type RefObject } from \"react\";\n\nexport type InsertType =\n  | \"bold\"\n  | \"italic\"\n  | \"strikeThrough\"\n  | \"quote\"\n  | \"code\"\n  | \"link\"\n  | \"unorderedList\"\n  | \"orderedList\";\n\nconst markdownSyntax: Record<\n  InsertType,\n  { before: string; after?: string; toggleable?: boolean }\n> = {\n  bold: { before: \"**\", after: \"**\", toggleable: true },\n  italic: { before: \"_\", after: \"_\", toggleable: true },\n  strikeThrough: { before: \"~~\", after: \"~~\", toggleable: true },\n  quote: { before: \"> \" },\n  code: { before: \"`\", after: \"`\", toggleable: true },\n  link: { before: \"[\", after: \"](https://)\" },\n  unorderedList: { before: \"- \" },\n  orderedList: { before: \"1. \" },\n};\n\nconst getLineStart = (text: string, pos: number) => {\n  const lastNewline = text.lastIndexOf(\"\\n\", pos - 1);\n  return lastNewline === -1 ? 0 : lastNewline + 1;\n};\n\nconst getLineEnd = (text: string, pos: number) => {\n  const nextNewline = text.indexOf(\"\\n\", pos);\n  return nextNewline === -1 ? text.length : nextNewline;\n};\n\nexport const modifyValueByType = (\n  markdown = \"\",\n  type: InsertType,\n  textAreaRef: RefObject<HTMLTextAreaElement | null>,\n) => {\n  if (!textAreaRef.current) {\n    return {\n      newValue: markdown,\n      newSelectionStart: null,\n      newSelectionEnd: null,\n    } as const;\n  }\n\n  const textarea = textAreaRef.current;\n  const { before, after = \"\", toggleable = false } = markdownSyntax[type];\n  const start = textarea.selectionStart;\n  const end = textarea.selectionEnd;\n  const selectedText = markdown.substring(start, end);\n  const lines = selectedText.split(\"\\n\");\n\n  let newText = markdown;\n  let selectionStart = start;\n  let selectionEnd = end;\n\n  if (type === \"code\" && selectedText.includes(\"\\n\")) {\n    newText =\n      markdown.substring(0, start) +\n      \"```\\n\" +\n      selectedText +\n      \"\\n```\\n\" +\n      markdown.substring(end);\n    selectionStart = start + 4;\n    selectionEnd = selectionStart + selectedText.length;\n  } else if (type === \"orderedList\") {\n    if (selectedText) {\n      const numbered = lines.map((line, i) => `${i + 1}. ${line}`).join(\"\\n\");\n      newText =\n        markdown.substring(0, start) + numbered + markdown.substring(end);\n      selectionStart = start;\n      selectionEnd = start + numbered.length;\n    } else {\n      const lineStart = getLineStart(markdown, start);\n      const lineEnd = getLineEnd(markdown, start);\n      const numberedLine = `1. ${markdown.substring(lineStart, lineEnd)}`;\n\n      newText =\n        markdown.substring(0, lineStart) +\n        before +\n        markdown.substring(lineStart);\n      selectionStart = lineStart + numberedLine.length;\n      selectionEnd = selectionStart;\n    }\n  } else if (type === \"unorderedList\") {\n    if (selectedText) {\n      const bulleted = lines.map((line) => `${before}${line}`).join(\"\\n\");\n      newText =\n        markdown.substring(0, start) + bulleted + markdown.substring(end);\n      selectionStart = start;\n      selectionEnd = start + bulleted.length;\n    } else {\n      const lineStart = getLineStart(markdown, start);\n      const lineEnd = getLineEnd(markdown, start);\n      const bulletedLine = `- ${markdown.substring(lineStart, lineEnd)}`;\n\n      newText =\n        markdown.substring(0, lineStart) +\n        before +\n        markdown.substring(lineStart);\n      selectionStart = lineStart + bulletedLine.length;\n      selectionEnd = selectionStart;\n    }\n  } else if (type === \"quote\") {\n    if (selectedText) {\n      const quoted = lines.map((line) => `${before}${line}`).join(\"\\n\");\n      newText = markdown.substring(0, start) + quoted + markdown.substring(end);\n      selectionStart = start;\n      selectionEnd = start + quoted.length;\n    } else {\n      const quoteLine = `\\n${before} `;\n      newText =\n        markdown.substring(0, start) + quoteLine + markdown.substring(end);\n      selectionStart = start + quoteLine.length;\n      selectionEnd = selectionStart;\n    }\n  } else if (toggleable) {\n    const prefix = markdown.substring(start - before.length, start);\n    const suffix = markdown.substring(end, end + after.length);\n    const isSurrounded = prefix === before && suffix === after;\n    const isWrappedInside =\n      selectedText.startsWith(before) && selectedText.endsWith(after);\n\n    if (isSurrounded) {\n      // Remove external wrapping (not selected)\n      newText =\n        markdown.substring(0, start - before.length) +\n        selectedText +\n        markdown.substring(end + after.length);\n      selectionStart = start - before.length;\n      selectionEnd = selectionStart + selectedText.length;\n    } else if (isWrappedInside) {\n      // Remove internal wrapping (selected)\n      const unwrapped = selectedText.slice(\n        before.length,\n        selectedText.length - after.length,\n      );\n      newText =\n        markdown.substring(0, start) + unwrapped + markdown.substring(end);\n      selectionStart = start;\n      selectionEnd = start + unwrapped.length;\n    } else {\n      // Add wrapping\n      newText =\n        markdown.substring(0, start) +\n        before +\n        selectedText +\n        after +\n        markdown.substring(end);\n\n      if (selectedText.length === 0) {\n        selectionStart = start + before.length;\n        selectionEnd = selectionStart;\n      } else {\n        selectionStart = start + before.length;\n        selectionEnd = selectionStart + selectedText.length;\n      }\n    }\n  } else if (type === \"link\") {\n    let linkText = \"\";\n    let linkUrl = \"\";\n    let inserted = \"\";\n    let cursorOffsetStart = 0;\n\n    const isValidUrl = (str: string): boolean => {\n      try {\n        new URL(str);\n        return true;\n      } catch {\n        return false;\n      }\n    };\n\n    if (selectedText) {\n      if (isValidUrl(selectedText)) {\n        linkUrl = selectedText;\n        inserted = `[](${linkUrl})`;\n        cursorOffsetStart = start + 1;\n      } else {\n        linkText = selectedText;\n        inserted = `[${linkText}]()`;\n        cursorOffsetStart = start + inserted.indexOf(\"](\") + 2;\n      }\n    } else {\n      inserted = `[](https://)`;\n      cursorOffsetStart = start + 1;\n    }\n\n    newText = markdown.substring(0, start) + inserted + markdown.substring(end);\n    selectionStart = selectionEnd = cursorOffsetStart;\n  } else {\n    // Fallback for non-toggleable, inline syntax\n    newText =\n      markdown.substring(0, start) +\n      before +\n      selectedText +\n      after +\n      markdown.substring(end);\n\n    if (selectedText.length === 0) {\n      // No text selected – place cursor between syntax\n      selectionStart = start + before.length;\n      selectionEnd = selectionStart;\n    } else {\n      // Keep selection\n      selectionStart = start + before.length;\n      selectionEnd = selectionStart + selectedText.length;\n    }\n  }\n\n  return {\n    newValue: newText,\n    newSelectionStart: selectionStart,\n    newSelectionEnd: selectionEnd,\n  } as const;\n};\n"],"names":[],"mappings":"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"}

package/dist/js/components/src/components/MenuItem/MenuItem.mjs

@@ -0,0 +1,28 @@
+"use client"
+/* */
+import { jsx } from 'react/jsx-runtime';
+import { createElement } from 'react';
+import * as Aria from 'react-aria-components';
+import styles from './MenuItem.module.scss.mjs';
+import clsx from 'clsx';
+import { MenuItemContent } from './components/MenuItemContent/MenuItemContent.mjs';
+import { flowComponent } from '../../lib/componentFactory/flowComponent.mjs';
+
+const MenuItem = flowComponent("MenuItem", (props) => {
+  const { children, className, selectionVariant, id, ref, ...rest } = props;
+  const rootClassName = clsx(styles.menuItem, className);
+  return /* @__PURE__ */ createElement(
+    Aria.MenuItem,
+    {
+      ...rest,
+      key: id,
+      id,
+      className: rootClassName,
+      ref
+    },
+    (props2) => /* @__PURE__ */ jsx(MenuItemContent, { ...props2, selectionVariant, children })
+  );
+});
+
+export { MenuItem, MenuItem as default };
+//# sourceMappingURL=MenuItem.mjs.map

package/dist/js/components/src/components/MenuItem/MenuItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.mjs","sources":["../../../../../../src/components/MenuItem/MenuItem.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport * as Aria from \"react-aria-components\";\nimport styles from \"./MenuItem.module.scss\";\nimport clsx from \"clsx\";\nimport { MenuItemContent } from \"@/components/MenuItem/components/MenuItemContent/MenuItemContent\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\n\nexport interface MenuItemProps\n  extends Omit<Aria.MenuItemProps, \"children\">,\n    PropsWithChildren,\n    FlowComponentProps {\n  selectionVariant?: \"control\" | \"navigation\" | \"switch\";\n}\n\n/** @flr-generate all */\nexport const MenuItem = flowComponent(\"MenuItem\", (props) => {\n  const { children, className, selectionVariant, id, ref, ...rest } = props;\n  const rootClassName = clsx(styles.menuItem, className);\n\n  return (\n    <Aria.MenuItem\n      {...rest}\n      key={id}\n      id={id}\n      className={rootClassName}\n      ref={ref}\n    >\n      {(props) => (\n        <MenuItemContent {...props} selectionVariant={selectionVariant}>\n          {children}\n        </MenuItemContent>\n      )}\n    </Aria.MenuItem>\n  );\n});\n\nexport default MenuItem;\n"],"names":["props"],"mappings":";;;;;;;;AAgBO,MAAM,QAAA,GAAW,aAAA,CAAc,UAAA,EAAY,CAAC,KAAA,KAAU;AAC3D,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,gBAAA,EAAkB,IAAI,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AACpE,EAAA,MAAM,aAAA,GAAgB,IAAA,CAAK,MAAA,CAAO,QAAA,EAAU,SAAS,CAAA;AAErD,EAAA,uBACE,aAAA;AAAA,IAAC,IAAA,CAAK,QAAA;AAAA,IAAL;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA,EAAK,EAAA;AAAA,MACL,EAAA;AAAA,MACA,SAAA,EAAW,aAAA;AAAA,MACX;AAAA,KAAA;AAAA,IAEC,CAACA,MAAAA,qBACA,GAAA,CAAC,mBAAiB,GAAGA,MAAAA,EAAO,kBACzB,QAAA,EACH;AAAA,GAEJ;AAEJ,CAAC;;;;"}

package/dist/js/components/src/components/MenuItem/MenuItem.module.scss.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+const menuItem = "flow--menu-item";
+const icon = "flow--menu-item--icon";
+const controlIcon = "flow--menu-item--control-icon";
+const avatar = "flow--menu-item--avatar";
+const styles = {
+	menuItem: menuItem,
+	"switch": "flow--menu-item--switch",
+	icon: icon,
+	controlIcon: controlIcon,
+	avatar: avatar
+};
+
+export { avatar, controlIcon, styles as default, icon, menuItem };
+//# sourceMappingURL=MenuItem.module.scss.mjs.map

package/dist/js/components/src/components/MenuItem/MenuItem.module.scss.mjs.map

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