@akinon/ui-editor 1.0.0

package/dist/cjs/tiptap/utils/__tests__/tiptap-extensions.test.js

@@ -0,0 +1,209 @@
+import FileHandler from '@tiptap/extension-file-handler';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+import Paragraph from '@tiptap/extension-paragraph';
+import { describe, expect, it, vi } from 'vitest';
+import { getExtensions, handleImageFile, validateAutoLink, validateLink } from '../tiptap-extensions';
+vi.mock('@tiptap/extension-document', () => ({ default: { extend: vi.fn() } }));
+vi.mock('@tiptap/extension-paragraph', () => ({
+    default: { extend: vi.fn() }
+}));
+vi.mock('@tiptap/extension-horizontal-rule', () => ({
+    default: {
+        extend: vi.fn(config => (Object.assign(Object.assign({}, config), { name: 'horizontalRule' })))
+    }
+}));
+vi.mock('../../constants/editor-config', async (importOriginal) => {
+    const actual = await importOriginal();
+    return Object.assign(Object.assign({}, actual), { LINK_CONFIG: Object.assign(Object.assign({}, actual.LINK_CONFIG), { PHISHING_DOMAINS: ['phishing.com'], NO_AUTOLINK_DOMAINS: ['no-auto.com'] }) });
+});
+vi.mock('@tiptap/extension-file-handler', () => ({
+    default: {
+        configure: vi.fn((options) => ({
+            name: 'fileHandler',
+            options
+        }))
+    }
+}));
+describe('tiptap-extensions', () => {
+    describe('getExtensions', () => {
+        it('should return an array of extensions', () => {
+            const extensions = getExtensions();
+            expect(Array.isArray(extensions)).toBe(true);
+            expect(extensions.length).toBeGreaterThan(0);
+        });
+        it('should configure Paragraph with addAttributes', () => {
+            expect(Paragraph.extend).toHaveBeenCalled();
+            // @ts-expect-error Mock implementation
+            const config = Paragraph.extend.mock.calls[0][0];
+            const attrs = config.addAttributes();
+            expect(attrs).toHaveProperty('style');
+            expect(attrs).toHaveProperty('class');
+            expect(attrs).toHaveProperty('id');
+        });
+        it('should configure HorizontalRule with addNodeView', () => {
+            expect(HorizontalRule.extend).toHaveBeenCalled();
+            // @ts-expect-error Mock implementation
+            const config = HorizontalRule.extend.mock.calls[0][0];
+            const parseRules = config.parseHTML();
+            expect(parseRules).toHaveLength(1);
+            expect(parseRules[0].tag).toBe('hr');
+            const nodeView = config.addNodeView();
+            const result = nodeView();
+            expect(result.dom).toBeInstanceOf(HTMLElement);
+            expect(result.dom.tagName).toBe('HR');
+        });
+        it('should configure FileHandler with correct options', () => {
+            getExtensions();
+            expect(FileHandler.configure).toHaveBeenCalled();
+            // @ts-expect-error Mock implementation
+            const options = FileHandler.configure.mock.calls[0][0];
+            const editor = {};
+            const result = options.onPaste(editor, [], '<div>content</div>');
+            expect(result).toBe(false);
+            const result2 = options.onPaste(editor, [], '');
+            expect(result2).toBeUndefined();
+            const files = [new File([''], 'test.png')];
+            vi.stubGlobal('FileReader', class MockReader {
+                readAsDataURL() { }
+                onload() { }
+            });
+            options.onDrop(editor, files, 10);
+            vi.stubGlobal('FileReader', undefined);
+        });
+    });
+    describe('validateLink', () => {
+        const ctx = {
+            defaultProtocol: 'https',
+            protocols: ['http', 'https', 'mailto'],
+            defaultValidate: () => true
+        };
+        it('should allow valid https urls', () => {
+            expect(validateLink('https://example.com', ctx)).toBe(true);
+        });
+        it('should allow valid http urls', () => {
+            expect(validateLink('http://example.com', ctx)).toBe(true);
+        });
+        it('should add default protocol if missing', () => {
+            expect(validateLink('example.com', ctx)).toBe(true);
+        });
+        it('should disallow javascript protocol', () => {
+            expect(validateLink('javascript:alert(1)', ctx)).toBe(false);
+        });
+        it('should disallow vbscript protocol', () => {
+            expect(validateLink('vbscript:msgbox', ctx)).toBe(false);
+        });
+        it('should disallow protocols not in the allowed list', () => {
+            expect(validateLink('ftp://example.com', ctx)).toBe(false);
+        });
+        it('should return true for empty url', () => {
+            expect(validateLink('', ctx)).toBe(true);
+        });
+        it('should return false for invalid urls', () => {
+            // @ts-expect-error Testing invalid input
+            expect(validateLink(null, ctx)).toBe(true);
+            expect(validateLink('http://', ctx)).toBe(false);
+        });
+        it('should handle phishing domains', () => {
+            expect(validateLink('https://phishing.com', ctx)).toBe(false);
+        });
+        it('should handle custom validation failure', () => {
+            const customCtx = Object.assign(Object.assign({}, ctx), { defaultValidate: () => false });
+            expect(validateLink('https://example.com', customCtx)).toBe(false);
+        });
+        it('should handle object protocols', () => {
+            const customCtx = Object.assign(Object.assign({}, ctx), { protocols: [{ scheme: 'custom' }] });
+            expect(validateLink('custom://test', customCtx)).toBe(true);
+        });
+        it('should return false on exception', () => {
+            const originalURL = global.URL;
+            global.URL = vi.fn(() => {
+                throw new Error('Mock error');
+            });
+            expect(validateLink('something', ctx)).toBe(false);
+            global.URL = originalURL;
+        });
+    });
+    describe('validateAutoLink', () => {
+        it('should return true for normal domains', () => {
+            expect(validateAutoLink('example.com')).toBe(true);
+        });
+        it('should handle full urls', () => {
+            expect(validateAutoLink('https://example.com')).toBe(true);
+        });
+        it('should return false for disallowed domains', () => {
+            expect(validateAutoLink('no-auto.com')).toBe(false);
+        });
+        it('should handle invalid urls gracefully', () => {
+            const originalURL = global.URL;
+            global.URL = vi.fn(() => {
+                throw new Error('Mock error');
+            });
+            expect(validateAutoLink('bad')).toBe(false);
+            global.URL = originalURL;
+        });
+    });
+    describe('handleImageFile', () => {
+        it('should read file and insert image content', () => {
+            const editor = {
+                chain: () => ({
+                    insertContentAt: vi.fn(),
+                    focus: () => ({ run: vi.fn() })
+                }),
+                state: {
+                    selection: { anchor: 10 }
+                }
+            };
+            const chainSpy = vi.spyOn(editor, 'chain');
+            const insertSpy = vi.fn();
+            const runSpy = vi.fn();
+            chainSpy.mockReturnValue({
+                insertContentAt: insertSpy,
+                focus: () => ({ run: runSpy })
+            });
+            const file = new File(['content'], 'test.png', { type: 'image/png' });
+            const mockFileReader = {
+                readAsDataURL: vi.fn(),
+                onload: vi.fn(),
+                result: 'data:image/png;base64,fake'
+            };
+            vi.stubGlobal('FileReader', vi.fn(() => mockFileReader));
+            handleImageFile(editor, file);
+            expect(mockFileReader.readAsDataURL).toHaveBeenCalledWith(file);
+            mockFileReader.onload();
+            expect(chainSpy).toHaveBeenCalled();
+            expect(insertSpy).toHaveBeenCalledWith(10, {
+                type: 'image',
+                attrs: { src: 'data:image/png;base64,fake' }
+            });
+            expect(runSpy).toHaveBeenCalled();
+            vi.stubGlobal('FileReader', undefined);
+        });
+        it('should handle insertion at specific position', () => {
+            const editor = {
+                chain: () => ({
+                    insertContentAt: vi.fn(),
+                    focus: () => ({ run: vi.fn() })
+                }),
+                state: { selection: { anchor: 0 } }
+            };
+            const chainSpy = vi.spyOn(editor, 'chain');
+            const insertSpy = vi.fn();
+            const runSpy = vi.fn();
+            chainSpy.mockReturnValue({
+                insertContentAt: insertSpy,
+                focus: () => ({ run: runSpy })
+            });
+            const file = new File([''], 'test.png');
+            const mockFileReader = {
+                readAsDataURL: vi.fn(),
+                onload: vi.fn(),
+                result: 'data:...'
+            };
+            vi.stubGlobal('FileReader', vi.fn(() => mockFileReader));
+            handleImageFile(editor, file, 55);
+            mockFileReader.onload();
+            expect(insertSpy).toHaveBeenCalledWith(55, expect.anything());
+            vi.stubGlobal('FileReader', undefined);
+        });
+    });
+});

package/dist/cjs/tiptap/utils/__tests__/tiptap-extensions.test.ts

@@ -0,0 +1,299 @@
+import { ChainedCommands, Editor } from '@tiptap/core';
+import FileHandler from '@tiptap/extension-file-handler';
+import HorizontalRule from '@tiptap/extension-horizontal-rule';
+import Paragraph from '@tiptap/extension-paragraph';
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+  getExtensions,
+  handleImageFile,
+  validateAutoLink,
+  validateLink
+} from '../tiptap-extensions';
+
+vi.mock('@tiptap/extension-document', () => ({ default: { extend: vi.fn() } }));
+
+vi.mock('@tiptap/extension-paragraph', () => ({
+  default: { extend: vi.fn() }
+}));
+
+vi.mock('@tiptap/extension-horizontal-rule', () => ({
+  default: {
+    extend: vi.fn(config => ({ ...config, name: 'horizontalRule' }))
+  }
+}));
+
+vi.mock('../../constants/editor-config', async importOriginal => {
+  const actual =
+    await importOriginal<typeof import('../../constants/editor-config')>();
+  return {
+    ...actual,
+    LINK_CONFIG: {
+      ...actual.LINK_CONFIG,
+      PHISHING_DOMAINS: ['phishing.com'],
+      NO_AUTOLINK_DOMAINS: ['no-auto.com']
+    }
+  };
+});
+
+vi.mock('@tiptap/extension-file-handler', () => ({
+  default: {
+    configure: vi.fn((options: Record<string, unknown>) => ({
+      name: 'fileHandler',
+      options
+    }))
+  }
+}));
+
+describe('tiptap-extensions', () => {
+  describe('getExtensions', () => {
+    it('should return an array of extensions', () => {
+      const extensions = getExtensions();
+
+      expect(Array.isArray(extensions)).toBe(true);
+      expect(extensions.length).toBeGreaterThan(0);
+    });
+
+    it('should configure Paragraph with addAttributes', () => {
+      expect(Paragraph.extend).toHaveBeenCalled();
+      // @ts-expect-error Mock implementation
+      const config = Paragraph.extend.mock.calls[0][0];
+
+      const attrs = config.addAttributes();
+
+      expect(attrs).toHaveProperty('style');
+      expect(attrs).toHaveProperty('class');
+      expect(attrs).toHaveProperty('id');
+    });
+
+    it('should configure HorizontalRule with addNodeView', () => {
+      expect(HorizontalRule.extend).toHaveBeenCalled();
+      // @ts-expect-error Mock implementation
+      const config = HorizontalRule.extend.mock.calls[0][0];
+
+      const parseRules = config.parseHTML();
+
+      expect(parseRules).toHaveLength(1);
+      expect(parseRules[0].tag).toBe('hr');
+
+      const nodeView = config.addNodeView();
+      const result = nodeView();
+
+      expect(result.dom).toBeInstanceOf(HTMLElement);
+      expect(result.dom.tagName).toBe('HR');
+    });
+
+    it('should configure FileHandler with correct options', () => {
+      getExtensions();
+      expect(FileHandler.configure).toHaveBeenCalled();
+      // @ts-expect-error Mock implementation
+      const options = FileHandler.configure.mock.calls[0][0];
+      const editor = {} as unknown as Editor;
+      const result = options.onPaste(editor, [], '<div>content</div>');
+
+      expect(result).toBe(false);
+
+      const result2 = options.onPaste(editor, [], '');
+
+      expect(result2).toBeUndefined();
+
+      const files = [new File([''], 'test.png')];
+
+      vi.stubGlobal(
+        'FileReader',
+        class MockReader {
+          readAsDataURL() {}
+          onload() {}
+        }
+      );
+
+      options.onDrop(editor, files, 10);
+
+      vi.stubGlobal('FileReader', undefined);
+    });
+  });
+
+  describe('validateLink', () => {
+    const ctx = {
+      defaultProtocol: 'https',
+      protocols: ['http', 'https', 'mailto'],
+      defaultValidate: () => true
+    };
+
+    it('should allow valid https urls', () => {
+      expect(validateLink('https://example.com', ctx)).toBe(true);
+    });
+
+    it('should allow valid http urls', () => {
+      expect(validateLink('http://example.com', ctx)).toBe(true);
+    });
+
+    it('should add default protocol if missing', () => {
+      expect(validateLink('example.com', ctx)).toBe(true);
+    });
+
+    it('should disallow javascript protocol', () => {
+      expect(validateLink('javascript:alert(1)', ctx)).toBe(false);
+    });
+
+    it('should disallow vbscript protocol', () => {
+      expect(validateLink('vbscript:msgbox', ctx)).toBe(false);
+    });
+
+    it('should disallow protocols not in the allowed list', () => {
+      expect(validateLink('ftp://example.com', ctx)).toBe(false);
+    });
+
+    it('should return true for empty url', () => {
+      expect(validateLink('', ctx)).toBe(true);
+    });
+
+    it('should return false for invalid urls', () => {
+      // @ts-expect-error Testing invalid input
+      expect(validateLink(null, ctx)).toBe(true);
+      expect(validateLink('http://', ctx)).toBe(false);
+    });
+
+    it('should handle phishing domains', () => {
+      expect(validateLink('https://phishing.com', ctx)).toBe(false);
+    });
+
+    it('should handle custom validation failure', () => {
+      const customCtx = { ...ctx, defaultValidate: () => false };
+
+      expect(validateLink('https://example.com', customCtx)).toBe(false);
+    });
+
+    it('should handle object protocols', () => {
+      const customCtx = {
+        ...ctx,
+        protocols: [{ scheme: 'custom' }]
+      };
+      expect(validateLink('custom://test', customCtx)).toBe(true);
+    });
+
+    it('should return false on exception', () => {
+      const originalURL = global.URL;
+
+      global.URL = vi.fn(() => {
+        throw new Error('Mock error');
+      }) as unknown as typeof URL;
+
+      expect(validateLink('something', ctx)).toBe(false);
+      global.URL = originalURL;
+    });
+  });
+
+  describe('validateAutoLink', () => {
+    it('should return true for normal domains', () => {
+      expect(validateAutoLink('example.com')).toBe(true);
+    });
+
+    it('should handle full urls', () => {
+      expect(validateAutoLink('https://example.com')).toBe(true);
+    });
+
+    it('should return false for disallowed domains', () => {
+      expect(validateAutoLink('no-auto.com')).toBe(false);
+    });
+
+    it('should handle invalid urls gracefully', () => {
+      const originalURL = global.URL;
+
+      global.URL = vi.fn(() => {
+        throw new Error('Mock error');
+      }) as unknown as typeof URL;
+
+      expect(validateAutoLink('bad')).toBe(false);
+      global.URL = originalURL;
+    });
+  });
+
+  describe('handleImageFile', () => {
+    it('should read file and insert image content', () => {
+      const editor = {
+        chain: () => ({
+          insertContentAt: vi.fn(),
+          focus: () => ({ run: vi.fn() })
+        }),
+        state: {
+          selection: { anchor: 10 }
+        }
+      } as unknown as Editor;
+
+      const chainSpy = vi.spyOn(editor, 'chain');
+
+      const insertSpy = vi.fn();
+      const runSpy = vi.fn();
+
+      chainSpy.mockReturnValue({
+        insertContentAt: insertSpy,
+        focus: () => ({ run: runSpy })
+      } as unknown as ChainedCommands);
+
+      const file = new File(['content'], 'test.png', { type: 'image/png' });
+
+      const mockFileReader = {
+        readAsDataURL: vi.fn(),
+        onload: vi.fn(),
+        result: 'data:image/png;base64,fake'
+      };
+
+      vi.stubGlobal(
+        'FileReader',
+        vi.fn(() => mockFileReader as unknown as FileReader)
+      );
+
+      handleImageFile(editor, file);
+
+      expect(mockFileReader.readAsDataURL).toHaveBeenCalledWith(file);
+
+      mockFileReader.onload();
+
+      expect(chainSpy).toHaveBeenCalled();
+      expect(insertSpy).toHaveBeenCalledWith(10, {
+        type: 'image',
+        attrs: { src: 'data:image/png;base64,fake' }
+      });
+      expect(runSpy).toHaveBeenCalled();
+
+      vi.stubGlobal('FileReader', undefined);
+    });
+
+    it('should handle insertion at specific position', () => {
+      const editor = {
+        chain: () => ({
+          insertContentAt: vi.fn(),
+          focus: () => ({ run: vi.fn() })
+        }),
+        state: { selection: { anchor: 0 } }
+      } as unknown as Editor;
+
+      const chainSpy = vi.spyOn(editor, 'chain');
+      const insertSpy = vi.fn();
+      const runSpy = vi.fn();
+
+      chainSpy.mockReturnValue({
+        insertContentAt: insertSpy,
+        focus: () => ({ run: runSpy })
+      } as unknown as ChainedCommands);
+
+      const file = new File([''], 'test.png');
+      const mockFileReader = {
+        readAsDataURL: vi.fn(),
+        onload: vi.fn(),
+        result: 'data:...'
+      };
+      vi.stubGlobal(
+        'FileReader',
+        vi.fn(() => mockFileReader as unknown as FileReader)
+      );
+
+      handleImageFile(editor, file, 55);
+      mockFileReader.onload();
+
+      expect(insertSpy).toHaveBeenCalledWith(55, expect.anything());
+      vi.stubGlobal('FileReader', undefined);
+    });
+  });
+});

package/dist/cjs/tiptap/utils/format-html.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Formats HTML string with proper indentation and cleaner structure.
+ * Uses browser DOM parsing to ensure valid HTML structure before formatting.
+ */
+export declare const formatHtml: (html: string) => string;
+//# sourceMappingURL=format-html.d.ts.map

package/dist/cjs/tiptap/utils/format-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-html.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/utils/format-html.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM,KAAG,MAQzC,CAAC"}

package/dist/cjs/tiptap/utils/format-html.js

@@ -0,0 +1,108 @@
+import { BLOCK_ELEMENTS, HTML_ELEMENTS, VOID_ELEMENTS } from '../constants';
+const TAB = '  ';
+const NEWLINE = '\n';
+/**
+ * Formats HTML string with proper indentation and cleaner structure.
+ * Uses browser DOM parsing to ensure valid HTML structure before formatting.
+ */
+export const formatHtml = (html) => {
+    const div = document.createElement(HTML_ELEMENTS.DIV);
+    div.innerHTML = html.trim();
+    const formatted = formatNode(div, 0).trim();
+    // Normalize multiple newlines to single newline
+    return formatted.replace(/\n\n+/g, NEWLINE);
+};
+/**
+ * Removes common leading whitespace from a multi-line string.
+ */
+const dedent = (str) => {
+    const lines = str.split(NEWLINE);
+    const nonEmptyLines = lines.filter(line => line.trim());
+    const minIndent = nonEmptyLines.reduce((min, line) => {
+        const indent = line.match(/^\s*/)[0].length;
+        return Math.min(min, indent);
+    }, Infinity);
+    return lines
+        .map(line => (line.length >= minIndent ? line.slice(minIndent) : line))
+        .join(NEWLINE)
+        .trim();
+};
+/**
+ * Recursive function to traverse and format DOM nodes.
+ */
+const formatNode = (node, level) => {
+    const indentStr = TAB.repeat(level);
+    let result = '';
+    Array.from(node.childNodes).forEach(child => {
+        if (child.nodeType === Node.TEXT_NODE) {
+            result += formatTextNode(child);
+        }
+        else if (child.nodeType === Node.ELEMENT_NODE) {
+            result += formatElementNode(child, level, indentStr);
+        }
+    });
+    return result;
+};
+const formatTextNode = (node) => {
+    return node.textContent;
+};
+const formatElementNode = (element, level, indentStr) => {
+    const tagName = element.tagName.toLowerCase();
+    const isSpan = tagName === HTML_ELEMENTS.SPAN;
+    const isComment = element.getAttribute('data-type') === 'comment';
+    if (isSpan && isComment) {
+        const content = element.getAttribute('data-content') || '';
+        return `<!--${content}-->`;
+    }
+    const isBlock = BLOCK_ELEMENTS.includes(tagName);
+    const isVoid = VOID_ELEMENTS.includes(tagName);
+    let output = '';
+    // Handle block element spacing
+    if (isBlock) {
+        output += NEWLINE;
+        output += indentStr;
+    }
+    // Construct opening tag with attributes
+    const attrs = Array.from(element.attributes)
+        .map(attr => ` ${attr.name}="${attr.value}"`)
+        .join('');
+    const openingTag = `<${tagName}${attrs}${isVoid ? ' />' : '>'}`;
+    output += openingTag;
+    // Handle content
+    if (tagName === HTML_ELEMENTS.PRE) {
+        output += element.innerHTML;
+        output += `</${tagName}>`;
+    }
+    else if (!isVoid) {
+        output += getElementChildren(element, tagName, level, isBlock, indentStr);
+        output += `</${tagName}>`;
+    }
+    // Close block element with newline
+    if (isBlock) {
+        output += NEWLINE;
+    }
+    return output;
+};
+const getElementChildren = (element, tagName, level, isBlock, indentStr) => {
+    const isScriptOrStyle = tagName === HTML_ELEMENTS.SCRIPT || tagName === HTML_ELEMENTS.STYLE;
+    const content = isScriptOrStyle
+        ? formatScriptOrStyleContent(element.textContent || '', indentStr)
+        : formatNode(element, isBlock ? level + 1 : level);
+    if (!content)
+        return '';
+    const hasBlockChildren = content.includes(NEWLINE) || isScriptOrStyle;
+    if (isBlock && hasBlockChildren) {
+        return `${NEWLINE}${content}${NEWLINE}${indentStr}`;
+    }
+    return content;
+};
+const formatScriptOrStyleContent = (content, baseIndent) => {
+    if (!content.trim())
+        return '';
+    const dedented = dedent(content);
+    // Indent each line relative to the parent script/style tag
+    return dedented
+        .split(NEWLINE)
+        .map(line => (line ? `${baseIndent}${TAB}${line}` : ''))
+        .join(NEWLINE);
+};

package/dist/cjs/tiptap/utils/highlight-html.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Simple HTML syntax highlighter without external dependencies
+ * Tokenizes HTML and wraps tokens in spans for styling
+ */
+export declare const highlightHtml: (html: string) => string;
+//# sourceMappingURL=highlight-html.d.ts.map

package/dist/cjs/tiptap/utils/highlight-html.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlight-html.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/utils/highlight-html.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA2BH,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,KAAG,MAG5C,CAAC"}