@akinon/ui-editor 1.0.0

package/dist/esm/tiptap/components/html-code-viewer.js

@@ -0,0 +1,96 @@
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider } from 'antd';
+import React, { useRef } from 'react';
+import { EDITOR_HEIGHT } from '../constants';
+import { highlightHtml } from '../utils';
+export const HtmlCodeViewer = ({ value, onChange, className, readOnly = false }) => {
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const baseCls = getPrefixCls('html-code-viewer');
+    const preRef = useRef(null);
+    const colors = (theme === null || theme === void 0 ? void 0 : theme.colors) || {};
+    const handleScroll = (e) => {
+        if (preRef.current) {
+            preRef.current.scrollTop = e.currentTarget.scrollTop;
+            preRef.current.scrollLeft = e.currentTarget.scrollLeft;
+        }
+    };
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['HtmlCodeViewer'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [prefixCls]: {
+                position: 'relative',
+                width: '100%',
+                minHeight: EDITOR_HEIGHT,
+                height: EDITOR_HEIGHT,
+                marginTop: '10px',
+                border: `1px solid ${(_a = colors.editor) === null || _a === void 0 ? void 0 : _a.border}`,
+                borderRadius: '5px',
+                backgroundColor: (_b = colors.neutral) === null || _b === void 0 ? void 0 : _b['50'],
+                overflow: 'hidden',
+                '& textarea, & pre': {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    margin: 0,
+                    padding: '20px',
+                    border: 'none',
+                    borderRadius: '5px',
+                    fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace",
+                    fontSize: '14px',
+                    lineHeight: '1.5',
+                    tabSize: 2,
+                    whiteSpace: 'pre',
+                    overflow: 'auto',
+                    overflowWrap: 'normal',
+                    boxSizing: 'border-box',
+                    outline: 'none'
+                },
+                '& textarea': {
+                    zIndex: 1,
+                    color: 'transparent',
+                    backgroundColor: 'transparent',
+                    caretColor: (_c = colors.neutral) === null || _c === void 0 ? void 0 : _c['1000'],
+                    resize: 'none'
+                },
+                '& pre': {
+                    zIndex: 0,
+                    pointerEvents: 'none',
+                    color: (_d = colors.neutral) === null || _d === void 0 ? void 0 : _d['1000']
+                },
+                '.html-tag': {
+                    color: (_e = colors.editor) === null || _e === void 0 ? void 0 : _e.tag
+                },
+                '.html-attr': {
+                    color: (_f = colors.editor) === null || _f === void 0 ? void 0 : _f.attr
+                },
+                '.html-value': {
+                    color: (_g = colors.editor) === null || _g === void 0 ? void 0 : _g.value
+                },
+                '.html-comment': {
+                    color: (_h = colors.editor) === null || _h === void 0 ? void 0 : _h.comment,
+                    fontStyle: 'italic'
+                },
+                '.html-doctype': {
+                    color: (_j = colors.editor) === null || _j === void 0 ? void 0 : _j.tag
+                },
+                '.html-string': {
+                    color: (_k = colors.editor) === null || _k === void 0 ? void 0 : _k.string
+                }
+            }
+        };
+    });
+    const highlightedHtml = highlightHtml(value) + (value.endsWith('\n') ? '<br>' : '');
+    return useStyle(React.createElement("div", { className: `${baseCls} ${hashId} ${className || ''}` },
+        React.createElement("textarea", { value: value, onChange: e => onChange(e.target.value), onScroll: handleScroll, readOnly: readOnly, spellCheck: false, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off" }),
+        React.createElement("pre", { ref: preRef, "aria-hidden": "true", dangerouslySetInnerHTML: { __html: highlightedHtml } })));
+};

package/dist/esm/tiptap/components/image-upload-placeholder.d.ts

@@ -0,0 +1,4 @@
+import { NodeViewProps } from '@tiptap/react';
+import React from 'react';
+export declare const ImageUploadPlaceholder: ({ editor, node, getPos }: NodeViewProps) => React.JSX.Element;
+//# sourceMappingURL=image-upload-placeholder.d.ts.map

package/dist/esm/tiptap/components/image-upload-placeholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-upload-placeholder.d.ts","sourceRoot":"","sources":["../../../../src/tiptap/components/image-upload-placeholder.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,aAAa,EAAmB,MAAM,eAAe,CAAC;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAC;AA8B1B,eAAO,MAAM,sBAAsB,GAAI,0BAIpC,aAAa,sBA8Ff,CAAC"}

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

@@ -0,0 +1,94 @@
+import { Button } from '@akinon/ui-button';
+import { useToken } from '@akinon/ui-theme';
+import { Upload } from '@akinon/ui-upload';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { NodeViewWrapper } from '@tiptap/react';
+import { ConfigProvider } from 'antd';
+import React from 'react';
+import { i18n } from '../../i18n';
+const replacePlaceholderWithImage = (editor, getPos, node, result) => {
+    if (typeof getPos !== 'function')
+        return;
+    const pos = getPos();
+    if (typeof pos !== 'number')
+        return;
+    editor.chain().focus().run();
+    editor.commands.command(({ tr, dispatch }) => {
+        if (dispatch) {
+            const { schema } = editor.state;
+            const transaction = tr.replaceWith(pos, pos + node.nodeSize, schema.nodes.image.create({ src: result }));
+            dispatch(transaction);
+        }
+        return true;
+    });
+};
+export const ImageUploadPlaceholder = ({ editor, node, getPos }) => {
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const colors = (theme === null || theme === void 0 ? void 0 : theme.colors) || {};
+    const baseCls = getPrefixCls('tiptap-editor__image-upload');
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['EditorImageUpload'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        var _a, _b, _c, _d, _e;
+        const prefixCls = `:where(.${hashId}).${baseCls}`;
+        return {
+            [`${prefixCls}-wrapper`]: {
+                width: '100%',
+                display: 'flex',
+                justifyContent: 'center',
+                margin: '2rem 0'
+            },
+            [`${prefixCls}`]: {
+                border: `1px dashed ${(_a = colors.ebonyClay) === null || _a === void 0 ? void 0 : _a['175']}`,
+                padding: '4rem 2rem',
+                borderRadius: '8px',
+                textAlign: 'center',
+                width: '50%',
+                backgroundColor: (_b = colors === null || colors === void 0 ? void 0 : colors.editor) === null || _b === void 0 ? void 0 : _b.imageUploadBg,
+                ['.ant-upload-wrapper .ant-upload-drag']: {
+                    background: 'transparent',
+                    border: 'none',
+                    padding: 0
+                },
+                ['.ant-upload-text']: {
+                    color: (_c = colors.neutral) === null || _c === void 0 ? void 0 : _c['50'],
+                    marginTop: '1rem',
+                    marginBottom: '0.5rem',
+                    fontSize: '1rem'
+                },
+                ['.ant-upload-hint']: {
+                    color: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d['500'],
+                    fontSize: '0.875rem'
+                },
+                ['.ant-upload-drag-icon .anticon']: {
+                    color: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e['500'],
+                    fontSize: '2rem'
+                }
+            }
+        };
+    });
+    const handleImageUpload = (file) => {
+        const reader = new FileReader();
+        reader.onload = e => {
+            var _a;
+            const result = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+            if (typeof result === 'string') {
+                replacePlaceholderWithImage(editor, getPos, node, result);
+            }
+        };
+        reader.readAsDataURL(file);
+        return false;
+    };
+    return useStyle(React.createElement(NodeViewWrapper, { className: `${baseCls}-wrapper ${hashId}` },
+        React.createElement("div", { className: `${baseCls} ${hashId}` },
+            React.createElement(Upload.Dragger, { name: "file", multiple: false, showUploadList: false, beforeUpload: handleImageUpload },
+                React.createElement("div", { style: { pointerEvents: 'none' } },
+                    React.createElement("p", { className: "ant-upload-drag-icon" },
+                        React.createElement(Button, { type: "icon", icon: "add_picture", size: "small" })),
+                    React.createElement("p", { className: "ant-upload-text" }, i18n.t('editor.image_upload.click_to_upload')),
+                    React.createElement("p", { className: "ant-upload-hint" }, i18n.t('editor.image_upload.drag_and_drop_hint')))))));
+};

package/dist/esm/tiptap/components/menu-bar/__tests__/action-toolbar.test.d.ts

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

package/dist/esm/tiptap/components/menu-bar/__tests__/action-toolbar.test.d.ts.map

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

package/dist/esm/tiptap/components/menu-bar/__tests__/action-toolbar.test.js

@@ -0,0 +1,78 @@
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import History from '@tiptap/extension-history';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ActionToolbar } from '../action-toolbar';
+vi.mock('@akinon/ui-button', () => ({
+    Button: ({ onClick, disabled, tooltip, icon, className }) => (React.createElement("button", { onClick: onClick, disabled: disabled, "aria-label": tooltip, "data-icon": icon, className: className, "data-testid": `action-button-${icon}` }, tooltip))
+}));
+vi.mock('../../../../i18n', () => ({
+    i18n: {
+        t: (key) => {
+            const translations = {
+                'editor.toolbar.undo': 'Undo',
+                'editor.toolbar.redo': 'Redo',
+                'editor.toolbar.source_mode': 'Source Mode',
+                'editor.toolbar.normal_mode': 'Normal Mode'
+            };
+            return translations[key] || key;
+        }
+    }
+}));
+describe('ActionToolbar', () => {
+    let editor;
+    const createEditorState = (overrides = {}) => (Object.assign({ isBold: false, isItalic: false, isUnderline: false, isStrike: false, isCode: false, isHighlight: false, isParagraph: false, isHeading1: false, isHeading2: false, isHeading3: false, isHeading4: false, isCodeBlock: false, isBlockquote: false, isBulletList: false, isOrderedList: false, isTaskList: false, isLink: false, isTable: false, isLeftAlign: false, isCenterAlign: false, isRightAlign: false, isJustifyAlign: false, canUndo: false, canRedo: false, canBold: false, canItalic: false, canUnderline: false, canStrike: false, canCode: false, canClearMarks: false }, overrides));
+    beforeEach(() => {
+        editor = new Editor({
+            extensions: [Document, Paragraph, Text, History]
+        });
+    });
+    it('should render all action buttons', () => {
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: false, toggleSource: vi.fn() }));
+        expect(screen.getByTestId('action-button-format-undo')).toBeInTheDocument();
+        expect(screen.getByTestId('action-button-format-redo')).toBeInTheDocument();
+        expect(screen.getByTestId('action-button-eye-open')).toBeInTheDocument();
+    });
+    it('should handle undo click', () => {
+        const focusSpy = vi.spyOn(editor, 'chain');
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState({ canUndo: true }), isSourceMode: false, toggleSource: vi.fn() }));
+        const undoButton = screen.getByTestId('action-button-format-undo');
+        fireEvent.click(undoButton);
+        expect(focusSpy).toHaveBeenCalled();
+    });
+    it('should handle redo click', () => {
+        const focusSpy = vi.spyOn(editor, 'chain');
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState({ canRedo: true }), isSourceMode: false, toggleSource: vi.fn() }));
+        const redoButton = screen.getByTestId('action-button-format-redo');
+        fireEvent.click(redoButton);
+        expect(focusSpy).toHaveBeenCalled();
+    });
+    it('should handle toggle source click', () => {
+        const toggleSource = vi.fn();
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: false, toggleSource: toggleSource }));
+        const sourceButton = screen.getByTestId('action-button-eye-open');
+        fireEvent.click(sourceButton);
+        expect(toggleSource).toHaveBeenCalled();
+    });
+    it('should disable undo and redo when in source mode', () => {
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState({ canUndo: true, canRedo: true }), isSourceMode: true, toggleSource: vi.fn() }));
+        expect(screen.getByTestId('action-button-format-undo')).toBeDisabled();
+        expect(screen.getByTestId('action-button-format-redo')).toBeDisabled();
+    });
+    it('should show eye-close icon and normal mode tooltip when isSourceMode is true', () => {
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: true, toggleSource: vi.fn() }));
+        const sourceButton = screen.getByTestId('action-button-eye-close');
+        expect(sourceButton).toBeInTheDocument();
+        expect(sourceButton).toHaveAttribute('aria-label', 'Normal Mode');
+    });
+    it('should apply active class to source mode button when active', () => {
+        render(React.createElement(ActionToolbar, { editor: editor, editorState: createEditorState(), isSourceMode: true, toggleSource: vi.fn() }));
+        const sourceButton = screen.getByTestId('action-button-eye-close');
+        expect(sourceButton).toHaveClass('active');
+    });
+});

package/dist/esm/tiptap/components/menu-bar/__tests__/action-toolbar.test.tsx

@@ -0,0 +1,212 @@
+import '@testing-library/jest-dom';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Editor } from '@tiptap/core';
+import Document from '@tiptap/extension-document';
+import History from '@tiptap/extension-history';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { EditorState } from '../../../types';
+import { ActionToolbar } from '../action-toolbar';
+
+vi.mock('@akinon/ui-button', () => ({
+  Button: ({
+    onClick,
+    disabled,
+    tooltip,
+    icon,
+    className
+  }: {
+    onClick: () => void;
+    disabled: boolean;
+    tooltip: string;
+    icon: string;
+    className?: string;
+  }) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={tooltip}
+      data-icon={icon}
+      className={className}
+      data-testid={`action-button-${icon}`}
+    >
+      {tooltip}
+    </button>
+  )
+}));
+
+vi.mock('../../../../i18n', () => ({
+  i18n: {
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'editor.toolbar.undo': 'Undo',
+        'editor.toolbar.redo': 'Redo',
+        'editor.toolbar.source_mode': 'Source Mode',
+        'editor.toolbar.normal_mode': 'Normal Mode'
+      };
+      return translations[key] || key;
+    }
+  }
+}));
+
+describe('ActionToolbar', () => {
+  let editor: Editor;
+
+  const createEditorState = (
+    overrides: Partial<EditorState> = {}
+  ): EditorState => ({
+    isBold: false,
+    isItalic: false,
+    isUnderline: false,
+    isStrike: false,
+    isCode: false,
+    isHighlight: false,
+    isParagraph: false,
+    isHeading1: false,
+    isHeading2: false,
+    isHeading3: false,
+    isHeading4: false,
+    isCodeBlock: false,
+    isBlockquote: false,
+    isBulletList: false,
+    isOrderedList: false,
+    isTaskList: false,
+    isLink: false,
+    isTable: false,
+    isLeftAlign: false,
+    isCenterAlign: false,
+    isRightAlign: false,
+    isJustifyAlign: false,
+    canUndo: false,
+    canRedo: false,
+    canBold: false,
+    canItalic: false,
+    canUnderline: false,
+    canStrike: false,
+    canCode: false,
+    canClearMarks: false,
+    ...overrides
+  });
+
+  beforeEach(() => {
+    editor = new Editor({
+      extensions: [Document, Paragraph, Text, History]
+    });
+  });
+
+  it('should render all action buttons', () => {
+    render(
+      <ActionToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        isSourceMode={false}
+        toggleSource={vi.fn()}
+      />
+    );
+
+    expect(screen.getByTestId('action-button-format-undo')).toBeInTheDocument();
+    expect(screen.getByTestId('action-button-format-redo')).toBeInTheDocument();
+    expect(screen.getByTestId('action-button-eye-open')).toBeInTheDocument();
+  });
+
+  it('should handle undo click', () => {
+    const focusSpy = vi.spyOn(editor, 'chain');
+
+    render(
+      <ActionToolbar
+        editor={editor}
+        editorState={createEditorState({ canUndo: true })}
+        isSourceMode={false}
+        toggleSource={vi.fn()}
+      />
+    );
+
+    const undoButton = screen.getByTestId('action-button-format-undo');
+    fireEvent.click(undoButton);
+
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
+  it('should handle redo click', () => {
+    const focusSpy = vi.spyOn(editor, 'chain');
+
+    render(
+      <ActionToolbar
+        editor={editor}
+        editorState={createEditorState({ canRedo: true })}
+        isSourceMode={false}
+        toggleSource={vi.fn()}
+      />
+    );
+
+    const redoButton = screen.getByTestId('action-button-format-redo');
+    fireEvent.click(redoButton);
+
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
+  it('should handle toggle source click', () => {
+    const toggleSource = vi.fn();
+
+    render(
+      <ActionToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        isSourceMode={false}
+        toggleSource={toggleSource}
+      />
+    );
+
+    const sourceButton = screen.getByTestId('action-button-eye-open');
+    fireEvent.click(sourceButton);
+
+    expect(toggleSource).toHaveBeenCalled();
+  });
+
+  it('should disable undo and redo when in source mode', () => {
+    render(
+      <ActionToolbar
+        editor={editor}
+        editorState={createEditorState({ canUndo: true, canRedo: true })}
+        isSourceMode={true}
+        toggleSource={vi.fn()}
+      />
+    );
+
+    expect(screen.getByTestId('action-button-format-undo')).toBeDisabled();
+    expect(screen.getByTestId('action-button-format-redo')).toBeDisabled();
+  });
+
+  it('should show eye-close icon and normal mode tooltip when isSourceMode is true', () => {
+    render(
+      <ActionToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        isSourceMode={true}
+        toggleSource={vi.fn()}
+      />
+    );
+
+    const sourceButton = screen.getByTestId('action-button-eye-close');
+    expect(sourceButton).toBeInTheDocument();
+    expect(sourceButton).toHaveAttribute('aria-label', 'Normal Mode');
+  });
+
+  it('should apply active class to source mode button when active', () => {
+    render(
+      <ActionToolbar
+        editor={editor}
+        editorState={createEditorState()}
+        isSourceMode={true}
+        toggleSource={vi.fn()}
+      />
+    );
+
+    const sourceButton = screen.getByTestId('action-button-eye-close');
+    expect(sourceButton).toHaveClass('active');
+  });
+});

package/dist/esm/tiptap/components/menu-bar/__tests__/alignment-toolbar.test.d.ts

@@ -0,0 +1,3 @@
+import '@tiptap/extension-text-align';
+import '@testing-library/jest-dom';
+//# sourceMappingURL=alignment-toolbar.test.d.ts.map

package/dist/esm/tiptap/components/menu-bar/__tests__/alignment-toolbar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alignment-toolbar.test.d.ts","sourceRoot":"","sources":["../../../../../../src/tiptap/components/menu-bar/__tests__/alignment-toolbar.test.tsx"],"names":[],"mappings":"AAAA,OAAO,8BAA8B,CAAC;AACtC,OAAO,2BAA2B,CAAC"}