How to create a new plugin to wrap selected text in a DIV block

[anilknayak]

Hi I would like to create a plugin using slate-plugins, I would like to achieve the following steps

1. Select multiple components like list, image, table etc
2. Wrap around a DIV tag
3. Give an auto id to that NEW DIV tag
4. Return the content of that newly created DIV tag, so that I can save in DB
5. Then next time when I will load the Editor with initial values
6. Can delete that DIV using toolbar button and call a callback function before deletion.

I am new to this slate and I have gone through many topics but could not able to find a better document for plugin creation.

Could anyone guide me?

Thanks in advance.

[zbeyens]

Take a look to the Align plugin, it's using wrapNodes / unwrapNodes

[anilknayak]

I am successfully created the plugin, I have one more question

1. After creation of a wrap DIV element I could see in DOM as below

<div data-slate-node="element">...</div>

2. How can I add a className="" as defined in CSS file, My goal is to
   I have a CSS class name as "slate-block"

.slate-block {
  border: 1px solid black;
  margin: 2px;
}

Task 1:
I would like to add this class name and id while wrapping the content inside DIV. as below

<div data-slate-node="element" class="slate-block" id="123">...</div>
<div data-slate-node="element" class="slate-block" id="124">...</div>

Task 2:
For unwrapping the created DIV, I will click a outside button to unwrap the DIV instead of toggle button

Task 3:
While/After creation I would like to get the HTML element of wrapped content.

Task 4:
If a DIV is already created with same content, It will not further wrap any DIV for that content and a call back function will be called for an alert saying a content is already created and wrapped with DIV.

Could anyone help me with that?

[zbeyens]

Did you update to 0.62.0? You can easily set classNames on any plugin. See the options https://slate-plugins-next.netlify.app/?path=/docs/api-renderelement--page

For id generation, you can use withNodeID

[anilknayak]

I have updated to "@udecode/slate-plugins": "^0.62.1"

withNodeID it is not generating id

I have attached the block plugin, please take a look is not working or I am missing simething, Actually I have copied the align plugin and try to modify that.

Do you have any other documentation for that?

block.zip

[zbeyens]

On my side it is generating id for new blocks.

This is the only docs we have for now https://slate-plugins-api.netlify.app/.

[anilknayak]

I am very new to this React and slate. Could you please help me on this to understand the APIs? I did not find any tutorial on how to do things in slate. I might contribute to enhance the documentation for new plugin development.