@akinon/ui-editor 1.0.0

package/dist/esm/tiptap/components/__tests__/image-upload-placeholder.test.js

@@ -0,0 +1,206 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ImageUploadPlaceholder } from '../image-upload-placeholder';
+vi.mock('../../../i18n', () => ({
+    i18n: {
+        t: (key) => key
+    }
+}));
+vi.mock('@akinon/ui-button', () => ({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Button: ({ icon, label }) => (React.createElement("button", { "data-testid": "ui-button" }, icon || label))
+}));
+vi.mock('@akinon/ui-theme', () => ({
+    useToken: () => ({
+        token: {},
+        hashId: 'hash-id'
+    })
+}));
+vi.mock('@akinon/ui-upload', () => ({
+    Upload: {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        Dragger: ({ children, beforeUpload }) => (React.createElement("div", { "data-testid": "upload-dragger", onClick: () => beforeUpload(new File([''], 'test.png', { type: 'image/png' })) }, children))
+    }
+}));
+vi.mock('@ant-design/cssinjs', () => ({
+    useStyleRegister: vi.fn((_config, cb) => {
+        cb();
+        return (node) => node;
+    })
+}));
+vi.mock('@tiptap/react', () => ({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    NodeViewWrapper: ({ children, className }) => (React.createElement("div", { "data-testid": "node-view-wrapper", className: className }, children))
+}));
+describe('ImageUploadPlaceholder', () => {
+    let mockEditor;
+    let mockNode;
+    let mockGetPos;
+    beforeEach(() => {
+        mockEditor = {
+            chain: vi.fn(() => mockEditor),
+            focus: vi.fn(() => mockEditor),
+            run: vi.fn(),
+            commands: {
+                command: vi.fn(cb => {
+                    const tr = {
+                        replaceWith: vi.fn(() => 'transaction')
+                    };
+                    const dispatch = vi.fn();
+                    cb({ tr, dispatch });
+                    return true;
+                })
+            },
+            state: {
+                schema: {
+                    nodes: {
+                        image: {
+                            create: vi.fn(attrs => attrs)
+                        }
+                    }
+                }
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        };
+        mockNode = {
+            nodeSize: 1
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        };
+        mockGetPos = vi.fn(() => 10);
+    });
+    const renderWithTheme = (theme) => {
+        return render(React.createElement(ConfigProvider, { theme: theme },
+            React.createElement(ImageUploadPlaceholder, Object.assign({}, {
+                editor: mockEditor,
+                node: mockNode,
+                getPos: mockGetPos,
+                updateAttributes: vi.fn(),
+                deleteNode: vi.fn(),
+                selected: false,
+                options: {},
+                extension: {}
+            }))));
+    };
+    it('should render correctly', () => {
+        renderWithTheme({
+            colors: {
+                ebonyClay: { '175': '#ccc' },
+                neutral: { '50': '#fff' },
+                gray: { '500': '#888' }
+            }
+        });
+        expect(screen.getByTestId('upload-dragger')).toBeInTheDocument();
+        expect(screen.getByText('editor.image_upload.click_to_upload')).toBeInTheDocument();
+        expect(screen.getByText('editor.image_upload.drag_and_drop_hint')).toBeInTheDocument();
+    });
+    it('should handle editor theme colors', () => {
+        renderWithTheme({
+            colors: {
+                editor: {
+                    imageUpload: { background: '#abcdef' }
+                },
+                ebonyClay: { '175': '#ccc' },
+                neutral: { '50': '#fff' }
+            }
+        });
+        expect(screen.getByTestId('upload-dragger')).toBeInTheDocument();
+    });
+    it('should handle image upload and replace placeholder', async () => {
+        const mockReader = {
+            readAsDataURL: vi.fn(),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onload: null
+        };
+        vi.stubGlobal('FileReader', vi.fn(() => mockReader));
+        renderWithTheme({});
+        fireEvent.click(screen.getByTestId('upload-dragger'));
+        expect(mockReader.readAsDataURL).toHaveBeenCalled();
+        mockReader.onload({ target: { result: 'data:image/png;base64,xxx' } });
+        await waitFor(() => {
+            expect(mockEditor.commands.command).toHaveBeenCalled();
+        });
+    });
+    it('should not replace if result is not a string', async () => {
+        const mockReader = {
+            readAsDataURL: vi.fn(),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onload: null
+        };
+        vi.stubGlobal('FileReader', vi.fn(() => mockReader));
+        renderWithTheme({});
+        fireEvent.click(screen.getByTestId('upload-dragger'));
+        mockReader.onload({ target: { result: null } });
+        expect(mockEditor.commands.command).not.toHaveBeenCalled();
+    });
+    it('should not replace if getPos is not a function', async () => {
+        const mockReader = {
+            readAsDataURL: vi.fn(),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onload: null
+        };
+        vi.stubGlobal('FileReader', vi.fn(() => mockReader));
+        render(React.createElement(ImageUploadPlaceholder, Object.assign({}, {
+            editor: mockEditor,
+            node: mockNode,
+            getPos: undefined,
+            updateAttributes: vi.fn(),
+            deleteNode: vi.fn(),
+            selected: false,
+            options: {},
+            extension: {}
+        })));
+        fireEvent.click(screen.getByTestId('upload-dragger'));
+        mockReader.onload({ target: { result: 'data:image/png;base64,xxx' } });
+        expect(mockEditor.commands.command).not.toHaveBeenCalled();
+    });
+    it('should not replace if getPos() returns null', async () => {
+        const mockReader = {
+            readAsDataURL: vi.fn(),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onload: null
+        };
+        vi.stubGlobal('FileReader', vi.fn(() => mockReader));
+        mockGetPos = vi.fn(() => null);
+        renderWithTheme({});
+        fireEvent.click(screen.getByTestId('upload-dragger'));
+        mockReader.onload({ target: { result: 'data:image/png;base64,xxx' } });
+        expect(mockEditor.commands.command).not.toHaveBeenCalled();
+    });
+    it('should handle case where dispatch is not provided in command', async () => {
+        const mockReader = {
+            readAsDataURL: vi.fn(),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onload: null
+        };
+        vi.stubGlobal('FileReader', vi.fn(() => mockReader));
+        mockEditor.commands.command = vi.fn(cb => {
+            const tr = {
+                replaceWith: vi.fn(() => 'transaction')
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            cb({ tr, dispatch: undefined });
+            return true;
+        });
+        renderWithTheme({});
+        fireEvent.click(screen.getByTestId('upload-dragger'));
+        mockReader.onload({ target: { result: 'data:image/png;base64,xxx' } });
+        await waitFor(() => {
+            expect(mockEditor.commands.command).toHaveBeenCalled();
+        });
+    });
+    it('should handle missing e.target in onload', async () => {
+        const mockReader = {
+            readAsDataURL: vi.fn(),
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            onload: null
+        };
+        vi.stubGlobal('FileReader', vi.fn(() => mockReader));
+        renderWithTheme({});
+        fireEvent.click(screen.getByTestId('upload-dragger'));
+        mockReader.onload({ target: null });
+        expect(mockEditor.commands.command).not.toHaveBeenCalled();
+    });
+});

package/dist/esm/tiptap/components/__tests__/image-upload-placeholder.test.tsx

@@ -0,0 +1,297 @@
+import '@testing-library/jest-dom';
+
+import { type DefaultThemeConfig } from '@akinon/ui-theme';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { type Node } from '@tiptap/pm/model';
+import { type Editor, type NodeViewProps } from '@tiptap/react';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ImageUploadPlaceholder } from '../image-upload-placeholder';
+
+vi.mock('../../../i18n', () => ({
+  i18n: {
+    t: (key: string) => key
+  }
+}));
+
+vi.mock('@akinon/ui-button', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Button: ({ icon, label }: any) => (
+    <button data-testid="ui-button">{icon || label}</button>
+  )
+}));
+
+vi.mock('@akinon/ui-theme', () => ({
+  useToken: () => ({
+    token: {},
+    hashId: 'hash-id'
+  })
+}));
+
+vi.mock('@akinon/ui-upload', () => ({
+  Upload: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Dragger: ({ children, beforeUpload }: any) => (
+      <div
+        data-testid="upload-dragger"
+        onClick={() =>
+          beforeUpload(new File([''], 'test.png', { type: 'image/png' }))
+        }
+      >
+        {children}
+      </div>
+    )
+  }
+}));
+
+vi.mock('@ant-design/cssinjs', () => ({
+  useStyleRegister: vi.fn((_config, cb) => {
+    cb();
+    return (node: React.ReactNode) => node;
+  })
+}));
+
+vi.mock('@tiptap/react', () => ({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  NodeViewWrapper: ({ children, className }: any) => (
+    <div data-testid="node-view-wrapper" className={className}>
+      {children}
+    </div>
+  )
+}));
+
+describe('ImageUploadPlaceholder', () => {
+  let mockEditor: Editor;
+  let mockNode: Node;
+  let mockGetPos: () => number;
+
+  beforeEach(() => {
+    mockEditor = {
+      chain: vi.fn(() => mockEditor),
+      focus: vi.fn(() => mockEditor),
+      run: vi.fn(),
+      commands: {
+        command: vi.fn(cb => {
+          const tr = {
+            replaceWith: vi.fn(() => 'transaction')
+          };
+          const dispatch = vi.fn();
+          cb({ tr, dispatch });
+          return true;
+        })
+      },
+      state: {
+        schema: {
+          nodes: {
+            image: {
+              create: vi.fn(attrs => attrs)
+            }
+          }
+        }
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any;
+    mockNode = {
+      nodeSize: 1
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any;
+    mockGetPos = vi.fn(() => 10);
+  });
+
+  const renderWithTheme = (theme: Partial<DefaultThemeConfig>) => {
+    return render(
+      <ConfigProvider theme={theme}>
+        <ImageUploadPlaceholder
+          {...({
+            editor: mockEditor,
+            node: mockNode,
+            getPos: mockGetPos,
+            updateAttributes: vi.fn(),
+            deleteNode: vi.fn(),
+            selected: false,
+            options: {},
+            extension: {}
+          } as unknown as NodeViewProps)}
+        />
+      </ConfigProvider>
+    );
+  };
+
+  it('should render correctly', () => {
+    renderWithTheme({
+      colors: {
+        ebonyClay: { '175': '#ccc' },
+        neutral: { '50': '#fff' },
+        gray: { '500': '#888' }
+      }
+    } as unknown as Partial<DefaultThemeConfig>);
+
+    expect(screen.getByTestId('upload-dragger')).toBeInTheDocument();
+    expect(
+      screen.getByText('editor.image_upload.click_to_upload')
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText('editor.image_upload.drag_and_drop_hint')
+    ).toBeInTheDocument();
+  });
+
+  it('should handle editor theme colors', () => {
+    renderWithTheme({
+      colors: {
+        editor: {
+          imageUpload: { background: '#abcdef' }
+        },
+        ebonyClay: { '175': '#ccc' },
+        neutral: { '50': '#fff' }
+      }
+    } as unknown as Partial<DefaultThemeConfig>);
+
+    expect(screen.getByTestId('upload-dragger')).toBeInTheDocument();
+  });
+
+  it('should handle image upload and replace placeholder', async () => {
+    const mockReader = {
+      readAsDataURL: vi.fn(),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onload: null as any
+    };
+    vi.stubGlobal(
+      'FileReader',
+      vi.fn(() => mockReader)
+    );
+
+    renderWithTheme({});
+
+    fireEvent.click(screen.getByTestId('upload-dragger'));
+
+    expect(mockReader.readAsDataURL).toHaveBeenCalled();
+
+    mockReader.onload({ target: { result: 'data:image/png;base64,xxx' } });
+
+    await waitFor(() => {
+      expect(mockEditor.commands.command).toHaveBeenCalled();
+    });
+  });
+
+  it('should not replace if result is not a string', async () => {
+    const mockReader = {
+      readAsDataURL: vi.fn(),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onload: null as any
+    };
+    vi.stubGlobal(
+      'FileReader',
+      vi.fn(() => mockReader)
+    );
+
+    renderWithTheme({});
+
+    fireEvent.click(screen.getByTestId('upload-dragger'));
+    mockReader.onload({ target: { result: null } });
+
+    expect(mockEditor.commands.command).not.toHaveBeenCalled();
+  });
+
+  it('should not replace if getPos is not a function', async () => {
+    const mockReader = {
+      readAsDataURL: vi.fn(),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onload: null as any
+    };
+    vi.stubGlobal(
+      'FileReader',
+      vi.fn(() => mockReader)
+    );
+
+    render(
+      <ImageUploadPlaceholder
+        {...({
+          editor: mockEditor,
+          node: mockNode,
+          getPos: undefined,
+          updateAttributes: vi.fn(),
+          deleteNode: vi.fn(),
+          selected: false,
+          options: {},
+          extension: {}
+        } as unknown as NodeViewProps)}
+      />
+    );
+
+    fireEvent.click(screen.getByTestId('upload-dragger'));
+    mockReader.onload({ target: { result: 'data:image/png;base64,xxx' } });
+
+    expect(mockEditor.commands.command).not.toHaveBeenCalled();
+  });
+
+  it('should not replace if getPos() returns null', async () => {
+    const mockReader = {
+      readAsDataURL: vi.fn(),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onload: null as any
+    };
+    vi.stubGlobal(
+      'FileReader',
+      vi.fn(() => mockReader)
+    );
+    mockGetPos = vi.fn(() => null as unknown as number);
+
+    renderWithTheme({});
+
+    fireEvent.click(screen.getByTestId('upload-dragger'));
+    mockReader.onload({ target: { result: 'data:image/png;base64,xxx' } });
+
+    expect(mockEditor.commands.command).not.toHaveBeenCalled();
+  });
+
+  it('should handle case where dispatch is not provided in command', async () => {
+    const mockReader = {
+      readAsDataURL: vi.fn(),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onload: null as any
+    };
+    vi.stubGlobal(
+      'FileReader',
+      vi.fn(() => mockReader)
+    );
+
+    mockEditor.commands.command = vi.fn(cb => {
+      const tr = {
+        replaceWith: vi.fn(() => 'transaction')
+      };
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      cb({ tr, dispatch: undefined as any });
+      return true;
+    });
+
+    renderWithTheme({});
+
+    fireEvent.click(screen.getByTestId('upload-dragger'));
+    mockReader.onload({ target: { result: 'data:image/png;base64,xxx' } });
+
+    await waitFor(() => {
+      expect(mockEditor.commands.command).toHaveBeenCalled();
+    });
+  });
+
+  it('should handle missing e.target in onload', async () => {
+    const mockReader = {
+      readAsDataURL: vi.fn(),
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      onload: null as any
+    };
+    vi.stubGlobal(
+      'FileReader',
+      vi.fn(() => mockReader)
+    );
+
+    renderWithTheme({});
+
+    fireEvent.click(screen.getByTestId('upload-dragger'));
+    mockReader.onload({ target: null });
+
+    expect(mockEditor.commands.command).not.toHaveBeenCalled();
+  });
+});

package/dist/esm/tiptap/components/__tests__/secure-script-component.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=secure-script-component.test.d.ts.map

package/dist/esm/tiptap/components/__tests__/secure-script-component.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"secure-script-component.test.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/__tests__/secure-script-component.test.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC"}

package/dist/esm/tiptap/components/__tests__/secure-script-component.test.js

@@ -0,0 +1,57 @@
+import '@testing-library/jest-dom';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { render, screen } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { SecureScriptComponent } from '../secure-script-component';
+vi.mock('@tiptap/react', () => ({
+    NodeViewWrapper: ({ children, className }) => (React.createElement("div", { "data-testid": "node-view-wrapper", className: className }, children)),
+    NodeViewContent: ({ as: Component = 'div', className }) => React.createElement(Component, { "data-testid": "node-view-content", className: className })
+}));
+vi.mock('@akinon/ui-theme', () => ({
+    useToken: () => ({
+        token: {
+            colorPrimary: '#1890ff'
+        },
+        hashId: 'hash-id'
+    })
+}));
+vi.mock('@ant-design/cssinjs', () => ({
+    useStyleRegister: vi.fn((_config, cb) => {
+        cb();
+        return (node) => node;
+    })
+}));
+describe('SecureScriptComponent', () => {
+    it('should render correctly', () => {
+        const { container } = render(React.createElement(SecureScriptComponent, null));
+        expect(container).toBeInTheDocument();
+        expect(screen.getByTestId('node-view-wrapper')).toBeInTheDocument();
+        expect(screen.getByTestId('node-view-content')).toBeInTheDocument();
+        expect(screen.getByText('<script>')).toBeInTheDocument();
+        expect(screen.getByText('</script>')).toBeInTheDocument();
+        const wrapper = screen.getByTestId('node-view-wrapper');
+        expect(wrapper).toHaveClass('ant-tiptap-secure-script');
+        expect(wrapper).toHaveClass('hash-id');
+    });
+    it('should apply styles via useStyleRegister', () => {
+        render(React.createElement(SecureScriptComponent, null));
+        expect(useStyleRegister).toHaveBeenCalled();
+        const callArgs = vi.mocked(useStyleRegister).mock.calls[0][0];
+        expect(callArgs.path).toContain('TiptapSecureScript');
+    });
+    it('should handle theme colors correctly', () => {
+        const mockTheme = {
+            colors: {
+                orange: { '400': '#ffcc00' },
+                neutral: { '50': '#ffffff' }
+            }
+        };
+        render(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        React.createElement(ConfigProvider, { theme: mockTheme },
+            React.createElement(SecureScriptComponent, null)));
+        expect(useStyleRegister).toHaveBeenCalled();
+    });
+});

package/dist/esm/tiptap/components/__tests__/secure-script-component.test.tsx

@@ -0,0 +1,89 @@
+import '@testing-library/jest-dom';
+
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { render, screen } from '@testing-library/react';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { SecureScriptComponent } from '../secure-script-component';
+
+vi.mock('@tiptap/react', () => ({
+  NodeViewWrapper: ({
+    children,
+    className
+  }: {
+    children?: React.ReactNode;
+    className?: string;
+  }) => (
+    <div data-testid="node-view-wrapper" className={className}>
+      {children}
+    </div>
+  ),
+  NodeViewContent: ({
+    as: Component = 'div',
+    className
+  }: {
+    as?: React.ElementType;
+    className?: string;
+  }) => <Component data-testid="node-view-content" className={className} />
+}));
+
+vi.mock('@akinon/ui-theme', () => ({
+  useToken: () => ({
+    token: {
+      colorPrimary: '#1890ff'
+    },
+    hashId: 'hash-id'
+  })
+}));
+
+vi.mock('@ant-design/cssinjs', () => ({
+  useStyleRegister: vi.fn((_config, cb) => {
+    cb();
+    return (node: React.ReactNode) => node;
+  })
+}));
+
+describe('SecureScriptComponent', () => {
+  it('should render correctly', () => {
+    const { container } = render(<SecureScriptComponent />);
+
+    expect(container).toBeInTheDocument();
+    expect(screen.getByTestId('node-view-wrapper')).toBeInTheDocument();
+    expect(screen.getByTestId('node-view-content')).toBeInTheDocument();
+
+    expect(screen.getByText('<script>')).toBeInTheDocument();
+    expect(screen.getByText('</script>')).toBeInTheDocument();
+
+    const wrapper = screen.getByTestId('node-view-wrapper');
+    expect(wrapper).toHaveClass('ant-tiptap-secure-script');
+    expect(wrapper).toHaveClass('hash-id');
+  });
+
+  it('should apply styles via useStyleRegister', () => {
+    render(<SecureScriptComponent />);
+
+    expect(useStyleRegister).toHaveBeenCalled();
+    const callArgs = vi.mocked(useStyleRegister).mock.calls[0][0];
+    expect(callArgs.path).toContain('TiptapSecureScript');
+  });
+
+  it('should handle theme colors correctly', () => {
+    const mockTheme = {
+      colors: {
+        orange: { '400': '#ffcc00' },
+        neutral: { '50': '#ffffff' }
+      }
+    };
+
+    render(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      <ConfigProvider theme={mockTheme as any}>
+        <SecureScriptComponent />
+      </ConfigProvider>
+    );
+
+    expect(useStyleRegister).toHaveBeenCalled();
+  });
+});

package/dist/esm/tiptap/components/__tests__/table-bubble-menu.test.d.ts

@@ -0,0 +1,6 @@
+import '@testing-library/jest-dom';
+import { type Editor } from '@tiptap/react';
+export declare let capturedShouldShow: (props: {
+    editor: Editor;
+}) => boolean;
+//# sourceMappingURL=table-bubble-menu.test.d.ts.map

package/dist/esm/tiptap/components/__tests__/table-bubble-menu.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-bubble-menu.test.d.ts","sourceRoot":"","sources":["../../../../../src/tiptap/components/__tests__/table-bubble-menu.test.tsx"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAGnC,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AA6H5C,eAAO,IAAI,kBAAkB,EAAE,CAAC,KAAK,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,KAAK,OAAO,CAAC"}