@gravity-ui/markdown-editor 13.16.0 → 13.17.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 (13) hide show
  1. package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js +31 -9
  2. package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.d.ts +1 -1
  3. package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js +2 -2
  4. package/build/cjs/extensions/yfm/YfmHtmlBlock/index.d.ts +1 -1
  5. package/build/cjs/version.js +1 -1
  6. package/build/cjs/view/hocs/withYfmHtml/index.js +2 -2
  7. package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js +31 -9
  8. package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.d.ts +1 -1
  9. package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js +2 -2
  10. package/build/esm/extensions/yfm/YfmHtmlBlock/index.d.ts +1 -1
  11. package/build/esm/version.js +1 -1
  12. package/build/esm/view/hocs/withYfmHtml/index.js +3 -3
  13. package/package.json +3 -3
package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js CHANGED
@@ -22,6 +22,16 @@ function generateID() {
22
22
  exports.generateID = generateID;
23
23
  const DEFAULT_PADDING = 20;
24
24
  const DEFAULT_DELAY = 100;
25
+ const createLinkCLickHandler = (value, document) => (event) => {
26
+ event.preventDefault();
27
+ const targetId = value.getAttribute('href');
28
+ if (targetId) {
29
+ const targetElement = document.querySelector(targetId);
30
+ if (targetElement) {
31
+ targetElement.scrollIntoView({ behavior: 'smooth' });
32
+ }
33
+ }
34
+ };
25
35
  const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
26
36
  var _a, _b, _c, _d, _e, _f;
27
37
  const ref = (0, react_1.useRef)(null);
@@ -30,11 +40,6 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
30
40
  const resizeConfig = (0, react_1.useRef)({});
31
41
  const [height, setHeight] = (0, react_1.useState)('100%');
32
42
  (0, react_1.useEffect)(() => {
33
- var _a, _b;
34
- resizeConfig.current = {
35
- padding: (_a = config === null || config === void 0 ? void 0 : config.resizePadding) !== null && _a !== void 0 ? _a : DEFAULT_PADDING,
36
- delay: (_b = config === null || config === void 0 ? void 0 : config.resizeDelay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY,
37
- };
38
43
  setStyles(config === null || config === void 0 ? void 0 : config.styles);
39
44
  setClassNames(config === null || config === void 0 ? void 0 : config.classNames);
40
45
  }, [config, (_c = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document) === null || _c === void 0 ? void 0 : _c.body]);
@@ -103,18 +108,35 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
103
108
  styles.current = newStyles;
104
109
  }
105
110
  };
106
- (0, react_1.useEffect)(() => {
111
+ // finds all relative links (href^="#") and changes their click behavior
112
+ const createAnchorLinkHandlers = (type) => () => {
107
113
  var _a;
114
+ const document = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow.document;
115
+ if (document) {
116
+ document.querySelectorAll('a[href^="#"]').forEach((value) => {
117
+ const handler = createLinkCLickHandler(value, document);
118
+ if (type === 'add') {
119
+ value.addEventListener('click', handler);
120
+ }
121
+ else {
122
+ value.removeEventListener('click', handler);
123
+ }
124
+ });
125
+ }
126
+ };
127
+ (0, react_1.useEffect)(() => {
128
+ var _a, _b;
108
129
  (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('load', handleLoadIFrame);
130
+ (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener('load', createAnchorLinkHandlers('add'));
109
131
  return () => {
110
- var _a;
132
+ var _a, _b;
111
133
  (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', handleLoadIFrame);
134
+ (_b = ref.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('load', createAnchorLinkHandlers('remove'));
112
135
  };
113
136
  }, [html]);
114
137
  (0, react_1.useEffect)(() => {
115
- var _a, _b;
116
138
  if (ref.current) {
117
- const resizeObserver = new window.ResizeObserver((0, debounce_1.default)(handleResizeIFrame, (_b = (_a = resizeConfig.current) === null || _a === void 0 ? void 0 : _a.delay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY));
139
+ const resizeObserver = new window.ResizeObserver((0, debounce_1.default)(handleResizeIFrame, DEFAULT_DELAY));
118
140
  resizeObserver.observe(ref.current);
119
141
  }
120
142
  }, [(_f = (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.contentWindow) === null || _e === void 0 ? void 0 : _e.document) === null || _f === void 0 ? void 0 : _f.body]);
package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
2
2
  import type { ExtensionNodeSpec } from '../../../../core';
3
3
  export { yfmHtmlBlockNodeName } from './const';
4
- export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
4
+ export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
5
5
  nodeView?: ExtensionNodeSpec['view'];
6
6
  }
7
7
  export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {
package/build/cjs/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js CHANGED
@@ -10,14 +10,14 @@ Object.defineProperty(exports, "yfmHtmlBlockNodeName", { enumerable: true, get:
10
10
  const YfmHtmlBlockSpecsExtension = (builder, _a) => {
11
11
  var { nodeView } = _a, options = tslib_1.__rest(_a, ["nodeView"]);
12
12
  builder
13
- .configureMd((md) => md.use((0, html_extension_1.transform)(Object.assign({ bundle: false }, options)), {}))
13
+ .configureMd((md) => md.use((0, html_extension_1.transform)(Object.assign({ bundle: false, embeddingMode: 'srcdoc' }, options)), {}))
14
14
  .addNode(const_1.YfmHtmlBlockConsts.NodeName, () => ({
15
15
  fromMd: {
16
16
  tokenSpec: {
17
17
  name: const_1.YfmHtmlBlockConsts.NodeName,
18
18
  type: 'node',
19
19
  noCloseToken: true,
20
- getAttrs: (token) => { var _a; return Object.fromEntries((_a = token.attrs) !== null && _a !== void 0 ? _a : []); },
20
+ getAttrs: ({ content }) => ({ srcdoc: content }),
21
21
  },
22
22
  },
23
23
  spec: {
package/build/cjs/extensions/yfm/YfmHtmlBlock/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
2
2
  import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
3
3
  import { Action, ExtensionAuto } from '../../../core';
4
4
  import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
5
- export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
5
+ export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
6
6
  useConfig?: () => IHTMLIFrameElementConfig | undefined;
7
7
  }
8
8
  export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
package/build/cjs/version.js CHANGED
@@ -2,4 +2,4 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.VERSION = void 0;
4
4
  /** During build process, the current version will be injected here */
5
- exports.VERSION = typeof '13.16.0' !== 'undefined' ? '13.16.0' : 'unknown';
5
+ exports.VERSION = typeof '13.17.0' !== 'undefined' ? '13.17.0' : 'unknown';
package/build/cjs/view/hocs/withYfmHtml/index.js CHANGED
@@ -9,13 +9,13 @@ function withYfmHtmlBlock(opts) {
9
9
  return (Component) => (0, react_1.forwardRef)(function WithYfmHtml(props, ref) {
10
10
  const { meta, html, yfmHtmlBlockConfig } = props;
11
11
  (0, useYfmHtmlBlockRuntime_1.useYfmHtmlBlockRuntime)(meta, opts.runtime);
12
- const yfmHtmlBlock = (0, react_2.useDiplodocHtml)();
12
+ const yfmHtmlBlock = (0, react_2.useDiplodocEmbeddedContentController)();
13
13
  (0, react_1.useEffect)(() => {
14
14
  if (yfmHtmlBlock) {
15
15
  if (yfmHtmlBlockConfig) {
16
16
  yfmHtmlBlock.setConfig(yfmHtmlBlockConfig);
17
17
  }
18
- yfmHtmlBlock.reinitialize();
18
+ yfmHtmlBlock.initialize();
19
19
  }
20
20
  }, [yfmHtmlBlock, html, yfmHtmlBlockConfig]);
21
21
  return react_1.default.createElement(Component, Object.assign({}, props, { ref: ref }));
package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockNodeView/YfmHtmlBlockView.js CHANGED
@@ -18,6 +18,16 @@ export function generateID() {
18
18
  }
19
19
  const DEFAULT_PADDING = 20;
20
20
  const DEFAULT_DELAY = 100;
21
+ const createLinkCLickHandler = (value, document) => (event) => {
22
+ event.preventDefault();
23
+ const targetId = value.getAttribute('href');
24
+ if (targetId) {
25
+ const targetElement = document.querySelector(targetId);
26
+ if (targetElement) {
27
+ targetElement.scrollIntoView({ behavior: 'smooth' });
28
+ }
29
+ }
30
+ };
21
31
  const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
22
32
  var _a, _b, _c, _d, _e, _f;
23
33
  const ref = useRef(null);
@@ -26,11 +36,6 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
26
36
  const resizeConfig = useRef({});
27
37
  const [height, setHeight] = useState('100%');
28
38
  useEffect(() => {
29
- var _a, _b;
30
- resizeConfig.current = {
31
- padding: (_a = config === null || config === void 0 ? void 0 : config.resizePadding) !== null && _a !== void 0 ? _a : DEFAULT_PADDING,
32
- delay: (_b = config === null || config === void 0 ? void 0 : config.resizeDelay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY,
33
- };
34
39
  setStyles(config === null || config === void 0 ? void 0 : config.styles);
35
40
  setClassNames(config === null || config === void 0 ? void 0 : config.classNames);
36
41
  }, [config, (_c = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document) === null || _c === void 0 ? void 0 : _c.body]);
@@ -99,18 +104,35 @@ const YfmHtmlBlockPreview = ({ html, onСlick, config }) => {
99
104
  styles.current = newStyles;
100
105
  }
101
106
  };
102
- useEffect(() => {
107
+ // finds all relative links (href^="#") and changes their click behavior
108
+ const createAnchorLinkHandlers = (type) => () => {
103
109
  var _a;
110
+ const document = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.contentWindow.document;
111
+ if (document) {
112
+ document.querySelectorAll('a[href^="#"]').forEach((value) => {
113
+ const handler = createLinkCLickHandler(value, document);
114
+ if (type === 'add') {
115
+ value.addEventListener('click', handler);
116
+ }
117
+ else {
118
+ value.removeEventListener('click', handler);
119
+ }
120
+ });
121
+ }
122
+ };
123
+ useEffect(() => {
124
+ var _a, _b;
104
125
  (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener('load', handleLoadIFrame);
126
+ (_b = ref.current) === null || _b === void 0 ? void 0 : _b.addEventListener('load', createAnchorLinkHandlers('add'));
105
127
  return () => {
106
- var _a;
128
+ var _a, _b;
107
129
  (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('load', handleLoadIFrame);
130
+ (_b = ref.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('load', createAnchorLinkHandlers('remove'));
108
131
  };
109
132
  }, [html]);
110
133
  useEffect(() => {
111
- var _a, _b;
112
134
  if (ref.current) {
113
- const resizeObserver = new window.ResizeObserver(debounce(handleResizeIFrame, (_b = (_a = resizeConfig.current) === null || _a === void 0 ? void 0 : _a.delay) !== null && _b !== void 0 ? _b : DEFAULT_DELAY));
135
+ const resizeObserver = new window.ResizeObserver(debounce(handleResizeIFrame, DEFAULT_DELAY));
114
136
  resizeObserver.observe(ref.current);
115
137
  }
116
138
  }, [(_f = (_e = (_d = ref.current) === null || _d === void 0 ? void 0 : _d.contentWindow) === null || _e === void 0 ? void 0 : _e.document) === null || _f === void 0 ? void 0 : _f.body]);
package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
2
2
  import type { ExtensionNodeSpec } from '../../../../core';
3
3
  export { yfmHtmlBlockNodeName } from './const';
4
- export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
4
+ export interface YfmHtmlBlockSpecsOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
5
5
  nodeView?: ExtensionNodeSpec['view'];
6
6
  }
7
7
  export declare const YfmHtmlBlockSpecs: import("../../../../core").ExtensionWithOptions<YfmHtmlBlockSpecsOptions> & {
package/build/esm/extensions/yfm/YfmHtmlBlock/YfmHtmlBlockSpecs/index.js CHANGED
@@ -6,14 +6,14 @@ export { yfmHtmlBlockNodeName } from './const';
6
6
  const YfmHtmlBlockSpecsExtension = (builder, _a) => {
7
7
  var { nodeView } = _a, options = __rest(_a, ["nodeView"]);
8
8
  builder
9
- .configureMd((md) => md.use(transform(Object.assign({ bundle: false }, options)), {}))
9
+ .configureMd((md) => md.use(transform(Object.assign({ bundle: false, embeddingMode: 'srcdoc' }, options)), {}))
10
10
  .addNode(YfmHtmlBlockConsts.NodeName, () => ({
11
11
  fromMd: {
12
12
  tokenSpec: {
13
13
  name: YfmHtmlBlockConsts.NodeName,
14
14
  type: 'node',
15
15
  noCloseToken: true,
16
- getAttrs: (token) => { var _a; return Object.fromEntries((_a = token.attrs) !== null && _a !== void 0 ? _a : []); },
16
+ getAttrs: ({ content }) => ({ srcdoc: content }),
17
17
  },
18
18
  },
19
19
  spec: {
package/build/esm/extensions/yfm/YfmHtmlBlock/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import { PluginOptions } from '@diplodoc/html-extension/plugin/transform';
2
2
  import type { IHTMLIFrameElementConfig } from '@diplodoc/html-extension/runtime';
3
3
  import { Action, ExtensionAuto } from '../../../core';
4
4
  import { YfmHtmlBlockAction } from './YfmHtmlBlockSpecs/const';
5
- export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle'> {
5
+ export interface YfmHtmlBlockOptions extends Omit<PluginOptions, 'runtimeJsPath' | 'containerClasses' | 'bundle' | 'embeddingMode'> {
6
6
  useConfig?: () => IHTMLIFrameElementConfig | undefined;
7
7
  }
8
8
  export declare const YfmHtmlBlock: ExtensionAuto<YfmHtmlBlockOptions>;
package/build/esm/version.js CHANGED
@@ -1,2 +1,2 @@
1
1
  /** During build process, the current version will be injected here */
2
- export const VERSION = typeof '13.16.0' !== 'undefined' ? '13.16.0' : 'unknown';
2
+ export const VERSION = typeof '13.17.0' !== 'undefined' ? '13.17.0' : 'unknown';
package/build/esm/view/hocs/withYfmHtml/index.js CHANGED
@@ -1,17 +1,17 @@
1
1
  import React, { forwardRef, useEffect } from 'react';
2
- import { useDiplodocHtml } from '@diplodoc/html-extension/react';
2
+ import { useDiplodocEmbeddedContentController } from '@diplodoc/html-extension/react';
3
3
  import { useYfmHtmlBlockRuntime } from './useYfmHtmlBlockRuntime';
4
4
  export function withYfmHtmlBlock(opts) {
5
5
  return (Component) => forwardRef(function WithYfmHtml(props, ref) {
6
6
  const { meta, html, yfmHtmlBlockConfig } = props;
7
7
  useYfmHtmlBlockRuntime(meta, opts.runtime);
8
- const yfmHtmlBlock = useDiplodocHtml();
8
+ const yfmHtmlBlock = useDiplodocEmbeddedContentController();
9
9
  useEffect(() => {
10
10
  if (yfmHtmlBlock) {
11
11
  if (yfmHtmlBlockConfig) {
12
12
  yfmHtmlBlock.setConfig(yfmHtmlBlockConfig);
13
13
  }
14
- yfmHtmlBlock.reinitialize();
14
+ yfmHtmlBlock.initialize();
15
15
  }
16
16
  }, [yfmHtmlBlock, html, yfmHtmlBlockConfig]);
17
17
  return React.createElement(Component, Object.assign({}, props, { ref: ref }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/markdown-editor",
3
- "version": "13.16.0",
3
+ "version": "13.17.0",
4
4
  "description": "Markdown wysiwyg and markup editor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -200,7 +200,7 @@
200
200
  },
201
201
  "devDependencies": {
202
202
  "@diplodoc/folding-headings-extension": "0.1.0",
203
- "@diplodoc/html-extension": "1.5.0",
203
+ "@diplodoc/html-extension": "2.1.0",
204
204
  "@diplodoc/latex-extension": "1.0.3",
205
205
  "@diplodoc/mermaid-extension": "1.2.1",
206
206
  "@diplodoc/transform": "4.22.0",
@@ -275,7 +275,7 @@
275
275
  },
276
276
  "peerDependencies": {
277
277
  "@diplodoc/folding-headings-extension": "^0.1.0",
278
- "@diplodoc/html-extension": "^1.2.7",
278
+ "@diplodoc/html-extension": "2.1.0",
279
279
  "@diplodoc/latex-extension": "^1.0.3",
280
280
  "@diplodoc/mermaid-extension": "^1.0.0",
281
281
  "@diplodoc/transform": "^4.5.0",