@principal-ade/industry-themed-mdx-editor 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Principal ADE Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,184 @@
+# @principal-ade/industry-themed-mdx-editor
+
+Industry-themed MDX editor wrapper with integrated theming support for `@mdxeditor/editor`.
+
+## Features
+
+- Seamless integration with `@a24z/industry-theme`
+- Automatic theme synchronization with MDXEditor
+- Built-in save functionality with dirty state tracking
+- Support for controlled and uncontrolled modes
+- TypeScript support with full type definitions
+- Custom CSS theming via CSS custom properties
+- Optional status bar with save indicators
+- File path tracking for context-aware operations
+
+## Installation
+
+```bash
+npm install @principal-ade/industry-themed-mdx-editor @mdxeditor/editor @a24z/industry-theme
+```
+
+or with bun:
+
+```bash
+bun add @principal-ade/industry-themed-mdx-editor @mdxeditor/editor @a24z/industry-theme
+```
+
+## Usage
+
+### Basic Usage with Theme Provider
+
+```tsx
+import { ThemedMDXEditorWithProvider } from '@principal-ade/industry-themed-mdx-editor';
+import '@mdxeditor/editor/style.css';
+import '@principal-ade/industry-themed-mdx-editor/styles.css';
+
+function App() {
+  return (
+    <ThemedMDXEditorWithProvider
+      markdown="# Hello World"
+      onChange={(value) => console.log(value)}
+      plugins={[
+        // Add your MDXEditor plugins here
+      ]}
+    />
+  );
+}
+```
+
+### Usage with Explicit Theme
+
+```tsx
+import { ThemedMDXEditor } from '@principal-ade/industry-themed-mdx-editor';
+import { useTheme } from '@a24z/industry-theme';
+import '@mdxeditor/editor/style.css';
+import '@principal-ade/industry-themed-mdx-editor/styles.css';
+
+function Editor() {
+  const { theme } = useTheme();
+
+  return (
+    <ThemedMDXEditor
+      theme={theme}
+      markdown="# Hello World"
+      onChange={(value) => console.log(value)}
+      plugins={[
+        // Add your MDXEditor plugins here
+      ]}
+    />
+  );
+}
+```
+
+### With Save Functionality
+
+```tsx
+import { ThemedMDXEditor } from '@principal-ade/industry-themed-mdx-editor';
+import { useTheme } from '@a24z/industry-theme';
+import {
+  headingsPlugin,
+  listsPlugin,
+  quotePlugin,
+  markdownShortcutPlugin,
+} from '@mdxeditor/editor';
+
+function Editor() {
+  const { theme } = useTheme();
+
+  const handleSave = async (content: string, context: { filePath?: string }) => {
+    console.log('Saving content:', content);
+    console.log('File path:', context.filePath);
+    // Perform save operation
+    await fetch('/api/save', {
+      method: 'POST',
+      body: JSON.stringify({ content, filePath: context.filePath }),
+    });
+  };
+
+  return (
+    <ThemedMDXEditor
+      theme={theme}
+      initialValue="# Hello World"
+      filePath="/docs/example.md"
+      onSave={handleSave}
+      enableSaveShortcut={true}
+      onDirtyChange={(isDirty) => console.log('Dirty:', isDirty)}
+      plugins={[
+        headingsPlugin(),
+        listsPlugin(),
+        quotePlugin(),
+        markdownShortcutPlugin(),
+      ]}
+    />
+  );
+}
+```
+
+### Using the Hook
+
+```tsx
+import { useThemedMDXEditor } from '@principal-ade/industry-themed-mdx-editor';
+
+function CustomComponent() {
+  const { theme, getCSSVariables } = useThemedMDXEditor();
+
+  return (
+    <div style={getCSSVariables()}>
+      {/* Your custom MDX editor UI */}
+    </div>
+  );
+}
+```
+
+## API
+
+### ThemedMDXEditor Props
+
+Extends all `MDXEditorProps` from `@mdxeditor/editor` with additional props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `theme` | `Theme` | Required | Industry theme object |
+| `loadingComponent` | `React.ReactNode` | - | Custom loading component |
+| `initialValue` | `string` | - | Initial content for uncontrolled mode |
+| `onSave` | `(value: string, context: { filePath?: string }) => void \| Promise<void>` | - | Save callback |
+| `filePath` | `string` | - | File path for context |
+| `enableSaveShortcut` | `boolean` | `true` | Enable Ctrl/Cmd+S shortcut |
+| `onDirtyChange` | `(isDirty: boolean) => void` | - | Dirty state callback |
+| `hideStatusBar` | `boolean` | `false` | Hide status bar |
+| `containerClassName` | `string` | - | Additional CSS classes |
+| `containerStyle` | `React.CSSProperties` | - | Additional styles |
+| `showLoadingState` | `boolean` | `false` | Show initial loading state |
+
+### ThemedMDXEditorWithProvider Props
+
+Same as `ThemedMDXEditor` but without the `theme` prop (uses theme from context).
+
+Additional props:
+- `themeName?: string` - Optional theme name to override current theme
+
+### useThemedMDXEditor Hook
+
+Returns:
+- `theme` - Processed theme object with editor-specific values
+- `getCSSVariables()` - Function that returns CSS custom properties object
+
+## CSS Custom Properties
+
+The package uses CSS custom properties for theming:
+
+- `--mdx-editor-bg` - Background color
+- `--mdx-editor-fg` - Foreground (text) color
+- `--mdx-editor-border` - Border color
+- `--mdx-editor-toolbar-bg` - Toolbar background
+- `--mdx-editor-font-family` - Font family
+- `--mdx-editor-font-size` - Font size
+- `--mdx-editor-code-bg` - Code block background
+- `--mdx-editor-selection-bg` - Selection background
+- `--mdx-editor-link-color` - Link color
+- `--mdx-editor-heading-color` - Heading color
+
+## License
+
+MIT © Principal ADE Team

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { ThemedMDXEditor } from './src/components/ThemedMDXEditor';
+export type { ThemedMDXEditorProps } from './src/components/ThemedMDXEditor';
+export { ThemedMDXEditorWithProvider } from './src/components/ThemedMDXEditorWithProvider';
+export type { ThemedMDXEditorWithProviderProps } from './src/components/ThemedMDXEditorWithProvider';
+export { useThemedMDXEditor } from './src/hooks/useThemedMDXEditor';
+export { createCodeMirrorTheme, createAutoCodeMirrorTheme } from './src/utils/codeMirrorTheme';
+export type { Theme } from '@a24z/industry-theme';
+export type { MDXEditorMethods, MDXEditorProps } from '@mdxeditor/editor';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AACnE,YAAY,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAE,2BAA2B,EAAE,MAAM,8CAA8C,CAAC;AAC3F,YAAY,EAAE,gCAAgC,EAAE,MAAM,8CAA8C,CAAC;AAGrG,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,OAAO,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAG/F,YAAY,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAGlD,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC"}