Comment editor (Preview)

To add the CommentEditor component to your app:

1
2
import { CommentEditor } from "@forge/react";

Description

The comment editor provides a contained comment editor UI with a simple toolbar.

Props

Features

You can use the features prop to enable or disable specific editor features. In the comment editor, disabling features removes them from the toolbar as well as stops them from being able to be used in the editor itself. The following features are available:

Examples

Default appearance

1
2
export const CommentEditorExample = () => {
  return <CommentEditor />;
};

Enabling and disabling features

By default, all editor features are enabled. To enable certain features and disable the rest, pass in the features object with the features you would like to enable.

1
2
export const CommentEditorWithToggledFeaturesExample = () => {
  return (
    <CommentEditor
      features={{
        blockType: true,
        textFormatting: true,
        textColor: true,
        list: true,
      }}
    />
  );
};

Action buttons

The onSave prop will render a Save button for the user to interact with. Upon clicking, the value can be stored in state. onCancel will render a Cancel button that fires a callback.

1
2
const CommentEditorWithActionButtons = () => {
  const [savedContent, setSavedContent] = useState();

  return (
    <>
      <CommentEditor
        onSave={(value) => {
          setSavedContent(value);
        }}
        onCancel={() => {
          // handle cancel
        }}
      />
    </>
  );
};

onChange

To access the input value of the editor while it's being edited, onChange can be used.

1
2
const CommentEditorWithActionButtons = () => {
  const [editorValue, setEditorValue] = useState();

  return (
    <>
      <CommentEditor onChange={(value) => setEditorValue(value)} />
      <Box paddingBlockStart="space.100">
        <Button
          onClick={() => {
            console.log(editorValue);
          }}
        >
          Submit
        </Button>
      </Box>
    </>
  );
};

Default value

To set a default value in the editor, pass in the defaultValue prop. This will be the initial content within the editor.

1
2
const editorValue = {
  version: 1,
  type: "doc",
  content: [
    {
      type: "heading",
      attrs: {
        level: 1,
      },
      content: [
        {
          type: "text",
          text: "Heading",
        },
      ],
    },
    {
      type: "blockquote",
      content: [
        {
          type: "paragraph",
          content: [
            {
              type: "text",
              text: "Quote block",
            },
          ],
        },
      ],
    },
    {
      type: "codeBlock",
      attrs: {
        language: "javascript",
      },
      content: [
        {
          type: "text",
          text: "const foo = 'bar'",
        },
      ],
    },
  ],
};

const CommentEditorWithDefaultValue = () => {
  return (
    <>
      <CommentEditor defaultValue={editorValue} />
    </>
  );
};

Disabled editor

To disable the editor, pass in the isDisabled prop. This will disable all interactions with the editor.

1
2
const CommentEditorDisabled = () => {
  return (
    <>
      <CommentEditor isDisabled />
    </>
  );
};

Example with ADF Renderer

The CommentEditor can be used together with the AdfRenderer component to display the content of a submitted value in a read-only format. This is useful for displaying the content of the editor after it has been saved.

1
2
import { useState } from "react";
import { CommentEditor, AdfRenderer, Button, Box } from "@forge/react";

const pressableStyles = xcss({
  marginTop: "space.200",
  color: "color.text.subtle",
  fontWeight: "font.weight.bold",
  padding: "space.100",
  borderRadius: "border.radius",
  ":hover": {
    backgroundColor: "color.background.neutral.subtle.hovered",
    color: "color.text",
  },
});

export const PressableExample = () => {
  const [showEditor, setShowEditor] = useState(false);
  const [comment, setComment] = useState(undefined);
  return (
    <>
      {comment && !showEditor ? <AdfRenderer document={comment} /> : null}
      {showEditor ? (
        <CommentEditor
          defaultValue={comment}
          onSave={(content) => {
            setComment(content);
            setShowEditor(false);
          }}
          onCancel={() => setShowEditor(false)}
        />
      ) : (
        <Pressable xcss={pressableStyles} onClick={() => setShowEditor(true)}>
          {comment ? "Edit comment" : "Add comment"}
        </Pressable>
      )}
    </>
  );
};