Add link creation to rich text editor (#9775)

Add link creation to RTE
This commit is contained in:
Florian Duros 2022-12-23 12:34:15 +01:00 committed by GitHub
parent 88c3864682
commit fe0273b1a6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 418 additions and 97 deletions

View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { forwardRef, RefObject } from "react";
import React, { forwardRef, RefObject, useRef } from "react";
import classNames from "classnames";
import EditorStateTransfer from "../../../../utils/EditorStateTransfer";
@ -23,6 +23,7 @@ import { EditionButtons } from "./components/EditionButtons";
import { useWysiwygEditActionHandler } from "./hooks/useWysiwygEditActionHandler";
import { useEditing } from "./hooks/useEditing";
import { useInitialContent } from "./hooks/useInitialContent";
import { ComposerContext, getDefaultContextValue } from "./ComposerContext";
interface ContentProps {
disabled: boolean;
@ -45,6 +46,7 @@ interface EditWysiwygComposerProps {
// Default needed for React.lazy
export default function EditWysiwygComposer({ editorStateTransfer, className, ...props }: EditWysiwygComposerProps) {
const defaultContextValue = useRef(getDefaultContextValue());
const initialContent = useInitialContent(editorStateTransfer);
const isReady = !editorStateTransfer || initialContent !== undefined;
@ -55,23 +57,25 @@ export default function EditWysiwygComposer({ editorStateTransfer, className, ..
}
return (
<WysiwygComposer
className={classNames("mx_EditWysiwygComposer", className)}
initialContent={initialContent}
onChange={onChange}
onSend={editMessage}
{...props}
>
{(ref) => (
<>
<Content disabled={props.disabled} ref={ref} />
<EditionButtons
onCancelClick={endEditing}
onSaveClick={editMessage}
isSaveDisabled={isSaveDisabled}
/>
</>
)}
</WysiwygComposer>
<ComposerContext.Provider value={defaultContextValue.current}>
<WysiwygComposer
className={classNames("mx_EditWysiwygComposer", className)}
initialContent={initialContent}
onChange={onChange}
onSend={editMessage}
{...props}
>
{(ref) => (
<>
<Content disabled={props.disabled} ref={ref} />
<EditionButtons
onCancelClick={endEditing}
onSaveClick={editMessage}
isSaveDisabled={isSaveDisabled}
/>
</>
)}
</WysiwygComposer>
</ComposerContext.Provider>
);
}