PR (#108)

* escape event added for submit * https://lumel.atlassian.net/browse/XPC-4805 * Added underline option in draft editor * fix(annotation): hash mention fixed * set background color as transparent * title added for hash mention * fix(formatting): Added workaround to move color to top of the style tree. * strikeThrough enable/disable button issue fixed * mention customization and drafteditor customization added * decorator plugin added in constructor * remove color from convertToHtml in service * feat(annotation): value suggestion with new UX * feat(annotation): unwanted types removed * feat(annotation): custom mention implementation completed * fix(annotation): horizontal scroll removed * feat(editor): Added option to replace selection when insert entity or text (#86) * ValueMentionProps list issue fixed * fix(annotation): dynamic mention issue fixed * fix(annotation): dynamic mention issue fixed * Incomplete mention change color to red * people mention scroill issue fixed * people mention scroill issue fixed * feat: added support for inline toolbar and link (#92) * chore: added dev npm script * feat: added support for inline toolbar and link * feat(custom-keybinding): added support for custom-keybinding (#93) * chore: added dev npm script * feat: added support for inline toolbar and link * feat(custom-keybinding): added support for custom-keybinding * fix(typings): draftjs types mismatch (#94) * chore: added dev npm script * feat: added support for inline toolbar and link * feat(custom-keybinding): added support for custom-keybinding * fix(typings): draftjs types mismatch * feat(inline-toolbar): added positioning support (#95) * chore: added dev npm script * feat: added support for inline toolbar and link * feat(custom-keybinding): added support for custom-keybinding * fix(typings): draftjs types mismatch * feat(inline-toolbar): added positioning support * fix(inline-toolbar): handled sceneario for no observer (#96) * chore: added dev npm script * feat: added support for inline toolbar and link * feat(custom-keybinding): added support for custom-keybinding * fix(typings): draftjs types mismatch * feat(inline-toolbar): added positioning support * fix(inline-toolbar): handled sceneario for no observer * fix(inline-toolbar): handled sceneario for no observer * mention dropdown render with bounding rect * fix(draft): Mentions and styles getting removed fix (#98) * feat(draft-api): added draft api, fix(anchor-link): use block based conversion (#99) * chore: added dev npm script * feat: added support for inline toolbar and link * feat(custom-keybinding): added support for custom-keybinding * fix(typings): draftjs types mismatch * feat(inline-toolbar): added positioning support * fix(inline-toolbar): handled sceneario for no observer * fix(inline-toolbar): handled sceneario for no observer * fix(anchor-link): use block based conversion * feat(draft-api): added draft api * fix(link): used capital LINK for creating entity (#100) * chore: added dev npm script * feat: added support for inline toolbar and link * feat(custom-keybinding): added support for custom-keybinding * fix(typings): draftjs types mismatch * feat(inline-toolbar): added positioning support * fix(inline-toolbar): handled sceneario for no observer * fix(inline-toolbar): handled sceneario for no observer * fix(anchor-link): use block based conversion * feat(draft-api): added draft api * fix(link): used capital LINK for creating entity * VBI-4750 fixed * formula for value mention implementation * fix(link): update callback called when link is removed (#102) * chore: added dev npm script * feat: added support for inline toolbar and link * feat(custom-keybinding): added support for custom-keybinding * fix(typings): draftjs types mismatch * feat(inline-toolbar): added positioning support * fix(inline-toolbar): handled sceneario for no observer * fix(inline-toolbar): handled sceneario for no observer * fix(anchor-link): use block based conversion * feat(draft-api): added draft api * fix(link): used capital LINK for creating entity * fix(link): update callback called when link is removed * unique data-id added to mentions * XPC-6900 fixed * mention dropdown bounding issue fixed * fix(link): VBI-4951 last character gets left out (#107) Co-authored-by: raghu <[email protected]> Co-authored-by: Raghu Mudaliar <[email protected]> Co-authored-by: manikandanvengatesan <[email protected]> Co-authored-by: Jefferson Swartz <[email protected]> Co-authored-by: raghu <[email protected]> Co-authored-by: Habeebur Rahman <[email protected]>
visualbis · Sep 7, 2022 · 5e66e82 · 5e66e82
1 parent 1c70557
commit 5e66e82
Show file tree

Hide file tree

Showing 14 changed files with 876 additions and 189 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -3,30 +3,30 @@ const ts = require('gulp-typescript');
 const less = require('gulp-less');;
 const del = require('del');
 const concat = require('gulp-concat');
- 
+
 function cleanDist() {
     return del([
         './dist',
     ]);
 }
- 
+
 function compileTypescript() {
     var tsProject = ts.createProject('./tsconfig.json');
     return gulp
         .src(['./src/**/*.ts', './src/**/*.tsx'])
         .pipe(tsProject())
         .pipe(gulp.dest(`./dist/`));
 }
- 
+
 function compileLess() {
     return gulp.src(`./src/Styles/**/*.less`).pipe(less()).pipe(gulp.dest(`./dist/css`));
 }
- 
+
 function mergeCSS() {
     return gulp.src([`./dist/less/**/*.css`]).pipe(concat('combined.css')).pipe(gulp.dest(`./dist/css`));
 }
- 
- 
+
+
 const buildIbcs = gulp.series(
     function cleanIBCSDist() {
         return cleanDist();
@@ -41,5 +41,9 @@ const buildIbcs = gulp.series(
         return compileTypescript();
     },
 );
-
-exports.build = buildIbcs;
+
+exports.build = buildIbcs;
+gulp.task('dev', () => {
+    buildIbcs();
+    gulp.watch('src/**/*', gulp.series(compileLess, mergeCSS, compileTypescript));
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,14 +6,16 @@
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "start": "webpack serve",
+        "dev": "gulp dev",
         "build": "gulp build ",
         "replace": "replace.bat"
     },
     "author": "Ramakrishnan",
     "license": "ISC",
     "dependencies": {
-        "@draft-js-plugins/editor": "^4.1.0",
-        "@draft-js-plugins/mention": "^4.5.2",
+        "@draft-js-plugins/inline-toolbar": "^4.1.6",
+        "@draft-js-plugins/editor": "4.1.3",
+        "@draft-js-plugins/mention": "5.2.1",
         "@types/draft-convert": "^2.1.4",
         "@types/draft-js": "^0.11.5",
         "@types/draftjs-to-html": "^0.8.1",

diff --git a/src/Components/PopOverContainer.tsx b/src/Components/PopOverContainer.tsx
@@ -1,23 +1,30 @@
 import React, { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
-const PopOverContainer = (props: any) => {
+const PopOverContainer =
+    ({ width, isPeopleMention }) =>
+    (props: any) => {
         const boundingRect = props.store.getReferenceElement()?.getBoundingClientRect();
-        const mentionWidth = 223;
-        const clientWidth  = window.innerWidth || document.documentElement.clientWidth || 
-        document.body.clientWidth;
+        const mentionWidth = width ?? 223;
+        const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+        const clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
+        const  childHeight = isPeopleMention ? 56.6 : 26 ;
+        const height  = Math.min(160, props.children.length * childHeight)
         if (!boundingRect) {
             return null;
         }
-        const container =  document.body.getElementsByClassName('mention-list-container')[0];
-        if(!container) {
-           return null
+        const container = document.body.getElementsByClassName('mention-list-container')[0];
+        if (!container) {
+            return null;
         }
         const style: React.CSSProperties = boundingRect
             ? {
                   position: boundingRect ? 'fixed' : null,
-                  left: clientWidth - boundingRect.left < mentionWidth ?  boundingRect.left - mentionWidth :  boundingRect.left + 20,
-                  top: boundingRect.top + 15,
+                  left:
+                      clientWidth - boundingRect.left < mentionWidth
+                          ? boundingRect.left - mentionWidth
+                          : boundingRect.left + 20,
+                     top: clientHeight - (boundingRect.top +20) < height ? boundingRect.top - height : boundingRect.top + 20,
                   backgroundColor: '#fff',
                   zIndex: 1000,
                   boxShadow: '0px 4px 4px rgb(0 0 0 / 25%)',
@@ -26,11 +33,12 @@ const PopOverContainer = (props: any) => {
               }
             : null;
 
-        return createPortal((
-                <div className="mention-list" style={style}>
-                    {props.children}
-                </div>
-            ), container);
-}
+        return createPortal(
+            <div className={`mention-list ${isPeopleMention ? "people-mention" : ""}`} style={style}>
+                {props.children}
+            </div>,
+            container,
+        );
+    };
 
 export default PopOverContainer;
diff --git a/src/Components/SuggestionList.tsx b/src/Components/SuggestionList.tsx
@@ -43,7 +43,7 @@ export default class SuggestionList extends React.Component<EntryComponentProps>
                         <div className={`${theme?.mentionSuggestionsEntryTitle} ${'list-title'}`}>{mention.label}</div>
 
                         {mention.email && (
-                            <div className={theme?.mentionSuggestionsEntryText} style={{ marginLeft: 0 }}>
+                            <div className={`list-email ${theme?.mentionSuggestionsEntryText}`} style={{ marginLeft: 0 }}>
                                 {mention.email}
                             </div>
                         )}

diff --git a/src/Components/ValueMentionSuggestionList.tsx b/src/Components/ValueMentionSuggestionList.tsx
@@ -0,0 +1,84 @@
+import { MentionData } from '@draft-js-plugins/mention';
+import React from 'react';
+import '../Styles';
+import { EntryComponentProps } from './SuggestionList';
+
+interface IListProps {
+    onmousedown: (value: MentionData, searchValue: string) => void;
+}
+
+const DataPoint = () => {
+    return (
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="https://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M11.4631 2.69523C11.6421 2.51388 11.6668 2.39248 11.6668 2.33333C11.6668 2.27418 11.6421 2.15279 11.4631 1.97143C11.2808 1.78674 10.9785 1.58473 10.5435 1.39831C9.67633 1.02665 8.42407 0.777778 7.00011 0.777778C5.57614 0.777778 4.32389 1.02665 3.45669 1.39831C3.0217 1.58473 2.71938 1.78674 2.5371 1.97143C2.35812 2.15279 2.33344 2.27418 2.33344 2.33333C2.33344 2.39248 2.35812 2.51388 2.5371 2.69523C2.71938 2.87993 3.0217 3.08194 3.45669 3.26836C4.32389 3.64002 5.57614 3.88889 7.00011 3.88889C8.42407 3.88889 9.67633 3.64002 10.5435 3.26836C10.9785 3.08194 11.2808 2.87993 11.4631 2.69523ZM7.00011 4.66667C10.007 4.66667 12.4446 3.622 12.4446 2.33333C12.4446 1.04467 10.007 0 7.00011 0C3.99322 0 1.55566 1.04467 1.55566 2.33333C1.55566 3.622 3.99322 4.66667 7.00011 4.66667Z"
+                fill="#444444"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12.4445 2.33325C12.4445 2.77312 12.1605 3.18455 11.6668 3.53572V10.8888H11.6667V11.6666H11.6668H12.4446V10.8888V3.11103V2.33325H12.4445ZM2.33341 11.6666H1.55566V10.8888V3.11103V2.34615C1.56116 2.78121 1.84447 3.18808 2.33344 3.53584V10.111H2.33341V11.6666Z"
+                fill="#444444"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M1.55566 11.6667C1.55568 12.9554 3.99324 14.0001 7.00011 14.0001C10.007 14.0001 12.4445 12.9554 12.4446 11.6667H11.6668C11.6668 11.7259 11.6421 11.8473 11.4631 12.0286C11.2808 12.2133 10.9785 12.4153 10.5435 12.6018C9.67633 12.9734 8.42407 13.2223 7.00011 13.2223C5.57614 13.2223 4.32389 12.9734 3.45669 12.6018C3.0217 12.4153 2.71938 12.2133 2.5371 12.0286C2.35813 11.8473 2.33345 11.7259 2.33344 11.6667H1.55566Z"
+                fill="#444444"
+            />
+        </svg>
+    );
+};
+
+const SuggestionListComp = (listProps: IListProps) =>
+    class SuggestionList extends React.Component<EntryComponentProps> {
+        render() {
+            const {
+                mention,
+                theme,
+                isFocused,
+                searchValue, // eslint-disable-line @typescript-eslint/no-unused-vars
+                ...parentProps
+            } = this.props;
+            const newProps = {
+                className: parentProps.className,
+                role: parentProps.role,
+                id: parentProps.id,
+                onMouseEnter: parentProps.onMouseEnter,
+                onMouseDown: () => listProps.onmousedown(mention, searchValue),
+            };
+            return (
+                <div
+                    {...newProps}
+                    data-value={JSON.stringify(mention)}
+                    className={` value-mention-item-${isFocused ? 'focused' : ''} list_container_item ${isFocused ? 'focused' : ''
+                        }`}
+                >
+                    <div className={`${theme?.mentionSuggestionsEntryContainer} ${'list_item'}`}>
+                        <div className="value-mention-title-container">
+                            {!mention.hasLeaf && (
+                                <div className={'list_icon'}>
+                                    <DataPoint />
+                                </div>
+                            )}
+                            <div
+                                title={mention.label}
+                                className={`${theme?.mentionSuggestionsEntryTitle} ${'list-title'}`}
+                            >
+                                {mention.label}
+                            </div>
+                        </div>
+                        {/* {!mention.hasLeaf && (
+                            <div className={theme?.mentionSuggestionsEntryText} style={{ marginLeft: 0 }}>
+                                <i className="mention-chevron ms-Icon ms-Icon--ChevronRightSmall" />
+                            </div>
+                        )} */}
+                    </div>
+                </div>
+            );
+        }
+    };
+
+export default SuggestionListComp;
diff --git a/src/DraftApi.ts b/src/DraftApi.ts
@@ -0,0 +1,23 @@
+import { convertToRaw, EditorState, RichUtils } from 'draft-js';
+import { selectAll, convertFromHTMLString, convertToHTMLString } from './Service/draftEditor.service';
+
+type TFormatSting = 'bold' | 'italic' | 'underline' | 'background';
+
+/**
+ * operates on HTML string
+ */
+export default class DraftApi {
+    static addFormatToText = (htmlString: string, formatType: TFormatSting, formatValue?: any) => {
+        let editorState = EditorState.createWithContent(convertFromHTMLString(htmlString));
+        editorState = selectAll(editorState);
+        editorState = RichUtils.toggleInlineStyle(editorState, formatType.toUpperCase());
+        return convertToHTMLString(editorState);
+    };
+
+    static  getFormattedValue = (text: string) => {
+        const contentState = EditorState.createWithContent(convertFromHTMLString(text));
+        const rawData = convertToRaw(contentState.getCurrentContent());
+        const value = rawData.blocks.map((block) => (!block.text.trim() && '\n') || block.text).join('\n');
+        return value;
+    }
+}