Skip to content

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

Closed
Closed
# תיקון סגנונות ערכות משותפות (Shared Themes)#2585
Labels
🟨 בתהליך מימוש

Description

@amirbiron
amirbiron
opened on Jan 5, 2026

תיקון סגנונות ערכות משותפות (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 קיימים של ערכות מיובאות.

Activity

  1. amirbiron commented on Jan 5, 2026

    @amirbiron
    amirbiron
    on Jan 5, 2026
    OwnerAuthor

    @cursoragent

    תוכל לממש?

  2. cursor commented on Jan 5, 2026

    @cursor
    cursorbot
    on Jan 5, 2026 – with Cursor
    Contributor

    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, ולכן נמחקו בפרסום.

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

    Open in Cursor Open in Web

    Learn more about Cursor Agents

  3. amirbiron
    added
    🟨 בתהליך מימוש
    on Jan 5, 2026

  4. amirbiron commented on Jan 5, 2026

    @amirbiron
    amirbiron
    on Jan 5, 2026
    OwnerAuthor

    @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 { 
    /* ... */ 
}

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

    מידע נוסף

    • הבעיה מתרחשת רק כשהופכים ערכה מיובאת לציבורית
    • משתנים אחרים של הערכה נשמרים כראוי
    • הבעיה ספציפית לצבע טקסט של כפתורים (ראשיים ומשניים)
    • ערכות מיובאות שלא פורסמו פועלות תקין
  5. Repository owner deleted a comment from cursor on Jan 5, 2026

  6. amirbiron commented on Jan 5, 2026

    @amirbiron
    amirbiron
    on Jan 5, 2026
    OwnerAuthor

    @cursoragent

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

  7. cursor commented on Jan 5, 2026

    @cursor
    cursorbot
    on Jan 5, 2026 – with Cursor
    Contributor

    Create PR

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

    Open in Cursor Open in Web

    Learn more about Cursor Agents

  8. amirbiron commented on Jan 5, 2026

    @amirbiron
    amirbiron
    on Jan 5, 2026
    OwnerAuthor

    @cursoragent

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

  9. Repository owner deleted a comment from cursor on Jan 5, 2026

  10. amirbiron commented on Jan 5, 2026

    @amirbiron
    amirbiron
    on Jan 5, 2026
    OwnerAuthor

    סיכום התיקון

    הבעיה

    • בערכות מיובאות (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).

  11. amirbiron commented on Jan 5, 2026

    @amirbiron
    amirbiron
    on Jan 5, 2026
    OwnerAuthor

    נשאר עוד דבר

    בעיות נותרות

    • הרקע של עמוד תצוגת הקוד ב-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:.

  12. amirbiron commented on Jan 6, 2026

    @amirbiron
    amirbiron
    on Jan 6, 2026
    OwnerAuthor

    סיכום תיקוני תצוגת 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: { כל המשתנים נשמרו }    │
└─────────────────────────────────┘

  13. amirbiron commented on Jan 6, 2026

    @amirbiron
    amirbiron
    on Jan 6, 2026
    OwnerAuthor

    התיקון:
    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:*. לכן ערכות ציבוריות לא קיבלו את הסגנונות המתאימים.

  14. amirbiron commented on Jan 6, 2026

    @amirbiron
    amirbiron
    on Jan 6, 2026
    OwnerAuthor

    סיכום תיקון 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)

  15. amirbiron
    closed this as completedon Jan 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    🟨 בתהליך מימוש

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions