feat: create rich-text field

closes #811

packages/api-headless-cms/src/handler/plugins/graphql.ts

@@ -67,6 +67,8 @@ export default ({ type }) => [
             typeDefs: gql`
                 ${i18nFieldType("CmsString", "String")}
                 ${i18nFieldInput("CmsString", "String")}
+                ${i18nFieldType("CmsJSON", "JSON")}
+                ${i18nFieldInput("CmsJSON", "JSON")}
                 ${i18nFieldType("CmsAny", "Any")}
                 ${i18nFieldInput("CmsAny", "Any")}
 
@@ -75,10 +77,10 @@ export default ({ type }) => [
                     fields: [String]
                     operator: String
                 }
-                
+
                 ${contentModelGroup.getTypeDefs(type)}
                 ${meta.typeDefs}
-                
+
                 type SecurityUser {
                     id: ID
                     firstName: String
@@ -95,7 +97,7 @@ export default ({ type }) => [
                     next: String
                     previous: String
                 }
-                
+
                 type CmsListMeta {
                     cursors: CmsCursors
                     hasNextPage: Boolean
@@ -166,7 +168,7 @@ export default ({ type }) => [
                 input CmsFieldRendererInput {
                     name: String
                 }
-                
+
                 type CmsContentModelField {
                     _id: ID
                     label: CmsString

packages/api-headless-cms/src/handler/plugins/graphqlFields/index.ts

@@ -4,5 +4,6 @@ import ref from "./ref";
 import number from "./number";
 import boolean from "./boolean";
 import datetime from "./datetime";
+import richText from "./richText";
 
-export default [text, ref, number, datetime, boolean, longText];
+export default [text, ref, number, datetime, boolean, longText, richText];

packages/api-headless-cms/src/handler/plugins/graphqlFields/richText.ts

@@ -0,0 +1,36 @@
+import { CmsModelFieldToGraphQLPlugin } from "@webiny/api-headless-cms/types";
+
+const plugin: CmsModelFieldToGraphQLPlugin = {
+    name: "cms-model-field-to-graphql-rich-text",
+    type: "cms-model-field-to-graphql",
+    fieldType: "rich-text",
+    read: {
+        createTypeField({ field }) {
+            const localeArg = "(locale: String)";
+            return `${field.fieldId}${localeArg}: JSON`;
+        },
+        createGetFilters({ field }) {
+            return `${field.fieldId}: JSON`;
+        },
+        createResolver({ field }) {
+            return (instance, args) => {
+                return instance[field.fieldId].value(args.locale);
+            };
+        }
+    },
+    manage: {
+        createResolver({ field }) {
+            return instance => {
+                return instance[field.fieldId];
+            };
+        },
+        createTypeField({ field }) {
+            return field.fieldId + ": CmsJSON";
+        },
+        createInputField({ field }) {
+            return field.fieldId + ": CmsJSONInput";
+        }
+    }
+};
+
+export default plugin;

packages/api-headless-cms/src/handler/plugins/graphqlFields/text.ts

@@ -5,19 +5,19 @@ const createListFilters = ({ field }) => {
     return `
         # Matches if the field is equal to the given value
         ${field.fieldId}: String
-        
+
         # Matches if the field is not equal to the given value
         ${field.fieldId}_not: String
 
         # Matches if the field value equal one of the given values
         ${field.fieldId}_in: [String]
-        
+
         # Matches if the field value does not equal any of the given values
         ${field.fieldId}_not_in: [String]
-        
+
         # Matches if given value is a substring of the the field value
         ${field.fieldId}_contains: String
-        
+
         # Matches if given value is not a substring of the the field value
         ${field.fieldId}_not_contains: String
     `;

packages/api-headless-cms/src/handler/plugins/modelFields/index.ts

@@ -5,5 +5,6 @@ import number from "./number";
 import boolean from "./boolean";
 import datetime from "./datetime";
 import json from "./json";
+import richText from "./richText";
 
-export default [text, ref, number, boolean, datetime, json, longText];
+export default [text, ref, number, boolean, datetime, richText, json, longText];

packages/api-headless-cms/src/handler/plugins/modelFields/richText.ts

@@ -0,0 +1,21 @@
+import { CmsModelFieldToCommodoFieldPlugin } from "@webiny/api-headless-cms/types";
+import { withFields, object } from "@webiny/commodo";
+import { i18nField } from "./i18nFields";
+
+const plugin: CmsModelFieldToCommodoFieldPlugin = {
+    name: "cms-model-field-to-commodo-field-rich-text",
+    type: "cms-model-field-to-commodo-field",
+    fieldType: "rich-text",
+    dataModel({ model, field, validation, context }) {
+        withFields({
+            [field.fieldId]: i18nField({ field: object({ validation }), context })
+        })(model);
+    },
+    searchModel({ model, field, validation }) {
+        withFields({
+            [field.fieldId]: object({ validation })
+        })(model);
+    }
+};
+
+export default plugin;

packages/app-admin/src/plugins/init.tsx

@@ -13,7 +13,7 @@ const plugin: WebinyInitPlugin = {
     init() {
         // Settings
         // Apps / integrations can register settings plugins and add menu items like the following.
-        const settingsPlugins = getPlugins<AdminMenuSettingsPlugin>("menu-settings");
+        const settingsPlugins = getPlugins<AdminMenuSettingsPlugin>("admin-menu-settings");
 
         registerPlugins({
             name: "menu-settings",

packages/app-headless-cms/src/admin/plugins/fieldRenderers/index.ts

@@ -1,7 +1,8 @@
 import number from "./number";
 import text from "./text";
 import longText from "./longText";
+import richText from "./richText";
 import boolean from "./boolean";
 import dateTime from "./dateTime";
 
-export default [number, text, longText, boolean, dateTime];
+export default [number, text, longText, richText, boolean, dateTime];

packages/app-headless-cms/src/admin/plugins/fieldRenderers/richText/index.ts

@@ -0,0 +1,3 @@
+import richTextInput from "./richTextInput";
+
+export default [richTextInput]

packages/app-headless-cms/src/admin/plugins/fieldRenderers/richText/richTextInput.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { CmsEditorFieldRendererPlugin } from "@webiny/app-headless-cms/types";
+import { I18NValue } from "@webiny/app-i18n/components";
+import { i18n } from "@webiny/app/i18n";
+
+import I18NRichTextEditor from "@webiny/app-i18n/admin/components/I18NRichTextEditor";
+import numberedListPlugins from "@webiny/app-i18n/admin/plugins/richTextEditor/numberedList";
+import bulletedListPlugins from "@webiny/app-i18n/admin/plugins/richTextEditor/bulletedList";
+import headingPlugins from "@webiny/app-i18n/admin/plugins/richTextEditor/heading";
+import codePlugins from "@webiny/app-i18n/admin/plugins/richTextEditor/code";
+
+const t = i18n.ns("app-headless-cms/admin/fields/text");
+
+const richTextPlugins = [
+    numberedListPlugins.plugin,
+    bulletedListPlugins.plugin,
+    headingPlugins.plugin,
+    codePlugins.plugin
+];
+
+const plugin: CmsEditorFieldRendererPlugin = {
+    type: "cms-editor-field-renderer",
+    name: "cms-editor-field-renderer-rich-text",
+    renderer: {
+        rendererName: "rich-text-input",
+        name: t`Rich Text Input`,
+        description: t`Renders a rich text input.`,
+        canUse({ field }) {
+            return field.type === "rich-text" && !field.multipleValues && !field.predefinedValues;
+        },
+        render({ field, getBind }) {
+            const Bind = getBind();
+
+            return (
+                <Bind>
+                    {bind => (
+                        <I18NRichTextEditor
+                            {...bind}
+                            onChange={bind.onChange}
+                            label={I18NValue({ value: field.label })}
+                            placeholder={I18NValue({ value: field.placeholderText })}
+                            description={I18NValue({ value: field.helpText })}
+                            plugins={richTextPlugins}
+                        />
+                    )}
+                </Bind>
+            );
+        }
+    }
+};
+
+export default plugin;

packages/app-headless-cms/src/admin/plugins/fields/index.ts

@@ -4,7 +4,8 @@ import longText from "./longText";
 import number from "./number";
 import boolean from "./boolean";
 import dateTime from "./dateTime";
+import richText from "./richText";
 
-const plugins: CmsEditorFieldTypePlugin[] = [text, number, boolean, dateTime, longText];
+const plugins: CmsEditorFieldTypePlugin[] = [text, number, boolean, dateTime, richText, longText];
 
 export default plugins;

packages/app-headless-cms/src/admin/plugins/fields/richText.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { ReactComponent as NotesIcon } from "./icons/notes-black-24px.svg";
+import { Grid, Cell } from "@webiny/ui/Grid";
+import { I18NInput } from "@webiny/app-i18n/admin/components";
+import { CmsEditorFieldTypePlugin } from "@webiny/app-headless-cms/types";
+import { i18n } from "@webiny/app/i18n";
+const t = i18n.ns("app-headless-cms/admin/fields");
+
+const plugin: CmsEditorFieldTypePlugin = {
+    type: "cms-editor-field-type",
+    name: "cms-editor-field-type-richText",
+    field: {
+        type: "rich-text",
+        label: t`Rich text`,
+        description: t`Text formatting with references and media.`,
+        icon: <NotesIcon />,
+        allowMultipleValues: false,
+        allowPredefinedValues: false,
+        allowIndexes: {
+            singleValue: false,
+            multipleValues: false
+        },
+        createField() {
+            return {
+                type: this.type,
+                name: this.name,
+                validation: [],
+                settings: {
+                    defaultValue: ""
+                },
+                renderer: {
+                    name: ""
+                }
+            };
+        },
+        renderSettings({ form: { Bind } }) {
+            return (
+                <Grid>
+                    <Cell span={12}>
+                        <Bind name={"placeholderText"}>
+                            <I18NInput
+                                label={t`Placeholder text`}
+                                description={t`Placeholder text (optional)`}
+                            />
+                        </Bind>
+                    </Cell>
+                </Grid>
+            );
+        }
+    }
+};
+
+export default plugin;