@wikex/admin-kit 0.2.0 → 0.2.2

package/dist/project.d.ts

@@ -0,0 +1 @@
+export { V as VisualEditorRouteRegistry, W as WikexProjectDefinition, c as createVisualEditorRouteResolver, d as defineWikexProject } from './project-ClCmpyeX.js';

package/dist/project.js

@@ -0,0 +1,8 @@
+import {
+  createVisualEditorRouteResolver,
+  defineWikexProject
+} from "./chunk-JJLHSZ3T.js";
+export {
+  createVisualEditorRouteResolver,
+  defineWikexProject
+};

package/dist/rich-text-client.d.ts

@@ -0,0 +1,5 @@
+import * as _payloadcms_richtext_lexical from '@payloadcms/richtext-lexical';
+
+declare const RichTextTypographyFeatureClient: _payloadcms_richtext_lexical.FeatureProviderProviderClient<undefined, undefined>;
+
+export { RichTextTypographyFeatureClient };

package/dist/rich-text-client.js

@@ -0,0 +1,166 @@
+'use client';
+"use client";
+import {
+  TEXT_FONT_OPTIONS,
+  TEXT_LINE_HEIGHT_OPTIONS,
+  getTextStyleCSS,
+  normalizeTextStyleValue
+} from "./chunk-VK4EFLWH.js";
+
+// src/rich-text/client.tsx
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $forEachSelectedTextNode } from "@lexical/selection";
+import { createClientFeature } from "@payloadcms/richtext-lexical/client";
+import {
+  $getNodeByKey,
+  $getSelection,
+  $getState,
+  $isRangeSelection,
+  $isTextNode,
+  $setSelection,
+  $setState,
+  createState,
+  TextNode
+} from "lexical";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var fontFamilyState = createState("fontFamily", {
+  parse: (value) => normalizeTextStyleValue({ fontFamily: value }).fontFamily
+});
+var lineHeightState = createState("lineHeight", {
+  parse: (value) => normalizeTextStyleValue({ lineHeight: value }).lineHeight
+});
+var DEFAULT_TYPOGRAPHY = {
+  fontFamily: "default",
+  lineHeight: "default"
+};
+var readSelectedTypography = (editor) => editor.getEditorState().read(() => {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection)) return DEFAULT_TYPOGRAPHY;
+  const textNode = selection.getNodes().find($isTextNode);
+  if (!textNode) return DEFAULT_TYPOGRAPHY;
+  return {
+    fontFamily: $getState(textNode, fontFamilyState) ?? "default",
+    lineHeight: $getState(textNode, lineHeightState) ?? "default"
+  };
+});
+var updateSelectedTypography = (editor, property, value, savedSelection) => {
+  editor.update(() => {
+    if (!$isRangeSelection($getSelection()) && savedSelection) {
+      $setSelection(savedSelection.clone());
+    }
+    $forEachSelectedTextNode((textNode) => {
+      if (property === "fontFamily") {
+        const fontFamily = value;
+        $setState(textNode, fontFamilyState, fontFamily === "default" ? void 0 : fontFamily);
+      } else {
+        const lineHeight = value;
+        $setState(textNode, lineHeightState, lineHeight === "default" ? void 0 : lineHeight);
+      }
+    });
+  });
+};
+var TypographyToolbarItem = ({ editor }) => {
+  const [value, setValue] = useState(DEFAULT_TYPOGRAPHY);
+  const savedSelection = useRef(null);
+  const captureSelection = useCallback(() => {
+    editor.getEditorState().read(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) savedSelection.current = selection.clone();
+    });
+  }, [editor]);
+  useEffect(() => {
+    const syncValue = () => {
+      captureSelection();
+      setValue(readSelectedTypography(editor));
+    };
+    syncValue();
+    return editor.registerUpdateListener(syncValue);
+  }, [captureSelection, editor]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-label": "Ki\u1EC3u ch\u1EEF",
+      className: "wikex-typography-selects",
+      onMouseDown: (event) => {
+        event.stopPropagation();
+        captureSelection();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            "aria-label": "Ph\xF4ng ch\u1EEF",
+            className: "wikex-minimal-select wikex-minimal-select--font",
+            onChange: (event) => {
+              const fontFamily = event.target.value;
+              setValue((current) => ({ ...current, fontFamily }));
+              updateSelectedTypography(editor, "fontFamily", fontFamily, savedSelection.current);
+            },
+            title: "Ph\xF4ng ch\u1EEF",
+            value: value.fontFamily,
+            children: TEXT_FONT_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            "aria-label": "Chi\u1EC1u cao d\xF2ng",
+            className: "wikex-minimal-select wikex-minimal-select--line-height",
+            onChange: (event) => {
+              const lineHeight = event.target.value;
+              setValue((current) => ({ ...current, lineHeight }));
+              updateSelectedTypography(editor, "lineHeight", lineHeight, savedSelection.current);
+            },
+            title: "Chi\u1EC1u cao d\xF2ng",
+            value: value.lineHeight,
+            children: TEXT_LINE_HEIGHT_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+          }
+        )
+      ]
+    }
+  );
+};
+var TypographyStatePlugin = () => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(
+    () => editor.registerMutationListener(TextNode, (mutatedNodes) => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === "destroyed") continue;
+          const node = $getNodeByKey(nodeKey);
+          const element = editor.getElementByKey(nodeKey);
+          if (!$isTextNode(node) || !element) continue;
+          const style = getTextStyleCSS({
+            fontFamily: $getState(node, fontFamilyState),
+            lineHeight: $getState(node, lineHeightState)
+          });
+          if (style.fontFamily) element.style.fontFamily = style.fontFamily;
+          else element.style.removeProperty("font-family");
+          if (style.lineHeight) element.style.lineHeight = style.lineHeight;
+          else element.style.removeProperty("line-height");
+        }
+      });
+    }),
+    [editor]
+  );
+  return null;
+};
+var toolbarItem = {
+  Component: TypographyToolbarItem,
+  key: "wikex-typography-controls"
+};
+var typographyToolbarGroup = {
+  items: [toolbarItem],
+  key: "wikexTypography",
+  order: 34,
+  type: "buttons"
+};
+var RichTextTypographyFeatureClient = createClientFeature({
+  plugins: [{ Component: TypographyStatePlugin, position: "normal" }],
+  toolbarFixed: { groups: [typographyToolbarGroup] },
+  toolbarInline: { groups: [typographyToolbarGroup] }
+});
+export {
+  RichTextTypographyFeatureClient
+};

package/dist/rich-text.d.ts

@@ -0,0 +1,5 @@
+import * as _payloadcms_richtext_lexical from '@payloadcms/richtext-lexical';
+
+declare const RichTextTypographyFeature: () => _payloadcms_richtext_lexical.FeatureProviderServer<undefined, undefined, undefined>;
+
+export { RichTextTypographyFeature };

package/dist/rich-text.js

@@ -0,0 +1,6 @@
+import {
+  RichTextTypographyFeature
+} from "./chunk-LC2CP5SR.js";
+export {
+  RichTextTypographyFeature
+};

package/dist/runtimeConfig-BwjQepcW.d.ts

@@ -0,0 +1,30 @@
+type BlockPickerScope = 'page' | 'post';
+type BlockPickerOption = {
+    description: string;
+    image?: string;
+    label: string;
+    payloadLabel?: string;
+    slug: string;
+};
+type VisualEditorDocumentTarget = {
+    collection: string;
+    documentID: string;
+    kind: 'collection';
+} | {
+    global: string;
+    kind: 'global';
+};
+type VisualEditorScope = 'content' | 'footer' | 'header';
+type VisualEditorRoute = {
+    documentTarget: VisualEditorDocumentTarget | null;
+    scope: VisualEditorScope;
+    type: 'collection' | 'global';
+};
+type LivePreviewRuntimeConfig = {
+    getVisualEditorRoute: (pathname: string) => VisualEditorRoute | null;
+    pageBlocks: readonly BlockPickerOption[];
+    postBlocks: readonly BlockPickerOption[];
+};
+declare const configureLivePreview: (config: LivePreviewRuntimeConfig) => void;
+
+export { type BlockPickerOption as B, type LivePreviewRuntimeConfig as L, type VisualEditorDocumentTarget as V, type BlockPickerScope as a, type VisualEditorRoute as b, type VisualEditorScope as c, configureLivePreview as d };

package/dist/starter-client.d.ts

@@ -0,0 +1,56 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { createContentModule } from '@wikex/content-kit';
+import { b as VisualEditorRoute, B as BlockPickerOption } from './runtimeConfig-BwjQepcW.js';
+
+type WikexProjectDefinition<TModuleID extends string = string> = {
+    admin?: {
+        collectionOrder?: readonly string[];
+        globalOrder?: readonly string[];
+    };
+    brand: {
+        description: string;
+        logo: {
+            height: number;
+            url: string;
+            width: number;
+        };
+        name: string;
+    };
+    homepage?: {
+        defaultMode: 'builder' | 'preset';
+    };
+    id: string;
+    modules: readonly TModuleID[];
+};
+declare const defineWikexProject: <const TModuleID extends string, const TProject extends WikexProjectDefinition<TModuleID>>(project: TProject) => TProject;
+
+type WikexStarterBrand = {
+    description: string;
+    logo: {
+        height: number;
+        url: string;
+        width: number;
+    };
+    name: string;
+};
+type WikexStarter = {
+    collections: ReturnType<typeof createContentModule>['collections'];
+    getVisualEditorRoute: (pathname: string) => VisualEditorRoute | null;
+    livePreview: {
+        brand: WikexStarterBrand;
+        pageBlocks: readonly BlockPickerOption[];
+        postBlocks: readonly BlockPickerOption[];
+    };
+    plugins: ReturnType<typeof createContentModule>['plugins'];
+    project: ReturnType<typeof defineWikexProject>;
+};
+
+type LivePreviewConfig = WikexStarter['livePreview'] & {
+    getVisualEditorRoute: WikexStarter['getVisualEditorRoute'];
+};
+/** Configure and return the shared client-side Live Preview provider for a Wikex starter. */
+declare const createWikexLivePreviewAdapter: ({ brand, getVisualEditorRoute, pageBlocks, postBlocks, }: LivePreviewConfig) => ({ children }: {
+    children?: React.ReactNode;
+}) => react_jsx_runtime.JSX.Element;
+
+export { createWikexLivePreviewAdapter };

package/dist/starter-client.js

@@ -0,0 +1,26 @@
+'use client';
+"use client";
+import "./chunk-SM6CCKQQ.js";
+import {
+  configureAdminBrand
+} from "./chunk-X7VETFVD.js";
+import {
+  LivePreviewEditor_default,
+  configureLivePreview
+} from "./chunk-GMPR6LHH.js";
+import "./chunk-VK4EFLWH.js";
+
+// src/starter/client.tsx
+var createWikexLivePreviewAdapter = ({
+  brand,
+  getVisualEditorRoute,
+  pageBlocks,
+  postBlocks
+}) => {
+  configureAdminBrand({ logo: { alt: brand.name, ...brand.logo }, siteName: brand.name });
+  configureLivePreview({ getVisualEditorRoute, pageBlocks, postBlocks });
+  return LivePreviewEditor_default;
+};
+export {
+  createWikexLivePreviewAdapter
+};

package/dist/starter.d.ts

@@ -0,0 +1,39 @@
+import { createContentModule, ContentModuleOptions } from '@wikex/content-kit';
+import { a as VisualEditorRoute, B as BlockPickerOption, d as defineWikexProject } from './project-ClCmpyeX.js';
+
+type WikexStarterBrand = {
+    description: string;
+    logo: {
+        height: number;
+        url: string;
+        width: number;
+    };
+    name: string;
+};
+type WikexStarterOptions = {
+    brand: WikexStarterBrand;
+    content: ContentModuleOptions;
+    globals?: Readonly<Record<string, 'content' | 'footer' | 'header'>>;
+    id: string;
+    modules?: readonly string[];
+    provider: string;
+};
+type WikexStarter = {
+    collections: ReturnType<typeof createContentModule>['collections'];
+    getVisualEditorRoute: (pathname: string) => VisualEditorRoute | null;
+    livePreview: {
+        brand: WikexStarterBrand;
+        pageBlocks: readonly BlockPickerOption[];
+        postBlocks: readonly BlockPickerOption[];
+    };
+    plugins: ReturnType<typeof createContentModule>['plugins'];
+    project: ReturnType<typeof defineWikexProject>;
+};
+/**
+ * One factory for the conventional Wikex Payload setup. The consuming project still owns
+ * its visual block components and frontend renderer, but no longer has to wire plugins,
+ * content schema, branding and preview routing independently.
+ */
+declare const createWikexStarter: (options: WikexStarterOptions) => WikexStarter;
+
+export { type WikexStarter, type WikexStarterBrand, type WikexStarterOptions, createWikexStarter };

package/dist/starter.js

@@ -0,0 +1,62 @@
+import {
+  adminExperiencePlugin,
+  wikexAdminPlugin
+} from "./chunk-7FEACJUN.js";
+import {
+  createVisualEditorRouteResolver,
+  defineWikexProject
+} from "./chunk-JJLHSZ3T.js";
+
+// src/starter.ts
+import { createContentModule } from "@wikex/content-kit";
+var getLabel = (block) => {
+  if (typeof block.labels === "object" && block.labels && "singular" in block.labels) {
+    const singular = block.labels.singular;
+    if (typeof singular === "string") return singular;
+  }
+  return block.slug;
+};
+var isStarterBlock = (block) => typeof block === "object" && block !== null && "slug" in block && typeof block.slug === "string";
+var toBlockPickerOptions = (blocks) => {
+  if (!Array.isArray(blocks)) return [];
+  return blocks.filter(isStarterBlock).map((block) => {
+    const label = getLabel(block);
+    return { description: label, label, payloadLabel: label, slug: block.slug };
+  });
+};
+var createWikexStarter = (options) => {
+  const seo = options.content.seo === void 0 ? { siteName: options.brand.name } : options.content.seo;
+  const content = createContentModule({ ...options.content, seo });
+  const collections = [content.pageSlug, content.postSlug].filter(
+    (slug) => Boolean(slug)
+  );
+  const getVisualEditorRoute = createVisualEditorRouteResolver({
+    collections,
+    globals: options.globals
+  });
+  const project = defineWikexProject({
+    brand: options.brand,
+    id: options.id,
+    modules: options.modules ?? ["website", "blog"]
+  });
+  const pageBlocks = toBlockPickerOptions(
+    options.content.page === false ? void 0 : options.content.page?.blocks
+  );
+  const postBlocks = toBlockPickerOptions(
+    options.content.post === false ? void 0 : options.content.post?.blocks
+  );
+  return {
+    collections: content.collections,
+    getVisualEditorRoute,
+    livePreview: { brand: options.brand, pageBlocks, postBlocks },
+    plugins: [
+      adminExperiencePlugin,
+      ...content.plugins,
+      wikexAdminPlugin({ components: { provider: options.provider } })
+    ],
+    project
+  };
+};
+export {
+  createWikexStarter
+};

package/dist/text-style-runtime.d.ts

@@ -0,0 +1,5 @@
+declare const TextStyleRuntime: ({ styles }: {
+    styles?: unknown;
+}) => null;
+
+export { TextStyleRuntime };

package/dist/text-style-runtime.js

@@ -0,0 +1,74 @@
+'use client';
+"use client";
+import {
+  EDITABLE_PREVIEW_SELECTOR,
+  getEditableElementStyleKey,
+  getTextStyleCSS,
+  normalizeTextStyleMap
+} from "./chunk-VK4EFLWH.js";
+
+// src/TextStyleRuntime.tsx
+import { useEffect } from "react";
+var TextStyleRuntime = ({ styles }) => {
+  useEffect(() => {
+    const normalizedStyles = normalizeTextStyleMap(styles);
+    const originals = /* @__PURE__ */ new Map();
+    let applyFrame = 0;
+    const applyStyles = () => {
+      const fields = new Set(
+        document.querySelectorAll(`[data-wikex-field],${EDITABLE_PREVIEW_SELECTOR}`)
+      );
+      for (const element of fields) {
+        const fieldPath = element.dataset.wikexField || getEditableElementStyleKey(element);
+        if (!fieldPath || !normalizedStyles[fieldPath]) continue;
+        if (!originals.has(element)) {
+          originals.set(element, {
+            boxSizing: element.style.boxSizing,
+            fontFamily: element.style.fontFamily,
+            lineHeight: element.style.lineHeight,
+            marginLeft: element.style.marginLeft,
+            marginRight: element.style.marginRight,
+            maxWidth: element.style.maxWidth,
+            width: element.style.width
+          });
+        }
+        const style = getTextStyleCSS(normalizedStyles[fieldPath]);
+        element.style.boxSizing = style.boxSizing || "";
+        element.style.fontFamily = style.fontFamily || "";
+        element.style.lineHeight = style.lineHeight || "";
+        element.style.marginLeft = style.marginLeft || "";
+        element.style.marginRight = style.marginRight || "";
+        element.style.maxWidth = style.maxWidth || "";
+        element.style.width = style.width || "";
+      }
+    };
+    const scheduleApplyStyles = () => {
+      if (applyFrame) return;
+      applyFrame = window.requestAnimationFrame(() => {
+        applyFrame = 0;
+        applyStyles();
+      });
+    };
+    applyStyles();
+    const observer = new MutationObserver(scheduleApplyStyles);
+    observer.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      observer.disconnect();
+      window.cancelAnimationFrame(applyFrame);
+      for (const [element, original] of originals) {
+        if (!element.isConnected) continue;
+        element.style.boxSizing = original.boxSizing;
+        element.style.fontFamily = original.fontFamily;
+        element.style.lineHeight = original.lineHeight;
+        element.style.marginLeft = original.marginLeft;
+        element.style.marginRight = original.marginRight;
+        element.style.maxWidth = original.maxWidth;
+        element.style.width = original.width;
+      }
+    };
+  }, [styles]);
+  return null;
+};
+export {
+  TextStyleRuntime
+};

package/dist/text-styles.d.ts

@@ -0,0 +1,86 @@
+declare const TEXT_FONT_OPTIONS: readonly [{
+    readonly css: "";
+    readonly label: "Mặc định";
+    readonly value: "default";
+}, {
+    readonly css: "var(--font-manrope), sans-serif";
+    readonly label: "Manrope";
+    readonly value: "manrope";
+}, {
+    readonly css: "var(--font-inter), sans-serif";
+    readonly label: "Inter";
+    readonly value: "inter";
+}, {
+    readonly css: "var(--font-roboto), sans-serif";
+    readonly label: "Roboto";
+    readonly value: "roboto";
+}, {
+    readonly css: "var(--font-montserrat), sans-serif";
+    readonly label: "Montserrat";
+    readonly value: "montserrat";
+}, {
+    readonly css: "var(--font-lora), serif";
+    readonly label: "Lora";
+    readonly value: "lora";
+}, {
+    readonly css: "var(--font-playfair-display), serif";
+    readonly label: "Playfair Display";
+    readonly value: "playfair-display";
+}];
+declare const TEXT_LINE_HEIGHT_OPTIONS: readonly [{
+    readonly css: "";
+    readonly label: "Mặc định";
+    readonly value: "default";
+}, {
+    readonly css: "0.9";
+    readonly label: "Rất chặt · 0.9";
+    readonly value: "0.9";
+}, {
+    readonly css: "1";
+    readonly label: "Chặt · 1.0";
+    readonly value: "1";
+}, {
+    readonly css: "1.15";
+    readonly label: "Gọn · 1.15";
+    readonly value: "1.15";
+}, {
+    readonly css: "1.35";
+    readonly label: "Tiêu chuẩn · 1.35";
+    readonly value: "1.35";
+}, {
+    readonly css: "1.5";
+    readonly label: "Thoáng · 1.5";
+    readonly value: "1.5";
+}, {
+    readonly css: "1.7";
+    readonly label: "Rộng · 1.7";
+    readonly value: "1.7";
+}];
+type TextFontFamily = (typeof TEXT_FONT_OPTIONS)[number]['value'];
+type TextLineHeight = (typeof TEXT_LINE_HEIGHT_OPTIONS)[number]['value'];
+type TextStyleValue = {
+    fontFamily?: TextFontFamily;
+    lineHeight?: TextLineHeight;
+    /** Percentage of the containing block, written by the canvas resize handles. */
+    width?: number;
+    /** Percentage offset from the containing block's left content edge. */
+    widthOffset?: number;
+};
+type TextStyleMap = Record<string, TextStyleValue>;
+declare const EDITABLE_INTERACTIVE_SELECTOR: string;
+declare const EDITABLE_PREVIEW_SELECTOR: string;
+declare const isSyntheticElementStyleKey: (value: string) => boolean;
+declare const getEditableElementStyleKey: (element: HTMLElement) => string;
+declare const normalizeTextStyleValue: (value: unknown) => TextStyleValue;
+declare const normalizeTextStyleMap: (value: unknown) => TextStyleMap;
+declare const getTextStyleCSS: (value: TextStyleValue) => {
+    boxSizing?: "border-box";
+    fontFamily?: string;
+    lineHeight?: string;
+    marginLeft?: string;
+    marginRight?: string;
+    maxWidth?: string;
+    width?: string;
+};
+
+export { EDITABLE_INTERACTIVE_SELECTOR, EDITABLE_PREVIEW_SELECTOR, TEXT_FONT_OPTIONS, TEXT_LINE_HEIGHT_OPTIONS, type TextFontFamily, type TextLineHeight, type TextStyleMap, type TextStyleValue, getEditableElementStyleKey, getTextStyleCSS, isSyntheticElementStyleKey, normalizeTextStyleMap, normalizeTextStyleValue };

package/dist/text-styles.js

@@ -0,0 +1,22 @@
+import {
+  EDITABLE_INTERACTIVE_SELECTOR,
+  EDITABLE_PREVIEW_SELECTOR,
+  TEXT_FONT_OPTIONS,
+  TEXT_LINE_HEIGHT_OPTIONS,
+  getEditableElementStyleKey,
+  getTextStyleCSS,
+  isSyntheticElementStyleKey,
+  normalizeTextStyleMap,
+  normalizeTextStyleValue
+} from "./chunk-BUD6BMFV.js";
+export {
+  EDITABLE_INTERACTIVE_SELECTOR,
+  EDITABLE_PREVIEW_SELECTOR,
+  TEXT_FONT_OPTIONS,
+  TEXT_LINE_HEIGHT_OPTIONS,
+  getEditableElementStyleKey,
+  getTextStyleCSS,
+  isSyntheticElementStyleKey,
+  normalizeTextStyleMap,
+  normalizeTextStyleValue
+};