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

package/dist/src/components/ThemedMDXEditor.d.ts

@@ -0,0 +1,20 @@
+import type { Theme } from '@a24z/industry-theme';
+import { type MDXEditorMethods, type MDXEditorProps } from '@mdxeditor/editor';
+import React from 'react';
+export interface ThemedMDXEditorProps extends Omit<MDXEditorProps, 'className' | 'contentEditableClassName'> {
+    theme: Theme;
+    loadingComponent?: React.ReactNode;
+    initialValue?: string;
+    onSave?: (value: string, context: {
+        filePath?: string;
+    }) => void | Promise<void>;
+    filePath?: string;
+    enableSaveShortcut?: boolean;
+    onDirtyChange?: (isDirty: boolean) => void;
+    hideStatusBar?: boolean;
+    containerClassName?: string;
+    containerStyle?: React.CSSProperties;
+    showLoadingState?: boolean;
+}
+export declare const ThemedMDXEditor: React.ForwardRefExoticComponent<ThemedMDXEditorProps & React.RefAttributes<MDXEditorMethods>>;
+//# sourceMappingURL=ThemedMDXEditor.d.ts.map

package/dist/src/components/ThemedMDXEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedMDXEditor.d.ts","sourceRoot":"","sources":["../../../src/components/ThemedMDXEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,KAQN,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,cAAc,EAAE,WAAW,GAAG,0BAA0B,CAAC;IAI1G,KAAK,EAAE,KAAK,CAAC;IAIb,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAInC,YAAY,CAAC,EAAE,MAAM,CAAC;IAItB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE;QAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAIjF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAIlB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAI7B,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAK3C,aAAa,CAAC,EAAE,OAAO,CAAC;IAIxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAI5B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAIrC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAKD,eAAO,MAAM,eAAe,+FAwR1B,CAAC"}

package/dist/src/components/ThemedMDXEditorWithProvider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type ThemedMDXEditorProps } from './ThemedMDXEditor';
+export type ThemedMDXEditorWithProviderProps = Omit<ThemedMDXEditorProps, 'theme'>;
+export declare const ThemedMDXEditorWithProvider: React.ForwardRefExoticComponent<ThemedMDXEditorWithProviderProps & React.RefAttributes<import("@mdxeditor/editor").MDXEditorMethods>>;
+//# sourceMappingURL=ThemedMDXEditorWithProvider.d.ts.map

package/dist/src/components/ThemedMDXEditorWithProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedMDXEditorWithProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ThemedMDXEditorWithProvider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE/E,MAAM,MAAM,gCAAgC,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC,CAAC;AAMnF,eAAO,MAAM,2BAA2B,uIAMtC,CAAC"}

package/dist/src/hooks/useThemedMDXEditor.d.ts

@@ -0,0 +1,29 @@
+import type { Extension } from '@codemirror/state';
+export declare function useThemedMDXEditor(): {
+    theme: {
+        colors: {
+            background: string;
+            text: string;
+            textSecondary: string;
+            backgroundSecondary: string;
+            backgroundTertiary: string;
+            border: string;
+            primary: string;
+            warning: string;
+            highlight: string;
+        };
+        fonts: {
+            body: string;
+            monospace: string;
+        };
+        fontSizes: {
+            small: number;
+            normal: number;
+            medium: number;
+            large: number;
+        };
+    };
+    getCSSVariables: () => Record<string, string>;
+    getCodeMirrorExtensions: () => Extension[];
+};
+//# sourceMappingURL=useThemedMDXEditor.d.ts.map

package/dist/src/hooks/useThemedMDXEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedMDXEditor.d.ts","sourceRoot":"","sources":["../../../src/hooks/useThemedMDXEditor.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAMnD,wBAAgB,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;2BA0CzB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;mCAGmB,SAAS,EAAE;EAS5D"}

package/dist/src/utils/codeMirrorTheme.d.ts

@@ -0,0 +1,5 @@
+import type { Extension } from '@codemirror/state';
+import type { Theme } from '@a24z/industry-theme';
+export declare function createCodeMirrorTheme(theme: Theme): Extension;
+export declare function createAutoCodeMirrorTheme(theme: Theme): Extension;
+//# sourceMappingURL=codeMirrorTheme.d.ts.map

package/dist/src/utils/codeMirrorTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeMirrorTheme.d.ts","sourceRoot":"","sources":["../../../src/utils/codeMirrorTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAMlD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAqD7D;AAsBD,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,CAsDjE"}

package/dist/styles.css

@@ -0,0 +1,120 @@
+/**
+ * Industry-themed MDX Editor styles
+ * These CSS custom properties integrate MDXEditor with the industry-theme system
+ * Based on Radix UI theming system used by MDXEditor
+ *
+ * Note: All Radix color variables are set directly by the component
+ * This file provides additional content styling and customizations
+ */
+
+/* MDXEditor content styling */
+.themed-mdx-editor .mdx-editor-content {
+  font-family: var(--mdx-editor-font-family, 'monospace');
+  font-size: var(--mdx-editor-font-size, 14px);
+  color: var(--mdx-editor-fg, #1a1a1a);
+  line-height: 1.6;
+}
+
+/* Headings */
+.themed-mdx-editor .mdx-editor-content h1,
+.themed-mdx-editor .mdx-editor-content h2,
+.themed-mdx-editor .mdx-editor-content h3,
+.themed-mdx-editor .mdx-editor-content h4,
+.themed-mdx-editor .mdx-editor-content h5,
+.themed-mdx-editor .mdx-editor-content h6 {
+  color: var(--mdx-editor-heading-color, #1a1a1a);
+}
+
+/* Links */
+.themed-mdx-editor .mdx-editor-content a {
+  color: var(--mdx-editor-link-color, #0066cc);
+}
+
+/* Inline code */
+.themed-mdx-editor .mdx-editor-content code {
+  background-color: var(--mdx-editor-code-bg, #f5f5f5);
+  font-family: var(--mdx-editor-font-family, 'monospace');
+  padding: 2px 6px;
+  border-radius: 3px;
+}
+
+/* Code blocks - target the CodeMirror editor wrapper */
+.themed-mdx-editor .cm-editor {
+  background-color: var(--mdx-editor-code-bg, #f5f5f5) !important;
+}
+
+.themed-mdx-editor .cm-editor .cm-scroller {
+  font-family: var(--mdx-editor-font-family, 'monospace');
+  background-color: var(--mdx-editor-code-bg, #f5f5f5);
+}
+
+.themed-mdx-editor .cm-editor .cm-gutters {
+  background-color: var(--mdx-editor-code-bg, #f5f5f5);
+  border-right: 1px solid var(--mdx-editor-border, #e0e0e0);
+  color: var(--mdx-editor-fg, #1a1a1a);
+}
+
+.themed-mdx-editor .cm-editor .cm-content {
+  background-color: var(--mdx-editor-code-bg, #f5f5f5);
+  color: var(--mdx-editor-fg, #1a1a1a);
+}
+
+.themed-mdx-editor .cm-editor .cm-line {
+  background-color: var(--mdx-editor-code-bg, #f5f5f5);
+}
+
+.themed-mdx-editor .cm-editor .cm-activeLineGutter {
+  background-color: var(--baseBgHover, #f0f0f0);
+}
+
+.themed-mdx-editor .cm-editor .cm-activeLine {
+  background-color: var(--baseBgHover, #f0f0f0);
+}
+
+/* Selection */
+.themed-mdx-editor .mdx-editor-content ::selection {
+  background-color: var(--mdx-editor-selection-bg, rgba(0, 123, 255, 0.2));
+}
+
+/* Toolbar */
+.themed-mdx-editor [class*='toolbar'] {
+  background-color: var(--mdx-editor-toolbar-bg, #f8f8f8);
+  border-bottom: 1px solid var(--mdx-editor-border, #e0e0e0);
+}
+
+/* Toolbar buttons */
+.themed-mdx-editor [class*='toolbar'] button {
+  color: var(--mdx-editor-fg, #1a1a1a);
+}
+
+.themed-mdx-editor [class*='toolbar'] button:hover {
+  background-color: var(--mdx-editor-selection-bg, rgba(0, 123, 255, 0.1));
+}
+
+/* Source mode editor */
+.themed-mdx-editor [class*='sourceEditor'] {
+  font-family: var(--mdx-editor-font-family, 'monospace');
+  font-size: var(--mdx-editor-font-size, 14px);
+  background-color: var(--mdx-editor-bg, #ffffff);
+  color: var(--mdx-editor-fg, #1a1a1a);
+}
+
+/* Scrollbars */
+.themed-mdx-editor ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.themed-mdx-editor ::-webkit-scrollbar-track {
+  background: var(--mdx-editor-bg, #ffffff);
+}
+
+.themed-mdx-editor ::-webkit-scrollbar-thumb {
+  background: var(--mdx-editor-border, #e0e0e0);
+  border-radius: 6px;
+}
+
+.themed-mdx-editor ::-webkit-scrollbar-thumb:hover {
+  background: var(--mdx-editor-fg, #1a1a1a);
+  opacity: 0.5;
+}

package/package.json

@@ -0,0 +1,106 @@
+{
+  "name": "@principal-ade/industry-themed-mdx-editor",
+  "version": "0.1.0",
+  "description": "Industry-themed MDX editor wrapper with integrated theming",
+  "type": "module",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "bun run clean && bun run build:esm && bun run build:types && bun run build:styles",
+    "build:esm": "NODE_ENV=production bun build ./index.ts --outfile ./dist/index.mjs --format esm --target browser --external react --external react-dom --external @mdxeditor/editor --external @a24z/industry-theme",
+    "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly --declaration --declarationMap",
+    "build:styles": "cp src/styles/mdx-editor-theme.css dist/styles.css",
+    "dev": "bun run build --watch",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "clean": "rm -rf dist coverage",
+    "storybook": "storybook dev -p 6008",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [
+    "mdx",
+    "editor",
+    "markdown",
+    "mdxeditor",
+    "theme",
+    "industry"
+  ],
+  "author": "Principal ADE Team",
+  "license": "MIT",
+  "dependencies": {
+    "@a24z/industry-theme": "^0.1.1"
+  },
+  "peerDependencies": {
+    "@codemirror/state": ">=6.0.0",
+    "@codemirror/view": ">=6.0.0",
+    "@mdxeditor/editor": ">=3.0.0",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@codemirror/view": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@mdxeditor/editor": "^3.20.0",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-onboarding": "^9.1.13",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
+    "@storybook/react-webpack5": "^9.1.13",
+    "@types/bun": "latest",
+    "@types/node": "^22.15.26",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.8",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "esbuild": "^0.25.8",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-storybook": "^9.1.13",
+    "prettier": "^3.6.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "storybook": "^9.1.13",
+    "typescript": "^5.0.4",
+    "typescript-eslint": "^8.38.0"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/principal-ade/industry-themed-mdx-editor.git"
+  },
+  "homepage": "https://principal-ade.com"
+}