React Konva Rich Text Editor

A rich-text editor for React Konva, providing seamless integration of text editing capabilities on a canvas. This library allows you to manipulate text on a canvas, similar to tools like Microsoft Word, but within the powerful canvas rendering context provided by React-Konva.

Table of Contents

- Installation
- Features
- Components
- Editors
- InlineEditor
- InternalEditor
- ExternalEditor
- Images
- Image.Inline
- Image.Internal
- Image.External
- Usage
- Inline Editor Example
- Internal Editor Example
- External Editor Example
- API Reference

Installation

``bash
npm install react-konva-rich-text-editor
`

or

`bash
yarn add react-konva-rich-text-editor
`

Features

- Rich Text Editing: Leverage the power of TipTap to provide rich-text editing capabilities.
- Canvas Integration: Seamlessly integrate text editing within a React Konva canvas.
- Flexible Editors: Choose between Inline, Internal, or External editors to suit your application's needs.
- Customizable: Easily customize editor styles, toolbar options, and more.

Components

This library provides six main components:

$3

1. InlineEditor: Appears inline when you double-click the text image on the canvas, giving the illusion of editing the text directly.
2. InternalEditor: Pops up over the canvas when you double-click the text image.
3. ExternalEditor: Always visible and edits the text image from outside the canvas.

$3

Corresponding to each editor, there is an image component:

1. Image.Inline: Renders the text as an image on the canvas and interacts with the InlineEditor.
2. Image.Internal: Works with the InternalEditor.
3. Image.External: Works with the ExternalEditor.

Usage

$3

View the Inline Editor example on StackBlitz

`jsx
import { useState } from 'react';
import Image, { InlineEditor } from 'react-konva-rich-text-editor';
import type { InlineEditorEl } from 'react-konva-rich-text-editor';
import { Stage, Layer } from 'react-konva';
import Konva from 'konva';

function App() {
const [editorEl, setEditorEl] = useState({
x: 110,
y: 110,
width: 720,
height: 360,
open: false, // Required for InlineEditor
fontSize: 66,
});
const [svgImage, setSvgImage] = useState('');

const handleDragEnd = (e: Konva.KonvaEventObject) => {
const { x, y } = e.target.position();
setEditorEl((prev) => ({
...prev,
x,
y,
}));
};

return (
<>


svgImage={svgImage}
setEditorEl={setEditorEl}
editorEl={editorEl}
x={editorEl.x}
y={editorEl.y}
draggable
onDragEnd={handleDragEnd}
/>


initialText="Hello, world!"
setSvgImage={setSvgImage}
setEditorEl={setEditorEl}
editorEl={editorEl}
editorStyle={{}}
/>

);
}

export default App;
`

$3

View the Internal Editor example on StackBlitz

`jsx
import { useState } from 'react';
import Image, { InternalEditor } from 'react-konva-rich-text-editor';
import type { InternalEditorEl } from 'react-konva-rich-text-editor';
import { Stage, Layer } from 'react-konva';
import Konva from 'konva';

function App() {
const [editorEl, setEditorEl] = useState({
x: 100,
y: 100,
width: 600,
height: 300,
open: false, // Required for InternalEditor
fontSize: 48,
});
const [svgImage, setSvgImage] = useState('');

const handleDragEnd = (e: Konva.KonvaEventObject) => {
const { x, y } = e.target.position();
setEditorEl((prev) => ({
...prev,
x,
y,
}));
};

return (
<>


svgImage={svgImage}
setEditorEl={setEditorEl}
editorEl={editorEl}
x={editorEl.x}
y={editorEl.y}
draggable
onDragEnd={handleDragEnd}
/>


initialText="Edit me!"
setSvgImage={setSvgImage}
setEditorEl={setEditorEl}
editorEl={editorEl}
editorStyle={{}}
/>

);
}

export default App;
`

$3

View the External Editor example on StackBlitz

`jsx
import { useState } from 'react';
import Image, { ExternalEditor } from 'react-konva-rich-text-editor';
import type { ExternalEditorEl } from 'react-konva-rich-text-editor';
import { Stage, Layer } from 'react-konva';

function App() {
const [editorEl, setEditorEl] = useState({
x: 50,
y: 50,
width: 500,
height: 250,
fontSize: 36,
});
const [svgImage, setSvgImage] = useState('');

return (
<>


svgImage={svgImage}
x={editorEl.x}
y={editorEl.y}
draggable
/>


initialText="Always editable"
setSvgImage={setSvgImage}
editorEl={editorEl}
editorStyle={{}}
/>

);
}

export default App;
`

API Reference

$3

#### InlineEditor

- Description: An editor that appears inline when you double-click the corresponding image on the canvas.
- Props:
- initialText (string): The initial text content.
- editorEl (InlineEditorEl): Editor state object.
- setEditorEl (function): State updater for editorEl.
- setSvgImage (function): Function to update the SVG image.
- editorStyle (object): Custom styles for the editor.
- toolbarOptions (array): Customize toolbar options.

#### InternalEditor

- Description: An editor that pops up over the canvas when you double-click the corresponding image.
- Props: Same as InlineEditor.

#### ExternalEditor

- Description: An editor that is always visible and edits the text image from outside the canvas.
- Props:
- initialText (string): The initial text content.
- editorEl (ExternalEditorEl): Editor state object.
- setSvgImage (function): Function to update the SVG image.
- editorStyle (object): Custom styles for the editor.
- toolbarOptions (array): Customize toolbar options.

$3

#### Image.Inline

- Description: Corresponds to InlineEditor. Renders the text as an image on the canvas.
- Props:
- svgImage (string): The SVG image source.
- editorEl (InlineEditorEl): Editor state object.
- setEditorEl (function): State updater for editorEl.
- x, y (number): Position on the canvas.
- Additional Konva Image props.

#### Image.Internal

- Description: Corresponds to InternalEditor.
- Props: Same as Image.Inline.

#### Image.External

- Description: Corresponds to ExternalEditor.
- Props:
- svgImage (string): The SVG image source.
- x, y (number): Position on the canvas.
- Additional Konva Image props.

$3

#### InlineEditorEl & InternalEditorEl

- Properties:
- x, y (number): Position on the canvas.
- width, height (number): Dimensions of the editor.
- open (boolean): Controls the visibility of the editor.
- fontSize (number, optional): Font size for the text.

#### ExternalEditorEl

- Properties:
- x, y (number): Position on the canvas.
- width, height (number): Dimensions of the editor.
- fontSize` (number, optional): Font size for the text.

---

Feel free to contribute to this project by submitting issues or pull requests on GitHub.