[#370] added rich text editor field

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>