studio-variable/geoproject-app
4
0
Fork 0
Code Issues 25 Pull requests Projects Releases Packages Wiki Activity Actions

default for inline element

Browse source
This commit is contained in:
Julie Blanc 2026-03-08 09:35:45 +01:00
parent 47bf70bb36
commit efa1004380
2 changed files with 23 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/composables/useElementSettings.js
View file

@ -1,5 +1,5 @@
import { ref, reactive, computed, watch, nextTick } from 'vue'; 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 { useStylesheetStore } from '../stores/stylesheet';
import { useDebounce } from './useDebounce'; import { useDebounce } from './useDebounce';
import { useTextDefaults } from './useTextDefaults'; import { useTextDefaults } from './useTextDefaults';
@ -15,6 +15,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
// --- Selector state --- // --- Selector state ---
const selector = ref(''); const selector = ref('');
const currentTag = ref('');
// --- Style refs (initial values from defaults.js) --- // --- Style refs (initial values from defaults.js) ---
const fontFamily = ref(ELEMENT_DEFAULTS.fontFamily); const fontFamily = ref(ELEMENT_DEFAULTS.fontFamily);
@ -256,11 +257,11 @@ export function useElementSettings({ margin, padding, basePopup }) {
{ css: 'font-family', group: 'font', special: true, { css: 'font-family', group: 'font', special: true,
getValue: () => { const val = settingEnabled.font ? fontFamily.value : textDefaults.fontFamily; return val === 'sans-serif' ? 'sans-serif' : `"${val}"`; } }, getValue: () => { const val = settingEnabled.font ? fontFamily.value : textDefaults.fontFamily; return val === 'sans-serif' ? 'sans-serif' : `"${val}"`; } },
{ css: 'font-style', group: 'font', { css: 'font-style', group: 'font',
getValue: () => italic.value ? 'italic' : null, getValue: () => italic.value ? 'italic' : (INLINE_DEFAULTS[currentTag.value]?.fontStyle || null),
skip: () => !settingEnabled.font || !italic.value }, skip: () => !italic.value && !INLINE_DEFAULTS[currentTag.value]?.fontStyle },
{ css: 'font-weight', group: 'font', { css: 'font-weight', group: 'font',
getValue: () => bold.value ? 'bold' : null, getValue: () => bold.value ? 'bold' : (INLINE_DEFAULTS[currentTag.value]?.fontWeight || null),
skip: () => !settingEnabled.font || !bold.value }, skip: () => !bold.value && !INLINE_DEFAULTS[currentTag.value]?.fontWeight },
{ css: 'font-size', group: 'fontSize', special: true, { css: 'font-size', group: 'fontSize', special: true,
getValue: () => `${(settingEnabled.fontSize ? fontSize : textDefaults.fontSize).value}${(settingEnabled.fontSize ? fontSize : textDefaults.fontSize).unit}` }, getValue: () => `${(settingEnabled.fontSize ? fontSize : textDefaults.fontSize).value}${(settingEnabled.fontSize ? fontSize : textDefaults.fontSize).unit}` },
{ css: 'line-height', group: 'lineHeight', special: true, { css: 'line-height', group: 'lineHeight', special: true,
@ -587,6 +588,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
selectedElement.value = element; selectedElement.value = element;
selector.value = getSelectorFromElement(element); selector.value = getSelectorFromElement(element);
currentTag.value = element.tagName.toLowerCase();
elementInstanceCount.value = getInstanceCount(selector.value); elementInstanceCount.value = getInstanceCount(selector.value);
const stored = elementStates.get(selector.value); const stored = elementStates.get(selector.value);
@ -606,6 +608,14 @@ export function useElementSettings({ margin, padding, basePopup }) {
settingCache.color = null; 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); loadValuesFromStylesheet(true);
if (stored && stored.values) { if (stored && stored.values) {
@ -647,6 +657,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
saveElementState(); saveElementState();
basePopup.value?.close(); basePopup.value?.close();
selector.value = ''; selector.value = '';
currentTag.value = '';
selectedElement.value = null; selectedElement.value = null;
emit('close'); emit('close');
}; };

8
src/stores/stylesheet.js
View file

@ -5,7 +5,7 @@ import * as cssComments from '../utils/css-comments';
import prettier from 'prettier/standalone'; import prettier from 'prettier/standalone';
import parserPostcss from 'prettier/plugins/postcss'; import parserPostcss from 'prettier/plugins/postcss';
import { getCsrfToken } from '../utils/kirby-auth'; 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', () => { export const useStylesheetStore = defineStore('stylesheet', () => {
// Base state // Base state
@ -194,6 +194,12 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
set('body', 'color', TEXT_DEFAULTS.color); set('body', 'color', TEXT_DEFAULTS.color);
set('p', 'font-size', TEXT_DEFAULTS.fontSize.value, TEXT_DEFAULTS.fontSize.unit); set('p', 'font-size', TEXT_DEFAULTS.fontSize.value, TEXT_DEFAULTS.fontSize.unit);
set('p', 'line-height', TEXT_DEFAULTS.lineHeight.value, TEXT_DEFAULTS.lineHeight.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) // Initialize from narrative data (base + custom CSS)