dn-react-router-toolkit 0.9.8 → 0.9.9

package/dist/post/post_form_page.js

@@ -1,583 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/post/post_form_page.tsx
-var post_form_page_exports = {};
-__export(post_form_page_exports, {
-  createPostFormPage: () => createPostFormPage
-});
-module.exports = __toCommonJS(post_form_page_exports);
-var import_react_router4 = require("react-router");
-var import_react_store_input5 = require("react-store-input");
-
-// src/post/editor_toolbar.tsx
-var import_go = require("react-icons/go");
-
-// src/client/env_loader.tsx
-var import_react_router = require("react-router");
-var import_jsx_runtime = require("react/jsx-runtime");
-
-// src/client/file_input.tsx
-var import_react = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function FileInput({
-  buttonRef,
-  className,
-  ref,
-  children,
-  onClick,
-  onChange,
-  ...props
-}) {
-  const inputRef = (0, import_react.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "button",
-      {
-        ref: buttonRef,
-        className,
-        type: "button",
-        onClick: () => {
-          inputRef.current?.click();
-        },
-        children
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      "input",
-      {
-        ...props,
-        type: "file",
-        ref: inputRef,
-        style: {
-          display: "none"
-        },
-        onChange: async (e) => {
-          await onChange?.(e);
-          if (inputRef.current) {
-            inputRef.current.value = "";
-          }
-        }
-      }
-    )
-  ] });
-}
-
-// src/client/use_user_agent.tsx
-var import_react_router2 = require("react-router");
-
-// src/client/store_text_editor.tsx
-var import_dn_react_text_editor = require("dn-react-text-editor");
-var import_react_store_input = require("react-store-input");
-var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-function StoreTextEditor({
-  store,
-  name,
-  getter,
-  setter,
-  defaultValue,
-  ref,
-  ...props
-}) {
-  const controllerRef = (0, import_react2.useRef)(null);
-  (0, import_react2.useImperativeHandle)(
-    ref,
-    () => controllerRef.current,
-    []
-  );
-  const { dispatch } = (0, import_react_store_input.useStoreController)(store, {
-    onSubscribe: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
-        return;
-      }
-      const getResult = () => {
-        if (getter) {
-          return getter(state) || "";
-        }
-        if (name) {
-          return state[name] || "";
-        }
-        return "";
-      };
-      const result = getResult();
-      if (controller.value !== result) {
-        controller.value = result;
-      }
-    },
-    onDispatch: (state) => {
-      const controller = controllerRef.current;
-      if (!controller) {
-        return;
-      }
-      if (setter) {
-        setter(state, controller.value);
-        return;
-      }
-      if (name) {
-        state[name] = controller.value;
-      }
-    }
-  });
-  const getDefaultValue = () => {
-    if (getter) {
-      return getter(store.state);
-    }
-    if (name) {
-      return store.state[name];
-    }
-    return void 0;
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_dn_react_text_editor.TextEditor,
-    {
-      ...props,
-      ref: controllerRef,
-      defaultValue: defaultValue ?? getDefaultValue(),
-      onChange: (e) => {
-        dispatch();
-        props.onChange?.(e);
-      }
-    }
-  );
-}
-
-// src/client/editor.tsx
-var import_client = require("gw-file/client");
-
-// src/utils/cn.ts
-function cn(...classes) {
-  return classes.filter(Boolean).join(" ").trim();
-}
-
-// src/utils/date.ts
-var import_moment_timezone = __toESM(require("moment-timezone"));
-
-// src/utils/slug.ts
-var toSlug = (str) => {
-  return str.toLowerCase().replace(/[^a-zA-Z0-9가-힣ㄱ-ㅎㅏ-ㅣ]+/g, "-").replace(/^-|-$/g, "");
-};
-
-// src/post/editor_toolbar.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function EditorToolbar({
-  textEditorRef,
-  className
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "div",
-    {
-      className: cn("w-full h-12 flex items-center gap-0.5 px-1", className),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          FileInput,
-          {
-            className: "button-icon-base text-[18px]",
-            onChange: async (e) => {
-              const files = e.target.files;
-              if (!files || files.length === 0) {
-                return;
-              }
-              textEditorRef.current?.commands.attachFile(Array.from(files));
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_go.GoFileMedia, {})
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              const href = prompt("\uB9C1\uD06C URL\uC744 \uC785\uB825\uD558\uC138\uC694");
-              if (!href) {
-                return;
-              }
-              textEditorRef.current?.commands.toggleMark("link", { href });
-            },
-            className: "button-icon-base text-[20px]",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_go.GoLink, {})
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              textEditorRef.current?.commands.toggleBlockType("heading", {
-                level: 2
-              });
-            },
-            className: "button-icon-base text-[18px]",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "H2" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              textEditorRef.current?.commands.toggleBlockType("heading", {
-                level: 3
-              });
-            },
-            className: "button-icon-base text-[18px]",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "H3" })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              textEditorRef.current?.commands.wrapInList("ordered_list");
-            },
-            className: "button-icon-base text-[20px]",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_go.GoListOrdered, {})
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              textEditorRef.current?.commands.wrapInList("bullet_list");
-            },
-            className: "button-icon-base text-[20px]",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_go.GoListUnordered, {})
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/post/post_form_page.tsx
-var import_react6 = require("react");
-var import_dn_react_text_editor2 = require("dn-react-text-editor");
-
-// src/post/thumbnail_picker.tsx
-var import_react_store_input2 = require("react-store-input");
-var import_react3 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function PostThumbnailPicker({
-  store,
-  textEditorRef
-}) {
-  const thumbnail = (0, import_react_store_input2.useSelector)(store, (state) => state.thumbnail);
-  const [thumbnails, setThumbnails] = (0, import_react3.useState)([]);
-  (0, import_react3.useEffect)(() => {
-    const update = () => {
-      const textEditor = textEditorRef.current;
-      if (!textEditor) {
-        return;
-      }
-      const html = textEditor.value;
-      if (!html) {
-        return;
-      }
-      const parser = new DOMParser();
-      const docHtml = parser.parseFromString(html, "text/html");
-      const images = docHtml.querySelectorAll("img");
-      const thumbnails2 = Array.from(images).map((img) => img.src);
-      setThumbnails(thumbnails2);
-      if (thumbnails2.length > 0 && !store.state.thumbnail) {
-        store.dispatch((state) => {
-          state.thumbnail = thumbnails2[0];
-        });
-      }
-    };
-    const unsubscribe = store.subscribe((tr) => {
-      update();
-    });
-    setTimeout(() => {
-      update();
-    }, 0);
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "grid grid-cols-6 gap-1", children: thumbnails.map((url, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "button",
-    {
-      type: "button",
-      className: cn(
-        "border border-neutral-200 rounded-lg overflow-hidden aspect-4/3",
-        thumbnail === url && "border-transparent ring-2 ring-primary"
-      ),
-      onClick: () => {
-        store.dispatch((state) => {
-          state.thumbnail = url;
-        });
-      },
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "img",
-        {
-          src: url,
-          alt: `Thumbnail ${index + 1}`,
-          className: "w-full h-full object-cover"
-        }
-      )
-    },
-    index
-  )) });
-}
-
-// src/crud/crud_form_provider.tsx
-var import_react_router3 = require("react-router");
-var import_react_store_input3 = require("react-store-input");
-var import_react4 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var FormContext = (0, import_react4.createContext)({});
-
-// src/form/create_form_component.tsx
-var import_react5 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function createComponent(tag, options) {
-  return function FormComponent({ className, ...props }) {
-    const Tag = tag;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Tag, { ...props, className: cn(options.className, className) });
-  };
-}
-
-// src/form/form_components.tsx
-var FormEntry = createComponent("div", {
-  className: "flex-1"
-});
-var FormRow = createComponent("div", {
-  className: "flex-1 flex gap-4 mb-6"
-});
-var FormLabel = createComponent("label", {
-  className: "flex-1 font-semibold mb-2.5 block"
-});
-
-// src/crud/crud_form.tsx
-var import_react_store_input4 = require("react-store-input");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-
-// src/post/post_form_page.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var createPostFormPage = ({
-  header: AdminPageHeader,
-  textEditorClassName,
-  attachFile
-}) => {
-  return function PostFormPage({ form }) {
-    const { boards } = (0, import_react_router4.useLoaderData)();
-    const component = (0, import_react_store_input5.useStoreComponent)(form.store);
-    const textEditorRef = (0, import_react6.useRef)(null);
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        AdminPageHeader,
-        {
-          title: `${form.name} \uCD94\uAC00`,
-          actions: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "button-outline",
-                onClick: () => {
-                  form.delete();
-                },
-                children: "\uC0AD\uC81C\uD558\uAE30"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              "button",
-              {
-                type: "button",
-                className: "button-primary",
-                onClick: () => {
-                  form.submit();
-                },
-                children: "\uC800\uC7A5\uD558\uAE30"
-              }
-            )
-          ] })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "max-w-7xl mx-auto w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormEntry, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLabel, { children: "\uACF5\uAC1C\uC5EC\uBD80" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-              component.select,
-              {
-                name: "isPublic",
-                className: "select-form",
-                toInputValue: (value) => value ? "true" : "false",
-                toStateValue: (value) => Boolean(value === "true"),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "true", children: "\uACF5\uAC1C" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "false", children: "\uBE44\uACF5\uAC1C" })
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormEntry, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLabel, { children: "\uC791\uC131\uC77C\uC2DC" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              component.input,
-              {
-                name: "createdAt",
-                className: "input-form",
-                type: "datetime-local"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormEntry, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLabel, { children: "\uAC8C\uC2DC\uD310" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(component.select, { name: "boardId", className: "select-form", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", children: "\uC120\uD0DD\uD558\uC138\uC694" }),
-              boards.map((board) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: board.id, children: board.title }, board.id))
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormEntry, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLabel, { children: "\uCE74\uD14C\uACE0\uB9AC" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              component.input,
-              {
-                name: "category",
-                className: "input-form",
-                placeholder: "\uCE74\uD14C\uACE0\uB9AC"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormEntry, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLabel, { children: "\uC81C\uBAA9" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              component.input,
-              {
-                name: "title",
-                className: "input-form",
-                placeholder: "\uC81C\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694",
-                onChange: (e) => {
-                  const title = e.target.value;
-                  form.store.dispatch((state) => {
-                    state.slug = toSlug(title);
-                  });
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormEntry, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLabel, { children: "\uBD80\uC81C\uBAA9" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              component.input,
-              {
-                name: "subtitle",
-                className: "input-form",
-                placeholder: "\uBD80\uC81C\uBAA9\uC744 \uC785\uB825\uD558\uC138\uC694"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormEntry, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLabel, { children: "\uC2AC\uB7EC\uADF8" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              component.input,
-              {
-                name: "slug",
-                className: "input-form",
-                placeholder: "\uC81C\uBAA9"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormEntry, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLabel, { children: "\uD0DC\uADF8" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              component.input,
-              {
-                name: "tags",
-                className: "input-form",
-                placeholder: "\uD0DC\uADF8 1, \uD0DC\uADF8 2, \uD0DC\uADF8 3"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormRow, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormEntry, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLabel, { children: "\uC124\uBA85" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            StoreTextEditor,
-            {
-              store: form.store,
-              mode: "text",
-              name: "description",
-              className: "text-editor min-h-[80px]",
-              placeholder: "\uC124\uBA85"
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormRow, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(FormEntry, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(FormLabel, { children: "\uC378\uB124\uC77C" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-            PostThumbnailPicker,
-            {
-              store: form.store,
-              textEditorRef
-            }
-          )
-        ] }) })
-      ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "sticky top-[160px] z-998 bg-white px-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        EditorToolbar,
-        {
-          textEditorRef,
-          className: "max-w-7xl mx-auto"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-4", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-        StoreTextEditor,
-        {
-          ref: textEditorRef,
-          store: form.store,
-          name: "html",
-          placeholder: "\uC5EC\uAE30\uC5D0 \uBCF8\uBB38\uC744 \uC791\uC131\uD558\uC138\uC694...",
-          updateDelay: 500,
-          editor: {
-            attributes: {
-              class: cn(textEditorClassName, "pb-[50vh]")
-            }
-          },
-          attachFile
-        }
-      ) })
-    ] });
-  };
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createPostFormPage
-});