From 01858354f837f5a3d3068d9883a21c5f0906e5d0 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Thu, 13 Oct 2022 12:20:31 +0200 Subject: [PATCH] Add formatting buttons for WysisygComposer --- res/css/_components.pcss | 1 + res/css/views/rooms/_MessageComposer.pcss | 11 ++ .../wysiwyg_composer/_FormattingButtons.pcss | 114 ++++++++++++++++++ res/img/element-icons/room/composer/bold.svg | 3 + .../element-icons/room/composer/italic.svg | 3 + .../room/composer/strike_through.svg | 4 + .../element-icons/room/composer/underline.svg | 3 + .../views/rooms/MessageComposer.tsx | 4 +- .../views/rooms/wysiwyg_composer/Editor.tsx | 41 +++++++ .../wysiwyg_composer/FormattingButtons.tsx | 69 +++++++++++ .../wysiwyg_composer/WysiwygComposer.tsx | 30 ++--- .../views/settings/KeyboardShortcut.tsx | 5 +- src/i18n/strings/en_EN.json | 5 +- src/settings/Settings.tsx | 2 +- 14 files changed, 271 insertions(+), 24 deletions(-) create mode 100644 res/css/views/rooms/wysiwyg_composer/_FormattingButtons.pcss create mode 100644 res/img/element-icons/room/composer/bold.svg create mode 100644 res/img/element-icons/room/composer/italic.svg create mode 100644 res/img/element-icons/room/composer/strike_through.svg create mode 100644 res/img/element-icons/room/composer/underline.svg create mode 100644 src/components/views/rooms/wysiwyg_composer/Editor.tsx create mode 100644 src/components/views/rooms/wysiwyg_composer/FormattingButtons.tsx diff --git a/res/css/_components.pcss b/res/css/_components.pcss index b2a3752628..dd546efbd6 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -295,6 +295,7 @@ @import "./views/rooms/_TopUnreadMessagesBar.pcss"; @import "./views/rooms/_VoiceRecordComposerTile.pcss"; @import "./views/rooms/_WhoIsTypingTile.pcss"; +@import "./views/rooms/wysiwyg_composer/_FormattingButtons.pcss"; @import "./views/rooms/wysiwyg_composer/_WysiwygComposer.pcss"; @import "./views/settings/_AvatarSetting.pcss"; @import "./views/settings/_CrossSigningPanel.pcss"; diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss index 4284eac56d..4cddf31084 100644 --- a/res/css/views/rooms/_MessageComposer.pcss +++ b/res/css/views/rooms/_MessageComposer.pcss @@ -233,6 +233,17 @@ limitations under the License. } } +/* + The wysisyg composer increase the size of the MessageComposer. We temporary move the buttons + Soon the dom structure of the MessageComposer will change with the next evolution of the wysiwyg composer + and this workaround will disappear +*/ +.mx_MessageComposer_wysiwyg { + .mx_MessageComposer_e2eIcon.mx_E2EIcon,.mx_MessageComposer_button, .mx_MessageComposer_sendMessage { + margin-top: 22px; + } +} + .mx_MessageComposer_upload::before { mask-image: url('$(res)/img/element-icons/room/composer/attach.svg'); } diff --git a/res/css/views/rooms/wysiwyg_composer/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/_FormattingButtons.pcss new file mode 100644 index 0000000000..cae56e0266 --- /dev/null +++ b/res/css/views/rooms/wysiwyg_composer/_FormattingButtons.pcss @@ -0,0 +1,114 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.mx_FormattingButtons { + display: flex; + justify-content: start; + + .mx_FormattingButtons_Button { + --size: 26px; + position: relative; + cursor: pointer; + height: var(--size); + line-height: var(--size); + width: auto; + padding-left: var(--size); + margin-right: 6px; + background-color: transparent; + border: none; + + &:last-child { + margin-right: auto; + } + + &::before { + content: ''; + position: absolute; + top: 7px; + left: 7px; + height: 12px; + width: 12px; + background-color: $icon-button-color; + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; + } + + &::after { + content: ''; + position: absolute; + left: 0; + top: 0; + z-index: 0; + width: var(--size); + height: var(--size); + border-radius: 5px; + } + + &:hover { + &::after { + background: rgba($secondary-content, 0.1); + } + + &::before { + background-color: $secondary-content; + } + } + } + + .mx_FormattingButtons_active { + &::after { + background: rgba($accent, 0.1); + } + + &::before { + background-color: $accent; + } + } + + .mx_FormattingButtons_Button_bold::before { + mask-image: url('$(res)/img/element-icons/room/composer/bold.svg'); + } + + .mx_FormattingButtons_Button_italic::before { + mask-image: url('$(res)/img/element-icons/room/composer/italic.svg'); + } + + .mx_FormattingButtons_Button_underline::before { + mask-image: url('$(res)/img/element-icons/room/composer/underline.svg'); + } + + .mx_FormattingButtons_Button_strike-through::before { + mask-image: url('$(res)/img/element-icons/room/composer/strike_through.svg'); + } +} + +.mx_FormattingButtons_Tooltip { + padding: 0 2px 0 2px; + + .mx_FormattingButtons_Tooltip_KeyboardShortcut { + color: $tertiary-content; + + kbd { + margin-top: 2px; + text-align: center; + display: inline-block; + text-transform: capitalize; + font-size: 12px; + font-family: Inter, sans-serif; + } + } +} diff --git a/res/img/element-icons/room/composer/bold.svg b/res/img/element-icons/room/composer/bold.svg new file mode 100644 index 0000000000..fa92101e51 --- /dev/null +++ b/res/img/element-icons/room/composer/bold.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/composer/italic.svg b/res/img/element-icons/room/composer/italic.svg new file mode 100644 index 0000000000..5f162344f0 --- /dev/null +++ b/res/img/element-icons/room/composer/italic.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/composer/strike_through.svg b/res/img/element-icons/room/composer/strike_through.svg new file mode 100644 index 0000000000..5d1119bd9b --- /dev/null +++ b/res/img/element-icons/room/composer/strike_through.svg @@ -0,0 +1,4 @@ + + + + diff --git a/res/img/element-icons/room/composer/underline.svg b/res/img/element-icons/room/composer/underline.svg new file mode 100644 index 0000000000..f9f8dc7fc1 --- /dev/null +++ b/res/img/element-icons/room/composer/underline.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx index b82a991f2e..9783e30756 100644 --- a/src/components/views/rooms/MessageComposer.tsx +++ b/src/components/views/rooms/MessageComposer.tsx @@ -389,6 +389,7 @@ export default class MessageComposer extends React.Component { } public render() { + const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer"); const controls = [ this.props.e2eStatus ? : @@ -403,8 +404,6 @@ export default class MessageComposer extends React.Component { const canSendMessages = this.context.canSendMessages && !this.context.tombstone; if (canSendMessages) { - const isWysiwygComposerEnabled = SettingsStore.getValue("feature_wysiwyg_composer"); - if (isWysiwygComposerEnabled) { controls.push( { "mx_MessageComposer": true, "mx_MessageComposer--compact": this.props.compact, "mx_MessageComposer_e2eStatus": this.props.e2eStatus != undefined, + "mx_MessageComposer_wysiwyg": isWysiwygComposerEnabled, }); return ( diff --git a/src/components/views/rooms/wysiwyg_composer/Editor.tsx b/src/components/views/rooms/wysiwyg_composer/Editor.tsx new file mode 100644 index 0000000000..ab6fca9de9 --- /dev/null +++ b/src/components/views/rooms/wysiwyg_composer/Editor.tsx @@ -0,0 +1,41 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, { forwardRef, memo } from 'react'; + +interface EditorProps { + disabled: boolean; +} + +export const Editor = memo( + forwardRef( + function Editor({ disabled }: EditorProps, ref, + ) { + return
+
+
; + }, + ), +); diff --git a/src/components/views/rooms/wysiwyg_composer/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/FormattingButtons.tsx new file mode 100644 index 0000000000..b82fce5201 --- /dev/null +++ b/src/components/views/rooms/wysiwyg_composer/FormattingButtons.tsx @@ -0,0 +1,69 @@ +/* +Copyright 2022 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { useWysiwyg } from "@matrix-org/matrix-wysiwyg"; +import classNames from "classnames"; + +import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton"; +import { Alignment } from "../../elements/Tooltip"; +import { KeyboardShortcut } from "../../settings/KeyboardShortcut"; +import { KeyCombo } from "../../../../KeyBindingsManager"; +import { _td } from "../../../../languageHandler"; + +interface TooltipProps { + label: string; + keyCombo?: KeyCombo; +} + +function Tooltip({ label, keyCombo }: TooltipProps) { + return
+ { label } + { keyCombo && } +
; +} + +interface ButtonProps extends TooltipProps { + className: string; + isActive: boolean; + onClick: () => void; +} + +function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps) { + return } + alignment={Alignment.Top} + />; +} + +interface FormattingButtonsProps { + wysiwyg: ReturnType['wysiwyg']; + formattingStates: ReturnType['formattingStates']; +} + +export function FormattingButtons({ wysiwyg, formattingStates }: FormattingButtonsProps) { + return
+
; +} diff --git a/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx b/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx index e45324982d..898be56795 100644 --- a/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx +++ b/src/components/views/rooms/wysiwyg_composer/WysiwygComposer.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { useCallback, useState } from 'react'; +import React, { useCallback, useEffect } from 'react'; import { useWysiwyg } from "@matrix-org/matrix-wysiwyg"; import { IEventRelation, MatrixEvent } from 'matrix-js-sdk/src/models/event'; @@ -22,6 +22,8 @@ import { useRoomContext } from '../../../../contexts/RoomContext'; import { sendMessage } from './message'; import { RoomPermalinkCreator } from '../../../../utils/permalinks/Permalinks'; import { useMatrixClientContext } from '../../../../contexts/MatrixClientContext'; +import { FormattingButtons } from './FormattingButtons'; +import { Editor } from './Editor'; interface WysiwygProps { disabled?: boolean; @@ -39,11 +41,13 @@ export function WysiwygComposer( const roomContext = useRoomContext(); const mxClient = useMatrixClientContext(); - const [content, setContent] = useState(); - const { ref, isWysiwygReady, wysiwyg } = useWysiwyg({ onChange: (_content) => { - setContent(_content); - onChange(_content); - } }); + const { ref, isWysiwygReady, content, formattingStates, wysiwyg } = useWysiwyg(); + + useEffect(() => { + if (content !== null) { + onChange(content); + } + }, [onChange, content]); const memoizedSendMessage = useCallback(() => { sendMessage(content, { mxClient, roomContext, ...props }); @@ -53,18 +57,8 @@ export function WysiwygComposer( return (
-
-
-
+ + { children?.(memoizedSendMessage) }
); diff --git a/src/components/views/settings/KeyboardShortcut.tsx b/src/components/views/settings/KeyboardShortcut.tsx index 0f35ea0e7a..fc183a4a02 100644 --- a/src/components/views/settings/KeyboardShortcut.tsx +++ b/src/components/views/settings/KeyboardShortcut.tsx @@ -38,9 +38,10 @@ export const KeyboardKey: React.FC = ({ name, last }) => { interface IKeyboardShortcutProps { value: KeyCombo; + className?: string; } -export const KeyboardShortcut: React.FC = ({ value }) => { +export const KeyboardShortcut: React.FC = ({ value, className = 'mx_KeyboardShortcut' }) => { if (!value) return null; const modifiersElement = []; @@ -58,7 +59,7 @@ export const KeyboardShortcut: React.FC = ({ value }) => modifiersElement.push(); } - return
+ return
{ modifiersElement }
; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 737f3e8879..a5ddd5d707 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -901,7 +901,7 @@ "How can I leave the beta?": "How can I leave the beta?", "To leave, return to this page and use the “%(leaveTheBeta)s” button.": "To leave, return to this page and use the “%(leaveTheBeta)s” button.", "Leave the beta": "Leave the beta", - "Wysiwyg composer (plain text mode coming soon) (under active development)": "Wysiwyg composer (plain text mode coming soon) (under active development)", + "Try out the rich text editor (plain text mode coming soon)": "Try out the rich text editor (plain text mode coming soon)", "Render simple counters in room header": "Render simple counters in room header", "Try out new ways to ignore people (experimental)": "Try out new ways to ignore people (experimental)", "Support adding custom themes": "Support adding custom themes", @@ -2054,6 +2054,9 @@ "No microphone found": "No microphone found", "We didn't find a microphone on your device. Please check your settings and try again.": "We didn't find a microphone on your device. Please check your settings and try again.", "Stop recording": "Stop recording", + "Italic": "Italic", + "Underline": "Underline", + "Strike through": "Strike through", "Error updating main address": "Error updating main address", "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.", "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.", diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index a4e55e6fcd..803823b262 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -306,7 +306,7 @@ export const SETTINGS: {[setting: string]: ISetting} = { "feature_wysiwyg_composer": { isFeature: true, labsGroup: LabGroup.Messaging, - displayName: _td("Wysiwyg composer (plain text mode coming soon) (under active development)"), + displayName: _td("Try out the rich text editor (plain text mode coming soon)"), supportedLevels: LEVELS_FEATURE, default: false, },