feat: implement automatic CSS injection for the editor and update configuration options (#7)

Author: moutonjeremy

examples/basic/src/App.tsx

@@ -1,6 +1,7 @@
 import { useOpenBlock, OpenBlockView, useEditorContent, SlashMenu, BubbleMenu, TableHandles } from '@labbs/openblock-react';
 import { sampleDocument } from './data';
-import '@labbs/openblock-core/styles/editor.css';
+// CSS is now auto-injected by the editor - no need to import!
+// import '@labbs/openblock-core/styles/editor.css';
 import './styles.css';
 
 export default function App() {

packages/core/src/editor/Editor.ts

@@ -31,6 +31,7 @@ import { ProseMirrorAPI } from '../pm/ProseMirrorAPI';
 import { EditorConfig, defaultConfig, EditorEvents, EventHandler } from './EditorConfig';
 import { createSchema } from '../schema';
 import { createPlugins } from '../plugins';
+import { injectStyles } from '../styles/injectStyles';
 import {
   Block,
   PartialBlock,
@@ -76,6 +77,11 @@ export class OpenBlockEditor {
     this._config = { ...defaultConfig, ...config };
     this.pm = new ProseMirrorAPI(this);
 
+    // Auto-inject styles if enabled (default: true)
+    if (this._config.injectStyles !== false) {
+      injectStyles();
+    }
+
     this._schema = createSchema();
     this._createEditor();
 

packages/core/src/editor/EditorConfig.ts

@@ -118,6 +118,13 @@ export interface EditorConfig {
     nodeViews?: Record<string, NodeViewConstructor>;
   };
 
+  /**
+   * Whether to automatically inject editor styles into the document.
+   * Set to false if you want to provide your own CSS or import the stylesheet manually.
+   * @default true
+   */
+  injectStyles?: boolean;
+
   /**
    * Event callbacks.
    */
@@ -133,4 +140,5 @@ export interface EditorConfig {
 export const defaultConfig: Partial<EditorConfig> = {
   editable: true,
   autoFocus: false,
+  injectStyles: true,
 };

packages/core/src/index.ts

@@ -210,3 +210,9 @@ export type {
   CommandFn,
 } from './types';
 
+// ===========================================================================
+// STYLES
+// ===========================================================================
+
+export { injectStyles, removeStyles, areStylesInjected } from './styles/injectStyles';
+