betterstart-cli 0.0.94 → 0.0.96

package/dist/assets/adapters/next/templates/init/utils/editor/content-editor.ts

@@ -9,6 +9,7 @@ export interface ContentEditorSelectionRequest {
 }
 
 export const CONTENT_EDITOR_HIGHLIGHT_COLORS = [
+  'default',
   'gray',
   'brown',
   'orange',
@@ -22,20 +23,92 @@ export const CONTENT_EDITOR_HIGHLIGHT_COLORS = [
 
 export type ContentEditorHighlightColor = (typeof CONTENT_EDITOR_HIGHLIGHT_COLORS)[number]
 
-export const CONTENT_EDITOR_HIGHLIGHT_COLOR_VALUES: Record<ContentEditorHighlightColor, string> = {
-  gray: 'var(--tt-color-highlight-gray)',
-  brown: 'var(--tt-color-highlight-brown)',
-  orange: 'var(--tt-color-highlight-orange)',
-  yellow: 'var(--tt-color-highlight-yellow)',
-  green: 'var(--tt-color-highlight-green)',
-  blue: 'var(--tt-color-highlight-blue)',
-  purple: 'var(--tt-color-highlight-purple)',
-  pink: 'var(--tt-color-highlight-pink)',
-  red: 'var(--tt-color-highlight-red)'
+export interface ContentEditorHighlightColorOption {
+  label: string
+  value: string
+  colorValue: string
+  border: string
 }
 
-const HIGHLIGHT_VALUE_NAMES = new Map(
-  Object.entries(CONTENT_EDITOR_HIGHLIGHT_COLOR_VALUES).map(([name, value]) => [value, name])
+export const CONTENT_EDITOR_HIGHLIGHT_COLOR_OPTIONS: Record<
+  ContentEditorHighlightColor,
+  ContentEditorHighlightColorOption
+> = {
+  default: {
+    label: 'Default background',
+    value: 'var(--tt-bg-color)',
+    colorValue: '#ffffff',
+    border: 'var(--tt-bg-color-contrast)'
+  },
+  gray: {
+    label: 'Gray background',
+    value: 'var(--tt-color-highlight-gray)',
+    colorValue: '#f8f8f7',
+    border: 'var(--tt-color-highlight-gray-contrast)'
+  },
+  brown: {
+    label: 'Brown background',
+    value: 'var(--tt-color-highlight-brown)',
+    colorValue: '#f4eeee',
+    border: 'var(--tt-color-highlight-brown-contrast)'
+  },
+  orange: {
+    label: 'Orange background',
+    value: 'var(--tt-color-highlight-orange)',
+    colorValue: '#fbecdd',
+    border: 'var(--tt-color-highlight-orange-contrast)'
+  },
+  yellow: {
+    label: 'Yellow background',
+    value: 'var(--tt-color-highlight-yellow)',
+    colorValue: '#fef9c3',
+    border: 'var(--tt-color-highlight-yellow-contrast)'
+  },
+  green: {
+    label: 'Green background',
+    value: 'var(--tt-color-highlight-green)',
+    colorValue: '#dcfce7',
+    border: 'var(--tt-color-highlight-green-contrast)'
+  },
+  blue: {
+    label: 'Blue background',
+    value: 'var(--tt-color-highlight-blue)',
+    colorValue: '#e0f2fe',
+    border: 'var(--tt-color-highlight-blue-contrast)'
+  },
+  purple: {
+    label: 'Purple background',
+    value: 'var(--tt-color-highlight-purple)',
+    colorValue: '#f3e8ff',
+    border: 'var(--tt-color-highlight-purple-contrast)'
+  },
+  pink: {
+    label: 'Pink background',
+    value: 'var(--tt-color-highlight-pink)',
+    colorValue: '#fcf1f6',
+    border: 'var(--tt-color-highlight-pink-contrast)'
+  },
+  red: {
+    label: 'Red background',
+    value: 'var(--tt-color-highlight-red)',
+    colorValue: '#ffe4e6',
+    border: 'var(--tt-color-highlight-red-contrast)'
+  }
+}
+
+export const CONTENT_EDITOR_HIGHLIGHT_COLOR_NAME_PATTERN = CONTENT_EDITOR_HIGHLIGHT_COLORS.join('|')
+
+const HIGHLIGHT_NAMES_BY_VALUE = new Map(
+  CONTENT_EDITOR_HIGHLIGHT_COLORS.map(
+    (name) => [CONTENT_EDITOR_HIGHLIGHT_COLOR_OPTIONS[name].value, name] as const
+  )
+)
+
+const HIGHLIGHT_NAMES_BY_CSS_VARIABLE = new Map(
+  CONTENT_EDITOR_HIGHLIGHT_COLORS.map(
+    (name) =>
+      [CONTENT_EDITOR_HIGHLIGHT_COLOR_OPTIONS[name].value.slice('var('.length, -1), name] as const
+  )
 )
 
 export function getContentEditorHighlightColorName(
@@ -44,19 +117,16 @@ export function getContentEditorHighlightColorName(
   if (!value) return 'yellow'
 
   const normalized = value.trim()
-  const variableMatch = normalized.match(/var\((--tt-color-highlight-[^)]+)\)/)
-  const variableName = variableMatch ? `var(${variableMatch[1]})` : normalized
-  const mapped = HIGHLIGHT_VALUE_NAMES.get(variableName)
+  const mapped = HIGHLIGHT_NAMES_BY_VALUE.get(normalized)
 
-  if (mapped && isContentEditorHighlightColor(mapped)) {
+  if (mapped) {
     return mapped
   }
 
-  const cssVariableMatch = normalized.match(
-    /--tt-color-highlight-(gray|brown|orange|yellow|green|blue|purple|pink|red)/
-  )
-  if (cssVariableMatch && isContentEditorHighlightColor(cssVariableMatch[1])) {
-    return cssVariableMatch[1]
+  for (const [cssVariable, name] of HIGHLIGHT_NAMES_BY_CSS_VARIABLE) {
+    if (normalized.includes(cssVariable)) {
+      return name
+    }
   }
 
   if (isContentEditorHighlightColor(normalized)) {
@@ -67,7 +137,7 @@ export function getContentEditorHighlightColorName(
 }
 
 export function getContentEditorHighlightColorValue(color: ContentEditorHighlightColor): string {
-  return CONTENT_EDITOR_HIGHLIGHT_COLOR_VALUES[color]
+  return CONTENT_EDITOR_HIGHLIGHT_COLOR_OPTIONS[color].value
 }
 
 export function isContentEditorHighlightColor(value: string): value is ContentEditorHighlightColor {
@@ -295,13 +365,16 @@ function matchMarkdownMarkSyntax(markdown: string, index: number): number | null
   return null
 }
 
+const HIGHLIGHT_SPAN_OPEN_PATTERN = new RegExp(
+  `^<span\\s+data-highlight-color="(?:${CONTENT_EDITOR_HIGHLIGHT_COLOR_NAME_PATTERN})">`,
+  'i'
+)
+
 function matchHtmlMarkSyntax(markdown: string, index: number): number | null {
   const remaining = markdown.slice(index)
   const match =
     /^<\/?(?:u|sub|sup|kbd)>/i.exec(remaining) ??
-    /^<span\s+data-highlight-color="(?:gray|brown|orange|yellow|green|blue|purple|pink|red)">/i.exec(
-      remaining
-    ) ??
+    HIGHLIGHT_SPAN_OPEN_PATTERN.exec(remaining) ??
     /^<\/span>/i.exec(remaining)
 
   return match ? index + match[0].length : null

package/dist/assets/adapters/next/templates/init/utils/editor/markdown.ts

@@ -1,3 +1,4 @@
+import { CONTENT_EDITOR_HIGHLIGHT_COLOR_NAME_PATTERN } from '@admin/utils/editor/content-editor'
 import type { EditorView } from '@codemirror/view'
 
 interface InsertResult {
@@ -22,8 +23,10 @@ export interface ContentEditorMathValue {
   raw: string
 }
 
-const HIGHLIGHT_SPAN_PATTERN =
-  /<span\s+data-highlight-color="(?:gray|brown|orange|yellow|green|blue|purple|pink|red)">([\s\S]*?)<\/span>/g
+const HIGHLIGHT_SPAN_PATTERN = new RegExp(
+  `<span\\s+data-highlight-color="(?:${CONTENT_EDITOR_HIGHLIGHT_COLOR_NAME_PATTERN})">([\\s\\S]*?)<\\/span>`,
+  'g'
+)
 const MARKDOWN_LINK_PATTERN = /\[([^\]\n]*)\]\(([^)\n]*)\)/g
 const BLOCK_MATH_ENVIRONMENT_NAMES = new Set([
   'align',

package/dist/assets/shared-assets/react-admin/custom/content-editor/selection-bubble-menu.tsx

@@ -73,7 +73,7 @@ export function SelectionBubbleMenu({ editor }: { editor: Editor }) {
           aria-label="Link formatting toolbar"
           className={cn(
             'flex items-center gap-1 overflow-x-auto border-border border bg-popover p-4 text-foreground shadow-2xl [scrollbar-width:none] [&::-webkit-scrollbar]:hidden rounded-sm',
-            'relative z-10'
+            'relative z-50'
           )}
         >
           <LinkContent editor={editor} />
@@ -102,7 +102,7 @@ export function SelectionBubbleMenu({ editor }: { editor: Editor }) {
           onPointerDownCapture={handleSelectionMenuPointerDown}
           className={cn(
             'flex items-center gap-1 overflow-x-auto border-border rounded-sm border bg-popover p-1 text-popover-foreground shadow-menu [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-            'relative z-10'
+            'relative z-50'
           )}
         >
           <div className="flex items-center gap-0.5">

package/dist/assets/shared-assets/react-admin/custom/content-editor/source-mode.tsx

@@ -92,6 +92,8 @@ export function SourceMode({
     applyList,
     applyStrike,
     applyUnderline,
+    canRedoMarkdownChange,
+    canUndoMarkdownChange,
     codeMirrorExtensions,
     editorRef,
     editorTheme,
@@ -135,7 +137,7 @@ export function SourceMode({
               variant="ghost"
               size="icon-sm"
               onClick={undoMarkdownChange}
-              disabled={disabled}
+              disabled={disabled || !canUndoMarkdownChange}
               aria-label="Undo"
               title="Undo"
             >
@@ -146,7 +148,7 @@ export function SourceMode({
               variant="ghost"
               size="icon-sm"
               onClick={redoMarkdownChange}
-              disabled={disabled}
+              disabled={disabled || !canRedoMarkdownChange}
               aria-label="Redo"
               title="Redo"
             >

package/dist/assets/shared-assets/react-admin/custom/media-field.tsx

@@ -94,9 +94,9 @@ export function MediaField({
               <>
                 <div
                   aria-hidden="true"
-                  className="pointer-events-none absolute inset-0 bg-black/10 opacity-0 backdrop-blur-xs transition-opacity duration-300 ease-out group-hover:opacity-100 rounded-sm"
+                  className="pointer-events-none absolute inset-0 bg-black/10 opacity-0 backdrop-blur-xs transition-opacity duration-300 ease-out group-hover:opacity-100 group-focus-within:opacity-100 rounded-sm"
                 />
-                <div className="absolute inset-0 flex flex-col items-center justify-center gap-1 opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100">
+                <div className="absolute inset-0 flex flex-col items-center justify-center gap-1 opacity-0 transition-opacity duration-200 ease-out group-hover:opacity-100 group-focus-within:opacity-100">
                   <Button
                     type="button"
                     data-media-field-action="true"