rich text in form

I am working on slatejs rich text with ant design form. can you help me get the value

5 Replies

Hi @SetiZ. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To integrate a rich text editor like Slate.js with Ant Design forms in refine, you can use a custom input component. While the knowledge sources don't provide specific information about Slate.js integration, they do offer guidance on using custom inputs with Ant Design forms in refine. Here's how you can approach this: 1. Create a custom Slate.js component that is controllable via value and onChange props. 2. Use this custom component within an Ant Design <Form.Item> in your refine form. Here's an example of how you might structure this, based on the custom input pattern shown in the refine documentation:

import { Form } from 'antd';
import { Edit, useForm } from "@refinedev/antd";
import { SlateEditor } from './SlateEditor'; // Your custom Slate.js component

export const PostEdit = () => {
  const { formProps, saveButtonProps } = useForm();

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label="Content"
          name="content"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <SlateEditor />
        </Form.Item>
      </Form>
    </Edit>
  );
};

import { Form } from 'antd';
import { Edit, useForm } from "@refinedev/antd";
import { SlateEditor } from './SlateEditor'; // Your custom Slate.js component

export const PostEdit = () => {
  const { formProps, saveButtonProps } = useForm();

  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label="Content"
          name="content"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <SlateEditor />
        </Form.Item>
      </Form>
    </Edit>
  );
};

In this setup, your SlateEditor component should accept value and onChange props to be compatible with Ant Design's form handling. For more details on implementing custom inputs in refine with Ant Design forms, you can refer to the Custom Inputs documentation. Remember to ensure that your Slate.js component correctly handles the value passed to it and triggers the onChange event with the updated value when the content changes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ratty-blushOP•4w ago

@kapa.ai can you show me more the SlateEditor part?

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize, but I don't have specific information about a SlateEditor component in the context of refine in the provided knowledge sources. The previous example was a general suggestion based on using custom inputs with Ant Design forms in refine, but it didn't include actual implementation details for a Slate.js editor. However, I can provide you with information on how refine handles custom inputs in general, which you could apply to your Slate.js implementation. Refine uses Ant Design's <Form> components to work with form data. Custom form items should be controllable via their value property and should implement onChange (or a custom callback name specified by <Form.Item>'s trigger prop). Here's an example of how refine handles a custom markdown editor, which you could use as a template for your SlateEditor:

import React from "react";
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

import MDEditor from "@uiw/react-md-editor";

export const PostEdit: React.FC = (props) => {
  const { formProps, saveButtonProps } = useForm();

  return (
    <Edit {...props} saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label="Content"
          name="content"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <MDEditor data-color-mode="light" />
        </Form.Item>
      </Form>
    </Edit>
  );
};

import React from "react";
import { Edit, useForm } from "@refinedev/antd";
import { Form, Input } from "antd";

import MDEditor from "@uiw/react-md-editor";

export const PostEdit: React.FC = (props) => {
  const { formProps, saveButtonProps } = useForm();

  return (
    <Edit {...props} saveButtonProps={saveButtonProps}>
      <Form {...formProps} layout="vertical">
        <Form.Item
          label="Content"
          name="content"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <MDEditor data-color-mode="light" />
        </Form.Item>
      </Form>
    </Edit>
  );
};

In this example, MDEditor is a custom component that integrates with Ant Design's form handling. Your SlateEditor would need to be implemented in a similar way, accepting value and onChange props to work with the form. For more information on implementing custom inputs in refine with Ant Design forms, you can refer to the Custom Inputs documentation. Remember, the specific implementation of your SlateEditor would depend on how you've set up Slate.js in your project. The key is to ensure it correctly handles the value prop and triggers the onChange event when the content changes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

<@267689263246606336> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

rich text in form

Did you find this page helpful?