asma-ui-richeditor 0.1.11-grisha → 0.1.12-grisha

package/dist/package.json

@@ -0,0 +1,147 @@
+{
+    "name": "asma-ui-richeditor",
+    "publishConfig": {
+        "access": "public"
+    },
+    "version": "0.1.11-grisha",
+    "type": "module",
+    "files": [
+        "dist/**/*",
+        "dist/style.css",
+        "tw-configs/**/*"
+    ],
+    "keywords": [],
+    "author": "asma-team",
+    "types": "./dist/index.d.ts",
+    "main": "./dist/asma-ui-richeditor.es.js",
+    "module": "./dist/asma-ui-richeditor.es.js",
+    "exports": {
+        ".": {
+            "import": "./dist/asma-ui-richeditor.es.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./dist/style.css": "./dist/style.css",
+        "./tw-configs/twConfigs.json": "./tw-configs/twConfigs.json"
+    },
+    "scripts": {
+        "dev": "vite",
+        "build": "npx tsc && rm -rf ./dist && vite build",
+        "build:win": "rimraf ./dist && npx tsc && vite build",
+        "preview": "vite preview",
+        "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
+        "version": "echo $npm_package_version",
+        "lint:fix": "eslint --fix src/**/*.{jsx,ts,tsx}",
+        "prettier": "prettier --write src//**/*.{ts,tsx,scss} --config ./.prettierrc",
+        "storybook": "storybook dev -p 6006",
+        "storybook:no-browser": "storybook dev -p 6006 --no-open",
+        "storybook:node18": "export NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6006",
+        "storybook:node18:win": "set NODE_OPTIONS=--openssl-legacy-provider && storybook dev -p 6006",
+        "build-storybook": "export NODE_OPTIONS=--max_old_space_size=6240 && storybook build",
+        "test-storybook": "test-storybook",
+        "changeset:pre-beta": "changeset pre enter beta",
+        "changeset:pre-exit": "changeset pre exit",
+        "changeset:version": "changeset version",
+        "changeset:publish": "changeset publish",
+        "changeset:status": "changeset status"
+    },
+    "license": "UNLICENSED",
+    "dependencies": {
+        "@emoji-mart/data": "^1.2.1",
+        "@emoji-mart/react": "^1.1.1",
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
+        "@floating-ui/react": "^0.27.13",
+        "@fontsource/roboto": "^5.0.4",
+        "@iconify/react": "^5.0.2",
+        "@mui/material": "^5.13.7",
+        "@tiptap/core": "^2.11.7",
+        "@tiptap/extension-blockquote": "^2.11.7",
+        "@tiptap/extension-bold": "^2.11.7",
+        "@tiptap/extension-bullet-list": "^2.11.7",
+        "@tiptap/extension-color": "^2.11.7",
+        "@tiptap/extension-document": "^2.11.7",
+        "@tiptap/extension-hard-break": "^2.11.7",
+        "@tiptap/extension-heading": "^2.11.7",
+        "@tiptap/extension-horizontal-rule": "^2.11.7",
+        "@tiptap/extension-italic": "^2.11.7",
+        "@tiptap/extension-link": "^2.11.7",
+        "@tiptap/extension-list-item": "^2.11.7",
+        "@tiptap/extension-ordered-list": "^2.11.7",
+        "@tiptap/extension-paragraph": "^2.11.7",
+        "@tiptap/extension-placeholder": "^2.11.7",
+        "@tiptap/extension-strike": "^2.11.7",
+        "@tiptap/extension-text": "^2.11.7",
+        "@tiptap/extension-text-style": "^2.11.7",
+        "@tiptap/extension-underline": "^2.11.7",
+        "@tiptap/react": "^2.11.7",
+        "asma-ui-richeditor": "link:../../Users/Ranzi/AppData/Local/pnpm/global/5/node_modules/asma-ui-richeditor",
+        "clsx": "^2.1.1",
+        "emoji-mart": "^5.6.0",
+        "node": "18.17.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "tailwind-merge": "^2.5.4",
+        "tiptap-extension-font-size": "^1.2.0"
+    },
+    "devDependencies": {
+        "@changesets/cli": "^2.26.2",
+        "@faker-js/faker": "^8.0.2",
+        "@rollup/plugin-terser": "^0.4.3",
+        "@storybook/addon-a11y": "^7.6.9",
+        "@storybook/addon-essentials": "^7.6.9",
+        "@storybook/addon-interactions": "^7.6.9",
+        "@storybook/addon-links": "^7.6.9",
+        "@storybook/addon-mdx-gfm": "^7.6.9",
+        "@storybook/addon-styling": "^1.3.7",
+        "@storybook/addons": "^7.6.9",
+        "@storybook/blocks": "^7.6.9",
+        "@storybook/manager-api": "^7.6.9",
+        "@storybook/preset-create-react-app": "^7.6.9",
+        "@storybook/react": "^7.6.9",
+        "@storybook/react-vite": "^7.6.9",
+        "@storybook/test-runner": "^0.16.0",
+        "@storybook/testing-library": "^0.2.2",
+        "@storybook/theming": "^7.6.9",
+        "@types/lodash-es": "^4.17.7",
+        "@types/node": "^18.0.3",
+        "@types/react": "^18.0.37",
+        "@types/react-dom": "^18.0.11",
+        "@typescript-eslint/eslint-plugin": "^5.59.0",
+        "@typescript-eslint/parser": "^5.59.0",
+        "@vitejs/plugin-react": "^4.0.0",
+        "asma-core-ui": "^3.0.147",
+        "autoprefixer": "^10.4.14",
+        "axe-playwright": "^1.2.3",
+        "axios": "^1.6.8",
+        "eslint": "^8.38.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.3.4",
+        "eslint-plugin-storybook": "^0.6.15",
+        "postcss": "^8.4.24",
+        "prop-types": "^15.8.1",
+        "rimraf": "^6.0.1",
+        "rollup-plugin-typescript2": "^0.35.0",
+        "storybook": "^7.6.9",
+        "storybook-addon-themes": "^6.1.0",
+        "tailwind-scrollbar": "^3.1.0",
+        "tailwindcss": "^3.3.2",
+        "typescript": "^5.0.2",
+        "typescript-plugin-css-modules": "^5.0.1",
+        "vite": "^4.3.9",
+        "vite-plugin-css-injected-by-js": "^3.5.1",
+        "vite-plugin-dts": "^3.1.1",
+        "vite-tsconfig-paths": "^4.2.0"
+    },
+    "peerDependencies": {
+        "@emotion/react": "^11.*",
+        "@emotion/styled": "^11.*",
+        "@mui/material": "^5.*",
+        "immer": "^9.*",
+        "react": "^18.*",
+        "react-dom": "^18.*"
+    },
+    "resolutions": {
+        "@types/node": "18.0.3",
+        "node": "18.17.0"
+    }
+}

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rich-input/RichInput';

package/dist/src/index.js

@@ -0,0 +1 @@
+export * from './rich-input/RichInput';

package/dist/src/rich-input/RichInput.d.ts

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+import './styles/tiptap.css';
+import type { IRichInput } from './interfaces/types';
+/**
+ * ASMA RichInput - A rich text editor component.
+ *
+ * @param readOnly - Determines the display style in read-only mode.
+ * Options:
+ * - `'plain'`: Displays the editor with a white background and no borders.
+ * - `'outlined'`: Displays the editor with a gray background and visible borders.
+ */
+declare const RichInput: FC<IRichInput>;
+export { RichInput };

package/dist/src/rich-input/RichInput.jsx

@@ -0,0 +1,129 @@
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { EditorContent, useEditor } from '@tiptap/react';
+import { Toolbar } from './components/Toolbar';
+import './styles/tiptap.css';
+import { StyledFormControl, StyledFormHelperText } from 'asma-core-ui';
+import { Icon } from '@iconify/react';
+import { defaultExtensions, editModeExtensions } from './helpers/EditorExtensions';
+import { LinkDialog } from './components/LinkDialog';
+import Placeholder from '@tiptap/extension-placeholder';
+import data, {} from '@emoji-mart/data';
+import Picker from '@emoji-mart/react';
+/**
+ * ASMA RichInput - A rich text editor component.
+ *
+ * @param readOnly - Determines the display style in read-only mode.
+ * Options:
+ * - `'plain'`: Displays the editor with a white background and no borders.
+ * - `'outlined'`: Displays the editor with a gray background and visible borders.
+ */
+const RichInput = ({ dataTest, attachmentsMenu, id, inputRef, className, editorClassName, disabled, readOnly, error, locale, 
+// label, // this in not implemented yet
+title, placeholder, helperText, required, maxScrollableHeight, toolbarDefaultVisible, hideToolbar, noDefaultStyles, ...props }) => {
+    const cursor = useRef();
+    const [wasTouched, setWasTouched] = useState(false);
+    const editor = useEditor({
+        ...props,
+        extensions: [
+            Placeholder.configure({ placeholder }),
+            ...defaultExtensions,
+            ...editModeExtensions,
+            ...(props.extensions || []),
+        ],
+        parseOptions: {
+            preserveWhitespace: true,
+            ...props.parseOptions,
+        },
+        shouldRerenderOnTransaction: props.shouldRerenderOnTransaction || false,
+        immediatelyRender: props.immediatelyRender || true,
+        editable: props.editable || (!disabled && !readOnly),
+        onSelectionUpdate: (updateProps) => {
+            props.onSelectionUpdate?.(updateProps);
+            cursor.current = updateProps.editor.state.selection.anchor;
+            updateProps.editor.commands.focus();
+        },
+    }, 
+    //NOTE: the dependency list doesn't accept the props object without creating a max call stack error
+    [
+        props.extensions,
+        props.shouldRerenderOnTransaction,
+        props.immediatelyRender,
+        props.editable,
+        props.content,
+        disabled,
+        readOnly,
+        placeholder,
+    ]);
+    useEffect(() => {
+        if (cursor.current === undefined)
+            return;
+        editor?.commands.setTextSelection(cursor.current);
+    }, [props.content, editor]);
+    const [showToolbar, setShowToolbar] = useState(toolbarDefaultVisible);
+    const [linkDialogVisible, setLinkDialogVisible] = useState(false);
+    useImperativeHandle(inputRef, () => editor);
+    const [focused, setFocused] = useState(false);
+    const [emojiPickerVisible, setEmojiPickerVisible] = useState(false);
+    const isEmpty = editor?.isEmpty ?? true;
+    useEffect(() => {
+        const handleFocus = () => setFocused(true);
+        const handleBlur = () => setFocused(false);
+        editor?.on('focus', handleFocus);
+        editor?.on('blur', handleBlur);
+        return () => {
+            editor?.off('focus', handleFocus);
+            editor?.off('blur', handleBlur);
+        };
+    }, [editor]);
+    const handleEmojiSelect = (emoji) => {
+        if (editor) {
+            editor.chain().focus().insertContent(emoji.native).run();
+        }
+        setEmojiPickerVisible(false);
+    };
+    const isFieldEmpty = editor?.isEmpty;
+    const showError = !readOnly && error && isFieldEmpty;
+    if (!editor)
+        return null;
+    return (<div className='w-full flex justify-between flex-col'>
+            <StyledFormControl className={className}>
+                {title && <p className='font-semibold text-base text-gray-700 mb-2'>{title}</p>}
+                <div className={clsx(!noDefaultStyles && 'rte-wrapper', readOnly === 'outlined' && 'readonly-outlined', readOnly === 'plain' && 'readonly-plain', !readOnly && showError && (focused ? 'error-focused-state' : 'error-state'), !readOnly && !showError && focused && 'focused-state')}>
+                    <div className='relative'>
+                        <EditorContent data-test={dataTest} id={id} className={clsx('border-none rounded-none w-full min-h-[80px]', !noDefaultStyles && 'core-ui-rte', !hideToolbar && !disabled && !readOnly && !showToolbar && 'displace-text', !noDefaultStyles && !disabled && !readOnly && 'edit-mode', editorClassName)} editor={editor} onClick={() => editor?.chain().focus().run()} style={showToolbar ? { height: '20px' } : undefined}/>
+
+                        {!hideToolbar && !disabled && !readOnly && (<div className='absolute top-1 right-1 bottom-1 flex flex-col gap-4 items-center z-10'>
+                                {!showToolbar && (<Icon onClick={() => {
+                    setShowToolbar(true);
+                }} className='cursor-pointer iconButton' icon='material-symbols:format-color-text' color='var(--colors-gray-700)' height={24} width={24}/>)}
+
+                                {attachmentsMenu ?? (
+            // <Icon
+            //     className='iconButton'
+            //     icon='material-symbols:attach-file'
+            //     color='var(--colors-gray-700)'
+            //     height={24}
+            //     width={24}
+            // />
+            <div></div>)}
+                            </div>)}
+                    </div>
+                    {!hideToolbar && !disabled && !readOnly && showToolbar && (<Toolbar editor={editor} onClose={() => setShowToolbar(false)} error={error} focused={focused} openLinkDialog={() => setLinkDialogVisible(true)} openEmojiPicker={() => setEmojiPickerVisible(true)} locale={locale}/>)}
+                </div>
+
+                {showError && helperText && (<StyledFormHelperText error data-test={`error-${dataTest}`}>
+                        {helperText}
+                    </StyledFormHelperText>)}
+            </StyledFormControl>
+
+            <LinkDialog open={linkDialogVisible} setOpen={setLinkDialogVisible} editor={editor} locale={locale}/>
+
+            {emojiPickerVisible && (<div className='fixed inset-0 bg-black/20 z-[9999] flex items-center justify-center' onClick={() => setEmojiPickerVisible(false)}>
+                    <div onClick={(e) => e.stopPropagation()}>
+                        <Picker theme='light' data={data} onEmojiSelect={handleEmojiSelect} locale={locale}/>
+                    </div>
+                </div>)}
+        </div>);
+};
+export { RichInput };

package/dist/src/rich-input/components/CustomMenuItem.d.ts

@@ -0,0 +1,3 @@
+import type { MenuItemProps } from '@mui/material';
+import React from 'react';
+export declare const CustomMenuItem: (props: MenuItemProps) => React.JSX.Element;

package/dist/src/rich-input/components/CustomMenuItem.jsx

@@ -0,0 +1,13 @@
+import { StyledMenuItem } from 'asma-core-ui';
+import React from 'react';
+export const CustomMenuItem = (props) => {
+    return (<StyledMenuItem {...props} sx={{
+            '&.MuiMenuItem-root': {
+                color: 'var(--colors-delta-700)',
+                fontSize: '14px',
+                lineHeight: '20px',
+            },
+        }}>
+            {props.children}
+        </StyledMenuItem>);
+};

package/dist/src/rich-input/components/FontSizeSelect.d.ts

@@ -0,0 +1,7 @@
+import { type TextFieldProps } from 'asma-core-ui';
+import React from 'react';
+import '../styles/toolbar.css';
+import type { Editor } from '@tiptap/core';
+export declare const FontSizeSelect: (props: TextFieldProps & {
+    editor: Editor;
+}) => React.JSX.Element;

package/dist/src/rich-input/components/FontSizeSelect.jsx

@@ -0,0 +1,53 @@
+import { Icon } from '@iconify/react';
+import { StyledInputField } from 'asma-core-ui';
+import React, { useLayoutEffect, useState } from 'react';
+import '../styles/toolbar.css';
+const fontSizeMap = {
+    small: '10px',
+    normal: '16px',
+    large: '24px',
+    huge: '32px',
+};
+export const FontSizeSelect = (props) => {
+    const { editor } = props;
+    const [selectedSize, setSelectedSize] = useState('normal');
+    const handleFontSizeChange = (event) => {
+        const selectedSize = event.target.value;
+        editor.chain().focus().setMark('textStyle', { fontSize: fontSizeMap[selectedSize] }).run();
+        setSelectedSize(selectedSize);
+    };
+    useLayoutEffect(() => {
+        const { from, to } = editor.state.selection;
+        editor.state.doc.nodesBetween(from - 1, to, (node) => {
+            if (node.marks) {
+                const textStyleMark = node.marks.find((mark) => mark.type.name === 'textStyle');
+                const fontSize = textStyleMark?.attrs['fontSize'];
+                const currentFontSize = Object.keys(fontSizeMap).find((key) => fontSizeMap[key] === fontSize) || 'normal';
+                setSelectedSize(currentFontSize);
+            }
+        });
+    }, [editor.state.selection, editor.state.doc]);
+    return (<StyledInputField {...props} select size='small' dataTest='font-size-select' onChange={handleFontSizeChange} value={selectedSize} SelectProps={{ IconComponent: () => null }} InputProps={{
+            endAdornment: <Icon icon='tabler:caret-up-down-filled' className='chevron-icon'/>,
+        }} sx={{
+            '.MuiSelect-select': {
+                border: 'none',
+                padding: 0,
+                overflow: 'hidden',
+                display: 'flex',
+                alignItems: 'center',
+                color: 'var(--colors-delta-700)',
+                fontSize: '14px',
+                lineHeight: '20px',
+            },
+            '.MuiOutlinedInput-root': {
+                height: '32px',
+                width: '75px',
+                '& .MuiOutlinedInput-notchedOutline': {
+                    border: 'none',
+                },
+            },
+        }}>
+            {props.children}
+        </StyledInputField>);
+};

package/dist/src/rich-input/components/LinkDialog.d.ts

@@ -0,0 +1,10 @@
+import type { Editor } from '@tiptap/react';
+import React from 'react';
+import '../styles/toolbar.css';
+import type { ILocale } from '../interfaces/types';
+export declare const LinkDialog: React.FC<{
+    open: boolean;
+    setOpen: (value: boolean) => void;
+    editor: Editor;
+    locale?: ILocale;
+}>;

package/dist/src/rich-input/components/LinkDialog.jsx

@@ -0,0 +1,56 @@
+import { StyledButton, StyledDialog, StyledInputField } from 'asma-core-ui';
+import React, { useLayoutEffect, useMemo, useState } from 'react';
+import styles from './LinkDialog.module.scss';
+import '../styles/toolbar.css';
+export const LinkDialog = ({ open, setOpen, editor, locale }) => {
+    const [url, setUrl] = useState('');
+    const isNorsk = useMemo(() => locale === 'no', [locale]);
+    useLayoutEffect(() => {
+        if (open) {
+            const { from, to } = editor.state.selection;
+            let currentLink = null;
+            editor.state.doc.nodesBetween(from - 1, to, (node) => {
+                if (node.marks) {
+                    const linkMark = node.marks.find((mark) => mark.type.name === 'link');
+                    if (linkMark) {
+                        currentLink = linkMark.attrs['href'];
+                    }
+                }
+            });
+            if (currentLink)
+                setUrl(currentLink);
+            else
+                setUrl('');
+            const input = document.querySelector('[data-test="link-input-field"]');
+            input?.focus();
+        }
+    }, [open, editor]);
+    const makeLink = () => {
+        editor.chain().focus().setLink({ href: url }).run();
+        setOpen(false);
+        setUrl('');
+    };
+    return (<StyledDialog open={open} dataTest={'link-modal-rte'} onClose={() => setOpen(false)} className={'z-[99]'} dialogTitle={<div className={'text-gray-700'}>{isNorsk ? 'Legg til lenke' : 'Add link'}</div>}>
+            <div className={styles['link-dialog-container']}>
+                <div className='link-input-field'>
+                    <StyledInputField autoFocus multiline className='w-full' dataTest={'link-input-field'} size={'small'} sx={{
+            '& .MuiInputBase-root': {
+                minHeight: 64,
+                alignItems: 'start',
+            },
+        }} value={url} onChange={(e) => setUrl(e.target.value)}/>
+                </div>
+                <div className={'flex gap-2 p-0 w-full justify-end'}>
+                    <StyledButton dataTest={'delete-customer-reject-button'} size={'medium'} variant={'outlined'} onClick={() => {
+            setOpen(false);
+            setUrl('');
+        }}>
+                        {isNorsk ? 'Avbryt' : 'Cancel'}
+                    </StyledButton>
+                    <StyledButton dataTest={'delete-customer-confirm-button'} size={'medium'} variant={'contained'} onClick={makeLink}>
+                        {isNorsk ? 'Legg til lenke' : 'Add link'}
+                    </StyledButton>
+                </div>
+            </div>
+        </StyledDialog>);
+};

package/dist/src/rich-input/components/Toolbar.d.ts

@@ -0,0 +1,13 @@
+import { Editor } from '@tiptap/react';
+import '../styles/toolbar.css';
+import type { ILocale } from '../interfaces/types';
+export declare const Toolbar: ({ editor, onClose, error, focused, openLinkDialog, openEmojiPicker, locale, emojiButtonRef, }: {
+    editor: Editor;
+    onClose: () => void;
+    error?: boolean;
+    focused: boolean;
+    openLinkDialog: () => void;
+    openEmojiPicker: () => void;
+    locale?: ILocale;
+    emojiButtonRef?: React.RefObject<HTMLSpanElement>;
+}) => import("node_modules/@types/react").JSX.Element;