npm - @gravity-ui/markdown-editor - Versions diffs - 15.20.0 → 15.22.0 - Mend

@gravity-ui/markdown-editor 15.20.0 → 15.22.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (114) hide show

package/build/cjs/react-utils/hooks/useAutoSave.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+export interface AutoSaveOptions {
+    enabled?: boolean;
+    delay?: number;
+}
+export interface UseAutoSaveProps {
+    initialValue: string;
+    onSave: (value: string, shouldClose?: boolean) => void;
+    onClose: () => void;
+    autoSave?: AutoSaveOptions;
+}
+export interface UseAutoSaveReturn {
+    value: string;
+    hasUnsavedChanges: boolean;
+    handleChange: (newValue: string) => void;
+    handleManualSave: () => void;
+    handleClearTimeout: () => void;
+    isAutoSaveEnabled: boolean;
+    isSaveDisabled: boolean;
+}
+/**
+ * autosave functionality for extensions with edit block
+ */
+export declare const useAutoSave: ({ autoSave, initialValue, onClose, onSave, }: UseAutoSaveProps) => UseAutoSaveReturn;

package/build/cjs/react-utils/hooks/useAutoSave.js ADDED Viewed

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAutoSave = void 0;
+const react_1 = require("react");
+const DEFAULT_AUTOSAVE = {
+    enabled: true,
+    delay: 500,
+};
+/**
+ * autosave functionality for extensions with edit block
+ */
+const useAutoSave = ({ autoSave, initialValue, onClose, onSave, }) => {
+    const { enabled: autoSaveEnabled, delay: autoSaveDelay } = autoSave ?? DEFAULT_AUTOSAVE;
+    const isAutoSaveEnabled = Boolean(autoSaveEnabled);
+    const [value, setValue] = (0, react_1.useState)(initialValue || '');
+    const [hasUnsavedChanges, setHasUnsavedChanges] = (0, react_1.useState)(false);
+    const autoSaveTimeoutRef = (0, react_1.useRef)();
+    const handleClearTimeout = () => {
+        if (autoSaveTimeoutRef.current) {
+            clearTimeout(autoSaveTimeoutRef.current);
+        }
+    };
+    const handleChange = (newValue) => {
+        setValue(newValue);
+        const hasChanges = newValue !== initialValue;
+        setHasUnsavedChanges(hasChanges);
+        if (isAutoSaveEnabled && hasChanges) {
+            handleClearTimeout();
+            const delay = autoSaveDelay ?? DEFAULT_AUTOSAVE.delay;
+            autoSaveTimeoutRef.current = setTimeout(() => {
+                onSave(newValue);
+                setHasUnsavedChanges(false);
+            }, delay);
+        }
+    };
+    const handleManualSave = () => {
+        handleClearTimeout();
+        onSave(value);
+        onClose();
+    };
+    // сleanup timeout on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            handleClearTimeout();
+        };
+    }, []);
+    const isSaveDisabled = isAutoSaveEnabled && !hasUnsavedChanges;
+    return {
+        value,
+        hasUnsavedChanges,
+        handleChange,
+        handleManualSave,
+        handleClearTimeout,
+        isAutoSaveEnabled,
+        isSaveDisabled,
+    };
+};
+exports.useAutoSave = useAutoSave;
+//# sourceMappingURL=useAutoSave.js.map

package/build/cjs/react-utils/hooks/useAutoSave.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useAutoSave.js","sourceRoot":"../../../../src","sources":["react-utils/hooks/useAutoSave.ts"],"names":[],"mappings":";;;AAAA,iCAAkD;AAwBlD,MAAM,gBAAgB,GAAG;IACrB,OAAO,EAAE,IAAI;IACb,KAAK,EAAE,GAAG;CACb,CAAC;AAEF;;GAEG;AACI,MAAM,WAAW,GAAG,CAAC,EACxB,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,MAAM,GACS,EAAqB,EAAE;IACtC,MAAM,EAAC,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,aAAa,EAAC,GAAG,QAAQ,IAAI,gBAAgB,CAAC;IACtF,MAAM,iBAAiB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;IAEnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,YAAY,IAAI,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAClE,MAAM,kBAAkB,GAAG,IAAA,cAAM,GAAkB,CAAC;IAEpD,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,IAAI,kBAAkB,CAAC,OAAO,EAAE,CAAC;YAC7B,YAAY,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,EAAE;QACtC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,MAAM,UAAU,GAAG,QAAQ,KAAK,YAAY,CAAC;QAC7C,oBAAoB,CAAC,UAAU,CAAC,CAAC;QAEjC,IAAI,iBAAiB,IAAI,UAAU,EAAE,CAAC;YAClC,kBAAkB,EAAE,CAAC;YAErB,MAAM,KAAK,GAAG,aAAa,IAAI,gBAAgB,CAAC,KAAK,CAAC;YACtD,kBAAkB,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBACzC,MAAM,CAAC,QAAQ,CAAC,CAAC;gBACjB,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAChC,CAAC,EAAE,KAAK,CAAC,CAAC;QACd,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC1B,kBAAkB,EAAE,CAAC;QACrB,MAAM,CAAC,KAAK,CAAC,CAAC;QACd,OAAO,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,6BAA6B;IAC7B,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,OAAO,GAAG,EAAE;YACR,kBAAkB,EAAE,CAAC;QACzB,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,iBAAiB,IAAI,CAAC,iBAAiB,CAAC;IAE/D,OAAO;QACH,KAAK;QACL,iBAAiB;QACjB,YAAY;QACZ,gBAAgB;QAChB,kBAAkB;QAClB,iBAAiB;QACjB,cAAc;KACjB,CAAC;AACN,CAAC,CAAC;AA3DW,QAAA,WAAW,eA2DtB","sourcesContent":["import {useEffect, useRef, useState} from 'react';\n\nexport interface AutoSaveOptions {\n enabled?: boolean;\n delay?: number;\n}\n\nexport interface UseAutoSaveProps {\n initialValue: string;\n onSave: (value: string, shouldClose?: boolean) => void;\n onClose: () => void;\n autoSave?: AutoSaveOptions;\n}\n\nexport interface UseAutoSaveReturn {\n value: string;\n hasUnsavedChanges: boolean;\n handleChange: (newValue: string) => void;\n handleManualSave: () => void;\n handleClearTimeout: () => void;\n isAutoSaveEnabled: boolean;\n isSaveDisabled: boolean;\n}\n\nconst DEFAULT_AUTOSAVE = {\n enabled: true,\n delay: 500,\n};\n\n/**\n * autosave functionality for extensions with edit block\n */\nexport const useAutoSave = ({\n autoSave,\n initialValue,\n onClose,\n onSave,\n}: UseAutoSaveProps): UseAutoSaveReturn => {\n const {enabled: autoSaveEnabled, delay: autoSaveDelay} = autoSave ?? DEFAULT_AUTOSAVE;\n const isAutoSaveEnabled = Boolean(autoSaveEnabled);\n\n const [value, setValue] = useState(initialValue || '');\n const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n const autoSaveTimeoutRef = useRef<NodeJS.Timeout>();\n\n const handleClearTimeout = () => {\n if (autoSaveTimeoutRef.current) {\n clearTimeout(autoSaveTimeoutRef.current);\n }\n };\n\n const handleChange = (newValue: string) => {\n setValue(newValue);\n const hasChanges = newValue !== initialValue;\n setHasUnsavedChanges(hasChanges);\n\n if (isAutoSaveEnabled && hasChanges) {\n handleClearTimeout();\n\n const delay = autoSaveDelay ?? DEFAULT_AUTOSAVE.delay;\n autoSaveTimeoutRef.current = setTimeout(() => {\n onSave(newValue);\n setHasUnsavedChanges(false);\n }, delay);\n }\n };\n\n const handleManualSave = () => {\n handleClearTimeout();\n onSave(value);\n onClose();\n };\n\n // сleanup timeout on unmount\n useEffect(() => {\n return () => {\n handleClearTimeout();\n };\n }, []);\n\n const isSaveDisabled = isAutoSaveEnabled && !hasUnsavedChanges;\n\n return {\n value,\n hasUnsavedChanges,\n handleChange,\n handleManualSave,\n handleClearTimeout,\n isAutoSaveEnabled,\n isSaveDisabled,\n };\n};\n"]}

package/build/cjs/react-utils/hooks.d.ts CHANGED Viewed

@@ -7,4 +7,4 @@ export declare const useComponentWillMount: (cb: () => void) => void;
 export declare const useRenderTime: (cb: (time: number) => void) => void;
 type AnyFunction = (...args: any[]) => any;
 export declare function useDebounce<Fn extends AnyFunction>(cb: Fn, wait: number): import("lodash").DebouncedFunc<(...args: Parameters<Fn>) => void>;
-export {};
+export { useAutoSave, type AutoSaveOptions, type UseAutoSaveProps, type UseAutoSaveReturn, } from "./hooks/useAutoSave.js";

package/build/cjs/react-utils/hooks.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRenderTime = exports.useComponentWillMount = exports.useElementState = void 0;
+exports.useAutoSave = exports.useRenderTime = exports.useComponentWillMount = exports.useElementState = void 0;
 exports.useBooleanState = useBooleanState;
 exports.useDebounce = useDebounce;
 const react_1 = require("react");
@@ -43,4 +43,6 @@ function useDebounce(cb, wait) {
     (0, react_1.useEffect)(() => () => debouncedFn.cancel(), [debouncedFn]);
     return debouncedFn;
 }
+var useAutoSave_1 = require("./hooks/useAutoSave.js");
+Object.defineProperty(exports, "useAutoSave", { enumerable: true, get: function () { return useAutoSave_1.useAutoSave; } });
 //# sourceMappingURL=hooks.js.map

package/build/cjs/react-utils/hooks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hooks.js","sourceRoot":"../../../src","sources":["react-utils/hooks.ts"],"names":[],"mappings":";;;AAYA,0CAUC;AAuBD,kCAeC;AA5DD,iCAAwE;AAExE,yCAAmD;AAEnD,yCAAmC;AAE5B,MAAM,eAAe,GAAG,GAA4D,EAAE,CACzF,IAAA,gBAAQ,EAAW,IAAI,CAAC,CAAC;AADhB,QAAA,eAAe,mBACC;AAK7B,SAAgB,eAAe,CAC3B,OAAkC;IAElC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAU,OAAO,CAAC,CAAC;IACrD,OAAO;QACH,KAAK;QACL,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;QACrC,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;QACtC,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC;KACjD,CAAC;AACN,CAAC;AAEM,MAAM,qBAAqB,GAAG,CAAC,EAAc,EAAE,EAAE;IACpD,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAE/B,IAAI,SAAS,CAAC,OAAO;QAAE,EAAE,EAAE,CAAC;IAE5B,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;AAC9B,CAAC,CAAC;AANW,QAAA,qBAAqB,yBAMhC;AAEK,MAAM,aAAa,GAAG,CAAC,EAA0B,EAAE,EAAE;IACxD,IAAI,IAAI,GAAG,CAAC,CAAC;IAEb,IAAA,6BAAqB,EAAC,GAAG,EAAE;QACvB,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,IAAA,yBAAa,EAAC,GAAG,EAAE;QACf,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAVW,QAAA,aAAa,iBAUxB;AAGF,SAAgB,WAAW,CAAyB,EAAM,EAAE,IAAY;IACpE,MAAM,QAAQ,GAAG,IAAA,qBAAS,EAAC,EAAE,CAAC,CAAC;IAE/B,MAAM,WAAW,GAAG,IAAA,eAAO,EACvB,GAAG,EAAE,CACD,IAAA,iBAAQ,EAAC,CAAC,GAAG,IAAoB,EAAE,EAAE;QACjC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACvC,CAAC,EAAE,IAAI,CAAC,EACZ,CAAC,QAAQ,EAAE,IAAI,CAAC,CACnB,CAAC;IAEF,6BAA6B;IAC7B,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3D,OAAO,WAAW,CAAC;AACvB,CAAC","sourcesContent":["import {useCallback, useEffect, useMemo, useRef, useState} from 'react';\n\nimport {useEffectOnce, useLatest} from 'react-use';\n\nimport {debounce} from '../lodash';\n\nexport const useElementState = <T extends HTMLElement>(): [T \| null, React.RefCallback<T>] =>\n useState<T \| null>(null);\n\ntype SetTrue = () => void;\ntype SetFalse = () => void;\ntype Toggle = () => void;\nexport function useBooleanState(\n initial: boolean \| (() => boolean),\n): [boolean, SetTrue, SetFalse, Toggle] {\n const [value, setValue] = useState<boolean>(initial);\n return [\n value,\n useCallback(() => setValue(true), []),\n useCallback(() => setValue(false), []),\n useCallback(() => setValue((val) => !val), []),\n ];\n}\n\nexport const useComponentWillMount = (cb: () => void) => {\n const willMount = useRef(true);\n\n if (willMount.current) cb();\n\n willMount.current = false;\n};\n\nexport const useRenderTime = (cb: (time: number) => void) => {\n let time = 0;\n\n useComponentWillMount(() => {\n time = Date.now();\n });\n\n useEffectOnce(() => {\n cb(Date.now() - time);\n });\n};\n\ntype AnyFunction = (...args: any[]) => any;\nexport function useDebounce<Fn extends AnyFunction>(cb: Fn, wait: number) {\n const latestCb = useLatest(cb);\n\n const debouncedFn = useMemo(\n () =>\n debounce((...args: Parameters<Fn>) => {\n latestCb.current.apply(null, args);\n }, wait),\n [latestCb, wait],\n );\n\n // cancel function on unmount\n useEffect(() => () => debouncedFn.cancel(), [debouncedFn]);\n\n return debouncedFn;\n}\n"]}
1	+ {"version":3,"file":"hooks.js","sourceRoot":"../../../src","sources":["react-utils/hooks.ts"],"names":[],"mappings":";;;AAYA,0CAUC;AAuBD,kCAeC;AA5DD,iCAAwE;AAExE,yCAAmD;AAEnD,yCAAmC;AAE5B,MAAM,eAAe,GAAG,GAA4D,EAAE,CACzF,IAAA,gBAAQ,EAAW,IAAI,CAAC,CAAC;AADhB,QAAA,eAAe,mBACC;AAK7B,SAAgB,eAAe,CAC3B,OAAkC;IAElC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAU,OAAO,CAAC,CAAC;IACrD,OAAO;QACH,KAAK;QACL,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;QACrC,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;QACtC,IAAA,mBAAW,EAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC;KACjD,CAAC;AACN,CAAC;AAEM,MAAM,qBAAqB,GAAG,CAAC,EAAc,EAAE,EAAE;IACpD,MAAM,SAAS,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAC;IAE/B,IAAI,SAAS,CAAC,OAAO;QAAE,EAAE,EAAE,CAAC;IAE5B,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC;AAC9B,CAAC,CAAC;AANW,QAAA,qBAAqB,yBAMhC;AAEK,MAAM,aAAa,GAAG,CAAC,EAA0B,EAAE,EAAE;IACxD,IAAI,IAAI,GAAG,CAAC,CAAC;IAEb,IAAA,6BAAqB,EAAC,GAAG,EAAE;QACvB,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,IAAA,yBAAa,EAAC,GAAG,EAAE;QACf,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAVW,QAAA,aAAa,iBAUxB;AAGF,SAAgB,WAAW,CAAyB,EAAM,EAAE,IAAY;IACpE,MAAM,QAAQ,GAAG,IAAA,qBAAS,EAAC,EAAE,CAAC,CAAC;IAE/B,MAAM,WAAW,GAAG,IAAA,eAAO,EACvB,GAAG,EAAE,CACD,IAAA,iBAAQ,EAAC,CAAC,GAAG,IAAoB,EAAE,EAAE;QACjC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IACvC,CAAC,EAAE,IAAI,CAAC,EACZ,CAAC,QAAQ,EAAE,IAAI,CAAC,CACnB,CAAC;IAEF,6BAA6B;IAC7B,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,MAAM,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3D,OAAO,WAAW,CAAC;AACvB,CAAC;AAED,sDAK6B;AAJzB,0GAAA,WAAW,OAAA","sourcesContent":["import {useCallback, useEffect, useMemo, useRef, useState} from 'react';\n\nimport {useEffectOnce, useLatest} from 'react-use';\n\nimport {debounce} from '../lodash';\n\nexport const useElementState = <T extends HTMLElement>(): [T \| null, React.RefCallback<T>] =>\n useState<T \| null>(null);\n\ntype SetTrue = () => void;\ntype SetFalse = () => void;\ntype Toggle = () => void;\nexport function useBooleanState(\n initial: boolean \| (() => boolean),\n): [boolean, SetTrue, SetFalse, Toggle] {\n const [value, setValue] = useState<boolean>(initial);\n return [\n value,\n useCallback(() => setValue(true), []),\n useCallback(() => setValue(false), []),\n useCallback(() => setValue((val) => !val), []),\n ];\n}\n\nexport const useComponentWillMount = (cb: () => void) => {\n const willMount = useRef(true);\n\n if (willMount.current) cb();\n\n willMount.current = false;\n};\n\nexport const useRenderTime = (cb: (time: number) => void) => {\n let time = 0;\n\n useComponentWillMount(() => {\n time = Date.now();\n });\n\n useEffectOnce(() => {\n cb(Date.now() - time);\n });\n};\n\ntype AnyFunction = (...args: any[]) => any;\nexport function useDebounce<Fn extends AnyFunction>(cb: Fn, wait: number) {\n const latestCb = useLatest(cb);\n\n const debouncedFn = useMemo(\n () =>\n debounce((...args: Parameters<Fn>) => {\n latestCb.current.apply(null, args);\n }, wait),\n [latestCb, wait],\n );\n\n // cancel function on unmount\n useEffect(() => () => debouncedFn.cancel(), [debouncedFn]);\n\n return debouncedFn;\n}\n\nexport {\n useAutoSave,\n type AutoSaveOptions,\n type UseAutoSaveProps,\n type UseAutoSaveReturn,\n} from './hooks/useAutoSave';\n"]}

package/build/cjs/version.js CHANGED Viewed

@@ -2,5 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 /** During build process, the current version will be injected here */
-exports.VERSION = typeof '15.20.0' !== 'undefined' ? '15.20.0' : 'unknown';
+exports.VERSION = typeof '15.22.0' !== 'undefined' ? '15.22.0' : 'unknown';
 //# sourceMappingURL=version.js.map

package/build/cjs/version.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":";;;AAAA,sEAAsE;AACzD,QAAA,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.20.0' !== 'undefined' ? '15.20.0' : 'unknown';\n"]}
1	+ {"version":3,"file":"version.js","sourceRoot":"../../src","sources":["version.ts"],"names":[],"mappings":";;;AAAA,sEAAsE;AACzD,QAAA,OAAO,GAAG,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC","sourcesContent":["/** During build process, the current version will be injected here */\nexport const VERSION = typeof '15.22.0' !== 'undefined' ? '15.22.0' : 'unknown';\n"]}

package/build/cjs/view/components/YfmHtml/YfmStaticView.d.ts CHANGED Viewed

@@ -1,12 +1,25 @@
 import type { QAProps } from '@gravity-ui/uikit';
 import type { ClassNameProps } from "../../../classname.js";
+export declare const b: import("@bem-react/classname").ClassNameFormatter;
+export type YfmMods = {
+    'links-visited'?: boolean;
+    'no-list-reset'?: boolean;
+    'no-stripe-table'?: boolean;
+    [key: string]: string | number | boolean | undefined;
+};
 export type YfmStaticViewProps = ClassNameProps & QAProps & {
     html: string;
+    mods?: YfmMods;
+    /** @deprecated Use prop `mods.['links-visited']` instead */
     linksVisited?: boolean;
+    /** @deprecated Use prop `mods['no-list-reset']` instead */
     noListReset?: boolean;
 };
 export declare const YfmStaticView: import("react").ForwardRefExoticComponent<ClassNameProps & QAProps & {
     html: string;
+    mods?: YfmMods;
+    /** @deprecated Use prop `mods.['links-visited']` instead */
     linksVisited?: boolean;
+    /** @deprecated Use prop `mods['no-list-reset']` instead */
     noListReset?: boolean;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/build/cjs/view/components/YfmHtml/YfmStaticView.js CHANGED Viewed

@@ -1,11 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.YfmStaticView = void 0;
+exports.YfmStaticView = exports.b = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const classnames_1 = require("@bem-react/classnames");
+const classname_1 = require("@bem-react/classname");
+exports.b = (0, classname_1.cn)('yfm');
 exports.YfmStaticView = (0, react_1.forwardRef)(function YFMStaticView(props, ref) {
-    const { html, linksVisited, noListReset, className, qa } = props;
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, dangerouslySetInnerHTML: { __html: html }, className: (0, classnames_1.classnames)('yfm', linksVisited ? 'yfm_links-visited' : undefined, noListReset ? 'yfm_no-list-reset' : undefined, className), "data-qa": qa }));
+    const { html, className, qa } = props;
+    const mods = { ...props.mods };
+    if (props.linksVisited)
+        mods['links-visited'] = true;
+    if (props.noListReset)
+        mods['no-list-reset'] = true;
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, dangerouslySetInnerHTML: { __html: html }, className: (0, exports.b)(mods, className), "data-qa": qa }));
 });
 //# sourceMappingURL=YfmStaticView.js.map

package/build/cjs/view/components/YfmHtml/YfmStaticView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"YfmStaticView.js","sourceRoot":"../../../../../src","sources":["view/components/YfmHtml/YfmStaticView.tsx"],"names":[],"mappings":";;;;AAAA,iCAAiC;AAEjC,~~sDAAiD~~;~~AAYpC~~,QAAA,aAAa,GAAG,IAAA,kBAAU,EACnC,SAAS,aAAa,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EAAC,IAAI,EAAE,~~YAAY,EAAE,WAAW,EAAE,~~SAAS,EAAE,EAAE,EAAC,GAAG,KAAK,CAAC;~~IAE/D~~,~~OAAO~~,~~CACH~~,~~gCACI,~~GAAG,~~EAAE~~,GAAG,~~EACR~~,~~uBAAuB~~,~~EAAE~~,EAAC,~~MAAM~~,~~EAAE~~,IAAI,~~EAAC~~,~~EACvC~~,~~SAAS~~,~~EAAE~~,~~IAAA~~,~~uBAAU~~,~~EACjB~~,KAAK,~~EACL~~,~~YAAY~~,~~CAAC~~,CAAC,CAAC,~~mBAAmB~~,~~CAAC~~,CAAC,~~CAAC~~,~~SAAS~~,~~EAC9C~~,~~WAAW~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~mBAAmB~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,SAAS,~~EAC7C~~,SAAS,~~CACZ~~,~~aACQ~~,EAAE,GACb,CACL,CAAC;AACN,CAAC,CACJ,CAAC","sourcesContent":["import {forwardRef} from 'react';\n\nimport {~~classnames~~} from '@bem-react/~~classnames~~';\nimport type {QAProps} from '@gravity-ui/uikit';\n\nimport type {ClassNameProps} from '../../../classname';\n\nexport type YfmStaticViewProps = ClassNameProps &\n QAProps & {\n html: string;\n linksVisited?: boolean;\n noListReset?: boolean;\n };\n\nexport const YfmStaticView = forwardRef<HTMLDivElement, YfmStaticViewProps>(\n function YFMStaticView(props, ref) {\n const {html, ~~linksVisited, noListReset,~~ className, qa} = props;\n\n return (\n <div\n ref={ref}\n dangerouslySetInnerHTML={{__html: html}}\n className={~~classnames~~(~~\n 'yfm',\n linksVisited~~ ~~? 'yfm_links-visited' : undefined,\n noListReset ? 'yfm_no-list-reset' : undefined,\n~~ className~~,\n~~ )}\n data-qa={qa}\n />\n );\n },\n);\n"]}
1	+ {"version":3,"file":"YfmStaticView.js","sourceRoot":"../../../../../src","sources":["view/components/YfmHtml/YfmStaticView.tsx"],"names":[],"mappings":";;;;AAAA,iCAAiC;AAEjC,oDAAwC;AAK3B,QAAA,CAAC,GAAG,IAAA,cAAE,EAAC,KAAK,CAAC,CAAC;AAmBd,QAAA,aAAa,GAAG,IAAA,kBAAU,EACnC,SAAS,aAAa,CAAC,KAAK,EAAE,GAAG;IAC7B,MAAM,EAAC,IAAI,EAAE,SAAS,EAAE,EAAE,EAAC,GAAG,KAAK,CAAC;IACpC,MAAM,IAAI,GAAG,EAAC,GAAG,KAAK,CAAC,IAAI,EAAC,CAAC;IAE7B,IAAI,KAAK,CAAC,YAAY;QAAE,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;IACrD,IAAI,KAAK,CAAC,WAAW;QAAE,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC;IAEpD,OAAO,CACH,gCACI,GAAG,EAAE,GAAG,EACR,uBAAuB,EAAE,EAAC,MAAM,EAAE,IAAI,EAAC,EACvC,SAAS,EAAE,IAAA,SAAC,EAAC,IAAI,EAAE,SAAS,CAAC,aACpB,EAAE,GACb,CACL,CAAC;AACN,CAAC,CACJ,CAAC","sourcesContent":["import {forwardRef} from 'react';\n\nimport {cn} from '@bem-react/classname';\nimport type {QAProps} from '@gravity-ui/uikit';\n\nimport type {ClassNameProps} from '../../../classname';\n\nexport const b = cn('yfm');\n\nexport type YfmMods = {\n 'links-visited'?: boolean;\n 'no-list-reset'?: boolean;\n 'no-stripe-table'?: boolean;\n [key: string]: string \| number \| boolean \| undefined;\n};\n\nexport type YfmStaticViewProps = ClassNameProps &\n QAProps & {\n html: string;\n mods?: YfmMods;\n /** @deprecated Use prop `mods.['links-visited']` instead /\n linksVisited?: boolean;\n /* @deprecated Use prop `mods['no-list-reset']` instead */\n noListReset?: boolean;\n };\n\nexport const YfmStaticView = forwardRef<HTMLDivElement, YfmStaticViewProps>(\n function YFMStaticView(props, ref) {\n const {html, className, qa} = props;\n const mods = {...props.mods};\n\n if (props.linksVisited) mods['links-visited'] = true;\n if (props.noListReset) mods['no-list-reset'] = true;\n\n return (\n <div\n ref={ref}\n dangerouslySetInnerHTML={{__html: html}}\n className={b(mods, className)}\n data-qa={qa}\n />\n );\n },\n);\n"]}

package/build/cjs/view/components/YfmHtml/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-export type { YfmStaticViewProps } from "./YfmStaticView.js";
+export type { YfmMods, YfmStaticViewProps } from "./YfmStaticView.js";
 export { YfmStaticView } from "./YfmStaticView.js";

package/build/cjs/view/components/YfmHtml/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["view/components/YfmHtml/index.ts"],"names":[],"mappings":";;;AACA,oDAA8C;AAAtC,8GAAA,aAAa,OAAA","sourcesContent":["export type {YfmStaticViewProps} from './YfmStaticView';\nexport {YfmStaticView} from './YfmStaticView';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["view/components/YfmHtml/index.ts"],"names":[],"mappings":";;;AACA,oDAA8C;AAAtC,8GAAA,aAAa,OAAA","sourcesContent":["export type {YfmMods, YfmStaticViewProps} from './YfmStaticView';\nexport {YfmStaticView} from './YfmStaticView';\n"]}

package/build/esm/extensions/additional/FoldingHeading/plugins/folding.css CHANGED Viewed

@@ -1,15 +1,17 @@
-.pm-h-folding-hidden {
+.ProseMirror .pm-h-folding-hidden,
+.yfm.ProseMirror .pm-h-folding-hidden {
   display: none;
 }
-.pm-h-folding-content {
+.ProseMirror .pm-h-folding-content,
+.yfm.ProseMirror .pm-h-folding-content {
   padding-left: 28px;
 }
-.pm-h-folding-separator {
+.ProseMirror .pm-h-folding-separator,
+.yfm.ProseMirror .pm-h-folding-separator {
   position: relative;
 }
-.pm-h-folding-separator::before {
+.ProseMirror .pm-h-folding-separator::before,
+.yfm.ProseMirror .pm-h-folding-separator::before {
   position: absolute;
   z-index: 1;
   bottom: -4px;
@@ -22,7 +24,8 @@
   mask-size: 12px;
   transform: translateY(80%);
 }
-.pm-h-folding-separator::after {
+.ProseMirror .pm-h-folding-separator::after,
+.yfm.ProseMirror .pm-h-folding-separator::after {
   position: absolute;
   z-index: 1;
   bottom: -8px;
@@ -32,8 +35,8 @@
   content: "";
   border-top: 1px dashed var(--g-color-line-generic);
 }
-.pm-h-folding-label::after {
+.ProseMirror .pm-h-folding-label::after,
+.yfm.ProseMirror .pm-h-folding-label::after {
   position: absolute;
   z-index: 1;
   right: 2px;

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/MermaidView.d.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import type { Mermaid } from 'mermaid' with { 'resolution-mode': 'import' };
 import type { Node } from 'prosemirror-model';
 import type { EditorView } from 'prosemirror-view';
 import { MermaidConsts } from "../MermaidSpecs/const.js";
+import type { MermaidOptions } from "../index.js";
 export declare const cnMermaid: import("@bem-react/classname").ClassNameFormatter;
 export declare const STOP_EVENT_CLASSNAME = "prosemirror-stop-event";
 import "./Mermaid.css";
@@ -13,4 +14,5 @@ export declare const MermaidView: React.FC<{
     getMermaidInstance: () => Mermaid;
     node: Node;
     getPos: () => number | undefined;
+    options: MermaidOptions;
 }>;

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/MermaidView.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { useSharedEditingState } from "../../../../react-utils/useSharedEditingS
 import { cn } from "../../../../classname.js";
 import { TextAreaFixed as TextArea } from "../../../../forms/TextInput.js";
 import { i18n } from "../../../../i18n/common/index.js";
-import { useBooleanState, useElementState } from "../../../../react-utils/index.js";
+import { useAutoSave, useBooleanState, useElementState } from "../../../../react-utils/index.js";
 import { removeNode } from "../../../../utils/index.js";
 import { MermaidConsts } from "../MermaidSpecs/const.js";
 export const cnMermaid = cn('Mermaid');
@@ -39,15 +39,18 @@ const MermaidPreview = ({ mermaidInstance, text = '', }) => {
     }
     return (_jsx("div", { className: b('Preview'), children: svg ? _jsx("div", { className: "mermaid", dangerouslySetInnerHTML: { __html: svg } }) : _jsx(Loader, {}) }));
 };
-const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance }) => {
-    const [text, setText] = useState(initialText || '');
-    return (_jsxs("div", { className: b(), children: [_jsx(MermaidPreview, { mermaidInstance: mermaidInstance, text: text }), _jsxs("div", { className: b('Editor'), children: [_jsx("div", { children: _jsx(TextArea, { controlProps: {
+const DiagramEditMode = ({ initialText, onSave, onCancel, mermaidInstance, options: { autoSave } }) => {
+    const { value, handleChange, handleManualSave, isSaveDisabled } = useAutoSave({
+        initialValue: initialText || '',
+        onSave,
+        onClose: onCancel,
+        autoSave,
+    });
+    return (_jsxs("div", { className: b(), children: [_jsx(MermaidPreview, { mermaidInstance: mermaidInstance, text: value }), _jsxs("div", { className: b('Editor'), children: [_jsx("div", { children: _jsx(TextArea, { controlProps: {
                                 className: STOP_EVENT_CLASSNAME,
-                            }, value: text, onUpdate: (v) => {
-                                setText(v);
-                            }, autoFocus: true }) }), _jsx("div", { className: b('Controls'), children: _jsxs("div", { children: [_jsx(Button, { onClick: onCancel, view: 'flat', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('cancel') }) }), _jsx(Button, { onClick: () => onSave(text), view: 'action', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('save') }) })] }) })] })] }));
+                            }, value: value, onUpdate: handleChange, autoFocus: true }) }), _jsx("div", { className: b('Controls'), children: _jsxs("div", { children: [_jsx(Button, { onClick: onCancel, view: 'flat', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('cancel') }) }), _jsx(Button, { onClick: handleManualSave, view: 'action', disabled: isSaveDisabled, children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('save') }) })] }) })] })] }));
 };
-export const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }) => {
+export const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance, options }) => {
     const enitityId = node.attrs[MermaidConsts.NodeAttrs.EntityId];
     const entityKey = useMemo(() => SharedStateKey.define({ name: enitityId }), [enitityId]);
     const [editing, setEditing, unsetEditing] = useSharedEditingState(view, entityKey);
@@ -68,8 +71,7 @@ export const MermaidView = ({ onChange, node, getPos, view, getMermaidInstance }
     if (editing) {
         return (_jsx(DiagramEditMode, { initialText: node.attrs[MermaidConsts.NodeAttrs.content], mermaidInstance: mermaidInstance, onCancel: unsetEditing, onSave: (v) => {
                 onChange({ [MermaidConsts.NodeAttrs.content]: v });
-                unsetEditing();
-            } }));
+            }, options: options }));
     }
     return (_jsxs("div", { className: b(), onDoubleClick: setEditing, children: [_jsx(MermaidPreview, { mermaidInstance: mermaidInstance, text: node.attrs[MermaidConsts.NodeAttrs.content] }), _jsxs("div", { children: [_jsx(Button, { onClick: toggleMenuOpen, ref: setAnchorElement, size: 's', className: STOP_EVENT_CLASSNAME, children: _jsx(Icon, { data: DotsIcon, className: STOP_EVENT_CLASSNAME }) }), _jsx(Popup, { open: menuOpen, anchorElement: anchorElement, onOpenChange: closeMenu, placement: "bottom-end", children: _jsxs(Menu, { children: [_jsx(Menu.Item, { onClick: () => {
                                         setEditing();

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/MermaidView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MermaidView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/MermaidView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAC,QAAQ,IAAI,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAKpE,OAAO,EAAC,cAAc,EAAC,+CAA4C;AACnE,OAAO,EAAC,qBAAqB,EAAC,yDAA8C;AAE5E,OAAO,EAAC,EAAE,EAAC,iCAA8B;AACzC,OAAO,EAAC,aAAa,IAAI,QAAQ,EAAC,uCAAoC;AACtE,OAAO,EAAC,IAAI,EAAC,yCAAgC;AAC7C,OAAO,EAAC,eAAe,EAAE,eAAe,EAAC,yCAAgC;AACzE,OAAO,EAAC,UAAU,EAAC,mCAA0B;AAC7C,OAAO,EAAC,aAAa,EAAC,iCAA8B;AAGpD,MAAM,CAAC,MAAM,SAAS,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,wBAAwB,CAAC;AAE7D,uBAAwB;AAExB,MAAM,CAAC,GAAG,SAAS,CAAC;AAEpB,MAAM,cAAc,GAA8D,CAAC,EAC/E,eAAe,EACf,IAAI,GAAG,EAAE,GACZ,EAAE,EAAE;IACD,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,EAAU,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,CAAC,GAAG,KAAK,IAAI,EAAE;YACjB,IAAI,eAAe,EAAE,CAAC;gBAClB,IAAI,CAAC;oBACD,uDAAuD;oBACvD,MAAM,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oBAElC,MAAM,EAAC,GAAG,EAAE,CAAC,EAAC,GAAG,MAAM,eAAe,CAAC,MAAM,CAAC,WAAW,IAAI,CAAC,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,CAAC;oBAE7E,MAAM,CAAC,CAAC,CAAC,CAAC;oBACV,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACnB,CAAC;gBAAC,OAAO,CAAC,EAAE,CAAC;oBACT,QAAQ,CAAE,CAAW,CAAC,OAAO,CAAC,CAAC;gBACnC,CAAC;YACL,CAAC;QACL,CAAC,CAAC;QAEF,CAAC,EAAE,CAAC;IACR,CAAC,EAAE,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC;IAE5B,IAAI,KAAK,EAAE,CAAC;QACR,OAAO,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,CAAC,YAAG,KAAK,IAAI,wBAAM,KAAK,GAAO,GAAO,CAAC;IAC3E,CAAC;IAED,OAAO,CACH,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACvB,GAAG,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,SAAS,EAAC,uBAAuB,EAAE,EAAC,MAAM,EAAE,GAAG,EAAC,GAAI,CAAC,CAAC,CAAC,KAAC,MAAM,KAAG,GACrF,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,eAAe,GAKhB,CAAC,EAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,eAAe,EAAC,EAAE,EAAE;IACtD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;IAEpD,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,aACf,KAAC,cAAc,IAAC,eAAe,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,GAAI,EAChE,eAAK,SAAS,EAAE,CAAC,CAAC,QAAQ,CAAC,aACvB,wBACI,KAAC,QAAQ,IACL,YAAY,EAAE;gCACV,SAAS,EAAE,oBAAoB;6BAClC,EACD,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gCACZ,OAAO,CAAC,CAAC,CAAC,CAAC;4BACf,CAAC,EACD,SAAS,SACX,GACA,EACN,cAAK,SAAS,EAAE,CAAC,CAAC,UAAU,CAAC,YACzB,0BACI,KAAC,MAAM,IAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,YACnC,eAAM,SAAS,EAAE,oBAAoB,YAAG,IAAI,CAAC,QAAQ,CAAC,GAAQ,GACzD,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,QAAQ,YAC/C,eAAM,SAAS,EAAE,oBAAoB,YAAG,IAAI,CAAC,MAAM,CAAC,GAAQ,GACvD,IACP,GACJ,IACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAMnB,CAAC,EAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,EAAC,EAAE,EAAE;IACxD,MAAM,SAAS,GAAW,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACvE,MAAM,SAAS,GAAG,OAAO,CACrB,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAA2B,EAAC,IAAI,EAAE,SAAS,EAAC,CAAC,EACxE,CAAC,SAAS,CAAC,CACd,CAAC;IAEF,MAAM,CAAC,OAAO,EAAE,UAAU,EAAE,YAAY,CAAC,GAAG,qBAAqB,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACnF,MAAM,CAAC,QAAQ,EAAE,AAAD,EAAG,SAAS,EAAE,cAAc,CAAC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IACvE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,eAAe,EAAE,CAAC;IAE5D,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAiB,IAAI,CAAC,CAAC;IAC7E,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,cAAc,GAAG,GAAG,EAAE,CACxB,UAAU,CAAC,GAAG,EAAE;YACZ,MAAM,QAAQ,GAAG,kBAAkB,EAAE,CAAC;YACtC,IAAI,QAAQ,EAAE,CAAC;gBACX,kBAAkB,CAAC,QAAQ,CAAC,CAAC;gBAE7B,OAAO;YACX,CAAC;YAED,cAAc,EAAE,CAAC;QACrB,CAAC,EAAE,GAAG,CAAC,CAAC;QAEZ,cAAc,EAAE,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,KAAC,eAAe,IACZ,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,EACxD,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,YAAY,EACtB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;gBACV,QAAQ,CAAC,EAAC,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,CAAC,EAAC,CAAC,CAAC;gBACjD,YAAY,EAAE,CAAC;YACnB,CAAC,GACH,CACL,CAAC;IACN,CAAC;IAED,OAAO,CACH,eAAK,SAAS,EAAE,CAAC,EAAE,EAAE,aAAa,EAAE,UAAU,aAC1C,KAAC,cAAc,IACX,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,GACnD,EACF,0BACI,KAAC,MAAM,IACH,OAAO,EAAE,cAAc,EACvB,GAAG,EAAE,gBAAgB,EACrB,IAAI,EAAE,GAAG,EACT,SAAS,EAAE,oBAAoB,YAE/B,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,oBAAoB,GAAI,GACpD,EACT,KAAC,KAAK,IACF,IAAI,EAAE,QAAQ,EACd,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,SAAS,EACvB,SAAS,EAAC,YAAY,YAEtB,MAAC,IAAI,eACD,KAAC,IAAI,CAAC,IAAI,IACN,OAAO,EAAE,GAAG,EAAE;wCACV,UAAU,EAAE,CAAC;wCACb,SAAS,EAAE,CAAC;oCAChB,CAAC,YAEA,IAAI,CAAC,MAAM,CAAC,GACL,EACZ,KAAC,IAAI,CAAC,IAAI,IACN,OAAO,EAAE,GAAG,EAAE;wCACV,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;wCACrB,IAAI,GAAG,KAAK,SAAS;4CAAE,OAAO;wCAC9B,UAAU,CAAC;4CACP,IAAI;4CACJ,GAAG;4CACH,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE;4CACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;yCAC1B,CAAC,CAAC;oCACP,CAAC,YAEA,IAAI,CAAC,QAAQ,CAAC,GACP,IACT,GACH,IACN,IACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useEffect, useMemo, useState} from 'react';\n\nimport {Ellipsis as DotsIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Loader, Menu, Popup} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {SharedStateKey} from 'src/extensions/behavior/SharedState';\nimport {useSharedEditingState} from 'src/react-utils/useSharedEditingState';\n\nimport {cn} from '../../../../classname';\nimport {TextAreaFixed as TextArea} from '../../../../forms/TextInput';\nimport {i18n} from '../../../../i18n/common';\nimport {useBooleanState, useElementState} from '../../../../react-utils';\nimport {removeNode} from '../../../../utils';\nimport {MermaidConsts} from '../MermaidSpecs/const';\nimport type {MermaidEntitySharedState} from '../types';\n\nexport const cnMermaid = cn('Mermaid');\n\nexport const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';\n\nimport './Mermaid.scss';\n\nconst b = cnMermaid;\n\nconst MermaidPreview: React.FC<{mermaidInstance: Mermaid \| null; text: string}> = ({\n mermaidInstance,\n text = '',\n}) => {\n const [svg, setSvg] = useState<string>();\n const [error, setError] = useState<string \| null>(null);\n\n useEffect(() => {\n const p = async () => {\n if (mermaidInstance) {\n try {\n // Validates syntax and throws error if text is invalid\n await mermaidInstance.parse(text);\n\n const {svg: S} = await mermaidInstance.render(`mermaid-${Date.now()}`, text);\n\n setSvg(S);\n setError(null);\n } catch (e) {\n setError((e as Error).message);\n }\n }\n };\n\n p();\n }, [mermaidInstance, text]);\n\n if (error) {\n return <div className={b('Error')}>{error && <div>{error}</div>}</div>;\n }\n\n return (\n <div className={b('Preview')}>\n {svg ? <div className=\"mermaid\" dangerouslySetInnerHTML={{__html: svg}} /> : <Loader />}\n </div>\n );\n};\n\nconst DiagramEditMode: React.FC<{\n initialText: string;\n mermaidInstance: Mermaid \| null;\n onSave: (v: string) => void;\n onCancel: () => void;\n}> = ({initialText, onSave, onCancel, mermaidInstance}) => {\n const [text, setText] = useState(initialText \|\| '');\n\n return (\n <div className={b()}>\n <MermaidPreview mermaidInstance={mermaidInstance} text={text} />\n <div className={b('Editor')}>\n <div>\n <TextArea\n controlProps={{\n className: STOP_EVENT_CLASSNAME,\n }}\n value={text}\n onUpdate={(v) => {\n setText(v);\n }}\n autoFocus\n />\n </div>\n <div className={b('Controls')}>\n <div>\n <Button onClick={onCancel} view={'flat'}>\n <span className={STOP_EVENT_CLASSNAME}>{i18n('cancel')}</span>\n </Button>\n <Button onClick={() => onSave(text)} view={'action'}>\n <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>\n </Button>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport const MermaidView: React.FC<{\n view: EditorView;\n onChange: (attrs: {[MermaidConsts.NodeAttrs.content]: string}) => void;\n getMermaidInstance: () => Mermaid;\n node: Node;\n getPos: () => number \| undefined;\n}> = ({onChange, node, getPos, view, getMermaidInstance}) => {\n const enitityId: string = node.attrs[MermaidConsts.NodeAttrs.EntityId];\n const entityKey = useMemo(\n () => SharedStateKey.define<MermaidEntitySharedState>({name: enitityId}),\n [enitityId],\n );\n\n const [editing, setEditing, unsetEditing] = useSharedEditingState(view, entityKey);\n const [menuOpen, , closeMenu, toggleMenuOpen] = useBooleanState(false);\n const [anchorElement, setAnchorElement] = useElementState();\n\n const [mermaidInstance, setMermaidInstance] = useState<Mermaid \| null>(null);\n useEffect(() => {\n const waitForMermaid = () =>\n setTimeout(() => {\n const instance = getMermaidInstance();\n if (instance) {\n setMermaidInstance(instance);\n\n return;\n }\n\n waitForMermaid();\n }, 100);\n\n waitForMermaid();\n }, []);\n\n if (editing) {\n return (\n <DiagramEditMode\n initialText={node.attrs[MermaidConsts.NodeAttrs.content]}\n mermaidInstance={mermaidInstance}\n onCancel={unsetEditing}\n onSave={(v) => {\n onChange({[MermaidConsts.NodeAttrs.content]: v});\n unsetEditing();\n }}\n />\n );\n }\n\n return (\n <div className={b()} onDoubleClick={setEditing}>\n <MermaidPreview\n mermaidInstance={mermaidInstance}\n text={node.attrs[MermaidConsts.NodeAttrs.content]}\n />\n <div>\n <Button\n onClick={toggleMenuOpen}\n ref={setAnchorElement}\n size={'s'}\n className={STOP_EVENT_CLASSNAME}\n >\n <Icon data={DotsIcon} className={STOP_EVENT_CLASSNAME} />\n </Button>\n <Popup\n open={menuOpen}\n anchorElement={anchorElement}\n onOpenChange={closeMenu}\n placement=\"bottom-end\"\n >\n <Menu>\n <Menu.Item\n onClick={() => {\n setEditing();\n closeMenu();\n }}\n >\n {i18n('edit')}\n </Menu.Item>\n <Menu.Item\n onClick={() => {\n const pos = getPos();\n if (pos === undefined) return;\n removeNode({\n node,\n pos,\n tr: view.state.tr,\n dispatch: view.dispatch,\n });\n }}\n >\n {i18n('remove')}\n </Menu.Item>\n </Menu>\n </Popup>\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"MermaidView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/MermaidView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useMemo, useState} from 'react';\n\nimport {Ellipsis as DotsIcon} from '@gravity-ui/icons';\nimport {Button, Icon, Loader, Menu, Popup} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {SharedStateKey} from 'src/extensions/behavior/SharedState';\nimport {useSharedEditingState} from 'src/react-utils/useSharedEditingState';\n\nimport {cn} from '../../../../classname';\nimport {TextAreaFixed as TextArea} from '../../../../forms/TextInput';\nimport {i18n} from '../../../../i18n/common';\nimport {useAutoSave, useBooleanState, useElementState} from '../../../../react-utils';\nimport {removeNode} from '../../../../utils';\nimport {MermaidConsts} from '../MermaidSpecs/const';\nimport type {MermaidOptions} from '../index';\nimport type {MermaidEntitySharedState} from '../types';\n\nexport const cnMermaid = cn('Mermaid');\n\nexport const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';\n\nimport './Mermaid.scss';\n\nconst b = cnMermaid;\n\nconst MermaidPreview: React.FC<{mermaidInstance: Mermaid \| null; text: string}> = ({\n mermaidInstance,\n text = '',\n}) => {\n const [svg, setSvg] = useState<string>();\n const [error, setError] = useState<string \| null>(null);\n\n useEffect(() => {\n const p = async () => {\n if (mermaidInstance) {\n try {\n // Validates syntax and throws error if text is invalid\n await mermaidInstance.parse(text);\n\n const {svg: S} = await mermaidInstance.render(`mermaid-${Date.now()}`, text);\n\n setSvg(S);\n setError(null);\n } catch (e) {\n setError((e as Error).message);\n }\n }\n };\n\n p();\n }, [mermaidInstance, text]);\n\n if (error) {\n return <div className={b('Error')}>{error && <div>{error}</div>}</div>;\n }\n\n return (\n <div className={b('Preview')}>\n {svg ? <div className=\"mermaid\" dangerouslySetInnerHTML={{__html: svg}} /> : <Loader />}\n </div>\n );\n};\n\nconst DiagramEditMode: React.FC<{\n initialText: string;\n mermaidInstance: Mermaid \| null;\n onSave: (v: string) => void;\n onCancel: () => void;\n options: MermaidOptions;\n}> = ({initialText, onSave, onCancel, mermaidInstance, options: {autoSave}}) => {\n const {value, handleChange, handleManualSave, isSaveDisabled} = useAutoSave({\n initialValue: initialText \|\| '',\n onSave,\n onClose: onCancel,\n autoSave,\n });\n\n return (\n <div className={b()}>\n <MermaidPreview mermaidInstance={mermaidInstance} text={value} />\n <div className={b('Editor')}>\n <div>\n <TextArea\n controlProps={{\n className: STOP_EVENT_CLASSNAME,\n }}\n value={value}\n onUpdate={handleChange}\n autoFocus\n />\n </div>\n <div className={b('Controls')}>\n <div>\n <Button onClick={onCancel} view={'flat'}>\n <span className={STOP_EVENT_CLASSNAME}>{i18n('cancel')}</span>\n </Button>\n <Button\n onClick={handleManualSave}\n view={'action'}\n disabled={isSaveDisabled}\n >\n <span className={STOP_EVENT_CLASSNAME}>{i18n('save')}</span>\n </Button>\n </div>\n </div>\n </div>\n </div>\n );\n};\n\nexport const MermaidView: React.FC<{\n view: EditorView;\n onChange: (attrs: {[MermaidConsts.NodeAttrs.content]: string}) => void;\n getMermaidInstance: () => Mermaid;\n node: Node;\n getPos: () => number \| undefined;\n options: MermaidOptions;\n}> = ({onChange, node, getPos, view, getMermaidInstance, options}) => {\n const enitityId: string = node.attrs[MermaidConsts.NodeAttrs.EntityId];\n const entityKey = useMemo(\n () => SharedStateKey.define<MermaidEntitySharedState>({name: enitityId}),\n [enitityId],\n );\n\n const [editing, setEditing, unsetEditing] = useSharedEditingState(view, entityKey);\n const [menuOpen, , closeMenu, toggleMenuOpen] = useBooleanState(false);\n const [anchorElement, setAnchorElement] = useElementState();\n\n const [mermaidInstance, setMermaidInstance] = useState<Mermaid \| null>(null);\n useEffect(() => {\n const waitForMermaid = () =>\n setTimeout(() => {\n const instance = getMermaidInstance();\n if (instance) {\n setMermaidInstance(instance);\n\n return;\n }\n\n waitForMermaid();\n }, 100);\n\n waitForMermaid();\n }, []);\n\n if (editing) {\n return (\n <DiagramEditMode\n initialText={node.attrs[MermaidConsts.NodeAttrs.content]}\n mermaidInstance={mermaidInstance}\n onCancel={unsetEditing}\n onSave={(v) => {\n onChange({[MermaidConsts.NodeAttrs.content]: v});\n }}\n options={options}\n />\n );\n }\n\n return (\n <div className={b()} onDoubleClick={setEditing}>\n <MermaidPreview\n mermaidInstance={mermaidInstance}\n text={node.attrs[MermaidConsts.NodeAttrs.content]}\n />\n <div>\n <Button\n onClick={toggleMenuOpen}\n ref={setAnchorElement}\n size={'s'}\n className={STOP_EVENT_CLASSNAME}\n >\n <Icon data={DotsIcon} className={STOP_EVENT_CLASSNAME} />\n </Button>\n <Popup\n open={menuOpen}\n anchorElement={anchorElement}\n onOpenChange={closeMenu}\n placement=\"bottom-end\"\n >\n <Menu>\n <Menu.Item\n onClick={() => {\n setEditing();\n closeMenu();\n }}\n >\n {i18n('edit')}\n </Menu.Item>\n <Menu.Item\n onClick={() => {\n const pos = getPos();\n if (pos === undefined) return;\n removeNode({\n node,\n pos,\n tr: view.state.tr,\n dispatch: view.dispatch,\n });\n }}\n >\n {i18n('remove')}\n </Menu.Item>\n </Menu>\n </Popup>\n </div>\n </div>\n );\n};\n"]}

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/NodeView.d.ts CHANGED Viewed

@@ -8,6 +8,7 @@ export declare class WMermaidNodeView implements NodeView {
     private readonly getPos;
     private readonly renderItem;
     private readonly loadRuntimeScript;
+    private readonly options;
     constructor(node: Node, view: EditorView, getPos: () => number | undefined, opts: MermaidOptions);
     initializeMermaid(): void;
     update(node: Node): boolean;

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/NodeView.js CHANGED Viewed

@@ -12,6 +12,7 @@ export class WMermaidNodeView {
     getPos;
     renderItem;
     loadRuntimeScript;
+    options;
     constructor(node, view, getPos, opts) {
         const { loadRuntimeScript } = opts;
         this.node = node;
@@ -21,6 +22,7 @@ export class WMermaidNodeView {
         this.view = view;
         this.getPos = getPos;
         this.loadRuntimeScript = loadRuntimeScript;
+        this.options = opts;
         this.initializeMermaid();
         this.renderItem = getReactRendererFromState(view.state).createItem('mermaid-view', this.renderMermaid.bind(this));
         this.validateEntityId();
@@ -72,7 +74,7 @@ export class WMermaidNodeView {
     }
     getMermaidInstance = () => mermaidInstance;
     renderMermaid() {
-        return (_jsx(Portal, { container: this.dom, children: _jsx(MermaidView, { view: this.view, onChange: this.onChange.bind(this), node: this.node, getMermaidInstance: this.getMermaidInstance, getPos: this.getPos }) }));
+        return (_jsx(Portal, { container: this.dom, children: _jsx(MermaidView, { view: this.view, onChange: this.onChange.bind(this), node: this.node, getMermaidInstance: this.getMermaidInstance, getPos: this.getPos, options: this.options }) }));
     }
 }
 //# sourceMappingURL=NodeView.js.map

package/build/esm/extensions/additional/Mermaid/MermaidNodeView/NodeView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NodeView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/NodeView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,mBAAmB,CAAC;AAKzC,OAAO,EAAC,yBAAyB,EAAC,iDAA8C;AAChF,OAAO,EAAC,gBAAgB,EAAE,iBAAiB,EAAC,uCAA4B;AAGxE,OAAO,EAAC,aAAa,EAAE,sBAAsB,EAAC,iCAA8B;AAE5E,OAAO,EAAC,WAAW,EAAE,oBAAoB,EAAC,yBAAsB;AAEhE,IAAI,eAAwB,CAAC;AAE7B,MAAM,OAAO,gBAAgB;IAChB,GAAG,CAAc;IAClB,IAAI,CAAO;IACF,IAAI,CAAC;IACL,MAAM,CAAC;IACP,UAAU,CAAC;IACX,iBAAiB,CAAa;~~IAE/C~~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~~GACrB~~,GACG,CACZ,CAAC;IACN,CAAC;CACJ","sourcesContent":["import {Portal} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView, NodeView} from 'prosemirror-view';\n\nimport {getReactRendererFromState} from 'src/extensions/behavior/ReactRenderer';\nimport {generateEntityId, isInvalidEntityId} from 'src/utils/entity-id';\n\nimport type {MermaidOptions} from '..';\nimport {MermaidConsts, defaultMermaidEntityId} from '../MermaidSpecs/const';\n\nimport {MermaidView, STOP_EVENT_CLASSNAME} from './MermaidView';\n\nlet mermaidInstance: Mermaid;\n\nexport class WMermaidNodeView implements NodeView {\n readonly dom: HTMLElement;\n private node: Node;\n private readonly view;\n private readonly getPos;\n private readonly renderItem;\n private readonly loadRuntimeScript: () => void;\n\n constructor(\n node: Node,\n view: EditorView,\n getPos: () => number \| undefined,\n opts: MermaidOptions,\n ) {\n const {loadRuntimeScript} = opts;\n this.node = node;\n this.dom = document.createElement('div');\n this.dom.classList.add('mermaid-container');\n this.dom.contentEditable = 'false';\n this.view = view;\n this.getPos = getPos;\n this.loadRuntimeScript = loadRuntimeScript;\n this.initializeMermaid();\n this.renderItem = getReactRendererFromState(view.state).createItem(\n 'mermaid-view',\n this.renderMermaid.bind(this),\n );\n\n this.validateEntityId();\n }\n\n initializeMermaid() {\n // https://github.com/diplodoc-platform/mermaid-extension/tree/master#prepared-mermaid-runtime\n window.mermaidJsonp = window.mermaidJsonp \|\| [];\n window.mermaidJsonp.push((mermaid: Mermaid) => {\n mermaidInstance = mermaid;\n });\n\n this.loadRuntimeScript();\n }\n\n update(node: Node) {\n if (node.type !== this.node.type) return false;\n this.node = node;\n this.renderItem.rerender();\n return true;\n }\n\n destroy() {\n this.renderItem.remove();\n }\n\n ignoreMutation() {\n return true;\n }\n\n stopEvent(e: Event) {\n const target = e.target as Element;\n return target.classList.contains(STOP_EVENT_CLASSNAME);\n }\n\n private validateEntityId() {\n if (\n isInvalidEntityId({\n node: this.node,\n doc: this.view.state.doc,\n defaultId: defaultMermaidEntityId,\n })\n ) {\n const newId = generateEntityId(MermaidConsts.NodeName);\n this.view.dispatch(\n this.view.state.tr.setNodeAttribute(\n this.getPos()!,\n MermaidConsts.NodeAttrs.EntityId,\n newId,\n ),\n );\n }\n }\n\n private onChange(attrs: {[MermaidConsts.NodeAttrs.content]: string}) {\n const pos = this.getPos();\n if (pos === undefined) return;\n\n const tr = this.view.state.tr.setNodeMarkup(\n pos,\n undefined,\n {\n ...this.node.attrs,\n ...attrs,\n },\n [],\n );\n\n this.view.dispatch(tr);\n }\n\n private getMermaidInstance = () => mermaidInstance;\n\n private renderMermaid() {\n return (\n <Portal container={this.dom}>\n <MermaidView\n view={this.view}\n onChange={this.onChange.bind(this)}\n node={this.node}\n getMermaidInstance={this.getMermaidInstance}\n getPos={this.getPos}\n />\n </Portal>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"NodeView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/Mermaid/MermaidNodeView/NodeView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Portal} from '@gravity-ui/uikit';\nimport type {Mermaid} from 'mermaid' with {'resolution-mode': 'import'};\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView, NodeView} from 'prosemirror-view';\n\nimport {getReactRendererFromState} from 'src/extensions/behavior/ReactRenderer';\nimport {generateEntityId, isInvalidEntityId} from 'src/utils/entity-id';\n\nimport type {MermaidOptions} from '..';\nimport {MermaidConsts, defaultMermaidEntityId} from '../MermaidSpecs/const';\n\nimport {MermaidView, STOP_EVENT_CLASSNAME} from './MermaidView';\n\nlet mermaidInstance: Mermaid;\n\nexport class WMermaidNodeView implements NodeView {\n readonly dom: HTMLElement;\n private node: Node;\n private readonly view;\n private readonly getPos;\n private readonly renderItem;\n private readonly loadRuntimeScript: () => void;\n private readonly options: MermaidOptions;\n\n constructor(\n node: Node,\n view: EditorView,\n getPos: () => number \| undefined,\n opts: MermaidOptions,\n ) {\n const {loadRuntimeScript} = opts;\n this.node = node;\n this.dom = document.createElement('div');\n this.dom.classList.add('mermaid-container');\n this.dom.contentEditable = 'false';\n this.view = view;\n this.getPos = getPos;\n this.loadRuntimeScript = loadRuntimeScript;\n this.options = opts;\n this.initializeMermaid();\n this.renderItem = getReactRendererFromState(view.state).createItem(\n 'mermaid-view',\n this.renderMermaid.bind(this),\n );\n\n this.validateEntityId();\n }\n\n initializeMermaid() {\n // https://github.com/diplodoc-platform/mermaid-extension/tree/master#prepared-mermaid-runtime\n window.mermaidJsonp = window.mermaidJsonp \|\| [];\n window.mermaidJsonp.push((mermaid: Mermaid) => {\n mermaidInstance = mermaid;\n });\n\n this.loadRuntimeScript();\n }\n\n update(node: Node) {\n if (node.type !== this.node.type) return false;\n this.node = node;\n this.renderItem.rerender();\n return true;\n }\n\n destroy() {\n this.renderItem.remove();\n }\n\n ignoreMutation() {\n return true;\n }\n\n stopEvent(e: Event) {\n const target = e.target as Element;\n return target.classList.contains(STOP_EVENT_CLASSNAME);\n }\n\n private validateEntityId() {\n if (\n isInvalidEntityId({\n node: this.node,\n doc: this.view.state.doc,\n defaultId: defaultMermaidEntityId,\n })\n ) {\n const newId = generateEntityId(MermaidConsts.NodeName);\n this.view.dispatch(\n this.view.state.tr.setNodeAttribute(\n this.getPos()!,\n MermaidConsts.NodeAttrs.EntityId,\n newId,\n ),\n );\n }\n }\n\n private onChange(attrs: {[MermaidConsts.NodeAttrs.content]: string}) {\n const pos = this.getPos();\n if (pos === undefined) return;\n\n const tr = this.view.state.tr.setNodeMarkup(\n pos,\n undefined,\n {\n ...this.node.attrs,\n ...attrs,\n },\n [],\n );\n\n this.view.dispatch(tr);\n }\n\n private getMermaidInstance = () => mermaidInstance;\n\n private renderMermaid() {\n return (\n <Portal container={this.dom}>\n <MermaidView\n view={this.view}\n onChange={this.onChange.bind(this)}\n node={this.node}\n getMermaidInstance={this.getMermaidInstance}\n getPos={this.getPos}\n options={this.options}\n />\n </Portal>\n );\n }\n}\n"]}

package/build/esm/extensions/additional/Mermaid/index.d.ts CHANGED Viewed

@@ -2,6 +2,10 @@ import type { Action, ExtensionAuto } from "../../../core/index.js";
 import { MermaidAction } from "./MermaidSpecs/const.js";
 export type MermaidOptions = {
     loadRuntimeScript: () => void;
+    autoSave?: {
+        enabled: boolean;
+        delay?: number;
+    };
 };
 export declare const Mermaid: ExtensionAuto<MermaidOptions>;
 declare global {

package/build/esm/extensions/additional/Mermaid/index.js CHANGED Viewed

@@ -2,13 +2,13 @@ import { WMermaidNodeView } from "./MermaidNodeView/index.js";
 import { MermaidSpecs } from "./MermaidSpecs/index.js";
 import { MermaidAction } from "./MermaidSpecs/const.js";
 import { addMermaid } from "./actions.js";
-export const Mermaid = (builder, { loadRuntimeScript }) => {
+export const Mermaid = (builder, options) => {
     builder.use(MermaidSpecs, {
-        nodeView: MermaidNodeViewFactory({ loadRuntimeScript }),
+        nodeView: MermaidNodeViewFactory(options),
     });
     builder.addAction(MermaidAction, () => addMermaid);
 };
-const MermaidNodeViewFactory = ({ loadRuntimeScript }) => () => (node, view, getPos) => {
-    return new WMermaidNodeView(node, view, getPos, { loadRuntimeScript });
+const MermaidNodeViewFactory = (options) => () => (node, view, getPos) => {
+    return new WMermaidNodeView(node, view, getPos, options);
 };
 //# sourceMappingURL=index.js.map

package/build/esm/extensions/additional/Mermaid/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Mermaid/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAC,mCAA0B;AACnD,OAAO,EAAC,YAAY,EAAC,gCAAuB;AAC5C,OAAO,EAAC,aAAa,EAAC,gCAA6B;AACnD,OAAO,EAAC,UAAU,EAAC,qBAAkB;~~AAIrC~~,MAAM,CAAC,MAAM,OAAO,GAAkC,CAAC,OAAO,EAAE,~~EAAC~~,~~iBAAiB,EAAC,~~EAAE,EAAE;~~IACnF~~,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE;QACtB,QAAQ,EAAE,sBAAsB,CAAC,~~EAAC~~,~~iBAAiB,EAAC,~~CAAC;~~KACxD~~,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AACvD,CAAC,CAAC;AAEF,MAAM,sBAAsB,~~GAGxB~~,CAAC,~~EAAC~~,~~iBAAiB,EAAC,~~EAAE,EAAE,~~CACxB~~,GAAG,EAAE,~~CACL~~,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;~~IACnB~~,OAAO,IAAI,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,~~EAAC~~,~~iBAAiB,EAAC,~~CAAC,CAAC;~~AACzE~~,CAAC,CAAC","sourcesContent":["import type {Action, ExtensionAuto, ExtensionDeps, NodeViewConstructor} from '../../../core';\n\nimport {WMermaidNodeView} from './MermaidNodeView';\nimport {MermaidSpecs} from './MermaidSpecs';\nimport {MermaidAction} from './MermaidSpecs/const';\nimport {addMermaid} from './actions';\n\nexport type MermaidOptions = {loadRuntimeScript: () => void};\n\nexport const Mermaid: ExtensionAuto<MermaidOptions> = (builder, ~~{loadRuntimeScript}~~) => {\n builder.use(MermaidSpecs, {\n nodeView: MermaidNodeViewFactory(~~{loadRuntimeScript}~~),\n });\n\n builder.addAction(MermaidAction, () => addMermaid);\n};\n\nconst MermaidNodeViewFactory: (\n opts: MermaidOptions,\n) => (deps: ExtensionDeps) => NodeViewConstructor ~~=\n~~ (~~{loadRuntimeScript}~~) ~~=>\n~~ () ~~=>\n~~ (node, view, getPos) => {\n return new WMermaidNodeView(node, view, getPos, ~~{loadRuntimeScript}~~);\n };\n\ndeclare global {\n namespace WysiwygEditor {\n interface Actions {\n [MermaidAction]: Action;\n }\n }\n interface Window {\n mermaidJsonp: Function[];\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"../../../../../src","sources":["extensions/additional/Mermaid/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAC,mCAA0B;AACnD,OAAO,EAAC,YAAY,EAAC,gCAAuB;AAC5C,OAAO,EAAC,aAAa,EAAC,gCAA6B;AACnD,OAAO,EAAC,UAAU,EAAC,qBAAkB;AAUrC,MAAM,CAAC,MAAM,OAAO,GAAkC,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE;IACvE,OAAO,CAAC,GAAG,CAAC,YAAY,EAAE;QACtB,QAAQ,EAAE,sBAAsB,CAAC,OAAO,CAAC;KAC5C,CAAC,CAAC;IAEH,OAAO,CAAC,SAAS,CAAC,aAAa,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AACvD,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAEwB,CAAC,OAAO,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1F,OAAO,IAAI,gBAAgB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["import type {Action, ExtensionAuto, ExtensionDeps, NodeViewConstructor} from '../../../core';\n\nimport {WMermaidNodeView} from './MermaidNodeView';\nimport {MermaidSpecs} from './MermaidSpecs';\nimport {MermaidAction} from './MermaidSpecs/const';\nimport {addMermaid} from './actions';\n\nexport type MermaidOptions = {\n loadRuntimeScript: () => void;\n autoSave?: {\n enabled: boolean;\n delay?: number;\n };\n};\n\nexport const Mermaid: ExtensionAuto<MermaidOptions> = (builder, options) => {\n builder.use(MermaidSpecs, {\n nodeView: MermaidNodeViewFactory(options),\n });\n\n builder.addAction(MermaidAction, () => addMermaid);\n};\n\nconst MermaidNodeViewFactory: (\n opts: MermaidOptions,\n) => (deps: ExtensionDeps) => NodeViewConstructor = (options) => () => (node, view, getPos) => {\n return new WMermaidNodeView(node, view, getPos, options);\n};\n\ndeclare global {\n namespace WysiwygEditor {\n interface Actions {\n [MermaidAction]: Action;\n }\n }\n interface Window {\n mermaidJsonp: Function[];\n }\n}\n"]}

package/build/esm/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { SharedStateKey } from "../../../behavior/SharedState/index.js";
 import { TextAreaFixed as TextArea } from "../../../../forms/TextInput.js";
 import { i18n } from "../../../../i18n/common/index.js";
 import { debounce } from "../../../../lodash.js";
-import { useBooleanState, useElementState } from "../../../../react-utils/hooks.js";
+import { useAutoSave, useBooleanState, useElementState } from "../../../../react-utils/hooks.js";
 import { useSharedEditingState } from "../../../../react-utils/useSharedEditingState.js";
 import { removeNode } from "../../../../utils/remove-node.js";
 import { YfmHtmlBlockConsts } from "../YfmHtmlBlockSpecs/const.js";
@@ -135,15 +135,19 @@ const YfmHtmlBlockPreview = ({ html, onClick, config }) => {
             height,
         }, ref: ref, title: generateID(), frameBorder: 0, className: b('content'), srcDoc: html }));
 };
-const CodeEditMode = ({ initialText, onSave, onCancel }) => {
-    const [text, setText] = useState(initialText || '\n');
+const CodeEditMode = ({ initialText, onSave, onCancel, options: { autoSave } }) => {
+    const { value, handleChange, handleManualSave, isSaveDisabled } = useAutoSave({
+        initialValue: initialText || '\n',
+        onSave,
+        onClose: onCancel,
+        autoSave,
+    });
     return (_jsx("div", { className: b({ editing: true }), children: _jsxs("div", { className: b('editor'), children: [_jsx(TextArea, { controlProps: {
                         className: STOP_EVENT_CLASSNAME,
-                    }, value: text, onUpdate: (v) => {
-                        setText(v);
-                    }, autoFocus: true }), _jsx("div", { className: b('controls'), children: _jsxs("div", { children: [_jsx(Button, { onClick: onCancel, view: 'flat', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('cancel') }) }), _jsx(Button, { onClick: () => onSave(text), view: 'action', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('save') }) })] }) })] }) }));
+                    }, value: value, onUpdate: handleChange, autoFocus: true }), _jsx("div", { className: b('controls'), children: _jsxs("div", { children: [_jsx(Button, { onClick: onCancel, view: 'flat', children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('cancel') }) }), _jsx(Button, { onClick: handleManualSave, view: 'action', disabled: isSaveDisabled, children: _jsx("span", { className: STOP_EVENT_CLASSNAME, children: i18n('save') }) })] }) })] }) }));
 };
-export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = '' }, }) => {
+export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options }) => {
+    const { useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = '' } = options;
     const entityId = node.attrs[YfmHtmlBlockConsts.NodeAttrs.EntityId];
     const entityKey = useMemo(() => SharedStateKey.define({ name: entityId }), [entityId]);
     const config = useConfig?.();
@@ -153,8 +157,7 @@ export const YfmHtmlBlockView = ({ onChange, node, getPos, view, options: { useC
     if (editing) {
         return (_jsx(CodeEditMode, { initialText: node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc], onCancel: unsetEditing, onSave: (v) => {
                 onChange({ [YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v });
-                unsetEditing();
-            } }));
+            }, options: options }));
     }
     let additional = baseTarget ? `<base target="${baseTarget}">` : '';
     if (styles) {