Skip to content

Commit

Permalink
editor styles forcing
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexy-os
alexy-os committed Nov 30, 2024
1 parent 726cf99 commit c5e8275
Show file tree
Hide file tree
Showing 3 changed files with 267 additions and 142 deletions.
152 changes: 83 additions & 69 deletions public/buildy/editor.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,91 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en"
data-color-mode="light"
data-light-theme="light"
data-dark-theme="dark">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Current Page Editor</title>
<link rel="icon" href="./img/favicon.ico" />
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
<meta name="color-scheme" content="light dark">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<script>
(function() {
try {
// Получаем текущее состояние темы
const theme = localStorage.getItem('darkMode');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Если тема явно не установлена, устанавливаем значение на основе системных настроек
if (!theme && systemTheme) {
localStorage.setItem('darkMode', 'true');
}

// Применяем тему
if (theme === 'true' || (!theme && systemTheme)) {
document.documentElement.classList.add('dark');
document.querySelector('meta[name="theme-color"]')
.setAttribute('content', '#000000');
}
} catch (e) {
// В случае ошибки используем системные настройки
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
localStorage.setItem('darkMode', 'true');
}
}
})();
</script>
<script src="./js/lib/tailwind.js"></script>
<script src="./js/default.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<link href="./css/quill.min.css" rel="stylesheet" />
<script>
// Get styles from localStorage
function getTailwindStyles() {
try {
const currentState = JSON.parse(localStorage.getItem('currentState')) || {};
return currentState.sceleton?.tailwindStyles || tailwindStylesDefault;
} catch (error) {
console.error('Error getting Tailwind styles:', error);
return tailwindStylesDefault;
}
}

// Create and inject styles element
function applyTailwindStyles() {
const styles = getTailwindStyles();

// Find existing or create new style element
let styleElement = document.getElementById('tailwind-styles');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.id = 'tailwind-styles';
styleElement.setAttribute('type', 'text/tailwindcss');
document.head.appendChild(styleElement);
}

// Set styles content
styleElement.textContent = styles;
}

// Apply styles immediately
document.addEventListener('DOMContentLoaded', () => {
applyTailwindStyles();
});

// Listen for storage changes
window.addEventListener('storage', (e) => {
if (e.key === 'currentState') {
applyTailwindStyles();
}
});
</script>
<style>
#preview .quill-editor {
display: none;
Expand Down Expand Up @@ -58,70 +135,6 @@
background: rgba(100, 69, 226, 0.1);
}
</style>
<style type="text/tailwindcss">
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;

--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;

--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;

--primary: 142.1 76.2% 36.3%;
--primary-foreground: 355.7 100% 97.3%;

--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;

--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;

--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;

--border:240 5.9% 90%;
--input:240 5.9% 90%;
--ring:142.1 76.2% 36.3%;
--radius: 0.75rem;
}

.dark {
--background:20 14.3% 4.1%;
--foreground:0 0% 95%;

--card:24 9.8% 10%;
--card-foreground:0 0% 95%;

--popover:0 0% 9%;
--popover-foreground:0 0% 95%;

--primary:142.1 70.6% 45.3%;
--primary-foreground:144.9 80.4% 10%;

--secondary:240 3.7% 15.9%;
--secondary-foreground:0 0% 98%;

--muted:0 0% 15%;
--muted-foreground:240 5% 64.9%;

--accent:12 6.5% 15.1%;
--accent-foreground:0 0% 98%;

--destructive:0 62.8% 30.6%;
--destructive-foreground:0 85.7% 97.3%;

--border:240 3.7% 15.9%;
--input:240 3.7% 15.9%;
--ring:142.4 71.8% 29.2%;
}
}
</style>
</head>

<body class="font-sans bg-background text-foreground antialiased">
Expand Down Expand Up @@ -157,13 +170,14 @@ <h3 class="text-2xl font-bold mb-4 text-slate-800 dark:text-white">Edit Content<
}
function currentFontFamily() {
const currentPage = JSON.parse(localStorage.getItem("currentState"));
//const configString = JSON.stringify(currentState.sceleton.config);
let config;

const configString = safeGet(currentPage, 'sceleton.config');

// Получаем конфиг напрямую, без дополнительного парсинга
const configValue = safeGet(currentPage, 'sceleton.config');

try {
config = JSON.parse(configString);
// Проверяем тип configValue
config = typeof configValue === 'string' ? JSON.parse(configValue) : configValue;
} catch (error) {
console.error('Error config process: ', error);
return;
Expand Down
72 changes: 0 additions & 72 deletions public/buildy/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
data-color-mode="light"
data-light-theme="light"
data-dark-theme="dark">

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Expand Down Expand Up @@ -46,77 +45,6 @@
<script src="./js/lib/tailwind.js"></script>
<script src="./js/lib/lucide.min.js"></script>
<link rel="stylesheet" href="./css/style.css" />
<style type="text/tailwindcss">
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;

--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;

--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;

--primary: 142.1 76.2% 36.3%;
--primary-foreground: 355.7 100% 97.3%;

--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;

--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;

--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;

--border:240 5.9% 90%;
--input:240 5.9% 90%;
--ring:142.1 76.2% 36.3%;
--radius: 0.75rem;
}

.dark {
--background:20 14.3% 4.1%;
--foreground:0 0% 95%;

--card:24 9.8% 10%;
--card-foreground:0 0% 95%;

--popover:0 0% 9%;
--popover-foreground:0 0% 95%;

--primary:142.1 70.6% 45.3%;
--primary-foreground:144.9 80.4% 10%;

--secondary:240 3.7% 15.9%;
--secondary-foreground:0 0% 98%;

--muted:0 0% 15%;
--muted-foreground:240 5% 64.9%;

--accent:12 6.5% 15.1%;
--accent-foreground:0 0% 98%;

--destructive:0 62.8% 30.6%;
--destructive-foreground:0 85.7% 97.3%;

--border:240 3.7% 15.9%;
--input:240 3.7% 15.9%;
--ring:142.4 71.8% 29.2%;

--border-color-dark:240 3.7% 21.9%;

.border {
border: 1px solid hsl(var(--border-color-dark));
}
}
}

</style>
<style>
:root {
color-scheme: light dark;
Expand Down
Loading

0 comments on commit c5e8275

Please sign in to comment.