@pinkpixel/marzipan 1.0.5

package/docs/plugins.md

@@ -0,0 +1,57 @@
+# Plugin Catalogue
+
+Marzipan ships first-party plugins from the `src/plugins` directory. Each plugin exports a factory from `@pinkpixel/marzipan/plugins/<name>` so you can opt into only the code you need.
+
+## Using a plugin
+
+```ts
+import { Marzipan } from '@pinkpixel/marzipan';
+import { tablePlugin } from '@pinkpixel/marzipan/plugins/tablePlugin';
+
+new Marzipan('#editor', {
+  toolbar: true,
+  plugins: [tablePlugin({
+    defaultColumns: 3,
+    defaultRows: 4,
+  })],
+});
+```
+
+Every factory returns an object that Marzipan consumes internally. You can mix and match plugins freely.
+
+## Available plugins
+
+| Plugin | Import Path | Description |
+|--------|-------------|-------------|
+| `accentSwatchPlugin` | `@pinkpixel/marzipan/plugins/accentSwatchPlugin` | Adds a palette picker for accent colours and syncs with the toolbar + stats bar. |
+| `imageManagerPlugin` | `@pinkpixel/marzipan/plugins/imageManagerPlugin` | Dropzone and gallery UI for inserting images and managing uploads. |
+| `imagePickerPlugin` | `@pinkpixel/marzipan/plugins/imagePickerPlugin` | Toolbar button for inserting images via URL or optional uploader callback. |
+| `mermaidPlugin` | `@pinkpixel/marzipan/plugins/mermaidPlugin` | Lazy-loads Mermaid from npm/ESM and renders diagrams inline. |
+| `mermaidExternalPlugin` | `@pinkpixel/marzipan/plugins/mermaidExternal` | Mermaid integration that targets a CDN script tag—perfect for sandboxed playgrounds. |
+| `tablePlugin` | `@pinkpixel/marzipan/plugins/tablePlugin` | Toolbar-driven table generator with inline editing controls. |
+| `tableGridPlugin` | `@pinkpixel/marzipan/plugins/tableGridPlugin` | Grid overlay for rapid column/row creation (exports `tableGridStyles`). |
+| `tableGeneratorPlugin` | `@pinkpixel/marzipan/plugins/tableGenerator` | Quick GFM table inserter with prompt-driven sizing. |
+| `tinyHighlightPlugin` | `@pinkpixel/marzipan/plugins/tinyHighlight` | Zero-runtime syntax highlighting for fenced code blocks (`tinyHighlightStyles` helper available). |
+
+> 📝 The plugin names map 1:1 to files in `src/plugins`. Inspect those files for advanced configuration options.
+
+## Configuration tips
+
+- **Tree shaking** – Import plugins individually; bundlers remove unused exports automatically.
+- **Styling** – Some plugins inject their own CSS. Bakeshop demonstrates how to mirror the styling in your app.
+- **Events** – Many plugins accept callbacks (e.g., image handlers). Pass your own upload or analytics hooks through the factory options.
+- **Server-side rendering** – When using SSR, guard plugin usage behind `typeof window !== 'undefined'` if they rely on browser-only APIs.
+
+## Demo coverage
+
+The `bakeshop-demo` application renders every plugin in the “Plugin Gallery” panel. Launch it with:
+
+```bash
+cd bakeshop-demo
+npm install
+npm run dev
+```
+
+Use the panel toggles to see plugin behaviour before integrating it into your own project.
+
+For change history and new additions, see the [CHANGELOG](../CHANGELOG.md).

package/docs/quick-start.md

@@ -0,0 +1,90 @@
+# Marzipan Quick Start Guide
+
+Spin up the editor, wire up the bundled actions, and opt into plugins in just a few steps. 🎉
+
+## 1. Install the package
+
+```bash
+npm install @pinkpixel/marzipan
+```
+
+The package ships ESM output and TypeScript definitions. No extra formatting dependencies are required.
+
+## 2. Render your first editor
+
+```ts
+import { Marzipan } from '@pinkpixel/marzipan';
+
+const [editor] = new Marzipan('#my-editor', {
+  placeholder: 'Start writing…',
+  toolbar: true,
+  theme: 'solar',
+  smartLists: true,
+});
+```
+
+You can pass a selector string, DOM element, `NodeList`, or array of elements. The constructor always returns an array of instances.
+
+## 3. Trigger formatting with bundled actions
+
+```ts
+import { actions } from '@pinkpixel/marzipan';
+
+const textarea = document.querySelector<HTMLTextAreaElement>('#my-editor textarea');
+if (textarea) {
+  actions.toggleBold(textarea);
+}
+```
+
+All actions accept the target `HTMLTextAreaElement`. They’re the same utilities used internally by the toolbar and keyboard shortcuts.
+
+## 4. Enable a plugin
+
+Every plugin in `src/plugins` publishes under `@pinkpixel/marzipan/plugins/<name>`.
+
+```ts
+import { tablePlugin } from '@pinkpixel/marzipan/plugins/tablePlugin';
+import { tinyHighlight } from '@pinkpixel/marzipan/plugins/tinyHighlight';
+
+new Marzipan('#with-plugins', {
+  plugins: [tablePlugin(), tinyHighlight()],
+});
+```
+
+Each plugin exports a factory so you can configure behavior before adding it to the editor instance.
+
+## 5. React usage (example)
+
+```tsx
+import { useEffect, useRef } from 'react';
+import { Marzipan } from '@pinkpixel/marzipan';
+import { actions } from '@pinkpixel/marzipan';
+
+export function Editor() {
+  const hostRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!hostRef.current) return;
+    const [instance] = new Marzipan(hostRef.current, { toolbar: true });
+    return () => instance.destroy?.();
+  }, []);
+
+  return <div ref={hostRef} />;
+}
+```
+
+## 6. Explore the Bakeshop demo
+
+```bash
+cd bakeshop-demo
+npm install
+npm run dev
+```
+
+Open `http://localhost:5173` to experiment with every option, plugin, and action in a guided playground.
+
+## Next steps
+
+- Review the [API reference](./api.md) for events, helpers, and configuration details.
+- Browse the [Plugin Catalogue](./plugins.md) to discover tables, Mermaid, image helpers, and more.
+- Check [../CHANGELOG.md](../CHANGELOG.md) for the latest updates.

package/docs/types.d.ts

@@ -0,0 +1,231 @@
+/**
+ * TypeScript definitions for Marzipan markdown editor
+ * @version 1.0.0
+ * @author Pink Pixel
+ */
+
+export interface MarzipanTheme {
+  name: string;
+  colors: ThemeColors;
+}
+
+export interface ThemeColors {
+  // Base colors
+  background: string;
+  text: string;
+  textMuted?: string;
+  
+  // Syntax highlighting
+  comment: string;
+  keyword: string;
+  string: string;
+  number: string;
+  punctuation?: string;
+  
+  // UI elements
+  selection?: string;
+  border?: string;
+  toolbar?: string;
+  
+  // Interactive elements
+  linkHover?: string;
+  buttonActive?: string;
+  
+  // Additional colors for custom themes
+  [key: string]: string | undefined;
+}
+
+export interface MarzipanMobileOptions {
+  fontSize: string;
+  padding: string;
+  lineHeight: number;
+}
+
+export interface StatsData {
+  chars: number;
+  words: number;
+  lines: number;
+  line: number;
+  column: number;
+}
+
+export type StatsFormatter = (stats: StatsData) => string;
+
+export type ChangeHandler = (value: string, instance: Marzipan) => void;
+
+export type KeydownHandler = (event: KeyboardEvent, instance: Marzipan) => void;
+
+export interface ToolbarConfig {
+  buttons: Array<ToolbarButton | '|'>;
+}
+
+export type ToolbarButton = 
+  | 'bold' 
+  | 'italic' 
+  | 'strikethrough' 
+  | 'code' 
+  | 'link' 
+  | 'image' 
+  | 'quote' 
+  | 'ul' 
+  | 'ol' 
+  | 'hr' 
+  | 'toggle-plain';
+
+export interface TextareaProps {
+  [key: string]: any;
+  className?: string;
+  class?: string;
+  style?: Partial<CSSStyleDeclaration> | string;
+  'aria-label'?: string;
+  'data-testid'?: string;
+  maxlength?: number;
+  rows?: number;
+  cols?: number;
+}
+
+export interface MarzipanOptions {
+  // Typography
+  fontSize?: string;
+  lineHeight?: number;
+  fontFamily?: string;
+  padding?: string;
+  
+  // Mobile-specific styles
+  mobile?: Partial<MarzipanMobileOptions>;
+  
+  // Textarea properties
+  textareaProps?: TextareaProps;
+  
+  // Behavior
+  autofocus?: boolean;
+  autoResize?: boolean;
+  minHeight?: string;
+  maxHeight?: string | null;
+  placeholder?: string;
+  value?: string;
+  
+  // Callbacks
+  onChange?: ChangeHandler;
+  onKeydown?: KeydownHandler;
+  
+  // Features
+  showActiveLineRaw?: boolean;
+  showStats?: boolean;
+  toolbar?: boolean | ToolbarConfig;
+  statsFormatter?: StatsFormatter;
+  smartLists?: boolean;
+  
+  // Themes (per-instance)
+  theme?: string | MarzipanTheme;
+}
+
+export interface RenderOptions {
+  cleanHTML?: boolean;
+}
+
+export type TargetElement = string | Element | NodeList | Array<Element>;
+
+export declare class Marzipan {
+  // Static properties
+  static instances: WeakMap<Element, Marzipan>;
+  static stylesInjected: boolean;
+  static globalListenersInitialized: boolean;
+  static instanceCount: number;
+  static currentTheme: MarzipanTheme;
+  
+  // Static attached utilities
+  static MarkdownParser: any;
+  static ShortcutsManager: any;
+  static themes: { [key: string]: MarzipanTheme };
+  static getTheme: (name: string) => MarzipanTheme | null;
+
+  // Instance properties
+  element: Element;
+  container: HTMLElement;
+  wrapper: HTMLElement;
+  textarea: HTMLTextAreaElement;
+  preview: HTMLElement;
+  statsBar?: HTMLElement;
+  toolbar?: any;
+  shortcuts: any;
+  linkTooltip: any;
+  
+  options: Required<MarzipanOptions>;
+  instanceId: number;
+  initialized: boolean;
+  instanceTheme: string | MarzipanTheme | null;
+
+  // Constructor
+  constructor(target: TargetElement, options?: MarzipanOptions);
+
+  // Instance methods - Content Management
+  getValue(): string;
+  setValue(value: string): void;
+  getRenderedHTML(options?: RenderOptions): string;
+  getPreviewHTML(): string;
+  getCleanHTML(): string;
+
+  // Instance methods - Focus Management
+  focus(): void;
+  blur(): void;
+
+  // Instance methods - Display Modes
+  showPlainTextarea(show: boolean): boolean;
+  showPreviewMode(show: boolean): boolean;
+  showStats(show: boolean): void;
+
+  // Instance methods - Editor State
+  updatePreview(): void;
+  isInitialized(): boolean;
+  reinit(options?: Partial<MarzipanOptions>): void;
+  destroy(): void;
+
+  // Instance methods - Event Handlers (typically internal)
+  handleInput(event: Event): void;
+  handleKeydown(event: KeyboardEvent): void;
+  handleScroll(event: Event): void;
+  handleSmartListContinuation(): boolean;
+
+  // Static methods
+  static init(target: TargetElement, options?: MarzipanOptions): Array<Marzipan>;
+  static getInstance(element: Element): Marzipan | null;
+  static destroyAll(): void;
+  static setTheme(theme: string | MarzipanTheme, customColors?: Partial<ThemeColors>): void;
+  static injectStyles(force?: boolean): void;
+  static initGlobalListeners(): void;
+}
+
+// Default export
+export default Marzipan;
+
+// Module declaration for environments that need it
+declare module '@pinkpixel/marzipan' {
+  export default Marzipan;
+  export { 
+    Marzipan, 
+    MarzipanOptions, 
+    MarzipanTheme, 
+    ThemeColors, 
+    StatsData, 
+    StatsFormatter,
+    ChangeHandler,
+    KeydownHandler,
+    ToolbarConfig,
+    ToolbarButton,
+    TextareaProps,
+    RenderOptions,
+    TargetElement
+  };
+}
+
+// Global declaration for browser environments
+declare global {
+  interface Window {
+    Marzipan: typeof Marzipan;
+  }
+  
+  interface Element {
+    MarzipanInstance?: Marzipan;
+  }
+}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@pinkpixel/marzipan",
+  "version": "1.0.5",
+  "description": "Pure TypeScript markdown editor library with overlay preview",
+  "license": "Apache-2.0",
+  "type": "module",
+  "author": "Pink Pixel",
+  "email": "admin@pinkpixel.dev",
+  "homepage": "https://marzipan.pinkpixel.dev",
+  "repository": "https://github.com/pinkpixel-dev/marzipan",
+  "issues": "https://github.com/pinkpixel-dev/marzipan/issues",
+  "engines": {
+    "node": ">=20"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./plugins/*": {
+      "import": "./dist/plugins/*.js",
+      "types": "./dist/plugins/*.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "docs"
+  ],
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint .",
+    "prettier": "prettier --write .",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build",
+    "prepack": "npm run build"
+  },
+  "keywords": [
+    "markdown",
+    "editor",
+    "typescript",
+    "library",
+    "lightweight",
+    "textarea",
+    "overlay",
+    "preview",
+    "wysiwyg"
+  ],
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/node": "^24.5.2",
+    "@typescript-eslint/eslint-plugin": "8.44.1",
+    "@typescript-eslint/parser": "8.44.1",
+    "eslint": "^9.36.0",
+    "globals": "16.4.0",
+    "mermaid": "^11.12.0",
+    "prettier": "^3.6.2",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.44.1",
+    "vite": "^7.1.7"
+  }
+}