@wikex/admin-kit 0.2.0 → 0.2.1

package/src/rich-text/client.tsx

@@ -1,202 +0,0 @@
-'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

@@ -1,10 +0,0 @@
-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

@@ -1,22 +0,0 @@
-'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

@@ -1,95 +0,0 @@
-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/textStyles.ts

@@ -1,161 +0,0 @@
-export const TEXT_FONT_OPTIONS = [
-  { css: '', label: 'Mặc định', value: 'default' },
-  { css: 'var(--font-manrope), sans-serif', label: 'Manrope', value: 'manrope' },
-  { css: 'var(--font-inter), sans-serif', label: 'Inter', value: 'inter' },
-  { css: 'var(--font-roboto), sans-serif', label: 'Roboto', value: 'roboto' },
-  { css: 'var(--font-montserrat), sans-serif', label: 'Montserrat', value: 'montserrat' },
-  { css: 'var(--font-lora), serif', label: 'Lora', value: 'lora' },
-  {
-    css: 'var(--font-playfair-display), serif',
-    label: 'Playfair Display',
-    value: 'playfair-display',
-  },
-] as const
-
-export const TEXT_LINE_HEIGHT_OPTIONS = [
-  { css: '', label: 'Mặc định', value: 'default' },
-  { css: '0.9', label: 'Rất chặt · 0.9', value: '0.9' },
-  { css: '1', label: 'Chặt · 1.0', value: '1' },
-  { css: '1.15', label: 'Gọn · 1.15', value: '1.15' },
-  { css: '1.35', label: 'Tiêu chuẩn · 1.35', value: '1.35' },
-  { css: '1.5', label: 'Thoáng · 1.5', value: '1.5' },
-  { css: '1.7', label: 'Rộng · 1.7', value: '1.7' },
-] as const
-
-export type TextFontFamily = (typeof TEXT_FONT_OPTIONS)[number]['value']
-export type TextLineHeight = (typeof TEXT_LINE_HEIGHT_OPTIONS)[number]['value']
-
-export 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
-}
-
-export type TextStyleMap = Record<string, TextStyleValue>
-
-export const EDITABLE_INTERACTIVE_SELECTOR = [
-  'a',
-  'button',
-  'input:not([type="hidden"])',
-  'select',
-  'textarea',
-  '[role="button"]',
-  '[role="link"]',
-  '[tabindex]:not([tabindex="-1"])',
-].join(',')
-
-export const EDITABLE_PREVIEW_SELECTOR = [
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'p',
-  'li',
-  'span',
-  'strong',
-  EDITABLE_INTERACTIVE_SELECTOR,
-].join(',')
-
-export const isSyntheticElementStyleKey = (value: string) => value.startsWith('@element:')
-
-export const getEditableElementStyleKey = (element: HTMLElement) => {
-  const scopedRoot = element.closest<HTMLElement>('[data-wikex-scope]')
-  const root = scopedRoot ?? element.ownerDocument.body
-  const scope = scopedRoot?.dataset.wikexScope || 'body'
-  const segments: string[] = []
-  let current: HTMLElement | null = element
-
-  while (current && current !== root) {
-    const parentElement: HTMLElement | null = current.parentElement
-    if (!parentElement) break
-
-    const tagName = current.tagName.toLowerCase()
-    const sameTagSiblings = Array.from(parentElement.children).filter(
-      (sibling) => sibling.tagName === current?.tagName,
-    )
-    const index = sameTagSiblings.indexOf(current) + 1
-    segments.push(`${tagName}:nth-of-type(${Math.max(index, 1)})`)
-    current = parentElement
-  }
-
-  return `@element:${scope}:${segments.reverse().join('>')}`
-}
-
-const fontValues = new Set<string>(TEXT_FONT_OPTIONS.map((option) => option.value))
-const lineHeightValues = new Set<string>(TEXT_LINE_HEIGHT_OPTIONS.map((option) => option.value))
-
-const isRecord = (value: unknown): value is Record<string, unknown> =>
-  Boolean(value) && typeof value === 'object' && !Array.isArray(value)
-
-export const normalizeTextStyleValue = (value: unknown): TextStyleValue => {
-  if (!isRecord(value)) return {}
-
-  const fontFamily =
-    typeof value.fontFamily === 'string' && fontValues.has(value.fontFamily)
-      ? (value.fontFamily as TextFontFamily)
-      : undefined
-  const lineHeight =
-    typeof value.lineHeight === 'string' && lineHeightValues.has(value.lineHeight)
-      ? (value.lineHeight as TextLineHeight)
-      : undefined
-  const legacyWidth =
-    typeof value.width === 'string' && /^\d+(?:\.\d+)?%$/.test(value.width)
-      ? Number.parseFloat(value.width)
-      : undefined
-  const widthValue = typeof value.width === 'number' ? value.width : legacyWidth
-  const width =
-    typeof widthValue === 'number' && Number.isFinite(widthValue)
-      ? Math.min(100, Math.max(5, widthValue))
-      : undefined
-  const widthOffset =
-    typeof value.widthOffset === 'number' && Number.isFinite(value.widthOffset)
-      ? Math.min(width ? 100 - width : 95, Math.max(0, value.widthOffset))
-      : undefined
-
-  return { fontFamily, lineHeight, width, widthOffset }
-}
-
-export const normalizeTextStyleMap = (value: unknown): TextStyleMap => {
-  if (!isRecord(value)) return {}
-
-  return Object.fromEntries(
-    Object.entries(value).map(([fieldPath, fieldStyle]) => [
-      fieldPath,
-      normalizeTextStyleValue(fieldStyle),
-    ]),
-  )
-}
-
-export const getTextStyleCSS = (
-  value: TextStyleValue,
-): {
-  boxSizing?: 'border-box'
-  fontFamily?: string
-  lineHeight?: string
-  marginLeft?: string
-  marginRight?: string
-  maxWidth?: string
-  width?: string
-} => {
-  const fontFamily = TEXT_FONT_OPTIONS.find((option) => option.value === value.fontFamily)?.css
-  const lineHeight = TEXT_LINE_HEIGHT_OPTIONS.find(
-    (option) => option.value === value.lineHeight,
-  )?.css
-  const width = typeof value.width === 'number' ? `${value.width}%` : undefined
-  const widthOffset = typeof value.widthOffset === 'number' ? `${value.widthOffset}%` : undefined
-
-  return {
-    boxSizing: width ? 'border-box' : undefined,
-    fontFamily: fontFamily || undefined,
-    lineHeight: lineHeight || undefined,
-    marginLeft: width ? widthOffset || '0%' : undefined,
-    marginRight: width ? 'auto' : undefined,
-    maxWidth: width ? 'none' : undefined,
-    width,
-  }
-}