@gravity-ui/markdown-editor 14.4.0 → 14.5.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 (54) hide show
  1. package/build/cjs/bundle/Editor.js +1 -0
  2. package/build/cjs/bundle/config/markup.d.ts +41 -17
  3. package/build/cjs/bundle/config/markup.js +413 -308
  4. package/build/cjs/bundle/config/wysiwyg.d.ts +29 -18
  5. package/build/cjs/bundle/config/wysiwyg.js +526 -310
  6. package/build/cjs/bundle/sticky/sticky.css +1 -1
  7. package/build/cjs/bundle/types.d.ts +2 -0
  8. package/build/cjs/extensions/behavior/Clipboard/utils.d.ts +1 -0
  9. package/build/cjs/extensions/behavior/Clipboard/utils.js +1 -0
  10. package/build/cjs/extensions/markdown/CodeBlock/handle-paste.js +5 -17
  11. package/build/cjs/extensions/yfm/YfmFile/YfmFileSpecs/const.d.ts +12 -0
  12. package/build/cjs/extensions/yfm/YfmFile/YfmFileSpecs/const.js +21 -2
  13. package/build/cjs/extensions/yfm/YfmFile/YfmFileSpecs/index.d.ts +8 -1
  14. package/build/cjs/extensions/yfm/YfmFile/YfmFileSpecs/index.js +29 -5
  15. package/build/cjs/markup/codemirror/create.d.ts +1 -0
  16. package/build/cjs/markup/codemirror/create.js +41 -4
  17. package/build/cjs/markup/codemirror/html-to-markdown/converters.d.ts +111 -0
  18. package/build/cjs/markup/codemirror/html-to-markdown/converters.js +214 -0
  19. package/build/cjs/markup/codemirror/html-to-markdown/handlers.d.ts +104 -0
  20. package/build/cjs/markup/codemirror/html-to-markdown/handlers.js +233 -0
  21. package/build/cjs/markup/codemirror/html-to-markdown/helpers.d.ts +1 -0
  22. package/build/cjs/markup/codemirror/html-to-markdown/helpers.js +21 -0
  23. package/build/cjs/markup/commands/inline.js +18 -8
  24. package/build/cjs/utils/clipboard.d.ts +14 -0
  25. package/build/cjs/utils/clipboard.js +36 -1
  26. package/build/cjs/version.js +1 -1
  27. package/build/esm/bundle/Editor.js +1 -0
  28. package/build/esm/bundle/config/markup.d.ts +41 -17
  29. package/build/esm/bundle/config/markup.js +411 -307
  30. package/build/esm/bundle/config/wysiwyg.d.ts +29 -18
  31. package/build/esm/bundle/config/wysiwyg.js +499 -284
  32. package/build/esm/bundle/sticky/sticky.css +1 -1
  33. package/build/esm/bundle/types.d.ts +2 -0
  34. package/build/esm/extensions/behavior/Clipboard/utils.d.ts +1 -0
  35. package/build/esm/extensions/behavior/Clipboard/utils.js +1 -0
  36. package/build/esm/extensions/markdown/CodeBlock/handle-paste.js +2 -14
  37. package/build/esm/extensions/yfm/YfmFile/YfmFileSpecs/const.d.ts +12 -0
  38. package/build/esm/extensions/yfm/YfmFile/YfmFileSpecs/const.js +21 -2
  39. package/build/esm/extensions/yfm/YfmFile/YfmFileSpecs/index.d.ts +8 -1
  40. package/build/esm/extensions/yfm/YfmFile/YfmFileSpecs/index.js +29 -6
  41. package/build/esm/markup/codemirror/create.d.ts +1 -0
  42. package/build/esm/markup/codemirror/create.js +40 -3
  43. package/build/esm/markup/codemirror/html-to-markdown/converters.d.ts +111 -0
  44. package/build/esm/markup/codemirror/html-to-markdown/converters.js +210 -0
  45. package/build/esm/markup/codemirror/html-to-markdown/handlers.d.ts +104 -0
  46. package/build/esm/markup/codemirror/html-to-markdown/handlers.js +215 -0
  47. package/build/esm/markup/codemirror/html-to-markdown/helpers.d.ts +1 -0
  48. package/build/esm/markup/codemirror/html-to-markdown/helpers.js +17 -0
  49. package/build/esm/markup/commands/inline.js +18 -8
  50. package/build/esm/utils/clipboard.d.ts +14 -0
  51. package/build/esm/utils/clipboard.js +32 -0
  52. package/build/esm/version.js +1 -1
  53. package/build/styles.css +1 -1
  54. package/package.json +9 -7
@@ -15,7 +15,7 @@
15
15
  position: absolute;
16
16
  inset: var(--g-md-toolbar-sticky-inset, -4px);
17
17
  content: "";
18
- border: 1px solid var(--g-color-line-generic-solid);
18
+ border: var(--g-md-toolbar-sticky-border, 1px solid var(--g-color-line-generic-solid));
19
19
  border-radius: 4px;
20
20
  background-color: var(--g-color-base-background);
21
21
  }
@@ -109,6 +109,8 @@ export declare type MarkdownEditorMarkupConfig = {
109
109
  keymaps?: CreateCodemirrorParams['keymaps'];
110
110
  /** Overrides the default placeholder content. */
111
111
  placeholder?: CreateCodemirrorParams['placeholder'];
112
+ /** Enable HTML parsing when pasting content. */
113
+ parseHtmlOnPaste?: boolean;
112
114
  /**
113
115
  * Additional language data for markdown language in codemirror.
114
116
  * Can be used to configure additional autocompletions and others.
@@ -3,6 +3,7 @@ export declare enum DataTransferType {
3
3
  Text = "text/plain",
4
4
  Html = "text/html",
5
5
  Yfm = "text/yfm",
6
+ Rtf = "text/rtf",
6
7
  UriList = "text/uri-list",
7
8
  VSCodeData = "vscode-editor-data",
8
9
  Files = "Files"
@@ -4,6 +4,7 @@ export var DataTransferType;
4
4
  DataTransferType["Text"] = "text/plain";
5
5
  DataTransferType["Html"] = "text/html";
6
6
  DataTransferType["Yfm"] = "text/yfm";
7
+ DataTransferType["Rtf"] = "text/rtf";
7
8
  DataTransferType["UriList"] = "text/uri-list";
8
9
  DataTransferType["VSCodeData"] = "vscode-editor-data";
9
10
  DataTransferType["Files"] = "Files";
@@ -1,4 +1,4 @@
1
- import { DataTransferType } from '../../behavior/Clipboard/utils';
1
+ import { DataTransferType, isVSCode, tryParseVSCodeData } from '../../../utils/clipboard';
2
2
  import { cbType, codeBlockLangAttr } from './const';
3
3
  export const handlePaste = (view, e) => {
4
4
  if (!e.clipboardData || view.state.selection.$from.parent.type.spec.code)
@@ -20,7 +20,7 @@ function getCodeData(data) {
20
20
  let mode;
21
21
  if (isVSCode(data)) {
22
22
  editor = 'vscode';
23
- mode = (_a = tryCatch(() => JSON.parse(data.getData(DataTransferType.VSCodeData)))) === null || _a === void 0 ? void 0 : _a.mode;
23
+ mode = (_a = tryParseVSCodeData(data)) === null || _a === void 0 ? void 0 : _a.mode;
24
24
  }
25
25
  else
26
26
  return null;
@@ -28,15 +28,3 @@ function getCodeData(data) {
28
28
  }
29
29
  return null;
30
30
  }
31
- function isVSCode(data) {
32
- return data.types.includes(DataTransferType.VSCodeData);
33
- }
34
- function tryCatch(fn) {
35
- try {
36
- return fn();
37
- }
38
- catch (e) {
39
- console.error(e);
40
- }
41
- return undefined;
42
- }
@@ -1,5 +1,17 @@
1
+ import { FileHtmlAttr } from '@diplodoc/file-extension';
1
2
  import type { AttributeSpec } from 'prosemirror-model';
2
3
  export declare const yfmFileNodeName = "yfm_file";
4
+ export declare const YfmFileAttr: {
5
+ readonly Markup: "data-markup";
6
+ readonly Name: FileHtmlAttr.Download;
7
+ readonly Link: FileHtmlAttr.Href;
8
+ readonly ReferrerPolicy: FileHtmlAttr.ReferrerPolicy;
9
+ readonly Rel: FileHtmlAttr.Rel;
10
+ readonly Target: FileHtmlAttr.Target;
11
+ readonly Type: FileHtmlAttr.Type;
12
+ readonly Lang: FileHtmlAttr.HrefLang;
13
+ };
14
+ export declare const YFM_FILE_DIRECTIVE_ATTRS: readonly string[];
3
15
  export declare const KNOWN_ATTRS: readonly string[];
4
16
  export declare const REQUIRED_ATTRS: string[];
5
17
  export declare const fileNodeAttrsSpec: Record<string, AttributeSpec>;
@@ -1,5 +1,22 @@
1
- import { FILE_KNOWN_ATTRS, FILE_REQUIRED_ATTRS, FILE_TOKEN, FILE_TO_LINK_ATTRS_MAP, } from '@diplodoc/file-extension';
1
+ import { FILE_KNOWN_ATTRS, FILE_REQUIRED_ATTRS, FILE_TOKEN, FILE_TO_LINK_ATTRS_MAP, FileHtmlAttr, } from '@diplodoc/file-extension';
2
2
  export const yfmFileNodeName = FILE_TOKEN;
3
+ export const YfmFileAttr = {
4
+ Markup: 'data-markup',
5
+ Name: FileHtmlAttr.Download,
6
+ Link: FileHtmlAttr.Href,
7
+ ReferrerPolicy: FileHtmlAttr.ReferrerPolicy,
8
+ Rel: FileHtmlAttr.Rel,
9
+ Target: FileHtmlAttr.Target,
10
+ Type: FileHtmlAttr.Type,
11
+ Lang: FileHtmlAttr.HrefLang,
12
+ };
13
+ export const YFM_FILE_DIRECTIVE_ATTRS = [
14
+ YfmFileAttr.ReferrerPolicy,
15
+ YfmFileAttr.Rel,
16
+ YfmFileAttr.Target,
17
+ YfmFileAttr.Type,
18
+ YfmFileAttr.Lang,
19
+ ];
3
20
  export const KNOWN_ATTRS = FILE_KNOWN_ATTRS.map((attrName) => {
4
21
  if (attrName in FILE_TO_LINK_ATTRS_MAP)
5
22
  return FILE_TO_LINK_ATTRS_MAP[attrName];
@@ -10,7 +27,9 @@ export const REQUIRED_ATTRS = FILE_REQUIRED_ATTRS.map((attrName) => {
10
27
  return FILE_TO_LINK_ATTRS_MAP[attrName];
11
28
  return attrName;
12
29
  });
13
- export const fileNodeAttrsSpec = {};
30
+ export const fileNodeAttrsSpec = {
31
+ [YfmFileAttr.Markup]: { default: null },
32
+ };
14
33
  for (const attrName of KNOWN_ATTRS) {
15
34
  const attrSpec = (fileNodeAttrsSpec[attrName] = {});
16
35
  if (!REQUIRED_ATTRS.includes(attrName)) {
@@ -1,4 +1,11 @@
1
1
  import type { Extension } from '../../../../core';
2
- export { yfmFileNodeName } from './const';
2
+ export { yfmFileNodeName, YfmFileAttr } from './const';
3
3
  export declare const fileType: (schema: import("prosemirror-model").Schema<any, any>) => import("prosemirror-model").NodeType;
4
+ declare global {
5
+ namespace MarkdownEditor {
6
+ interface DirectiveSyntaxAdditionalSupportedExtensions {
7
+ yfmFile: true;
8
+ }
9
+ }
10
+ }
4
11
  export declare const YfmFileSpecs: Extension;
@@ -1,10 +1,14 @@
1
1
  import { FILE_MARKUP_PREFIX, FileClassName, FileHtmlAttr, transform as fileTransform, } from '@diplodoc/file-extension';
2
2
  import { nodeTypeFactory } from '../../../../utils/schema';
3
- import { KNOWN_ATTRS, LINK_TO_FILE_ATTRS_MAP, fileNodeAttrsSpec, yfmFileNodeName } from './const';
4
- export { yfmFileNodeName } from './const';
3
+ import { KNOWN_ATTRS, LINK_TO_FILE_ATTRS_MAP, YFM_FILE_DIRECTIVE_ATTRS, YfmFileAttr, fileNodeAttrsSpec, yfmFileNodeName, } from './const';
4
+ export { yfmFileNodeName, YfmFileAttr } from './const';
5
5
  export const fileType = nodeTypeFactory(yfmFileNodeName);
6
6
  export const YfmFileSpecs = (builder) => {
7
- builder.configureMd((md) => md.use(fileTransform({ bundle: false })));
7
+ const directiveContext = builder.context.get('directiveSyntax');
8
+ builder.configureMd((md) => md.use(fileTransform({
9
+ bundle: false,
10
+ directiveSyntax: directiveContext === null || directiveContext === void 0 ? void 0 : directiveContext.mdPluginValueFor('yfmFile'),
11
+ })));
8
12
  builder.addNode(yfmFileNodeName, () => ({
9
13
  spec: {
10
14
  group: 'inline',
@@ -48,15 +52,20 @@ export const YfmFileSpecs = (builder) => {
48
52
  name: yfmFileNodeName,
49
53
  type: 'node',
50
54
  getAttrs: (tok) => {
51
- var _a;
52
- return Object.fromEntries((_a = tok.attrs) !== null && _a !== void 0 ? _a : []);
55
+ const attrs = Object.fromEntries(tok.attrs || []);
56
+ attrs[YfmFileAttr.Markup] = tok.markup;
57
+ return attrs;
53
58
  },
54
59
  },
55
60
  },
56
61
  toMd: (state, node) => {
62
+ if (directiveContext === null || directiveContext === void 0 ? void 0 : directiveContext.shouldSerializeToDirective('yfmFile', node.attrs[YfmFileAttr.Markup])) {
63
+ state.write(serializeToDirective(node));
64
+ return;
65
+ }
57
66
  const attrsStr = Object.entries(node.attrs)
58
67
  .reduce((arr, [key, value]) => {
59
- if (value) {
68
+ if (key !== YfmFileAttr.Markup && value) {
60
69
  if (key in LINK_TO_FILE_ATTRS_MAP) {
61
70
  key = LINK_TO_FILE_ATTRS_MAP[key];
62
71
  }
@@ -69,3 +78,17 @@ export const YfmFileSpecs = (builder) => {
69
78
  },
70
79
  }));
71
80
  };
81
+ function serializeToDirective(node) {
82
+ const filename = node.attrs[YfmFileAttr.Name] || '';
83
+ const filelink = node.attrs[YfmFileAttr.Link] || '';
84
+ let fileMarkup = `:file[${filename}](${filelink})`;
85
+ const attrs = YFM_FILE_DIRECTIVE_ATTRS.reduce((acc, key) => {
86
+ const value = node.attrs[key];
87
+ if (value)
88
+ acc.push(`${key}="${value}"`);
89
+ return acc;
90
+ }, []);
91
+ if (attrs.length)
92
+ fileMarkup += `{${attrs.join(' ')}}`;
93
+ return fileMarkup;
94
+ }
@@ -20,6 +20,7 @@ export declare type CreateCodemirrorParams = {
20
20
  onScroll: (event: Event) => void;
21
21
  reactRenderer: ReactRenderStorage;
22
22
  uploadHandler?: FileUploadHandler;
23
+ parseHtmlOnPaste?: boolean;
23
24
  parseInsertedUrlAsImage?: ParseInsertedUrlAsImage;
24
25
  needImageDimensions?: boolean;
25
26
  enableNewImageSizeCalculation?: boolean;
@@ -3,19 +3,20 @@ import { defaultKeymap, history, historyKeymap, indentWithTab, insertNewlineKeep
3
3
  import { syntaxHighlighting } from '@codemirror/language';
4
4
  import { EditorView, keymap, placeholder } from '@codemirror/view';
5
5
  import { ActionName } from '../../bundle/config/action-names';
6
- import { DataTransferType } from '../../extensions/behavior/Clipboard/utils';
7
6
  import { logger } from '../../logger';
8
7
  import { Action as A, formatter as f } from '../../shortcuts';
8
+ import { DataTransferType, shouldSkipHtmlConversion } from '../../utils/clipboard';
9
9
  import { insertImages, insertLink, toH1, toH2, toH3, toH4, toH5, toH6, toggleBold, toggleItalic, toggleStrikethrough, toggleUnderline, wrapToCodeBlock, wrapToInlineCode, wrapToYfmCut, wrapToYfmNote, } from '../commands';
10
10
  import { DirectiveSyntaxFacet } from './directive-facet';
11
11
  import { FileUploadHandlerFacet } from './files-upload-facet';
12
12
  import { gravityHighlightStyle, gravityTheme } from './gravity';
13
+ import { MarkdownConverter } from './html-to-markdown/converters';
13
14
  import { PairingCharactersExtension } from './pairing-chars';
14
15
  import { ReactRendererFacet } from './react-facet';
15
16
  import { SearchPanelPlugin } from './search-plugin/plugin';
16
17
  import { yfmLang } from './yfm';
17
18
  export function createCodemirror(params) {
18
- const { doc, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, extensions: extraExtensions, placeholder: placeholderContent, autocompletion: autocompletionConfig, parseInsertedUrlAsImage, directiveSyntax, } = params;
19
+ const { doc, reactRenderer, onCancel, onScroll, onSubmit, onChange, onDocChange, disabledExtensions = {}, keymaps = [], receiver, yfmLangOptions, extensions: extraExtensions, placeholder: placeholderContent, autocompletion: autocompletionConfig, parseHtmlOnPaste, parseInsertedUrlAsImage, directiveSyntax, } = params;
19
20
  const extensions = [gravityTheme, placeholder(placeholderContent)];
20
21
  if (!disabledExtensions.history) {
21
22
  extensions.push(history());
@@ -67,7 +68,43 @@ export function createCodemirror(params) {
67
68
  },
68
69
  paste(event, editor) {
69
70
  var _a;
70
- if (event.clipboardData && parseInsertedUrlAsImage) {
71
+ if (!event.clipboardData)
72
+ return;
73
+ // if clipboard contains YFM content - avoid any meddling with pasted content
74
+ // since text/yfm will contain valid markdown
75
+ const yfmContent = event.clipboardData.getData(DataTransferType.Yfm);
76
+ if (yfmContent) {
77
+ event.preventDefault();
78
+ editor.dispatch(editor.state.replaceSelection(yfmContent));
79
+ return;
80
+ }
81
+ // checking if a copy buffer content is suitable for convertion
82
+ const shouldSkipHtml = shouldSkipHtmlConversion(event.clipboardData);
83
+ // if we have text/html inside copy/paste buffer
84
+ const htmlContent = event.clipboardData.getData(DataTransferType.Html);
85
+ // if we pasting markdown from VsCode we need skip html transformation
86
+ if (htmlContent && parseHtmlOnPaste && !shouldSkipHtml) {
87
+ let parsedMarkdownMarkup;
88
+ try {
89
+ const parser = new DOMParser();
90
+ const htmlDoc = parser.parseFromString(htmlContent, 'text/html');
91
+ const converter = new MarkdownConverter();
92
+ parsedMarkdownMarkup = converter.processNode(htmlDoc.body).trim();
93
+ }
94
+ catch (e) {
95
+ // The code is pretty new and there might be random issues we haven't caught yet,
96
+ // especially with invalid HTML or weird DOM parsing errors.
97
+ // If something goes wrong, I just want to fall back to the "default pasting"
98
+ // rather than break the entire experience for the user.
99
+ logger.error(e);
100
+ }
101
+ if (parsedMarkdownMarkup !== undefined) {
102
+ event.preventDefault();
103
+ editor.dispatch(editor.state.replaceSelection(parsedMarkdownMarkup));
104
+ return;
105
+ }
106
+ }
107
+ if (parseInsertedUrlAsImage) {
71
108
  const { imageUrl, title } = parseInsertedUrlAsImage((_a = event.clipboardData.getData(DataTransferType.Text)) !== null && _a !== void 0 ? _a : '') || {};
72
109
  if (!imageUrl) {
73
110
  return;
@@ -0,0 +1,111 @@
1
+ /**
2
+ * Interface defining methods for visiting different types of HTML nodes.
3
+ * Each method corresponds to a specific HTML element type and returns its Markdown representation.
4
+ */
5
+ export interface HTMLNodeVisitor {
6
+ /** Converts a text node to Markdown */
7
+ visitText(node: Text): string;
8
+ /** Converts an anchor element to Markdown link syntax */
9
+ visitLink(node: HTMLAnchorElement): string;
10
+ /** Converts a header element to Markdown heading syntax */
11
+ visitHeader(node: HTMLElement, level: number): string;
12
+ /** Converts a paragraph element to Markdown */
13
+ visitParagraph(node: HTMLElement): string;
14
+ /** Converts formatting elements (bold, italic, etc.) to Markdown */
15
+ visitFormatting(node: HTMLElement): string;
16
+ /** Converts code elements to Markdown inline code syntax */
17
+ visitCode(node: HTMLElement): string;
18
+ /** Handles generic HTML elements with no specific Markdown conversion */
19
+ visitGeneric(node: HTMLElement): string;
20
+ /** Converts an HTML div element to Markdown format, adding a single newline */
21
+ visitDiv(node: HTMLElement): string;
22
+ /** Converts an HTML br element to a newline in Markdown */
23
+ visitBr(): string;
24
+ /** Converts a table row element to Markdown */
25
+ visitTableRow(node: HTMLTableRowElement): string;
26
+ /** Converts an HTML table element to Markdown table format */
27
+ visitTable(node: HTMLTableElement): string;
28
+ /** Convert img tag to Markdown image format */
29
+ visitImage(node: HTMLImageElement): string;
30
+ }
31
+ /**
32
+ * Main converter class that implements the visitor interface to convert HTML to Markdown.
33
+ * Uses the Chain of Responsibility pattern for handling different node types.
34
+ */
35
+ export declare class MarkdownConverter implements HTMLNodeVisitor {
36
+ private handler;
37
+ constructor();
38
+ /**
39
+ * Converts a text node to Markdown, escaping special characters.
40
+ */
41
+ visitText(node: Text): string;
42
+ /**
43
+ * Converts an HTML anchor element to Markdown link syntax.
44
+ */
45
+ visitLink(node: HTMLAnchorElement): string;
46
+ /**
47
+ * Converts an HTML heading element to Markdown heading syntax.
48
+ */
49
+ visitHeader(node: HTMLElement, level: number): string;
50
+ /**
51
+ * Converts an HTML paragraph to Markdown format.
52
+ */
53
+ visitParagraph(node: HTMLElement): string;
54
+ /**
55
+ * Applies Markdown formatting (bold, italic, etc.) to text content.
56
+ */
57
+ visitFormatting(node: HTMLElement): string;
58
+ /**
59
+ * Converts HTML code elements to Markdown inline code syntax.
60
+ */
61
+ visitCode(node: HTMLElement): string;
62
+ /**
63
+ * Handles generic HTML elements by processing their children.
64
+ */
65
+ visitGeneric(node: HTMLElement): string;
66
+ /**
67
+ * Converts an HTML div element to Markdown format, adding a single newline.
68
+ */
69
+ visitDiv(node: HTMLElement): string;
70
+ /**
71
+ * Converts an HTML br element to a newline in Markdown.
72
+ */
73
+ visitBr(): string;
74
+ /**
75
+ * Converts an HTML table row element to Markdown table row format.
76
+ */
77
+ visitTableRow(node: HTMLTableRowElement): string;
78
+ /**
79
+ * Converts an HTML table element to Markdown table format.
80
+ */
81
+ visitTable(node: HTMLTableElement): string;
82
+ /**
83
+ * Converts img tag to Markdown image format
84
+ */
85
+ visitImage(node: HTMLImageElement): string;
86
+ /**
87
+ * Processes a single node using the handler chain.
88
+ */
89
+ processNode(node: Node): string;
90
+ /**
91
+ * Creates and links together handlers in a specific order implementing the Chain of Responsibility pattern.
92
+ * @returns The first handler in the chain
93
+ */
94
+ private setupHandlerChain;
95
+ /**
96
+ * Recursively collects and processes text content from a node and its children.
97
+ */
98
+ private collectTextContent;
99
+ /**
100
+ * Collects raw text content from code elements.
101
+ */
102
+ private collectCodeContent;
103
+ /**
104
+ * Processes all child nodes of a given node.
105
+ */
106
+ private processChildren;
107
+ /**
108
+ * Gets the first handler in the chain.
109
+ */
110
+ private getHandler;
111
+ }
@@ -0,0 +1,210 @@
1
+ import { BrHandler, CodeHandler, DivHandler, FormattingHandler, GenericHandler, HeaderHandler, ImageHandler, LinkHandler, OrderedListHandler, ParagraphHandler, TableHandler, TableRowHandler, TextNodeHandler, UnorderedListHandler, } from './handlers';
2
+ import { applyFormatting } from './helpers';
3
+ /**
4
+ * Main converter class that implements the visitor interface to convert HTML to Markdown.
5
+ * Uses the Chain of Responsibility pattern for handling different node types.
6
+ */
7
+ export class MarkdownConverter {
8
+ constructor() {
9
+ // Set up the chain of responsibility for handling different node types
10
+ this.handler = this.setupHandlerChain();
11
+ }
12
+ /**
13
+ * Converts a text node to Markdown, escaping special characters.
14
+ */
15
+ visitText(node) {
16
+ return (node.textContent || '').replace(/\n+/g, '').replace(/([<>])/g, '\\$1');
17
+ }
18
+ /**
19
+ * Converts an HTML anchor element to Markdown link syntax.
20
+ */
21
+ visitLink(node) {
22
+ var _a;
23
+ const linkText = this.collectTextContent(node);
24
+ const url = node.href || '';
25
+ // Handle links with formatted content vs plain text differently
26
+ const formattedText = node.childNodes.length === 1 && ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.nodeType) === Node.TEXT_NODE
27
+ ? applyFormatting(linkText, node) // Plain text link
28
+ : Array.from(node.childNodes)
29
+ .map((child) => {
30
+ if (child.nodeType === Node.ELEMENT_NODE) {
31
+ return applyFormatting(child.textContent || '', child);
32
+ }
33
+ return child.textContent || '';
34
+ })
35
+ .join(''); // Apply formatting for each formatted child node
36
+ return `[${formattedText}](${url} "${linkText.replace(/"/g, '\\"')}")`;
37
+ }
38
+ /**
39
+ * Converts an HTML heading element to Markdown heading syntax.
40
+ */
41
+ visitHeader(node, level) {
42
+ const headerContent = this.collectTextContent(node);
43
+ return '#'.repeat(level) + ' ' + headerContent + '\n';
44
+ }
45
+ /**
46
+ * Converts an HTML paragraph to Markdown format.
47
+ */
48
+ visitParagraph(node) {
49
+ const content = this.processChildren(node);
50
+ return content.trim() + '\n\n';
51
+ }
52
+ /**
53
+ * Applies Markdown formatting (bold, italic, etc.) to text content.
54
+ */
55
+ visitFormatting(node) {
56
+ var _a;
57
+ if (node.childNodes.length === 1 && ((_a = node.firstChild) === null || _a === void 0 ? void 0 : _a.nodeType) === Node.TEXT_NODE) {
58
+ const text = this.collectTextContent(node);
59
+ return applyFormatting(text, node);
60
+ }
61
+ return applyFormatting(this.visitGeneric(node), node);
62
+ }
63
+ /**
64
+ * Converts HTML code elements to Markdown inline code syntax.
65
+ */
66
+ visitCode(node) {
67
+ const codeContent = this.collectCodeContent(node);
68
+ if (codeContent.includes('\n')) {
69
+ return '```\n' + codeContent + '\n```\n';
70
+ }
71
+ else if (codeContent.includes('`')) {
72
+ return '`` ' + codeContent + ' ``';
73
+ }
74
+ else {
75
+ return `\`${codeContent}\``;
76
+ }
77
+ }
78
+ /**
79
+ * Handles generic HTML elements by processing their children.
80
+ */
81
+ visitGeneric(node) {
82
+ return this.processChildren(node);
83
+ }
84
+ /**
85
+ * Converts an HTML div element to Markdown format, adding a single newline.
86
+ */
87
+ visitDiv(node) {
88
+ const content = this.processChildren(node);
89
+ return content + '\n'; // Add a single newline for <div>
90
+ }
91
+ /**
92
+ * Converts an HTML br element to a newline in Markdown.
93
+ */
94
+ visitBr() {
95
+ return '\n'; // Single newline for <br>
96
+ }
97
+ /**
98
+ * Converts an HTML table row element to Markdown table row format.
99
+ */
100
+ visitTableRow(node) {
101
+ const cells = Array.from(node.children).map((cell) => {
102
+ return this.visitGeneric(cell).trim() || '';
103
+ });
104
+ return '||\n' + cells.join('\n|\n') + '\n||';
105
+ }
106
+ /**
107
+ * Converts an HTML table element to Markdown table format.
108
+ */
109
+ visitTable(node) {
110
+ const rows = [];
111
+ const tableRows = Array.from(node.querySelectorAll('tr'));
112
+ tableRows.forEach((row) => {
113
+ rows.push(this.visitTableRow(row));
114
+ });
115
+ return '\n\n#|\n' + rows.join('\n') + '\n|#\n\n';
116
+ }
117
+ /**
118
+ * Converts img tag to Markdown image format
119
+ */
120
+ visitImage(node) {
121
+ const imgElement = node;
122
+ const altText = imgElement.alt || '';
123
+ const src = imgElement.src || '';
124
+ return `![${altText}](${src})`;
125
+ }
126
+ /**
127
+ * Processes a single node using the handler chain.
128
+ */
129
+ processNode(node) {
130
+ const result = this.getHandler().handle(node, this);
131
+ return result;
132
+ }
133
+ /**
134
+ * Creates and links together handlers in a specific order implementing the Chain of Responsibility pattern.
135
+ * @returns The first handler in the chain
136
+ */
137
+ setupHandlerChain() {
138
+ // Create handlers for each type of node
139
+ const textHandler = new TextNodeHandler();
140
+ const linkHandler = new LinkHandler();
141
+ const headerHandler = new HeaderHandler();
142
+ const paragraphHandler = new ParagraphHandler();
143
+ const formattingHandler = new FormattingHandler();
144
+ const codeHandler = new CodeHandler();
145
+ const genericHandler = new GenericHandler();
146
+ const orderedListHandler = new OrderedListHandler();
147
+ const unorderedListHandler = new UnorderedListHandler();
148
+ const divHandler = new DivHandler();
149
+ const brHandler = new BrHandler();
150
+ const tableRowHandler = new TableRowHandler();
151
+ const tableHandler = new TableHandler();
152
+ const imageHandler = new ImageHandler(); // New handler for <img>
153
+ // Chain handlers together in priority order
154
+ textHandler
155
+ .setNext(linkHandler)
156
+ .setNext(headerHandler)
157
+ .setNext(paragraphHandler)
158
+ .setNext(divHandler)
159
+ .setNext(brHandler)
160
+ .setNext(orderedListHandler)
161
+ .setNext(unorderedListHandler)
162
+ .setNext(formattingHandler)
163
+ .setNext(codeHandler)
164
+ .setNext(imageHandler) // Add image handler
165
+ .setNext(tableHandler)
166
+ .setNext(tableRowHandler)
167
+ .setNext(genericHandler);
168
+ return textHandler;
169
+ }
170
+ /**
171
+ * Recursively collects and processes text content from a node and its children.
172
+ */
173
+ collectTextContent(node) {
174
+ // handle seo elements (hide it's content)
175
+ if (node.className === 'visually-hidden') {
176
+ return '';
177
+ }
178
+ if (node.nodeType === Node.TEXT_NODE) {
179
+ return this.visitText(node);
180
+ }
181
+ return Array.from(node.childNodes)
182
+ .map((child) => this.collectTextContent(child))
183
+ .join('');
184
+ }
185
+ /**
186
+ * Collects raw text content from code elements.
187
+ */
188
+ collectCodeContent(node) {
189
+ if (node.nodeType === Node.TEXT_NODE) {
190
+ return node.textContent || '';
191
+ }
192
+ return Array.from(node.childNodes)
193
+ .map((child) => this.collectCodeContent(child))
194
+ .join('');
195
+ }
196
+ /**
197
+ * Processes all child nodes of a given node.
198
+ */
199
+ processChildren(node) {
200
+ return Array.from(node.childNodes)
201
+ .map((child) => this.processNode(child))
202
+ .join('');
203
+ }
204
+ /**
205
+ * Gets the first handler in the chain.
206
+ */
207
+ getHandler() {
208
+ return this.handler;
209
+ }
210
+ }