@btst/stack 1.0.1 → 1.1.1

package/dist/plugins/blog/client/components/forms/image-field.mjs

@@ -0,0 +1,131 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Button } from '@workspace/ui/components/button';
+import { FormItem, FormLabel, FormControl, FormDescription, FormMessage } from '@workspace/ui/components/form';
+import { Input } from '@workspace/ui/components/input';
+import { usePluginOverrides } from '@btst/stack/context';
+import { Loader2, Upload } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { toast } from 'sonner';
+import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
+
+function FeaturedImageField({
+  isRequired,
+  value,
+  onChange,
+  setFeaturedImageUploading
+}) {
+  const fileInputRef = useRef(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const { uploadImage, Image, localization } = usePluginOverrides("blog", { localization: BLOG_LOCALIZATION });
+  const ImageComponent = Image ? Image : DefaultImage;
+  const handleImageUpload = async (event) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_ERROR_NOT_IMAGE);
+      return;
+    }
+    if (file.size > 4 * 1024 * 1024) {
+      toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_ERROR_TOO_LARGE);
+      return;
+    }
+    try {
+      setIsUploading(true);
+      setFeaturedImageUploading(true);
+      const url = await uploadImage(file);
+      onChange(url);
+      toast.success(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_SUCCESS);
+    } catch (error) {
+      toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_FAILURE);
+      console.error("Failed to upload image:", error);
+      toast.error(localization.BLOG_FORMS_FEATURED_IMAGE_TOAST_FAILURE);
+    } finally {
+      setIsUploading(false);
+      setFeaturedImageUploading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(FormItem, { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs(FormLabel, { children: [
+      localization.BLOG_FORMS_FEATURED_IMAGE_LABEL,
+      isRequired && /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
+        " ",
+        localization.BLOG_FORMS_FEATURED_IMAGE_REQUIRED_ASTERISK
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            placeholder: localization.BLOG_FORMS_FEATURED_IMAGE_INPUT_PLACEHOLDER,
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            disabled: isUploading
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: () => fileInputRef.current?.click(),
+            disabled: isUploading,
+            children: isUploading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
+              localization.BLOG_FORMS_FEATURED_IMAGE_UPLOADING_BUTTON
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Upload, { className: "mr-2 h-4 w-4" }),
+              localization.BLOG_FORMS_FEATURED_IMAGE_UPLOAD_BUTTON
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: fileInputRef,
+          type: "file",
+          accept: "image/*",
+          onChange: handleImageUpload,
+          className: "hidden"
+        }
+      ),
+      isUploading && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-sm", children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
+        localization.BLOG_FORMS_FEATURED_IMAGE_UPLOADING_TEXT
+      ] }),
+      value && !isUploading && /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsx(
+        ImageComponent,
+        {
+          src: value,
+          alt: localization.BLOG_FORMS_FEATURED_IMAGE_PREVIEW_ALT,
+          className: "h-auto w-full max-w-xs rounded-md border",
+          width: 400,
+          height: 400
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(FormDescription, {}),
+    /* @__PURE__ */ jsx(FormMessage, {})
+  ] });
+}
+function DefaultImage({
+  src,
+  alt,
+  className,
+  width,
+  height
+}) {
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt,
+      className,
+      width,
+      height
+    }
+  );
+}
+
+export { FeaturedImageField };

package/dist/plugins/blog/client/components/forms/markdown-editor-styles.css

@@ -0,0 +1,30 @@
+.milkdown-custom .milkdown {
+	border-radius: calc(var(--radius) - 2px);
+	--crepe-color-background: var(--background);
+	--crepe-color-surface: var(--background);
+	--crepe-color-surface-low: var(--muted);
+	--crepe-color-on-background: var(--foreground);
+	--crepe-color-on-surface: var(--secondary-foreground);
+	--crepe-color-on-surface-variant: var(--muted-foreground);
+	--crepe-color-primary: var(--primary);
+	--crepe-color-secondary: var(--secondary);
+	--crepe-color-on-secondary: var(--secondary-foreground);
+	--crepe-color-outline: var(--muted-foreground);
+	--crepe-color-inverse: var(--popover);
+	--crepe-color-on-inverse: var(--popover-foreground);
+	--crepe-color-inline-code: var(--secondary-foreground);
+	--crepe-color-error: var(--destructive);
+	--crepe-color-hover: var(--accent);
+	--crepe-color-selected: var(--secondary);
+	--crepe-color-inline-area: var(--secondary);
+	--crepe-font-title: var(--font-sans);
+	--crepe-font-default: var(--font-sans);
+	--crepe-font-code: var(--font-mono);
+	--crepe-shadow-1:
+		0px 1px 3px 1px color-mix(in oklch, var(--ring) 28%, transparent), 0px 1px
+		2px 0px color-mix(in oklch, var(--ring) 22%, transparent);
+	--crepe-shadow-2:
+		0px 2px 6px 2px color-mix(in oklch, var(--ring) 28%, transparent), 0px 1px
+		2px 0px color-mix(in oklch, var(--ring) 22%, transparent);
+	height: inherit;
+}

package/dist/plugins/blog/client/components/forms/markdown-editor.cjs

@@ -0,0 +1,106 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const crepe = require('@milkdown/crepe');
+require('@milkdown/crepe/theme/common/style.css');
+const utils = require('../../../utils.cjs');
+const core = require('@milkdown/kit/core');
+const listener = require('@milkdown/kit/plugin/listener');
+const model = require('@milkdown/kit/prose/model');
+const state = require('@milkdown/kit/prose/state');
+const React = require('react');
+const context = require('@btst/stack/context');
+const index = require('../../localization/index.cjs');
+
+function MarkdownEditor({
+  value,
+  onChange,
+  className
+}) {
+  const { uploadImage, localization } = context.usePluginOverrides("blog", {
+    localization: index.BLOG_LOCALIZATION
+  });
+  const containerRef = React.useRef(null);
+  const crepeRef = React.useRef(null);
+  const isReadyRef = React.useRef(false);
+  const [isReady, setIsReady] = React.useState(false);
+  const onChangeRef = React.useRef(onChange);
+  const initialValueRef = React.useRef(value ?? "");
+  const throttledOnChangeRef = React.useRef(null);
+  onChangeRef.current = onChange;
+  React.useLayoutEffect(() => {
+    if (crepeRef.current) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const crepe$1 = new crepe.Crepe({
+      root: container,
+      defaultValue: initialValueRef.current,
+      featureConfigs: {
+        [crepe.CrepeFeature.Placeholder]: {
+          text: localization.BLOG_FORMS_EDITOR_PLACEHOLDER
+        },
+        [crepe.CrepeFeature.ImageBlock]: {
+          onUpload: async (file) => {
+            const url = await uploadImage(file);
+            return url;
+          }
+        }
+      }
+    });
+    throttledOnChangeRef.current = utils.throttle((markdown) => {
+      if (onChangeRef.current) onChangeRef.current(markdown);
+    }, 200);
+    crepe$1.editor.config((ctx) => {
+      ctx.get(listener.listenerCtx).markdownUpdated((_, markdown) => {
+        throttledOnChangeRef.current?.(markdown);
+      });
+    }).use(listener.listener);
+    crepe$1.create().then(() => {
+      isReadyRef.current = true;
+      setIsReady(true);
+    });
+    crepeRef.current = crepe$1;
+    return () => {
+      try {
+        isReadyRef.current = false;
+        throttledOnChangeRef.current?.cancel?.();
+        throttledOnChangeRef.current = null;
+        crepe$1.destroy();
+      } finally {
+        crepeRef.current = null;
+      }
+    };
+  }, []);
+  React.useLayoutEffect(() => {
+    if (!isReady) return;
+    if (!crepeRef.current) return;
+    if (typeof value !== "string") return;
+    let currentMarkdown;
+    try {
+      currentMarkdown = crepeRef.current?.getMarkdown?.();
+    } catch {
+      return;
+    }
+    if (currentMarkdown === value) return;
+    crepeRef.current.editor.action((ctx) => {
+      const view = ctx.get(core.editorViewCtx);
+      if (view?.hasFocus?.() === true) return;
+      const parser = ctx.get(core.parserCtx);
+      const doc = parser(value);
+      if (!doc) return;
+      const state$1 = view.state;
+      const selection = state$1.selection;
+      const from = selection.from;
+      let tr = state$1.tr;
+      tr = tr.replace(0, state$1.doc.content.size, new model.Slice(doc.content, 0, 0));
+      const docSize = doc.content.size;
+      const safeFrom = Math.max(1, Math.min(from, Math.max(1, docSize - 2)));
+      tr = tr.setSelection(state.Selection.near(tr.doc.resolve(safeFrom)));
+      view.dispatch(tr);
+    });
+  }, [value, isReady]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: utils.cn("milkdown-custom", className) });
+}
+
+exports.MarkdownEditor = MarkdownEditor;

package/dist/plugins/blog/client/components/forms/markdown-editor.mjs

@@ -0,0 +1,104 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Crepe, CrepeFeature } from '@milkdown/crepe';
+import '@milkdown/crepe/theme/common/style.css';
+import { throttle, cn } from '../../../utils.mjs';
+import { editorViewCtx, parserCtx } from '@milkdown/kit/core';
+import { listenerCtx, listener } from '@milkdown/kit/plugin/listener';
+import { Slice } from '@milkdown/kit/prose/model';
+import { Selection } from '@milkdown/kit/prose/state';
+import { useRef, useState, useLayoutEffect } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
+
+function MarkdownEditor({
+  value,
+  onChange,
+  className
+}) {
+  const { uploadImage, localization } = usePluginOverrides("blog", {
+    localization: BLOG_LOCALIZATION
+  });
+  const containerRef = useRef(null);
+  const crepeRef = useRef(null);
+  const isReadyRef = useRef(false);
+  const [isReady, setIsReady] = useState(false);
+  const onChangeRef = useRef(onChange);
+  const initialValueRef = useRef(value ?? "");
+  const throttledOnChangeRef = useRef(null);
+  onChangeRef.current = onChange;
+  useLayoutEffect(() => {
+    if (crepeRef.current) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const crepe = new Crepe({
+      root: container,
+      defaultValue: initialValueRef.current,
+      featureConfigs: {
+        [CrepeFeature.Placeholder]: {
+          text: localization.BLOG_FORMS_EDITOR_PLACEHOLDER
+        },
+        [CrepeFeature.ImageBlock]: {
+          onUpload: async (file) => {
+            const url = await uploadImage(file);
+            return url;
+          }
+        }
+      }
+    });
+    throttledOnChangeRef.current = throttle((markdown) => {
+      if (onChangeRef.current) onChangeRef.current(markdown);
+    }, 200);
+    crepe.editor.config((ctx) => {
+      ctx.get(listenerCtx).markdownUpdated((_, markdown) => {
+        throttledOnChangeRef.current?.(markdown);
+      });
+    }).use(listener);
+    crepe.create().then(() => {
+      isReadyRef.current = true;
+      setIsReady(true);
+    });
+    crepeRef.current = crepe;
+    return () => {
+      try {
+        isReadyRef.current = false;
+        throttledOnChangeRef.current?.cancel?.();
+        throttledOnChangeRef.current = null;
+        crepe.destroy();
+      } finally {
+        crepeRef.current = null;
+      }
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!isReady) return;
+    if (!crepeRef.current) return;
+    if (typeof value !== "string") return;
+    let currentMarkdown;
+    try {
+      currentMarkdown = crepeRef.current?.getMarkdown?.();
+    } catch {
+      return;
+    }
+    if (currentMarkdown === value) return;
+    crepeRef.current.editor.action((ctx) => {
+      const view = ctx.get(editorViewCtx);
+      if (view?.hasFocus?.() === true) return;
+      const parser = ctx.get(parserCtx);
+      const doc = parser(value);
+      if (!doc) return;
+      const state = view.state;
+      const selection = state.selection;
+      const from = selection.from;
+      let tr = state.tr;
+      tr = tr.replace(0, state.doc.content.size, new Slice(doc.content, 0, 0));
+      const docSize = doc.content.size;
+      const safeFrom = Math.max(1, Math.min(from, Math.max(1, docSize - 2)));
+      tr = tr.setSelection(Selection.near(tr.doc.resolve(safeFrom)));
+      view.dispatch(tr);
+    });
+  }, [value, isReady]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("milkdown-custom", className) });
+}
+
+export { MarkdownEditor };