Perf tiptap implementation

.gitignore

@@ -10,6 +10,7 @@ out
 *.swo
 *.log
 build
+/dock
 .env.local
 .env.development.local
 .env.development

packages/erxes-ui/package.json

@@ -7,6 +7,23 @@
     "@nateradebaugh/react-datetime": "4.0.0-rc.10",
     "@types/styled-components": "^3.0.0",
     "ckeditor4-react": "^1.0.0",
+    "@tiptap/pm": "^2.1.11",
+    "@tiptap/react": "^2.1.11",
+    "@tiptap/extension-text-style": "^2.1.12",
+    "@tiptap/extension-bullet-list": "^2.1.12",
+    "@tiptap/extension-list-item": "^2.1.12",
+    "@tiptap/extension-text-align": "^2.1.12",
+    "@tiptap/extension-link": "^2.1.12",
+    "@tiptap/extension-image": "^2.1.12",
+    "@tiptap/extension-color": "^2.1.12",
+    "@tiptap/extension-font-family": "^2.1.12",
+    "@tiptap/extension-highlight": "^2.1.12",
+    "@tiptap/extension-mention": "^2.1.12",
+    "@tiptap/extension-placeholder": "^2.1.12",
+    "@tiptap/extension-subscript": "^2.1.12",
+    "@tiptap/extension-superscript": "^2.1.12",
+    "@tiptap/extension-underline": "^2.1.12",
+    "@tiptap/extension-dropcursor": "^2.1.12",
     "color": "3.1.2",
     "dayjs": "^1.8.15",
     "draft-js": "^0.10.5",
@@ -36,6 +53,6 @@
     "styled-components-ts": "^0.0.14",
     "validator": "12.1.0",
     "xss": "1.0.14",
-    "video.js":"^8.5.2"
+    "video.js": "^8.5.2"
   }
 }

packages/erxes-ui/src/components/richTextEditor/RichTextEditor.context.ts

@@ -0,0 +1,14 @@
+import { Editor } from '@tiptap/react';
+import { RichTextEditorLabels } from './labels';
+import { createSafeContext } from './createSafeContext';
+interface RichTextEditorContext {
+  editor: Editor | null;
+  labels: RichTextEditorLabels;
+}
+
+export const [
+  RichTextEditorProvider,
+  useRichTextEditorContext
+] = createSafeContext<RichTextEditorContext>(
+  'RichTextEditor component was not found in tree'
+);

packages/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { EditorContent } from '@tiptap/react';
+import { useRichTextEditorContext } from '../RichTextEditor.context';
+
+export const RichTextEditorContent = () => {
+  const ctx = useRichTextEditorContext();
+  return (
+    <div data-promise-mirror-editor>
+      <EditorContent editor={ctx.editor} />
+    </div>
+  );
+};

packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorControl.tsx

@@ -0,0 +1,103 @@
+import React, { forwardRef, useRef } from 'react';
+
+import { useRichTextEditorContext } from '../RichTextEditor.context';
+import { RichTextEditorLabels } from '../labels';
+import { EditorControl } from './styles';
+
+export type RichTextEditorControlStylesNames = 'control';
+
+export interface RichTextEditorControlProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Determines whether the control should have active state, false by default */
+  active?: boolean;
+
+  /** Determines whether the control can be interacted with, set `false` to make the control to act as a label */
+  interactive?: boolean;
+}
+
+export const RichTextEditorControl = (props: RichTextEditorControlProps) => {
+  const ref = useRef<HTMLButtonElement>(null);
+  const { interactive, active, onMouseDown, ...others } = props;
+
+  return (
+    <EditorControl
+      {...others}
+      data-rich-text-editor-control
+      tabIndex={interactive ? 0 : -1}
+      data-interactive={interactive || undefined}
+      data-active={active || undefined}
+      aria-pressed={(active && interactive) || undefined}
+      aria-hidden={!interactive || undefined}
+      innerRef={ref}
+      onMouseDown={event => {
+        event.preventDefault();
+        onMouseDown?.(event);
+      }}
+    />
+  );
+};
+
+export interface RichTextEditorControlBaseProps
+  extends RichTextEditorControlProps {
+  icon?: React.FC<{ style: React.CSSProperties }>;
+  // className: React.HTMLAttributes<HTMLButtonElement>;
+}
+
+export const RichTextEditorControlBase = <
+  HTMLButtonElement,
+  RichTextEditorControlBaseProps
+>({
+  className,
+  icon: Icon,
+  ...others
+}: any) => {
+  return (
+    <RichTextEditorControl {...others}>
+      <Icon style={{ width: '1rem', height: '1rem' }} />
+    </RichTextEditorControl>
+  );
+};
+
+export interface CreateControlProps {
+  label: keyof RichTextEditorLabels;
+  icon: React.FC<{ style: React.CSSProperties }>;
+  isActive?: { name: string | null; attributes?: Record<string, any> | string };
+  operation: { name: string; attributes?: Record<string, any> | string };
+}
+
+export function createControl({
+  label,
+  isActive,
+  operation,
+  icon
+}: CreateControlProps) {
+  return <HTMLButtonElement, RichTextEditorControlBaseProps>(
+    props: RichTextEditorControlBaseProps
+  ) => {
+    const { editor, labels } = useRichTextEditorContext();
+    const _label = labels[label] as string;
+    // const ref = useRef<HTMLButtonElement>(null);
+    return (
+      <RichTextEditorControlBase
+        aria-label={_label}
+        title={_label}
+        active={
+          isActive?.name
+            ? editor?.isActive(isActive.name, isActive.attributes)
+            : isActive?.attributes
+            ? editor?.isActive(isActive.attributes)
+            : false
+        }
+        onClick={() =>
+          (editor as any)
+            ?.chain()
+            .focus()
+            [operation.name](operation.attributes)
+            .run()
+        }
+        icon={icon}
+        // icon={icon || props.icon}
+      />
+    );
+  };
+}

packages/erxes-ui/src/components/richTextEditor/RichTextEditorControl/RichTextEditorFontControl.tsx

@@ -0,0 +1,91 @@
+import React, { useRef, useState } from 'react';
+import { Link, BoxArrowUpRight } from 'react-bootstrap-icons';
+import { useRichTextEditorContext } from '../RichTextEditor.context';
+import Select from 'react-select-plus';
+import {
+  RichTextEditorControlBaseProps,
+  RichTextEditorControlBase
+} from './RichTextEditorControl';
+import Tip from '../../Tip';
+import {
+  FontSelectWrapper,
+  InputAction,
+  InputWrapper,
+  LinkInput,
+  LinkWrapper
+} from './styles';
+import { SelectWrapper } from '../../form/styles';
+
+const LinkIcon: RichTextEditorControlBaseProps['icon'] = props => (
+  <Link {...props} />
+);
+
+export const RichTextEditorFontControl = props => {
+  const {
+    classNames,
+    className,
+    style,
+    styles,
+    vars,
+    icon,
+    popoverProps,
+    disableTooltips,
+    initialExternal,
+    ...others
+  } = props;
+  const [fontSize, setFontSize] = useState('');
+  const ctx = useRichTextEditorContext();
+  const fontSizes = [
+    'default',
+    8,
+    9,
+    10,
+    11,
+    12,
+    14,
+    16,
+    18,
+    20,
+    22,
+    24,
+    26,
+    28,
+    36,
+    42,
+    72
+  ];
+
+  const setSize = (size: string) => {
+    setFontSize(size === 'default' ? '13px' : size + 'px');
+    ctx.editor
+      ?.chain()
+      .setFontSize(size === 'default' ? '13px' : size + 'px')
+      .focus()
+      .run();
+  };
+
+  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      //   setLink();
+    }
+  };
+
+  return (
+    <FontSelectWrapper>
+      <Select
+        //  placeholder={ctx.labels.linkEditorInputPlaceholder}
+        //           aria-label={ctx.labels.linkEditorInputLabel}
+        placeholder="Size"
+        multi={false}
+        value={fontSize}
+        onChange={val => setSize(val.value)}
+        options={fontSizes.map(size => ({
+          value: size,
+          label: size
+          //   <p style={{ fontSize: size }}>
+        }))}
+      />
+    </FontSelectWrapper>
+  );
+};