Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[CORL-1029] Better HTML Support (#2956)
* feat: Improve html handling, integrate new @coralproject/rte * chore: refactor and add comments * chore: remove obsolete line * chore: rename `inputId` to `inputID` * chore: upgrade @coralproject/rte * fix: update snapshots * chore: apply review suggestions * fix: snapshot / tests * fix: merge issues * [CORL-1056] Configurable RTE (#2967) * fix: merge issues * feat: Configure RTE * test: add tests * chore: just a comment * chore: remove unused translations
- Loading branch information
Showing
94 changed files
with
7,785 additions
and
3,525 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
src/core/client/admin/routes/Configure/sections/General/RTEConfig.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| .disabledLabel { | ||
| color: var(--v2-colors-grey-400); | ||
| } | ||
| .spoilerDesc { | ||
| font-size: var(--v2-font-size-2); | ||
| font-weight: var(--v2-font-weight-primary-regular); | ||
| font-family: var(--v2-font-family-primary); | ||
| color: var(--v2-colors-grey-400); | ||
| padding-left: 26px; | ||
| } |
125 changes: 125 additions & 0 deletions
125
src/core/client/admin/routes/Configure/sections/General/RTEConfig.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| import { Localized } from "@fluent/react/compat"; | ||
| import cn from "classnames"; | ||
| import React, { FunctionComponent } from "react"; | ||
| import { Field, FormSpy } from "react-final-form"; | ||
| import { graphql } from "react-relay"; | ||
|
|
||
| import { parseBool } from "coral-framework/lib/form"; | ||
| import { | ||
| CheckBox, | ||
| FieldSet, | ||
| FormField, | ||
| FormFieldDescription, | ||
| Label, | ||
| } from "coral-ui/components/v2"; | ||
|
|
||
| import ConfigBox from "../../ConfigBox"; | ||
| import Header from "../../Header"; | ||
| import OnOffField from "../../OnOffField"; | ||
|
|
||
| import styles from "./RTEConfig.css"; | ||
|
|
||
| // eslint-disable-next-line no-unused-expressions | ||
| graphql` | ||
| fragment RTEConfig_formValues on Settings { | ||
| rte { | ||
| enabled | ||
| strikethrough | ||
| spoiler | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| interface Props { | ||
| disabled: boolean; | ||
| } | ||
|
|
||
| const RTEConfig: FunctionComponent<Props> = ({ disabled }) => ( | ||
| <ConfigBox | ||
| title={ | ||
| <Localized id="configure-general-rte-title"> | ||
| <Header container={<legend />}>Rich-text comments</Header> | ||
| </Localized> | ||
| } | ||
| container={<FieldSet />} | ||
| > | ||
| <Localized id="configure-general-rte-express"> | ||
| <FormFieldDescription> | ||
| Give your community more ways to express themselves beyond plain text | ||
| with rich-text formatting. | ||
| </FormFieldDescription> | ||
| </Localized> | ||
|
|
||
| <FormField container={<fieldset />}> | ||
| <Localized id="configure-general-rte-richTextComments"> | ||
| <Label>Rich-Text comments</Label> | ||
| </Localized> | ||
| <OnOffField | ||
| name="rte.enabled" | ||
| disabled={disabled} | ||
| onLabel={ | ||
| <Localized id="configure-general-rte-onBasicFeatures"> | ||
| <span>On - bold, italics, block quotes, and bulletted lists</span> | ||
| </Localized> | ||
| } | ||
| /> | ||
| </FormField> | ||
| <FormSpy subscription={{ values: true }}> | ||
| {(props) => { | ||
| const rteDisabled = !props.values.rte.enabled; | ||
| return ( | ||
| <> | ||
| <FormField container={<fieldset />}> | ||
| <Localized id="configure-general-rte-additional"> | ||
| <Label | ||
| className={cn({ | ||
| [styles.disabledLabel]: rteDisabled, | ||
| })} | ||
| > | ||
| Additional rich-text options | ||
| </Label> | ||
| </Localized> | ||
| <Field name="rte.strikethrough" type="checkbox" parse={parseBool}> | ||
| {({ input }) => ( | ||
| <Localized id="configure-general-rte-strikethrough"> | ||
| <CheckBox | ||
| {...input} | ||
| id={input.name} | ||
| disabled={rteDisabled || disabled} | ||
| > | ||
| Strikethrough | ||
| </CheckBox> | ||
| </Localized> | ||
| )} | ||
| </Field> | ||
| <Field name="rte.spoiler" type="checkbox" parse={parseBool}> | ||
| {({ input }) => ( | ||
| <div> | ||
| <Localized id="configure-general-rte-spoiler"> | ||
| <CheckBox | ||
| {...input} | ||
| id={input.name} | ||
| disabled={rteDisabled || disabled} | ||
| > | ||
| Spoiler | ||
| </CheckBox> | ||
| </Localized> | ||
| <Localized id="configure-general-rte-spoilerDesc"> | ||
| <div className={styles.spoilerDesc}> | ||
| Words and phrases formatted as Spoiler are hidden behind | ||
| a dark background until the reader chooses to reveal the | ||
| text. | ||
| </div> | ||
| </Localized> | ||
| </div> | ||
| )} | ||
| </Field> | ||
| </FormField> | ||
| </> | ||
| ); | ||
| }} | ||
| </FormSpy> | ||
| </ConfigBox> | ||
| ); | ||
|
|
||
| export default RTEConfig; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.