merge newui branch

ui/src/fields/editor/init.js

@@ -0,0 +1,19 @@
+import { input } from "./input";
+import { settings } from "./settings";
+import { view } from "./view";
+
+window.app = window.app || {};
+window.app.fieldTypes = window.app.fieldTypes || {};
+window.app.fieldTypes.editor = {
+    icon: "ri-edit-2-line",
+    label: "Rich editor",
+    settings,
+    input,
+    view,
+    filterModifiers: (f) => {
+        return ["lower"];
+    },
+    dummyData: (f, forSubmit = false) => {
+        return "Lorem ipsum dolor sit amet...";
+    },
+};

ui/src/fields/editor/input.js

@@ -0,0 +1,47 @@
+// {
+//     collection: undefined,
+//     originalRecord: undefined,
+//     record: undefined,
+//     field: undefined,
+// }
+export function input(props) {
+    const uniqueId = "editor_" + app.utils.randomString();
+
+    const local = store({
+        lazyEditor: null,
+    });
+
+    return t.div(
+        {
+            className: "record-field-input field-type-editor large-modal",
+            onmount: () => {
+                requestAnimationFrame(() => {
+                    local.lazyEditor = app.components.tinymce({
+                        id: uniqueId,
+                        required: () => props.field.required,
+                        convertURLs: () => props.field.convertURLs,
+                        name: () => props.field.name,
+                        value: () => props.record[props.field.name] || "",
+                        onchange: (val) => {
+                            props.record[props.field.name] = val;
+                        },
+                    });
+                });
+            },
+        },
+        t.div(
+            { className: "field" },
+            t.label(
+                { htmlFor: uniqueId },
+                t.i({ className: app.fieldTypes.editor.icon }),
+                t.span({ className: "txt" }, () => props.field.name),
+            ),
+            () => local.lazyEditor,
+        ),
+        () => {
+            if (props.field.help) {
+                return t.div({ className: "field-help" }, props.field.help);
+            }
+        },
+    );
+}

ui/src/fields/editor/settings.js

@@ -0,0 +1,101 @@
+// {
+//     originalCollection: undefined,
+//     collection: undefined,
+//     field
+//     get fieldIndex: int/-1,
+//     get originalField: undefined
+// }
+export function settings(data) {
+    const uniqueId = "f_" + app.utils.randomString();
+
+    const local = store({
+        showInfo: false,
+    });
+
+    return app.components.fieldSettings(data, {
+        content: () =>
+            t.div(
+                { className: "grid sm" },
+                t.div(
+                    { className: "col-sm-12" },
+                    t.div(
+                        { className: "field" },
+                        t.label(
+                            { htmlFor: uniqueId + ".maxSize" },
+                            t.span(null, "Max size "),
+                            t.small(null, "(bytes)"),
+                        ),
+                        t.input({
+                            type: "number",
+                            id: uniqueId + ".maxSize",
+                            name: () => `fields.${data.fieldIndex}.maxSize`,
+                            min: 0,
+                            step: 1,
+                            max: Number.MAX_SAFE_INTEGER,
+                            placeholder: "Default to max ~5MB",
+                            value: () => data.field.maxSize || "",
+                            oninput: (e) => {
+                                data.field.maxSize = parseInt(e.target.value, 10);
+                            },
+                        }),
+                    ),
+                ),
+                t.div(
+                    { className: "col-sm-12" },
+                    t.div(
+                        { className: "field" },
+                        t.label({ htmlFor: uniqueId + ".help" }, "Help text"),
+                        t.input({
+                            type: "text",
+                            id: uniqueId + ".help",
+                            name: () => `fields.${data.fieldIndex}.help`,
+                            value: () => data.field.help || "",
+                            oninput: (e) => (data.field.help = e.target.value),
+                        }),
+                    ),
+                ),
+            ),
+        footer: () => [
+            t.div(
+                { className: "field" },
+                t.input({
+                    className: "sm",
+                    type: "checkbox",
+                    id: uniqueId + ".required",
+                    name: () => `fields.${data.fieldIndex}.required`,
+                    checked: () => !!data.field.required,
+                    onchange: (e) => (data.field.required = e.target.checked),
+                }),
+                t.label(
+                    { htmlFor: uniqueId + ".required" },
+                    t.span({ className: "txt" }, "Required"),
+                    t.i({
+                        className: "ri-information-line link-hint",
+                        ariaDescription: app.attrs.tooltip("Requires the field value to be nonempty string"),
+                    }),
+                ),
+            ),
+            t.div(
+                { className: "field" },
+                t.input({
+                    className: "sm",
+                    type: "checkbox",
+                    id: uniqueId + ".convertURLs",
+                    name: () => `fields.${data.fieldIndex}.convertURLs`,
+                    checked: () => !!data.field.convertURLs,
+                    onchange: (e) => (data.field.convertURLs = e.target.checked),
+                }),
+                t.label(
+                    { htmlFor: uniqueId + ".convertURLs" },
+                    t.span({ className: "txt" }, "Strip URLs domain"),
+                    t.i({
+                        className: "ri-information-line link-hint",
+                        ariaDescription: app.attrs.tooltip(
+                            "This could help making the editor content more portable between environments since there will be no local base url to replace.",
+                        ),
+                    }),
+                ),
+            ),
+        ],
+    });
+}

ui/src/fields/editor/view.js

@@ -0,0 +1,29 @@
+// {
+//     record: undefined,
+//     field: undefined,
+//     short: false,
+// }
+export function view(props) {
+    return t.div(
+        { className: "record-field-view field-type-editor" },
+        () => {
+            if (props.short) {
+                const value = props.record[props.field.name];
+                if (!value) {
+                    return t.span({ className: "missing-value" });
+                }
+
+                return t.span({
+                    className: "txt",
+                    textContent: app.utils.truncate(app.utils.plainText(value), 200),
+                });
+            }
+
+            return app.components.tinymce({
+                readonly: true,
+                className: "large-modal",
+                value: () => props.record[props.field.name] || "",
+            });
+        },
+    );
+}