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

use a custom tinymce svelte component and other minor optimizations

Browse Source
This commit is contained in:
Gani Georgiev
2023-10-15 14:04:44 +03:00
parent c0fa53a2ab
commit 8868fa9ae6
106 changed files with 541 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/records/RecordFieldValue.svelte
+2 -4
View File
@@ -5,7 +5,7 @@
import CopyIcon from "@/components/base/CopyIcon.svelte";
import RecordFileThumb from "@/components/records/RecordFileThumb.svelte";
import RecordInfo from "@/components/records/RecordInfo.svelte";
import TinyMCE from "@tinymce/tinymce-svelte";
import TinyMCE from "@/components/base/TinyMCE.svelte";
export let record;
export let field;
@@ -52,19 +52,17 @@
</span>
{:else}
<TinyMCE
scriptSrc="{import.meta.env.BASE_URL}libs/tinymce/tinymce.min.js"
cssClass="tinymce-preview"
conf={{
branding: false,
promotion: false,
menubar: false,
min_height: 30,
statusbar: false,
min_height: 30,
height: 59,
max_height: 500,
autoresize_bottom_margin: 5,
resize: false,
skin: "pocketbase",
content_style: "body { font-size: 14px }",
toolbar: "",
plugins: ["autoresize"],
ui/src/components/records/RecordUpsertPanel.svelte
+41 -33
View File
@@ -34,8 +34,8 @@
export let collection;
let recordPanel;
let original = null;
let record = null;
let original = {};
let record = {};
let initialDraft = null;
let isSaving = false;
let confirmHide = false; // prevent close recursion
@@ -472,47 +472,55 @@
{isNew ? "New" : "Edit"}
<strong>{collection?.name}</strong> record
</h4>
{/if}
{#if !isNew}
<div class="flex-fill" />
<button type="button" aria-label="More" class="btn btn-sm btn-circle btn-transparent flex-gap-0">
<i class="ri-more-line" />
<Toggler class="dropdown dropdown-right dropdown-nowrap">
{#if isAuthCollection && !original.verified && original.email}
{#if !isNew}
<div class="flex-fill" />
<button
type="button"
aria-label="More"
class="btn btn-sm btn-circle btn-transparent flex-gap-0"
>
<i class="ri-more-line" />
<Toggler class="dropdown dropdown-right dropdown-nowrap">
{#if isAuthCollection && !original.verified && original.email}
<button
type="button"
class="dropdown-item closable"
on:click={() => sendVerificationEmail()}
>
<i class="ri-mail-check-line" />
<span class="txt">Send verification email</span>
</button>
{/if}
{#if isAuthCollection && original.email}
<button
type="button"
class="dropdown-item closable"
on:click={() => sendPasswordResetEmail()}
>
<i class="ri-mail-lock-line" />
<span class="txt">Send password reset email</span>
</button>
{/if}
<button
type="button"
class="dropdown-item closable"
on:click={() => sendVerificationEmail()}
on:click={() => duplicateConfirm()}
>
<i class="ri-mail-check-line" />
<span class="txt">Send verification email</span>
<i class="ri-file-copy-line" />
<span class="txt">Duplicate</span>
</button>
{/if}
{#if isAuthCollection && original.email}
<button
type="button"
class="dropdown-item closable"
on:click={() => sendPasswordResetEmail()}
class="dropdown-item txt-danger closable"
on:click|preventDefault|stopPropagation={() => deleteConfirm()}
>
<i class="ri-mail-lock-line" />
<span class="txt">Send password reset email</span>
<i class="ri-delete-bin-7-line" />
<span class="txt">Delete</span>
</button>
{/if}
<button type="button" class="dropdown-item closable" on:click={() => duplicateConfirm()}>
<i class="ri-file-copy-line" />
<span class="txt">Duplicate</span>
</button>
<button
type="button"
class="dropdown-item txt-danger closable"
on:click|preventDefault|stopPropagation={() => deleteConfirm()}
>
<i class="ri-delete-bin-7-line" />
<span class="txt">Delete</span>
</button>
</Toggler>
</button>
</Toggler>
</button>
{/if}
{/if}
{#if isAuthCollection && !isNew}
ui/src/components/records/fields/EditorField.svelte
+6 -3
View File
@@ -1,9 +1,9 @@
<script>
import { onMount } from "svelte";
import TinyMCE from "@tinymce/tinymce-svelte";
import CommonHelper from "@/utils/CommonHelper";
import ApiClient from "@/utils/ApiClient";
import Field from "@/components/base/Field.svelte";
import TinyMCE from "@/components/base/TinyMCE.svelte";
import RecordFilePicker from "@/components/records/RecordFilePicker.svelte";
export let field;
@@ -25,7 +25,11 @@
value = "";
}
onMount(() => {
onMount(async () => {
if (typeof value == "undefined") {
value = "";
}
// slight "offset" the editor mount to avoid blocking the rendering of the other fields
mountedTimeoutId = setTimeout(() => {
mounted = true;
@@ -45,7 +49,6 @@
{#if mounted}
<TinyMCE
id={uniqueId}
scriptSrc="{import.meta.env.BASE_URL}libs/tinymce/tinymce.min.js"
{conf}
bind:value
on:init={(initEvent) => {