feat: Upstream Trix/RichTextField. #90

stephenh · 2021-05-28T15:12:16Z

~75% of is from my hack day where I needed a BoundRichTextField in internal-frontend and so adapted/converted the BP Trix from the original class-based code we'd copy/pasted from a react-trix wrapper over into hooks.

Also a first pass at Beam-ish styling, i.e. using our border radius, focus color, etc.

stephenh · 2021-05-28T15:15:19Z

src/components/RichTextEditor.tsx

+import Tribute from "tributejs";
+import "tributejs/dist/tribute.css";
+import "trix/dist/trix";
+import "trix/dist/trix.css";


We still have an issue with vitejs where these "css imports that are done in a dependency" don't work :-/

vitejs/vite#3409

Surprising!

KoltonG

🍣 awesome @stephenh !!

KoltonG · 2021-05-28T15:29:06Z

src/components/RichTextEditor.tsx

@@ -0,0 +1,152 @@
+import { Global } from "@emotion/react";
+import * as React from "react";


Question: Is this still required with our new setup in Beam?

It's only for the React.createElement line down below which is how the original code that we copy/pasted created the <trix-editor> custom HTML element / web component thingy.

Since the line below is already importing React what about we merge them and/or take out the createElement via a named export on line 3?

Oh sure, I was too wrote-Java-for-a-decade thinking that React.createElement was "a static method on the React class", but we can import { createElement, ... }. Yep, changed.

KoltonG · 2021-05-28T15:33:08Z

src/components/RichTextEditor.tsx

+import Tribute from "tributejs";
+import "tributejs/dist/tribute.css";
+import "trix/dist/trix";
+import "trix/dist/trix.css";


Surprising!

KoltonG · 2021-05-28T15:37:55Z

src/components/RichTextEditor.stories.tsx

+
+export default {
+  component: RichTextEditor,
+  title: "Components/Rich Text Editor",


Suggested change

title: "Components/Rich Text Editor",

title: "Components/Rich Text Editors",

Adding this will merge the parent story name and the child story into one.

Oh, I get why you were doing this now. Cool, will change.

Yeah! For single stories I usually opt for the singular title and do the as approach like you saw before

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.

KoltonG · 2021-05-28T15:41:00Z

src/components/RichTextEditor.tsx

+      {/* TODO: Not sure what to pass to labelProps. */}
+      {label && <Label labelProps={{}} label={label} />}
+      <div css={trixCssOverrides}>
+        {React.createElement("trix-editor", {


Curious about this approach vs <TrixEditor /> usage (if I am understanding this right)?

The <TrixEditor /> in BP is actually our own src/components/Trix.sx that is doing this same createElement(trix-editor) line. (Which is confusing, the <TrixEditor /> doesn't "look like our thing". I renamed it here to <RichTextField /> which I think will be less confusing.)

KoltonG · 2021-05-28T15:41:46Z

src/components/RichTextEditor.tsx

+  return (
+    <div css={Css.w100.maxw("550px").$}>
+      {/* TODO: Not sure what to pass to labelProps. */}
+      {label && <Label labelProps={{}} label={label} />}


I think that is a React-Aria label thingy?

Yeah, they come back from hooks like useTextField but I wasn't sure what look to use here. useTextField returns both labelProps and inputProps but the inputProps specifically want to be on an input type=text and not the input type=hidden. ...not really sure.

KoltonG · 2021-05-28T15:48:14Z

src/components/RichTextEditor.tsx

+  );
+}
+
+function attachTributeJs(mergeTags: string[], editorElement: HTMLElement) {


Question: Wondering if we could return the tribute object and possibly add useEffect in the component above listening on the mergeTags and use https://www.npmjs.com/package/tributejs#updating-a-collection-with-new-data to real-time update the tags? Not sure if that was attempted before?

Yeah, we could do that, just hasn't been necessary yet.

I copy/pasted this over and hopefully this will be fine for awhile, but it might be worth using a beam Menu and useOverlay to do this native and drop tribute all together at some point.

KoltonG · 2021-05-28T15:48:43Z

src/components/RichTextEditor.tsx

+
+function attachTributeJs(mergeTags: string[], editorElement: HTMLElement) {
+  const values = mergeTags.map((value) => ({ value }));
+  const tribute = new Tribute({


Pretty neat that you could include images here too! https://www.npmjs.com/package/tributejs#how-do-i-add-an-image-to-the-items-in-the-list but not sure how it will look 😋

KoltonG · 2021-05-28T15:51:14Z

src/components/RichTextEditor.tsx

+  } catch {}
+}
+
+const trixCssOverrides = {


💯 awesome!

## [1.32.0](v1.31.0...v1.32.0) (2021-06-01) ### Features * Upstream Trix/RichTextField. ([#90](#90)) ([24fdcf5](24fdcf5))

homebound-team-bot · 2021-06-01T13:04:51Z

🎉 This PR is included in version 1.32.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Upstream Trix/RichTextField.

ab3a82c

stephenh requested review from bdow, KoltonG, ksk5280 and lucyconklin as code owners May 28, 2021 15:12

stephenh requested a review from alexkuang May 28, 2021 15:12

stephenh changed the title ~~Upstream Trix/RichTextField.~~ feat: Upstream Trix/RichTextField. May 28, 2021

stephenh commented May 28, 2021

View reviewed changes

stephenh added 2 commits May 28, 2021 10:15

Fix comment, use inputProps.

4ac2d4d

Move helper function, remove useTextField b/c its not a text field.

1ff0103

KoltonG approved these changes May 28, 2021

View reviewed changes

stephenh added 6 commits May 28, 2021 11:08

PR feedback.

691311a

Rename to RichTextField instead of editor, add BoundRichTextField.

69ec9c0

Update comment.

a3a0602

Use a ref for onChange and disable the hooks warning.

fedf3ee

Include the tag matching.

454282f

Fix comment.

ba67a5e

stephenh merged commit 24fdcf5 into main Jun 1, 2021

stephenh deleted the rich-text-editor branch June 1, 2021 13:02

homebound-team-bot pushed a commit that referenced this pull request Jun 1, 2021

chore(release): 1.32.0 [skip ci]

9161ef8

## [1.32.0](v1.31.0...v1.32.0) (2021-06-01) ### Features * Upstream Trix/RichTextField. ([#90](#90)) ([24fdcf5](24fdcf5))

homebound-team-bot added the released label Jun 1, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Upstream Trix/RichTextField. #90

feat: Upstream Trix/RichTextField. #90

stephenh commented May 28, 2021

stephenh May 28, 2021

KoltonG May 28, 2021

KoltonG left a comment

KoltonG May 28, 2021

stephenh May 28, 2021

KoltonG May 28, 2021

stephenh May 28, 2021 •

edited

Loading

KoltonG May 28, 2021

KoltonG May 28, 2021

stephenh May 28, 2021

KoltonG May 28, 2021

stephenh May 28, 2021 •

edited

Loading

KoltonG May 28, 2021

stephenh May 28, 2021

KoltonG May 28, 2021

stephenh May 28, 2021

KoltonG May 28, 2021

stephenh May 28, 2021

KoltonG May 28, 2021

KoltonG May 28, 2021

homebound-team-bot commented Jun 1, 2021

		@@ -0,0 +1,152 @@
		import { Global } from "@emotion/react";
		import * as React from "react";

	title: "Components/Rich Text Editor",
	title: "Components/Rich Text Editors",

feat: Upstream Trix/RichTextField. #90

feat: Upstream Trix/RichTextField. #90

Conversation

stephenh commented May 28, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KoltonG left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephenh May 28, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

stephenh May 28, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

homebound-team-bot commented Jun 1, 2021

stephenh May 28, 2021 •

edited

Loading

stephenh May 28, 2021 •

edited

Loading