markmap-view-plus 0.0.1

package/dist/to-markdown.d.ts

@@ -0,0 +1,34 @@
+import { IPureNode } from 'markmap-common';
+/**
+ * Convert a single HTML inline-content string to Markdown text.
+ * Handles common inline elements produced by markdown-it:
+ * strong, em, del/s, code, a, img, br, and HTML entities.
+ */
+export declare function htmlInlineToMarkdown(html: string): string;
+/**
+ * Serialize an `IPureNode` tree back to a Markdown string.
+ *
+ * This is the conceptual inverse of `Transformer.transform()`.
+ * The algorithm maps tree depth to Markdown heading levels:
+ *
+ * - depth 0  →  `# text`
+ * - depth 1  →  `## text`
+ * - depth 2  →  `### text`
+ * - depth 3+ →  `- text`  (indented list items, 2 spaces per extra level)
+ *
+ * A blank line is inserted between heading-level siblings to keep the
+ * output readable and round-trip-stable through `transform()`.
+ *
+ * @param root  Root node of the markmap tree (e.g. from `mm.getData(true)`).
+ * @returns     Markdown string.
+ *
+ * @example
+ * ```ts
+ * import { toMarkdown } from 'markmap-lib';
+ *
+ * const pureNode = mm.getData(true);   // IPureNode
+ * const markdown = toMarkdown(pureNode);
+ * console.log(markdown);
+ * ```
+ */
+export declare function toMarkdown(root: IPureNode): string;

package/dist/types.d.ts

@@ -0,0 +1,73 @@
+import { INode, IPureNode } from 'markmap-common';
+export interface IMarkmapState {
+    id: string;
+    data?: INode;
+    highlight?: INode;
+    rect: {
+        x1: number;
+        x2: number;
+        y1: number;
+        y2: number;
+    };
+}
+/**
+ * Portable options that can be derived into `IMarkmapOptions`.
+ */
+export interface IMarkmapJSONOptions {
+    color: string[];
+    colorFreezeLevel: number;
+    duration: number;
+    extraCss: string[];
+    extraJs: string[];
+    fitRatio: number;
+    initialExpandLevel: number;
+    maxInitialScale: number;
+    maxWidth: number;
+    nodeMinHeight: number;
+    paddingX: number;
+    pan: boolean;
+    spacingHorizontal: number;
+    spacingVertical: number;
+    zoom: boolean;
+    lineWidth: number | number[];
+}
+export type IMarkmapMode = 'display' | 'editable';
+export interface IMarkmapOptions {
+    autoFit: boolean;
+    duration: number;
+    embedGlobalCSS: boolean;
+    fitRatio: number;
+    id?: string;
+    initialExpandLevel: number;
+    maxInitialScale: number;
+    pan: boolean;
+    scrollForPan: boolean;
+    style?: (id: string) => string;
+    toggleRecursively: boolean;
+    zoom: boolean;
+    /** Preset shortcut: 'display' sets all interactive options to false; 'editable' sets them all to true. */
+    mode?: IMarkmapMode;
+    editable: boolean;
+    addable: boolean;
+    deletable: boolean;
+    collapseOnHover: boolean;
+    hoverBorder: boolean;
+    clickBorder: boolean;
+    onNodeEdit?: (node: INode, newContent: string) => void;
+    onNodeAdd?: (parent: INode, child: IPureNode) => void;
+    inputPlaceholder: string;
+    color: (node: INode) => string;
+    lineWidth: (node: INode) => number;
+    maxWidth: number;
+    nodeMinHeight: number;
+    paddingX: number;
+    spacingHorizontal: number;
+    spacingVertical: number;
+}
+export interface IPadding {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+export type ID3SVGElement = d3.Selection<SVGElement, INode, HTMLElement, INode>;

package/dist/util.d.ts

@@ -0,0 +1,7 @@
+import { IMarkmapJSONOptions, IMarkmapOptions } from './types';
+export declare function deriveOptions(jsonOptions?: Partial<IMarkmapJSONOptions>): Partial<IMarkmapOptions>;
+/**
+ * Credit: https://gist.github.com/jlevy/c246006675becc446360a798e2b2d781?permalink_comment_id=4738050#gistcomment-4738050
+ */
+export declare function simpleHash(str: string): string;
+export declare function childSelector<T extends Element>(filter?: string | ((el: T) => boolean)): () => T[];

package/dist/view.d.ts

@@ -0,0 +1,94 @@
+import type * as d3 from 'd3';
+import { Hook, INode, IPureNode } from 'markmap-common';
+import { ID3SVGElement, IMarkmapOptions, IMarkmapState, IPadding } from './types';
+export declare const globalCSS: string;
+/**
+ * A global hook to refresh all markmaps when called.
+ */
+export declare const refreshHook: Hook<[]>;
+export declare class Markmap {
+    options: {
+        autoFit: boolean;
+        duration: number;
+        embedGlobalCSS: boolean;
+        fitRatio: number;
+        id?: string;
+        initialExpandLevel: number;
+        maxInitialScale: number;
+        pan: boolean;
+        scrollForPan: boolean;
+        style?: (id: string) => string;
+        toggleRecursively: boolean;
+        zoom: boolean;
+        mode?: import("./types").IMarkmapMode;
+        editable: boolean;
+        addable: boolean;
+        deletable: boolean;
+        collapseOnHover: boolean;
+        hoverBorder: boolean;
+        clickBorder: boolean;
+        onNodeEdit?: (node: INode, newContent: string) => void;
+        onNodeAdd?: (parent: INode, child: IPureNode) => void;
+        inputPlaceholder: string;
+        color: (node: INode) => string;
+        lineWidth: (node: INode) => number;
+        maxWidth: number;
+        nodeMinHeight: number;
+        paddingX: number;
+        spacingHorizontal: number;
+        spacingVertical: number;
+    };
+    state: IMarkmapState;
+    svg: ID3SVGElement;
+    styleNode: d3.Selection<HTMLStyleElement, INode, HTMLElement, INode>;
+    g: d3.Selection<SVGGElement, INode, HTMLElement, INode>;
+    zoom: d3.ZoomBehavior<SVGElement, INode>;
+    private _observer;
+    private _disposeList;
+    /** Manages add / edit / delete overlays and node mutations. */
+    private _actions;
+    constructor(svg: string | SVGElement | ID3SVGElement, opts?: Partial<IMarkmapOptions>);
+    getStyleContent(): string;
+    updateStyle(): void;
+    handleZoom: (e: any) => void;
+    handlePan: (e: WheelEvent) => void;
+    toggleNode(data: INode, recursive?: boolean): Promise<void>;
+    handleClick: (e: MouseEvent, d: INode) => void;
+    private _initializeData;
+    private _relayout;
+    setOptions(opts?: Partial<IMarkmapOptions>): void;
+    setData(data?: IPureNode | null, opts?: Partial<IMarkmapOptions>): Promise<void>;
+    /**
+     * Get the whole mindmap data.
+     *
+     * - default: returns internal runtime node tree (`INode`) including `state`
+     * - `pure=true`: returns a plain data tree (`IPureNode`) without `state`
+     */
+    getData(): INode | undefined;
+    getData(pure: true): IPureNode | undefined;
+    setHighlight(node?: INode | null): Promise<void>;
+    private _getHighlightRect;
+    renderData(originData?: INode): Promise<void>;
+    transition<T extends d3.BaseType, U, P extends d3.BaseType, Q>(sel: d3.Selection<T, U, P, Q>): d3.Transition<T, U, P, Q>;
+    /**
+     * Fit the content to the viewport.
+     */
+    fit(maxScale?: number): Promise<void>;
+    findElement(node: INode): {
+        data: INode;
+        g: SVGGElement;
+    } | undefined;
+    /**
+     * Pan the content to make the provided node visible in the viewport.
+     */
+    ensureVisible(node: INode, padding?: Partial<IPadding>): Promise<void>;
+    /** @deprecated Use `ensureVisible` instead */
+    ensureView: (node: INode, padding?: Partial<IPadding>) => Promise<void>;
+    centerNode(node: INode, padding?: Partial<IPadding>): Promise<void>;
+    /**
+     * Scale content with it pinned at the center of the viewport.
+     */
+    rescale(scale: number): Promise<void>;
+    destroy(): void;
+    static create(svg: string | SVGElement | ID3SVGElement, opts?: Partial<IMarkmapOptions>, data?: IPureNode | null): Markmap;
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "markmap-view-plus",
+  "version": "0.0.1",
+  "description": "View markmaps in browser",
+  "author": "Lin Jiman <temman_lin@qq.com>",
+  "license": "MIT",
+  "keywords": [
+    "markmap",
+    "markdown",
+    "mindmap"
+  ],
+  "homepage": "https://github.com/markmap/markmap/packages/markmap-view-plus#readme",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/markmap/markmap.git"
+  },
+  "scripts": {
+    "clean": "del-cli dist tsconfig.tsbuildinfo",
+    "build:types": "tsc",
+    "build:js": "vite build && pnpm build:js:es",
+    "build:js:es": "cross-env TARGET=es vite build",
+    "build": "pnpm clean && pnpm /^build:/",
+    "prepublishOnly": "pnpm build"
+  },
+  "bugs": {
+    "url": "https://github.com/markmap/markmap/issues"
+  },
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "unpkg": "dist/browser/index.js",
+  "jsdelivr": "dist/browser/index.js",
+  "files": [
+    "dist"
+  ],
+  "typings": "dist/index.d.ts",
+  "dependencies": {
+    "@babel/runtime": "^7.22.6",
+    "d3": "^7.8.5"
+  },
+  "devDependencies": {
+    "@gera2ld/jsx-dom": "^2.2.2",
+    "@types/d3": "^7.4.0",
+    "@types/d3-flextree": "^2.1.1",
+    "d3-flextree": "^2.1.2",
+    "cross-env": "^7.0.3",
+    "markmap-common": "^0.18.9"
+  }
+  
+}