imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/develop' into feat/add-message-edition-wysiwyg-composer

Browse source
This commit is contained in:
Florian Duros 2022-10-19 16:34:22 +02:00
commit e77f333fb6
No known key found for this signature in database
GPG key ID: 9700AA5870258A0B
124 changed files with 4370 additions and 1039 deletions
Download patch file Download diff file Expand all files Collapse all files

81
src/components/views/rooms/wysiwyg_composer/EditWysiwygComposer.tsx
View file

@ -14,58 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { forwardRef, RefObject, useMemo } from 'react';
import { MatrixClient } from "matrix-js-sdk/src/matrix";
import React, { forwardRef, RefObject } from 'react';
import { useRoomContext } from '../../../../contexts/RoomContext';
import { useMatrixClientContext } from '../../../../contexts/MatrixClientContext';
import EditorStateTransfer from '../../../../utils/EditorStateTransfer';
import { CommandPartCreator, Part } from '../../../../editor/parts';
import { IRoomState } from '../../../structures/RoomView';
import SettingsStore from '../../../../settings/SettingsStore';
import { parseEvent } from '../../../../editor/deserialize';
import { WysiwygComposer } from './components/WysiwygComposer';
import { EditionButtons } from './components/EditionButtons';
import { useWysiwygEditActionHandler } from './hooks/useWysiwygEditActionHandler';
import { endEditing } from './utils/editing';
import { editMessage } from './utils/message';
function parseEditorStateTransfer(
editorStateTransfer: EditorStateTransfer,
roomContext: IRoomState,
mxClient: MatrixClient,
) {
if (!roomContext.room) {
return;
}
const { room } = roomContext;
const partCreator = new CommandPartCreator(room, mxClient);
let parts: Part[];
if (editorStateTransfer.hasEditorState()) {
// if restoring state from a previous editor,
// restore serialized parts from the state
parts = editorStateTransfer.getSerializedParts().map(p => partCreator.deserializePart(p));
} else {
// otherwise, either restore serialized parts from localStorage or parse the body of the event
// TODO local storage
// const restoredParts = this.restoreStoredEditorState(partCreator);
if (editorStateTransfer.getEvent().getContent().format === 'org.matrix.custom.html') {
return editorStateTransfer.getEvent().getContent().formatted_body || "";
}
parts = parseEvent(editorStateTransfer.getEvent(), partCreator, {
shouldEscape: SettingsStore.getValue("MessageComposerInput.useMarkdown"),
});
}
return parts.reduce((content, part) => content + part.text, '');
// Todo local storage
// this.saveStoredEditorState();
}
import { useEditing } from './hooks/useEditing';
import { useInitialContent } from './hooks/useInitialContent';
interface ContentProps {
disabled: boolean;
@ -81,25 +37,26 @@ const Content = forwardRef<HTMLElement, ContentProps>(
interface EditWysiwygComposerProps {
disabled?: boolean;
onChange?: (content: string) => void;
editorStateTransfer?: EditorStateTransfer;
editorStateTransfer: EditorStateTransfer;
}
export function EditWysiwygComposer({ editorStateTransfer, ...props }: EditWysiwygComposerProps) {
const roomContext = useRoomContext();
const mxClient = useMatrixClientContext();
const initialContent = useMemo(() => {
if (editorStateTransfer) {
return parseEditorStateTransfer(editorStateTransfer, roomContext, mxClient);
}
}, [editorStateTransfer, roomContext, mxClient]);
const initialContent = useInitialContent(editorStateTransfer);
const isReady = !editorStateTransfer || Boolean(initialContent);
return isReady && <WysiwygComposer initialContent={initialContent} {...props}>{ (ref, wysiwyg, content) => (
<>
<Content disabled={props.disabled} ref={ref} />
<EditionButtons onCancelClick={() => endEditing(roomContext)} onSaveClick={() => editMessage(content, { roomContext, mxClient, editorStateTransfer })} />
</>)
}
const { editMessage, endEditing, setContent } = useEditing(initialContent, editorStateTransfer);
return isReady && <WysiwygComposer
initialContent={initialContent}
onChange={setContent}
onSend={editMessage}
{...props}>
{ (ref, wysiwyg,
content) => (
<>
<Content disabled={props.disabled} ref={ref} />
<EditionButtons onCancelClick={endEditing} onSaveClick={editMessage} />
</>)
}
</WysiwygComposer>;
}