@wikex/admin-kit 0.2.0

package/src/textStyles.ts

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