ueberdosis / tiptap-php Goto Github PK

I save content to my database with tiptap editor, the output json from the editor is this:

'{"type":"doc","content":[{"type":"orderedList","attrs":{"start":2},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Test text here "}]}]}]}]}';

However, when this is passed into tiptap-php with setContent and then getHTML, the ol element has no order attribute. If I modify the json above to have order instead of start it works as expected. I believe this to be a bug in tiptap-php and not tiptap js.

This is re-produceable with the below code:

Incorrect:

 $content = '{"type":"doc","content":[{"type":"orderedList","attrs":{"start":2},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Test text here "}]}]}]}]}';
 echo (new Editor())
     ->setContent($content)
     ->getHTML();

Correct:

 $content = '{"type":"doc","content":[{"type":"orderedList","attrs":{"order":2},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Test text here "}]}]}]}]}';
 echo (new Editor())
     ->setContent($content)
     ->getHTML();

I’d like to get rid of the wrapper() method. It’s used - for example - to move the content of list items in a paragraph.

I’m afraid we’d need to add broad support for the content attribute from ProseMirror to achieve that though.

See my comment #2 (comment)

If a <li> tag contains a <p> and a sublist <ul>, the ListItem Node wraps the content with an additional <p> tag.

The resulting json doc can be loaded into tiptap but as soon as you edit a list item, an Invalid content for node paragraph is thrown because there is now a <p> tag containing a <p> and <ul> tag which is not valid, because a <p> tag can only contain phrasing content.

Hi!

I've been using the old PHP packages and not had the time to update yet.

However, every time I run composer update I get an abandoned message - which makes sense!

Package ueberdosis/html-to-prosemirror is abandoned, you should avoid using it. No replacement was suggested.
Package ueberdosis/prosemirror-php is abandoned, you should avoid using it. No replacement was suggested.
Package ueberdosis/prosemirror-to-html is abandoned, you should avoid using it. No replacement was suggested.

I know its in the README now, but could we maybe also suggest this new package from composer aswell?

Did the initial work, however I cannot add PR's to archived repositories:
ueberdosis/prosemirror-to-html@main...phh:patch-1
ueberdosis/html-to-prosemirror@main...phh:patch-1
ueberdosis/prosemirror-php@main...phh:patch-1

I'd like to be able to limit the output to a specific number of characters while retaining JSON or HTML. For instance, I'd like to be able to limit the characters output to 50 without risking cutting off an HTML end tag if it cuts in the middle of a word. Maybe something like $output->getHTML()->limit(50, '...') - with the first value being number of characters, and second being what you'd append to the end of the string should it cut off any characters.

Hello,

there seems to be an issue with the Tiptap JSON to HTML conversion when using overlapping styles like this:

JSON input:

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "marks": [
            {
              "type": "bold"
            }
          ],
          "text": "lorem "
        },
        {
          "type": "text",
          "marks": [
            {
              "type": "bold"
            },
            {
              "type": "italic"
            }
          ],
          "text": "ipsum"
        },
        {
          "type": "text",
          "marks": [
            {
              "type": "italic"
            }
          ],
          "text": " dolor"
        }
      ]
    }
  ]
}

HTML output:

<p><strong>lorem <em>ipsum</strong> dolor</em></p>

Expected HTML output:

<p><strong>lorem <em>ipsum</em></strong><em> dolor</em></p>

For easy reproduction:

(new Tiptap\Editor)
  ->setContent([
      "type" => "doc",
      "content" => [
          [
              "type" => "paragraph",
              "content" => [
                  [
                      "type" => "text",
                      "marks" => [
                          [
                              "type" => "bold"
                          ]
                      ],
                      "text" => "lorem "
                  ],
                  [
                      "type" => "text",
                      "marks" => [
                          [
                              "type" => "bold"
                          ],
                          [
                              "type" => "italic"
                          ]
                      ],
                      "text" => "ipsum"
                  ],
                  [
                      "type" => "text",
                      "marks" => [
                          [
                              "type" => "italic"
                          ]
                      ],
                      "text" => " dolor"
                  ]
              ]
          ]
      ]
  ])
  ->getHTML();

Thanks in advance :)

Is there any support to parse json to html for emoji nodes? Currently it just strips the emoji.

Thanks for this package!

I want to have an ability to specify content for the Document node explicitly.

I want it to be block+ emailFooter.

If I'm not missing something, currently it's impossible to specify content like in the JS package.

Might be related to this issue #2

Yeah, let’s add those, too. :-)

In JavaScript, we can set a default value for custom attributes. Let’s add that to the PHP package, too!

public static function addAttributes() {
    return [
        'color' => [
            'default' => 'red',
        ],
    ];
}

Hi there,

Silly question but when I trying to get JSON from the following HTML, it throws Array to string conversion in ../vendor/ueberdosis/tiptap-php/src/Core/DOMParser.php on line 144.

<p><iframe frameborder="0" height="385" src="https://www.youtube.com/embed/xxx" width="590"></iframe></p>
<p><iframe frameborder="0" height="385" src="https://www.youtube.com/embed/yyy" width="590"></iframe></p>

Hi, The spatie/shiki-php package requires php 8.0 but I would like to use the package in php 7.4 so right now I cant use this package. Do you have a workaround for this?

Hi! I can't update my project due to having packages that separately depend on this (which depends on scrivo/highlight.php to be at v9.18.1.9) and another package which depends on it being at v9.18.1.10. Thus concluding the best solution for tiptap-php to use the newest version of highlight.

This change seems to not interfere at all as per the changelog. I'll be more than happy to create the tiny pull request to make this happen. :)

https://github.com/ueberdosis/tiptap/blob/main/packages/extension-color/src/color.ts

Please, make support php 7 ..

Because the theme variable is still hard-coded, the selected theme is never applied.

File CodeBlockShiki.php and method renderHTML()

$content = Shiki::highlight(
      code: $code,
      language: $language,
      theme: 'nord',
  );

Should be

$content = Shiki::highlight(
      code: $code,
      language: $language,
      theme: $this->options['theme'],
  );

Hi there,

Here's my situation:

• I have some Tiptap content stored in my database as JSON
• I need to render this content as HTML using this PHP library (Laravel project) in order to send the content in an email notification
• I am trying to recreate the rendered HTML markup a custom Mention extension that works in my Vue/JS version of Tiptap

Here is my working Javascript version of the renderHTML function:

return [
  "span",
  {
    ...HTMLAttributes,
    "data-id": node.attrs.id,
    "data-type": "mention",
    "data-label": node.attrs.label.full_name,
    contenteditable: false,
    class: "mention",
  },
  ["img", { src: `${node.attrs.label.avatar}`, class: "mention__avatar" }],
  ` ${node.attrs.label.first_name}`,
]

When I try and do something similar in the PHP version:

return [
    'span',
    HTML::mergeAttributes(
        [
            'class' => 'mention',
            'data-id' => $node->attrs->id,
            'data-type' => 'mention',
            'data-label' => $user->full_name,
        ],
        $this->options['HTMLAttributes'],
        $HTMLAttributes,
    ),
    ['img', [
            'src' => 'https://canary.imgix.net/' . $user->avatar . '?auto=format&dpr=2&w=72&h=72&fit=facearea&faceindex=1&facepad=3&q=90',
            'class' => 'mention__avatar',
        ]
    ],
    $user->first_name
];

I don't get the same output... The outer span tag renders correctly with the appropriate data attributes, and the image tag also renders and shows the user's avatar.

The issue then is what happens after that image tag - as I simply cannot get the user's name to render.

If I have it as per the code above, then what happens is it outputs an additional html tag after the img tag, with that tag being the user's first name. For example, if the user is named "Dave", then it will render a <dave></dave> tag pair.

It may perhaps simply be a syntax thing that I'm missing, but I've tried a number of other combinations:

1. Changing the last part to strval(" " . $user->first_name) to try and return a string with a space in front of it - however this causes and error
2. I've tried adding another span tag after the image tag like so:

return [
    'span',
    HTML::mergeAttributes(
        [
            'class' => 'mention',
            'data-id' => $node->attrs->id,
            'data-type' => 'mention',
            'data-label' => $user->full_name,
        ],
        $this->options['HTMLAttributes'],
        $HTMLAttributes,
    ),
    ['img', [
            'src' => 'https://canary.imgix.net/' . $user->avatar . '?auto=format&dpr=2&w=72&h=72&fit=facearea&faceindex=1&facepad=3&q=90',
            'class' => 'mention__avatar',
        ]
    ],
    'span',
    ['class' => 'mention__name'],
    $user->first_name,
];

which actually does render the extra span tag, including adding the mention__name class to that span... but then throws an error that it's expecting the last part to be an array, not a string.

3. I've also tried then putting both the image tag and the name string inside of an array to make this combined content array be the third part of the returned array, but this also causes other errors.
4. I also tried other combinations of elements such as making the parent a div, or wrapping the name in a p tag thinking it may be a semantics thing, but still got the same sort of errors

So my thinking is that either:

• I'm missing some simple syntax issue in order to render something like <span class="mention"><img src="url" class="mention__avatar"> Name</span>
• OR, the renderHTML function for the PHP version of Tiptap wasn't written to accomodate this kind of nesting of content

Any help or tips would be greatly appreciated.

https://github.com/ueberdosis/tiptap/blob/main/packages/extension-font-family/src/font-family.ts

☝️💭

• https://github.com/ueberdosis/tiptap-php/blob/main/.github/workflows/run-tests.yml#L37
• https://github.com/ueberdosis/tiptap-php/runs/4936370298?check_suite_focus=true

Hello, it would be cool to have an "example" directory with an example page that displays a tiptap form built with tiptap-php.

I just discovered Tiptap and I don't know if tiptap requires the javascript library, or what to do with tiptap-php to have an interactive hello world editor that I can interact with.

Thanks.

The JavaScript package does have support for adding attributes to other and multiple extensions. Let’s add this to the PHP package aswell.

https://tiptap.dev/guide/custom-extensions#global-attributes

One issue I was coming across when using this package was that the link mark isn't used in the default starter kit that gets loaded when Editor is instantiated, even though it's available in the Marks folder.

I got around this by using my own StarterKit class with link included (in addOptions and addExtensions), but I was curious why it's not included by default?

Hello,

The strike element has been deprecated and I don't think it should be part of the available options or at least, it shouldn‘t be the default tag for the rendering.

Hi, I have installed the package just to sanitize the content generated by tiptap in the frontend. And I notice that when sanitizing it removes the links (a tags) and underlines (u tags), how is it possible to avoid this behavior?

Add it :-)

With PHP 7.4 there is an exception when running the tests because of some unexpected behaviour with rendering self closing tags.

https://github.com/mmachatschek/tiptap-php/runs/5019212800?check_suite_focus=true

While debugging, I found out that the $tag passed to isSelfClosing() contains html attributes of e.g. the rel attribute of an a-tag

This throws an exception:

(new Editor)->setContent(null)->getText();