custom editor size #345

This commit is contained in:
Jan Prochazka
2022-08-19 15:10:04 +02:00
parent f80c6fec99
commit 7c87baf451
3 changed files with 19 additions and 5 deletions

View File

@@ -14,6 +14,7 @@
bind:value bind:value
on:change on:change
on:input on:input
on:click
bind:this={domEditor} bind:this={domEditor}
on:keydown on:keydown
autocomplete="new-password" autocomplete="new-password"

View File

@@ -49,6 +49,7 @@
{ label: '15', value: '15' }, { label: '15', value: '15' },
{ label: '16', value: '16' }, { label: '16', value: '16' },
{ label: '17', value: '17' }, { label: '17', value: '17' },
{ label: 'Custom', value: 'custom' },
]; ];
</script> </script>
@@ -433,7 +434,7 @@
}); });
defaultFontSize = editor.getFontSize(); defaultFontSize = editor.getFontSize();
if ($currentEditorFontSize) { if ($currentEditorFontSize) {
editor.setFontSize($currentEditorFontSize); editor.setFontSize(parseInt($currentEditorFontSize) || 12);
} }
editor.on('changeSelection', () => { editor.on('changeSelection', () => {

View File

@@ -11,6 +11,7 @@
import FormValues from '../forms/FormValues.svelte'; import FormValues from '../forms/FormValues.svelte';
import SelectField from '../forms/SelectField.svelte'; import SelectField from '../forms/SelectField.svelte';
import SettingsFormProvider from '../forms/SettingsFormProvider.svelte'; import SettingsFormProvider from '../forms/SettingsFormProvider.svelte';
import TextField from '../forms/TextField.svelte';
import FontIcon from '../icons/FontIcon.svelte'; import FontIcon from '../icons/FontIcon.svelte';
import ModalBase from '../modals/ModalBase.svelte'; import ModalBase from '../modals/ModalBase.svelte';
@@ -128,7 +129,7 @@ ORDER BY
<div class="heading">Editor theme</div> <div class="heading">Editor theme</div>
<div class="flex"> <div class="flex">
<div class="col-4"> <div class="col-3">
<FormFieldTemplateLarge label="Theme" type="combo"> <FormFieldTemplateLarge label="Theme" type="combo">
<SelectField <SelectField
isNative isNative
@@ -140,19 +141,30 @@ ORDER BY
</FormFieldTemplateLarge> </FormFieldTemplateLarge>
</div> </div>
<div class="col-4"> <div class="col-3">
<FormFieldTemplateLarge label="Font size " type="combo"> <FormFieldTemplateLarge label="Font size " type="combo">
<SelectField <SelectField
isNative isNative
notSelected="(default)" notSelected="(default)"
options={FONT_SIZES} options={FONT_SIZES}
value={$currentEditorFontSize} value={FONT_SIZES.find(x => x.value == $currentEditorFontSize) ? $currentEditorFontSize : 'custom'}
on:change={e => ($currentEditorFontSize = e.detail)} on:change={e => ($currentEditorFontSize = e.detail)}
/> />
</FormFieldTemplateLarge> </FormFieldTemplateLarge>
</div> </div>
<div class="col-4"> <div class="col-3">
<FormFieldTemplateLarge label="Custom size " type="text">
<TextField
value={$currentEditorFontSize == 'custom' ? '' : $currentEditorFontSize}
on:change={e => ($currentEditorFontSize = e.target['value'])}
disabled={!!FONT_SIZES.find(x => x.value == $currentEditorFontSize) &&
$currentEditorFontSize != 'custom'}
/>
</FormFieldTemplateLarge>
</div>
<div class="col-3">
<FormTextField name="editor.fontFamily" label="Editor font family" /> <FormTextField name="editor.fontFamily" label="Editor font family" />
</div> </div>
</div> </div>