Darginec05 / Yoopta-Editor

Build Notion-like, Craft-like, Coda-like, Medium-like editors with Yoopta
https://yoopta.dev/
MIT License
1.41k stars 107 forks source link

[BUG] paste markdown content and then edit clears content #380

Open snewcomer opened 1 week ago

snewcomer commented 1 week ago

Has this bug been raised before?

Description

After pasting md content into yoopta editor

# Meeting

Date: [YYYY-MM-DD]
Chair: [Name]

## Executive Summary

And then typing to set Meeting as h1, it clears content.

Seen on version 4.8.4 and above.

Screenshots

https://github.com/user-attachments/assets/fcd8a352-0340-4441-b39b-6e4e83c25bc8

Do you want to work on this issue?

Yes

Darginec05 commented 1 week ago

copy/pasting issue 🧐 I think we should add more validation for slate in each plugin using extensions API

snewcomer commented 1 week ago

Is it setting the value appropriately on paste? Or dropping content bc of validation “on set”?

Darginec05 commented 1 week ago

So, problem in the next:

Block Paragraph contains only one element paragraph. Here is valid example:

 - block
    - element
      - text  

But by pasting this content from your example it creates four elements per Paragraph block. Here is invalid example

 - block
    - element
      - text 
    - element
      - text  
    - element
      - text  
    - element
      - text  

So, If you will check value of pasted block. It will be:

// current not valid value after pasting
const ParagraphBlockData = {
  id: 'eacacf8a-3421-46ee-b1b9-f024359f92d4',
  type: 'Paragraph',
  value: [
    // element
    {
      id: 'f2f77e36-f40d-4c69-951d-ba47fe9ed468',
      type: 'paragraph',
      children: [
        {
          text: '# Meeting',
        },
      ],
    },
    // element
    {
      id: 'f2f77e36-f40d-4c69-951d-ba47fe9ed468',
      type: 'paragraph',
      children: [
        {
          text: '',
        },
      ],
    },
    // element
    {
      id: 'f2f77e36-f40d-4c69-951d-ba47fe9ed468',
      type: 'paragraph',
      children: [
        {
          text: 'Date: [YYYY-MM-DD]',
        },
      ],
    },
    // element
    {
      id: 'f2f77e36-f40d-4c69-951d-ba47fe9ed468',
      type: 'paragraph',
      children: [
        {
          text: 'Chair: [Name]',
        },
      ],
    },
    // element
    {
      id: 'f2f77e36-f40d-4c69-951d-ba47fe9ed468',
      type: 'paragraph',
      children: [
        {
          text: '',
        },
      ],
    },
    // element
    {
      id: 'f2f77e36-f40d-4c69-951d-ba47fe9ed468',
      type: 'paragraph',
      children: [
        {
          text: '## Executive Summary',
        },
      ],
    },
  ],
  meta: {
    align: 'left',
    depth: 0,
    order: 0,
  },
};

instead of this valid:

const ParagraphBlockData = {
  id: 'eacacf8a-3421-46ee-b1b9-f024359f92d4',
  type: 'Paragraph',
  value: [
    // only one element
    {
      id: 'f2f77e36-f40d-4c69-951d-ba47fe9ed468',
      type: 'paragraph',
      children: [
        {
          text: '# Meeting \n Date: [YYYY-MM-DD] \n Chair: [Name] \n ## Executive Summary',
        },
      ],
    },
  ],
  meta: {
    align: 'left',
    depth: 0,
    order: 0,
  },
};
Darginec05 commented 1 week ago

The pasting of content is handled <SlateEditorComponent />, but I suggest to make validation on slate side. Let me know if I have explained the problem and the solution to you in an accessible way :D