https://github.com/freshleafmedia/tiptap-parser
A PHP package for rendering Tiptap JSON to HTML
https://github.com/freshleafmedia/tiptap-parser
hacktoberfest parser render tiptap tiptap-editor
Last synced: 5 months ago
JSON representation
A PHP package for rendering Tiptap JSON to HTML
- Host: GitHub
- URL: https://github.com/freshleafmedia/tiptap-parser
- Owner: freshleafmedia
- License: mit
- Created: 2024-04-30T17:26:07.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-19T15:10:22.000Z (about 2 years ago)
- Last Synced: 2025-10-12T03:37:27.151Z (9 months ago)
- Topics: hacktoberfest, parser, render, tiptap, tiptap-editor
- Language: PHP
- Homepage:
- Size: 62.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Tiptap JSON Parser
[](https://packagist.org/packages/freshleafmedia/tiptap-parser)
[](https://packagist.org/packages/freshleafmedia/tiptap-parser)
[](https://packagist.org/packages/freshleafmedia/tiptap-parser)
---
This package simply converts the JSON output from the [Tiptap editor](https://github.com/awcodes/filament-tiptap-editor) to HTML.
It differs from [other packages](https://github.com/ueberdosis/tiptap-php) by allowing you to easily customise and extend the HTML output.
---
## Installation
```
composer require freshleafmedia/tiptap-parser
```
## Basic Usage
```php
use FreshleafMedia\TiptapParser\TiptapContent;
$tiptapArray = [
'type' => 'paragraph',
'content' => [
[
'type' => 'text',
'text' => 'Hello world',
],
],
];
TiptapContent::make($tiptapArray)->toHtml(); //
Hello world
```
## Customising A Node
```php
use FreshleafMedia\TiptapParser\Nodes\Paragraph;
readonly class CustomParagraph extends Paragraph
{
public function render(): string
{
return <<
{$this->renderInnerHtml()}
HTML;
}
}
$html = Parser::fromArray($tiptapArray)
->registerNode('paragraph', CustomParagraph::class)
->toHtml(); //
Hello world
```
## Accessing Custom Attributes
Nodes are instantiated via the `fromArray` method, the method is passed all the data from the original array.
For example given this array:
```php
[
'type' => 'paragraph',
'attrs' => [
'lang' => 'en',
]
]
```
We can easily add the `lang` attribute to the `p` element like this:
```php
use FreshleafMedia\TiptapParser\Nodes\Paragraph;
readonly class LocalisedParagraph extends Paragraph
{
public function __construct(
public string $language,
public array $children = [],
)
{
}
public function render(): string
{
return <<
{$this->renderInnerHtml()}
HTML;
}
public static function fromArray(array $array): self
{
return new self(
$array['attrs']['lang'] ?? 'en',
$array['children'] ?? [],
);
}
}
```
## Plain Text
Plain text can be extracted available via the `toText` method. This is useful for things like populating a search index.
```php
use FreshleafMedia\TiptapParser\TiptapContent;
$tiptapArray = [
'type' => 'paragraph',
'content' => [
[
'type' => 'text',
'text' => 'Hello world',
'marks' => [
['type' => 'bold'],
],
],
],
];
TiptapContent::make($tiptapArray)->toHtml(); //
Hello world
TiptapContent::make($tiptapArray)->toText(); // Hello world
```