+ {isLoadError ? (
+ setIsLoadError(true)}
+ />
+ )}
+
+
+ {showCaption && (
+
+
+
+
+ )}
+ {resizable && $isNodeSelection(selection) && isFocused && (
+
+ {!isLink ? null : isLinkEditMode ? (
+ <>
+ {
+ setEditedLinkUrl(event.target.value);
+ }}
+ onKeyDown={(event) => {
+ monitorInputInteraction(event);
+ }}
+ />
+
+
event.preventDefault()}
+ onClick={() => {
+ setIsLinkEditMode(false);
+ }}
+ />
+
+
event.preventDefault()}
+ onClick={handleLinkSubmission}
+ />
+
+
+ ) : (
+
+
+ {linkUrl}
+
+ ,
+): JSX.Element | null {
+ const [activeEditor, setActiveEditor] = useState(editor);
+ const [isLink, setIsLink] = useState(false);
+
+ useEffect(() => {
+ function $updateToolbar() {
+ const selection = $getSelection();
+ if ($isRangeSelection(selection)) {
+ const focusNode = getSelectedNode(selection);
+ const focusLinkNode = $findMatchingParent(focusNode, $isLinkNode);
+ const focusAutoLinkNode = $findMatchingParent(
+ focusNode,
+ $isAutoLinkNode,
+ );
+ if (!(focusLinkNode || focusAutoLinkNode)) {
+ setIsLink(false);
+ return;
+ }
+ const badNode = selection
+ .getNodes()
+ .filter((node) => !$isLineBreakNode(node))
+ .find((node) => {
+ const linkNode = $findMatchingParent(node, $isLinkNode);
+ const autoLinkNode = $findMatchingParent(node, $isAutoLinkNode);
+ return (
+ (focusLinkNode && !focusLinkNode.is(linkNode)) ||
+ (linkNode && !linkNode.is(focusLinkNode)) ||
+ (focusAutoLinkNode && !focusAutoLinkNode.is(autoLinkNode)) ||
+ (autoLinkNode &&
+ (!autoLinkNode.is(focusAutoLinkNode) ||
+ autoLinkNode.getIsUnlinked()))
+ );
+ });
+ if (!badNode) {
+ setIsLink(true);
+ } else {
+ setIsLink(false);
+ }
+ }
+ }
+ return mergeRegister(
+ editor.registerUpdateListener(({editorState}) => {
+ editorState.read(() => {
+ $updateToolbar();
+ });
+ }),
+ editor.registerCommand(
+ SELECTION_CHANGE_COMMAND,
+ (_payload, newEditor) => {
+ $updateToolbar();
+ setActiveEditor(newEditor);
+ return false;
+ },
+ COMMAND_PRIORITY_CRITICAL,
+ ),
+ editor.registerCommand(
+ CLICK_COMMAND,
+ (payload) => {
+ const selection = $getSelection();
+ if ($isRangeSelection(selection)) {
+ const node = getSelectedNode(selection);
+ const linkNode = $findMatchingParent(node, $isLinkNode);
+ if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
+ window.open(linkNode.getURL(), '_blank');
+ return true;
+ }
+ }
+ return false;
+ },
+ COMMAND_PRIORITY_LOW,
+ ),
+ );
+ }, [editor]);
+
+ return createPortal(
+ ;
+}): JSX.Element | null {
+ const [editor] = useLexicalComposerContext();
+ return useFloatingLinkEditorToolbar(
+ editor,
+ anchorElem,
+ isLinkEditMode,
+ setIsLinkEditMode,
+ );
+}
diff --git a/src/components/LexicalEditor/plugins/FloatingTextFormatToolbarPlugin.tsx b/src/components/LexicalEditor/plugins/FloatingTextFormatToolbarPlugin.tsx
new file mode 100644
index 0000000..6283fa7
--- /dev/null
+++ b/src/components/LexicalEditor/plugins/FloatingTextFormatToolbarPlugin.tsx
@@ -0,0 +1,400 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import './index.css';
+
+import {$isCodeHighlightNode} from '@lexical/code';
+import {$isLinkNode, TOGGLE_LINK_COMMAND} from '@lexical/link';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {mergeRegister} from '@lexical/utils';
+import {
+ $getSelection,
+ $isParagraphNode,
+ $isRangeSelection,
+ $isTextNode,
+ COMMAND_PRIORITY_LOW,
+ FORMAT_TEXT_COMMAND,
+ LexicalEditor,
+ SELECTION_CHANGE_COMMAND,
+} from 'lexical';
+import {Dispatch, useCallback, useEffect, useRef, useState} from 'react';
+import * as React from 'react';
+import {createPortal} from 'react-dom';
+
+import {getDOMRangeRect} from '../../utils/getDOMRangeRect';
+import {getSelectedNode} from '../../utils/getSelectedNode';
+import {setFloatingElemPosition} from '../../utils/setFloatingElemPosition';
+import {INSERT_INLINE_COMMAND} from '../CommentPlugin';
+
+function TextFormatFloatingToolbar({
+ editor,
+ anchorElem,
+ isLink,
+ isBold,
+ isItalic,
+ isUnderline,
+ isCode,
+ isStrikethrough,
+ isSubscript,
+ isSuperscript,
+ setIsLinkEditMode,
+}: {
+ editor: LexicalEditor;
+ anchorElem: HTMLElement;
+ isBold: boolean;
+ isCode: boolean;
+ isItalic: boolean;
+ isLink: boolean;
+ isStrikethrough: boolean;
+ isSubscript: boolean;
+ isSuperscript: boolean;
+ isUnderline: boolean;
+ setIsLinkEditMode: Dispatch;
+}): JSX.Element {
+ const popupCharStylesEditorRef = useRef(null);
+
+ const insertLink = useCallback(() => {
+ if (!isLink) {
+ setIsLinkEditMode(true);
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
+ } else {
+ setIsLinkEditMode(false);
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+ }
+ }, [editor, isLink, setIsLinkEditMode]);
+
+ const insertComment = () => {
+ editor.dispatchCommand(INSERT_INLINE_COMMAND, undefined);
+ };
+
+ function mouseMoveListener(e: MouseEvent) {
+ if (
+ popupCharStylesEditorRef?.current &&
+ (e.buttons === 1 || e.buttons === 3)
+ ) {
+ if (popupCharStylesEditorRef.current.style.pointerEvents !== 'none') {
+ const x = e.clientX;
+ const y = e.clientY;
+ const elementUnderMouse = document.elementFromPoint(x, y);
+
+ if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
+ // Mouse is not over the target element => not a normal click, but probably a drag
+ popupCharStylesEditorRef.current.style.pointerEvents = 'none';
+ }
+ }
+ }
+ }
+ function mouseUpListener(e: MouseEvent) {
+ if (popupCharStylesEditorRef?.current) {
+ if (popupCharStylesEditorRef.current.style.pointerEvents !== 'auto') {
+ popupCharStylesEditorRef.current.style.pointerEvents = 'auto';
+ }
+ }
+ }
+
+ useEffect(() => {
+ if (popupCharStylesEditorRef?.current) {
+ document.addEventListener('mousemove', mouseMoveListener);
+ document.addEventListener('mouseup', mouseUpListener);
+
+ return () => {
+ document.removeEventListener('mousemove', mouseMoveListener);
+ document.removeEventListener('mouseup', mouseUpListener);
+ };
+ }
+ }, [popupCharStylesEditorRef]);
+
+ const $updateTextFormatFloatingToolbar = useCallback(() => {
+ const selection = $getSelection();
+
+ const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+ const nativeSelection = window.getSelection();
+
+ if (popupCharStylesEditorElem === null) {
+ return;
+ }
+
+ const rootElement = editor.getRootElement();
+ if (
+ selection !== null &&
+ nativeSelection !== null &&
+ !nativeSelection.isCollapsed &&
+ rootElement !== null &&
+ rootElement.contains(nativeSelection.anchorNode)
+ ) {
+ const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
+
+ setFloatingElemPosition(
+ rangeRect,
+ popupCharStylesEditorElem,
+ anchorElem,
+ isLink,
+ );
+ }
+ }, [editor, anchorElem, isLink]);
+
+ useEffect(() => {
+ const scrollerElem = anchorElem.parentElement;
+
+ const update = () => {
+ editor.getEditorState().read(() => {
+ $updateTextFormatFloatingToolbar();
+ });
+ };
+
+ window.addEventListener('resize', update);
+ if (scrollerElem) {
+ scrollerElem.addEventListener('scroll', update);
+ }
+
+ return () => {
+ window.removeEventListener('resize', update);
+ if (scrollerElem) {
+ scrollerElem.removeEventListener('scroll', update);
+ }
+ };
+ }, [editor, $updateTextFormatFloatingToolbar, anchorElem]);
+
+ useEffect(() => {
+ editor.getEditorState().read(() => {
+ $updateTextFormatFloatingToolbar();
+ });
+ return mergeRegister(
+ editor.registerUpdateListener(({editorState}) => {
+ editorState.read(() => {
+ $updateTextFormatFloatingToolbar();
+ });
+ }),
+
+ editor.registerCommand(
+ SELECTION_CHANGE_COMMAND,
+ () => {
+ $updateTextFormatFloatingToolbar();
+ return false;
+ },
+ COMMAND_PRIORITY_LOW,
+ ),
+ );
+ }, [editor, $updateTextFormatFloatingToolbar]);
+
+ return (
+ ,
+): JSX.Element | null {
+ const [isText, setIsText] = useState(false);
+ const [isLink, setIsLink] = useState(false);
+ const [isBold, setIsBold] = useState(false);
+ const [isItalic, setIsItalic] = useState(false);
+ const [isUnderline, setIsUnderline] = useState(false);
+ const [isStrikethrough, setIsStrikethrough] = useState(false);
+ const [isSubscript, setIsSubscript] = useState(false);
+ const [isSuperscript, setIsSuperscript] = useState(false);
+ const [isCode, setIsCode] = useState(false);
+
+ const updatePopup = useCallback(() => {
+ editor.getEditorState().read(() => {
+ // Should not to pop up the floating toolbar when using IME input
+ if (editor.isComposing()) {
+ return;
+ }
+ const selection = $getSelection();
+ const nativeSelection = window.getSelection();
+ const rootElement = editor.getRootElement();
+
+ if (
+ nativeSelection !== null &&
+ (!$isRangeSelection(selection) ||
+ rootElement === null ||
+ !rootElement.contains(nativeSelection.anchorNode))
+ ) {
+ setIsText(false);
+ return;
+ }
+
+ if (!$isRangeSelection(selection)) {
+ return;
+ }
+
+ const node = getSelectedNode(selection);
+
+ // Update text format
+ setIsBold(selection.hasFormat('bold'));
+ setIsItalic(selection.hasFormat('italic'));
+ setIsUnderline(selection.hasFormat('underline'));
+ setIsStrikethrough(selection.hasFormat('strikethrough'));
+ setIsSubscript(selection.hasFormat('subscript'));
+ setIsSuperscript(selection.hasFormat('superscript'));
+ setIsCode(selection.hasFormat('code'));
+
+ // Update links
+ const parent = node.getParent();
+ if ($isLinkNode(parent) || $isLinkNode(node)) {
+ setIsLink(true);
+ } else {
+ setIsLink(false);
+ }
+
+ if (
+ !$isCodeHighlightNode(selection.anchor.getNode()) &&
+ selection.getTextContent() !== ''
+ ) {
+ setIsText($isTextNode(node) || $isParagraphNode(node));
+ } else {
+ setIsText(false);
+ }
+
+ const rawTextContent = selection.getTextContent().replace(/\n/g, '');
+ if (!selection.isCollapsed() && rawTextContent === '') {
+ setIsText(false);
+ return;
+ }
+ });
+ }, [editor]);
+
+ useEffect(() => {
+ document.addEventListener('selectionchange', updatePopup);
+ return () => {
+ document.removeEventListener('selectionchange', updatePopup);
+ };
+ }, [updatePopup]);
+
+ useEffect(() => {
+ return mergeRegister(
+ editor.registerUpdateListener(() => {
+ updatePopup();
+ }),
+ editor.registerRootListener(() => {
+ if (editor.getRootElement() === null) {
+ setIsText(false);
+ }
+ }),
+ );
+ }, [editor, updatePopup]);
+
+ if (!isText) {
+ return null;
+ }
+
+ return createPortal(
+ ;
+}): JSX.Element | null {
+ const [editor] = useLexicalComposerContext();
+ return useFloatingTextFormatToolbar(editor, anchorElem, setIsLinkEditMode);
+}
diff --git a/src/components/LexicalEditor/plugins/ImagesPlugin/index.tsx b/src/components/LexicalEditor/plugins/ImagesPlugin/index.tsx
new file mode 100644
index 0000000..b9b2c0d
--- /dev/null
+++ b/src/components/LexicalEditor/plugins/ImagesPlugin/index.tsx
@@ -0,0 +1,393 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {$wrapNodeInElement, mergeRegister} from '@lexical/utils';
+import {
+ $createParagraphNode,
+ $createRangeSelection,
+ $getSelection,
+ $insertNodes,
+ $isNodeSelection,
+ $isRootOrShadowRoot,
+ $setSelection,
+ COMMAND_PRIORITY_EDITOR,
+ COMMAND_PRIORITY_HIGH,
+ COMMAND_PRIORITY_LOW,
+ createCommand,
+ DRAGOVER_COMMAND,
+ DRAGSTART_COMMAND,
+ DROP_COMMAND,
+ LexicalCommand,
+ LexicalEditor,
+} from 'lexical';
+import {useEffect, useRef, useState} from 'react';
+import * as React from 'react';
+// import {CAN_USE_DOM} from '../../shared/canUseDOM';
+
+// import landscapeImage from '../../images/landscape.jpg';
+// import yellowFlowerImage from '../../images/yellow-flower.jpg';
+import {
+ $createImageNode,
+ $isImageNode,
+ ImageNode,
+ ImagePayload,
+} from '../../nodes/ImageNode';
+import Button from '../../ui/Button';
+import {DialogActions, DialogButtonsList} from '../../ui/Dialog';
+import FileInput from '../../ui/FileInput';
+import TextInput from '../../ui/TextInput';
+
+export type InsertImagePayload = Readonly;
+
+// const getDOMSelection = (targetWindow: Window | null): Selection | null =>
+// CAN_USE_DOM ? (targetWindow || window).getSelection() : null;
+const getDOMSelection = (targetWindow: Window | null): Selection | null =>
+ (targetWindow || window).getSelection();
+
+export const INSERT_IMAGE_COMMAND: LexicalCommand =
+ createCommand('INSERT_IMAGE_COMMAND');
+
+export function InsertImageUriDialogBody({
+ onClick,
+}: {
+ onClick: (payload: InsertImagePayload) => void;
+}) {
+ const [src, setSrc] = useState('');
+ const [altText, setAltText] = useState('');
+
+ const isDisabled = src === '';
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export function InsertImageUploadedDialogBody({
+ onClick,
+}: {
+ onClick: (payload: InsertImagePayload) => void;
+}) {
+ const [src, setSrc] = useState('');
+ const [altText, setAltText] = useState('');
+
+ const isDisabled = src === '';
+
+ const loadImage = (files: FileList | null) => {
+ const reader = new FileReader();
+ reader.onload = function () {
+ if (typeof reader.result === 'string') {
+ setSrc(reader.result);
+ }
+ return '';
+ };
+ if (files !== null) {
+ reader.readAsDataURL(files[0]);
+ }
+ };
+
+ return (
+ <>
+
+
+
+
+ );
+}
+
+export function InsertImageDialog({
+ activeEditor,
+ onClose,
+}: {
+ activeEditor: LexicalEditor;
+ onClose: () => void;
+}): JSX.Element {
+ const [mode, setMode] = useState(null);
+ const hasModifier = useRef(false);
+
+ useEffect(() => {
+ hasModifier.current = false;
+ const handler = (e: KeyboardEvent) => {
+ hasModifier.current = e.altKey;
+ };
+ document.addEventListener('keydown', handler);
+ return () => {
+ document.removeEventListener('keydown', handler);
+ };
+ }, [activeEditor]);
+
+ const onClick = (payload: InsertImagePayload) => {
+ activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
+ onClose();
+ };
+
+ return (
+ <>
+ {!mode && (
+
+ {/* */}
+
+
+
+ )}
+ {mode === 'url' && (
+ INSERT_IMAGE_COMMAND,
+ (payload) => {
+ const imageNode = $createImageNode(payload);
+ $insertNodes([imageNode]);
+ if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
+ $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
+ }
+
+ return true;
+ },
+ COMMAND_PRIORITY_EDITOR,
+ ),
+ editor.registerCommand(
+ DRAGSTART_COMMAND,
+ (event) => {
+ return $onDragStart(event);
+ },
+ COMMAND_PRIORITY_HIGH,
+ ),
+ editor.registerCommand(
+ DRAGOVER_COMMAND,
+ (event) => {
+ return $onDragover(event);
+ },
+ COMMAND_PRIORITY_LOW,
+ ),
+ editor.registerCommand(
+ DROP_COMMAND,
+ (event) => {
+ return $onDrop(event, editor);
+ },
+ COMMAND_PRIORITY_HIGH,
+ ),
+ );
+ }, [captionsEnabled, editor]);
+
+ return null;
+}
+
+const TRANSPARENT_IMAGE =
+ 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+const img = document.createElement('img');
+img.src = TRANSPARENT_IMAGE;
+
+function $onDragStart(event: DragEvent): boolean {
+ const node = $getImageNodeInSelection();
+ if (!node) {
+ return false;
+ }
+ const dataTransfer = event.dataTransfer;
+ if (!dataTransfer) {
+ return false;
+ }
+ dataTransfer.setData('text/plain', '_');
+ dataTransfer.setDragImage(img, 0, 0);
+ dataTransfer.setData(
+ 'application/x-lexical-drag',
+ JSON.stringify({
+ data: {
+ altText: node.__altText,
+ caption: node.__caption,
+ height: node.__height,
+ key: node.getKey(),
+ maxWidth: node.__maxWidth,
+ showCaption: node.__showCaption,
+ src: node.__src,
+ width: node.__width,
+ },
+ type: 'image',
+ }),
+ );
+
+ return true;
+}
+
+function $onDragover(event: DragEvent): boolean {
+ const node = $getImageNodeInSelection();
+ if (!node) {
+ return false;
+ }
+ if (!canDropImage(event)) {
+ event.preventDefault();
+ }
+ return true;
+}
+
+function $onDrop(event: DragEvent, editor: LexicalEditor): boolean {
+ const node = $getImageNodeInSelection();
+ if (!node) {
+ return false;
+ }
+ const data = getDragImageData(event);
+ if (!data) {
+ return false;
+ }
+ event.preventDefault();
+ if (canDropImage(event)) {
+ const range = getDragSelection(event);
+ node.remove();
+ const rangeSelection = $createRangeSelection();
+ if (range !== null && range !== undefined) {
+ rangeSelection.applyDOMRange(range);
+ }
+ $setSelection(rangeSelection);
+ editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
+ }
+ return true;
+}
+
+function $getImageNodeInSelection(): ImageNode | null {
+ const selection = $getSelection();
+ if (!$isNodeSelection(selection)) {
+ return null;
+ }
+ const nodes = selection.getNodes();
+ const node = nodes[0];
+ return $isImageNode(node) ? node : null;
+}
+
+function getDragImageData(event: DragEvent): null | InsertImagePayload {
+ const dragData = event.dataTransfer?.getData('application/x-lexical-drag');
+ if (!dragData) {
+ return null;
+ }
+ const {type, data} = JSON.parse(dragData);
+ if (type !== 'image') {
+ return null;
+ }
+
+ return data;
+}
+
+declare global {
+ interface DragEvent {
+ rangeOffset?: number;
+ rangeParent?: Node;
+ }
+}
+
+function canDropImage(event: DragEvent): boolean {
+ const target = event.target;
+ return !!(
+ target &&
+ target instanceof HTMLElement &&
+ !target.closest('code, span.editor-image') &&
+ target.parentElement &&
+ target.parentElement.closest('div.ContentEditable__root')
+ );
+}
+
+function getDragSelection(event: DragEvent): Range | null | undefined {
+ let range;
+ const target = event.target as null | Element | Document;
+ const targetWindow =
+ target == null
+ ? null
+ : target.nodeType === 9
+ ? (target as Document).defaultView
+ : (target as Element).ownerDocument.defaultView;
+ const domSelection = getDOMSelection(targetWindow);
+ if (document.caretRangeFromPoint) {
+ range = document.caretRangeFromPoint(event.clientX, event.clientY);
+ } else if (event.rangeParent && domSelection !== null) {
+ domSelection.collapse(event.rangeParent, event.rangeOffset || 0);
+ range = domSelection.getRangeAt(0);
+ } else {
+ throw Error(`Cannot get the selection when dragging`);
+ }
+
+ return range;
+}
diff --git a/src/components/LexicalEditor/plugins/LinkPlugin/index.tsx b/src/components/LexicalEditor/plugins/LinkPlugin/index.tsx
new file mode 100644
index 0000000..1f3dc43
--- /dev/null
+++ b/src/components/LexicalEditor/plugins/LinkPlugin/index.tsx
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {LinkPlugin as LexicalLinkPlugin} from '@lexical/react/LexicalLinkPlugin';
+import * as React from 'react';
+
+import {validateUrl} from '../../utils/url';
+
+export default function LinkPlugin(): JSX.Element {
+ return
event.preventDefault()}
+ onClick={() => {
+ setEditedLinkUrl(linkUrl);
+ setIsLinkEditMode(true);
+ }}
+ />
+
+ );
+}
+
+function useFloatingLinkEditorToolbar(
+ editor: LexicalEditor,
+ anchorElem: HTMLElement,
+ isLinkEditMode: boolean,
+ setIsLinkEditMode: Dispatch event.preventDefault()}
+ onClick={() => {
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+ }}
+ />
+
+ )}
+
+ {editor.isEditable() && (
+ <>
+
+
+
+
+
+
+
+
+
+ )}
+
+
+ );
+}
+
+function useFloatingTextFormatToolbar(
+ editor: LexicalEditor,
+ anchorElem: HTMLElement,
+ setIsLinkEditMode: Dispatch
+ {isEditMode ? (
+ {
+ setLinkUrl(event.target.value);
+ }}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter') {
+ event.preventDefault();
+ if (lastSelection !== null) {
+ if (linkUrl !== '') {
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, linkUrl);
+ }
+ setEditMode(false);
+ }
+ } else if (event.key === 'Escape') {
+ event.preventDefault();
+ setEditMode(false);
+ }
+ }}
+ />
+ ) : (
+ <>
+ ) => void;
+};
+
+const DropDownContext = React.createContext(null);
+
+const dropDownPadding = 4;
+
+export function DropDownItem({
+ children,
+ className,
+ onClick,
+ title,
+}: {
+ children: React.ReactNode;
+ className: string;
+ onClick: (event: React.MouseEvent) => void;
+ title?: string;
+}) {
+ const ref = useRef(null);
+
+ const dropDownContext = React.useContext(DropDownContext);
+
+ if (dropDownContext === null) {
+ throw new Error('DropDownItem must be used within a DropDown');
+ }
+
+ const {registerItem} = dropDownContext;
+
+ useEffect(() => {
+ if (ref && ref.current) {
+ registerItem(ref);
+ }
+ }, [ref, registerItem]);
+
+ return (
+
+ );
+}
+
+function DropDownItems({
+ children,
+ dropDownRef,
+ onClose,
+}: {
+ children: React.ReactNode;
+ dropDownRef: React.Ref;
+ onClose: () => void;
+}) {
+ const [items, setItems] = useState[]>();
+ const [highlightedItem, setHighlightedItem] =
+ useState>();
+
+ const registerItem = useCallback(
+ (itemRef: React.RefObject) => {
+ setItems((prev) => (prev ? [...prev, itemRef] : [itemRef]));
+ },
+ [setItems],
+ );
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ if (!items) {
+ return;
+ }
+
+ const key = event.key;
+
+ if (['Escape', 'ArrowUp', 'ArrowDown', 'Tab'].includes(key)) {
+ event.preventDefault();
+ }
+
+ if (key === 'Escape' || key === 'Tab') {
+ onClose();
+ } else if (key === 'ArrowUp') {
+ setHighlightedItem((prev) => {
+ if (!prev) {
+ return items[0];
+ }
+ const index = items.indexOf(prev) - 1;
+ return items[index === -1 ? items.length - 1 : index];
+ });
+ } else if (key === 'ArrowDown') {
+ setHighlightedItem((prev) => {
+ if (!prev) {
+ return items[0];
+ }
+ return items[items.indexOf(prev) + 1];
+ });
+ }
+ };
+
+ const contextValue = useMemo(
+ () => ({
+ registerItem,
+ }),
+ [registerItem],
+ );
+
+ useEffect(() => {
+ if (items && !highlightedItem) {
+ setHighlightedItem(items[0]);
+ }
+
+ if (highlightedItem && highlightedItem.current) {
+ highlightedItem.current.focus();
+ }
+ }, [items, highlightedItem]);
+
+ return (
+
+
+ );
+}
+
+export default function DropDown({
+ disabled = false,
+ buttonLabel,
+ buttonAriaLabel,
+ buttonClassName,
+ buttonIconClassName,
+ children,
+ stopCloseOnClickSelf,
+}: {
+ disabled?: boolean;
+ buttonAriaLabel?: string;
+ buttonClassName: string;
+ buttonIconClassName?: string;
+ buttonLabel?: string;
+ children: ReactNode;
+ stopCloseOnClickSelf?: boolean;
+}): JSX.Element {
+ const dropDownRef = useRef(null);
+ const buttonRef = useRef(null);
+ const [showDropDown, setShowDropDown] = useState(false);
+
+ const handleClose = () => {
+ setShowDropDown(false);
+ if (buttonRef && buttonRef.current) {
+ buttonRef.current.focus();
+ }
+ };
+
+ useEffect(() => {
+ const button = buttonRef.current;
+ const dropDown = dropDownRef.current;
+
+ if (showDropDown && button !== null && dropDown !== null) {
+ const {top, left} = button.getBoundingClientRect();
+ dropDown.style.top = `${top + button.offsetHeight + dropDownPadding}px`;
+ dropDown.style.left = `${Math.min(
+ left,
+ window.innerWidth - dropDown.offsetWidth - 20,
+ )}px`;
+ }
+ }, [dropDownRef, buttonRef, showDropDown]);
+
+ useEffect(() => {
+ const button = buttonRef.current;
+
+ if (button !== null && showDropDown) {
+ const handle = (event: MouseEvent) => {
+ const target = event.target;
+ if (stopCloseOnClickSelf) {
+ if (
+ dropDownRef.current &&
+ dropDownRef.current.contains(target as Node)
+ ) {
+ return;
+ }
+ }
+ if (!button.contains(target as Node)) {
+ setShowDropDown(false);
+ }
+ };
+ document.addEventListener('click', handle);
+
+ return () => {
+ document.removeEventListener('click', handle);
+ };
+ }
+ }, [dropDownRef, buttonRef, showDropDown, stopCloseOnClickSelf]);
+
+ useEffect(() => {
+ const handleButtonPositionUpdate = () => {
+ if (showDropDown) {
+ const button = buttonRef.current;
+ const dropDown = dropDownRef.current;
+ if (button !== null && dropDown !== null) {
+ const {top} = button.getBoundingClientRect();
+ const newPosition = top + button.offsetHeight + dropDownPadding;
+ if (newPosition !== dropDown.getBoundingClientRect().top) {
+ dropDown.style.top = `${newPosition}px`;
+ }
+ }
+ }
+ };
+
+ document.addEventListener('scroll', handleButtonPositionUpdate);
+
+ return () => {
+ document.removeEventListener('scroll', handleButtonPositionUpdate);
+ };
+ }, [buttonRef, dropDownRef, showDropDown]);
+
+ return (
+ <>
+
+
+ {showDropDown &&
+ createPortal(
+
+ {children}
+ ,
+ document.body,
+ )}
+
+ );
+}
diff --git a/src/components/LexicalEditor/ui/DropdownColorPicker.tsx b/src/components/LexicalEditor/ui/DropdownColorPicker.tsx
new file mode 100644
index 0000000..e3647c3
--- /dev/null
+++ b/src/components/LexicalEditor/ui/DropdownColorPicker.tsx
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import * as React from 'react';
+
+import ColorPicker from './ColorPicker';
+import DropDown from './DropDown';
+
+type Props = {
+ disabled?: boolean;
+ buttonAriaLabel?: string;
+ buttonClassName: string;
+ buttonIconClassName?: string;
+ buttonLabel?: string;
+ title?: string;
+ stopCloseOnClickSelf?: boolean;
+ color: string;
+ onChange?: (color: string, skipHistoryStack: boolean) => void;
+};
+
+export default function DropdownColorPicker({
+ disabled = false,
+ stopCloseOnClickSelf = true,
+ color,
+ onChange,
+ ...rest
+}: Props) {
+ return (
+
+
+ );
+}
diff --git a/src/components/LexicalEditor/ui/FileInput.tsx b/src/components/LexicalEditor/ui/FileInput.tsx
new file mode 100644
index 0000000..465330b
--- /dev/null
+++ b/src/components/LexicalEditor/ui/FileInput.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import './Input.css';
+
+import * as React from 'react';
+
+type Props = Readonly<{
+ 'data-test-id'?: string;
+ accept?: string;
+ label: string;
+ onChange: (files: FileList | null) => void;
+}>;
+
+export default function FileInput({
+ accept,
+ label,
+ onChange,
+ 'data-test-id': dataTestId,
+}: Props): JSX.Element {
+ return (
+ (null);
+ const userSelect = useRef({
+ priority: '',
+ value: 'default',
+ });
+ const positioningRef = useRef<{
+ currentHeight: 'inherit' | number;
+ currentWidth: 'inherit' | number;
+ direction: number;
+ isResizing: boolean;
+ ratio: number;
+ startHeight: number;
+ startWidth: number;
+ startX: number;
+ startY: number;
+ }>({
+ currentHeight: 0,
+ currentWidth: 0,
+ direction: 0,
+ isResizing: false,
+ ratio: 0,
+ startHeight: 0,
+ startWidth: 0,
+ startX: 0,
+ startY: 0,
+ });
+ const editorRootElement = editor.getRootElement();
+ // Find max width, accounting for editor padding.
+ const maxWidthContainer = maxWidth
+ ? maxWidth
+ : editorRootElement !== null
+ ? editorRootElement.getBoundingClientRect().width - 20
+ : 100;
+ const maxHeightContainer =
+ editorRootElement !== null
+ ? editorRootElement.getBoundingClientRect().height - 20
+ : 100;
+
+ const minWidth = 100;
+ const minHeight = 100;
+
+ const setStartCursor = (direction: number) => {
+ const ew = direction === Direction.east || direction === Direction.west;
+ const ns = direction === Direction.north || direction === Direction.south;
+ const nwse =
+ (direction & Direction.north && direction & Direction.west) ||
+ (direction & Direction.south && direction & Direction.east);
+
+ const cursorDir = ew ? 'ew' : ns ? 'ns' : nwse ? 'nwse' : 'nesw';
+
+ if (editorRootElement !== null) {
+ editorRootElement.style.setProperty(
+ 'cursor',
+ `${cursorDir}-resize`,
+ 'important',
+ );
+ }
+ if (document.body !== null) {
+ document.body.style.setProperty(
+ 'cursor',
+ `${cursorDir}-resize`,
+ 'important',
+ );
+ userSelect.current.value = document.body.style.getPropertyValue(
+ '-webkit-user-select',
+ );
+ userSelect.current.priority = document.body.style.getPropertyPriority(
+ '-webkit-user-select',
+ );
+ document.body.style.setProperty(
+ '-webkit-user-select',
+ `none`,
+ 'important',
+ );
+ }
+ };
+
+ const setEndCursor = () => {
+ if (editorRootElement !== null) {
+ editorRootElement.style.setProperty('cursor', 'text');
+ }
+ if (document.body !== null) {
+ document.body.style.setProperty('cursor', 'default');
+ document.body.style.setProperty(
+ '-webkit-user-select',
+ userSelect.current.value,
+ userSelect.current.priority,
+ );
+ }
+ };
+
+ const handlePointerDown = (
+ event: React.PointerEvent,
+ direction: number,
+ ) => {
+ if (!editor.isEditable()) {
+ return;
+ }
+
+ const image = imageRef.current;
+ const controlWrapper = controlWrapperRef.current;
+
+ if (image !== null && controlWrapper !== null) {
+ event.preventDefault();
+ const {width, height} = image.getBoundingClientRect();
+ const zoom = calculateZoomLevel(image);
+ const positioning = positioningRef.current;
+ positioning.startWidth = width;
+ positioning.startHeight = height;
+ positioning.ratio = width / height;
+ positioning.currentWidth = width;
+ positioning.currentHeight = height;
+ positioning.startX = event.clientX / zoom;
+ positioning.startY = event.clientY / zoom;
+ positioning.isResizing = true;
+ positioning.direction = direction;
+
+ setStartCursor(direction);
+ onResizeStart();
+
+ controlWrapper.classList.add('image-control-wrapper--resizing');
+ image.style.height = `${height}px`;
+ image.style.width = `${width}px`;
+
+ document.addEventListener('pointermove', handlePointerMove);
+ document.addEventListener('pointerup', handlePointerUp);
+ }
+ };
+ const handlePointerMove = (event: PointerEvent) => {
+ const image = imageRef.current;
+ const positioning = positioningRef.current;
+
+ const isHorizontal =
+ positioning.direction & (Direction.east | Direction.west);
+ const isVertical =
+ positioning.direction & (Direction.south | Direction.north);
+
+ if (image !== null && positioning.isResizing) {
+ const zoom = calculateZoomLevel(image);
+ // Corner cursor
+ if (isHorizontal && isVertical) {
+ let diff = Math.floor(positioning.startX - event.clientX / zoom);
+ diff = positioning.direction & Direction.east ? -diff : diff;
+
+ const width = clamp(
+ positioning.startWidth + diff,
+ minWidth,
+ maxWidthContainer,
+ );
+
+ const height = width / positioning.ratio;
+ image.style.width = `${width}px`;
+ image.style.height = `${height}px`;
+ positioning.currentHeight = height;
+ positioning.currentWidth = width;
+ } else if (isVertical) {
+ let diff = Math.floor(positioning.startY - event.clientY / zoom);
+ diff = positioning.direction & Direction.south ? -diff : diff;
+
+ const height = clamp(
+ positioning.startHeight + diff,
+ minHeight,
+ maxHeightContainer,
+ );
+
+ image.style.height = `${height}px`;
+ positioning.currentHeight = height;
+ } else {
+ let diff = Math.floor(positioning.startX - event.clientX / zoom);
+ diff = positioning.direction & Direction.east ? -diff : diff;
+
+ const width = clamp(
+ positioning.startWidth + diff,
+ minWidth,
+ maxWidthContainer,
+ );
+
+ image.style.width = `${width}px`;
+ positioning.currentWidth = width;
+ }
+ }
+ };
+ const handlePointerUp = () => {
+ const image = imageRef.current;
+ const positioning = positioningRef.current;
+ const controlWrapper = controlWrapperRef.current;
+ if (image !== null && controlWrapper !== null && positioning.isResizing) {
+ const width = positioning.currentWidth;
+ const height = positioning.currentHeight;
+ positioning.startWidth = 0;
+ positioning.startHeight = 0;
+ positioning.ratio = 0;
+ positioning.startX = 0;
+ positioning.startY = 0;
+ positioning.currentWidth = 0;
+ positioning.currentHeight = 0;
+ positioning.isResizing = false;
+
+ controlWrapper.classList.remove('image-control-wrapper--resizing');
+
+ setEndCursor();
+ onResizeEnd(width, height);
+
+ document.removeEventListener('pointermove', handlePointerMove);
+ document.removeEventListener('pointerup', handlePointerUp);
+ }
+ };
+ return (
+
+
+ {linkUrl}
+
+
+ {(style === 'font-family' ? FONT_FAMILY_OPTIONS : FONT_SIZE_OPTIONS).map(([option, text]) => (
+ handleClick(option)}
+ key={option}>
+ {text}
+
+ ))}
+
+ );
+}
+
+function ElementFormatDropdown({ editor, value, isRTL, disabled = false }) {
+ const formatOption = ELEMENT_FORMAT_OPTIONS[value || 'left'];
+
+ return (
+
+ {
+ editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left');
+ }}
+ className='item'>
+
+ Left Align
+
+ {
+ editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center');
+ }}
+ className='item'>
+
+ Center Align
+
+ {
+ editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right');
+ }}
+ className='item'>
+
+ Right Align
+
+ {
+ editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify');
+ }}
+ className='item'>
+
+ Justify Align
+
+ {
+ editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'start');
+ }}
+ className='item'>
+
+ Start Align
+
+ {
+ editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'end');
+ }}
+ className='item'>
+
+ End Align
+
+ {
+ editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined);
+ }}
+ className='item'>
+
+ Outdent (Shift+Tab)
+
+ {
+ editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined);
+ }}
+ className='item'>
+
+ Indent (Tab)
+
+
+ );
+}
+
+export default function ToolbarPlugin() {
+ const [editor] = useLexicalComposerContext();
+ const toolbarRef = useRef(null);
+ const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+ const [canUndo, setCanUndo] = useState(false);
+ const [canRedo, setCanRedo] = useState(false);
+ const [blockType, setBlockType] = useState('paragraph');
+ const [selectedElementKey, setSelectedElementKey] = useState(null);
+ const [showBlockOptionsDropDown, setShowBlockOptionsDropDown] = useState(false);
+ const [codeLanguage, setCodeLanguage] = useState('');
+ const [isRTL, setIsRTL] = useState(false);
+ const [isLink, setIsLink] = useState(false);
+ const [isBold, setIsBold] = useState(false);
+ const [isItalic, setIsItalic] = useState(false);
+ const [isUnderline, setIsUnderline] = useState(false);
+ const [isStrikethrough, setIsStrikethrough] = useState(false);
+ const [isCode, setIsCode] = useState(false);
+ const [fontFamily, setFontFamily] = useState('Arial');
+ const [fontColor, setFontColor] = useState('#000');
+ const [bgColor, setBgColor] = useState('#fff');
+ const [elementFormat, setElementFormat] = useState('left');
+
+ const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+ const [isSmallWidthViewport, setIsSmallWidthViewport] = useState(false);
+
+ const applyStyleText = useCallback(
+ (styles, skipHistoryStack = null) => {
+ editor.update(
+ () => {
+ const selection = $getSelection();
+ if (selection !== null) {
+ $patchStyleText(selection, styles);
+ }
+ },
+ skipHistoryStack ? { tag: 'historic' } : {}
+ );
+ },
+ [editor]
+ );
+
+ const onFontColorSelect = useCallback(
+ (value, skipHistoryStack) => {
+ applyStyleText({ color: value }, skipHistoryStack);
+ },
+ [applyStyleText]
+ );
+ const onBgColorSelect = useCallback(
+ (value, skipHistoryStack) => {
+ applyStyleText({ 'background-color': value }, skipHistoryStack);
+ },
+ [applyStyleText]
+ );
+
+ const updateToolbar = useCallback(() => {
+ const selection = $getSelection();
+ if ($isRangeSelection(selection)) {
+ const anchorNode = selection.anchor.getNode();
+ const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
+ const elementKey = element.getKey();
+ const elementDOM = editor.getElementByKey(elementKey);
+ if (elementDOM !== null) {
+ setSelectedElementKey(elementKey);
+ if ($isListNode(element)) {
+ const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+ const type = parentList ? parentList.getTag() : element.getTag();
+ setBlockType(type);
+ } else {
+ const type = $isHeadingNode(element) ? element.getTag() : element.getType();
+ setBlockType(type);
+ if ($isCodeNode(element)) {
+ setCodeLanguage(element.getLanguage() || getDefaultCodeLanguage());
+ }
+ }
+ }
+ // Update text format
+ setIsBold(selection.hasFormat('bold'));
+ setIsItalic(selection.hasFormat('italic'));
+ setIsUnderline(selection.hasFormat('underline'));
+ setIsStrikethrough(selection.hasFormat('strikethrough'));
+ setIsCode(selection.hasFormat('code'));
+ setIsRTL($isParentElementRTL(selection));
+
+ // Update links
+ const node = getSelectedNode(selection);
+ const parent = node.getParent();
+ if ($isLinkNode(parent) || $isLinkNode(node)) {
+ setIsLink(true);
+ } else {
+ setIsLink(false);
+ }
+
+ // Handle buttons
+ setFontColor($getSelectionStyleValueForProperty(selection, 'color', '#000'));
+ setBgColor(
+ $getSelectionStyleValueForProperty(
+ selection,
+ 'background-color',
+ '#fff',
+ ),
+ );
+ setFontFamily(
+ $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial'),
+ );
+ let matchingParent;
+ if ($isLinkNode(parent)) {
+ // If node is a link, we need to fetch the parent paragraph node to set format
+ matchingParent = $findMatchingParent(node, (parentNode) => $isElementNode(parentNode) && !parentNode.isInline());
+ }
+ // If matchingParent is a valid node, pass it's format type
+ setElementFormat($isElementNode(matchingParent) ? matchingParent.getFormatType() : $isElementNode(node) ? node.getFormatType() : parent?.getFormatType() || 'left');
+ }
+ }, [editor]);
+
+ useEffect(() => {
+ return mergeRegister(
+ editor.registerUpdateListener(({ editorState }) => {
+ editorState.read(() => {
+ updateToolbar();
+ });
+ }),
+ editor.registerCommand(
+ SELECTION_CHANGE_COMMAND,
+ (_payload, newEditor) => {
+ updateToolbar();
+ return false;
+ },
+ LowPriority
+ ),
+ editor.registerCommand(
+ CAN_UNDO_COMMAND,
+ (payload) => {
+ setCanUndo(payload);
+ return false;
+ },
+ LowPriority
+ ),
+ editor.registerCommand(
+ CAN_REDO_COMMAND,
+ (payload) => {
+ setCanRedo(payload);
+ return false;
+ },
+ LowPriority
+ )
+ );
+ }, [editor, updateToolbar]);
+
+ const codeLanguges = useMemo(() => getCodeLanguages(), []);
+ const onCodeLanguageSelect = useCallback(
+ (e) => {
+ editor.update(() => {
+ if (selectedElementKey !== null) {
+ const node = $getNodeByKey(selectedElementKey);
+ if ($isCodeNode(node)) {
+ node.setLanguage(e.target.value);
+ }
+ }
+ });
+ },
+ [editor, selectedElementKey]
+ );
+
+ const insertLink = useCallback(() => {
+ if (!isLink) {
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, 'https://');
+ } else {
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+ }
+ }, [editor, isLink]);
+
+ const insertHorizontalRule = useCallback(() => {
+ editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined);
+ }, [editor]);
+
+ return (
+
+): Array {
+ const rval = [];
+ for (const className of classNames) {
+ if (className && typeof className === 'string') {
+ for (const [s] of className.matchAll(/\S+/g)) {
+ rval.push(s);
+ }
+ }
+ }
+ return rval;
+}
diff --git a/src/components/LexicalEditor/shared/src/react-test-utils.ts b/src/components/LexicalEditor/shared/src/react-test-utils.ts
new file mode 100644
index 0000000..8e08674
--- /dev/null
+++ b/src/components/LexicalEditor/shared/src/react-test-utils.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import * as React from 'react';
+import * as ReactTestUtils from 'react-dom/test-utils';
+
+/**
+ * React 19 moved act from react-dom/test-utils to react
+ * https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-react-dom-test-utils
+ */
+export const act =
+ 'act' in React
+ ? (React.act as typeof ReactTestUtils.act)
+ : ReactTestUtils.act;
diff --git a/src/components/LexicalEditor/shared/src/reactPatches.ts b/src/components/LexicalEditor/shared/src/reactPatches.ts
new file mode 100644
index 0000000..9685cd8
--- /dev/null
+++ b/src/components/LexicalEditor/shared/src/reactPatches.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+
+// Webpack + React 17 fails to compile on the usage of `React.startTransition` or
+// `React["startTransition"]` even if it's behind a feature detection of
+// `"startTransition" in React`. Moving this to a constant avoids the issue :/
+const START_TRANSITION = 'startTransition';
+
+export function startTransition(callback: () => void) {
+ if (START_TRANSITION in React) {
+ React[START_TRANSITION](callback);
+ } else {
+ callback();
+ }
+}
diff --git a/src/components/LexicalEditor/shared/src/simpleDiffWithCursor.ts b/src/components/LexicalEditor/shared/src/simpleDiffWithCursor.ts
new file mode 100644
index 0000000..39f3d3b
--- /dev/null
+++ b/src/components/LexicalEditor/shared/src/simpleDiffWithCursor.ts
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default function simpleDiffWithCursor(
+ a: string,
+ b: string,
+ cursor: number,
+): {index: number; insert: string; remove: number} {
+ const aLength = a.length;
+ const bLength = b.length;
+ let left = 0; // number of same characters counting from left
+ let right = 0; // number of same characters counting from right
+ // Iterate left to the right until we find a changed character
+ // First iteration considers the current cursor position
+ while (
+ left < aLength &&
+ left < bLength &&
+ a[left] === b[left] &&
+ left < cursor
+ ) {
+ left++;
+ }
+ // Iterate right to the left until we find a changed character
+ while (
+ right + left < aLength &&
+ right + left < bLength &&
+ a[aLength - right - 1] === b[bLength - right - 1]
+ ) {
+ right++;
+ }
+ // Try to iterate left further to the right without caring about the current cursor position
+ while (
+ right + left < aLength &&
+ right + left < bLength &&
+ a[left] === b[left]
+ ) {
+ left++;
+ }
+ return {
+ index: left,
+ insert: b.slice(left, bLength - right),
+ remove: aLength - left - right,
+ };
+}
diff --git a/src/components/LexicalEditor/shared/src/useLayoutEffect.ts b/src/components/LexicalEditor/shared/src/useLayoutEffect.ts
new file mode 100644
index 0000000..05787b4
--- /dev/null
+++ b/src/components/LexicalEditor/shared/src/useLayoutEffect.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {useEffect, useLayoutEffect} from 'react';
+import {CAN_USE_DOM} from 'shared/canUseDOM';
+
+// This workaround is no longer necessary in React 19,
+// but we currently support React >=17.x
+// https://github.com/facebook/react/pull/26395
+const useLayoutEffectImpl: typeof useLayoutEffect = CAN_USE_DOM
+ ? useLayoutEffect
+ : useEffect;
+
+export default useLayoutEffectImpl;
diff --git a/src/components/LexicalEditor/shared/src/warnOnlyOnce.ts b/src/components/LexicalEditor/shared/src/warnOnlyOnce.ts
new file mode 100644
index 0000000..d29e99e
--- /dev/null
+++ b/src/components/LexicalEditor/shared/src/warnOnlyOnce.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default function warnOnlyOnce(message: string) {
+ if (!__DEV__) {
+ return;
+ }
+ let run = false;
+ return () => {
+ if (!run) {
+ console.warn(message);
+ }
+ run = true;
+ };
+}
diff --git a/src/components/LexicalEditor/shared/viteModuleResolution.ts b/src/components/LexicalEditor/shared/viteModuleResolution.ts
new file mode 100644
index 0000000..572e1e5
--- /dev/null
+++ b/src/components/LexicalEditor/shared/viteModuleResolution.ts
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {
+ ModuleExportEntry,
+ NpmModuleExportEntry,
+ PackageMetadata,
+} from '../../scripts/shared/PackageMetadata';
+
+import * as fs from 'node:fs';
+import {createRequire} from 'node:module';
+import * as path from 'node:path';
+
+const require = createRequire(import.meta.url);
+const {packagesManager} =
+ require('../../scripts/shared/packagesManager') as typeof import('../../scripts/shared/packagesManager');
+
+const sourceModuleResolution = () => {
+ function toAlias(pkg: PackageMetadata, entry: ModuleExportEntry) {
+ return {
+ find: entry.name,
+ replacement: pkg.resolve('src', entry.sourceFileName),
+ };
+ }
+
+ return [
+ ...packagesManager
+ .getPublicPackages()
+ .flatMap((pkg) =>
+ pkg.getExportedNpmModuleEntries().map(toAlias.bind(null, pkg)),
+ ),
+ ...['shared']
+ .map((name) => packagesManager.getPackageByDirectoryName(name))
+ .flatMap((pkg) =>
+ pkg.getPrivateModuleEntries().map(toAlias.bind(null, pkg)),
+ ),
+ ];
+};
+
+const distModuleResolution = (environment: 'development' | 'production') => {
+ return [
+ ...packagesManager.getPublicPackages().flatMap((pkg) =>
+ pkg
+ .getNormalizedNpmModuleExportEntries()
+ .map((entry: NpmModuleExportEntry) => {
+ const [name, moduleExports] = entry;
+ const replacements = ([environment, 'default'] as const).map(
+ (condition) => pkg.resolve('dist', moduleExports.import[condition]),
+ );
+ const replacement = replacements.find(fs.existsSync.bind(fs));
+ if (!replacement) {
+ throw new Error(
+ `ERROR: Missing ./${path.relative(
+ '../..',
+ replacements[1],
+ )}. Did you run \`npm run build\` in the monorepo first?`,
+ );
+ }
+ return {
+ find: name,
+ replacement,
+ };
+ }),
+ ),
+ ...[packagesManager.getPackageByDirectoryName('shared')].flatMap(
+ (pkg: PackageMetadata) =>
+ pkg.getPrivateModuleEntries().map((entry: ModuleExportEntry) => {
+ return {
+ find: entry.name,
+ replacement: pkg.resolve('src', entry.sourceFileName),
+ };
+ }),
+ ),
+ ];
+};
+
+export default function moduleResolution(
+ environment: 'source' | 'development' | 'production',
+) {
+ return environment === 'source'
+ ? sourceModuleResolution()
+ : distModuleResolution(environment);
+}
diff --git a/src/components/LexicalEditor/styles.css b/src/components/LexicalEditor/styles.css
new file mode 100644
index 0000000..1bae0f5
--- /dev/null
+++ b/src/components/LexicalEditor/styles.css
@@ -0,0 +1,873 @@
+/* body {
+ margin: 0;
+ background: #eee;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular",
+ sans-serif;
+ font-weight: 500;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale; */
+/* } */
+.editor-container{
+ margin: 0;
+ background: #eee;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular",
+ sans-serif;
+ font-weight: 500;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+.email-container{
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular",
+ sans-serif;
+ font-weight: 500;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+.other h2 {
+ font-size: 18px;
+ color: #444;
+ margin-bottom: 7px;
+}
+
+.other a {
+ color: #777;
+ text-decoration: underline;
+ font-size: 14px;
+}
+
+.other ul {
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+}
+
+/* .App {
+ font-family: sans-serif;
+ text-align: center;
+} */
+
+h1 {
+ font-size: 24px;
+ color: #333;
+}
+
+.ltr {
+ text-align: left;
+}
+
+.rtl {
+ text-align: right;
+}
+
+.editor-container {
+ margin: 0 auto 20px auto;
+ border-radius: 2px;
+ /* max-width: 600px; */
+ color: #000;
+ position: relative;
+ line-height: 20px;
+ font-weight: 400;
+ text-align: left;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+
+.editor-inner {
+ background: #fff;
+ position: relative;
+}
+
+.editor-input {
+ min-height: 150px;
+ resize: none;
+ font-size: 15px;
+ caret-color: rgb(5, 5, 5);
+ position: relative;
+ tab-size: 1;
+ outline: 0;
+ padding: 15px 10px;
+ caret-color: #444;
+}
+
+.editor-pure-input {
+ min-height: 150px;
+ resize: none;
+ font-size: 15px;
+ caret-color: rgb(5, 5, 5);
+ position: relative;
+ tab-size: 1;
+ outline: 0;
+ padding: 15px 10px;
+ caret-color: #444;
+}
+
+.editor-placeholder {
+ color: #999;
+ overflow: hidden;
+ position: absolute;
+ text-overflow: ellipsis;
+ top: 15px;
+ left: 10px;
+ font-size: 15px;
+ user-select: none;
+ display: inline-block;
+ pointer-events: none;
+}
+
+.editor-text-bold {
+ font-weight: bold;
+}
+
+.editor-text-italic {
+ font-style: italic;
+}
+
+.editor-text-underline {
+ text-decoration: underline;
+}
+
+.editor-text-strikethrough {
+ text-decoration: line-through;
+}
+
+.editor-text-underlineStrikethrough {
+ text-decoration: underline line-through;
+}
+
+.editor-text-code {
+ background-color: rgb(240, 242, 245);
+ padding: 1px 0.25rem;
+ font-family: Menlo, Consolas, Monaco, monospace;
+ font-size: 94%;
+}
+
+.editor-link {
+ color: rgb(33, 111, 219);
+ text-decoration: none;
+}
+.editor-link:hover{
+ text-decoration: underline;
+ cursor: pointer;
+}
+
+.tree-view-output {
+ display: block;
+ background: #222;
+ color: #fff;
+ padding: 5px;
+ font-size: 12px;
+ white-space: pre-wrap;
+ margin: 1px auto 10px auto;
+ max-height: 250px;
+ position: relative;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ overflow: auto;
+ line-height: 14px;
+}
+
+.editor-code {
+ background-color: rgb(240, 242, 245);
+ font-family: Menlo, Consolas, Monaco, monospace;
+ display: block;
+ padding: 8px 8px 8px 52px;
+ line-height: 1.53;
+ font-size: 13px;
+ margin: 0;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ tab-size: 2;
+ /* white-space: pre; */
+ overflow-x: auto;
+ position: relative;
+}
+
+.editor-code:before {
+ content: attr(data-gutter);
+ position: absolute;
+ background-color: #eee;
+ left: 0;
+ top: 0;
+ border-right: 1px solid #ccc;
+ padding: 8px;
+ color: #777;
+ white-space: pre-wrap;
+ text-align: right;
+ min-width: 25px;
+}
+.editor-code:after {
+ content: attr(data-highlight-language);
+ top: 0;
+ right: 3px;
+ padding: 3px;
+ font-size: 10px;
+ text-transform: uppercase;
+ position: absolute;
+ color: rgba(0, 0, 0, 0.5);
+}
+
+.editor-tokenComment {
+ color: slategray;
+}
+
+.editor-tokenPunctuation {
+ color: #999;
+}
+
+.editor-tokenProperty {
+ color: #905;
+}
+
+.editor-tokenSelector {
+ color: #690;
+}
+
+.editor-tokenOperator {
+ color: #9a6e3a;
+}
+
+.editor-tokenAttr {
+ color: #07a;
+}
+
+.editor-tokenVariable {
+ color: #e90;
+}
+
+.editor-tokenFunction {
+ color: #dd4a68;
+}
+
+.editor-paragraph {
+ margin: 0;
+ margin-bottom: 8px;
+ position: relative;
+}
+
+.editor-paragraph:last-child {
+ margin-bottom: 0;
+}
+
+.editor-heading-h1 {
+ font-size: 24px;
+ color: rgb(5, 5, 5);
+ font-weight: 400;
+ margin: 0;
+ margin-bottom: 12px;
+ padding: 0;
+}
+
+.editor-heading-h2 {
+ font-size: 15px;
+ color: rgb(101, 103, 107);
+ font-weight: 700;
+ margin: 0;
+ margin-top: 10px;
+ padding: 0;
+ text-transform: uppercase;
+}
+
+.editor-heading-h3 {
+ font-size: 14px;
+ /* color: rgb(101, 103, 107); */
+ font-weight: 700;
+ margin: 0;
+ margin-top: 10px;
+ padding: 0;
+ /* text-transform: uppercase; */
+}
+
+.editor-quote {
+ margin: 0;
+ margin-left: 20px;
+ font-size: 15px;
+ color: rgb(101, 103, 107);
+ border-left-color: rgb(206, 208, 212);
+ border-left-width: 4px;
+ border-left-style: solid;
+ padding-left: 16px;
+}
+
+.editor-list-ol {
+ padding: 0;
+ margin: 0;
+ margin-left: 16px;
+}
+
+.editor-list-ul {
+ padding: 0;
+ margin: 0;
+ margin-left: 16px;
+}
+
+.editor-listitem {
+ margin: 8px 32px 8px 32px;
+}
+
+.editor-nested-listitem {
+ list-style-type: none;
+}
+
+pre::-webkit-scrollbar {
+ background: transparent;
+ width: 10px;
+}
+
+pre::-webkit-scrollbar-thumb {
+ background: #999;
+}
+
+.debug-timetravel-panel {
+ overflow: hidden;
+ padding: 0 0 10px 0;
+ margin: auto;
+ display: flex;
+}
+
+.debug-timetravel-panel-slider {
+ padding: 0;
+ flex: 8;
+}
+
+.debug-timetravel-panel-button {
+ padding: 0;
+ border: 0;
+ background: none;
+ flex: 1;
+ color: #fff;
+ font-size: 12px;
+}
+
+.debug-timetravel-panel-button:hover {
+ text-decoration: underline;
+}
+
+.debug-timetravel-button {
+ border: 0;
+ padding: 0;
+ font-size: 12px;
+ top: 10px;
+ right: 15px;
+ position: absolute;
+ background: none;
+ color: #fff;
+}
+
+.debug-timetravel-button:hover {
+ text-decoration: underline;
+}
+
+.emoji {
+ color: transparent;
+ background-size: 16px 16px;
+ background-position: center;
+ background-repeat: no-repeat;
+ vertical-align: middle;
+ margin: 0 -1px;
+}
+
+.emoji-inner {
+ padding: 0 0.15em;
+}
+
+.emoji-inner::selection {
+ color: transparent;
+ background-color: rgba(150, 150, 150, 0.4);
+}
+
+.emoji-inner::moz-selection {
+ color: transparent;
+ background-color: rgba(150, 150, 150, 0.4);
+}
+
+.emoji.happysmile {
+ background-image: url(./images/emoji/1F642.png);
+}
+
+.toolbar {
+ display: flex;
+ margin-bottom: 1px;
+ background: #fff;
+ padding: 4px;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+ vertical-align: middle;
+ width: inherit;
+ overflow-x: auto;
+}
+
+.toolbar button.toolbar-item {
+ border: 0;
+ display: flex;
+ background: none;
+ border-radius: 10px;
+ padding: 8px;
+ cursor: pointer;
+ vertical-align: middle;
+}
+
+.toolbar button.toolbar-item:disabled {
+ cursor: not-allowed;
+}
+
+.toolbar button.toolbar-item.spaced {
+ margin-right: 2px;
+}
+
+.toolbar button.toolbar-item i.format {
+ background-size: contain;
+ display: inline-block;
+ height: 18px;
+ width: 18px;
+ margin-top: 2px;
+ vertical-align: -0.25em;
+ display: flex;
+ opacity: 0.6;
+}
+
+.toolbar button.toolbar-item:disabled i.format {
+ opacity: 0.2;
+}
+
+.toolbar button.toolbar-item.active {
+ background-color: rgba(223, 232, 250, 0.3);
+}
+
+.toolbar button.toolbar-item.active i {
+ opacity: 1;
+}
+
+.toolbar .toolbar-item:hover:not([disabled]) {
+ background-color: #eee;
+}
+
+.toolbar .divider {
+ width: 1px;
+ background-color: #eee;
+ margin: 0 4px;
+}
+.dropdown .divider {
+ width: auto;
+ background-color: #eee;
+ margin: 4px 8px;
+ height: 1px;
+}
+.toolbar select.toolbar-item {
+ border: 0;
+ display: flex;
+ background: none;
+ border-radius: 10px;
+ padding: 8px;
+ vertical-align: middle;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ width: 70px;
+ font-size: 14px;
+ color: #777;
+ text-overflow: ellipsis;
+}
+
+.toolbar select.code-language {
+ text-transform: capitalize;
+ width: 130px;
+}
+
+.toolbar .toolbar-item .text {
+ display: flex;
+ line-height: 20px;
+ width: 200px;
+ vertical-align: middle;
+ font-size: 14px;
+ color: #777;
+ text-overflow: ellipsis;
+ width: 70px;
+ overflow: hidden;
+ height: 20px;
+ text-align: left;
+}
+
+.toolbar .toolbar-item .icon {
+ display: flex;
+ width: 20px;
+ height: 20px;
+ user-select: none;
+ margin-right: 8px;
+ line-height: 16px;
+ background-size: contain;
+}
+
+.toolbar i.chevron-down {
+ margin-top: 3px;
+ width: 16px;
+ height: 16px;
+ display: flex;
+ user-select: none;
+}
+
+.toolbar i.chevron-down.inside {
+ width: 16px;
+ height: 16px;
+ display: flex;
+ margin-left: -25px;
+ margin-top: 11px;
+ margin-right: 10px;
+ pointer-events: none;
+}
+
+i.chevron-down {
+ background-color: transparent;
+ background-size: contain;
+ display: inline-block;
+ height: 8px;
+ width: 8px;
+ background-image: url(/images/icons/chevron-down.svg);
+}
+
+#block-controls button:hover {
+ background-color: #efefef;
+}
+
+#block-controls button:focus-visible {
+ border-color: blue;
+}
+
+#block-controls span.block-type {
+ background-size: contain;
+ display: block;
+ width: 18px;
+ height: 18px;
+ margin: 2px;
+}
+
+#block-controls span.block-type.paragraph {
+ background-image: url(/images/icons/text-paragraph.svg);
+}
+
+#block-controls span.block-type.h1 {
+ background-image: url(/images/icons/type-h1.svg);
+}
+
+#block-controls span.block-type.h2 {
+ background-image: url(/images/icons/type-h2.svg);
+}
+
+#block-controls span.block-type.quote {
+ background-image: url(/images/icons/chat-square-quote.svg);
+}
+
+#block-controls span.block-type.ul {
+ background-image: url(/images/icons/list-ul.svg);
+}
+
+#block-controls span.block-type.ol {
+ background-image: url(/images/icons/list-ol.svg);
+}
+
+#block-controls span.block-type.code {
+ background-image: url(/images/icons/code.svg);
+}
+
+.dropdown {
+ z-index: 5;
+ display: block;
+ position: absolute;
+ box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+ border-radius: 8px;
+ min-width: 100px;
+ min-height: 40px;
+ background-color: #fff;
+}
+
+.dropdown .item {
+ margin: 0 8px 0 8px;
+ padding: 8px;
+ color: #050505;
+ cursor: pointer;
+ line-height: 16px;
+ font-size: 15px;
+ display: flex;
+ align-content: center;
+ flex-direction: row;
+ flex-shrink: 0;
+ justify-content: space-between;
+ background-color: #fff;
+ border-radius: 8px;
+ border: 0;
+ min-width: 268px;
+}
+
+.dropdown .item .active {
+ display: flex;
+ width: 20px;
+ height: 20px;
+ background-size: contain;
+}
+button.item.dropdown-item-active {
+ background-color: #dfe8fa4d;
+}
+
+.dropdown .item:first-child {
+ margin-top: 8px;
+}
+
+.dropdown .item:last-child {
+ margin-bottom: 8px;
+}
+
+.dropdown .item:hover {
+ background-color: #eee;
+}
+
+.dropdown .item .text {
+ display: flex;
+ line-height: 20px;
+ flex-grow: 1;
+ width: 200px;
+}
+
+.dropdown .item .icon {
+ display: flex;
+ width: 20px;
+ height: 20px;
+ user-select: none;
+ margin-right: 12px;
+ line-height: 16px;
+ background-size: contain;
+}
+.dropdown .item.font-m-Arial {
+ font-family: Arial, sans-serif;
+}
+.dropdown .item.font-m-Courier_New {
+ font-family: 'Courier New', monospace;
+}
+.dropdown .item.font-m-Georgia {
+ font-family: Georgia, serif;
+}
+.dropdown .item.font-m-Times_New_Roman {
+ font-family: 'Times New Roman', serif;
+}
+.dropdown .item.font-m-Trebuchet_MS {
+ font-family: 'Trebuchet MS', sans-serif;
+}
+.dropdown .item.font-m-Verdana {
+ font-family: Verdana, sans-serif;
+}
+.link-editor {
+ position: absolute;
+ z-index: 100;
+ top: -10000px;
+ left: -10000px;
+ margin-top: -6px;
+ max-width: 400px;
+ width: 100%;
+ opacity: 0;
+ background-color: #fff;
+ box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
+ border-radius: 8px;
+ transition: opacity 0.5s;
+}
+
+.link-editor .link-input {
+ display: block;
+ width: calc(100% - 24px);
+ box-sizing: border-box;
+ margin: 8px 12px;
+ padding: 8px 12px;
+ border-radius: 15px;
+ background-color: #eee;
+ font-size: 15px;
+ color: rgb(5, 5, 5);
+ border: 0;
+ outline: 0;
+ position: relative;
+ font-family: inherit;
+}
+
+.link-editor div.link-edit {
+ background-image: url(/images/icons/pencil-fill.svg);
+ background-size: 16px;
+ background-position: center;
+ background-repeat: no-repeat;
+ width: 35px;
+ vertical-align: -0.25em;
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ cursor: pointer;
+}
+.link-editor div.link-trash {
+ background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-trash'%3e%3cpath%20d='M5.5%205.5A.5.5%200%200%201%206%206v6a.5.5%200%200%201-1%200V6a.5.5%200%200%201%20.5-.5zm2.5%200a.5.5%200%200%201%20.5.5v6a.5.5%200%200%201-1%200V6a.5.5%200%200%201%20.5-.5zm3%20.5a.5.5%200%200%200-1%200v6a.5.5%200%200%200%201%200V6z'/%3e%3cpath%20fill-rule='evenodd'%20d='M14.5%203a1%201%200%200%201-1%201H13v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V4h-.5a1%201%200%200%201-1-1V2a1%201%200%200%201%201-1H6a1%201%200%200%201%201-1h2a1%201%200%200%201%201%201h3.5a1%201%200%200%201%201%201v1zM4.118%204%204%204.059V13a1%201%200%200%200%201%201h6a1%201%200%200%200%201-1V4.059L11.882%204H4.118zM2.5%203V2h11v1h-11z'/%3e%3c/svg%3e");
+ background-size: 16px;
+ background-position: center;
+ background-repeat: no-repeat;
+ width: 35px;
+ vertical-align: -.25em;
+ position: absolute;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ cursor: pointer;
+}
+
+.link-editor .link-input a {
+ color: rgb(33, 111, 219);
+ text-decoration: none;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ margin-right: 30px;
+ text-overflow: ellipsis;
+}
+
+.link-editor .link-input a:hover {
+ text-decoration: underline;
+}
+
+.link-editor .button {
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+ padding: 6px;
+ border-radius: 8px;
+ cursor: pointer;
+ margin: 0 2px;
+}
+
+.link-editor .button.hovered {
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+ background-color: #eee;
+}
+
+.link-editor .button i,
+.actions i {
+ background-size: contain;
+ display: inline-block;
+ height: 20px;
+ width: 20px;
+ vertical-align: -0.25em;
+}
+
+i.undo {
+ background-image: url(/images/icons/arrow-counterclockwise.svg);
+}
+
+i.redo {
+ background-image: url(/images/icons/arrow-clockwise.svg);
+}
+
+.icon.paragraph {
+ background-image: url(/images/icons/text-paragraph.svg);
+}
+
+.icon.large-heading,
+.icon.h1 {
+ background-image: url(/images/icons/type-h1.svg);
+}
+
+.icon.small-heading,
+.icon.h2 {
+ background-image: url(/images/icons/type-h2.svg);
+}
+.icon.h3 {
+ background-image: url(/images/icons/type-h3.svg);
+}
+
+.icon.bullet-list,
+.icon.ul {
+ background-image: url(/images/icons/list-ul.svg);
+}
+
+.icon.numbered-list,
+.icon.ol {
+ background-image: url(/images/icons/list-ol.svg);
+}
+
+.icon.quote {
+ background-image: url(/images/icons/chat-square-quote.svg);
+}
+
+.icon.code {
+ background-image: url(/images/icons/code.svg);
+}
+
+.icon.font-family {
+ background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-fonts'%3e%3cpath%20d='M12.258%203h-8.51l-.083%202.46h.479c.26-1.544.758-1.783%202.693-1.845l.424-.013v7.827c0%20.663-.144.82-1.3.923v.52h4.082v-.52c-1.162-.103-1.306-.26-1.306-.923V3.602l.431.013c1.934.062%202.434.301%202.693%201.846h.479L12.258%203z'/%3e%3c/svg%3e")
+}
+/* .icon.font-color {
+ background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%20512%20512'%3e%3cpath%20fill='%23777'%20d='M221.631%20109%20109.92%20392h58.055l24.079-61h127.892l24.079%2061h58.055L290.369%20109Zm-8.261%20168L256%20169l42.63%20108Z'/%3e%3c/svg%3e");
+} */
+.icon.font-color {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777'%3E%3Cpath d='M15.2459 14H8.75407L7.15407 18H5L11 3H13L19 18H16.8459L15.2459 14ZM14.4459 12L12 5.88516L9.55407 12H14.4459ZM3 20H21V22H3V20Z'%3E%3C/path%3E%3C/svg%3E");
+}
+.icon.bg-color {
+ background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2048%2048'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill='%23fff'%20fill-opacity='.01'%20d='M0%200h48v48H0z'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M37%2037a4%204%200%200%200%204-4c0-1.473-1.333-3.473-4-6-2.667%202.527-4%204.527-4%206a4%204%200%200%200%204%204Z'%20fill='%23777'/%3e%3cpath%20d='m20.854%205.504%203.535%203.536'%20stroke='%23777'%20stroke-width='4'%20stroke-linecap='round'/%3e%3cpath%20d='M23.682%208.333%208.125%2023.889%2019.44%2035.203l15.556-15.557L23.682%208.333Z'%20stroke='%23777'%20stroke-width='4'%20stroke-linejoin='round'/%3e%3cpath%20d='m12%2020.073%2016.961%205.577M4%2043h40'%20stroke='%23777'%20stroke-width='4'%20stroke-linecap='round'/%3e%3c/svg%3e");
+}
+.icon.left-align, i.left-align {
+ background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-text-left'%3e%3cpath%20fill-rule='evenodd'%20d='M2%2012.5a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7a.5.5%200%200%201-.5-.5zm0-3a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5zm0-3a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7a.5.5%200%200%201-.5-.5zm0-3a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5z'/%3e%3c/svg%3e");
+}
+
+.icon.center-align,i.center-align {
+ background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-text-center'%3e%3cpath%20fill-rule='evenodd'%20d='M4%2012.5a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7a.5.5%200%200%201-.5-.5zm-2-3a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5zm2-3a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7a.5.5%200%200%201-.5-.5zm-2-3a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5z'/%3e%3c/svg%3e")
+}
+
+.icon.right-align,i.right-align {
+ background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-text-right'%3e%3cpath%20fill-rule='evenodd'%20d='M6%2012.5a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7a.5.5%200%200%201-.5-.5zm-4-3a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5zm4-3a.5.5%200%200%201%20.5-.5h7a.5.5%200%200%201%200%201h-7a.5.5%200%200%201-.5-.5zm-4-3a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5z'/%3e%3c/svg%3e")
+}
+
+.icon.justify-align,i.justify-align {
+ background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-justify'%3e%3cpath%20fill-rule='evenodd'%20d='M2%2012.5a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5zm0-3a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5zm0-3a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5zm0-3a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5z'/%3e%3c/svg%3e")
+}
+
+i.indent {
+ background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-text-indent-left'%3e%3cpath%20d='M2%203.5a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5zm.646%202.146a.5.5%200%200%201%20.708%200l2%202a.5.5%200%200%201%200%20.708l-2%202a.5.5%200%200%201-.708-.708L4.293%208%202.646%206.354a.5.5%200%200%201%200-.708zM7%206.5a.5.5%200%200%201%20.5-.5h6a.5.5%200%200%201%200%201h-6a.5.5%200%200%201-.5-.5zm0%203a.5.5%200%200%201%20.5-.5h6a.5.5%200%200%201%200%201h-6a.5.5%200%200%201-.5-.5zm-5%203a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5z'/%3e%3c/svg%3e")
+}
+i.outdent {
+ background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20fill='currentColor'%20class='bi%20bi-text-indent-right'%3e%3cpath%20d='M2%203.5a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5zm10.646%202.146a.5.5%200%200%201%20.708.708L11.707%208l1.647%201.646a.5.5%200%200%201-.708.708l-2-2a.5.5%200%200%201%200-.708l2-2zM2%206.5a.5.5%200%200%201%20.5-.5h6a.5.5%200%200%201%200%201h-6a.5.5%200%200%201-.5-.5zm0%203a.5.5%200%200%201%20.5-.5h6a.5.5%200%200%201%200%201h-6a.5.5%200%200%201-.5-.5zm0%203a.5.5%200%200%201%20.5-.5h11a.5.5%200%200%201%200%201h-11a.5.5%200%200%201-.5-.5z'/%3e%3c/svg%3e")
+}
+
+i.bold {
+ background-image: url(/images/icons/type-bold.svg);
+}
+
+i.italic {
+ background-image: url(/images/icons/type-italic.svg);
+}
+
+i.underline {
+ background-image: url(/images/icons/type-underline.svg);
+}
+
+i.strikethrough {
+ background-image: url(/images/icons/type-strikethrough.svg);
+}
+
+i.code {
+ background-image: url(/images/icons/code.svg);
+}
+
+i.link {
+ background-image: url(/images/icons/link.svg);
+}
+i.horizontal-rule {
+ background-image: url(/images/icons/horizontal-rule.svg);
+}
+
+i.left-align {
+ background-image: url(/images/icons/text-left.svg);
+}
+
+i.center-align {
+ background-image: url(/images/icons/text-center.svg);
+}
+
+i.right-align {
+ background-image: url(/images/icons/text-right.svg);
+}
+
+i.justify-align {
+ background-image: url(/images/icons/justify.svg);
+}
diff --git a/src/components/LexicalEditor/themes/ExampleTheme.js b/src/components/LexicalEditor/themes/ExampleTheme.js
new file mode 100644
index 0000000..ecd4bdd
--- /dev/null
+++ b/src/components/LexicalEditor/themes/ExampleTheme.js
@@ -0,0 +1,70 @@
+const exampleTheme = {
+ ltr: "ltr",
+ rtl: "rtl",
+ placeholder: "editor-placeholder",
+ paragraph: "editor-paragraph",
+ // paragraph: "editor-p",
+ quote: "editor-quote",
+ heading: {
+ h1: "editor-heading-h1",
+ h2: "editor-heading-h2",
+ h3: "editor-heading-h3",
+ h4: "editor-heading-h4",
+ h5: "editor-heading-h5"
+ },
+ list: {
+ nested: {
+ listitem: "editor-nested-listitem"
+ },
+ ol: "editor-list-ol",
+ ul: "editor-list-ul",
+ listitem: "editor-listitem"
+ },
+ image: "editor-image",
+ link: "editor-link",
+ text: {
+ bold: "editor-text-bold",
+ italic: "editor-text-italic",
+ overflowed: "editor-text-overflowed",
+ hashtag: "editor-text-hashtag",
+ underline: "editor-text-underline",
+ strikethrough: "editor-text-strikethrough",
+ underlineStrikethrough: "editor-text-underlineStrikethrough",
+ code: "editor-text-code"
+ },
+ code: "editor-code",
+ codeHighlight: {
+ atrule: "editor-tokenAttr",
+ attr: "editor-tokenAttr",
+ boolean: "editor-tokenProperty",
+ builtin: "editor-tokenSelector",
+ cdata: "editor-tokenComment",
+ char: "editor-tokenSelector",
+ class: "editor-tokenFunction",
+ "class-name": "editor-tokenFunction",
+ comment: "editor-tokenComment",
+ constant: "editor-tokenProperty",
+ deleted: "editor-tokenProperty",
+ doctype: "editor-tokenComment",
+ entity: "editor-tokenOperator",
+ function: "editor-tokenFunction",
+ important: "editor-tokenVariable",
+ inserted: "editor-tokenSelector",
+ keyword: "editor-tokenAttr",
+ namespace: "editor-tokenVariable",
+ number: "editor-tokenProperty",
+ operator: "editor-tokenOperator",
+ prolog: "editor-tokenComment",
+ property: "editor-tokenProperty",
+ punctuation: "editor-tokenPunctuation",
+ regex: "editor-tokenVariable",
+ selector: "editor-tokenSelector",
+ string: "editor-tokenSelector",
+ symbol: "editor-tokenProperty",
+ tag: "editor-tokenProperty",
+ url: "editor-tokenOperator",
+ variable: "editor-tokenVariable"
+ }
+};
+
+export default exampleTheme;
diff --git a/src/components/LexicalEditor/ui/Button.css b/src/components/LexicalEditor/ui/Button.css
new file mode 100644
index 0000000..946c4dc
--- /dev/null
+++ b/src/components/LexicalEditor/ui/Button.css
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.Button__root {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ padding-left: 15px;
+ padding-right: 15px;
+ border: 0px;
+ background-color: #eee;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 14px;
+}
+.Button__root:hover {
+ background-color: #ddd;
+}
+.Button__small {
+ padding-top: 5px;
+ padding-bottom: 5px;
+ padding-left: 10px;
+ padding-right: 10px;
+ font-size: 13px;
+}
+.Button__disabled {
+ cursor: not-allowed;
+}
+.Button__disabled:hover {
+ background-color: #eee;
+}
diff --git a/src/components/LexicalEditor/ui/Button.tsx b/src/components/LexicalEditor/ui/Button.tsx
new file mode 100644
index 0000000..a83f7a8
--- /dev/null
+++ b/src/components/LexicalEditor/ui/Button.tsx
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import './Button.css';
+
+import * as React from 'react';
+import {ReactNode} from 'react';
+
+import joinClasses from '../utils/joinClasses';
+
+export default function Button({
+ 'data-test-id': dataTestId,
+ children,
+ className,
+ onClick,
+ disabled,
+ small,
+ title,
+}: {
+ 'data-test-id'?: string;
+ children: ReactNode;
+ className?: string;
+ disabled?: boolean;
+ onClick: () => void;
+ small?: boolean;
+ title?: string;
+}): JSX.Element {
+ return (
+
+ );
+}
diff --git a/src/components/LexicalEditor/ui/ColorPicker.css b/src/components/LexicalEditor/ui/ColorPicker.css
new file mode 100644
index 0000000..63217ba
--- /dev/null
+++ b/src/components/LexicalEditor/ui/ColorPicker.css
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+.color-picker-wrapper {
+ padding: 20px;
+}
+
+.color-picker-basic-color {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 10px;
+ margin: 0;
+ padding: 0;
+}
+
+.color-picker-basic-color button {
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ height: 16px;
+ width: 16px;
+ cursor: pointer;
+ list-style-type: none;
+}
+
+.color-picker-basic-color button.active {
+ box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
+}
+
+.color-picker-saturation {
+ width: 100%;
+ position: relative;
+ margin-top: 15px;
+ height: 150px;
+ background-image: linear-gradient(transparent, black),
+ linear-gradient(to right, white, transparent);
+ user-select: none;
+}
+.color-picker-saturation_cursor {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border: 2px solid #ffffff;
+ border-radius: 50%;
+ box-shadow: 0 0 15px #00000026;
+ box-sizing: border-box;
+ transform: translate(-10px, -10px);
+}
+.color-picker-hue {
+ width: 100%;
+ position: relative;
+ margin-top: 15px;
+ height: 12px;
+ background-image: linear-gradient(
+ to right,
+ rgb(255, 0, 0),
+ rgb(255, 255, 0),
+ rgb(0, 255, 0),
+ rgb(0, 255, 255),
+ rgb(0, 0, 255),
+ rgb(255, 0, 255),
+ rgb(255, 0, 0)
+ );
+ user-select: none;
+ border-radius: 12px;
+}
+
+.color-picker-hue_cursor {
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ border: 2px solid #ffffff;
+ border-radius: 50%;
+ box-shadow: #0003 0 0 0 0.5px;
+ box-sizing: border-box;
+ transform: translate(-10px, -4px);
+}
+
+.color-picker-color {
+ border: 1px solid #ccc;
+ margin-top: 15px;
+ width: 100%;
+ height: 20px;
+}
diff --git a/src/components/LexicalEditor/ui/ColorPicker.tsx b/src/components/LexicalEditor/ui/ColorPicker.tsx
new file mode 100644
index 0000000..ebd7b3d
--- /dev/null
+++ b/src/components/LexicalEditor/ui/ColorPicker.tsx
@@ -0,0 +1,364 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import './ColorPicker.css';
+
+import {calculateZoomLevel} from '@lexical/utils';
+import {useEffect, useMemo, useRef, useState} from 'react';
+import * as React from 'react';
+
+import TextInput from './TextInput';
+
+let skipAddingToHistoryStack = false;
+
+interface ColorPickerProps {
+ color: string;
+ onChange?: (value: string, skipHistoryStack: boolean) => void;
+}
+
+const basicColors = [
+ '#d0021b',
+ '#f5a623',
+ '#f8e71c',
+ '#8b572a',
+ '#7ed321',
+ '#417505',
+ '#bd10e0',
+ '#9013fe',
+ '#4a90e2',
+ '#50e3c2',
+ '#b8e986',
+ '#000000',
+ '#4a4a4a',
+ '#9b9b9b',
+ '#ffffff',
+];
+
+const WIDTH = 214;
+const HEIGHT = 150;
+
+export default function ColorPicker({
+ color,
+ onChange,
+}: Readonly): JSX.Element {
+ const [selfColor, setSelfColor] = useState(transformColor('hex', color));
+ const [inputColor, setInputColor] = useState(color);
+ const innerDivRef = useRef(null);
+
+ const saturationPosition = useMemo(
+ () => ({
+ x: (selfColor.hsv.s / 100) * WIDTH,
+ y: ((100 - selfColor.hsv.v) / 100) * HEIGHT,
+ }),
+ [selfColor.hsv.s, selfColor.hsv.v],
+ );
+
+ const huePosition = useMemo(
+ () => ({
+ x: (selfColor.hsv.h / 360) * WIDTH,
+ }),
+ [selfColor.hsv],
+ );
+
+ const onSetHex = (hex: string) => {
+ setInputColor(hex);
+ if (/^#[0-9A-Fa-f]{6}$/i.test(hex)) {
+ const newColor = transformColor('hex', hex);
+ setSelfColor(newColor);
+ }
+ };
+
+ const onMoveSaturation = ({x, y}: Position) => {
+ const newHsv = {
+ ...selfColor.hsv,
+ s: (x / WIDTH) * 100,
+ v: 100 - (y / HEIGHT) * 100,
+ };
+ const newColor = transformColor('hsv', newHsv);
+ setSelfColor(newColor);
+ setInputColor(newColor.hex);
+ };
+
+ const onMoveHue = ({x}: Position) => {
+ const newHsv = {...selfColor.hsv, h: (x / WIDTH) * 360};
+ const newColor = transformColor('hsv', newHsv);
+
+ setSelfColor(newColor);
+ setInputColor(newColor.hex);
+ };
+
+ useEffect(() => {
+ // Check if the dropdown is actually active
+ if (innerDivRef.current !== null && onChange) {
+ onChange(selfColor.hex, skipAddingToHistoryStack);
+ setInputColor(selfColor.hex);
+ }
+ }, [selfColor, onChange]);
+
+ useEffect(() => {
+ if (color === undefined) {
+ return;
+ }
+ const newColor = transformColor('hex', color);
+ setSelfColor(newColor);
+ setInputColor(newColor.hex);
+ }, [color]);
+
+ return (
+ (null);
+ const draggedRef = useRef(false);
+
+ const move = (e: React.MouseEvent | MouseEvent): void => {
+ if (divRef.current) {
+ const {current: div} = divRef;
+ const {width, height, left, top} = div.getBoundingClientRect();
+ const zoom = calculateZoomLevel(div);
+ const x = clamp(e.clientX / zoom - left, width, 0);
+ const y = clamp(e.clientY / zoom - top, height, 0);
+
+ onChange({x, y});
+ }
+ };
+
+ const onMouseDown = (e: React.MouseEvent): void => {
+ if (e.button !== 0) {
+ return;
+ }
+
+ move(e);
+
+ const onMouseMove = (_e: MouseEvent): void => {
+ draggedRef.current = true;
+ skipAddingToHistoryStack = true;
+ move(_e);
+ };
+
+ const onMouseUp = (_e: MouseEvent): void => {
+ if (draggedRef.current) {
+ skipAddingToHistoryStack = false;
+ }
+
+ document.removeEventListener('mousemove', onMouseMove, false);
+ document.removeEventListener('mouseup', onMouseUp, false);
+
+ move(_e);
+ draggedRef.current = false;
+ };
+
+ document.addEventListener('mousemove', onMouseMove, false);
+ document.addEventListener('mouseup', onMouseUp, false);
+ };
+
+ return (
+ (
+ format: M,
+ color: C,
+): Color {
+ let hex: Color['hex'] = toHex('#121212');
+ let rgb: Color['rgb'] = hex2rgb(hex);
+ let hsv: Color['hsv'] = rgb2hsv(rgb);
+
+ if (format === 'hex') {
+ const value = color as Color['hex'];
+
+ hex = toHex(value);
+ rgb = hex2rgb(hex);
+ hsv = rgb2hsv(rgb);
+ } else if (format === 'rgb') {
+ const value = color as Color['rgb'];
+
+ rgb = value;
+ hex = rgb2hex(rgb);
+ hsv = rgb2hsv(rgb);
+ } else if (format === 'hsv') {
+ const value = color as Color['hsv'];
+
+ hsv = value;
+ rgb = hsv2rgb(hsv);
+ hex = rgb2hex(rgb);
+ }
+
+ return {hex, hsv, rgb};
+}
diff --git a/src/components/LexicalEditor/ui/ContentEditable.css b/src/components/LexicalEditor/ui/ContentEditable.css
new file mode 100644
index 0000000..efced7f
--- /dev/null
+++ b/src/components/LexicalEditor/ui/ContentEditable.css
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+.ContentEditable__root {
+ border: 0;
+ font-size: 15px;
+ display: block;
+ position: relative;
+ outline: 0;
+ padding: 8px 28px 40px;
+ min-height: 150px;
+}
+@media (max-width: 1025px) {
+ .ContentEditable__root {
+ padding-left: 8px;
+ padding-right: 8px;
+ }
+}
+
+.ContentEditable__placeholder {
+ font-size: 15px;
+ color: #999;
+ overflow: hidden;
+ position: absolute;
+ text-overflow: ellipsis;
+ top: 8px;
+ left: 28px;
+ right: 28px;
+ user-select: none;
+ white-space: nowrap;
+ display: inline-block;
+ pointer-events: none;
+}
+@media (max-width: 1025px) {
+ .ContentEditable__placeholder {
+ left: 8px;
+ right: 8px;
+ }
+}
diff --git a/src/components/LexicalEditor/ui/ContentEditable.tsx b/src/components/LexicalEditor/ui/ContentEditable.tsx
new file mode 100644
index 0000000..b1ee20b
--- /dev/null
+++ b/src/components/LexicalEditor/ui/ContentEditable.tsx
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import './ContentEditable.css';
+
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import * as React from 'react';
+
+type Props = {
+ className?: string;
+ placeholderClassName?: string;
+ placeholder: string;
+};
+
+export default function LexicalContentEditable({
+ className,
+ placeholder,
+ placeholderClassName,
+}: Props): JSX.Element {
+ return (
+
+ {placeholder}
+
+ }
+ />
+ );
+}
diff --git a/src/components/LexicalEditor/ui/Dialog.css b/src/components/LexicalEditor/ui/Dialog.css
new file mode 100644
index 0000000..1014b4a
--- /dev/null
+++ b/src/components/LexicalEditor/ui/Dialog.css
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+.DialogActions {
+ display: flex;
+ flex-direction: row;
+ justify-content: right;
+ margin-top: 20px;
+}
+
+.DialogButtonsList {
+ display: flex;
+ flex-direction: column;
+ justify-content: right;
+ margin-top: 20px;
+}
+
+.DialogButtonsList button {
+ margin-bottom: 20px;
+}
diff --git a/src/components/LexicalEditor/ui/Dialog.tsx b/src/components/LexicalEditor/ui/Dialog.tsx
new file mode 100644
index 0000000..36e3b8c
--- /dev/null
+++ b/src/components/LexicalEditor/ui/Dialog.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import './Dialog.css';
+
+import * as React from 'react';
+import {ReactNode} from 'react';
+
+type Props = Readonly<{
+ 'data-test-id'?: string;
+ children: ReactNode;
+}>;
+
+export function DialogButtonsList({children}: Props): JSX.Element {
+ return event.preventDefault()}
+ onClick={() => {
+ setEditMode(true);
+ }}
+ />
+ {/* todo: 删除后, AutoLink的作用会使文本再次自动转成链接 */}
+ {/*
+ );
+}
+
+function Select({ onChange, className, options, value }) {
+ return (
+
+ );
+}
+
+function getSelectedNode(selection) {
+ const anchor = selection.anchor;
+ const focus = selection.focus;
+ const anchorNode = selection.anchor.getNode();
+ const focusNode = selection.focus.getNode();
+ if (anchorNode === focusNode) {
+ return anchorNode;
+ }
+ const isBackward = selection.isBackward();
+ if (isBackward) {
+ return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+ } else {
+ return $isAtNodeEnd(anchor) ? focusNode : anchorNode;
+ }
+}
+
+function getDomRangeRect(nativeSelection, rootElement) {
+ const domRange = nativeSelection.getRangeAt(0);
+
+ let rect;
+
+ if (nativeSelection.anchorNode === rootElement) {
+ let inner = rootElement;
+ while (inner.firstElementChild != null) {
+ inner = inner.firstElementChild;
+ }
+ rect = inner.getBoundingClientRect();
+ } else {
+ rect = domRange.getBoundingClientRect();
+ }
+ return rect;
+}
+
+function BlockOptionsDropdownList({ editor, blockType, toolbarRef, setShowBlockOptionsDropDown }) {
+ const dropDownRef = useRef(null);
+
+ useEffect(() => {
+ const toolbar = toolbarRef.current;
+ const dropDown = dropDownRef.current;
+
+ if (toolbar !== null && dropDown !== null) {
+ const { top, left } = toolbar.getBoundingClientRect();
+ dropDown.style.top = `${top + 40}px`;
+ dropDown.style.left = `${left}px`;
+ }
+ }, [dropDownRef, toolbarRef]);
+
+ useEffect(() => {
+ const dropDown = dropDownRef.current;
+ const toolbar = toolbarRef.current;
+
+ if (dropDown !== null && toolbar !== null) {
+ const handle = (event) => {
+ const target = event.target;
+
+ if (!dropDown.contains(target) && !toolbar.contains(target)) {
+ setShowBlockOptionsDropDown(false);
+ }
+ };
+ document.addEventListener('click', handle);
+
+ return () => {
+ document.removeEventListener('click', handle);
+ };
+ }
+ }, [dropDownRef, setShowBlockOptionsDropDown, toolbarRef]);
+
+ const formatParagraph = () => {
+ if (blockType !== 'paragraph') {
+ editor.update(() => {
+ const selection = $getSelection();
+
+ if ($isRangeSelection(selection)) {
+ $setBlocksType(selection, () => $createParagraphNode());
+ }
+ });
+ }
+ setShowBlockOptionsDropDown(false);
+ };
+
+ const formatLargeHeading = () => {
+ if (blockType !== 'h1') {
+ editor.update(() => {
+ const selection = $getSelection();
+
+ if ($isRangeSelection(selection)) {
+ $setBlocksType(selection, () => $createHeadingNode('h1'));
+ }
+ });
+ }
+ setShowBlockOptionsDropDown(false);
+ };
+
+ const formatSmallHeading = () => {
+ if (blockType !== 'h2') {
+ editor.update(() => {
+ const selection = $getSelection();
+
+ if ($isRangeSelection(selection)) {
+ $setBlocksType(selection, () => $createHeadingNode('h2'));
+ }
+ });
+ }
+ setShowBlockOptionsDropDown(false);
+ };
+ const formatSmallHeading3 = () => {
+ if (blockType !== 'h3') {
+ editor.update(() => {
+ const selection = $getSelection();
+
+ if ($isRangeSelection(selection)) {
+ $setBlocksType(selection, () => $createHeadingNode('h3'));
+ }
+ });
+ }
+ setShowBlockOptionsDropDown(false);
+ };
+
+ const formatBulletList = () => {
+ if (blockType !== 'ul') {
+ editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND);
+ } else {
+ editor.dispatchCommand(REMOVE_LIST_COMMAND);
+ }
+ setShowBlockOptionsDropDown(false);
+ };
+
+ const formatNumberedList = () => {
+ if (blockType !== 'ol') {
+ editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND);
+ } else {
+ editor.dispatchCommand(REMOVE_LIST_COMMAND);
+ }
+ setShowBlockOptionsDropDown(false);
+ };
+
+ const formatQuote = () => {
+ if (blockType !== 'quote') {
+ editor.update(() => {
+ const selection = $getSelection();
+
+ if ($isRangeSelection(selection)) {
+ $setBlocksType(selection, () => $createQuoteNode());
+ }
+ });
+ }
+ setShowBlockOptionsDropDown(false);
+ };
+
+ const formatCode = () => {
+ if (blockType !== 'code') {
+ editor.update(() => {
+ const selection = $getSelection();
+
+ if ($isRangeSelection(selection)) {
+ $setBlocksType(selection, () => $createCodeNode());
+ }
+ });
+ }
+ setShowBlockOptionsDropDown(false);
+ };
+
+ return (
+ event.preventDefault()}
+ onClick={() => {
+ editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+ }}
+ /> */}
+
+
+ )}
+
+
+
+
+
+
+
+
+ {/* */}
+
+ );
+}
+
+function FontDropDown({ editor, value, style, disabled = false }) {
+ const handleClick = useCallback(
+ (option) => {
+ editor.update(() => {
+ const selection = $getSelection();
+ if (selection !== null) {
+ $patchStyleText(selection, {
+ [style]: option,
+ });
+ }
+ });
+ },
+ [editor, style]
+ );
+
+ const buttonAriaLabel = style === 'font-family' ? 'Formatting options for font family' : 'Formatting options for font size';
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/components/LexicalEditor/plugins/TreeViewPlugin.jsx b/src/components/LexicalEditor/plugins/TreeViewPlugin.jsx
new file mode 100644
index 0000000..45474a0
--- /dev/null
+++ b/src/components/LexicalEditor/plugins/TreeViewPlugin.jsx
@@ -0,0 +1,16 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { TreeView } from "@lexical/react/LexicalTreeView";
+
+export default function TreeViewPlugin() {
+ const [editor] = useLexicalComposerContext();
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export interface Position {
+ x: number;
+ y: number;
+}
+
+interface MoveWrapperProps {
+ className?: string;
+ style?: React.CSSProperties;
+ onChange: (position: Position) => void;
+ children: JSX.Element;
+}
+
+function MoveWrapper({className, style, onChange, children}: MoveWrapperProps) {
+ const divRef = useRef
+ {basicColors.map((basicColor) => (
+
+
+ {children}
+
+ );
+}
+
+function clamp(value: number, max: number, min: number) {
+ return value > max ? max : value < min ? min : value;
+}
+
+interface RGB {
+ b: number;
+ g: number;
+ r: number;
+}
+interface HSV {
+ h: number;
+ s: number;
+ v: number;
+}
+interface Color {
+ hex: string;
+ hsv: HSV;
+ rgb: RGB;
+}
+
+export function toHex(value: string): string {
+ if (!value.startsWith('#')) {
+ const ctx = document.createElement('canvas').getContext('2d');
+
+ if (!ctx) {
+ throw new Error('2d context not supported or canvas already initialized');
+ }
+
+ ctx.fillStyle = value;
+
+ return ctx.fillStyle;
+ } else if (value.length === 4 || value.length === 5) {
+ value = value
+ .split('')
+ .map((v, i) => (i ? v + v : '#'))
+ .join('');
+
+ return value;
+ } else if (value.length === 7 || value.length === 9) {
+ return value;
+ }
+
+ return '#000000';
+}
+
+function hex2rgb(hex: string): RGB {
+ const rbgArr = (
+ hex
+ .replace(
+ /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+ (m, r, g, b) => '#' + r + r + g + g + b + b,
+ )
+ .substring(1)
+ .match(/.{2}/g) || []
+ ).map((x) => parseInt(x, 16));
+
+ return {
+ b: rbgArr[2],
+ g: rbgArr[1],
+ r: rbgArr[0],
+ };
+}
+
+function rgb2hsv({r, g, b}: RGB): HSV {
+ r /= 255;
+ g /= 255;
+ b /= 255;
+
+ const max = Math.max(r, g, b);
+ const d = max - Math.min(r, g, b);
+
+ const h = d
+ ? (max === r
+ ? (g - b) / d + (g < b ? 6 : 0)
+ : max === g
+ ? 2 + (b - r) / d
+ : 4 + (r - g) / d) * 60
+ : 0;
+ const s = max ? (d / max) * 100 : 0;
+ const v = max * 100;
+
+ return {h, s, v};
+}
+
+function hsv2rgb({h, s, v}: HSV): RGB {
+ s /= 100;
+ v /= 100;
+
+ const i = ~~(h / 60);
+ const f = h / 60 - i;
+ const p = v * (1 - s);
+ const q = v * (1 - s * f);
+ const t = v * (1 - s * (1 - f));
+ const index = i % 6;
+
+ const r = Math.round([v, q, p, p, t, v][index] * 255);
+ const g = Math.round([t, v, v, q, p, p][index] * 255);
+ const b = Math.round([p, p, t, v, v, q][index] * 255);
+
+ return {b, g, r};
+}
+
+function rgb2hex({b, g, r}: RGB): string {
+ return '#' + [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('');
+}
+
+function transformColor{children}
;
+}
+
+export function DialogActions({
+ 'data-test-id': dataTestId,
+ children,
+}: Props): JSX.Element {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/LexicalEditor/ui/DropDown.tsx b/src/components/LexicalEditor/ui/DropDown.tsx
new file mode 100644
index 0000000..012d467
--- /dev/null
+++ b/src/components/LexicalEditor/ui/DropDown.tsx
@@ -0,0 +1,259 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import * as React from 'react';
+import {
+ ReactNode,
+ useCallback,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+import {createPortal} from 'react-dom';
+
+type DropDownContextType = {
+ registerItem: (ref: React.RefObject
+ {children}
+
+
+
+ onChange(e.target.files)}
+ data-test-id={dataTestId}
+ />
+
+ );
+}
diff --git a/src/components/LexicalEditor/ui/ImageResizer.tsx b/src/components/LexicalEditor/ui/ImageResizer.tsx
new file mode 100644
index 0000000..13e9f48
--- /dev/null
+++ b/src/components/LexicalEditor/ui/ImageResizer.tsx
@@ -0,0 +1,316 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {LexicalEditor} from 'lexical';
+
+import {calculateZoomLevel} from '@lexical/utils';
+import * as React from 'react';
+import {useRef} from 'react';
+
+function clamp(value: number, min: number, max: number) {
+ return Math.min(Math.max(value, min), max);
+}
+
+const Direction = {
+ east: 1 << 0,
+ north: 1 << 3,
+ south: 1 << 1,
+ west: 1 << 2,
+};
+
+export default function ImageResizer({
+ onResizeStart,
+ onResizeEnd,
+ buttonRef,
+ imageRef,
+ maxWidth,
+ editor,
+ showCaption,
+ setShowCaption,
+ captionsEnabled,
+}: {
+ editor: LexicalEditor;
+ buttonRef: {current: null | HTMLButtonElement};
+ imageRef: {current: null | HTMLElement};
+ maxWidth?: number;
+ onResizeEnd: (width: 'inherit' | number, height: 'inherit' | number) => void;
+ onResizeStart: () => void;
+ setShowCaption: (show: boolean) => void;
+ showCaption: boolean;
+ captionsEnabled: boolean;
+}): JSX.Element {
+ const controlWrapperRef = useRef
+ {!showCaption && captionsEnabled && (
+
+ )}
+
{
+ handlePointerDown(event, Direction.north);
+ }}
+ />
+
{
+ handlePointerDown(event, Direction.north | Direction.east);
+ }}
+ />
+
{
+ handlePointerDown(event, Direction.east);
+ }}
+ />
+
{
+ handlePointerDown(event, Direction.south | Direction.east);
+ }}
+ />
+
{
+ handlePointerDown(event, Direction.south);
+ }}
+ />
+ setContactsModalVisible(false)} footer={null} >
+ setContactsModalVisible(false)} footer={null}>
{contactListData.map((contact) => (
-
+
))}
{ setNewChatModalVisible(false); setContactsModalVisible(false);}}
+ onCreate={() => {
+ setNewChatModalVisible(false);
+ setContactsModalVisible(false);
+ }}
onCancel={() => setNewChatModalVisible(false)}
- />
-
+ />
+ {/* {
+ domEvent.stopPropagation();
+ setPickV(Wabas_mapped[key]);
+ onSelect?.(Wabas_mapped[key]);
+ },
+ }}>
+
+ {/*
+
+ );
+};
+
+const ReplyWrapper = () => {
+ const [mobile] = useStyleStore(state => [state.mobile]);
+ const [activeChannel, setActiveChannel] = useState(DEFAULT_CHANNEL);
+ const onChannelTabsChange = (activeKey) => {
+ setActiveChannel(activeKey);
+ };
+
+ const activeMessages = useConversationStore(
+ useShallow((state) => (state.currentConversation.sn && state.activeConversations[state.currentConversation.sn] ? state.activeConversations[state.currentConversation.sn] : []))
+ );
+ useEffect(() => {
+ const len = activeMessages.length;
+ const thisLastChannel = activeMessages.length > 0 ? activeMessages[len - 1]?.type : DEFAULT_CHANNEL;
+ const channel = thisLastChannel === 'email' ? 'email' : DEFAULT_CHANNEL;
+ setActiveChannel(channel);
+ return () => {};
+ }, [activeMessages]);
+
+ const replyTypes = [
+ { key: 'waba', label: mobile ? '' : (
{
+ handlePointerDown(event, Direction.south | Direction.west);
+ }}
+ />
+ ({
+ ...t,
+ key: `tag_${t.key}`,
+ style: { color: stringToColour(t.label) },
+ icon: itemTagsKeys.includes(t.key) ? setContextMenuOpen(false)} />} placement='bottom' trigger={['click']}>
+ {/* todo: refresh list */}
+
+
+
+ ),
+ key: 'new_tags',
+ },
+ ],
+ onTitleClick: ({ key, domEvent }) => {
+ console.log(']]]', key);
+ },
+ },
+ { label: '编辑联系人', key: 'edit0' },
+ // {
+ // label: (
+ // <>
+ // {/* todo: refresh list */}
+ // setContextMenuOpen(false)} />} placement='bottom' trigger={['click']}>
+ // {/* */}
+ //
+ //
+ // ),
+ // key: 'remark',
+ // },
+ { type: 'divider' },
+ { label: '隐藏会话', key: 'close', danger: true },
+ ],
+ triggerSubMenuAction: 'click',
+ openKeys: openTags,
+ onOpenChange: (openKeys) => {
+ if (!isEmpty(openKeys) && contextMenuOpen) {
+ setOpenTags(openKeys);
+ }
+ },
+ onClick: ({ key, domEvent }) => {
+ domEvent.stopPropagation();
+ if (key.startsWith('tag_')) {
+ const tagKey = key.replace('tag_', '');
+ return handleConversationItemTags(item, tagKey);
+ }
+ switch (key) {
+ case 'top':
+ setContextMenuOpen(false);
+ return handleConversationItemTop(item);
+ case 'unread':
+ setContextMenuOpen(false);
+ return handleConversationItemUnread(item);
+ // case 'remark':
+ // setOpenTags([]);
+ // return;
+ case 'close':
+ setContextMenuOpen(false);
+ return handleConversationItemClose(item);
+ case 'edit0':
+ setOpenTags([]);
+ setEditingChat({...item, is_new: false});
+ return setNewChatModalVisible(true);
+
+ default:
+ // setContextMenuOpen(false);
+ console.log('unknown key', key);
+
+ return;
+ }
+ },
+ }}>
+
+ {/* email toolbar */}
+
+ {
+ setVisible(value);
+ },
+ toolbarRender: (_, { transform: { scale }, actions: { onRotateLeft, onRotateRight, onZoomOut, onZoomIn }, current }) => (
+
+ handleReSend(current)} className='cursor-pointer hover:opacity-30' title='重发' /> */}
+
+ ),
+ }}>
+
+
+ );
+ };
+
+ const Videos = () => {
+ const data = historyMessages.filter((item) => item.type === 'video').reverse();
+
+ const [videoUrl, setVideoUrl] = useState('');
+ const [openVideoPlay, setOpenVideoPlay] = useState(false);
+ const handleOpenVideoPlay = (vurl) => {
+ setVideoUrl(vurl);
+ setOpenVideoPlay(true);
+ setOpenPopup(false);
+ };
+
+ return (
+ <>
+
diff --git a/src/views/Conversations/Online/MessagesWrapper.jsx b/src/views/Conversations/Online/MessagesWrapper.jsx
index 0e6a267..4271d48 100644
--- a/src/views/Conversations/Online/MessagesWrapper.jsx
+++ b/src/views/Conversations/Online/MessagesWrapper.jsx
@@ -7,6 +7,11 @@ import { fetchCleanUnreadMsgCount, fetchMessages, MESSAGE_PAGE_SIZE } from '@/ac
import useAuthStore from '@/stores/AuthStore';
import { useVisibilityState } from '@/hooks/useVisibilityState';
import ConversationNewItem from './ConversationsNewItem';
+import emailItem from './Components/emailSent.json';
+import emailReItem from './Components/emailRe.json';
+// import EmailEditor from './Input/bak/EmailEditor';
+import EmailEditorPopup from './Input/EmailEditorPopup';
+import EmailDetail from './Components/EmailDetail';
const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
const userId = useAuthStore((state) => state.loginUser.userId);
@@ -54,6 +59,11 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
const getFirstPageMessages = async (item) => {
setMsgLoading(true);
const data = await fetchMessages({ opisn: forceGetMessages ? (currentConversation.opi_sn || '') : userId, whatsappid: item.whatsapp_phone_number, lasttime: '' });
+
+ // test:
+ data.push(emailItem);
+ data.push(emailReItem);
+
setMsgLoading(false);
receivedMessageList(item.sn, data);
const thisLastTime = data.length > 0 ? data[0].orgmsgtime : '';
@@ -115,28 +125,77 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
const handleContactClick = (data) => {
return data.length > 1 ? handleContactListClick(data) : handleContactItemClick(data[0]);
}
+ // EmailEditor
+
+ const [openEmailEditor, setOpenEmailEditor] = useState(false);
+ const [fromEmail, setFromEmail] = useState('');
+ const [ReferEmailMsg, setReferEmailMsg] = useState('');
+ const onOpenEditor = (emailOrigin) => {
+ const { replyToEmail: email_addr, content } = emailOrigin;
+ setOpenEmailEditor(true);
+ setFromEmail(email_addr);
+ setReferEmailMsg(emailOrigin);
+ };
+
+ const [openEmailDetail, setOpenEmailDetail] = useState(false);
+ const [emailDetail, setEmailDetail] = useState({});
+ const onOpenEmail = (email_detail) => {
+ setOpenEmailDetail(true);
+ setEmailDetail(email_detail);
+ }
+
return (
<>
- {
+ handlePointerDown(event, Direction.west);
+ }}
+ />
+
+) {
+ return args.filter(Boolean).join(' ');
+}
diff --git a/src/components/LexicalEditor/utils/setFloatingElemPositionForLinkEditor.ts b/src/components/LexicalEditor/utils/setFloatingElemPositionForLinkEditor.ts
new file mode 100644
index 0000000..8b45582
--- /dev/null
+++ b/src/components/LexicalEditor/utils/setFloatingElemPositionForLinkEditor.ts
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+const VERTICAL_GAP = 10;
+const HORIZONTAL_OFFSET = 5;
+
+export function setFloatingElemPositionForLinkEditor(
+ targetRect: DOMRect | null,
+ floatingElem: HTMLElement,
+ anchorElem: HTMLElement,
+ verticalGap: number = VERTICAL_GAP,
+ horizontalOffset: number = HORIZONTAL_OFFSET,
+): void {
+ const scrollerElem = anchorElem.parentElement;
+
+ if (targetRect === null || !scrollerElem) {
+ floatingElem.style.opacity = '0';
+ floatingElem.style.transform = 'translate(-10000px, -10000px)';
+ return;
+ }
+
+ const floatingElemRect = floatingElem.getBoundingClientRect();
+ const anchorElementRect = anchorElem.getBoundingClientRect();
+ const editorScrollerRect = scrollerElem.getBoundingClientRect();
+
+ let top = targetRect.top - verticalGap;
+ let left = targetRect.left - horizontalOffset;
+
+ if (top < editorScrollerRect.top) {
+ top += floatingElemRect.height + targetRect.height + verticalGap * 2;
+ }
+
+ if (left + floatingElemRect.width > editorScrollerRect.right) {
+ left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+ }
+
+ top -= anchorElementRect.top;
+ left -= anchorElementRect.left;
+
+ floatingElem.style.opacity = '1';
+ floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}
diff --git a/src/components/LexicalEditor/utils/url.ts b/src/components/LexicalEditor/utils/url.ts
new file mode 100644
index 0000000..7a05a5e
--- /dev/null
+++ b/src/components/LexicalEditor/utils/url.ts
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const SUPPORTED_URL_PROTOCOLS = new Set([
+ 'http:',
+ 'https:',
+ 'mailto:',
+ 'sms:',
+ 'tel:',
+]);
+
+export function sanitizeUrl(url: string): string {
+ try {
+ const parsedUrl = new URL(url);
+ // eslint-disable-next-line no-script-url
+ if (!SUPPORTED_URL_PROTOCOLS.has(parsedUrl.protocol)) {
+ return 'about:blank';
+ }
+ } catch {
+ return url;
+ }
+ return url;
+}
+
+// Source: https://stackoverflow.com/a/8234912/2013580
+const urlRegExp = new RegExp(
+ /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[\w]*))?)/,
+);
+export function validateUrl(url: string): boolean {
+ // TODO Fix UI for link insertion; it should never default to an invalid URL such as https://.
+ // Maybe show a dialog where they user can type the URL before inserting it.
+ return url === 'https://' || urlRegExp.test(url);
+}
diff --git a/src/stores/ConversationStore.js b/src/stores/ConversationStore.js
index b46974d..9a54ed7 100644
--- a/src/stores/ConversationStore.js
+++ b/src/stores/ConversationStore.js
@@ -2,7 +2,7 @@ import { create } from 'zustand';
import { RealTimeAPI } from '@/channel/realTimeAPI';
import { olog, isEmpty } from '@/utils/commons';
import { receivedMsgTypeMapped, handleNotification } from '@/channel/whatsappUtils';
-import { fetchConversationsList, fetchTemplates, fetchConversationsSearch, UNREAD_MARK } from '@/actions/ConversationActions';
+import { fetchConversationsList, fetchTemplates, fetchConversationsSearch, UNREAD_MARK, fetchTags } from '@/actions/ConversationActions';
import { devtools } from 'zustand/middleware';
import { WS_URL, DATETIME_FORMAT } from '@/config';
import dayjs from 'dayjs';
@@ -47,6 +47,35 @@ const initialConversationState = {
};
+// 顾问的自定义标签
+const tagsSlice = (set) => ({
+ tags: [],
+ setTags: (tags) => set({ tags }),
+ addTag: (tag) => set((state) => ({ tags: [...state.tags, tag] })),
+ removeTag: (tag) => set((state) => ({ tags: state.tags.filter((t) => t.key !== tag.key) })),
+ updateTag: (tag) => set((state) => ({ tags: state.tags.map((t) => (t.key === tag.key ? tag : t)) })),
+ resetTags: () => set({ tags: [] }),
+});
+
+// 会话筛选
+const filterObj = {
+ search: '',
+ otype: '',
+ tags: [],
+ status: [],
+ labels: [],
+};
+const filterSlice = (set) => ({
+ filter: structuredClone(filterObj),
+ setFilter: (filter) => set({ filter }),
+ setFilterSearch: (search) => set((state) => ({ filter: { ...state.filter, search } })),
+ setFilterOtype: (otype) => set((state) => ({ filter: {...state.filter, otype } })),
+ setFilterTags: (tags) => set((state) => ({ filter: {...state.filter, tags } })),
+ setFilterStatus: (status) => set((state) => ({ filter: {...state.filter, status } })),
+ setFilterLabels: (labels) => set((state) => ({ filter: {...state.filter, labels } })),
+ resetFilter: () => set({ filter: structuredClone(filterObj) }),
+})
+// WABA 模板
const templatesSlice = (set) => ({
templates: [],
setTemplates: (templates) => set({ templates }),
@@ -362,6 +391,8 @@ export const useConversationStore = create(
...messageSlice(set, get),
...referenceMsgSlice(set, get),
...complexMsgSlice(set, get),
+ ...tagsSlice(set, get),
+ ...filterSlice(set, get),
// state actions
addError: (error) => set((state) => ({ errors: [...state.errors, error] })),
@@ -369,7 +400,7 @@ export const useConversationStore = create(
// side effects
fetchInitialData: async (userIds) => {
- const { addToConversationList, setTemplates, setInitial, setClosedConversationList } = get();
+ const { addToConversationList, setTemplates, setInitial, setClosedConversationList, setTags } = get();
const conversationsList = await fetchConversationsList({ opisn: userIds });
addToConversationList(conversationsList);
@@ -380,6 +411,9 @@ export const useConversationStore = create(
const closedList = await fetchConversationsSearch({ opisn: userIds, session_enable: 0 });
setClosedConversationList(closedList);
+ const myTags = await fetchTags();
+ setTags(myTags);
+
setInitial(true);
},
diff --git a/src/stores/StyleStore.js b/src/stores/StyleStore.js
new file mode 100644
index 0000000..6862205
--- /dev/null
+++ b/src/stores/StyleStore.js
@@ -0,0 +1,10 @@
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+
+export const useStyleStore = create(
+ devtools((set, get) => ({
+ mobile: false,
+ setMobile: (mobile) => set({ mobile }),
+ }))
+);
+export default useStyleStore;
diff --git a/src/utils/commons.js b/src/utils/commons.js
index b5d2587..db6032f 100644
--- a/src/utils/commons.js
+++ b/src/utils/commons.js
@@ -395,12 +395,13 @@ export const cartesianProductArray = (arr, sep = '_', index = 0, prefix = '') =>
return result;
};
-export const stringToColour = (str) => {
+export const stringToColour = (str='', withFlag = true) => {
var hash = 0
+ if (str.length === 0) return hash;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash)
}
- var colour = '#'
+ var colour = withFlag ? '#' : ''
for (let i = 0; i < 3; i++) {
var value = (hash >> (i * 8)) & 0xff
value = (value % 150) + 50
diff --git a/src/views/ChatHistory.jsx b/src/views/ChatHistory.jsx
index 10c072d..96106c0 100644
--- a/src/views/ChatHistory.jsx
+++ b/src/views/ChatHistory.jsx
@@ -33,7 +33,7 @@ const Index = (props) => {
const getConversationsList = async () => {
setConversationsListLoading(true);
- const params = flush(pick(formValues, ['opisn', 'whatsapp_id', 'search', 'from_date', 'end_date', 'coli_id', 'lasttime']));
+ const params = flush(pick(formValues, ['opisn', 'whatsapp_id', 'search', 'from_date', 'end_date', 'coli_id', 'lasttime', 'mtype', 'mchannel']));
const data = await fetchConversationsSearch({ ...params, ...pageParam, pagesize: CONVERSATION_PAGE_SIZE });
setConversationsListLoading(false);
setConversationsList(conversationsList.concat(data));
diff --git a/src/views/ChatWindow.jsx b/src/views/ChatWindow.jsx
index 2366d1a..ce803d3 100644
--- a/src/views/ChatWindow.jsx
+++ b/src/views/ChatWindow.jsx
@@ -4,11 +4,12 @@ import { RightCircleOutlined, RightOutlined, ReloadOutlined, MenuFoldOutlined, M
// import { useParams, useNavigate } from 'react-router-dom';
import MessagesHeader from './Conversations/Online/MessagesHeader';
import MessagesWrapper from './Conversations/Online/MessagesWrapper';
-import InputComposer from './Conversations/Online/InputComposer';
+import InputComposer from './Conversations/Online/Input/InputComposer';
import ConversationsList from './Conversations/Online/ConversationsList';
import CustomerProfile from './Conversations/Online/order/CustomerProfile';
// import { useAuthContext } from '@/stores/AuthContext';
// import useConversationStore from '@/stores/ConversationStore';
+import ReplyWrapper from './Conversations/Online/ReplyWrapper';
import './Conversations/Conversations.css';
@@ -45,7 +46,7 @@ const ChatWindow = () => {
- :
diff --git a/src/views/Conversations/Conversations.css b/src/views/Conversations/Conversations.css
index ecfc770..a10d1bc 100644
--- a/src/views/Conversations/Conversations.css
+++ b/src/views/Conversations/Conversations.css
@@ -102,11 +102,25 @@
}
.chatwindow-wrapper .rce-citem {
background: transparent;
+ height: auto;
+ min-height: 72px;
}
.chatwindow-wrapper .bg-transparent .rce-mbox{
background: unset;
/* box-shadow: none; */
}
+.chatwindow-wrapper .rce-mbox{
+ margin-left: 10px;
+ margin-right: 5px;
+}
+.chatwindow-wrapper .rce-mbox.rce-mbox-right{
+ margin-left: 5px;
+ margin-right: 10px;
+}
+.chatwindow-wrapper .rce-mbox.rce-mbox--clear-notch{
+ margin-left: 5px;
+ margin-right: 5px;
+}
.chatwindow-wrapper .bg-transparent .rce-mbox-left-notch,
.chatwindow-wrapper .bg-transparent .rce-mbox-right-notch
{
@@ -135,7 +149,9 @@
content: none;
}
.chatwindow-wrapper .rce-mbox-photo--img img{
- width: auto;
+ /* width: auto; */
+ max-width: 100%;
+ object-fit: contain;
}
.chatwindow-wrapper .failed-msg .rce-mbox-photo--img,
.chatwindow-wrapper .failed-msg .rce-mbox-video--video
@@ -160,6 +176,7 @@
}
.chatwindow-wrapper .rce-citem-avatar{
border-bottom: 1px solid #0000000d;
+ padding-left: 0;
}
.chatwindow-wrapper .rce-avatar-letter{
margin-top: 0;
@@ -241,6 +258,17 @@
animation-duration: 2s;
}
+.chatwindow-wrapper .reply-wrapper .ant-tabs-nav {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.chatwindow-wrapper .reply-wrapper .ant-tabs-card >.ant-tabs-nav .ant-tabs-tab-active, .ant-tabs-card >div>.ant-tabs-nav .ant-tabs-tab-active{
+ background: #e5e7eb;
+ /* background: #f3f4f6; */
+ border-top: none;
+ border: 1px solid #a7f3d0;
+ border-top: none;
+}
/**
* Mobile chat ------------------------------------------------------------------------------------
diff --git a/src/views/Conversations/History/MessagesList.jsx b/src/views/Conversations/History/MessagesList.jsx
index 8dbb8ee..202502c 100644
--- a/src/views/Conversations/History/MessagesList.jsx
+++ b/src/views/Conversations/History/MessagesList.jsx
@@ -151,8 +151,8 @@ const MessagesList = ({ ...props }) => {
buttonsArr = componentsObj?.buttons?.reduce((r, c) => r.concat(c.buttons), []);
}
- const parts = str.split(/(https?:\/\/[^\s]+|\p{Emoji_Presentation})/gmu).filter((s) => s !== '');
- const links = str.match(/https?:\/\/[\S]+/gi) || [];
+ const parts = str.split(/(https?:\/\/[^\s()]+|\p{Emoji_Presentation})/gmu).filter((s) => s !== '');
+ const links = str.match(/https?:\/\/[^\s()]+/gi) || [];
const emojis = str.match(/([\u2700-\u27BF]|[\uE000-\uF8FF]|\uD83C[\uDC00-\uDFFF]|\uD83D[\uDC00-\uDFFF]|[\u2011-\u26FF]|\uD83E[\uDD10-\uDDFF])/g) || [];
const extraClass = isEmpty(emojis) ? '' : '';
const objArr = parts.reduce((prev, curr, index) => {
diff --git a/src/views/Conversations/History/SearchForm.jsx b/src/views/Conversations/History/SearchForm.jsx
index 961f4ac..0315086 100644
--- a/src/views/Conversations/History/SearchForm.jsx
+++ b/src/views/Conversations/History/SearchForm.jsx
@@ -1,6 +1,6 @@
/* eslint-disable react/display-name */
import { memo } from 'react';
-import { Form, Flex, Input, Button, DatePicker } from 'antd';
+import { Form, Flex, Input, Button, DatePicker, Select } from 'antd';
import SearchInput from '@/components/SearchInput';
import { isNotEmpty } from '@/utils/commons';
import { fetchSalesAgentWithDD as fetchSalesAgent, fetchCustomerList } from '@/actions/CommonActions';
@@ -39,6 +39,22 @@ const SearchForm = memo(function ({ initialValues, onSubmit, onReset }) {
+
+
+
+
+
+
diff --git a/src/views/Conversations/Online/Components/BubbleEmail.jsx b/src/views/Conversations/Online/Components/BubbleEmail.jsx
new file mode 100644
index 0000000..f63cef7
--- /dev/null
+++ b/src/views/Conversations/Online/Components/BubbleEmail.jsx
@@ -0,0 +1,68 @@
+import { createContext, useEffect, useState, memo } from 'react';
+import { Button } from 'antd';
+import { MailFilled, MailOutlined, WhatsAppOutlined } from '@ant-design/icons';
+import { MessageBox } from 'react-chat-elements';
+import { groupBy, isEmpty, } from '@/utils/commons';
+
+const ChatboxEmail = ({ onOpenEditor, onOpenEmail, ...message }) => {
+
+ const RenderText = memo(function renderText({ className, email, sender }) {
+ return (
+
+ setReferenceMsg(message)}
+ onReplyMessageClick={() => scrollToMessage(message.reply.id)}
+ onOpen={() => handlePreview(message)}
+ onTitleClick={() => handlePreview(message)}
+ // title={
+
+ );
+};
+export default ChatListFilter;
diff --git a/src/views/Conversations/Online/Components/ChatListItem.jsx b/src/views/Conversations/Online/Components/ChatListItem.jsx
new file mode 100644
index 0000000..7ecda66
--- /dev/null
+++ b/src/views/Conversations/Online/Components/ChatListItem.jsx
@@ -0,0 +1,323 @@
+import React, { useEffect, useState } from 'react';
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import { Dropdown, Input, Button, Tag, Popover, Form } from 'antd';
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { fetchConversationItemClose, fetchConversationsSearch, fetchConversationItemUnread, fetchConversationItemTop, postConversationTags, deleteConversationTags } from '@/actions/ConversationActions';
+import { ChatItem } from 'react-chat-elements';
+// import ConversationsNewItem from './ConversationsNewItem';
+import { isEmpty, stringToColour } from '@/utils/commons';
+import useConversationStore from '@/stores/ConversationStore';
+import useAuthStore from '@/stores/AuthStore';
+import ChannelLogo from './ChannelLogo';
+import { DeliverIcon, ReadIcon, SentIcon } from '@/components/Icons';
+import useStyleStore from '@/stores/StyleStore';
+
+const TagColorStyle = (tag) => {
+ const color = stringToColour(tag);
+ return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` }
+}
+const TagColorStyle_2 = (tag, outerStyle = false) => {
+ const color = stringToColour(tag);
+ const outerStyleObj = outerStyle ? { borderColor: `${color}66`, } : {};
+ return { color: `${color}`, ...outerStyleObj };
+};
+
+const NewTagForm = ({onSubmit,...props}) => {
+ const [form] = Form.useForm();
+ const [subLoding, setSubLoding] = useState(false);
+ const [tags, addTag] = useConversationStore(state => [state.tags, state.addTag]);
+ const onFinish = async (values) => {
+ console.log('Received values of form[new_tag]: ', values);
+ setSubLoding(true);
+ if (typeof onSubmit === 'function') {
+ onSubmit();
+ }
+ // debug:
+ setTimeout(() => {
+ setSubLoding(false);
+ addTag({ label: values.tag_label, key: values.tag_label, value: values.tag_label })
+ }, 2000);
+ form.resetFields();
+ }
+ return (
+
+ );
+};
+const EditChatMemoForm = ({onSubmit,...props}) => {
+ const [form] = Form.useForm();
+ const [subLoding, setSubLoding] = useState(false);
+ const onFinish = async (values) => {
+ console.log('Received values of form[chat_memo]: ', values);
+ setSubLoding(true);
+ // debug:
+ setTimeout(() => {
+ setSubLoding(false);
+ }, 2000);
+ if (typeof onSubmit === 'function') {
+ onSubmit();
+ }
+ form.resetFields();
+ }
+ return (
+
+ );
+};
+
+
+const ChatListItem = (({item, refreshConversationList,setListUpdateFlag,onSwitchConversation,tabSelectedConversation, setNewChatModalVisible,setEditingChat,...props}) => {
+ const [mobile] = useStyleStore((state) => [state.mobile]);
+
+ const routerReplace = mobile === false ? true : false; // : true;
+ const routePrefix = mobile === false ? `/order/chat` : `/m/chat`;
+ const { state: orderRow } = useLocation();
+ const { coli_guest_WhatsApp } = orderRow || {};
+ const { order_sn } = useParams();
+ const navigate = useNavigate();
+ const userId = useAuthStore((state) => state.loginUser.userId);
+ const initialState = useConversationStore((state) => state.initialState);
+ const [currentConversation, setCurrentConversation] = useConversationStore((state) => [state.currentConversation, state.setCurrentConversation]);
+ const conversationsList = useConversationStore((state) => state.conversationsList);
+ const [conversationsListLoading, setConversationsListLoading] = useConversationStore((state) => [state.conversationsListLoading, state.setConversationsListLoading]);
+ const addToConversationList = useConversationStore((state) => state.addToConversationList);
+ const delConversationitem = useConversationStore((state) => state.delConversationitem);
+
+ const closedConversationsList = useConversationStore((state) => state.closedConversationsList);
+ const setClosedConversationList = useConversationStore((state) => state.setClosedConversationList);
+
+ const itemTagsKeys = (item.tags || []).map(t => t.key);
+ const [tags, addTag] = useConversationStore(state => [state.tags, state.addTag]);
+ const handleConversationItemClose = async (item) => {
+ await fetchConversationItemClose({ conversationid: item.sn, opisn: item.opi_sn });
+ delConversationitem(item);
+ if (String(order_sn) === String(item.coli_sn)) {
+ navigate(routePrefix, { replace: routerReplace });
+ }
+ const _clist = await fetchConversationsSearch({ opisn: userId, session_enable: 0 });
+ setClosedConversationList(_clist);
+ };
+
+ const handleConversationItemUnread = async (item) => {
+ await fetchConversationItemUnread({ conversationid: item.sn });
+ await refreshConversationList();
+ setListUpdateFlag(Math.random());
+ }
+
+ const handleConversationItemTop = async (item) => {
+ await fetchConversationItemTop({ conversationid: item.sn, top_state: item.top_state === 0 ? 1 : 0 });
+ await refreshConversationList();
+ setListUpdateFlag(Math.random());
+ }
+
+ const handleConversationItemTags = async (item, tagKey) => {
+ const _tags = item.tags || [];
+ if (_tags.includes(tagKey)) {
+ await deleteConversationTags({ conversationid: item.sn, tag_id: tagKey, opisn: userId })
+ } else {
+ await postConversationTags({ conversationid: item.sn, tag_id: tagKey, opisn: userId });
+ }
+ await refreshConversationList();
+ setListUpdateFlag(Math.random());
+ }
+
+ const [contextMenuOpen, setContextMenuOpen] = useState(false);
+ const handleContextMenuOpenChange = (nextOpen, info) => {
+ if (info.source === 'trigger' || nextOpen) {
+ setContextMenuOpen(nextOpen);
+ }
+ };
+
+ const [openTags, setOpenTags] = useState([]);
+ useEffect(() => {
+ if (contextMenuOpen === false) {
+ setOpenTags([]);
+ }
+
+ return () => {};
+ }, [contextMenuOpen])
+
+ return (
+ <>
+ {
+ handlePointerDown(event, Direction.north | Direction.west);
+ }}
+ />
+
+ );
+}
diff --git a/src/components/LexicalEditor/ui/Input.css b/src/components/LexicalEditor/ui/Input.css
new file mode 100644
index 0000000..60eb2f1
--- /dev/null
+++ b/src/components/LexicalEditor/ui/Input.css
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.Input__wrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ margin-bottom: 10px;
+}
+.Input__label {
+ display: flex;
+ flex: 1;
+ color: #666;
+}
+.Input__input {
+ display: flex;
+ flex: 2;
+ border: 1px solid #999;
+ padding-top: 7px;
+ padding-bottom: 7px;
+ padding-left: 10px;
+ padding-right: 10px;
+ font-size: 16px;
+ border-radius: 5px;
+ min-width: 0;
+}
diff --git a/src/components/LexicalEditor/ui/TextInput.tsx b/src/components/LexicalEditor/ui/TextInput.tsx
new file mode 100644
index 0000000..7b1765f
--- /dev/null
+++ b/src/components/LexicalEditor/ui/TextInput.tsx
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import './Input.css';
+
+import * as React from 'react';
+import {HTMLInputTypeAttribute} from 'react';
+
+type Props = Readonly<{
+ 'data-test-id'?: string;
+ label: string;
+ onChange: (val: string) => void;
+ placeholder?: string;
+ value: string;
+ type?: HTMLInputTypeAttribute;
+}>;
+
+export default function TextInput({
+ label,
+ value,
+ onChange,
+ placeholder = '',
+ 'data-test-id': dataTestId,
+ type = 'text',
+}: Props): JSX.Element {
+ return (
+
+
+ {
+ onChange(e.target.value);
+ }}
+ data-test-id={dataTestId}
+ />
+
+ );
+}
diff --git a/src/components/LexicalEditor/utils/getSelectedNode.ts b/src/components/LexicalEditor/utils/getSelectedNode.ts
new file mode 100644
index 0000000..b106e4c
--- /dev/null
+++ b/src/components/LexicalEditor/utils/getSelectedNode.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import {$isAtNodeEnd} from '@lexical/selection';
+import {ElementNode, RangeSelection, TextNode} from 'lexical';
+
+export function getSelectedNode(
+ selection: RangeSelection,
+): TextNode | ElementNode {
+ const anchor = selection.anchor;
+ const focus = selection.focus;
+ const anchorNode = selection.anchor.getNode();
+ const focusNode = selection.focus.getNode();
+ if (anchorNode === focusNode) {
+ return anchorNode;
+ }
+ const isBackward = selection.isBackward();
+ if (isBackward) {
+ return $isAtNodeEnd(focus) ? anchorNode : focusNode;
+ } else {
+ return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
+ }
+}
diff --git a/src/components/LexicalEditor/utils/joinClasses.ts b/src/components/LexicalEditor/utils/joinClasses.ts
new file mode 100644
index 0000000..40a2dd5
--- /dev/null
+++ b/src/components/LexicalEditor/utils/joinClasses.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default function joinClasses(
+ ...args: Array handlePreview(message)} className={`text-sm leading-5 emoji-text whitespace-pre-wrap cursor-pointer ${className}`} key={'msg-text'}>
+ {sender === 'me' &&
+
+ );
+ });
+ const handlePreview = (message) => {
+ console.log('handlePreview');
+ if (typeof onOpenEmail === 'function') {
+ onOpenEmail(message);
+ }
+ }
+ return (
+ From: {email.fromName} <{email.fromEmail}>
}
+ To: {email.toName} <{email.toEmail}>
+ Subject: {email.subject}
+ +
{email.abstract}
+
+ {'text' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && 
}
+ {['document', 'video'].includes((headerObj?.parameters?.[0]?.type || '').toLowerCase()) && (
+
+ [ {headerObj.parameters[0].type} ]
+
+ )}
+
+ ) : null}
+ {(objArr || []).map((part, index) => {
+ if (part.type === 'link') {
+ return (
+
+ {part.key}
+
+ );
+ } else if (part.type === 'number') {
+ return (
+ openNewChatModal({ wa_id: part.key, wa_name: part.key })}>
+ {part.key}
+
+ );
+ } else {
+ // if (part.type === 'emoji')
+ return part.key;
+ }
+ })}
+ {footerObj ? {headerObj.text}
}
+ {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && }
+ {['document', 'video'].includes((headerObj?.parameters?.[0]?.type || '').toLowerCase()) && (
+
+ [ {headerObj.parameters[0].type} ]
+
+ )}
+ {footerObj.text}
: null}
+ {buttonsArr && buttonsArr.length > 0 ? (
+
+ {buttonsArr.map((btn, index) =>
+ btn.type.toLowerCase() === 'url' ? (
+
+ ) : btn.type.toLowerCase() === 'phone_number' ? (
+
+ ) : (
+
+ )
+ )}
+
+ ) : null}
+
+ );
+ });
+ return (
+ 发消息
,
+ },
+ ]
+ : []),
+ {
+ onClickButton: () => {
+ navigator.clipboard.writeText(message.text);
+ appMessage.success('复制成功😀');
+ },
+ Component: () => 复制
,
+ },
+ ],
+ }
+ : {})}
+ />
+ );
+};
+export default BubbleIM;
diff --git a/src/views/Conversations/Online/Components/ChannelLogo.jsx b/src/views/Conversations/Online/Components/ChannelLogo.jsx
new file mode 100644
index 0000000..f9c4408
--- /dev/null
+++ b/src/views/Conversations/Online/Components/ChannelLogo.jsx
@@ -0,0 +1,17 @@
+import React, { } from 'react';
+import { WhatsAppOutlined, MailOutlined } from '@ant-design/icons';
+import { WABIcon, } from '@/components/Icons';
+
+const ChannelLogo = ({channel}) => {
+ switch (channel) {
+ case 'waba':
+ return
+ setFilterOtype(e.target.value)} />
+
+
+ }
+ content={
+ <>
+
+
+ }>
+ {/* : 更多会话筛选
+
+
+ {/*
+ {/*
+ }
+ date={item.last_received_time || item.last_send_time}
+ unread={item.unread_msg_count > 99 ? 0 : item.unread_msg_count}
+ // className={[
+ // String(item.sn) === String(currentConversation.sn) ? '__active text-primary bg-whatsapp-bg' : '',
+ // String(item.sn) === String(tabSelectedConversation?.sn) ? ' bg-neutral-200' : '',
+ // ].join(' ')}
+ // statusText={
+ {tags.map((tag) => {tag.label} )}
+
*/}
+
+ {[
+ { label: '已付款', key: 'p1' },
+ { label: '地接', key: 'p2' },
+ ]?.map((tag) => (
+
+ {tag.label}
+
+ ))}
+ {/* 附加备注 */}
+
+
+ {/*
+
+ }>
+ 回复
+
+
*/}
+ {emailOrigin.subject}
+
+
+
+
+
+
+
+ {(emailOrigin.fromName || '').substring(0, 1)}
+
+
+
+ {emailOrigin.fromName}
+ {emailOrigin.fromEmail}
+
+
+
+
+
+
+
+ {/* {emailDetail.dateText}
*/}
+ {emailDetail.localDate}
+
+ 收件人:
+ {emailOrigin.toName}
+ <{emailOrigin.toEmail}>
+
+ {emailOrigin.cc && (
+
+ 抄送:
+ {emailOrigin.cc}
+
+ )}
+ {emailOrigin.bcc && (
+
+ 密送:
+ {emailOrigin.bcc}
+
+ )}
+ {/*
+ 主题:
+ {emailOrigin.subject}
+
*/}
+ {emailOrigin.body}
*/}
+
+ {/* {emailOrigin.attachments.map(attachment =>
*/}
+ {attachment.name}
)}
+ {!loading ? (
+
+ ) : (
+
+ ) : null;
+
+ const handleCopyClick = (url) => {
+ try {
+ navigator.clipboard.writeText(url);
+ appMessage.success('复制成功😀');
+ } catch (error) {
+ appMessage.warning('不支持自动复制, 请手动复制');
+ }
+ };
+
+ useEffect(() => {
+ if (activeMessages.length > 0) {
+ setHistoryMessages(activeMessages);
+ }
+ const { opi_sn: opisn, whatsapp_phone_number: whatsappid } = currentConversation;
+ setParamsForMsgList({ loadPrePage: true, pretime: activeMessages.length > 0 ? activeMessages[0].orgmsgtime : '', opisn, whatsappid });
+
+ return () => {};
+ }, [activeMessages, currentConversation.sn]);
+
+ const Album = () => {
+ const data = historyMessages.filter((item) => item.type === 'photo').reverse();
+ const byDate = groupBy(data, (item) => item.localDate.slice(0, 10));
+
+ const [visible, setVisible] = useState(false);
+ const handleReSend = (currentIndex) => {
+ console.log('handleReSend', currentIndex, data[currentIndex]);
+ // todo: 没有先push到窗口上, 导致没有更新
+ const item = data[currentIndex];
+ const msgObjMerge = {
+ sender: 'me',
+ senderName: 'me',
+ to: currentConversation.whatsapp_phone_number,
+ date: new Date(),
+ status: 'waiting',
+ // ...msgObj,
+ data: { link: item.data.uri, dataUri: item.data.uri, uri: item.data.uri, loading: 1 }, // ...fileObj.data,
+ id: `${currentConversation.sn}.${uuid()}`,
+ type: item.whatsapp_msg_type,
+ // name: item.title,
+ };
+ const contentToRender = sentMsgTypeMapped[item.type].contentToRender(msgObjMerge);
+ sentOrReceivedNewMessage(contentToRender.conversationid, contentToRender);
+
+ const contentToSend = sentMsgTypeMapped[item.type].contentToSend(msgObjMerge);
+ websocket.sendMessage({ ...contentToSend, opi_sn: userId, coli_sn: currentConversation.coli_sn, conversationid: currentConversation.sn });
+ setOpenPopup(false);
+ setVisible(false);
+ };
+ return (
+ <>
+ - (
+
+ {byDate[date].map((img) => (
+
+ - (
+
{item.localDate}
+
+ - (
+
- (
+
{item.localDate}
+
+ {/* */}
+ - (
+
{`To: ${emailOrigin.toEmail}`}
+ {item.localDate}
+ Booking ref.VIA-51242561
Product booking ref.TP-T78840699
Ext. booking ref1184791715
Product7137P273 - Qatar: Doha Hamad International Airport (DOH) Al Maha Lounge
SupplierTrippest Tours
Sold byViator.com
Booking channelViator.com
Customerhung, tak wai
Customer emailS-1a553e197d734ab1b19b3ac34c56beb7+1184791715-2efw857tc2u53@expmessaging.tripadvisor.com
Customer phone+66 2 030 4763
DateSun 29.Sep '24
RateQatar: Doha Hamad International Airport (DOH) VIP Lounge Access
PAX1 Adult
Extras
CreatedWed, September 25 2024 @ 16:38
Notes--- Inclusions: ---
Unlimited buffet food & beverage, including alcoholic beverages
Halal and vegetarian food
Wi-Fi connection & flight monitor
International TV channels, newspapers and magazines
Disabled Access
Smoking Room
--- Questions and answers: ---
Departure Flight No : qr817
Departure Airline : qatar
Pick up Location : hkg
Departure Time : 19:10
Viator amount: USD 37.41
", + + "abstract": "阿坝州九寨岷江国际旅行社有限责任公司……", + "replyToEmail": "leioting@hotmail.com", + "replyToName": "LYT", + "senderEmail": "", + "senderName": "", + "bCopyEmail1": "", + "priority": "", + "sent": "2024-02-21T03:37:33.000Z", + "#": "#" + }, + "date": "2024-02-21T03:37:33.000Z", + "dateText": "02-21 11:37", + "localDate": "2024-02-21 11:37:33", + "from": "ycc@hainatravel.com", + "sender": "example@test.com", + "senderName": "example@test.com", + "replyButton": true, + "status": "", + "dateString": "", + "statusCN": "", + "statusTitle": "", + "whatsapp_msg_type": "" +} diff --git a/src/views/Conversations/Online/Components/emailSent.json b/src/views/Conversations/Online/Components/emailSent.json new file mode 100644 index 0000000..88f3cc5 --- /dev/null +++ b/src/views/Conversations/Online/Components/emailSent.json @@ -0,0 +1,50 @@ +{ + "conversationid": 2983, + "sn": 14201, + "msg_direction": "outbound", + "msgtime": "2024-02-21T11:37:33", + "msgtext_AsJOSN": {}, + "msgtype": "email", + "template_AsJOSN": {}, + "messageorigin_AsJOSN": [], + "messageorigin_direction": "outbound", + "orgmsgtime": "2024-02-22T00:41:30", + "msgOrigin": {}, + "id": "emailid.qjMVpfPuxd8cwKs9o3bGIgYL6SWinB5vHRyQX1ZTU4OmeEAtDk07zaF=", + "text": "", + "title": "", + "type": "email", + "emailOrigin": { + "id": "emailid.qjMVpfPuxd8cwKs9o3bGIgYL6SWinB5vHRyQX1ZTU4OmeEAtDk07zaF=", + "status": "read", + "fromName": "LYT-HN", + "fromEmail": "lyt@hainatravel.com", + "toName": "LYT", + "toEmail": "ldj_yt@outlook.com", + "cc": "lioyjun@gmail.com", + "bcc": "", + "subject": "发送示例", + "content": "发送示例发送示例发送示例发送示例", + "abstract": "发送示例发送示例发送示例发送示例发送示例……", + "replyToEmail": "lyt@hainatravel.com", + "replyToName": "LYT-HN", + "senderEmail": "", + "senderName": "", + "bCopyEmail1": "", + "priority": "", + "sent": "2024-02-21T03:37:33.000Z", + "#": "#" + }, + "date": "2024-02-21T03:37:33.000Z", + "dateText": "02-21 11:37", + "localDate": "2024-02-21 11:37:33", + "from": "lyt@hainatravel.com", + "sender": "me", + "senderName": "me", + "replyButton": true, + "status": "sent", + "dateString": "", + "statusCN": "", + "statusTitle": "", + "whatsapp_msg_type": "" +} diff --git a/src/views/Conversations/Online/ConversationBind.jsx b/src/views/Conversations/Online/ConversationBind.jsx index 74a881b..5e83f6d 100644 --- a/src/views/Conversations/Online/ConversationBind.jsx +++ b/src/views/Conversations/Online/ConversationBind.jsx @@ -17,7 +17,7 @@ const fetchBindOrder = async (params) => { // return errcode !== 0 ? {} : result; }; -export const ConversationBindFormModal = ({ mobile, currentConversationID, userId, onBoundSuccess }) => { +export const ConversationBindFormModal = ({ currentConversationID, userId, onBoundSuccess }) => { const [open, setOpen] = useState(false); const [loading, setLoading] = useState(false); // bind loading @@ -119,7 +119,7 @@ export const ConversationBindFormModal = ({ mobile, currentConversationID, userI 现在关联 }
- {
+ const initialConfig = {
+ namespace: 'MyEditor',
+ theme,
+ onError,
+ };
+
+ return (
+
+
+ );
+};
+
+const EmailEditor = ({ mobile, open, setOpen, fromEmail, reference, ...props }) => {
+
+ const [dragDisabled, setDragDisabled] = useState(true);
+ const [bounds, setBounds] = useState({
+ left: 0,
+ top: 0,
+ bottom: 0,
+ right: 0,
+ });
+ const draggleRef = useRef(null);
+ const onStart = (_event, uiData) => {
+ const { clientWidth, clientHeight } = window.document.documentElement;
+ const targetRect = draggleRef.current?.getBoundingClientRect();
+ if (!targetRect) {
+ return;
+ }
+ setBounds({
+ left: -targetRect.left + uiData.x,
+ right: clientWidth - (targetRect.right - uiData.x),
+ top: -targetRect.top + uiData.y,
+ bottom: clientHeight - (targetRect.bottom - uiData.y),
+ });
+ };
+
+
+ return (
+ {
+ if (dragDisabled) {
+ setDragDisabled(false);
+ }
+ }}
+ onMouseOut={() => {
+ setDragDisabled(true);
+ }}
+ // fix eslintjsx-a11y/mouse-events-have-key-events
+ // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
+ onFocus={() => {}}
+ onBlur={() => {}}
+ // end
+ >
+
+ {reference ? '回复: ' : '写邮件: ' }{fromEmail}
+
+ }
+ // closeIcon={<>
-
+
+
+
+
+
+
+
+
+
+
+
-
- } disabled={!textabled || pastedUploading}>
+ }
+ disabled={!textabled || pastedUploading}
+ className={ButtonStyleClsMapped[channel]
+ }>
Send
diff --git a/src/views/Conversations/Online/Input/Template.jsx b/src/views/Conversations/Online/Input/Template.jsx
index 8d7eca0..b8fab86 100644
--- a/src/views/Conversations/Online/Input/Template.jsx
+++ b/src/views/Conversations/Online/Input/Template.jsx
@@ -6,6 +6,7 @@ import useConversationStore from '@/stores/ConversationStore';
import { cloneDeep, getNestedValue, objectMapper, removeFormattingChars, sortArrayByOrder } from '@/utils/commons';
import { replaceTemplateString } from '@/channel/whatsappUtils';
import { isEmpty } from '@/utils/commons';
+import useStyleStore from '@/stores/StyleStore';
const splitTemplate = (template) => {
const placeholders = template.match(/{{(.*?)}}/g) || [];
@@ -21,7 +22,9 @@ const splitTemplate = (template) => {
}, []);
return obj;
};
-const InputTemplate = ({ mobile, disabled = false, invokeSendMessage }) => {
+const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
+ const [mobile] = useStyleStore((state) => [state.mobile]);
+
const searchInputRef = useRef(null);
const { notification } = App.useApp();
const loginUser = useAuthStore((state) => state.loginUser);
@@ -185,7 +188,7 @@ const InputTemplate = ({ mobile, disabled = false, invokeSendMessage }) => {
return (
<>
{textPlaceHolder}
Enter some text...
} ErrorBoundary={LexicalErrorBoundary} />
+ {modal}
+
+
+
+
+ );
+};
+export default EmailComposer;
diff --git a/src/views/Conversations/Online/MessagesHeader.jsx b/src/views/Conversations/Online/MessagesHeader.jsx
index 72d15aa..1baae2e 100644
--- a/src/views/Conversations/Online/MessagesHeader.jsx
+++ b/src/views/Conversations/Online/MessagesHeader.jsx
@@ -4,6 +4,7 @@ import { Flex, Typography, Avatar, Alert, Button, Tooltip, Spin } from 'antd';
import { ReloadOutlined, ApiOutlined } from '@ant-design/icons';
import { LoadingOutlined } from '@ant-design/icons';
import ExpireTimeClock from './ExpireTimeClock';
+import MessageListFilter from './Components/MessageListFilter';
const MessagesHeader = () => {
const userId = useAuthStore(state => state.loginUser.userId);
@@ -59,6 +60,7 @@ const MessagesHeader = () => {
+
- {'text' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && }
- {['document', 'video'].includes((headerObj?.parameters?.[0]?.type || '').toLowerCase()) && (
-
- [ {headerObj.parameters[0].type} ]
-
- )}
-
- ) : null}
- {(objArr || []).map((part, index) => {
- if (part.type === 'link') {
- return (
-
- {part.key}
-
- );
- } else if (part.type === 'number') {
- return (
- openNewChatModal({ wa_id: part.key, wa_name: part.key })}>
- {part.key}
-
- );
- } else {
- // if (part.type === 'emoji')
- return part.key;
- }
- })}
- {footerObj ? {headerObj.text}
}
- {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && }
- {['document', 'video'].includes((headerObj?.parameters?.[0]?.type || '').toLowerCase()) && (
-
- [ {headerObj.parameters[0].type} ]
-
- )}
- {footerObj.text}
: null}
- {buttonsArr && buttonsArr.length > 0 ? (
-
- {buttonsArr.map((btn, index) =>
- btn.type.toLowerCase() === 'url' ? (
-
- ) : btn.type.toLowerCase() === 'phone_number' ? (
-
- ) : (
-
- )
- )}
-
- ) : null}
-
- );
- });
-
const onLoadMore = async () => {
- const newLen = await getMoreMessages();
+ await getMoreMessages();
};
// eslint-disable-next-line react/display-name
const MessageBoxWithRef = forwardRef((props, ref) => (
-
));
@@ -156,48 +69,6 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
ref={(el) => (messageRefs.current[index] = el)}
key={`${message.sn}.${message.id}`}
{...message}
- position={message.sender === 'me' ? 'right' : 'left'}
- onReplyClick={() => setReferenceMsg(message)}
- onReplyMessageClick={() => scrollToMessage(message.reply.id)}
- onOpen={() => handlePreview(message)}
- onTitleClick={() => handlePreview(message)}
- text={发消息
,
- },
- ]
- : []),
- {
- onClickButton: () => {
- navigator.clipboard.writeText(message.text);
- appMessage.success('复制成功😀')
- },
- Component: () => 复制
,
- },
- ],
- }
- : {})}
/>
))}
+
+ );
+};
+export default ReplyWrapper;
diff --git a/src/views/Conversations/Online/order/CustomerProfile.jsx b/src/views/Conversations/Online/order/CustomerProfile.jsx
index e19793c..ad62940 100644
--- a/src/views/Conversations/Online/order/CustomerProfile.jsx
+++ b/src/views/Conversations/Online/order/CustomerProfile.jsx
@@ -144,7 +144,7 @@ const CustomerProfile = () => {
size={"small"}
onClick={() => {
setNewChatModalVisible(true);
- setNewChatFormValues(prev => ({ ...prev, phone_number: customerDetail.whatsapp_phone_number, is_current_order: true }));
+ setNewChatFormValues(prev => ({ ...prev, phone_number: customerDetail.whatsapp_phone_number, name: customerDetail.name, is_current_order: true }));
}}>
{customerDetail.whatsapp_phone_number}
diff --git a/src/views/MobileApp.jsx b/src/views/MobileApp.jsx
index 97dc22e..e954bb3 100644
--- a/src/views/MobileApp.jsx
+++ b/src/views/MobileApp.jsx
@@ -8,6 +8,7 @@ import { DownOutlined } from '@ant-design/icons'
import { NavLink, Outlet, Link } from 'react-router-dom'
import ReloadPrompt from './ReloadPrompt'
import ClearCache from './ClearCache'
+import useStyleStore from '@/stores/StyleStore';
import { BUILD_VERSION } from '@/config'
@@ -21,7 +22,11 @@ function MobileApp() {
token: { colorBgContainer },
} = theme.useToken()
+ const [setMobile] = useStyleStore((state) => [state.setMobile]);
+
useEffect(() => {
+
+ setMobile(true);
const handleLoad = () => {
const isPWAInstalled =
window.matchMedia('(display-mode: window-controls-overlay)').matches ||
diff --git a/src/views/mobile/Chat.jsx b/src/views/mobile/Chat.jsx
index e2b67c7..985cfbf 100644
--- a/src/views/mobile/Chat.jsx
+++ b/src/views/mobile/Chat.jsx
@@ -1,9 +1,10 @@
import { Layout, Button } from 'antd';
import MessagesHeader from '@/views/Conversations/Online/MessagesHeader';
import MessagesWrapper from '@/views/Conversations/Online/MessagesWrapper';
-import InputComposer from '@/views/Conversations/Online/InputComposer';
+import InputComposer from '@/views/Conversations/Online/Input/InputComposer';
import { UnorderedListOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
+import ReplyWrapper from '../Conversations/Online/ReplyWrapper';
const { Content, Header, Footer } = Layout;
@@ -21,7 +22,7 @@ function Chat() {
-
)
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 7ac9e91..7f29abf 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,12 +9,20 @@ export default {
...colors,
'whatsapp': {
DEFAULT: '#25D366',
+ 400: '#66e094',
+ 300: '#92e9b3',
dark: '#075E54',
second: '#128c7e',
gossip: '#dcf8c6',
bg: '#ece5dd', // '#efeae2' '#eae6df' '#d1d7db'
bgdark: '#0b141a',
- me: '#ccd5ae', // '#d9fdd3'
+ me: '#d9fdd3', // '#d9fdd3' '#e1fef2'
+ },
+ 'waba': {
+ DEFAULT: '#2ba84a',
+ 400: '#6bc280',
+ 300: '#95d4a5',
+ me: '#ccd5ae', // '#e1fef2', // '#d9fdd3' '#00a884'
},
'primary': '#1ba784',
},
@@ -22,6 +30,11 @@ export default {
// gridTemplateColumns: {
// 'responsive':repeat(autofill,minmax('300px',1fr))
// }
+ boxShadow: {
+ '1md': '0 0 4px 2px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+ 'heavy': '0 1px 7px 1px rgba(0, 0, 0, 0.3)',
+ '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
+ }
},
},
plugins: [],
@@ -30,3 +43,22 @@ export default {
divideColor: true,
}
};
+/**
+ * WhatsApp
+ --outgoing-background: #d9fdd3;
+ --outgoing-background-rgb: 217, 253, 211;
+ --outgoing-background-deeper: #d1f4cc;
+ --outgoing-background-deeper-rgb: 209, 244, 204;
+ --outgoing-background-highlight: #c4eec8;
+ --outgoing-background-highlight-rgb: 196, 238, 200;
+ --overlay: #0b141a;
+ --overlay-rgb: 11, 20, 26;
+ --panel-background: #f0f2f5;
+ --panel-background-rgb: 240, 242, 245;
+ --panel-background-active: #dee0e3;
+ --panel-background-active-rgb: 222, 224, 227;
+ --panel-background-colored: #008069;
+ --panel-background-colored-rgb: 0, 128, 105;
+ --panel-background-colored-deeper: #008069;
+ --shadow-rgb: 11, 20, 26;
+ */
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..ccc7e54
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,5 @@
+{
+ "compilerOptions": {
+ "jsx": "react",
+ },
+}
diff --git a/vite.config.js b/vite.config.js
index 23b4f26..b3776a5 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,6 +4,7 @@ import WindiCSS from 'vite-plugin-windicss';
import { VitePWA } from 'vite-plugin-pwa';
import packageJson from './package.json';
import dayjs from 'dayjs'
+import svgr from "vite-plugin-svgr";
const today = new dayjs().format('YYYY-MM-DD HH:mm:ss')
@@ -145,7 +146,7 @@ export default defineConfig({
__BUILD_DATE__: JSON.stringify(`${today}`),
__BUILD_VERSION__: JSON.stringify(`${packageJson.version}`),
},
- plugins: [react(), WindiCSS(), buildDatePlugin(), VitePWA(manifestForPWAPlugIn)],
+ plugins: [ svgr(), react(), WindiCSS(), buildDatePlugin(), VitePWA(manifestForPWAPlugIn), ],
server: {
host: '0.0.0.0',
},