@sia.soul/sia-react-ui 0.1.3 → 0.1.4

package/dist/markdown-editor.cjs

@@ -34,8 +34,27 @@ __export(markdown_editor_exports, {
 });
 module.exports = __toCommonJS(markdown_editor_exports);
 
-// src/components/MarkdownEditor.tsx
+// src/components/shared.ts
 var import_react = require("react");
+var PlaceholderModeContext = (0, import_react.createContext)("default");
+function usePlaceholderMode(mode) {
+  const inherited = (0, import_react.useContext)(PlaceholderModeContext);
+  return mode ?? inherited;
+}
+
+// src/components/FloatingPlaceholder.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
+  const enabled = usePlaceholderMode(mode) === "floating" && Boolean(placeholder);
+  return {
+    enabled,
+    className: enabled ? ` sia-placeholder-floating${filled ? " sia-placeholder-floating--filled" : ""}${active ? " sia-placeholder-floating--active" : ""}` : "",
+    label: enabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sia-floating-placeholder", "aria-hidden": "true", children: placeholder }) : null
+  };
+}
+
+// src/components/MarkdownEditor.tsx
+var import_react2 = require("react");
 var import_dist = require("vditor/dist/index.css");
 
 // src/components/markdownPaste.ts
@@ -144,7 +163,7 @@ var VDITOR_ZH_CN = {
 };
 
 // src/components/MarkdownEditor.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var vditorLoaders = /* @__PURE__ */ new Map();
 var BASE_TOOLBAR = [
   "headings",
@@ -250,6 +269,7 @@ function MarkdownEditor({
   onChange,
   mode = "wysiwyg",
   placeholder = "\u8BF7\u8F93\u5165 Markdown \u6B63\u6587",
+  placeholderMode,
   minHeight = 320,
   disabled = false,
   ariaLabel = "Markdown \u7F16\u8F91\u5668",
@@ -261,25 +281,30 @@ function MarkdownEditor({
   style,
   ...props
 }) {
-  const mountRef = (0, import_react.useRef)(null);
-  const editorRef = (0, import_react.useRef)(null);
-  const onChangeRef = (0, import_react.useRef)(onChange);
-  const saveShortcutRef = (0, import_react.useRef)(saveShortcut);
-  const uploadImageRef = (0, import_react.useRef)(onUploadImage);
-  const disabledRef = (0, import_react.useRef)(disabled);
-  const smartMarkdownPasteRef = (0, import_react.useRef)(smartMarkdownPaste);
-  const valueRef = (0, import_react.useRef)(value ?? defaultValue);
-  const lastEmittedValueRef = (0, import_react.useRef)(value ?? defaultValue);
-  const [ready, setReady] = (0, import_react.useState)(false);
-  const [loadError, setLoadError] = (0, import_react.useState)("");
+  const mountRef = (0, import_react2.useRef)(null);
+  const editorRef = (0, import_react2.useRef)(null);
+  const onChangeRef = (0, import_react2.useRef)(onChange);
+  const saveShortcutRef = (0, import_react2.useRef)(saveShortcut);
+  const uploadImageRef = (0, import_react2.useRef)(onUploadImage);
+  const disabledRef = (0, import_react2.useRef)(disabled);
+  const smartMarkdownPasteRef = (0, import_react2.useRef)(smartMarkdownPaste);
+  const valueRef = (0, import_react2.useRef)(value ?? defaultValue);
+  const lastEmittedValueRef = (0, import_react2.useRef)(value ?? defaultValue);
+  const [hasContent, setHasContent] = (0, import_react2.useState)(Boolean((value ?? defaultValue).trim()));
+  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasContent });
+  const [ready, setReady] = (0, import_react2.useState)(false);
+  const [loadError, setLoadError] = (0, import_react2.useState)("");
   const hasImageUpload = Boolean(onUploadImage);
+  (0, import_react2.useEffect)(() => {
+    if (value !== void 0) setHasContent(Boolean(value.trim()));
+  }, [value]);
   onChangeRef.current = onChange;
   saveShortcutRef.current = saveShortcut;
   uploadImageRef.current = onUploadImage;
   disabledRef.current = disabled;
   smartMarkdownPasteRef.current = smartMarkdownPaste;
   valueRef.current = value ?? valueRef.current;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const mount = mountRef.current;
     if (!mount) return;
     let disposed = false;
@@ -332,6 +357,7 @@ function MarkdownEditor({
           }
         } } : {},
         input: (markdown) => {
+          setHasContent(Boolean(markdown.trim()));
           lastEmittedValueRef.current = markdown;
           onChangeRef.current?.(markdown);
         },
@@ -380,14 +406,14 @@ function MarkdownEditor({
       if (editorInitialized) createdEditor?.destroy();
     };
   }, [ariaLabel, assetBaseUrl, hasImageUpload, minHeight, mode, placeholder]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const editor = editorRef.current;
     if (!editor || value === void 0) return;
     if (value === lastEmittedValueRef.current || editor.getValue() === value) return;
     lastEmittedValueRef.current = value;
     editor.setValue(value, true);
   }, [ready, value]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const editor = editorRef.current;
     if (!editor) return;
     if (disabled) editor.disabled();
@@ -397,16 +423,22 @@ function MarkdownEditor({
     ...style,
     "--sia-markdown-editor-min-height": typeof minHeight === "number" ? `${minHeight}px` : minHeight
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
-      className: ["sia-markdown-editor", className].filter(Boolean).join(" "),
+      className: ["sia-markdown-editor", floating.className, disabled ? "is-disabled" : "", className].filter(Boolean).join(" "),
       style: editorStyle,
       "data-ready": ready ? "true" : "false",
       ...props,
+      onBlurCapture: (event) => {
+        props.onBlurCapture?.(event);
+        const current = editorRef.current?.getValue();
+        if (current !== void 0) setHasContent(Boolean(current.trim()));
+      },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: mountRef, className: "sia-markdown-editor__mount" }),
-        !ready ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "sia-markdown-editor__loading", "aria-live": "polite", children: loadError || "\u6B63\u5728\u52A0\u8F7D\u7F16\u8F91\u5668\u2026" }) : null
+        floating.label,
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: mountRef, className: "sia-markdown-editor__mount" }),
+        !ready ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sia-markdown-editor__loading", "aria-live": "polite", children: loadError || "\u6B63\u5728\u52A0\u8F7D\u7F16\u8F91\u5668\u2026" }) : null
       ]
     }
   );

package/dist/markdown-editor.d.cts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
 import * as vditor from 'vditor';
+import { I as InputPlaceholderMode } from './shared-DAYZvZVu.cjs';
 
 type VditorConstructor = typeof vditor["default"];
 declare global {
@@ -15,6 +16,7 @@ interface MarkdownEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "defa
     onChange?: (markdown: string) => void;
     mode?: MarkdownEditorMode;
     placeholder?: string;
+    placeholderMode?: InputPlaceholderMode;
     minHeight?: number | string;
     disabled?: boolean;
     ariaLabel?: string;
@@ -23,6 +25,6 @@ interface MarkdownEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "defa
     onUploadImage?: (file: File) => Promise<string> | string;
     smartMarkdownPaste?: boolean;
 }
-declare function MarkdownEditor({ value, defaultValue, onChange, mode, placeholder, minHeight, disabled, ariaLabel, assetBaseUrl, saveShortcut, onUploadImage, smartMarkdownPaste, className, style, ...props }: MarkdownEditorProps): react.JSX.Element;
+declare function MarkdownEditor({ value, defaultValue, onChange, mode, placeholder, placeholderMode, minHeight, disabled, ariaLabel, assetBaseUrl, saveShortcut, onUploadImage, smartMarkdownPaste, className, style, ...props }: MarkdownEditorProps): react.JSX.Element;
 
 export { MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps };

package/dist/markdown-editor.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
 import * as vditor from 'vditor';
+import { I as InputPlaceholderMode } from './shared-DAYZvZVu.js';
 
 type VditorConstructor = typeof vditor["default"];
 declare global {
@@ -15,6 +16,7 @@ interface MarkdownEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "defa
     onChange?: (markdown: string) => void;
     mode?: MarkdownEditorMode;
     placeholder?: string;
+    placeholderMode?: InputPlaceholderMode;
     minHeight?: number | string;
     disabled?: boolean;
     ariaLabel?: string;
@@ -23,6 +25,6 @@ interface MarkdownEditorProps extends Omit<HTMLAttributes<HTMLDivElement>, "defa
     onUploadImage?: (file: File) => Promise<string> | string;
     smartMarkdownPaste?: boolean;
 }
-declare function MarkdownEditor({ value, defaultValue, onChange, mode, placeholder, minHeight, disabled, ariaLabel, assetBaseUrl, saveShortcut, onUploadImage, smartMarkdownPaste, className, style, ...props }: MarkdownEditorProps): react.JSX.Element;
+declare function MarkdownEditor({ value, defaultValue, onChange, mode, placeholder, placeholderMode, minHeight, disabled, ariaLabel, assetBaseUrl, saveShortcut, onUploadImage, smartMarkdownPaste, className, style, ...props }: MarkdownEditorProps): react.JSX.Element;
 
 export { MarkdownEditor, type MarkdownEditorMode, type MarkdownEditorProps };

package/dist/markdown-editor.js

@@ -1,6 +1,7 @@
 import {
   MarkdownEditor
-} from "./chunk-6VXOLMKZ.js";
+} from "./chunk-5ZTWY3PG.js";
+import "./chunk-EJDPRAU2.js";
 export {
   MarkdownEditor
 };