feat: implement modular note editor system with BlockInsertionPanel a…

[eedali]

Add Editor.js and support for multiple editor engines

Description

Integrated Editor.js as a native alternative to the Tiptap editor in the Note module. Users can now switch between a block-based editing experience (Editor.js) and the standard WYSIWYG experience (Tiptap) via a new toggle/dropdown in the Settings menu. A safe data transition and parsing mechanism has also been added to prevent data loss or formatting errors when users switch between these two different data structures.

Fixes #28

Type of Change

Please check the options that are relevant:

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• UI/UX improvement (visual changes or enhancements)
• Documentation update

Screenshots / Video

(Yeni eklediğin Settings dropdown menüsünün ve Note modülündeki Editor.js arayüzünün ekran görüntülerini veya videosunu buraya ekleyebilirsin.)

Checklist

Please check all the boxes before submitting your PR:

• I have tested my code locally and it works flawlessly.
• I am strictly sure that my changes DO NOT break KoBar's "Ghost Window" (transparent window) and click-through logic.
• I have added necessary descriptions and comments to my code.
• My code does not generate any new warnings or errors in the console.

[arindam-sahoo]

When we will try to convert a block to another type of content, it shows two checklist in the list. Reproduce this bug and fix it.

[arindam-sahoo]

While user will be using the Code Block, they will be facing two issues:

1. Syntax Highlighting : Code** block content is being rendered as raw HTML/CSS instead of formatted code**

   • In the Python example, content like:

     #98c379;">"color: #c678dd;">def add(a,b):

     is displayed to the user.

   • This suggests syntax-highlighting markup or HTML styles are leaking into the editor output instead of being parsed/rendered correctly.

2. Inconsistent Syntax Highlighting : Syntax highlighting appears to break after editing a code block. The editor starts displaying raw styling/HTML fragments (e.g. color: #c678dd;">) and newly typed code is no longer highlighted. Code blocks should continue to render syntax highlighting dynamically as content is added or modified. This looks like a rendering/serialization issue in the code block implementation introduced with the EditorJS integration.

Kobar.PR.53.Review.mp4

[eedali]

@arindam-sahoo Can you check it?

[arindam-sahoo]

When we will try to convert a block to another type of content, it shows two checklist in the list. Reproduce this bug and fix it.

@eedali This is fixed.

[arindam-sahoo]

While user will be using the Code Block, they will be facing two issues:

1. Syntax Highlighting : Code** block content is being rendered as raw HTML/CSS instead of formatted code**

   • In the Python example, content like:

     #98c379;">"color: #c678dd;">def add(a,b):

     is displayed to the user.

   • This suggests syntax-highlighting markup or HTML styles are leaking into the editor output instead of being parsed/rendered correctly.

2. Inconsistent Syntax Highlighting : Syntax highlighting appears to break after editing a code block. The editor starts displaying raw styling/HTML fragments (e.g. color: #c678dd;">) and newly typed code is no longer highlighted. Code blocks should continue to render syntax highlighting dynamically as content is added or modified. This looks like a rendering/serialization issue in the code block implementation introduced with the EditorJS integration.

Kobar.PR.53.Review.mp4

@eedali This still needs attention

[arindam-sahoo]

Noticed another bug, that whichever Heading we create it always remain in only one size, even if we try to change it, it does not.

[eedali]

@arindam-sahoo Can you check again?

[arindam-sahoo]

@arindam-sahoo Can you check again?

Sure

[arindam-sahoo]

While user will be using the Code Block, they will be facing two issues:

1. Syntax Highlighting : Code** block content is being rendered as raw HTML/CSS instead of formatted code**

   • In the Python example, content like:

     #98c379;">"color: #c678dd;">def add(a,b):

     is displayed to the user.

   • This suggests syntax-highlighting markup or HTML styles are leaking into the editor output instead of being parsed/rendered correctly.

2. Inconsistent Syntax Highlighting : Syntax highlighting appears to break after editing a code block. The editor starts displaying raw styling/HTML fragments (e.g. color: #c678dd;">) and newly typed code is no longer highlighted. Code blocks should continue to render syntax highlighting dynamically as content is added or modified. This looks like a rendering/serialization issue in the code block implementation introduced with the EditorJS integration.

Kobar.PR.53.Review.mp4

Fixed. Works as expected.

[arindam-sahoo]

Noticed another bug, that whichever Heading we create it always remain in only one size, even if we try to change it, it does not.

Works Now. WE can go ahead and merge this PR.

[arindam-sahoo]

All the bugs found in the Integration Testing are now working as expected.