Add mention support
Allow vertical resizing of inputs
This commit is contained in:
jude
@ -1,8 +1,13 @@
|
||||
import { useReminder } from "./ReminderContext";
|
||||
import { useRef } from "preact/hooks";
|
||||
import { useMentions } from "../App/useMentions";
|
||||
|
||||
export const Content = () => {
|
||||
const [reminder, setReminder] = useReminder();
|
||||
|
||||
const input = useRef(null);
|
||||
useMentions(input);
|
||||
|
||||
return (
|
||||
<>
|
||||
<label class="is-sr-only">Content</label>
|
||||
@ -12,6 +17,7 @@ export const Content = () => {
|
||||
maxlength={2000}
|
||||
name="content"
|
||||
rows={1}
|
||||
ref={input}
|
||||
value={reminder.content}
|
||||
onInput={(ev) => {
|
||||
setReminder((reminder) => ({
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { ImagePicker } from "../ImagePicker";
|
||||
import { Reminder } from "../../../api";
|
||||
import { useMentions } from "../../App/useMentions";
|
||||
import { useRef } from "preact/hooks";
|
||||
|
||||
type Props = {
|
||||
name: string;
|
||||
@ -8,6 +10,9 @@ type Props = {
|
||||
};
|
||||
|
||||
export const Author = ({ name, icon, setReminder }: Props) => {
|
||||
const input = useRef(null);
|
||||
useMentions(input);
|
||||
|
||||
return (
|
||||
<div class="embed-author-box">
|
||||
<div class="a">
|
||||
@ -34,6 +39,7 @@ export const Author = ({ name, icon, setReminder }: Props) => {
|
||||
class="discord-embed-author message-input autoresize"
|
||||
placeholder="Embed Author..."
|
||||
rows={1}
|
||||
ref={input}
|
||||
maxlength={256}
|
||||
name="embed_author"
|
||||
value={name}
|
||||
|
||||
@ -1,18 +1,27 @@
|
||||
export const Description = ({ description, onInput }) => (
|
||||
<>
|
||||
<label class="is-sr-only" for="embedDescription">
|
||||
Embed Description
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-description message-input autoresize "
|
||||
placeholder="Embed Description..."
|
||||
maxlength={4096}
|
||||
name="embed_description"
|
||||
rows={1}
|
||||
value={description}
|
||||
onInput={(ev) => {
|
||||
onInput(ev.currentTarget.value);
|
||||
}}
|
||||
></textarea>
|
||||
</>
|
||||
);
|
||||
import { useMentions } from "../../App/useMentions";
|
||||
import { useRef } from "preact/hooks";
|
||||
|
||||
export const Description = ({ description, onInput }) => {
|
||||
const input = useRef(null);
|
||||
useMentions(input);
|
||||
|
||||
return (
|
||||
<>
|
||||
<label class="is-sr-only" for="embedDescription">
|
||||
Embed Description
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-description message-input autoresize "
|
||||
placeholder="Embed Description..."
|
||||
maxlength={4096}
|
||||
name="embed_description"
|
||||
rows={1}
|
||||
ref={input}
|
||||
value={description}
|
||||
onInput={(ev) => {
|
||||
onInput(ev.currentTarget.value);
|
||||
}}
|
||||
></textarea>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
import { useRef } from "preact/hooks";
|
||||
import { useMentions } from "../../../App/useMentions";
|
||||
|
||||
export const Field = ({ title, value, inline, index, onUpdate }) => {
|
||||
const input = useRef(null);
|
||||
useMentions(input);
|
||||
|
||||
return (
|
||||
<div data-inlined={inline ? "1" : "0"} class="embed-field-box" key={index}>
|
||||
<label class="is-sr-only" for="embedFieldTitle">
|
||||
@ -44,6 +50,7 @@ export const Field = ({ title, value, inline, index, onUpdate }) => {
|
||||
maxlength={1024}
|
||||
name="embed_field_value[]"
|
||||
rows={1}
|
||||
ref={input}
|
||||
value={value}
|
||||
onInput={(ev) =>
|
||||
onUpdate({
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
import { Reminder } from "../../../api";
|
||||
import { ImagePicker } from "../ImagePicker";
|
||||
import { useMentions } from "../../App/useMentions";
|
||||
import { useRef } from "preact/hooks";
|
||||
|
||||
type Props = {
|
||||
footer: string;
|
||||
@ -7,37 +9,43 @@ type Props = {
|
||||
setReminder: (r: (reminder: Reminder) => Reminder) => void;
|
||||
};
|
||||
|
||||
export const Footer = ({ footer, icon, setReminder }: Props) => (
|
||||
<div class="embed-footer-box">
|
||||
<p class="image is-20x20 customizable">
|
||||
<ImagePicker
|
||||
class="is-rounded embed_footer_url"
|
||||
url={icon}
|
||||
alt="Footer profile-like image"
|
||||
setImage={(url: string) => {
|
||||
export const Footer = ({ footer, icon, setReminder }: Props) => {
|
||||
const input = useRef(null);
|
||||
useMentions(input);
|
||||
|
||||
return (
|
||||
<div class="embed-footer-box">
|
||||
<p class="image is-20x20 customizable">
|
||||
<ImagePicker
|
||||
class="is-rounded embed_footer_url"
|
||||
url={icon}
|
||||
alt="Footer profile-like image"
|
||||
setImage={(url: string) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
embed_footer_url: url,
|
||||
}));
|
||||
}}
|
||||
></ImagePicker>
|
||||
</p>
|
||||
<label class="is-sr-only" for="embedFooter">
|
||||
Embed Footer text
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-embed-footer message-input autoresize "
|
||||
placeholder="Embed Footer..."
|
||||
maxlength={2048}
|
||||
name="embed_footer"
|
||||
rows={1}
|
||||
ref={input}
|
||||
value={footer}
|
||||
onInput={(ev) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
embed_footer_url: url,
|
||||
embed_footer: ev.currentTarget.value,
|
||||
}));
|
||||
}}
|
||||
></ImagePicker>
|
||||
</p>
|
||||
<label class="is-sr-only" for="embedFooter">
|
||||
Embed Footer text
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-embed-footer message-input autoresize "
|
||||
placeholder="Embed Footer..."
|
||||
maxlength={2048}
|
||||
name="embed_footer"
|
||||
rows={1}
|
||||
value={footer}
|
||||
onInput={(ev) => {
|
||||
setReminder((reminder) => ({
|
||||
...reminder,
|
||||
embed_footer: ev.currentTarget.value,
|
||||
}));
|
||||
}}
|
||||
></textarea>
|
||||
</div>
|
||||
);
|
||||
></textarea>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,18 +1,28 @@
|
||||
export const Title = ({ title, onInput }) => (
|
||||
<>
|
||||
<label class="is-sr-only" for="embedTitle">
|
||||
Embed Title
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-title message-input autoresize"
|
||||
placeholder="Embed Title..."
|
||||
maxlength={256}
|
||||
rows={1}
|
||||
name="embed_title"
|
||||
value={title}
|
||||
onInput={(ev) => {
|
||||
onInput(ev.currentTarget.value);
|
||||
}}
|
||||
></textarea>
|
||||
</>
|
||||
);
|
||||
import { useParams } from "wouter";
|
||||
import { useRef } from "preact/hooks";
|
||||
import { useMentions } from "../../App/useMentions";
|
||||
|
||||
export const Title = ({ title, onInput }) => {
|
||||
const input = useRef(null);
|
||||
useMentions(input);
|
||||
|
||||
return (
|
||||
<>
|
||||
<label class="is-sr-only" for="embedTitle">
|
||||
Embed Title
|
||||
</label>
|
||||
<textarea
|
||||
class="discord-title message-input autoresize"
|
||||
placeholder="Embed Title..."
|
||||
maxlength={256}
|
||||
rows={1}
|
||||
ref={input}
|
||||
name="embed_title"
|
||||
value={title}
|
||||
onInput={(ev) => {
|
||||
onInput(ev.currentTarget.value);
|
||||
}}
|
||||
></textarea>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -4,3 +4,25 @@
|
||||
flex-direction: column;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tribute-container {
|
||||
background-color: #2b2d31;
|
||||
color: #fff;
|
||||
border-radius: 8px;
|
||||
margin: 4px;
|
||||
padding: 4px;
|
||||
box-shadow: 0 0 5px 0 rgba(0,0,0,0.75);
|
||||
|
||||
.highlight {
|
||||
background-color: #35373c;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea.autoresize {
|
||||
resize: vertical !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user