How to add inline text editing for a custom component?

francois · February 5, 2024, 8:46pm

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder public api key
fc37cc965b7a497ca6a24fadfe68fd49

What are you trying to accomplish
I want to add inline text editing to my custom Text component. There doesn’t seem to be any documentation or topic on the forum on this subject. I did check the Github of the React SDK and I tried to copy the code from the core Text component but it did not work.

Is there an official way to implement this?
What is the point of automatically adding a field to enable inline text editing if it does not work?

Code stack you are integrating Builder with
React and Next.js

Reproducible code example
Here’s the link to the core Text component which support inline text editing:

github.com

BuilderIO/builder/blob/main/packages/react/src/blocks/Text.tsx

/** @jsx jsx */
import { jsx, InterpolationWithTheme } from '@emotion/core';
import React from 'react';
import { Builder, BuilderElement } from '@builder.io/sdk';
import { withBuilder } from '../functions/with-builder';
import { BuilderStoreContext } from '../store/builder-store';
import { tryEval } from '../functions/try-eval';

const iconUrl =
  'https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929';

export interface TextProps {
  text: string;
  builderBlock?: BuilderElement;
}

class TextComponent extends React.Component<TextProps> {
  textRef: HTMLSpanElement | null = null;

  componentDidMount() {

This file has been truncated. show original

garima · February 20, 2024, 9:46am

Hi @francois Welcome to Builder.io Forum!

Here’s official documentation on this topic Adding Children to Custom Components - Builder.io

Feel free to reach out if this doesn’t help!

francois · February 20, 2024, 2:50pm

This link has nothing to do with inline text editing.

garima · March 5, 2024, 4:38pm

@francois Sorry I’ve misunderstood your use case. Based on the provided details, this looks like an excellent feature request. I recommend submitting it at https://ideas.builder.io/

Our engineering team regularly reviews requests based on a number of factors: benefits, added value, technical fit, votes, and feasibility. As your Feature Request progresses through our review process, you will be kept updated.

I would also encourage you to review other Feature Requests already listed and add your vote on the features you would like to see!

Topic		Replies	Views
How can I use richText in custom component Technical Questions react , nextjs	3	562	March 19, 2024
Making no-code and code components work as a custom component Technical Questions visual-editor , styling , react	3	910	February 3, 2022
Adding code to the visual builder template components Technical Questions visual-editor , react	1	462	January 25, 2022
Can we have a builder component inside custom component? Technical Questions visual-editor , react , custom-code , api , custom-components	2	1234	June 17, 2022
Custom components not showing the Input fields Visual Editor Help	12	185	April 18, 2024

How to add inline text editing for a custom component?

Related topics