@kerebron/editor 0.4.2 → 0.4.4

package/assets/vars.css

@@ -48,10 +48,15 @@
   --kb-color-border: #e5e7eb;
   --kb-color-border-strong: #d1d5db;
 
-  /* Menu specific colors (Google Docs style) */
-  --kb-menu-dropdown-dark-bg: #344154;
-  --kb-menu-dropdown-dark-border: #5f6368;
-  --kb-menu-dropdown-dark-text: #e8eaed;
+  /* Menu specific colors */
+  /* Light theme defaults (used for dropdown menus) */
+  --kb-menu-dropdown-bg: #ffffff;
+  --kb-menu-dropdown-border: #d1d5db;
+  --kb-menu-dropdown-text: #1f2937;
+  /* Legacy naming - kept for backwards compatibility */
+  --kb-menu-dropdown-dark-bg: #ffffff;
+  --kb-menu-dropdown-dark-border: #d1d5db;
+  --kb-menu-dropdown-dark-text: #1f2937;
   --kb-menu-info-bg: #e8f0fe;
   --kb-menu-info-text: #1967d2;
 }
@@ -67,6 +72,14 @@
     --kb-color-border-strong: #4b5563;
     --kb-color-hover: rgba(59, 130, 246, 0.1);
     --kb-color-active: rgba(59, 130, 246, 0.2);
+    /* Menu dropdown colors for dark mode */
+    --kb-menu-dropdown-bg: #344154;
+    --kb-menu-dropdown-border: #5f6368;
+    --kb-menu-dropdown-text: #e8eaed;
+    /* Legacy naming */
+    --kb-menu-dropdown-dark-bg: #344154;
+    --kb-menu-dropdown-dark-border: #5f6368;
+    --kb-menu-dropdown-dark-text: #e8eaed;
   }
 }
 
@@ -92,4 +105,33 @@
   --kb-color-border-strong: #4b5563;
   --kb-color-hover: rgba(59, 130, 246, 0.1);
   --kb-color-active: rgba(59, 130, 246, 0.2);
+  /* Menu dropdown colors for dark mode */
+  --kb-menu-dropdown-bg: #344154;
+  --kb-menu-dropdown-border: #5f6368;
+  --kb-menu-dropdown-text: #e8eaed;
+  /* Legacy naming */
+  --kb-menu-dropdown-dark-bg: #344154;
+  --kb-menu-dropdown-dark-border: #5f6368;
+  --kb-menu-dropdown-dark-text: #e8eaed;
+}
+
+/* Explicit light theme class (overrides system dark mode preference) */
+.kb-component--light {
+  --kb-color-text: #1f2937;
+  --kb-color-text-muted: #6b7280;
+  --kb-color-surface: #ffffff;
+  --kb-color-surface-elevated: #f9fafb;
+  --kb-color-surface-hover: rgba(60, 64, 67, 0.08);
+  --kb-color-border: #e5e7eb;
+  --kb-color-border-strong: #d1d5db;
+  --kb-color-hover: rgba(59, 130, 246, 0.05);
+  --kb-color-active: rgba(59, 130, 246, 0.1);
+  /* Menu dropdown colors for light mode */
+  --kb-menu-dropdown-bg: #ffffff;
+  --kb-menu-dropdown-border: #d1d5db;
+  --kb-menu-dropdown-text: #1f2937;
+  /* Legacy naming */
+  --kb-menu-dropdown-dark-bg: #ffffff;
+  --kb-menu-dropdown-dark-border: #d1d5db;
+  --kb-menu-dropdown-dark-text: #1f2937;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kerebron/editor",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "license": "MIT",
   "module": "./esm/mod.js",
   "exports": {
@@ -21,9 +21,6 @@
     },
     "./utilities": {
       "import": "./esm/utilities/mod.js"
-    },
-    "./react": {
-      "import": "./esm/react/mod.js"
     }
   },
   "scripts": {},
@@ -31,8 +28,7 @@
     "prosemirror-model": "1.25.3",
     "prosemirror-state": "1.4.3",
     "prosemirror-transform": "1.10.4",
-    "prosemirror-view": "1.40.0",
-    "@deno/shim-deno": "~0.18.0"
+    "prosemirror-view": "1.40.0"
   },
   "devDependencies": {
     "@types/node": "^20.9.0"

package/esm/_dnt.shims.d.ts

@@ -1,6 +0,0 @@
-import { Deno } from "@deno/shim-deno";
-export { Deno } from "@deno/shim-deno";
-export declare const dntGlobalThis: Omit<typeof globalThis, "Deno"> & {
-    Deno: typeof Deno;
-};
-//# sourceMappingURL=_dnt.shims.d.ts.map

package/esm/_dnt.shims.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_dnt.shims.d.ts","sourceRoot":"","sources":["../src/_dnt.shims.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAKvC,eAAO,MAAM,aAAa;;CAA2C,CAAC"}

package/esm/_dnt.shims.js

@@ -1,61 +0,0 @@
-import { Deno } from "@deno/shim-deno";
-export { Deno } from "@deno/shim-deno";
-const dntGlobals = {
-    Deno,
-};
-export const dntGlobalThis = createMergeProxy(globalThis, dntGlobals);
-function createMergeProxy(baseObj, extObj) {
-    return new Proxy(baseObj, {
-        get(_target, prop, _receiver) {
-            if (prop in extObj) {
-                return extObj[prop];
-            }
-            else {
-                return baseObj[prop];
-            }
-        },
-        set(_target, prop, value) {
-            if (prop in extObj) {
-                delete extObj[prop];
-            }
-            baseObj[prop] = value;
-            return true;
-        },
-        deleteProperty(_target, prop) {
-            let success = false;
-            if (prop in extObj) {
-                delete extObj[prop];
-                success = true;
-            }
-            if (prop in baseObj) {
-                delete baseObj[prop];
-                success = true;
-            }
-            return success;
-        },
-        ownKeys(_target) {
-            const baseKeys = Reflect.ownKeys(baseObj);
-            const extKeys = Reflect.ownKeys(extObj);
-            const extKeysSet = new Set(extKeys);
-            return [...baseKeys.filter((k) => !extKeysSet.has(k)), ...extKeys];
-        },
-        defineProperty(_target, prop, desc) {
-            if (prop in extObj) {
-                delete extObj[prop];
-            }
-            Reflect.defineProperty(baseObj, prop, desc);
-            return true;
-        },
-        getOwnPropertyDescriptor(_target, prop) {
-            if (prop in extObj) {
-                return Reflect.getOwnPropertyDescriptor(extObj, prop);
-            }
-            else {
-                return Reflect.getOwnPropertyDescriptor(baseObj, prop);
-            }
-        },
-        has(_target, prop) {
-            return prop in extObj || prop in baseObj;
-        },
-    });
-}

package/esm/react/EditorContent.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import type { CoreEditor } from '../CoreEditor.js';
-export interface EditorContentProps {
-    /** The editor instance from useEditor */
-    editor: CoreEditor | null;
-    /** Additional class name */
-    className?: string;
-    /** Additional inline styles */
-    style?: React.CSSProperties;
-}
-export interface EditorContentRef {
-    /** Get the container element */
-    getElement: () => HTMLDivElement | null;
-}
-/**
- * EditorContent renders the Kerebron editor.
- * Use with the useEditor hook.
- *
- * @example
- * ```tsx
- * const editor = useEditor({ extensions: [StarterKit] })
- * return <EditorContent editor={editor} />
- * ```
- */
-export declare const EditorContent: any;
-//# sourceMappingURL=EditorContent.d.ts.map

package/esm/react/EditorContent.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EditorContent.d.ts","sourceRoot":"","sources":["../../src/react/EditorContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,WAAW,kBAAkB;IACjC,yCAAyC;IACzC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,gCAAgC;IAChC,UAAU,EAAE,MAAM,cAAc,GAAG,IAAI,CAAC;CACzC;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,KA+BzB,CAAC"}

package/esm/react/EditorContent.js

@@ -1,32 +0,0 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
-/**
- * EditorContent renders the Kerebron editor.
- * Use with the useEditor hook.
- *
- * @example
- * ```tsx
- * const editor = useEditor({ extensions: [StarterKit] })
- * return <EditorContent editor={editor} />
- * ```
- */
-export const EditorContent = forwardRef(({ editor, className = '', style }, ref) => {
-    const containerRef = useRef(null);
-    useImperativeHandle(ref, () => ({
-        getElement: () => containerRef.current,
-    }));
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container || !editor)
-            return;
-        // Get the editor's DOM element and append it to our container
-        const editorDom = editor.view?.dom;
-        if (editorDom && editorDom.parentElement !== container) {
-            container.appendChild(editorDom);
-        }
-        return () => {
-            // Don't remove on cleanup - editor.destroy() handles this
-        };
-    }, [editor]);
-    return (React.createElement("div", { ref: containerRef, className: `kb-component ${className}`.trim(), style: style }));
-});
-EditorContent.displayName = 'EditorContent';

package/esm/react/mod.d.ts

@@ -1,24 +0,0 @@
-/**
- * React bindings for Kerebron Editor
- *
- * @example
- * ```tsx
- * import { useEditor, EditorContent } from '@kerebron/editor/react'
- * import { StarterKit } from '@kerebron/editor-kits/StarterKit'
- *
- * const MyEditor = () => {
- *   const editor = useEditor({
- *     extensions: [StarterKit],
- *     content: '<p>Hello World!</p>',
- *   })
- *
- *   return <EditorContent editor={editor} />
- * }
- * ```
- *
- * @module
- */
-export { useEditor, type UseEditorOptions } from './useEditor.js';
-export { EditorContent, type EditorContentProps, type EditorContentRef, } from './EditorContent.js';
-export { CoreEditor } from '../CoreEditor.js';
-//# sourceMappingURL=mod.d.ts.map

package/esm/react/mod.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mod.d.ts","sourceRoot":"","sources":["../../src/react/mod.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,EACvB,KAAK,gBAAgB,GACtB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/esm/react/mod.js

@@ -1,24 +0,0 @@
-/**
- * React bindings for Kerebron Editor
- *
- * @example
- * ```tsx
- * import { useEditor, EditorContent } from '@kerebron/editor/react'
- * import { StarterKit } from '@kerebron/editor-kits/StarterKit'
- *
- * const MyEditor = () => {
- *   const editor = useEditor({
- *     extensions: [StarterKit],
- *     content: '<p>Hello World!</p>',
- *   })
- *
- *   return <EditorContent editor={editor} />
- * }
- * ```
- *
- * @module
- */
-export { useEditor } from './useEditor.js';
-export { EditorContent, } from './EditorContent.js';
-// Re-export CoreEditor for convenience
-export { CoreEditor } from '../CoreEditor.js';

package/esm/react/useEditor.d.ts

@@ -1,38 +0,0 @@
-import { type DependencyList } from 'react';
-import { CoreEditor } from '../CoreEditor.js';
-import type { AnyExtensionOrReq, Content } from '../types.js';
-export interface UseEditorOptions {
-    /** Array of extensions to use */
-    extensions?: AnyExtensionOrReq[];
-    /** Initial HTML content */
-    content?: string;
-    /** Initial JSON content */
-    initialContent?: Content;
-    /** CDN URL for WASM files */
-    cdnUrl?: string;
-    /** Document URI */
-    uri?: string;
-    /** Called when editor is ready */
-    onReady?: (editor: CoreEditor) => void;
-    /** Called on every transaction */
-    onTransaction?: (editor: CoreEditor) => void;
-    /** Called when content changes */
-    onChange?: (editor: CoreEditor) => void;
-    /** Prevent immediate render (useful for SSR) */
-    immediatelyRender?: boolean;
-}
-/**
- * React hook for creating and managing a Kerebron editor instance.
- *
- * @example
- * ```tsx
- * const editor = useEditor({
- *   extensions: [StarterKit],
- *   content: '<p>Hello World!</p>',
- * })
- *
- * return <EditorContent editor={editor} />
- * ```
- */
-export declare function useEditor(options?: UseEditorOptions, deps?: DependencyList): CoreEditor | null;
-//# sourceMappingURL=useEditor.d.ts.map

package/esm/react/useEditor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEditor.d.ts","sourceRoot":"","sources":["../../src/react/useEditor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAA+B,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE9D,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACjC,2BAA2B;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7C,kCAAkC;IAClC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CACvB,OAAO,GAAE,gBAAqB,EAC9B,IAAI,GAAE,cAAmB,GACxB,UAAU,GAAG,IAAI,CAyEnB"}

package/esm/react/useEditor.js

@@ -1,69 +0,0 @@
-import * as dntShim from "../_dnt.shims.js";
-import { useEffect, useRef, useState } from 'react';
-import { CoreEditor } from '../CoreEditor.js';
-/**
- * React hook for creating and managing a Kerebron editor instance.
- *
- * @example
- * ```tsx
- * const editor = useEditor({
- *   extensions: [StarterKit],
- *   content: '<p>Hello World!</p>',
- * })
- *
- * return <EditorContent editor={editor} />
- * ```
- */
-export function useEditor(options = {}, deps = []) {
-    const [editor, setEditor] = useState(null);
-    const editorContainerRef = useRef(null);
-    const optionsRef = useRef(options);
-    // Keep options ref updated
-    optionsRef.current = options;
-    useEffect(() => {
-        // Skip if SSR and immediatelyRender is false
-        if (options.immediatelyRender === false && typeof dntShim.dntGlobalThis === 'undefined') {
-            return;
-        }
-        const { extensions = [], content, initialContent, cdnUrl, uri, onReady, onTransaction, onChange, } = optionsRef.current;
-        // Create a container element for the editor
-        const container = document.createElement('div');
-        editorContainerRef.current = container;
-        const editorInstance = new CoreEditor({
-            element: container,
-            extensions,
-            content: initialContent,
-            cdnUrl,
-            uri,
-        });
-        // Set up event listeners
-        if (onTransaction) {
-            editorInstance.addEventListener('transaction', () => {
-                onTransaction(editorInstance);
-            });
-        }
-        if (onChange) {
-            editorInstance.addEventListener('changed', () => {
-                onChange(editorInstance);
-            });
-        }
-        // Load HTML content if provided
-        if (content) {
-            const buffer = new TextEncoder().encode(content);
-            editorInstance.loadDocument('text/html', buffer).catch(() => {
-                // If HTML loading fails, try setting as plain text
-                console.warn('Failed to load HTML content');
-            });
-        }
-        setEditor(editorInstance);
-        if (onReady) {
-            onReady(editorInstance);
-        }
-        // Cleanup
-        return () => {
-            editorInstance.destroy();
-            setEditor(null);
-        };
-    }, deps); // eslint-disable-line react-hooks/exhaustive-deps
-    return editor;
-}