diff --git a/package.json b/package.json index 164fb40674..82ec05f81a 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "dependencies": { "@babel/runtime": "^7.12.5", "@matrix-org/analytics-events": "^0.2.0", - "@matrix-org/matrix-wysiwyg": "^0.0.2", + "@matrix-org/matrix-wysiwyg": "^0.2.0", "@matrix-org/react-sdk-module-api": "^0.0.3", "@sentry/browser": "^6.11.0", "@sentry/tracing": "^6.11.0", diff --git a/res/css/_components.pcss b/res/css/_components.pcss index 577d50f629..1d6452aa82 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -297,6 +297,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..36f84ae5f1 --- /dev/null +++ b/res/css/views/rooms/wysiwyg_composer/_FormattingButtons.pcss @@ -0,0 +1,118 @@ +/* +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: 28px; + position: relative; + cursor: pointer; + height: var(--size); + line-height: var(--size); + width: auto; + padding-left: 22px; + margin-right: 8px; + background-color: transparent; + border: none; + + &:first-child { + margin-left: 12px; + } + + &:last-child { + margin-right: auto; + } + + &::before { + content: ''; + position: absolute; + top: 6px; + left: 6px; + height: 16px; + width: 16px; + 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_strikethrough::before { + mask-image: url('$(res)/img/element-icons/room/composer/strikethrough.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..4a5cb184cf --- /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..2299fc1fa2 --- /dev/null +++ b/res/img/element-icons/room/composer/italic.svg @@ -0,0 +1,3 @@ + + + diff --git a/res/img/element-icons/room/composer/strikethrough.svg b/res/img/element-icons/room/composer/strikethrough.svg new file mode 100644 index 0000000000..0ed63b2139 --- /dev/null +++ b/res/img/element-icons/room/composer/strikethrough.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..b74e562ec8 --- /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..cca66f6c38 --- /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..19941ad3f9 --- /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, { MouseEventHandler } 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: MouseEventHandler; +} + +function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps) { + return } + alignment={Alignment.Top} + />; +} + +interface FormattingButtonsProps { + composer: ReturnType['wysiwyg']; + formattingStates: ReturnType['formattingStates']; +} + +export function FormattingButtons({ composer, 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..300417f66d 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 (!disabled && content !== null) { + onChange(content); + } + }, [onChange, content, disabled]); 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 2a8b398514..d4ba636e36 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -904,7 +904,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", @@ -2060,6 +2060,8 @@ "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", "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 60fd06ef85..9b6e09c772 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, }, diff --git a/test/components/views/rooms/MessageComposer-test.tsx b/test/components/views/rooms/MessageComposer-test.tsx index b8ff024cd8..bc0b26f745 100644 --- a/test/components/views/rooms/MessageComposer-test.tsx +++ b/test/components/views/rooms/MessageComposer-test.tsx @@ -44,8 +44,9 @@ import { WysiwygComposer } from "../../../../src/components/views/rooms/wysiwyg_ // The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement // See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts jest.mock("@matrix-org/matrix-wysiwyg", () => ({ - useWysiwyg: ({ onChange }) => { - return { ref: { current: null }, isWysiwygReady: true, wysiwyg: { clear: () => void 0 } }; + useWysiwyg: () => { + return { ref: { current: null }, isWysiwygReady: true, wysiwyg: { clear: () => void 0 }, + formattingStates: { bold: 'enabled', italic: 'enabled', underline: 'enabled', strikeThrough: 'enabled' } }; }, })); diff --git a/test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx b/test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx new file mode 100644 index 0000000000..6c3e8573ae --- /dev/null +++ b/test/components/views/rooms/wysiwyg_composer/FormattingButtons-test.tsx @@ -0,0 +1,77 @@ +/* +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 { render, screen } from "@testing-library/react"; +import userEvent from '@testing-library/user-event'; + +import { FormattingButtons } from "../../../../../src/components/views/rooms/wysiwyg_composer/FormattingButtons"; + +describe('FormattingButtons', () => { + const wysiwyg = { + bold: jest.fn(), + italic: jest.fn(), + underline: jest.fn(), + strikeThrough: jest.fn(), + } as any; + + const formattingStates = { + bold: 'reversed', + italic: 'reversed', + underline: 'enabled', + strikeThrough: 'enabled', + } as any; + + afterEach(() => { + jest.resetAllMocks(); + }); + + it('Should have the correspond CSS classes', () => { + // When + render(); + + // Then + expect(screen.getByLabelText('Bold')).toHaveClass('mx_FormattingButtons_active'); + expect(screen.getByLabelText('Italic')).toHaveClass('mx_FormattingButtons_active'); + expect(screen.getByLabelText('Underline')).not.toHaveClass('mx_FormattingButtons_active'); + expect(screen.getByLabelText('Strikethrough')).not.toHaveClass('mx_FormattingButtons_active'); + }); + + it('Should call wysiwyg function on button click', () => { + // When + render(); + screen.getByLabelText('Bold').click(); + screen.getByLabelText('Italic').click(); + screen.getByLabelText('Underline').click(); + screen.getByLabelText('Strikethrough').click(); + + // Then + expect(wysiwyg.bold).toHaveBeenCalledTimes(1); + expect(wysiwyg.italic).toHaveBeenCalledTimes(1); + expect(wysiwyg.underline).toHaveBeenCalledTimes(1); + expect(wysiwyg.strikeThrough).toHaveBeenCalledTimes(1); + }); + + it('Should display the tooltip on mouse over', async () => { + // When + const user = userEvent.setup(); + render(); + await user.hover(screen.getByLabelText('Bold')); + + // Then + expect(await screen.findByText('Bold')).toBeTruthy(); + }); +}); diff --git a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx b/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx index 171455bfbc..d1d4596f5a 100644 --- a/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx +++ b/test/components/views/rooms/wysiwyg_composer/WysiwygComposer-test.tsx @@ -16,7 +16,6 @@ limitations under the License. import React from "react"; import { act, render, screen } from "@testing-library/react"; -import "@testing-library/jest-dom"; import { IRoomState } from "../../../../../src/components/structures/RoomView"; import RoomContext, { TimelineRenderingType } from "../../../../../src/contexts/RoomContext"; @@ -25,14 +24,12 @@ import { createTestClient, mkEvent, mkStubRoom } from "../../../../test-utils"; import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext"; import { WysiwygComposer } from "../../../../../src/components/views/rooms/wysiwyg_composer/WysiwygComposer"; -let callOnChange: (content: string) => void; - // The wysiwyg fetch wasm bytes and a specific workaround is needed to make it works in a node (jest) environnement // See https://github.com/matrix-org/matrix-wysiwyg/blob/main/platforms/web/test.setup.ts jest.mock("@matrix-org/matrix-wysiwyg", () => ({ - useWysiwyg: ({ onChange }) => { - callOnChange = onChange; - return { ref: { current: null }, isWysiwygReady: true, wysiwyg: { clear: () => void 0 } }; + useWysiwyg: () => { + return { ref: { current: null }, content: 'html', isWysiwygReady: true, wysiwyg: { clear: () => void 0 }, + formattingStates: { bold: 'enabled', italic: 'enabled', underline: 'enabled', strikeThrough: 'enabled' } }; }, })); @@ -122,7 +119,7 @@ describe('WysiwygComposer', () => { expect(content).toBe((html)); done(); }); - act(() => callOnChange(html)); + // act(() => callOnChange(html)); }); it('Should send message, call clear and focus the textbox', async () => { @@ -130,7 +127,6 @@ describe('WysiwygComposer', () => { const html = 'html'; await new Promise((resolve) => { customRender(() => resolve(null)); - act(() => callOnChange(html)); }); act(() => sendMessage()); diff --git a/yarn.lock b/yarn.lock index ab871f523f..ee6ceafdcf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1660,10 +1660,10 @@ resolved "https://registry.yarnpkg.com/@matrix-org/analytics-events/-/analytics-events-0.2.0.tgz#453925c939ecdd5ca6c797d293deb8cf0933f1b8" integrity sha512-+0/Sydm4MNOcqd8iySJmojVPB74Axba4BXlwTsiKmL5fgYqdUkwmqkO39K7Pn8i+a+8pg11oNvBPkpWs3O5Qww== -"@matrix-org/matrix-wysiwyg@^0.0.2": - version "0.0.2" - resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.0.2.tgz#c1a18f5f9ac061c4147a0fbbf9303a3c82e626e6" - integrity sha512-AY4sbmgcaFZhNxJfn3Va1SiKH4/gIdvWV9c/iehcIi3/xFB7lKCIwe7NNxzPpFOp+b+fEIbdHf3fhS5vJBi7xg== +"@matrix-org/matrix-wysiwyg@^0.2.0": + version "0.2.0" + resolved "https://registry.yarnpkg.com/@matrix-org/matrix-wysiwyg/-/matrix-wysiwyg-0.2.0.tgz#651002ad67be3004698d4a89806cf344283a4ca3" + integrity sha512-m9R1NOd0ogkhrjqFNg159TMXL5dpME90G9RDrZrO106263Qtoj0TazyBaLhNjgvPkogbzbCJUULQWPFiLQfTjw== "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz": version "3.2.8" @@ -3198,6 +3198,11 @@ browser-process-hrtime@^1.0.0: resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626" integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow== +browser-request@^0.3.3: + version "0.3.3" + resolved "https://registry.yarnpkg.com/browser-request/-/browser-request-0.3.3.tgz#9ece5b5aca89a29932242e18bf933def9876cc17" + integrity sha512-YyNI4qJJ+piQG6MMEuo7J3Bzaqssufx04zpEKYfSrl/1Op59HWali9zMtBpXnkmqMcOuWJPZvudrm9wISmnCbg== + browserslist@^4.20.2, browserslist@^4.21.3: version "4.21.3" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"