tomas/pocketbase
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added option to control the default TinyMCE urls convert behavior

Browse Source
This commit is contained in:
Gani Georgiev
2023-08-22 14:28:25 +03:00
parent 9c0d952543
commit 2863763a27
39 changed files with 248 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/collections/schema/SchemaField.svelte
+32 -38
View File
@@ -198,49 +198,43 @@
{#if interactive && showOptions}
<div class="schema-field-options" transition:slide|local={{ duration: 150 }}>
<div class="grid grid-sm">
<div class="col-sm-12 hidden-empty">
<slot name="options" {interactive} {hasErrors} />
</div>
<div class="hidden-empty m-b-sm">
<slot name="options" {interactive} {hasErrors} />
</div>
<slot name="beforeNonempty" {interactive} {hasErrors} />
<div class="schema-field-options-footer">
<Field class="form-field form-field-toggle" name="requried" let:uniqueId>
<input type="checkbox" id={uniqueId} bind:checked={field.required} />
<label for={uniqueId}>
<span class="txt">{requiredLabel}</span>
<i
class="ri-information-line link-hint"
use:tooltip={{
text: `Requires the field value NOT to be ${CommonHelper.zeroDefaultStr(
field
)}.`,
}}
/>
</label>
</Field>
<div class="col-sm-4">
<Field class="form-field form-field-toggle m-0" name="requried" let:uniqueId>
<input type="checkbox" id={uniqueId} bind:checked={field.required} />
<label for={uniqueId}>
<span class="txt">{requiredLabel}</span>
<i
class="ri-information-line link-hint"
use:tooltip={{
text: `Requires the field value NOT to be ${CommonHelper.zeroDefaultStr(
field
)}.`,
}}
/>
</label>
</Field>
</div>
<Field class="form-field form-field-toggle" name="presentable" let:uniqueId>
<input type="checkbox" id={uniqueId} bind:checked={field.presentable} />
<label for={uniqueId}>
<span class="txt">Presentable</span>
<i
class="ri-information-line link-hint"
use:tooltip={{
text: `Whether the field should be preferred in the Admin UI relation listings.`,
}}
/>
</label>
</Field>
<div class="col-sm-4">
<Field class="form-field form-field-toggle m-0" name="presentable" let:uniqueId>
<input type="checkbox" id={uniqueId} bind:checked={field.presentable} />
<label for={uniqueId}>
<span class="txt">Presentable</span>
<i
class="ri-information-line link-hint"
use:tooltip={{
text: `Whether the field should be preferred in the Admin UI relation listings.`,
}}
/>
</label>
</Field>
</div>
<slot name="afterNonempty" {interactive} {hasErrors} />
<slot name="optionsFooter" {interactive} {hasErrors} />
{#if !field.toDelete}
<div class="col-sm-4 m-l-auto txt-right">
<div class="m-l-auto txt-right">
<div class="flex-fill" />
<div class="inline-flex flex-gap-sm flex-nowrap">
<button
ui/src/components/collections/schema/SchemaFieldEditor.svelte
+29 -1
View File
@@ -1,8 +1,36 @@
<script>
import CommonHelper from "@/utils/CommonHelper";
import tooltip from "@/actions/tooltip";
import Field from "@/components/base/Field.svelte";
import SchemaField from "@/components/collections/schema/SchemaField.svelte";
export let field;
export let key = "";
$: if (CommonHelper.isEmpty(field.options)) {
loadDefaults();
}
function loadDefaults() {
field.options = {
convertUrls: false,
};
}
</script>
<SchemaField bind:field {key} on:rename on:remove {...$$restProps} />
<SchemaField bind:field {key} on:rename on:remove {...$$restProps}>
<svelte:fragment slot="optionsFooter">
<Field class="form-field form-field-toggle" name="schema.{key}.options.convertUrls" let:uniqueId>
<input type="checkbox" id={uniqueId} bind:checked={field.options.convertUrls} />
<label for={uniqueId}>
<span class="txt">Strip urls domain</span>
<i
class="ri-information-line link-hint"
use:tooltip={{
text: `This could help making the editor content more portable between environments since there will be no local base url to replace.`,
}}
/>
</label>
</Field>
</svelte:fragment>
</SchemaField>
ui/src/components/collections/schema/SchemaFieldFile.svelte
+14 -20
View File
@@ -265,27 +265,21 @@
</div>
</svelte:fragment>
<svelte:fragment slot="afterNonempty">
<div class="col-sm-4">
<Field
class="form-field form-field-toggle m-0"
name="schema.{key}.options.protected"
let:uniqueId
<svelte:fragment slot="optionsFooter">
<Field class="form-field form-field-toggle" name="schema.{key}.options.protected" let:uniqueId>
<input type="checkbox" id={uniqueId} bind:checked={field.options.protected} />
<label for={uniqueId}>
<span class="txt">Protected</span>
</label>
<a
href={import.meta.env.PB_PROTECTED_FILE_DOCS}
class="toggle-info txt-sm txt-hint m-l-5"
target="_blank"
rel="noopener"
>
<input type="checkbox" id={uniqueId} bind:checked={field.options.protected} />
<label for={uniqueId}>
<span class="txt">Protected</span>
</label>
<a
href={import.meta.env.PB_PROTECTED_FILE_DOCS}
class="toggle-info txt-sm txt-hint m-l-5"
target="_blank"
rel="noopener"
>
(Learn more)
</a>
</Field>
</div>
(Learn more)
</a>
</Field>
</svelte:fragment>
</SchemaField>
ui/src/components/records/fields/EditorField.svelte
+6 -1
View File
@@ -5,6 +5,11 @@
export let field;
export let value = undefined;
$: conf = Object.assign(CommonHelper.defaultEditorOptions(), {
convert_urls: field.options?.convertUrls,
relative_urls: false,
});
</script>
<Field class="form-field {field.required ? 'required' : ''}" name={field.name} let:uniqueId>
@@ -15,7 +20,7 @@
<TinyMCE
id={uniqueId}
scriptSrc="{import.meta.env.BASE_URL}libs/tinymce/tinymce.min.js"
conf={CommonHelper.defaultEditorOptions()}
{conf}
bind:value
/>
</Field>
ui/src/scss/_schema_field.scss
+13
View File
@@ -83,6 +83,19 @@
border-bottom-right-radius: var(--baseRadius);
}
.schema-field-options-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
min-width: 0;
gap: var(--baseSpacing);
.form-field {
margin: 0;
width: auto;
}
}
.schema-field {
@extend %block;
position: relative;