Rich Text Support

[bakikucukcakiroglu]

Hello,

I need rich text features like bold, italic, underline etc. I tried to use puck-rich-text but it is not working with the current version of Puck. Is it possible to add this as a built in component since it is a very fundamental need for every developer?

If there is a way that I'm missing, please let me know.

[thopedam]

you can download the puck-rich-text lib, copy the useSelected hook and use something like tiptap

const RichTextEditor = ({ content, id }: RichTextEditorProps) => {
  const { isSelected, onChange } = useSelected(id);
  const editor = useEditor({
    content,
    // [...] more tiptap settings
    onUpdate: ({ editor }) => {
      onChange({ content: editor.getHTML() });
    },
  });

  return (
    <div
      style={{
        cursor: isSelected ? "auto" : "grab",
        pointerEvents: "auto",
      }}
    >
      <EditorContent editor={editor} />
      {editor && <RichTextToolbar editor={editor} id={id} />}
    </div>
  );
};

Add a Toolbar (toolbar override check puck docu)

type Props = {
  editor: Editor;
  id: string;
};

const RichTextToolbar = ({ editor, id }: Props) => {
  return (
    <ActionToolbar id={id}>
      <ActionBarButton
        isActive={editor.isActive("bold")}
        onClick={() => editor.chain().focus().toggleBold().run()}
      >
        <Bold size={16} />
      </ActionBarButton>
      <ActionBarButton
        isActive={editor.isActive("italic")}
        onClick={() => editor.chain().focus().toggleItalic().run()}
      >
        <Italic size={16} />
      </ActionBarButton>
      <ActionBarButton
        isActive={editor.isActive("underline")}
        onClick={() => editor.chain().focus().toggleUnderline().run()}
      >
        <Underline size={16} />
      </ActionBarButton>
    </ActionToolbar>
  );
};

And for the Puck Config you have similar to puck-rich-text

export const RichText: ComponentConfig<RichTextProps> = {
    fields: {
        content: {
             type: "custom",
             label: "Text",
             render: () => <></>,
        },
    }
    render: ({
    content,
    id,
    puck: { isEditing },
  }) => (
  <RichTextBlock
        id={id}
        content={content}
        isEditing={isEditing}
      />
    )
}

[bakikucukcakiroglu]

Thanks for your insight! I made it work.