Skip to content

Commit

Permalink
support richtext in editor
Browse files Browse the repository at this point in the history
  • Loading branch information
queden committed Jan 25, 2022
1 parent ee4cb0b commit 85e5566
Show file tree
Hide file tree
Showing 9 changed files with 948 additions and 24 deletions.
19 changes: 19 additions & 0 deletions browser/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,21 @@
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.0.0",
"@testing-library/user-event": "^13.2.1",
"@tiptap/core": "^2.0.0-beta.163",
"@tiptap/extension-bold": "^2.0.0-beta.25",
"@tiptap/extension-bubble-menu": "^2.0.0-beta.54",
"@tiptap/extension-character-count": "^2.0.0-beta.24",
"@tiptap/extension-document": "^2.0.0-beta.15",
"@tiptap/extension-history": "^2.0.0-beta.21",
"@tiptap/extension-italic": "^2.0.0-beta.25",
"@tiptap/extension-link": "^2.0.0-beta.35",
"@tiptap/extension-paragraph": "^2.0.0-beta.23",
"@tiptap/extension-placeholder": "^2.0.0-beta.46",
"@tiptap/extension-text": "^2.0.0-beta.15",
"@tiptap/extension-underline": "^2.0.0-beta.22",
"@tiptap/html": "^2.0.0-beta.162",
"@tiptap/react": "^2.0.0-beta.105",
"@tiptap/starter-kit": "^2.0.0-beta.171",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
"@types/react": "^17.0.20",
Expand All @@ -25,6 +40,7 @@
"glsl-rotate": "^1.1.0",
"glslify-loader": "^2.0.0",
"gsap": "^3.9.1",
"html-react-parser": "^1.4.5",
"ipfs-http-client": "^55.0.0",
"node-polyfill-webpack-plugin": "^1.1.4",
"raw-loader": "^4.0.2",
Expand All @@ -33,10 +49,13 @@
"react-helmet": "^6.1.0",
"react-icons": "^4.3.1",
"react-intersection-observer": "^8.33.1",
"react-modal": "^3.14.4",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"sanitize-html": "^2.6.1",
"stream-browserify": "^3.0.0",
"three": "^0.135.0",
"tippy.js": "^6.3.7",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0",
"webpack": "^5.66.0"
Expand Down
7 changes: 6 additions & 1 deletion browser/src/components/ContributionCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import {
import { getPatternPlaceholder } from "src/types";
import { getDisplayForAuthor } from "./SignatureContent";

import sanitizeHtml from "sanitize-html";
import parse from 'html-react-parser';

interface Props {
contribution: Contribution;
hideHeader?: boolean;
Expand Down Expand Up @@ -47,6 +50,8 @@ export function ContributionCard({
const authorDisplay = getDisplayForAuthor(author, true);
const date = dayjs(createdAt, { utc: true });
const dateDisplay = date.format("MMM, YYYY");

const responseHtml = parse(sanitizeHtml(response));

return (
<div
Expand All @@ -65,7 +70,7 @@ export function ContributionCard({
{replaceJSX(PromptDescriptions[prompt], {
[Placeholder]: <b>{getPatternPlaceholder(pattern, prompt)}</b>,
})}{" "}
{response}
{responseHtml}
</p>
<div className={isCompact ? "blobSingleContainer" : "blobContainer"}>
<BlobSingle
Expand Down
7 changes: 5 additions & 2 deletions browser/src/components/ContributionSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const PluriverseDissent = `I have read and understand the pluriverse, but
I want to help build the pluriverse together if my points of disagreement are considered and addressed.`;

const ResponseCharacterLimit = 900;
export const ResponseCharacterLimit = 900;
export const Placeholder = "________";
export const replaceJSX = (
str: string,
Expand Down Expand Up @@ -249,6 +249,7 @@ export function ContributionSection() {
Pattern.Pluriverse
);
const [response, setResponse] = useState<string | undefined>(undefined);
const [responseLength, setResponseLength] = useState<number | undefined>(undefined);
const [user, setUser] = useState<Author | undefined>();
const [provider, setProvider] = useState<
ethers.providers.Web3Provider | undefined
Expand Down Expand Up @@ -548,6 +549,8 @@ export function ContributionSection() {
value={response}
onChange={setResponse}
className="responseInput"
responseLength={responseLength}
setResponseLength={setResponseLength}
// TODO: make this populate an actual live preview from an example?? and shuffle?
extraProps={{
placeholder: "free gardens",
Expand All @@ -557,7 +560,7 @@ export function ContributionSection() {
}
</div>
<p className={descriptionText}>
{response?.length || 0} / {ResponseCharacterLimit}
{responseLength || 0} / {ResponseCharacterLimit}
</p>
</>
)}
Expand Down
2 changes: 1 addition & 1 deletion browser/src/components/core/AutoGrowInput.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,5 @@
font: inherit;

/* Place on top of each other */
grid-area: 1 / 1 / 2 / 2;
/*grid-area: 1 / 1 / 2 / 2;*/
}
31 changes: 16 additions & 15 deletions browser/src/components/core/AutoGrowInput.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,21 @@
import { InputHTMLAttributes } from "react";
import "./AutoGrowInput.css";
import { Editor } from "./Editor";

interface Props {
value?: string;
onChange: (value: string) => void;
responseLength: number | undefined;
setResponseLength: (value: number) => void;
className?: string;
extraProps?: InputHTMLAttributes<HTMLTextAreaElement>;
}

export function AutoGrowInput({
value,
onChange,
responseLength,
setResponseLength,
extraProps,
className,
}: Props) {
Expand Down Expand Up @@ -45,20 +50,16 @@ export function AutoGrowInput({
// >
// {value}
// </span>
<div className={`grow-wrap ${className ? className : ""}`}>
{/* <div className={`grow-wrap`}> */}
<textarea
{...(extraProps || {})}
className="form-textarea mt-1 block w-full"
style={{ width: "300px", minHeight: "200px" }}
// placeholder="Enter your response to the prompt..."
value={value}
onChange={(event) => onChange(event.target.value)}
></textarea>
</div>

// <span contentEditable="true" role="textbox" className="contenteditableSpan">
// {!value ? extraProps?.placeholder : ""}
// </span>
<>
<div className={`grow-wrap ${className ? className : ""}`}>
<Editor
value={value}
onChange={onChange}
responseLength={responseLength}
setResponseLength={setResponseLength}
placeholder={extraProps.placeholder ? extraProps.placeholder : null}
/>
</div>
</>
);
}
136 changes: 136 additions & 0 deletions browser/src/components/core/Editor.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
.ProseMirror {
/* You could leave this, but after a user resizes, then it ruins the auto sizing */
resize: none;

/* Firefox shows scrollbar on growth, you can hide like this. */
overflow: hidden;

/* Identical styling required!! */
border: 1px solid black;
padding: 0.5rem;
font: inherit;

width: 300px;
min-height: 200px;
max-height: 200px;

background-color: hsla(0,0%,100%,.1)
}

/* Placeholder (at the top) */
.ProseMirror p.is-editor-empty:first-child::before {
color: #adb5bd;
content: attr(data-placeholder);
float: left;
height: 0;
pointer-events: none;
}

.ProseMirror > p {
padding-top: 0;
font-size: inherit;
}

.ProseMirror > p::selection{
background: rgba(198, 142, 255, 0.5);
}

.ProseMirror > code {
padding-top: 0;
font-size: inherit;
}

.ProseMirror > a {
padding-top: 0;
font-size: inherit;
}

.contenteditableSpan {
display:inline-block;
border: solid 1px black;
background: white;
min-width: 200px;
padding: 0 2px;
}

.menu {
border: 1px solid black;
border-bottom: 0px;
padding: 0.25rem;
background-color: hsla(0,0%,100%,.1);
border-radius: 0.375rem 0.375rem 0 0;
width: 100%;
display: inline-block;
}

.menuItem {
margin-left: 0.5rem;
margin-right: 0.5rem;
}


.linkInput {
font: inherit;
padding-top: 0;
padding-bottom: 0;
border-radius: 0.375rem;
width: 100%;
margin-top: 24px;
}

.modal {
background-color: hsla(0, 0%, 15%, 1);
width:100%;
max-width:576px;
padding:3rem;
position:relative;
border-radius:0.375rem;
z-index: 9999;
}

.linkIcon {
font-size: 85%;
padding-left: 2px;
}

.white {
text-align: center;

background: white;
background-size: 200% auto;

color: white;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.modalButtons {
margin-top: 24px;
width: 100%;
display: flex;
justify-content: flex-end;
}

.addButton {
padding-left: 6px;
}

.cancelButton {
padding-right: 6px;
}

.overlay {
background-color: hsla(0,0%,100%,.1);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

display:flex;
align-items: center;
justify-content:center;
z-index: 8000;
}
Loading

0 comments on commit 85e5566

Please sign in to comment.