How to customize a code editor tool？

[wulart]

Can custom tool introduce third-party libraries? I want to use "react-textarea-code-editor" to make a code editor tool. Is it possible?

[Taha-Hassan-Git]

Absolutley! Check out the custom config example for an idea of how to implement a custom shape and tool. You can do normal React things in the component method of the shape util, so you can import any React libraries you want and render them in the return statement. Hope that helps, and feel free to show us what you've made in the tldraw discord.

[wulart]

Here is a screenshot of the tool I implemented:

My component code is as follows:

	<HTMLContainer
		id={shape.id}
		style={{
			border: '0px',
			borderRadius: "8px",
			display: 'flex',
			flexDirection: 'column',
			alignItems: 'center',
			justifyContent: 'center',
			pointerEvents: 'all',
			filter: this.filterStyleToCss(shape.props.filter),
			backgroundColor: theme[shape.props.color].semi,
			color: theme[shape.props.color].solid,
		}}
	>
		<CodeEditor
			value={code}
			ref={textRef}
			language="cpp"
			placeholder="Please enter cpp code."
			onChange={(evn) => setCode(evn.target.value)}
			padding={25}
			style={{
				pointerEvents: 'all',
				fontFamily:
				"ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
				fontSize: 24,
				backgroundColor: "#F1F5FF",
				borderRadius: "8px",
				lineHeight: "34px",
				width: shape.props.w,
				height: shape.props.h
			}}
		/>
	</HTMLContainer>

But I have encountered difficulties with mouse click events. I want to implement mouse events like the tool note, such as double-clicking for text input; in addition, I hope that the entered code can also be saved using the "store.getSnapshot()" method, but I Don't know how to do it, can you give some suggestions?

[wulart]

This is the best whiteboard project I have ever seen and I hope to develop more tools that users can use to show more possibilities

[KesavarajaRK]

Is it possible for you to share the code of this component. I am planning to implement Rich Text Editor.

[Taha-Hassan-Git]

Looks great already! So, I'm not sure how the CodeEditor component works but you might be having trouble with mouse events because the editor thinks you're trying to select or drag the shape instead of edit the code.Try adding an onPointer down prop to the CodeEditor component to stop the event from bubbling:

<CodeEditor
// your other props
onPointerDown={(e) => e.stopPropagation()}
/>

If you want to implement specific pointer behaviour for the tool then you'll want to edit the tool file, you can see in the custom config example that we indicate where you can add your code to handle a double click event. For an example of a tool that demonstrates more complex behaviour, take a look at the screenshot example.

As for the store.getSnapshot() method, a shape's props are added to the store and are available via the getSnapshot method. Just make sure you add the text to the shape's props.

Let me know if that works, and feel free to come back with any more questions.

[wulart]

Thank you!
According to your method, I implemented the input of code and the export of json data, But the shape cannot be dragged. In fact, what I want to achieve is an interactive effect similar to note, which can be dragged and input.

[wulart]

I did it like this, enter the code in the codeEditor area, and the outer area can be dragged.

[Taha-Hassan-Git]

I think what you want is an edit mode for this shape. We now have an example for making editable shapes:

https://tldraw.dev/examples/shapes/tools/editable-shape

[KesavarajaRK]

Thanks, will look into this.

[linonetwo]

Hi @KesavarajaRK , you can only add onPointerDown={(e) => e.stopPropagation()} on middle area that you don't want drag&move to happened.

And for outer rim, don't add onPointerDown={(e) => e.stopPropagation()}, then it can be dragged. See #3537