Implement custom editor tabs support

[bajrangCoder]

This PR introduces significant enhancements to the editor tab, including the ability to render HTML elements in tabs, improved media handling, and new APIs for plugin development. It also includes exception handling for SD card operations.

Key Features

1. Custom Editor Tab

   • Added support to render HTML elements in a custom tab

2. Media Handlers in Editor Tabs

   • Integrated handlers to display images, audio, and video directly in the editor tab, eliminating the need for popups.
   • Image handling supports zoom and drag functionalities.
   • Videos and audio are seamlessly rendered within the tab.

3. Exposed API for Plugins

   • Introduced an API for plugins to create custom tabs with customizable icons, content, and behavior. Example:

     const EditorFile = acode.require("editorFile");
     new EditorFile("MyApp", {
       type: "page",  // Defines a page-type tab
       render: true,  // Ensures content is rendered
       content: "Html",  // HTML content for the tab
       tabIcon: "icon document",  // Icon class for the tab
     });

4. New Audio Player Component

   • Implemented a audio player component with support for both touch and mouse interactions.

5. Exception Handling

   • Improved exception handling for operations involving the SD card.

---

Todo

• Tab Enhancements

  • Tabs now render HTML elements, not just the Ace editor.
  • Proper handling of methods for both editor-based and custom content.

• Plugin API Enhancements

  • Fully customizable tab, tab icons and content support for plugins.

• Media Handlers

  • Images:
    • Zoom in/out.
    • Drag to reposition.
  • Videos:
    • Seamless tab rendering.
  • Audio:
    • Integrated audio player with touch and mouse support.

• Testing

  • Comprehensive testing across all added functionalities.

[deadlyjack]

Hi Raunak, just a small suggestion, you can use Ref object for store element in a variable instead of querySelector.

E.g.

import Ref from 'html-tag-js/ref';

export default function MyComponent(props, children){
    const ref = new Ref();


    // or use before
    // ref.onref = (el) => {
    // stuff to do....
    // }

   return <div className="my-component">
        <p ref={ref}>My Component</p>
        <button on:click={() => ref.textContent = 'clicked on my component'}>Click me</button>
    </div>
}

[bajrangCoder]

Okay 👍