@akinon/ui-editor 1.0.0

package/dist/cjs/tiptap/extensions/__tests__/iframe-extension.test.js

@@ -0,0 +1,262 @@
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import { describe, expect, it } from 'vitest';
+import { IframeExtension } from '../iframe-extension';
+describe('IframeExtension', () => {
+    let editor;
+    afterEach(() => {
+        if (editor) {
+            editor.destroy();
+        }
+    });
+    it('should parse iframe tag', () => {
+        var _a, _b;
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: '<iframe src="https://example.com" width="500" height="300"></iframe>'
+        });
+        const json = editor.getJSON();
+        expect((_a = json.content) === null || _a === void 0 ? void 0 : _a[0].type).toBe('iframe');
+        expect((_b = json.content) === null || _b === void 0 ? void 0 : _b[0].attrs).toMatchObject({
+            src: 'https://example.com',
+            width: '500',
+            height: '300'
+        });
+    });
+    it('should render iframe tag', () => {
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'iframe',
+                        attrs: {
+                            src: 'https://example.com',
+                            width: '100%',
+                            height: '400',
+                            frameborder: '0',
+                            allowfullscreen: true
+                        }
+                    }
+                ]
+            }
+        });
+        const html = editor.getHTML();
+        expect(html).toContain('<iframe');
+        expect(html).toContain('src="https://example.com"');
+        expect(html).toContain('width="100%"');
+        expect(html).toContain('allowfullscreen="true"');
+    });
+    it('should execute setIframe command', () => {
+        var _a, _b;
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension]
+        });
+        editor.commands.setIframe({ src: 'https://example.com' });
+        const json = editor.getJSON();
+        const node = (_a = json.content) === null || _a === void 0 ? void 0 : _a[0];
+        expect(node === null || node === void 0 ? void 0 : node.type).toBe('iframe');
+        expect((_b = node === null || node === void 0 ? void 0 : node.attrs) === null || _b === void 0 ? void 0 : _b.src).toBe('https://example.com');
+    });
+    it('should handle missing attributes gracefully', () => {
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'iframe',
+                        attrs: {
+                            src: 'https://example.com'
+                        }
+                    }
+                ]
+            }
+        });
+        const html = editor.getHTML();
+        expect(html).toContain('width="100%"');
+        expect(html).toContain('height="400"');
+    });
+    it('should handle style attribute', () => {
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'iframe',
+                        attrs: {
+                            src: 'https://example.com',
+                            style: 'border: 1px solid red;'
+                        }
+                    }
+                ]
+            }
+        });
+        const html = editor.getHTML();
+        expect(html).toContain('style="border: 1px solid red;"');
+    });
+    it('should handle class attribute', () => {
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'iframe',
+                        attrs: {
+                            src: 'https://example.com',
+                            class: 'my-iframe'
+                        }
+                    }
+                ]
+            }
+        });
+        const html = editor.getHTML();
+        expect(html).toContain('class="my-iframe"');
+    });
+    it('should handle id attribute', () => {
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'iframe',
+                        attrs: {
+                            src: 'https://example.com',
+                            id: 'my-iframe-id'
+                        }
+                    }
+                ]
+            }
+        });
+        const html = editor.getHTML();
+        expect(html).toContain('id="my-iframe-id"');
+    });
+    it('should handle title attribute', () => {
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'iframe',
+                        attrs: {
+                            src: 'https://example.com',
+                            title: 'My iframe title'
+                        }
+                    }
+                ]
+            }
+        });
+        const html = editor.getHTML();
+        expect(html).toContain('title="My iframe title"');
+    });
+    it('should not render style when not provided', () => {
+        var _a;
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'iframe',
+                        attrs: {
+                            src: 'https://example.com'
+                        }
+                    }
+                ]
+            }
+        });
+        const json = editor.getJSON();
+        const attrs = (_a = json.content) === null || _a === void 0 ? void 0 : _a[0].attrs;
+        expect(attrs === null || attrs === void 0 ? void 0 : attrs.style).toBeNull();
+    });
+    it('should not render class when not provided', () => {
+        var _a;
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'iframe',
+                        attrs: {
+                            src: 'https://example.com'
+                        }
+                    }
+                ]
+            }
+        });
+        const json = editor.getJSON();
+        const attrs = (_a = json.content) === null || _a === void 0 ? void 0 : _a[0].attrs;
+        expect(attrs === null || attrs === void 0 ? void 0 : attrs.class).toBeNull();
+    });
+    it('should not render id when not provided', () => {
+        var _a;
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'iframe',
+                        attrs: {
+                            src: 'https://example.com'
+                        }
+                    }
+                ]
+            }
+        });
+        const json = editor.getJSON();
+        const attrs = (_a = json.content) === null || _a === void 0 ? void 0 : _a[0].attrs;
+        expect(attrs === null || attrs === void 0 ? void 0 : attrs.id).toBeNull();
+    });
+    it('should not render title when not provided', () => {
+        var _a;
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'iframe',
+                        attrs: {
+                            src: 'https://example.com'
+                        }
+                    }
+                ]
+            }
+        });
+        const json = editor.getJSON();
+        const attrs = (_a = json.content) === null || _a === void 0 ? void 0 : _a[0].attrs;
+        expect(attrs === null || attrs === void 0 ? void 0 : attrs.title).toBeNull();
+    });
+    it('should handle missing src attribute', () => {
+        var _a;
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, IframeExtension],
+            content: {
+                type: 'doc',
+                content: [
+                    {
+                        type: 'iframe',
+                        attrs: {
+                            width: '500',
+                            height: '300'
+                        }
+                    }
+                ]
+            }
+        });
+        const json = editor.getJSON();
+        const attrs = (_a = json.content) === null || _a === void 0 ? void 0 : _a[0].attrs;
+        expect(attrs === null || attrs === void 0 ? void 0 : attrs.src).toBeNull();
+        const html = editor.getHTML();
+        expect(html).toContain('<iframe');
+    });
+});

package/dist/cjs/tiptap/extensions/__tests__/iframe-extension.test.ts

@@ -0,0 +1,297 @@
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import { describe, expect, it } from 'vitest';
+
+import { IframeExtension } from '../iframe-extension';
+
+describe('IframeExtension', () => {
+  let editor: Editor;
+
+  afterEach(() => {
+    if (editor) {
+      editor.destroy();
+    }
+  });
+
+  it('should parse iframe tag', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content:
+        '<iframe src="https://example.com" width="500" height="300"></iframe>'
+    });
+
+    const json = editor.getJSON();
+
+    expect(json.content?.[0].type).toBe('iframe');
+    expect(json.content?.[0].attrs).toMatchObject({
+      src: 'https://example.com',
+      width: '500',
+      height: '300'
+    });
+  });
+
+  it('should render iframe tag', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              src: 'https://example.com',
+              width: '100%',
+              height: '400',
+              frameborder: '0',
+              allowfullscreen: true
+            }
+          }
+        ]
+      }
+    });
+
+    const html = editor.getHTML();
+    expect(html).toContain('<iframe');
+    expect(html).toContain('src="https://example.com"');
+    expect(html).toContain('width="100%"');
+    expect(html).toContain('allowfullscreen="true"');
+  });
+
+  it('should execute setIframe command', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension]
+    });
+
+    editor.commands.setIframe({ src: 'https://example.com' });
+
+    const json = editor.getJSON();
+    const node = json.content?.[0];
+
+    expect(node?.type).toBe('iframe');
+    expect(node?.attrs?.src).toBe('https://example.com');
+  });
+
+  it('should handle missing attributes gracefully', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              src: 'https://example.com'
+            }
+          }
+        ]
+      }
+    });
+
+    const html = editor.getHTML();
+    expect(html).toContain('width="100%"');
+    expect(html).toContain('height="400"');
+  });
+
+  it('should handle style attribute', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              src: 'https://example.com',
+              style: 'border: 1px solid red;'
+            }
+          }
+        ]
+      }
+    });
+
+    const html = editor.getHTML();
+
+    expect(html).toContain('style="border: 1px solid red;"');
+  });
+
+  it('should handle class attribute', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              src: 'https://example.com',
+              class: 'my-iframe'
+            }
+          }
+        ]
+      }
+    });
+
+    const html = editor.getHTML();
+
+    expect(html).toContain('class="my-iframe"');
+  });
+
+  it('should handle id attribute', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              src: 'https://example.com',
+              id: 'my-iframe-id'
+            }
+          }
+        ]
+      }
+    });
+
+    const html = editor.getHTML();
+
+    expect(html).toContain('id="my-iframe-id"');
+  });
+
+  it('should handle title attribute', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              src: 'https://example.com',
+              title: 'My iframe title'
+            }
+          }
+        ]
+      }
+    });
+
+    const html = editor.getHTML();
+    expect(html).toContain('title="My iframe title"');
+  });
+
+  it('should not render style when not provided', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              src: 'https://example.com'
+            }
+          }
+        ]
+      }
+    });
+
+    const json = editor.getJSON();
+    const attrs = json.content?.[0].attrs;
+
+    expect(attrs?.style).toBeNull();
+  });
+
+  it('should not render class when not provided', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              src: 'https://example.com'
+            }
+          }
+        ]
+      }
+    });
+
+    const json = editor.getJSON();
+    const attrs = json.content?.[0].attrs;
+
+    expect(attrs?.class).toBeNull();
+  });
+
+  it('should not render id when not provided', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              src: 'https://example.com'
+            }
+          }
+        ]
+      }
+    });
+
+    const json = editor.getJSON();
+    const attrs = json.content?.[0].attrs;
+
+    expect(attrs?.id).toBeNull();
+  });
+
+  it('should not render title when not provided', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              src: 'https://example.com'
+            }
+          }
+        ]
+      }
+    });
+
+    const json = editor.getJSON();
+    const attrs = json.content?.[0].attrs;
+    expect(attrs?.title).toBeNull();
+  });
+
+  it('should handle missing src attribute', () => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, IframeExtension],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'iframe',
+            attrs: {
+              width: '500',
+              height: '300'
+            }
+          }
+        ]
+      }
+    });
+
+    const json = editor.getJSON();
+    const attrs = json.content?.[0].attrs;
+
+    expect(attrs?.src).toBeNull();
+
+    const html = editor.getHTML();
+
+    expect(html).toContain('<iframe');
+  });
+});

package/dist/cjs/tiptap/extensions/__tests__/image-upload-extension.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=image-upload-extension.test.d.ts.map

package/dist/cjs/tiptap/extensions/__tests__/image-upload-extension.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-upload-extension.test.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/extensions/__tests__/image-upload-extension.test.tsx"],"names":[],"mappings":""}

package/dist/cjs/tiptap/extensions/__tests__/image-upload-extension.test.js

@@ -0,0 +1,52 @@
+import { render } from '@testing-library/react';
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+import { ImageUploadExtension } from '../image-upload-extension';
+describe('ImageUploadExtension', () => {
+    it('should render image upload placeholder', () => {
+        const editor = new Editor({
+            extensions: [Document, Paragraph, Text, ImageUploadExtension],
+            content: '<image-upload-component></image-upload-component>'
+        });
+        render(React.createElement("div", null, "Test"));
+        expect(editor.schema.nodes['imageUpload']).toBeDefined();
+    });
+    it('should have correct name and group', () => {
+        expect(ImageUploadExtension.name).toBe('imageUpload');
+    });
+    it('should have imageUpload node in schema', () => {
+        const editor = new Editor({
+            extensions: [Document, Paragraph, Text, ImageUploadExtension]
+        });
+        expect(editor.schema.nodes.imageUpload).toBeTruthy();
+    });
+    it('should parse HTML with correct tag', () => {
+        const editor = new Editor({
+            extensions: [Document, Paragraph, Text, ImageUploadExtension],
+            content: '<div data-type="image-upload"></div>'
+        });
+        const node = editor.state.doc.firstChild;
+        expect(node === null || node === void 0 ? void 0 : node.type.name).toBe('imageUpload');
+    });
+    it('should render to HTML correctly', () => {
+        const editor = new Editor({
+            extensions: [Document, Paragraph, Text, ImageUploadExtension],
+            content: '<div data-type="image-upload"></div>'
+        });
+        const html = editor.getHTML();
+        expect(html).toContain('data-type="image-upload"');
+    });
+    it('should have a node view configured', () => {
+        const editor = new Editor({
+            extensions: [Document, Paragraph, Text, ImageUploadExtension]
+        });
+        const nodeSpec = editor.schema.nodes.imageUpload;
+        expect(nodeSpec).toBeDefined();
+        expect(nodeSpec.spec.atom).toBe(true);
+        expect(nodeSpec.spec.group).toBe('block');
+    });
+});

package/dist/cjs/tiptap/extensions/__tests__/image-upload-extension.test.tsx

@@ -0,0 +1,65 @@
+import { render } from '@testing-library/react';
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import { ImageUploadExtension } from '../image-upload-extension';
+
+describe('ImageUploadExtension', () => {
+  it('should render image upload placeholder', () => {
+    const editor = new Editor({
+      extensions: [Document, Paragraph, Text, ImageUploadExtension],
+      content: '<image-upload-component></image-upload-component>'
+    });
+
+    render(<div>Test</div>);
+
+    expect(editor.schema.nodes['imageUpload']).toBeDefined();
+  });
+
+  it('should have correct name and group', () => {
+    expect(ImageUploadExtension.name).toBe('imageUpload');
+  });
+
+  it('should have imageUpload node in schema', () => {
+    const editor = new Editor({
+      extensions: [Document, Paragraph, Text, ImageUploadExtension]
+    });
+
+    expect(editor.schema.nodes.imageUpload).toBeTruthy();
+  });
+
+  it('should parse HTML with correct tag', () => {
+    const editor = new Editor({
+      extensions: [Document, Paragraph, Text, ImageUploadExtension],
+      content: '<div data-type="image-upload"></div>'
+    });
+
+    const node = editor.state.doc.firstChild;
+    expect(node?.type.name).toBe('imageUpload');
+  });
+
+  it('should render to HTML correctly', () => {
+    const editor = new Editor({
+      extensions: [Document, Paragraph, Text, ImageUploadExtension],
+      content: '<div data-type="image-upload"></div>'
+    });
+
+    const html = editor.getHTML();
+    expect(html).toContain('data-type="image-upload"');
+  });
+
+  it('should have a node view configured', () => {
+    const editor = new Editor({
+      extensions: [Document, Paragraph, Text, ImageUploadExtension]
+    });
+
+    const nodeSpec = editor.schema.nodes.imageUpload;
+    expect(nodeSpec).toBeDefined();
+    expect(nodeSpec.spec.atom).toBe(true);
+    expect(nodeSpec.spec.group).toBe('block');
+  });
+});

package/dist/cjs/tiptap/extensions/__tests__/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/dist/cjs/tiptap/extensions/__tests__/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/extensions/__tests__/index.test.ts"],"names":[],"mappings":""}