Skip to content

Commit b9a04b9

Browse files
kyoshinokyoshino
committed
Revert "Refactor Markdown editor components"
Fix #475
1 parent c84c024 commit b9a04b9

12 files changed

Lines changed: 151 additions & 210 deletions

File tree

‎src/lib/components/contents/details/editor/field-editor.svelte‎

Lines changed: 37 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,7 @@
1919
/**
2020
* @import { Component } from 'svelte';
2121
* @import { Writable } from 'svelte/store';
22-
* @import {
23-
* DraftValueStoreKey,
24-
* FieldEditorContext,
25-
* InternalLocaleCode,
26-
* WidgetContext,
27-
* } from '$lib/types/private';
22+
* @import { InternalLocaleCode, WidgetContext } from '$lib/types/private';
2823
* @import {
2924
* BooleanField,
3025
* Field,
@@ -44,8 +39,6 @@
4439
* @property {FieldKeyPath} keyPath Field key path.
4540
* @property {Field} fieldConfig Field configuration.
4641
* @property {WidgetContext} [context] Where the widget is rendered.
47-
* @property {DraftValueStoreKey} [valueStoreKey] Key to store the current values in the
48-
* {@link entryDraft}.
4942
*/
5043
5144
/** @type {Props} */
@@ -55,7 +48,6 @@
5548
keyPath,
5649
fieldConfig,
5750
context = undefined,
58-
valueStoreKey = 'currentValues',
5951
/* eslint-enable prefer-const */
6052
} = $props();
6153
@@ -75,7 +67,7 @@
7567
/** @type {Writable<Component>} */
7668
const extraHint = writable();
7769
78-
setContext('field-editor', /** @type {FieldEditorContext} */ ({ extraHint, valueStoreKey }));
70+
setContext('field-editor', { extraHint });
7971
8072
const {
8173
name: fieldName,
@@ -146,11 +138,11 @@
146138
// Multiple values are flattened in the value map object
147139
const currentValue = $derived(
148140
isList
149-
? Object.entries($state.snapshot($entryDraft?.[valueStoreKey][locale] ?? {}))
141+
? Object.entries($state.snapshot($entryDraft?.currentValues[locale] ?? {}))
150142
.filter(([_keyPath]) => keyPathRegex.test(_keyPath))
151143
.map(([, val]) => val)
152144
.filter((val) => val !== undefined)
153-
: $state.snapshot($entryDraft?.[valueStoreKey][locale])?.[keyPath],
145+
: $state.snapshot($entryDraft?.currentValues[locale])?.[keyPath],
154146
);
155147
const originalValue = $derived(
156148
isList
@@ -183,43 +175,38 @@
183175
>
184176
<header role="none">
185177
<h4 role="none" id="{fieldId}-label">{fieldLabel}</h4>
186-
{#if context === 'markdown-editor-component'}
187-
<!-- @todo Support `required` option -->
188-
<Spacer flex />
189-
{:else}
190-
{#if !readonly && required}
191-
<div class="required" aria-label={$_('required')}>*</div>
192-
{/if}
193-
<Spacer flex />
194-
{#if canCopy && ['markdown', 'string', 'text', 'list', 'object'].includes(widgetName)}
195-
<TranslateButton size="small" {locale} {otherLocales} {keyPath} />
196-
{/if}
197-
{#if canCopy || canRevert}
198-
<MenuButton
199-
variant="ghost"
200-
size="small"
201-
iconic
202-
popupPosition="bottom-right"
203-
aria-label={$_('show_field_options')}
204-
>
205-
{#snippet popup()}
206-
<Menu aria-label={$_('field_options')}>
207-
{#if canCopy}
208-
<CopyMenuItems {locale} {otherLocales} {keyPath} />
209-
{/if}
210-
{#if canRevert}
211-
<MenuItem
212-
label={$_('revert_changes')}
213-
disabled={equal(currentValue, originalValue)}
214-
onclick={() => {
215-
revertChanges({ locale, keyPath });
216-
}}
217-
/>
218-
{/if}
219-
</Menu>
220-
{/snippet}
221-
</MenuButton>
222-
{/if}
178+
{#if !readonly && required}
179+
<div class="required" aria-label={$_('required')}>*</div>
180+
{/if}
181+
<Spacer flex />
182+
{#if canCopy && ['markdown', 'string', 'text', 'list', 'object'].includes(widgetName)}
183+
<TranslateButton size="small" {locale} {otherLocales} {keyPath} />
184+
{/if}
185+
{#if canCopy || canRevert}
186+
<MenuButton
187+
variant="ghost"
188+
size="small"
189+
iconic
190+
popupPosition="bottom-right"
191+
aria-label={$_('show_field_options')}
192+
>
193+
{#snippet popup()}
194+
<Menu aria-label={$_('field_options')}>
195+
{#if canCopy}
196+
<CopyMenuItems {locale} {otherLocales} {keyPath} />
197+
{/if}
198+
{#if canRevert}
199+
<MenuItem
200+
label={$_('revert_changes')}
201+
disabled={equal(currentValue, originalValue)}
202+
onclick={() => {
203+
revertChanges({ locale, keyPath });
204+
}}
205+
/>
206+
{/if}
207+
</Menu>
208+
{/snippet}
209+
</MenuButton>
223210
{/if}
224211
</header>
225212
{#if !readonly && comment}
@@ -301,7 +288,7 @@
301288
{fieldId}
302289
{fieldLabel}
303290
{fieldConfig}
304-
bind:currentValue={$entryDraft[valueStoreKey][locale][keyPath]}
291+
bind:currentValue={$entryDraft.currentValues[locale][keyPath]}
305292
{readonly}
306293
{required}
307294
{invalid}

‎src/lib/components/contents/details/widgets/code/code-editor.svelte‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
-->
66
<script>
77
import { CodeEditor } from '@sveltia/ui';
8-
import { getContext, untrack } from 'svelte';
8+
import { untrack } from 'svelte';
99
import { entryDraft } from '$lib/services/contents/draft';
1010
1111
/**
12-
* @import { FieldEditorContext, WidgetEditorProps } from '$lib/types/private';
12+
* @import { WidgetEditorProps } from '$lib/types/private';
1313
* @import { CodeField } from '$lib/types/public';
1414
*/
1515
@@ -19,9 +19,6 @@
1919
* @property {string | {} | undefined} currentValue Field value.
2020
*/
2121
22-
/** @type {FieldEditorContext} */
23-
const { valueStoreKey = 'currentValues' } = getContext('field-editor') ?? {};
24-
2522
/** @type {WidgetEditorProps & Props} */
2623
let {
2724
/* eslint-disable prefer-const */
@@ -45,7 +42,7 @@
4542
output_code_only: outputCodeOnly = false,
4643
keys: outputKeys = { code: 'code', lang: 'lang' },
4744
} = $derived(fieldConfig);
48-
const valueMap = $derived($state.snapshot($entryDraft?.[valueStoreKey][locale]) ?? {});
45+
const valueMap = $derived($state.snapshot($entryDraft?.currentValues[locale]) ?? {});
4946
const codeKeyPath = $derived(`${keyPath}.${outputKeys.code}`);
5047
const langKeyPath = $derived(`${keyPath}.${outputKeys.lang}`);
5148
@@ -89,11 +86,11 @@
8986
currentValue = {};
9087
9188
if (valueMap[codeKeyPath] !== code) {
92-
$entryDraft[valueStoreKey][locale][codeKeyPath] = code;
89+
$entryDraft.currentValues[locale][codeKeyPath] = code;
9390
}
9491
9592
if (valueMap[langKeyPath] !== lang) {
96-
$entryDraft[valueStoreKey][locale][langKeyPath] = lang;
93+
$entryDraft.currentValues[locale][langKeyPath] = lang;
9794
}
9895
}
9996
};

‎src/lib/components/contents/details/widgets/compute/compute-editor.svelte‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
-->
66
<script>
77
import { TextInput } from '@sveltia/ui';
8-
import { getContext, untrack } from 'svelte';
8+
import { untrack } from 'svelte';
99
import { entryDraft } from '$lib/services/contents/draft';
1010
import { getFieldDisplayValue } from '$lib/services/contents/entry/fields';
1111
import { getListFormatter } from '$lib/services/contents/i18n';
1212
1313
/**
14-
* @import { FieldEditorContext, WidgetEditorProps } from '$lib/types/private';
14+
* @import { WidgetEditorProps } from '$lib/types/private';
1515
* @import { ComputeField } from '$lib/types/public';
1616
*/
1717
@@ -21,9 +21,6 @@
2121
* @property {string | number | undefined} currentValue Field value.
2222
*/
2323
24-
/** @type {FieldEditorContext} */
25-
const { valueStoreKey = 'currentValues' } = getContext('field-editor') ?? {};
26-
2724
/** @type {WidgetEditorProps & Props} */
2825
let {
2926
/* eslint-disable prefer-const */
@@ -42,7 +39,7 @@
4239
const isIndexFile = $derived($entryDraft?.isIndexFile ?? false);
4340
const collectionName = $derived($entryDraft?.collectionName ?? '');
4441
const fileName = $derived($entryDraft?.fileName);
45-
const valueMap = $derived($state.snapshot($entryDraft?.[valueStoreKey][locale]) ?? {});
42+
const valueMap = $derived($state.snapshot($entryDraft?.currentValues[locale]) ?? {});
4643
const listFormatter = $derived(getListFormatter(locale));
4744
4845
/**

‎src/lib/components/contents/details/widgets/key-value/key-value-editor.svelte‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<script>
77
import { Button, Icon, TextInput } from '@sveltia/ui';
88
import equal from 'fast-deep-equal';
9-
import { getContext, untrack } from 'svelte';
9+
import { untrack } from 'svelte';
1010
import { _ } from 'svelte-i18n';
1111
import ValidationError from '$lib/components/contents/details/editor/validation-error.svelte';
1212
import { entryDraft } from '$lib/services/contents/draft';
@@ -18,7 +18,7 @@
1818
1919
/**
2020
* @import { Writable } from 'svelte/store';
21-
* @import { EntryDraft, FieldEditorContext, WidgetEditorProps } from '$lib/types/private';
21+
* @import { EntryDraft, WidgetEditorProps } from '$lib/types/private';
2222
* @import { KeyValueField } from '$lib/types/public';
2323
*/
2424
@@ -28,9 +28,6 @@
2828
* @property {Record<string, string> | undefined} currentValue Field value.
2929
*/
3030
31-
/** @type {FieldEditorContext} */
32-
const { valueStoreKey = 'currentValues' } = getContext('field-editor') ?? {};
33-
3431
/** @type {WidgetEditorProps & Props} */
3532
let {
3633
/* eslint-disable prefer-const */
@@ -77,9 +74,9 @@
7774
edited = updatedPairs.map(() => false);
7875
}
7976
80-
if (!pairs.length && $entryDraft[valueStoreKey][locale][keyPath] !== null) {
77+
if (!pairs.length && $entryDraft.currentValues[locale][keyPath] !== null) {
8178
// Enable validation
82-
$entryDraft[valueStoreKey][locale][keyPath] = null;
79+
$entryDraft.currentValues[locale][keyPath] = null;
8380
}
8481
};
8582
@@ -91,7 +88,7 @@
9188
return;
9289
}
9390
94-
Object.entries($entryDraft[valueStoreKey]).forEach(([_locale, content]) => {
91+
Object.entries($entryDraft.currentValues).forEach(([_locale, content]) => {
9592
if (_locale === locale || i18n === 'duplicate') {
9693
// Remove `null` added for validation
9794
delete content[keyPath];
@@ -133,7 +130,7 @@
133130
};
134131
135132
$effect(() => {
136-
void [$state.snapshot($entryDraft?.[valueStoreKey][locale])];
133+
void [$state.snapshot($entryDraft?.currentValues[locale])];
137134
138135
untrack(() => {
139136
updatePairs();

‎src/lib/components/contents/details/widgets/list/list-editor.svelte‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
import { sleep } from '@sveltia/utils/misc';
1919
import { escapeRegExp } from '@sveltia/utils/string';
2020
import { unflatten } from 'flat';
21-
import { getContext, onMount, untrack } from 'svelte';
21+
import { onMount, untrack } from 'svelte';
2222
import { _ } from 'svelte-i18n';
2323
import FieldEditor from '$lib/components/contents/details/editor/field-editor.svelte';
2424
import AddItemButton from '$lib/components/contents/details/widgets/object/add-item-button.svelte';
@@ -35,7 +35,7 @@
3535
import { isSmallScreen } from '$lib/services/user/env';
3636
3737
/**
38-
* @import { EntryDraft, FieldEditorContext, WidgetEditorProps } from '$lib/types/private';
38+
* @import { EntryDraft, WidgetEditorProps } from '$lib/types/private';
3939
* @import { ListField } from '$lib/types/public';
4040
*/
4141
@@ -45,9 +45,6 @@
4545
* @property {string[]} currentValue Field value.
4646
*/
4747
48-
/** @type {FieldEditorContext} */
49-
const { valueStoreKey = 'currentValues' } = getContext('field-editor') ?? {};
50-
5148
/** @type {WidgetEditorProps & Props} */
5249
let {
5350
/* eslint-disable prefer-const */
@@ -96,7 +93,7 @@
9693
const fileName = $derived($entryDraft?.fileName);
9794
const { defaultLocale } = $derived((collectionFile ?? collection)?._i18n ?? DEFAULT_I18N_CONFIG);
9895
const isDuplicateField = $derived(locale !== defaultLocale && i18n === 'duplicate');
99-
const valueMap = $derived($state.snapshot($entryDraft?.[valueStoreKey][locale]) ?? {});
96+
const valueMap = $derived($state.snapshot($entryDraft?.currentValues[locale]) ?? {});
10097
const parentExpandedKeyPath = $derived(`${keyPath}#`);
10198
const parentExpanded = $derived($entryDraft?.expanderStates?._[parentExpandedKeyPath] ?? true);
10299
/** @type {Record<string, any>[]} */
@@ -152,20 +149,19 @@
152149
const updateSimpleList = () => {
153150
const normalizedValue = inputValue.split(/\n/g);
154151
155-
Object.keys($entryDraft?.[valueStoreKey] ?? {}).forEach((_locale) => {
152+
Object.keys($entryDraft?.currentValues ?? {}).forEach((_locale) => {
156153
if (i18n !== 'duplicate' && _locale !== locale) {
157154
return;
158155
}
159156
160-
Object.keys($entryDraft?.[valueStoreKey][_locale] ?? {}).forEach((_keyPath) => {
157+
Object.keys($entryDraft?.currentValues[_locale] ?? {}).forEach((_keyPath) => {
161158
if (_keyPath.match(`^${escapeRegExp(keyPath)}\\.\\d+$`)) {
162-
delete $entryDraft?.[valueStoreKey][_locale][_keyPath];
159+
delete $entryDraft?.currentValues[_locale][_keyPath];
163160
}
164161
});
165162
166163
normalizedValue.forEach((val, index) => {
167-
/** @type {EntryDraft} */ ($entryDraft)[valueStoreKey][_locale][`${keyPath}.${index}`] =
168-
val;
164+
/** @type {EntryDraft} */ ($entryDraft).currentValues[_locale][`${keyPath}.${index}`] = val;
169165
});
170166
});
171167
};
@@ -176,7 +172,7 @@
176172
* See {@link updateListField}.
177173
*/
178174
const updateComplexList = (manipulate) => {
179-
Object.keys($entryDraft?.[valueStoreKey] ?? {}).forEach((_locale) => {
175+
Object.keys($entryDraft?.currentValues ?? {}).forEach((_locale) => {
180176
if (!(i18n !== 'duplicate' && _locale !== locale)) {
181177
updateListField(_locale, keyPath, manipulate);
182178
}

0 commit comments

Comments
 (0)