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

@gravity-ui/markdown-editor 15.21.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 (98) 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.21.0' !== 'undefined' ? '15.21.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.21.0' !== 'undefined' ? '15.21.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/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) {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"YfmHtmlBlockView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useMemo, useRef, useState} from 'react';\n\nimport {getStyles} from '@diplodoc/html-extension';\nimport type {IHTMLIFrameElementConfig} from '@diplodoc/html-extension/runtime';\nimport {Ellipsis as DotsIcon, Eye} from '@gravity-ui/icons';\nimport {Button, Icon, Label, Menu, Popup} from '@gravity-ui/uikit';\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {cn} from 'src/classname';\nimport {SharedStateKey} from 'src/extensions/behavior/SharedState';\nimport {TextAreaFixed as TextArea} from 'src/forms/TextInput';\nimport {i18n} from 'src/i18n/common';\nimport {debounce} from 'src/lodash';\nimport {useBooleanState, useElementState} from 'src/react-utils/hooks';\nimport {useSharedEditingState} from 'src/react-utils/useSharedEditingState';\nimport {removeNode} from 'src/utils/remove-node';\n\nimport {YfmHtmlBlockConsts} from '../YfmHtmlBlockSpecs/const';\nimport type {YfmHtmlBlockOptions} from '../index';\nimport type {YfmHtmlBlockEntitySharedState} from '../types';\n\nimport './YfmHtmlBlock.scss';\n\nexport const cnYfmHtmlBlock = cn('yfm-html-block');\nexport const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';\n\nconst b = cnYfmHtmlBlock;\n\ninterface YfmHtmlBlockViewProps {\n html: string;\n onClick: () => void;\n config?: IHTMLIFrameElementConfig;\n}\n\nexport function generateID() {\n return Math.random().toString(36).substr(2, 8);\n}\n\nconst DEFAULT_PADDING = 20;\nconst DEFAULT_DELAY = 100;\n\nconst createLinkCLickHandler = (value: Element, document: Document) => (event: Event) => {\n event.preventDefault();\n const targetId = value.getAttribute('href');\n\n if (targetId) {\n const targetElement = document.querySelector(targetId);\n if (targetElement) {\n targetElement.scrollIntoView({behavior: 'smooth'});\n }\n }\n};\n\nconst YfmHtmlBlockPreview: React.FC<YfmHtmlBlockViewProps> = ({html, onClick, config}) => {\n const ref = useRef<HTMLIFrameElement>(null);\n const styles = useRef<Record<string, string>>({});\n const classNames = useRef<string[]>([]);\n const resizeConfig = useRef<Record<string, number>>({});\n\n const [height, setHeight] = useState('100%');\n\n useEffect(() => {\n setStyles(config?.styles);\n setClassNames(config?.classNames);\n }, [config, ref.current?.contentWindow?.document?.body]);\n\n const handleLoadIFrame = () => {\n const contentWindow = ref.current?.contentWindow;\n\n handleResizeIFrame();\n\n if (contentWindow) {\n const frameDocument = contentWindow.document;\n frameDocument.addEventListener('dblclick', () => {\n onClick();\n });\n }\n };\n\n const handleResizeIFrame = () => {\n if (ref.current) {\n const contentWindow = ref.current?.contentWindow;\n if (contentWindow) {\n const body = contentWindow.document.body;\n if (body) {\n const height =\n body.scrollHeight +\n (resizeConfig.current?.padding \|\| DEFAULT_PADDING) +\n 'px';\n\n setHeight(height);\n }\n }\n }\n };\n\n const setClassNames = (newClassNames: string[] \| undefined) => {\n const body = ref.current?.contentWindow?.document.body;\n\n if (body && newClassNames) {\n const previousClassNames = classNames.current;\n\n // remove all classes that were in previousClassNames but are not in classNames\n previousClassNames.forEach((className) => {\n if (!newClassNames.includes(className)) {\n body.classList.remove(className);\n }\n });\n\n // add classes that are in classNames\n newClassNames.forEach((className) => {\n if (!body.classList.contains(className)) {\n body.classList.add(className);\n }\n });\n\n classNames.current = newClassNames;\n }\n };\n\n const setStyles = (newStyles: Record<string, string> \| undefined) => {\n const body = ref.current?.contentWindow?.document.body;\n\n if (body && newStyles) {\n const previousStyles = styles.current;\n\n // remove all styles that are in previousStyles but not in styles\n Object.keys(previousStyles).forEach((property) => {\n if (!Object.prototype.hasOwnProperty.call(newStyles, property)) {\n body.style.removeProperty(property);\n }\n });\n\n // sdd or update styles that are in styles\n Object.keys(newStyles).forEach((property) => {\n body.style.setProperty(property, newStyles[property]);\n });\n\n // update current styles to the new styles\n styles.current = newStyles;\n }\n };\n\n // finds all relative links (href^=\"#\") and changes their click behavior\n const createAnchorLinkHandlers = (type: 'add' \| 'remove') => () => {\n const document = ref.current?.contentWindow!.document;\n\n if (document) {\n document.querySelectorAll('a[href^=\"#\"]').forEach((value: Element) => {\n const handler = createLinkCLickHandler(value, document);\n if (type === 'add') {\n value.addEventListener('click', handler);\n } else {\n value.removeEventListener('click', handler);\n }\n });\n }\n };\n\n useEffect(() => {\n ref.current?.addEventListener('load', handleLoadIFrame);\n ref.current?.addEventListener('load', createAnchorLinkHandlers('add'));\n return () => {\n ref.current?.removeEventListener('load', handleLoadIFrame);\n ref.current?.removeEventListener('load', createAnchorLinkHandlers('remove'));\n };\n }, [html]);\n\n useEffect(() => {\n if (ref.current) {\n const resizeObserver = new window.ResizeObserver(\n debounce(handleResizeIFrame, DEFAULT_DELAY),\n );\n resizeObserver.observe(ref.current);\n }\n }, [ref.current?.contentWindow?.document?.body]);\n\n return (\n <iframe\n style={{\n height,\n }}\n ref={ref}\n title={generateID()}\n frameBorder={0}\n className={b('content')}\n srcDoc={html}\n />\n );\n};\n\nconst CodeEditMode: React.FC<{\n initialText: string;\n onSave: (v: string) => void;\n onCancel: () => void;\n}> = ({initialText, onSave, onCancel}) => {\n const [text, setText] = useState(initialText \|\| '\\n');\n\n return (\n <div className={b({editing: true})}>\n <div className={b('editor')}>\n <TextArea\n controlProps={{\n className: STOP_EVENT_CLASSNAME,\n }}\n value={text}\n onUpdate={(v) => {\n setText(v);\n }}\n autoFocus\n />\n\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 YfmHtmlBlockView: React.FC<{\n getPos: () => number \| undefined;\n node: Node;\n onChange: (attrs: {[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string}) => void;\n options: YfmHtmlBlockOptions;\n view: EditorView;\n}> = ({\n onChange,\n node,\n getPos,\n view,\n options: {useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = ''},\n}) => {\n const entityId: string = node.attrs[YfmHtmlBlockConsts.NodeAttrs.EntityId];\n const entityKey = useMemo(\n () => SharedStateKey.define<YfmHtmlBlockEntitySharedState>({name: entityId}),\n [entityId],\n );\n\n const config = useConfig?.();\n\n const [editing, setEditing, unsetEditing] = useSharedEditingState(view, entityKey);\n const [menuOpen, _openMenu, closeMenu, toggleMenuOpen] = useBooleanState(false);\n const [anchorElement, setAnchorElement] = useElementState();\n\n if (editing) {\n return (\n <CodeEditMode\n initialText={node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc]}\n onCancel={unsetEditing}\n onSave={(v) => {\n onChange({[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v});\n unsetEditing();\n }}\n />\n );\n }\n\n let additional = baseTarget ? `<base target=\"${baseTarget}\">` : '';\n if (styles) {\n const stylesContent =\n typeof styles === 'string'\n ? `<link rel=\"stylesheet\" href=\"${styles}\" />`\n : `<style>${getStyles(styles)}</style>`;\n additional += stylesContent;\n }\n\n const head = `<head>${headContent \|\| additional}</head>`;\n const body = `<body>${node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc] ?? ''}</body>`;\n const html = `<!DOCTYPE html><html>${head}${body}</html>`;\n\n const sanitizeFunction = typeof sanitize === 'function' ? sanitize : sanitize?.body;\n\n const resultHtml = sanitizeFunction ? sanitizeFunction(html) : html;\n\n return (\n <div className={b()} onDoubleClick={setEditing}>\n <Label className={b('label')} icon={<Icon size={16} data={Eye} />}>\n {i18n('preview')}\n </Label>\n <YfmHtmlBlockPreview html={resultHtml} onClick={setEditing} config={config} />\n\n <div className={b('menu')}>\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 anchorElement={anchorElement}\n open={menuOpen}\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":"YfmHtmlBlockView.js","sourceRoot":"../../../../../../src","sources":["extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useEffect, useMemo, useRef, useState} from 'react';\n\nimport {getStyles} from '@diplodoc/html-extension';\nimport type {IHTMLIFrameElementConfig} from '@diplodoc/html-extension/runtime';\nimport {Ellipsis as DotsIcon, Eye} from '@gravity-ui/icons';\nimport {Button, Icon, Label, Menu, Popup} from '@gravity-ui/uikit';\nimport type {Node} from 'prosemirror-model';\nimport type {EditorView} from 'prosemirror-view';\n\nimport {cn} from 'src/classname';\nimport {SharedStateKey} from 'src/extensions/behavior/SharedState';\nimport {TextAreaFixed as TextArea} from 'src/forms/TextInput';\nimport {i18n} from 'src/i18n/common';\nimport {debounce} from 'src/lodash';\nimport {useAutoSave, useBooleanState, useElementState} from 'src/react-utils/hooks';\nimport {useSharedEditingState} from 'src/react-utils/useSharedEditingState';\nimport {removeNode} from 'src/utils/remove-node';\n\nimport {YfmHtmlBlockConsts} from '../YfmHtmlBlockSpecs/const';\nimport type {YfmHtmlBlockOptions} from '../index';\nimport type {YfmHtmlBlockEntitySharedState} from '../types';\n\nimport './YfmHtmlBlock.scss';\n\nexport const cnYfmHtmlBlock = cn('yfm-html-block');\nexport const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';\n\nconst b = cnYfmHtmlBlock;\n\ninterface YfmHtmlBlockViewProps {\n html: string;\n onClick: () => void;\n config?: IHTMLIFrameElementConfig;\n}\n\nexport function generateID() {\n return Math.random().toString(36).substr(2, 8);\n}\n\nconst DEFAULT_PADDING = 20;\nconst DEFAULT_DELAY = 100;\n\nconst createLinkCLickHandler = (value: Element, document: Document) => (event: Event) => {\n event.preventDefault();\n const targetId = value.getAttribute('href');\n\n if (targetId) {\n const targetElement = document.querySelector(targetId);\n if (targetElement) {\n targetElement.scrollIntoView({behavior: 'smooth'});\n }\n }\n};\n\nconst YfmHtmlBlockPreview: React.FC<YfmHtmlBlockViewProps> = ({html, onClick, config}) => {\n const ref = useRef<HTMLIFrameElement>(null);\n const styles = useRef<Record<string, string>>({});\n const classNames = useRef<string[]>([]);\n const resizeConfig = useRef<Record<string, number>>({});\n\n const [height, setHeight] = useState('100%');\n\n useEffect(() => {\n setStyles(config?.styles);\n setClassNames(config?.classNames);\n }, [config, ref.current?.contentWindow?.document?.body]);\n\n const handleLoadIFrame = () => {\n const contentWindow = ref.current?.contentWindow;\n\n handleResizeIFrame();\n\n if (contentWindow) {\n const frameDocument = contentWindow.document;\n frameDocument.addEventListener('dblclick', () => {\n onClick();\n });\n }\n };\n\n const handleResizeIFrame = () => {\n if (ref.current) {\n const contentWindow = ref.current?.contentWindow;\n if (contentWindow) {\n const body = contentWindow.document.body;\n if (body) {\n const height =\n body.scrollHeight +\n (resizeConfig.current?.padding \|\| DEFAULT_PADDING) +\n 'px';\n\n setHeight(height);\n }\n }\n }\n };\n\n const setClassNames = (newClassNames: string[] \| undefined) => {\n const body = ref.current?.contentWindow?.document.body;\n\n if (body && newClassNames) {\n const previousClassNames = classNames.current;\n\n // remove all classes that were in previousClassNames but are not in classNames\n previousClassNames.forEach((className) => {\n if (!newClassNames.includes(className)) {\n body.classList.remove(className);\n }\n });\n\n // add classes that are in classNames\n newClassNames.forEach((className) => {\n if (!body.classList.contains(className)) {\n body.classList.add(className);\n }\n });\n\n classNames.current = newClassNames;\n }\n };\n\n const setStyles = (newStyles: Record<string, string> \| undefined) => {\n const body = ref.current?.contentWindow?.document.body;\n\n if (body && newStyles) {\n const previousStyles = styles.current;\n\n // remove all styles that are in previousStyles but not in styles\n Object.keys(previousStyles).forEach((property) => {\n if (!Object.prototype.hasOwnProperty.call(newStyles, property)) {\n body.style.removeProperty(property);\n }\n });\n\n // sdd or update styles that are in styles\n Object.keys(newStyles).forEach((property) => {\n body.style.setProperty(property, newStyles[property]);\n });\n\n // update current styles to the new styles\n styles.current = newStyles;\n }\n };\n\n // finds all relative links (href^=\"#\") and changes their click behavior\n const createAnchorLinkHandlers = (type: 'add' \| 'remove') => () => {\n const document = ref.current?.contentWindow!.document;\n\n if (document) {\n document.querySelectorAll('a[href^=\"#\"]').forEach((value: Element) => {\n const handler = createLinkCLickHandler(value, document);\n if (type === 'add') {\n value.addEventListener('click', handler);\n } else {\n value.removeEventListener('click', handler);\n }\n });\n }\n };\n\n useEffect(() => {\n ref.current?.addEventListener('load', handleLoadIFrame);\n ref.current?.addEventListener('load', createAnchorLinkHandlers('add'));\n return () => {\n ref.current?.removeEventListener('load', handleLoadIFrame);\n ref.current?.removeEventListener('load', createAnchorLinkHandlers('remove'));\n };\n }, [html]);\n\n useEffect(() => {\n if (ref.current) {\n const resizeObserver = new window.ResizeObserver(\n debounce(handleResizeIFrame, DEFAULT_DELAY),\n );\n resizeObserver.observe(ref.current);\n }\n }, [ref.current?.contentWindow?.document?.body]);\n\n return (\n <iframe\n style={{\n height,\n }}\n ref={ref}\n title={generateID()}\n frameBorder={0}\n className={b('content')}\n srcDoc={html}\n />\n );\n};\n\nconst CodeEditMode: React.FC<{\n initialText: string;\n onSave: (v: string) => void;\n onCancel: () => void;\n options: YfmHtmlBlockOptions;\n}> = ({initialText, onSave, onCancel, options: {autoSave}}) => {\n const {value, handleChange, handleManualSave, isSaveDisabled} = useAutoSave({\n initialValue: initialText \|\| '\\n',\n onSave,\n onClose: onCancel,\n autoSave,\n });\n\n return (\n <div className={b({editing: true})}>\n <div className={b('editor')}>\n <TextArea\n controlProps={{\n className: STOP_EVENT_CLASSNAME,\n }}\n value={value}\n onUpdate={handleChange}\n autoFocus\n />\n\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 YfmHtmlBlockView: React.FC<{\n getPos: () => number \| undefined;\n node: Node;\n onChange: (attrs: {[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: string}) => void;\n options: YfmHtmlBlockOptions;\n view: EditorView;\n}> = ({onChange, node, getPos, view, options}) => {\n const {useConfig, sanitize, styles, baseTarget = '_parent', head: headContent = ''} = options;\n const entityId: string = node.attrs[YfmHtmlBlockConsts.NodeAttrs.EntityId];\n const entityKey = useMemo(\n () => SharedStateKey.define<YfmHtmlBlockEntitySharedState>({name: entityId}),\n [entityId],\n );\n\n const config = useConfig?.();\n\n const [editing, setEditing, unsetEditing] = useSharedEditingState(view, entityKey);\n const [menuOpen, _openMenu, closeMenu, toggleMenuOpen] = useBooleanState(false);\n const [anchorElement, setAnchorElement] = useElementState();\n\n if (editing) {\n return (\n <CodeEditMode\n initialText={node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc]}\n onCancel={unsetEditing}\n onSave={(v) => {\n onChange({[YfmHtmlBlockConsts.NodeAttrs.srcdoc]: v});\n }}\n options={options}\n />\n );\n }\n\n let additional = baseTarget ? `<base target=\"${baseTarget}\">` : '';\n if (styles) {\n const stylesContent =\n typeof styles === 'string'\n ? `<link rel=\"stylesheet\" href=\"${styles}\" />`\n : `<style>${getStyles(styles)}</style>`;\n additional += stylesContent;\n }\n\n const head = `<head>${headContent \|\| additional}</head>`;\n const body = `<body>${node.attrs[YfmHtmlBlockConsts.NodeAttrs.srcdoc] ?? ''}</body>`;\n const html = `<!DOCTYPE html><html>${head}${body}</html>`;\n\n const sanitizeFunction = typeof sanitize === 'function' ? sanitize : sanitize?.body;\n\n const resultHtml = sanitizeFunction ? sanitizeFunction(html) : html;\n\n return (\n <div className={b()} onDoubleClick={setEditing}>\n <Label className={b('label')} icon={<Icon size={16} data={Eye} />}>\n {i18n('preview')}\n </Label>\n <YfmHtmlBlockPreview html={resultHtml} onClick={setEditing} config={config} />\n\n <div className={b('menu')}>\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 anchorElement={anchorElement}\n open={menuOpen}\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/YfmHtmlBlock/index.d.ts CHANGED Viewed

@@ -4,6 +4,10 @@ import type { Action, ExtensionAuto } from "../../../core/index.js";
 import { YfmHtmlBlockAction } from "./YfmHtmlBlockSpecs/const.js";
 export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
     useConfig?: () => IHTMLIFrameElementConfig | undefined;
+    autoSave?: {
+        enabled: boolean;
+        delay?: number;
+    };
 }
 export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
 declare global {