Skip to content

Commit bd8a674

Browse files
lexoyolexoyo
committed
chore: improve liquid filters (ui, detection of types, default values)
1 parent 36a36d1 commit bd8a674

File tree

2 files changed

+85
-36
lines changed

2 files changed

+85
-36
lines changed

‎src/filters/liquid.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ test('is string', () => {
2020

2121
test('is date', () => {
2222
expect(isDate(null)).toBe(false)
23-
expect(isDate(testFields.stringField1)).toBe(false)
23+
expect(isDate(testFields.stringField1)).toBe(true)
2424
expect(isDate(testFields.dateField1)).toBe(true)
2525
expect(isDate(testFields.dateField2, false)).toBe(true)
2626
expect(isDate(testFields.dateField2)).toBe(false)

‎src/filters/liquid.ts‎

Lines changed: 84 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import { Component, Editor } from 'grapesjs'
2626
function isNumber(field: Field | null, scalarOnly = true): boolean {
2727
if (!field || (scalarOnly && field.kind !== 'scalar')) return false
2828
const typeIds = field.typeIds.map(typeId => typeId.toLowerCase())
29-
return typeIds.includes('number') || typeIds.includes('int')
29+
return ['number','int','float','decimal','bigint','double','long','short','byte','integer','numeric'].some(t => typeIds.includes(t))
3030
}
3131

3232
/**
@@ -35,7 +35,13 @@ function isNumber(field: Field | null, scalarOnly = true): boolean {
3535
*/
3636
export function isString(field: Field | null, scalarOnly = true): boolean {
3737
if (!field || (scalarOnly && field.kind !== 'scalar')) return false
38-
return field.typeIds.map(typeId => typeId.toLowerCase()).includes('string')
38+
return field.typeIds
39+
.map(typeId => typeId.toLowerCase())
40+
.some(typeId =>
41+
typeId.includes('string') ||
42+
// In WP for example
43+
typeId === 'id'
44+
)
3945
}
4046

4147
/**
@@ -44,7 +50,19 @@ export function isString(field: Field | null, scalarOnly = true): boolean {
4450
*/
4551
export function isDate(field: Field | null, scalarOnly = true): boolean {
4652
if (!field || (scalarOnly && field.kind !== 'scalar')) return false
47-
return field.typeIds.map(typeId => typeId.toLowerCase()).some(typeId => ['date', 'instant'].includes(typeId))
53+
return field.typeIds
54+
.map(typeId => typeId.toLowerCase())
55+
.some(typeId =>
56+
typeId.includes('date') ||
57+
typeId.includes('datetime') ||
58+
typeId.includes('time') ||
59+
typeId.includes('timestamp') ||
60+
typeId.includes('instant') ||
61+
typeId.includes('timestamptz') ||
62+
typeId.includes('zoned') ||
63+
// In WP for example
64+
typeId.includes('string')
65+
)
4866
}
4967

5068
/**
@@ -409,7 +427,7 @@ export default function(editor: Editor): Filter[] {
409427
},
410428
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
411429
<label>Index
412-
<input type="number" name="index" placeholder="Index" .value=${options.index}/>
430+
<input type="number" name="index" placeholder="Index" .value=${options.index || 0}/>
413431
</label>
414432
`,
415433
}, {
@@ -495,7 +513,7 @@ export default function(editor: Editor): Filter[] {
495513
},
496514
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
497515
<label>Value
498-
<input type="number" name="value" placeholder="Value" .value=${options.value}/>
516+
<input type="number" name="value" placeholder="Value" .value=${options.value || 0}/>
499517
</label>
500518
`,
501519
}, {
@@ -510,7 +528,7 @@ export default function(editor: Editor): Filter[] {
510528
},
511529
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
512530
<label>Value
513-
<input type="number" name="value" placeholder="Value" .value=${options.value}/>
531+
<input type="number" name="value" placeholder="Value" .value=${options.value || 0}/>
514532
</label>
515533
`,
516534
}, {
@@ -525,7 +543,7 @@ export default function(editor: Editor): Filter[] {
525543
},
526544
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
527545
<label>Value
528-
<input type="number" name="value" placeholder="Value" .value=${options.value}/>
546+
<input type="number" name="value" placeholder="Value" .value=${options.value || 0}/>
529547
</label>
530548
`,
531549
}, {
@@ -540,7 +558,7 @@ export default function(editor: Editor): Filter[] {
540558
},
541559
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
542560
<label>Value
543-
<input type="number" name="value" placeholder="Value" .value=${options.value}/>
561+
<input type="number" name="value" placeholder="Value" .value=${options.value || 0}/>
544562
</label>
545563
`,
546564
}, {
@@ -557,7 +575,7 @@ export default function(editor: Editor): Filter[] {
557575
},
558576
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
559577
<label>Value
560-
<input type="number" name="value" placeholder="Value" .value=${options.value}/>
578+
<input type="number" name="value" placeholder="Value" .value=${options.value || 0}/>
561579
</label>
562580
`,
563581
}, {
@@ -604,7 +622,7 @@ export default function(editor: Editor): Filter[] {
604622
},
605623
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
606624
<label>Value
607-
<input type="number" name="value" placeholder="Value" .value=${options.value}/>
625+
<input type="number" name="value" placeholder="Value" .value=${options.value || 0}/>
608626
</label>
609627
`,
610628
}, {
@@ -619,7 +637,7 @@ export default function(editor: Editor): Filter[] {
619637
},
620638
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
621639
<label>Value
622-
<input type="number" name="value" placeholder="Value" .value=${options.value}/>
640+
<input type="number" name="value" placeholder="Value" .value=${options.value || 0}/>
623641
</label>
624642
`,
625643
}, {
@@ -698,7 +716,7 @@ export default function(editor: Editor): Filter[] {
698716
},
699717
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
700718
<label>Length
701-
<input type="number" name="length" placeholder="Length" .value=${options.length}/>
719+
<input type="number" name="length" placeholder="Length" .value=${options.length || 50}/>
702720
</label>
703721
`,
704722
}, {
@@ -713,7 +731,7 @@ export default function(editor: Editor): Filter[] {
713731
},
714732
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
715733
<label>Length
716-
<input type="number" name="length" placeholder="Length" .value=${options.length}/>
734+
<input type="number" name="length" placeholder="Length" .value=${options.length || 15}/>
717735
</label>
718736
`,
719737
}, {
@@ -733,17 +751,48 @@ export default function(editor: Editor): Filter[] {
733751
},
734752
options: {
735753
format: '%a, %b %d, %y', // Fri, Jul 17, 15
736-
timeZone: '',
754+
timeZone: 'UTC',
737755
},
738756
optionsKeys: ['format', 'timeZone'],
739757
quotedOptions: ['format', 'timeZone'],
740758
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
741-
<label>Format
742-
<input type="text" name="format" placeholder="Format" .value=${options.format || '%a, %b %d, %y'}/>
743-
</label>
744-
<label>Time zone
745-
<input type="text" name="timeZone" placeholder="Time zone" .value=${options.timeZone || '' }/>
746-
</label>
759+
<div>
760+
<label>Format<br>
761+
<input type="text" name="format" placeholder="Format" .value=${options.format || '%a, %b %d, %y'}/>
762+
</label>
763+
</div>
764+
<br><br>
765+
<div>
766+
<label>Timezone<br>
767+
<input type="text" name="timeZone" aria-describedby="tz-help" list="tz-list" placeholder="e.g. Europe/Paris, UTC, America/New_York" .value=${options.timeZone || 'UTC' }/>
768+
</label>
769+
</div>
770+
<datalist id="tz-list">
771+
<option value="UTC"></option>
772+
<option value="Europe/Paris"></option>
773+
<option value="Europe/London"></option>
774+
<option value="America/New_York"></option>
775+
<option value="America/Los_Angeles"></option>
776+
<option value="America/Chicago"></option>
777+
<option value="Asia/Tokyo"></option>
778+
<option value="Asia/Shanghai"></option>
779+
<option value="Asia/Kolkata"></option>
780+
<option value="Australia/Sydney"></option>
781+
<option value="Africa/Johannesburg"></option>
782+
<option value="America/Sao_Paulo"></option>
783+
</datalist>
784+
<details id="tz-help">
785+
<summary>Timezone help</summary>
786+
<p>Use a valid IANA time zone.</p>
787+
<ul>
788+
<li>Expected format: IANA time zone (Area/City)</li>
789+
<li>Examples: Europe/Paris, UTC, America/New_York</li>
790+
<li>Required field — cannot be empty</li>
791+
</ul>
792+
<p>See the recommended list:
793+
<a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones#List" target="_blank" rel="noopener">IANA TZ database time zones</a>.
794+
</p>
795+
</details>
747796
`,
748797
}, {
749798
type: 'filter',
@@ -760,10 +809,10 @@ export default function(editor: Editor): Filter[] {
760809
optionsKeys: ['search', 'replace'],
761810
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
762811
<label>Search
763-
<input type="text" name="search" placeholder="Search" .value=${options.search}/>
812+
<input type="text" name="search" placeholder="Search" .value=${options.search || ''}/>
764813
</label>
765814
<label>Replace
766-
<input type="text" name="replace" placeholder="Replace" .value=${options.replace}/>
815+
<input type="text" name="replace" placeholder="Replace" .value=${options.replace || ''}/>
767816
</label>
768817
`,
769818
}, {
@@ -781,10 +830,10 @@ export default function(editor: Editor): Filter[] {
781830
optionsKeys: ['search', 'replace'],
782831
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
783832
<label>Search
784-
<input type="text" name="search" placeholder="Search" .value=${options.search}/>
833+
<input type="text" name="search" placeholder="Search" .value=${options.search || ''}/>
785834
</label>
786835
<label>Replace
787-
<input type="text" name="replace" placeholder="Replace" .value=${options.replace}/>
836+
<input type="text" name="replace" placeholder="Replace" .value=${options.replace || ''}/>
788837
</label>
789838
`,
790839
}, {
@@ -806,10 +855,10 @@ export default function(editor: Editor): Filter[] {
806855
optionsKeys: ['search', 'replace'],
807856
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
808857
<label>Search
809-
<input type="text" name="search" placeholder="Search" .value=${options.search}/>
858+
<input type="text" name="search" placeholder="Search" .value=${options.search || ''}/>
810859
</label>
811860
<label>Replace
812-
<input type="text" name="replace" placeholder="Replace" .value=${options.replace}/>
861+
<input type="text" name="replace" placeholder="Replace" .value=${options.replace || ''}/>
813862
</label>
814863
`,
815864
}, {
@@ -820,13 +869,13 @@ export default function(editor: Editor): Filter[] {
820869
output: type => type,
821870
apply: (str, options) => (str as string).replace(options.search as string, ''),
822871
options: {
823-
search: '',
872+
search: 'delete this text',
824873
},
825874
quotedOptions: ['search'],
826875
optionsKeys: ['search'],
827876
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
828-
<label>Search
829-
<input type="text" name="search" placeholder="Search" .value=${options.search}/>
877+
<label>Text to remove
878+
<input type="text" name="search" placeholder="Delete this text" .value=${options.search || 'delete this text'}/>
830879
</label>
831880
`,
832881
}, {
@@ -837,13 +886,13 @@ export default function(editor: Editor): Filter[] {
837886
output: type => type,
838887
apply: (str, options) => (str as string).replace(options.search as string, ''),
839888
options: {
840-
search: '',
889+
search: 'delete this text',
841890
},
842891
quotedOptions: ['search'],
843892
optionsKeys: ['search'],
844893
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
845-
<label>Search
846-
<input type="text" name="search" placeholder="Search" .value=${options.search}/>
894+
<label>Text to remove
895+
<input type="text" name="search" placeholder="Delete this text" .value=${options.search || 'delete this text'}/>
847896
</label>
848897
`,
849898
}, {
@@ -858,13 +907,13 @@ export default function(editor: Editor): Filter[] {
858907
return (str as string).slice(0, index) + (str as string).slice(index + (options.search as string).length)
859908
},
860909
options: {
861-
search: '',
910+
search: 'delete this text',
862911
},
863912
quotedOptions: ['search'],
864913
optionsKeys: ['search'],
865914
optionsForm: (selected: Component, field: Field | null, options: Options) => html`
866-
<label>Search
867-
<input type="text" name="search" placeholder="Search" .value=${options.search}/>
915+
<label>Text to remove
916+
<input type="text" name="search" placeholder="Delete this text" .value=${options.search || 'delete this text'}/>
868917
</label>
869918
`,
870919
}, {

0 commit comments

Comments
 (0)