feat: Upstream Trix/RichTextField. #90
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Meta } from "@storybook/react"; | ||
| import { useState } from "react"; | ||
| import { RichTextEditor } from "src/components/RichTextEditor"; | ||
|
|
||
| export default { | ||
| component: RichTextEditor, | ||
| title: "Components/Rich Text Editor", | ||
| } as Meta; | ||
|
|
||
| export function RichTextEditors() { | ||
| return <TestEditor />; | ||
| } | ||
|
|
||
| function TestEditor() { | ||
| const [value, setValue] = useState(""); | ||
| return ( | ||
| <> | ||
| <RichTextEditor label="Comment" value={value} onChange={setValue} mergeTags={["foo", "bar", "zaz"]} /> | ||
| value: {value} | ||
| </> | ||
| ); | ||
| } | ||
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,158 @@ | ||
| import { Global } from "@emotion/react"; | ||
| import { useTextField } from "@react-aria/textfield"; | ||
| import * as React from "react"; | ||
|
There was a problem hiding this comment. Question: Is this still required with our new setup in Beam? There was a problem hiding this comment. It's only for the There was a problem hiding this comment. Since the line below is already importing React what about we merge them and/or take out the There was a problem hiding this comment. Oh sure, I was too wrote-Java-for-a-decade thinking that |
||
| import { ChangeEvent, useEffect, useRef } from "react"; | ||
| import { useId } from "react-aria"; | ||
| import { Label } from "src/components/Label"; | ||
| import { Css, Palette } from "src/Css"; | ||
| import Tribute from "tributejs"; | ||
| import "tributejs/dist/tribute.css"; | ||
| import "trix/dist/trix"; | ||
| import "trix/dist/trix.css"; | ||
|
There was a problem hiding this comment. We still have an issue with vitejs where these "css imports that are done in a dependency" don't work :-/ |
||
|
|
||
| export interface RichTextEditorProps { | ||
| /** The initial html value to show in the trix editor. */ | ||
| value: string; | ||
| onChange: (html: string, text: string) => void; | ||
| /** | ||
| * A list of tags/names to show in a popup when the user `@`-s. | ||
| * | ||
| * Currently we don't support mergeTags being updated. | ||
| */ | ||
| mergeTags?: string[]; | ||
| label?: string; | ||
| autoFocus?: boolean; | ||
| placeholder?: string; | ||
| } | ||
|
|
||
| // trix + react-trix do not appear to have any typings, so roll with editor: any for now. | ||
| type Editor = { | ||
| expandSelectionInDirection?: (direction: "forward" | "backward") => void; | ||
| insertString(s: string): void; | ||
| loadHTML(html: string): void; | ||
| }; | ||
|
|
||
| function attachTributeJs(mergeTags: string[], editorElement: HTMLElement) { | ||
| const values = mergeTags.map((value) => ({ value })); | ||
| const tribute = new Tribute({ | ||
| trigger: "@", | ||
| lookup: "value", | ||
| allowSpaces: true, | ||
| /** {@link https://github.com/zurb/tribute#hide-menu-when-no-match-is-returned} */ | ||
| noMatchTemplate: () => `<span style:"visibility: hidden;"></span>`, | ||
| selectTemplate: ({ original: { value } }) => `<span style="color: ${Palette.LightBlue700};">@${value}</span>`, | ||
| values, | ||
| }); | ||
| // In dev mode, this fails because jsdom doesn't support contentEditable. Note that | ||
| // before create-react-app 4.x / a newer jsdom, the trix-initialize event wasn't | ||
| // even fired during unit tests anyway. | ||
| try { | ||
| tribute.attach(editorElement!); | ||
| } catch {} | ||
| } | ||
|
|
||
| /** | ||
| * Glues together trix and tributejs to provide a simple rich text editor. | ||
| * | ||
| * See [trix]{@link https://github.com/basecamp/trix} and [tributejs]{@link https://github.com/zurb/tribute}. | ||
| * */ | ||
| export function RichTextEditor(props: RichTextEditorProps) { | ||
| const { mergeTags, label, value, onChange } = props; | ||
| const id = useId(); | ||
|
|
||
| // We get a reference to the Editor instance after trix-init fires | ||
| const editor = useRef<Editor | undefined>(undefined); | ||
|
|
||
| // Disclaimer I'm kinda guessing at whether this aria setup is right | ||
| const inputRef = useRef<HTMLInputElement | null>(null); | ||
| const { labelProps, inputProps } = useTextField({ label }, inputRef); | ||
|
|
||
| // Keep track of what we pass to onChange, so that we can make ourselves keep looking | ||
| // like a controlled input, i.e. by only calling loadHTML if a new incoming `value` !== `currentHtml`, | ||
| // otherwise we'll constantly call loadHTML and reset the user's cursor location. | ||
| const currentHtml = useRef<string | undefined>(undefined); | ||
|
|
||
| useEffect(() => { | ||
| const editorElement = document.getElementById(`editor-${id}`); | ||
| if (!editorElement) { | ||
| throw new Error("editorElement not found"); | ||
| } | ||
|
|
||
| editor.current = (editorElement as any).editor; | ||
| if (!editor.current) { | ||
| throw new Error("editor not found"); | ||
| } | ||
| if (mergeTags !== undefined) { | ||
| attachTributeJs(mergeTags, editorElement!); | ||
| } | ||
| // We have a 2nd useEffect to call loadHTML when value changes, but | ||
| // we do this here b/c we assume the 2nd useEffect's initial evaluation | ||
| // "missed" having editor.current set b/c trix-initialize hadn't fired. | ||
| editor.current.loadHTML(value); | ||
|
|
||
| function trixChange(e: ChangeEvent) { | ||
| const { textContent, innerHTML } = e.target; | ||
| currentHtml.current = innerHTML; | ||
| onChange && onChange(innerHTML, textContent || ""); | ||
| } | ||
|
|
||
| editorElement.addEventListener("trix-change", trixChange as any, false); | ||
| return () => { | ||
| editorElement.removeEventListener("trix-change", trixChange as any); | ||
| }; | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| // If our value prop changes (without the change coming from us), reload it | ||
| if (editor.current && value !== currentHtml.current) { | ||
| editor.current.loadHTML(value); | ||
| } | ||
| }, [value]); | ||
|
|
||
| const { placeholder, autoFocus } = props; | ||
|
|
||
| return ( | ||
| <div css={Css.w100.maxw("550px").$}> | ||
| {label && <Label labelProps={labelProps} label={label} />} | ||
| <div css={trixCssOverrides}> | ||
| {React.createElement("trix-editor", { | ||
|
There was a problem hiding this comment. Curious about this approach vs There was a problem hiding this comment. The |
||
| id: `editor-${id}`, | ||
| input: `input-${id}`, | ||
| ...(autoFocus ? { autoFocus } : {}), | ||
| ...(placeholder ? { placeholder } : {}), | ||
| })} | ||
| <input type="hidden" ref={inputRef} id={`input-${id}`} value={value} /> | ||
| </div> | ||
| <Global styles={[tributeOverrides]} /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const trixCssOverrides = { | ||
|
|
||
| ...Css.relative.add({ wordBreak: "break-word" }).$, | ||
| // Put the toolbar on the bottom | ||
| ...Css.df.flexColumnReverse.childGap1.$, | ||
| // Some basic copy/paste from TextFieldBase | ||
| "& trix-editor": Css.bgWhite.sm.gray900.br4.bGray300.$, | ||
| "& trix-editor:focus": Css.bLightBlue700.$, | ||
| // Make the buttons closer to ours | ||
| "& .trix-button": Css.bgWhite.sm.$, | ||
| // We don't support file attachment yet, so hide that control for now. | ||
| "& .trix-button-group--file-tools": Css.dn.$, | ||
| // Other things that are unused and we want to hide | ||
| "& .trix-button--icon-heading-1": Css.dn.$, | ||
| "& .trix-button--icon-code": Css.dn.$, | ||
| "& .trix-button--icon-quote": Css.dn.$, | ||
| "& .trix-button--icon-increase-nesting-level": Css.dn.$, | ||
| "& .trix-button--icon-decrease-nesting-level": Css.dn.$, | ||
| "& .trix-button-group--history-tools": Css.dn.$, | ||
| // Put back list styles that CssReset is probably too aggressive with | ||
| "& ul": Css.ml2.add("listStyleType", "disc").$, | ||
| "& ol": Css.ml2.add("listStyleType", "decimal").$, | ||
| }; | ||
|
|
||
| // Style the @ mention box | ||
| const tributeOverrides = { | ||
| ".tribute-container": Css.add({ minWidth: "300px" }).$, | ||
| ".tribute-container > ul": Css.sm.bgWhite.ba.br4.bLightBlue700.overflowHidden.$, | ||
| }; | ||
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Adding this will merge the parent story name and the child story into one.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, I get why you were doing this now. Cool, will change.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah! For single stories I usually opt for the singular title and do the
asapproach like you saw beforeThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I really wish they would base this "merge parent story and child story" behavior off of "there is only 1 export'd function" instead of "the function name matches the file name", given that we will essentially always a conflict between the component-under-test name and that story file name.