[#370] added rich text editor field

ui/src/components/base/Accordion.svelte

@@ -31,6 +31,10 @@
         }, 200);
     }
 
+    export function isExpanded() {
+        return !!active;
+    }
+
     export function expand() {
         collapseSiblings();
         active = true;

ui/src/components/collections/FieldAccordion.svelte

@@ -14,6 +14,7 @@
     import BoolOptions from "@/components/collections/schema/BoolOptions.svelte";
     import EmailOptions from "@/components/collections/schema/EmailOptions.svelte";
     import UrlOptions from "@/components/collections/schema/UrlOptions.svelte";
+    import EditorOptions from "@/components/collections/schema/EditorOptions.svelte";
     import DateOptions from "@/components/collections/schema/DateOptions.svelte";
     import SelectOptions from "@/components/collections/schema/SelectOptions.svelte";
     import JsonOptions from "@/components/collections/schema/JsonOptions.svelte";
@@ -262,6 +263,8 @@
                     <EmailOptions {key} bind:options={field.options} />
                 {:else if field.type === "url"}
                     <UrlOptions {key} bind:options={field.options} />
+                {:else if field.type === "editor"}
+                    <EditorOptions {key} bind:options={field.options} />
                 {:else if field.type === "date"}
                     <DateOptions {key} bind:options={field.options} />
                 {:else if field.type === "select"}

ui/src/components/collections/schema/EditorOptions.svelte

@@ -0,0 +1,6 @@
+<script>
+    // svelte-ignore unused-export-let
+    export let key = "";
+    // svelte-ignore unused-export-let
+    export let options = {};
+</script>

ui/src/components/collections/schema/FieldTypeSelect.svelte

@@ -9,10 +9,15 @@
 
     const types = [
         {
-            label: "Text",
+            label: "Plain text",
             value: "text",
             icon: CommonHelper.getFieldTypeIcon("text"),
         },
+        {
+            label: "Rich editor",
+            value: "editor",
+            icon: CommonHelper.getFieldTypeIcon("editor"),
+        },
         {
             label: "Number",
             value: "number",
@@ -43,11 +48,6 @@
             value: "select",
             icon: CommonHelper.getFieldTypeIcon("select"),
         },
-        {
-            label: "JSON",
-            value: "json",
-            icon: CommonHelper.getFieldTypeIcon("json"),
-        },
         {
             label: "File",
             value: "file",
@@ -58,12 +58,12 @@
             value: "relation",
             icon: CommonHelper.getFieldTypeIcon("relation"),
         },
+        {
+            label: "JSON",
+            value: "json",
+            icon: CommonHelper.getFieldTypeIcon("json"),
+        },
     ];
 </script>
 
-<ObjectSelect
-    class="field-type-select {classes}"
-    items={types}
-    bind:keyOfSelected={value}
-    {...$$restProps}
-/>
+<ObjectSelect class="field-type-select {classes}" items={types} bind:keyOfSelected={value} {...$$restProps} />

ui/src/components/records/RecordFieldCell.svelte

@@ -11,7 +11,7 @@
     // rough text cut to avoid rendering large chunk of texts
     function cutText(text) {
         text = text || "";
-        return text.length > 200 ? text.substring(0, 200) : text;
+        return text.length > 150 ? text.substring(0, 150) : text;
     }
 </script>
 
@@ -31,8 +31,12 @@
             use:tooltip={"Open in new tab"}
             on:click|stopPropagation
         >
-            {record[field.name]}
+            {cutText(record[field.name])}
         </a>
+    {:else if field.type === "editor"}
+        <span class="txt txt-ellipsis">
+            {cutText(CommonHelper.plainText(record[field.name]))}
+        </span>
     {:else if field.type === "date"}
         <FormattedDate date={record[field.name]} />
     {:else if field.type === "json"}

ui/src/components/records/RecordUpsertPanel.svelte

@@ -21,6 +21,7 @@
     import JsonField from "@/components/records/fields/JsonField.svelte";
     import FileField from "@/components/records/fields/FileField.svelte";
     import RelationField from "@/components/records/fields/RelationField.svelte";
+    import EditorField from "@/components/records/fields/EditorField.svelte";
     import ExternalAuthsList from "@/components/records/ExternalAuthsList.svelte";
 
     const dispatch = createEventDispatcher();
@@ -350,6 +351,8 @@
                     <EmailField {field} bind:value={record[field.name]} />
                 {:else if field.type === "url"}
                     <UrlField {field} bind:value={record[field.name]} />
+                {:else if field.type === "editor"}
+                    <EditorField {field} bind:value={record[field.name]} />
                 {:else if field.type === "date"}
                     <DateField {field} bind:value={record[field.name]} />
                 {:else if field.type === "select"}

ui/src/components/records/fields/EditorField.svelte

@@ -0,0 +1,22 @@
+<script>
+    import { SchemaField } from "pocketbase";
+    import CommonHelper from "@/utils/CommonHelper";
+    import Field from "@/components/base/Field.svelte";
+    import TinyMCE from "@tinymce/tinymce-svelte";
+
+    export let field = new SchemaField();
+    export let value = undefined;
+</script>
+
+<Field class="form-field {field.required ? 'required' : ''}" name={field.name} let:uniqueId>
+    <label for={uniqueId}>
+        <i class={CommonHelper.getFieldTypeIcon(field.type)} />
+        <span class="txt">{field.name}</span>
+    </label>
+    <TinyMCE
+        id={uniqueId}
+        scriptSrc="{import.meta.env.BASE_URL}libs/tinymce/tinymce.min.js"
+        conf={CommonHelper.defaultEditorOptions()}
+        bind:value
+    />
+</Field>

ui/src/components/settings/EmailTemplateAccordion.svelte

@@ -82,12 +82,20 @@
         <input type="text" id={uniqueId} bind:value={config.subject} spellcheck="false" required />
         <div class="help-block">
             Available placeholder parameters:
-            <span class="label label-sm link-primary txt-mono" on:click={() => copy("{APP_NAME}")}>
+            <button
+                type="button"
+                class="label label-sm link-primary txt-mono"
+                on:click={() => copy("{APP_NAME}")}
+            >
                 {"{APP_NAME}"}
-            </span>,
-            <span class="label label-sm link-primary txt-mono" on:click={() => copy("{APP_URL}")}>
+            </button>,
+            <button
+                type="button"
+                class="label label-sm link-primary txt-mono"
+                on:click={() => copy("{APP_URL}")}
+            >
                 {"{APP_URL}"}
-            </span>.
+            </button>.
         </div>
     </Field>
 
@@ -96,17 +104,28 @@
         <input type="text" id={uniqueId} bind:value={config.actionUrl} spellcheck="false" required />
         <div class="help-block">
             Available placeholder parameters:
-            <span class="label label-sm link-primary txt-mono" on:click={() => copy("{APP_NAME}")}>
+            <button
+                type="button"
+                class="label label-sm link-primary txt-mono"
+                on:click={() => copy("{APP_NAME}")}
+            >
                 {"{APP_NAME}"}
-            </span>,
-            <span class="label label-sm link-primary txt-mono" on:click={() => copy("{APP_URL}")}>
+            </button>,
+            <button
+                type="button"
+                class="label label-sm link-primary txt-mono"
+                on:click={() => copy("{APP_URL}")}
+            >
                 {"{APP_URL}"}
-            </span>,
-            <span
+            </button>,
+            <button
+                type="button"
                 class="label label-sm link-primary txt-mono"
                 title="Required parameter"
-                on:click={() => copy("{TOKEN}")}>{"{TOKEN}"}</span
-            >.
+                on:click={() => copy("{TOKEN}")}
+            >
+                {"{TOKEN}"}
+            </button>.
         </div>
     </Field>
 
@@ -128,22 +147,35 @@
 
         <div class="help-block">
             Available placeholder parameters:
-            <span class="label label-sm link-primary txt-mono" on:click={() => copy("{APP_NAME}")}>
+            <button
+                type="button"
+                class="label label-sm link-primary txt-mono"
+                on:click={() => copy("{APP_NAME}")}
+            >
                 {"{APP_NAME}"}
-            </span>,
-            <span class="label label-sm link-primary txt-mono" on:click={() => copy("{APP_URL}")}>
+            </button>,
+            <button
+                type="button"
+                class="label label-sm link-primary txt-mono"
+                on:click={() => copy("{APP_URL}")}
+            >
                 {"{APP_URL}"}
-            </span>,
-            <span class="label label-sm link-primary txt-mono" on:click={() => copy("{TOKEN}")}>
+            </button>,
+            <button
+                type="button"
+                class="label label-sm link-primary txt-mono"
+                on:click={() => copy("{TOKEN}")}
+            >
                 {"{TOKEN}"}
-            </span>,
-            <span
+            </button>,
+            <button
+                type="button"
                 class="label label-sm link-primary txt-mono"
                 title="Required parameter"
                 on:click={() => copy("{ACTION_URL}")}
             >
                 {"{ACTION_URL}"}
-            </span>.
+            </button>.
         </div>
     </Field>
 </Accordion>