feat(tabs): Implement Shadow DOM isolation for non-editor tabs

[bajrangCoder]

This PR introduces a major architectural change in how non-editor tabs are rendered and styled in Acode, implementing Shadow DOM isolation for better encapsulation and avoid conflicts.

Breaking Changes 🚨

• Non-editor tabs now use Shadow DOM encapsulation
• Direct DOM manipulation of tab content may not work as before
• Global styles no longer automatically affect tab content
• Plugin stylesheets need to be explicitly declared

New APIs for Plugin Developers 🛠

• addStyle(style: string): Add stylesheet to tab's shadow DOM
• New options in EditorFile constructor:

  interface FileOptions {
    // ... existing options ...
    stylesheets?: string | string[]; // URLs or CSS strings
  }

Migration Guide for Plugin Developers 📝

Before

const tab = new EditorFile("Custom Tab", {
  type: "page",
  content: myElement
});

// Global styles affected the content
document.head.appendChild(myStyles);

After

const tab = new EditorFile("Custom Tab", {
  type: "page",
  content: myElement,
  stylesheets: [
    '/plugin/styles.css',
    '.my-custom-styles { color: blue; }'
  ]
});

// Add styles later if needed
tab.addStyle('.dynamic-style { background: yellow; }');

[Copilot]

Copilot reviewed 1 out of 1 changed files in this pull request and generated no comments.

Comments suppressed due to low confidence (2)

src/lib/editorFile.js:6

• Ensure that the 'html-tag-js' dependency is properly installed and versioned in the project, as its absence could lead to runtime errors during element creation.

import tag from "html-tag-js";

src/lib/editorFile.js:914

• [nitpick] Consider adding tests to verify that dynamically added styles through 'addStyle' are correctly injected into the Shadow DOM for both external and inline styles.

addStyle(style) {

[deadlyjack]

Amazing PR. Working wonderfully.