Temporary demo commit

Author: arnautov-anton

examples/vite/src/App.tsx

@@ -68,6 +68,7 @@ import {
   SegmentedReactionsList,
 } from './CustomMessageUi';
 import { ConfigurableMessageActions } from './CustomMessageActions';
+import { InlineEditableMessage } from './InlineEditMessage';
 import { SidebarToggle } from './Sidebar/SidebarToggle.tsx';
 import { CommandModeAttachmentSelector } from './CommandModeAttachmentSelector.tsx';
 
@@ -424,6 +425,7 @@ const App = () => {
         HeaderStartContent: SidebarToggle,
         MessageActions: ConfigurableMessageActions,
         AttachmentSelector: CommandModeAttachmentSelector,
+        Message: InlineEditableMessage,
         ...messageUiOverrides,
       }}
     >

examples/vite/src/InlineEditMessage/InlineEditMessage.scss

@@ -0,0 +1,22 @@
+.app__inline-edit-message {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  width: 100%;
+}
+
+.app__inline-edit-message__cancel {
+  align-self: flex-end;
+  background: transparent;
+  border: 1px solid var(--str-chat__secondary-surface-color, #dbdde1);
+  border-radius: 999px;
+  color: var(--str-chat__text-color, inherit);
+  cursor: pointer;
+  font-size: 0.85rem;
+  padding: 0.25rem 0.75rem;
+
+  &:hover {
+    background: var(--str-chat__secondary-surface-color, #f7f7f8);
+  }
+}

examples/vite/src/InlineEditMessage/InlineEditMessage.tsx

@@ -0,0 +1,167 @@
+import {
+  type ComponentProps,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
+import { MessageComposer as MessageComposerController } from 'stream-chat';
+import type { MessageComposerState } from 'stream-chat';
+import { useChannelStateContext } from 'stream-chat-react';
+import {
+  ContextMenuButton,
+  defaultMessageActionSet,
+  IconEdit,
+  MessageActions,
+  type MessageActionSetItem,
+  MessageComposer,
+  MessageComposerControllerProvider,
+  MessageUI,
+  type MessageUIComponentProps,
+  useChatContext,
+  useComponentContext,
+  useContextMenuContext,
+  useMessageContext,
+  useStateStore,
+  useTranslationContext,
+  WithComponents,
+} from 'stream-chat-react';
+
+type InlineEditContextValue = {
+  isEditing: boolean;
+  startEditing: () => void;
+  stopEditing: () => void;
+};
+
+const InlineEditContext = createContext<InlineEditContextValue | undefined>(undefined);
+
+const useInlineEditContext = () => {
+  const value = useContext(InlineEditContext);
+  if (!value) {
+    throw new Error('useInlineEditContext must be used within an InlineEditableMessage');
+  }
+  return value;
+};
+
+const InlineEditAction = () => {
+  const { closeMenu } = useContextMenuContext();
+  const { startEditing } = useInlineEditContext();
+  const { t } = useTranslationContext();
+
+  return (
+    <ContextMenuButton
+      aria-label={t('aria/Edit Message Inline')}
+      className='str-chat__message-actions-list-item-button'
+      Icon={IconEdit}
+      onClick={() => {
+        startEditing();
+        closeMenu();
+      }}
+    >
+      {t('Edit inline')}
+    </ContextMenuButton>
+  );
+};
+
+const inlineEditActionSetItem: MessageActionSetItem = {
+  Component: InlineEditAction,
+  placement: 'dropdown',
+  type: 'editInline',
+};
+
+const insertInlineEditAction = (
+  actionSet: MessageActionSetItem[],
+): MessageActionSetItem[] => {
+  const editIndex = actionSet.findIndex((item) => 'type' in item && item.type === 'edit');
+
+  if (editIndex < 0) return [...actionSet, inlineEditActionSetItem];
+
+  return [
+    ...actionSet.slice(0, editIndex),
+    inlineEditActionSetItem,
+    ...actionSet.slice(editIndex),
+  ];
+};
+
+const InlineEditComposer = ({ onExit }: { onExit: () => void }) => {
+  const { t } = useTranslationContext();
+
+  return (
+    <div className='app__inline-edit-message'>
+      <MessageComposer preventClearingOnUnmount />
+      <button className='app__inline-edit-message__cancel' onClick={onExit} type='button'>
+        {t('Cancel')}
+      </button>
+    </div>
+  );
+};
+
+const selector = (state: MessageComposerState) => ({
+  editing: state.editedMessage != null,
+});
+
+export const InlineEditableMessage = (props: MessageUIComponentProps) => {
+  const { client } = useChatContext();
+  const { channel } = useChannelStateContext();
+  const { message } = useMessageContext();
+
+  const { MessageActions: OuterMessageActions = MessageActions } = useComponentContext();
+
+  const [editingComposer] = useState(
+    () =>
+      new MessageComposerController({
+        compositionContext: channel,
+        client,
+        config: { drafts: { enabled: false } },
+      }),
+  );
+
+  const { editing } = useStateStore(editingComposer.state, selector);
+
+  const startEditing = useCallback(() => {
+    editingComposer.initState({ composition: message });
+  }, [editingComposer, message]);
+  const stopEditing = useCallback(() => {
+    editingComposer.clear();
+  }, [editingComposer]);
+
+  const contextValue = useMemo<InlineEditContextValue>(
+    () => ({ isEditing: editing, startEditing, stopEditing }),
+    [editing, startEditing, stopEditing],
+  );
+
+  const MessageActionsWithInlineEdit = useMemo(() => {
+    const Component = (actionsProps: ComponentProps<typeof MessageActions>) => {
+      const messageActionSet = useMemo(
+        () =>
+          insertInlineEditAction(
+            actionsProps.messageActionSet ?? defaultMessageActionSet,
+          ),
+        [actionsProps.messageActionSet],
+      );
+
+      return (
+        <OuterMessageActions {...actionsProps} messageActionSet={messageActionSet} />
+      );
+    };
+    Component.displayName = 'MessageActionsWithInlineEdit';
+    return Component;
+  }, [OuterMessageActions]);
+
+  if (editing) {
+    return (
+      <MessageComposerControllerProvider messageComposerController={editingComposer}>
+        <InlineEditComposer onExit={stopEditing} />
+      </MessageComposerControllerProvider>
+    );
+  }
+
+  return (
+    <InlineEditContext.Provider value={contextValue}>
+      <WithComponents overrides={{ MessageActions: MessageActionsWithInlineEdit }}>
+        <MessageUI {...props} />
+      </WithComponents>
+    </InlineEditContext.Provider>
+  );
+};

examples/vite/src/InlineEditMessage/index.ts

@@ -0,0 +1 @@
+export { InlineEditableMessage } from './InlineEditMessage';

examples/vite/src/index.scss

@@ -9,6 +9,7 @@
 @import url('./AppSettings/AppSettings.scss') layer(stream-app-overrides);
 @import url('./CustomMessageActions/CustomMessageActions.scss')
 layer(stream-app-overrides);
+@import url('./InlineEditMessage/InlineEditMessage.scss') layer(stream-app-overrides);
 @import url('./SystemNotification/SystemNotification.scss') layer(stream-app-overrides);
 @import url('./AccessibilityNavigation/ReturnToSkipNavigation.scss')
 layer(stream-app-overrides);