diff --git a/src/composables/useElementSettings.js b/src/composables/useElementSettings.js index cd8a4ff..97f5873 100644 --- a/src/composables/useElementSettings.js +++ b/src/composables/useElementSettings.js @@ -1,5 +1,5 @@ import { ref, reactive, computed, watch, nextTick } from 'vue'; -import { ELEMENT_DEFAULTS } from '../utils/defaults'; +import { ELEMENT_DEFAULTS, INLINE_DEFAULTS } from '../utils/defaults'; import { useStylesheetStore } from '../stores/stylesheet'; import { useDebounce } from './useDebounce'; import { useTextDefaults } from './useTextDefaults'; @@ -15,6 +15,7 @@ export function useElementSettings({ margin, padding, basePopup }) { // --- Selector state --- const selector = ref(''); + const currentTag = ref(''); // --- Style refs (initial values from defaults.js) --- const fontFamily = ref(ELEMENT_DEFAULTS.fontFamily); @@ -256,11 +257,11 @@ export function useElementSettings({ margin, padding, basePopup }) { { css: 'font-family', group: 'font', special: true, getValue: () => { const val = settingEnabled.font ? fontFamily.value : textDefaults.fontFamily; return val === 'sans-serif' ? 'sans-serif' : `"${val}"`; } }, { css: 'font-style', group: 'font', - getValue: () => italic.value ? 'italic' : null, - skip: () => !settingEnabled.font || !italic.value }, + getValue: () => italic.value ? 'italic' : (INLINE_DEFAULTS[currentTag.value]?.fontStyle || null), + skip: () => !italic.value && !INLINE_DEFAULTS[currentTag.value]?.fontStyle }, { css: 'font-weight', group: 'font', - getValue: () => bold.value ? 'bold' : null, - skip: () => !settingEnabled.font || !bold.value }, + getValue: () => bold.value ? 'bold' : (INLINE_DEFAULTS[currentTag.value]?.fontWeight || null), + skip: () => !bold.value && !INLINE_DEFAULTS[currentTag.value]?.fontWeight }, { css: 'font-size', group: 'fontSize', special: true, getValue: () => `${(settingEnabled.fontSize ? fontSize : textDefaults.fontSize).value}${(settingEnabled.fontSize ? fontSize : textDefaults.fontSize).unit}` }, { css: 'line-height', group: 'lineHeight', special: true, @@ -587,6 +588,7 @@ export function useElementSettings({ margin, padding, basePopup }) { selectedElement.value = element; selector.value = getSelectorFromElement(element); + currentTag.value = element.tagName.toLowerCase(); elementInstanceCount.value = getInstanceCount(selector.value); const stored = elementStates.get(selector.value); @@ -606,6 +608,14 @@ export function useElementSettings({ margin, padding, basePopup }) { settingCache.color = null; } + // Apply tag-based defaults (em/i → italic, strong/b → bold) + const tag = element.tagName.toLowerCase(); + const inlineDefaults = INLINE_DEFAULTS[tag]; + if (inlineDefaults) { + if (inlineDefaults.fontStyle === 'italic') italic.value = true; + if (inlineDefaults.fontWeight === 'bold') bold.value = true; + } + loadValuesFromStylesheet(true); if (stored && stored.values) { @@ -647,6 +657,7 @@ export function useElementSettings({ margin, padding, basePopup }) { saveElementState(); basePopup.value?.close(); selector.value = ''; + currentTag.value = ''; selectedElement.value = null; emit('close'); }; diff --git a/src/stores/stylesheet.js b/src/stores/stylesheet.js index ee31953..7ef06c3 100644 --- a/src/stores/stylesheet.js +++ b/src/stores/stylesheet.js @@ -5,7 +5,7 @@ import * as cssComments from '../utils/css-comments'; import prettier from 'prettier/standalone'; import parserPostcss from 'prettier/plugins/postcss'; import { getCsrfToken } from '../utils/kirby-auth'; -import { PAGE_DEFAULTS, TEXT_DEFAULTS } from '../utils/defaults'; +import { PAGE_DEFAULTS, TEXT_DEFAULTS, INLINE_DEFAULTS } from '../utils/defaults'; export const useStylesheetStore = defineStore('stylesheet', () => { // Base state @@ -194,6 +194,12 @@ export const useStylesheetStore = defineStore('stylesheet', () => { set('body', 'color', TEXT_DEFAULTS.color); set('p', 'font-size', TEXT_DEFAULTS.fontSize.value, TEXT_DEFAULTS.fontSize.unit); set('p', 'line-height', TEXT_DEFAULTS.lineHeight.value, TEXT_DEFAULTS.lineHeight.unit); + + // Inline element defaults (em, i, strong, b) + for (const [tag, props] of Object.entries(INLINE_DEFAULTS)) { + if (props.fontStyle) set(tag, 'font-style', props.fontStyle); + if (props.fontWeight) set(tag, 'font-weight', props.fontWeight); + } }; // Initialize from narrative data (base + custom CSS)