# תיקון סגנונות ערכות משותפות (Shared Themes)

[amirbiron]

תיקון סגנונות ערכות משותפות (Shared Themes)

בעיות שדווחו

1. אין אפשרות לאדמין למחוק ערכה ציבורית

פתרון: פאנל אדמין ב-settings.html עם DELETE /api/themes/shared/<id>

2. מסך לבן בהחלפת ערכה

פתרון: theme-mask עם sessionStorage

3. נדרסים משתנים CSS בפרסום ערכה לציבורית

מה נדרס	משתנה חסר	פתרון
רקע קוד ב-view_file	--code-bg	שמור בפרסום
צבע מחרוזות בעורך	syntax_css	שמור בפרסום
טקסט כפתורים	--btn-primary-color	שמור בפרסום
רקע Markdown	--bg-primary	שמור בפרסום
צבע טקסט	--text-primary	שמור בפרסום
Inline code	--md-inline-code-bg (או חשב מ-color-mix)	שמור/חשב בפרסום
טבלאות	--md-table-bg	שמור/חשב בפרסום
Mermaid	--md-mermaid-bg	שמור/חשב בפרסום

הפתרון הממוקד

ב-theme_builder.html - בפרסום:

// שמור את המשתנים הספציפיים שקיימים בערכה המקורית
const publishData = {
    slug,
    name,
    colors: collectThemeValues(), // מהטופס
    syntax_css: currentThemeSyntaxCss, // הדגשת תחביר
};

// אם הערכה המקורית הגדירה משתנים נוספים - שמור אותם
if (currentTheme?.variables) {
    publishData.colors = { ...currentTheme.variables, ...publishData.colors };
}

הנקודה החשובה: אל תיגע בסגנונות CSS קיימים של ערכות מיובאות.

[amirbiron]

@cursoragent

תוכל לממש?

[cursor]

View PR

עיינתי ב-.cursorrules ובאתר התיעוד. סיכום מה שלמדתי ומה שיישמתי:

מה למדתי מהתיעוד:

1. היררכיית משתנים - 3 שכבות:

   • Level 1: Primitives (--primary, --glass*)
   • Level 2: Semantic Tokens (--bg-*, --text-*, --btn-primary-*, --md-*)
   • Level 3: Component Tokens (ייחודיים לרכיבים)

2. ייבוא VS Code - יוצר גם variables וגם syntax_css

3. Whitelist - רק משתנים מאושרים נשמרים

השינויים שביצעתי:

1. theme_builder.html - שמירת משתנים מקוריים:

// 🆕 שמירת משתנים מקוריים של הערכה הנטענת
let currentThemeOriginalVariables = {};

// בטעינת ערכה:
currentThemeOriginalVariables = { ...variables };

// בפרסום - מיזוג:
const colors = {
    ...(currentThemeOriginalVariables || {}),  // משתנים מקוריים
    ...formValues,  // ערכים מהטופס (דורסים)
};

2. theme_parser_service.py - הוספת משתנים חסרים ל-Whitelist:

# 🆕 Level 2 - Markdown Enhanced
"--md-inline-code-bg", "--md-inline-code-border", "--md-inline-code-color",
"--md-table-bg", "--md-table-border", "--md-table-header-bg",
"--md-mermaid-bg",

המשתנים האלה נמצאים ב-md_preview.html אבל לא היו ב-whitelist, ולכן נמחקו בפרסום.

---

האם לרוץ את הטסטים לוודא שאין שבירות?

---

 

_{Learn more about Cursor Agents}

[amirbiron]

@cursoragent

Bug: כפתורי קישור מאבדים צבע טקסט בעת פרסום ערכה

תיאור הבעיה

כאשר מפרסמים ערכה מיובאת כציבורית, כפתורי הקישור (ראשיים ומשניים) מאבדים את צבע הטקסט שלהם.

התנהגות נכונה

• ✅ ערכות מיובאות - הכפתורים מוצגים בצבעים הנכונים
• ✅ ערכות מותאמות אישית - הכפתורים מוצגים בצבעים הנכונים

התנהגות שגויה

• ❌ ערכה מיובאת שהפכה לציבורית - הכפתורים מאבדים את צבע הטקסט

ניסיונות תיקון קודמים

ניסיון #1: שימור משתנים מקוריים

מיקום: theme_builder.html

שינוי שבוצע:

// לפני
const colors = collectThemeValues();

// אחרי
const colors = {
    ...(currentThemeOriginalVariables || {}),  // כולל --link-color, --primary מקוריים
    ...formValues,  // ערכי הטופס דורסים
};

תוצאה: ❌ לא פתר את הבעיה

---

ניסיון #2: הוספת סגנונות לערכות ציבוריות

מיקום: base.html

בעיה שזוהתה:
סגנונות הכפתורים היו מוגדרים רק עבור [data-theme-type="custom"], אך ערכות ציבוריות משתמשות ב-data-theme="shared:xxx" ללא data-theme-type.

שינוי שבוצע:

/* Shared theme button base styles */
[data-theme^="shared:"] .btn-primary {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-color) !important;
    border-color: var(--btn-primary-border) !important;
}

[data-theme^="shared:"] .btn-primary:hover { 
    /* ... */ 
}

[data-theme^="shared:"] .btn-primary:active { 
    /* ... */ 
}

תוצאה: ❌ לא פתר את הבעיה

מידע נוסף

• הבעיה מתרחשת רק כשהופכים ערכה מיובאת לציבורית
• משתנים אחרים של הערכה נשמרים כראוי
• הבעיה ספציפית לצבע טקסט של כפתורים (ראשיים ומשניים)
• ערכות מיובאות שלא פורסמו פועלות תקין

[amirbiron]

@cursoragent

שכחתי לציין שכשהכפתורים לא מקבלים את הצבע של הLink בערכות הציבוריות - הם כן מקבלים את הצבע טקסט שמוגדר להם בבונה ערכות

[cursor]

Create PR

We encountered an internal error - please try again in a moment.

---

 

_{Learn more about Cursor Agents}

[amirbiron]

@cursoragent

שכחתי לציין מומלץ לעיין באתר התיעוד בעמוד ערכות נושא מותאמות אישית – מדריך מקיף

[amirbiron]

סיכום התיקון

הבעיה

• בערכות מיובאות (custom) - כפתורים מקבלים var(--primary) בגלל [data-theme="custom"] a { color: var(--primary); } ב-dark-mode.css ✅
• בערכות ציבוריות (shared) - כפתורים קיבלו var(--btn-primary-color) עם !important שדרס את הצבע ❌

התיקון

שיניתי את הסגנונות של ערכות shared להשתמש ב-var(--primary) במקום var(--btn-primary-color), כך שההתנהגות תהיה אחידה:

/* לפני */
color: var(--btn-primary-color) !important;

/* אחרי */
color: var(--primary) !important;

עכשיו בשני סוגי הערכות (custom ו-shared), כפתורים יציגו את צבע ה---primary (שבדרך כלל = צבע ה-link).

[amirbiron]

נשאר עוד דבר

בעיות נותרות

• הרקע של עמוד תצוגת הקוד ב-2 העורכים, הבסיסי והמתקדם - משתנה ונדרס כשמפרסמים ערכה מיובאת
• כנ"ל הרקע של עורך הקוד CodeMirror בעמוד העלאת/עריכת קובץ
• גם הדגשת התחביר בעמוד תצוגת הקוד בעורך הבסיסי - נדרסת

התיקון

הוספת [data-theme^="shared:"] לכל הסגנונות של CodeMirror

• .cm-editor
• .cm-gutters
• .cm-activeLine
• וכו'

webapp/static/css/dark-mode.css - הוספת סגנונות לערכות shared

הוספת [data-theme^="shared:"] לסגנונות:

• .source (רקע קוד)
• .highlighttable td.linenos (מספרי שורות)
• .navbar .nav-link
• h1-h6, p
• a (קישורים)
• .logo
• .quick-access-item
• .recent-files-modal, .community-modal
• input/textarea::placeholder
• Transitions (*, *::before, ::after)

הבעיה הייתה: ערכות shared לא היו מוגדרות ב-CSS - היו סגנונות רק לערכות custom, dark, dim, nebula אבל לא ל-shared:.

[amirbiron]

סיכום תיקוני תצוגת Markdown בפרסום ערכות (בוצע לפני מספר סשנים, ועכשיו לפתע הבעיה חזרה)

הבעיה המקורית

כשמפרסמים ערכה אישית (Custom) לציבורית (Shared), עיצוב Markdown נדרס:

• רקע הדף חוזר לברירת מחדל
• צבע הטקסט משתנה
• Inline code מאבד עיצוב
• טבלאות ו-Mermaid לא מעוצבים

שורש הבעיה

• משתני Markdown לא היו ב-Whitelist - השרת סינן אותם בזמן הפרסום
• הטופס לא כלל את כל המשתנים - collectThemeValues() אסף רק משתנים שיש להם color picker בטופס

התיקונים

1. הוספת משתני Markdown ל-Whitelist

קובץ: services/theme_parser_service.py

ALLOWED_VARIABLES_WHITELIST = frozenset([
    # ... משתנים קיימים ...
    
    # Level 2 - Markdown & Split View
    "--md-surface", "--md-text",
    
    # Level 2 - Markdown Enhanced (inline code, tables, mermaid)
    "--md-inline-code-bg", "--md-inline-code-border", "--md-inline-code-color",
    "--md-table-bg", "--md-table-border", "--md-table-header-bg",
    "--md-mermaid-bg",
])

מטרה: לאפשר לשרת לשמור את המשתנים האלה ב-DB ולא לסנן אותם.

---

2. מיפוי VS Code → משתני Markdown

קובץ: services/theme_parser_service.py

VSCODE_TO_CSS_MAP = {
    # רקע העורך ממלא גם את --md-surface
    "editor.background": ["--bg-primary", "--md-surface"],
    
    # צבע טקסט ממלא גם את --md-text
    "editor.foreground": ["--text-primary", "--md-text"],
}

מטרה: כש-VS Code theme מיובא, משתני ה-Markdown מקבלים ערכים אוטומטית מצבעי העורך.

---

3. שימור משתנים מקוריים בפרסום

קובץ: webapp/templates/settings/theme_builder.html

// State - שמירת כל המשתנים המקוריים
let currentThemeOriginalVariables = {};
 
// בטעינת ערכה - שמירת כל המשתנים (כולל MD)
function loadThemeIntoForm(theme) {
    const variables = theme.variables || {};
    currentThemeOriginalVariables = { ...variables };  // ← שמירה!
    // ...
}
 
// בפרסום - מיזוג משתנים מקוריים + ערכי טופס
publishForm.addEventListener('submit', async (e) => {
    const formValues = collectThemeValues();  // רק מה שבטופס
    const colors = {
        ...(currentThemeOriginalVariables || {}),  // כל המשתנים המקוריים
        ...formValues,  // ערכי הטופס דורסים
    };
    // שליחה לשרת עם colors
});

מטרה:

• הטופס מציג רק 10 color pickers
• אבל ערכות מיובאות מכילות 30+ משתנים
• בלי המיזוג, משתנים שאין להם picker (כמו --md-inline-code-bg) היו נמחקים

---

זרימת הנתונים המתוקנת

┌─────────────────┐
│ VS Code Theme   │
│ (JSON Import)   │
└────────┬────────┘
         │
         ▼
┌─────────────────────────────────┐
│ parse_vscode_theme()            │
│ - מיפוי editor.background →     │
│   [--bg-primary, --md-surface]  │
│ - מיפוי editor.foreground →     │
│   [--text-primary, --md-text]   │
└────────┬────────────────────────┘
         │
         ▼
┌─────────────────────────────────┐
│ Custom Theme (DB)               │
│ variables: {                    │
│   "--bg-primary": "#1e1e1e",    │
│   "--md-surface": "#1e1e1e",    │ ← נשמר!
│   "--text-primary": "#d4d4d4",  │
│   "--md-text": "#d4d4d4",       │ ← נשמר!
│   "--md-inline-code-bg": "...", │ ← נשמר!
│   ...                           │
│ }                               │
└────────┬────────────────────────┘
         │
         ▼ [פרסום]
┌─────────────────────────────────┐
│ theme_builder.html              │
│ colors = {                      │
│   ...currentThemeOriginalVars,  │ ← כל המשתנים המקוריים
│   ...formValues                 │ ← + ערכי הטופס
│ }                               │
└────────┬────────────────────────┘
         │
         ▼
┌─────────────────────────────────┐
│ _filter_and_validate_colors()   │
│ - מסנן רק לפי Whitelist         │
│ - --md-surface ✅ מותר          │
│ - --md-inline-code-bg ✅ מותר   │
└────────┬────────────────────────┘
         │
         ▼
┌─────────────────────────────────┐
│ Shared Theme (DB)               │
│ colors: { כל המשתנים נשמרו }    │
└─────────────────────────────────┘

[amirbiron]

התיקון:
webapp/templates/md_preview.html - Markdown לערכות shared

הוספת [data-theme^="shared:"] לכל סגנונות:
#md-content (רקע וצבע טקסט)
Mermaid diagrams (nodes, labels, edges, actors, notes)
Inline code ו-code blocks
שורש הבעיה: כל קבצי ה-CSS כללו סגנונות לערכות custom אבל לא לערכות shared:*. לכן ערכות ציבוריות לא קיבלו את הסגנונות המתאימים.

[amirbiron]

סיכום תיקון TOC
הוספתי סגנונות TOC לערכות custom ו-shared:

משתני TOC - הוספת הגדרות ל-:root[data-theme="custom"] ו-:root[data-theme^="shared:"]:

--md-toc-surface - רקע כהה מהערכה
--md-toc-border - גבול
--md-toc-text - צבע טקסט
--md-toc-hover, --md-toc-active - צבעי hover/active
--md-toc-mini-* - כפתור מינימלי
דריסת צבע קישורים - הוספת סגנון ספציפי ל-.md-toc-item בערכות custom/shared כדי לדרוס את הסגנון הכללי של קישורים (a { color: var(--primary); }):

[data-theme="custom"] .md-toc-item,
[data-theme^="shared:"] .md-toc-item {
color: var(--md-toc-text);
}
עכשיו ה-TOC יקבל:

רקע כהה מהערכה (--card-bg)
צבע טקסט מהערכה (--text-primary)
צבע הדגשה (active item) מהערכה (--primary)