@wikex/admin-kit 0.2.0

package/src/rich-text/client.tsx

@@ -0,0 +1,202 @@
+'use client'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { $forEachSelectedTextNode } from '@lexical/selection'
+import type { ToolbarGroupItem } from '@payloadcms/richtext-lexical'
+import { createClientFeature } from '@payloadcms/richtext-lexical/client'
+import {
+  $getNodeByKey,
+  $getSelection,
+  $getState,
+  $isRangeSelection,
+  $isTextNode,
+  $setSelection,
+  $setState,
+  createState,
+  type LexicalEditor,
+  type RangeSelection,
+  TextNode,
+} from 'lexical'
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import {
+  getTextStyleCSS,
+  normalizeTextStyleValue,
+  TEXT_FONT_OPTIONS,
+  TEXT_LINE_HEIGHT_OPTIONS,
+  type TextFontFamily,
+  type TextLineHeight,
+} from '../textStyles'
+
+const fontFamilyState = createState('fontFamily', {
+  parse: (value) => normalizeTextStyleValue({ fontFamily: value }).fontFamily,
+})
+const lineHeightState = createState('lineHeight', {
+  parse: (value) => normalizeTextStyleValue({ lineHeight: value }).lineHeight,
+})
+
+type TypographyValue = {
+  fontFamily: TextFontFamily
+  lineHeight: TextLineHeight
+}
+
+const DEFAULT_TYPOGRAPHY: TypographyValue = {
+  fontFamily: 'default',
+  lineHeight: 'default',
+}
+
+const readSelectedTypography = (editor: LexicalEditor): TypographyValue =>
+  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',
+    }
+  })
+
+const updateSelectedTypography = (
+  editor: LexicalEditor,
+  property: keyof TypographyValue,
+  value: TextFontFamily | TextLineHeight,
+  savedSelection: null | RangeSelection,
+) => {
+  editor.update(() => {
+    if (!$isRangeSelection($getSelection()) && savedSelection) {
+      $setSelection(savedSelection.clone())
+    }
+
+    $forEachSelectedTextNode((textNode) => {
+      if (property === 'fontFamily') {
+        const fontFamily = value as TextFontFamily
+        $setState(textNode, fontFamilyState, fontFamily === 'default' ? undefined : fontFamily)
+      } else {
+        const lineHeight = value as TextLineHeight
+        $setState(textNode, lineHeightState, lineHeight === 'default' ? undefined : lineHeight)
+      }
+    })
+  })
+}
+
+const TypographyToolbarItem = ({ editor }: { editor: LexicalEditor }) => {
+  const [value, setValue] = useState<TypographyValue>(DEFAULT_TYPOGRAPHY)
+  const savedSelection = useRef<null | RangeSelection>(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 (
+    <div
+      aria-label="Kiểu chữ"
+      className="wikex-typography-selects"
+      onMouseDown={(event) => {
+        event.stopPropagation()
+        captureSelection()
+      }}
+    >
+      <select
+        aria-label="Phông chữ"
+        className="wikex-minimal-select wikex-minimal-select--font"
+        onChange={(event) => {
+          const fontFamily = event.target.value as TextFontFamily
+          setValue((current) => ({ ...current, fontFamily }))
+          updateSelectedTypography(editor, 'fontFamily', fontFamily, savedSelection.current)
+        }}
+        title="Phông chữ"
+        value={value.fontFamily}
+      >
+        {TEXT_FONT_OPTIONS.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+      <select
+        aria-label="Chiều cao dòng"
+        className="wikex-minimal-select wikex-minimal-select--line-height"
+        onChange={(event) => {
+          const lineHeight = event.target.value as TextLineHeight
+          setValue((current) => ({ ...current, lineHeight }))
+          updateSelectedTypography(editor, 'lineHeight', lineHeight, savedSelection.current)
+        }}
+        title="Chiều cao dòng"
+        value={value.lineHeight}
+      >
+        {TEXT_LINE_HEIGHT_OPTIONS.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+const 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
+}
+
+const toolbarItem: ToolbarGroupItem = {
+  Component: TypographyToolbarItem,
+  key: 'wikex-typography-controls',
+}
+
+const typographyToolbarGroup = {
+  items: [toolbarItem],
+  key: 'wikexTypography',
+  order: 34,
+  type: 'buttons' as const,
+}
+
+export const RichTextTypographyFeatureClient = createClientFeature({
+  plugins: [{ Component: TypographyStatePlugin, position: 'normal' }],
+  toolbarFixed: { groups: [typographyToolbarGroup] },
+  toolbarInline: { groups: [typographyToolbarGroup] },
+})

package/src/rich-text/index.ts

@@ -0,0 +1,10 @@
+import { createServerFeature } from '@payloadcms/richtext-lexical'
+
+const TypographyFeature = createServerFeature({
+  feature: {
+    ClientFeature: '@wikex/admin-kit/rich-text/client#RichTextTypographyFeatureClient',
+  },
+  key: 'wikexTypography',
+})
+
+export const RichTextTypographyFeature = () => TypographyFeature()

package/src/starter/client.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { configureAdminBrand } from '../admin/Brand'
+import LivePreviewEditor, { configureLivePreview } from '../live-preview'
+import type { WikexStarter } from '../starter'
+
+type LivePreviewConfig = WikexStarter['livePreview'] & {
+  getVisualEditorRoute: WikexStarter['getVisualEditorRoute']
+}
+
+/** Configure and return the shared client-side Live Preview provider for a Wikex starter. */
+export const createWikexLivePreviewAdapter = ({
+  brand,
+  getVisualEditorRoute,
+  pageBlocks,
+  postBlocks,
+}: LivePreviewConfig) => {
+  configureAdminBrand({ logo: { alt: brand.name, ...brand.logo }, siteName: brand.name })
+  configureLivePreview({ getVisualEditorRoute, pageBlocks, postBlocks })
+
+  return LivePreviewEditor
+}

package/src/starter.ts

@@ -0,0 +1,95 @@
+import { createContentModule, type ContentModuleOptions } from '@wikex/content-kit'
+import { adminExperiencePlugin } from './adminExperience'
+import type { BlockPickerOption, VisualEditorRoute } from './live-preview/runtimeConfig'
+import { createVisualEditorRouteResolver, defineWikexProject } from './project'
+import { wikexAdminPlugin } from './plugin'
+
+export type WikexStarterBrand = {
+  description: string
+  logo: {
+    height: number
+    url: string
+    width: number
+  }
+  name: string
+}
+
+export type WikexStarterOptions = {
+  brand: WikexStarterBrand
+  content: ContentModuleOptions
+  globals?: Readonly<Record<string, 'content' | 'footer' | 'header'>>
+  id: string
+  modules?: readonly string[]
+  provider: string
+}
+
+export 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>
+}
+
+const getLabel = (block: { labels?: unknown; slug: string }) => {
+  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
+}
+
+const isStarterBlock = (block: unknown): block is { labels?: unknown; slug: string } =>
+  typeof block === 'object' && block !== null && 'slug' in block && typeof block.slug === 'string'
+
+const toBlockPickerOptions = (blocks: unknown): readonly BlockPickerOption[] => {
+  if (!Array.isArray(blocks)) return []
+  return blocks.filter(isStarterBlock).map((block) => {
+    const label = getLabel(block)
+    return { description: label, label, payloadLabel: label, slug: block.slug }
+  })
+}
+
+/**
+ * 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.
+ */
+export const createWikexStarter = (options: WikexStarterOptions): WikexStarter => {
+  const seo = options.content.seo === undefined ? { siteName: options.brand.name } : options.content.seo
+  const content = createContentModule({ ...options.content, seo })
+  const collections = [content.pageSlug, content.postSlug].filter(
+    (slug): slug is string => 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 ? undefined : options.content.page?.blocks,
+  )
+  const postBlocks = toBlockPickerOptions(
+    options.content.post === false ? undefined : 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,
+  }
+}

package/src/styles/_wikex-fonts.scss

@@ -0,0 +1,45 @@
+/* Self-hosted Google fonts used by the Lexical typography controls. */
+@mixin wikex-font($family, $file, $weight, $range) {
+  @font-face {
+    font-family: $family;
+    font-style: normal;
+    font-weight: $weight;
+    font-display: swap;
+    src: url('/fonts/google/#{$file}.woff2') format('woff2');
+    unicode-range: $range;
+  }
+}
+
+$vietnamese-range:
+  U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301,
+  U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+$latin-range:
+  U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
+  U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+
+@include wikex-font('Wikex Inter', 'inter-vietnamese', 100 900, $vietnamese-range);
+@include wikex-font('Wikex Inter', 'inter-latin', 100 900, $latin-range);
+@include wikex-font('Wikex Lora', 'lora-vietnamese', 400 700, $vietnamese-range);
+@include wikex-font('Wikex Lora', 'lora-latin', 400 700, $latin-range);
+@include wikex-font('Wikex Manrope', 'manrope-vietnamese', 200 800, $vietnamese-range);
+@include wikex-font('Wikex Manrope', 'manrope-latin', 200 800, $latin-range);
+@include wikex-font('Wikex Montserrat', 'montserrat-vietnamese', 100 900, $vietnamese-range);
+@include wikex-font('Wikex Montserrat', 'montserrat-latin', 100 900, $latin-range);
+@include wikex-font(
+  'Wikex Playfair Display',
+  'playfair-display-vietnamese',
+  400 900,
+  $vietnamese-range
+);
+@include wikex-font('Wikex Playfair Display', 'playfair-display-latin', 400 900, $latin-range);
+@include wikex-font('Wikex Roboto', 'roboto-vietnamese', 100 900, $vietnamese-range);
+@include wikex-font('Wikex Roboto', 'roboto-latin', 100 900, $latin-range);
+
+:root {
+  --font-inter: 'Wikex Inter', sans-serif;
+  --font-lora: 'Wikex Lora', serif;
+  --font-manrope: 'Wikex Manrope', sans-serif;
+  --font-montserrat: 'Wikex Montserrat', sans-serif;
+  --font-playfair-display: 'Wikex Playfair Display', serif;
+  --font-roboto: 'Wikex Roboto', sans-serif;
+}