import autosize from "autosize";
+import { NoOptionI18nKeys } from "i18next";
import { Component, linkEvent } from "inferno";
-import { Prompt } from "inferno-router";
import { Language } from "lemmy-js-client";
import { i18n } from "../../i18next";
-import { UserService } from "../../services";
+import { HttpService, UserService } from "../../services";
import {
+ concurrentImageUpload,
customEmojisLookup,
- isBrowser,
markdownFieldCharacterLimit,
markdownHelpUrl,
+ maxUploadImages,
mdToHtml,
+ numToSI,
pictrsDeleteToast,
randomStr,
relTags,
setupTippy,
setupTribute,
toast,
- uploadImage,
} from "../../utils";
+import { isBrowser } from "../../utils/browser/is-browser";
import { EmojiPicker } from "./emoji-picker";
import { Icon, Spinner } from "./icon";
import { LanguageSelect } from "./language-select";
-
+import NavigationPrompt from "./navigation-prompt";
+import ProgressBar from "./progress-bar";
interface MarkdownTextAreaProps {
initialContent?: string;
initialLanguageId?: number;
finished?: boolean;
showLanguage?: boolean;
hideNavigationWarnings?: boolean;
- onContentChange?(val: string): any;
- onReplyCancel?(): any;
- onSubmit?(msg: { val?: string; formId: string; languageId?: number }): any;
+ onContentChange?(val: string): void;
+ onReplyCancel?(): void;
+ onSubmit?(content: string, formId: string, languageId?: number): void;
allLanguages: Language[]; // TODO should probably be nullable
siteLanguages: number[]; // TODO same
}
+interface ImageUploadStatus {
+ total: number;
+ uploaded: number;
+}
+
interface MarkdownTextAreaState {
content?: string;
languageId?: number;
previewMode: boolean;
+ imageUploadStatus?: ImageUploadStatus;
loading: boolean;
- imageLoading: boolean;
+ submitted: boolean;
}
export class MarkdownTextArea extends Component<
private id = `comment-textarea-${randomStr()}`;
private formId = `comment-form-${randomStr()}`;
private tribute: any;
+
state: MarkdownTextAreaState = {
content: this.props.initialContent,
languageId: this.props.initialLanguageId,
previewMode: false,
loading: false,
- imageLoading: false,
+ submitted: false,
};
constructor(props: any, context: any) {
}
componentDidMount() {
- let textarea: any = document.getElementById(this.id);
+ const textarea: any = document.getElementById(this.id);
if (textarea) {
autosize(textarea);
this.tribute.attach(textarea);
}
}
- componentDidUpdate() {
- if (!this.props.hideNavigationWarnings && this.state.content) {
- window.onbeforeunload = () => true;
- } else {
- window.onbeforeunload = null;
- }
- }
-
componentWillReceiveProps(nextProps: MarkdownTextAreaProps) {
if (nextProps.finished) {
- this.setState({ previewMode: false, loading: false, content: undefined });
+ this.setState({
+ previewMode: false,
+ imageUploadStatus: undefined,
+ loading: false,
+ content: undefined,
+ });
if (this.props.replyType) {
this.props.onReplyCancel?.();
}
- let textarea: any = document.getElementById(this.id);
- let form: any = document.getElementById(this.formId);
+ const textarea: any = document.getElementById(this.id);
+ const form: any = document.getElementById(this.formId);
form.reset();
setTimeout(() => autosize.update(textarea), 10);
}
}
- componentWillUnmount() {
- window.onbeforeunload = null;
- }
-
render() {
- let languageId = this.state.languageId;
+ const languageId = this.state.languageId;
+ // TODO add these prompts back in at some point
+ // <Prompt
+ // when={!this.props.hideNavigationWarnings && this.state.content}
+ // message={i18n.t("block_leaving")}
+ // />
return (
<form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
- <Prompt
- when={!this.props.hideNavigationWarnings && this.state.content}
- message={i18n.t("block_leaving")}
+ <NavigationPrompt
+ when={
+ !this.props.hideNavigationWarnings &&
+ !!this.state.content &&
+ !this.state.submitted
+ }
/>
<div className="form-group row">
<div className={`col-sm-12`}>
value={this.state.content}
onInput={linkEvent(this, this.handleContentChange)}
onPaste={linkEvent(this, this.handleImageUploadPaste)}
+ onKeyDown={linkEvent(this, this.handleKeyBinds)}
required
- disabled={this.props.disabled}
+ disabled={this.isDisabled}
rows={2}
maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
placeholder={this.props.placeholder}
dangerouslySetInnerHTML={mdToHtml(this.state.content)}
/>
)}
+ {this.state.imageUploadStatus &&
+ this.state.imageUploadStatus.total > 1 && (
+ <ProgressBar
+ className="mt-2"
+ striped
+ animated
+ value={this.state.imageUploadStatus.uploaded}
+ max={this.state.imageUploadStatus.total}
+ text={i18n.t("pictures_uploded_progess", {
+ uploaded: this.state.imageUploadStatus.uploaded,
+ total: this.state.imageUploadStatus.total,
+ })}
+ />
+ )}
</div>
<label className="sr-only" htmlFor={this.id}>
{i18n.t("body")}
</div>
<div className="row">
<div className="col-sm-12 d-flex flex-wrap">
- {this.props.buttonTitle && (
- <button
- type="submit"
- className="btn btn-sm btn-secondary mr-2"
- disabled={this.props.disabled || this.state.loading}
- >
- {this.state.loading ? (
- <Spinner />
- ) : (
- <span>{this.props.buttonTitle}</span>
- )}
- </button>
- )}
- {this.props.replyType && (
- <button
- type="button"
- className="btn btn-sm btn-secondary mr-2"
- onClick={linkEvent(this, this.handleReplyCancel)}
- >
- {i18n.t("cancel")}
- </button>
- )}
- {this.state.content && (
- <button
- className={`btn btn-sm btn-secondary mr-2 ${
- this.state.previewMode && "active"
- }`}
- onClick={linkEvent(this, this.handlePreviewToggle)}
- >
- {i18n.t("preview")}
- </button>
- )}
- {/* A flex expander */}
- <div className="flex-grow-1"></div>
-
- {this.props.showLanguage && (
- <LanguageSelect
- iconVersion
- allLanguages={this.props.allLanguages}
- selectedLanguageIds={
- languageId ? Array.of(languageId) : undefined
- }
- siteLanguages={this.props.siteLanguages}
- multiple={false}
- onChange={this.handleLanguageChange}
- />
- )}
- <button
- className="btn btn-sm text-muted"
- data-tippy-content={i18n.t("bold")}
- aria-label={i18n.t("bold")}
- onClick={linkEvent(this, this.handleInsertBold)}
- >
- <Icon icon="bold" classes="icon-inline" />
- </button>
- <button
- className="btn btn-sm text-muted"
- data-tippy-content={i18n.t("italic")}
- aria-label={i18n.t("italic")}
- onClick={linkEvent(this, this.handleInsertItalic)}
- >
- <Icon icon="italic" classes="icon-inline" />
- </button>
- <button
- className="btn btn-sm text-muted"
- data-tippy-content={i18n.t("link")}
- aria-label={i18n.t("link")}
- onClick={linkEvent(this, this.handleInsertLink)}
- >
- <Icon icon="link" classes="icon-inline" />
- </button>
+ {this.getFormatButton("bold", this.handleInsertBold)}
+ {this.getFormatButton("italic", this.handleInsertItalic)}
+ {this.getFormatButton("link", this.handleInsertLink)}
<EmojiPicker
onEmojiClick={e => this.handleEmoji(this, e)}
+ disabled={this.isDisabled}
></EmojiPicker>
<form className="btn btn-sm text-muted font-weight-bold">
<label
}`}
data-tippy-content={i18n.t("upload_image")}
>
- {this.state.imageLoading ? (
+ {this.state.imageUploadStatus ? (
<Spinner />
) : (
<Icon icon="image" classes="icon-inline" />
accept="image/*,video/*"
name="file"
className="d-none"
- disabled={!UserService.Instance.myUserInfo}
+ multiple
+ disabled={!UserService.Instance.myUserInfo || this.isDisabled}
onChange={linkEvent(this, this.handleImageUpload)}
/>
</form>
- <button
- className="btn btn-sm text-muted"
- data-tippy-content={i18n.t("header")}
- aria-label={i18n.t("header")}
- onClick={linkEvent(this, this.handleInsertHeader)}
- >
- <Icon icon="header" classes="icon-inline" />
- </button>
- <button
- className="btn btn-sm text-muted"
- data-tippy-content={i18n.t("strikethrough")}
- aria-label={i18n.t("strikethrough")}
- onClick={linkEvent(this, this.handleInsertStrikethrough)}
- >
- <Icon icon="strikethrough" classes="icon-inline" />
- </button>
- <button
- className="btn btn-sm text-muted"
- data-tippy-content={i18n.t("quote")}
- aria-label={i18n.t("quote")}
- onClick={linkEvent(this, this.handleInsertQuote)}
- >
- <Icon icon="format_quote" classes="icon-inline" />
- </button>
- <button
- className="btn btn-sm text-muted"
- data-tippy-content={i18n.t("list")}
- aria-label={i18n.t("list")}
- onClick={linkEvent(this, this.handleInsertList)}
- >
- <Icon icon="list" classes="icon-inline" />
- </button>
- <button
- className="btn btn-sm text-muted"
- data-tippy-content={i18n.t("code")}
- aria-label={i18n.t("code")}
- onClick={linkEvent(this, this.handleInsertCode)}
- >
- <Icon icon="code" classes="icon-inline" />
- </button>
- <button
- className="btn btn-sm text-muted"
- data-tippy-content={i18n.t("subscript")}
- aria-label={i18n.t("subscript")}
- onClick={linkEvent(this, this.handleInsertSubscript)}
- >
- <Icon icon="subscript" classes="icon-inline" />
- </button>
- <button
- className="btn btn-sm text-muted"
- data-tippy-content={i18n.t("superscript")}
- aria-label={i18n.t("superscript")}
- onClick={linkEvent(this, this.handleInsertSuperscript)}
- >
- <Icon icon="superscript" classes="icon-inline" />
- </button>
- <button
- className="btn btn-sm text-muted"
- data-tippy-content={i18n.t("spoiler")}
- aria-label={i18n.t("spoiler")}
- onClick={linkEvent(this, this.handleInsertSpoiler)}
- >
- <Icon icon="alert-triangle" classes="icon-inline" />
- </button>
+ {this.getFormatButton("header", this.handleInsertHeader)}
+ {this.getFormatButton(
+ "strikethrough",
+ this.handleInsertStrikethrough
+ )}
+ {this.getFormatButton("quote", this.handleInsertQuote)}
+ {this.getFormatButton("list", this.handleInsertList)}
+ {this.getFormatButton("code", this.handleInsertCode)}
+ {this.getFormatButton("subscript", this.handleInsertSubscript)}
+ {this.getFormatButton("superscript", this.handleInsertSuperscript)}
+ {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
<a
href={markdownHelpUrl}
className="btn btn-sm text-muted font-weight-bold"
<Icon icon="help-circle" classes="icon-inline" />
</a>
</div>
+
+ <div className="col-sm-12 d-flex align-items-center flex-wrap">
+ {this.props.showLanguage && (
+ <LanguageSelect
+ iconVersion
+ allLanguages={this.props.allLanguages}
+ selectedLanguageIds={
+ languageId ? Array.of(languageId) : undefined
+ }
+ siteLanguages={this.props.siteLanguages}
+ onChange={this.handleLanguageChange}
+ disabled={this.isDisabled}
+ />
+ )}
+
+ {/* A flex expander */}
+ <div className="flex-grow-1"></div>
+
+ {this.props.buttonTitle && (
+ <button
+ type="submit"
+ className="btn btn-sm btn-secondary mr-2"
+ disabled={this.isDisabled}
+ >
+ {this.state.loading ? (
+ <Spinner />
+ ) : (
+ <span>{this.props.buttonTitle}</span>
+ )}
+ </button>
+ )}
+ {this.props.replyType && (
+ <button
+ type="button"
+ className="btn btn-sm btn-secondary mr-2"
+ onClick={linkEvent(this, this.handleReplyCancel)}
+ >
+ {i18n.t("cancel")}
+ </button>
+ )}
+ {this.state.content && (
+ <button
+ className={`btn btn-sm btn-secondary mr-2 ${
+ this.state.previewMode && "active"
+ }`}
+ onClick={linkEvent(this, this.handlePreviewToggle)}
+ >
+ {this.state.previewMode ? i18n.t("edit") : i18n.t("preview")}
+ </button>
+ )}
+ </div>
</div>
</form>
);
}
+ getFormatButton(
+ type: NoOptionI18nKeys,
+ handleClick: (i: MarkdownTextArea, event: any) => void
+ ) {
+ let iconType: string;
+
+ switch (type) {
+ case "spoiler": {
+ iconType = "alert-triangle";
+ break;
+ }
+ case "quote": {
+ iconType = "format_quote";
+ break;
+ }
+ default: {
+ iconType = type;
+ }
+ }
+
+ return (
+ <button
+ className="btn btn-sm text-muted"
+ data-tippy-content={i18n.t(type)}
+ aria-label={i18n.t(type)}
+ onClick={linkEvent(this, handleClick)}
+ disabled={this.isDisabled}
+ >
+ <Icon icon={iconType} classes="icon-inline" />
+ </button>
+ );
+ }
+
handleEmoji(i: MarkdownTextArea, e: any) {
let value = e.native;
if (value == null) {
- let emoji = customEmojisLookup.get(e.id)?.custom_emoji;
+ const emoji = customEmojisLookup.get(e.id)?.custom_emoji;
if (emoji) {
value = `![${emoji.alt_text}](${emoji.image_url} "${emoji.shortcode}")`;
}
content: `${i.state.content ?? ""} ${value} `,
});
i.contentChange();
- let textarea: any = document.getElementById(i.id);
+ const textarea: any = document.getElementById(i.id);
autosize.update(textarea);
}
handleImageUploadPaste(i: MarkdownTextArea, event: any) {
- let image = event.clipboardData.files[0];
+ const image = event.clipboardData.files[0];
if (image) {
i.handleImageUpload(i, image);
}
}
handleImageUpload(i: MarkdownTextArea, event: any) {
- let file: any;
+ const files: File[] = [];
if (event.target) {
event.preventDefault();
- file = event.target.files[0];
+ files.push(...event.target.files);
} else {
- file = event;
+ files.push(event);
}
- i.setState({ imageLoading: true });
-
- uploadImage(file)
- .then(res => {
- console.log("pictrs upload:");
- console.log(res);
- if (res.msg === "ok") {
- const imageMarkdown = `![](${res.url})`;
- const content = i.state.content;
- i.setState({
- content: content ? `${content}\n${imageMarkdown}` : imageMarkdown,
- imageLoading: false,
- });
- i.contentChange();
- const textarea: any = document.getElementById(i.id);
- autosize.update(textarea);
- pictrsDeleteToast(
- `${i18n.t("click_to_delete_picture")}: ${file.name}`,
- `${i18n.t("picture_deleted")}: ${file.name}`,
- `${i18n.t("failed_to_delete_picture")}: ${file.name}`,
- res.delete_url as string
- );
- } else {
- i.setState({ imageLoading: false });
- toast(JSON.stringify(res), "danger");
- }
- })
- .catch(error => {
- i.setState({ imageLoading: false });
- console.error(error);
- toast(error, "danger");
+ if (files.length > maxUploadImages) {
+ toast(
+ i18n.t("too_many_images_upload", {
+ count: Number(maxUploadImages),
+ formattedCount: numToSI(maxUploadImages),
+ }),
+ "danger"
+ );
+ } else {
+ i.setState({
+ imageUploadStatus: { total: files.length, uploaded: 0 },
});
+
+ i.uploadImages(i, files).then(() => {
+ i.setState({ imageUploadStatus: undefined });
+ });
+ }
+ }
+
+ async uploadImages(i: MarkdownTextArea, files: File[]) {
+ let errorOccurred = false;
+ const filesCopy = [...files];
+ while (filesCopy.length > 0 && !errorOccurred) {
+ try {
+ await Promise.all(
+ filesCopy.splice(0, concurrentImageUpload).map(async file => {
+ await i.uploadSingleImage(i, file);
+
+ this.setState(({ imageUploadStatus }) => ({
+ imageUploadStatus: {
+ ...(imageUploadStatus as Required<ImageUploadStatus>),
+ uploaded: (imageUploadStatus?.uploaded ?? 0) + 1,
+ },
+ }));
+ })
+ );
+ } catch (e) {
+ errorOccurred = true;
+ }
+ }
+ }
+
+ async uploadSingleImage(i: MarkdownTextArea, image: File) {
+ const res = await HttpService.client.uploadImage({ image });
+ console.log("pictrs upload:");
+ console.log(res);
+ if (res.state === "success") {
+ if (res.data.msg === "ok") {
+ const imageMarkdown = `![](${res.data.url})`;
+ i.setState(({ content }) => ({
+ content: content ? `${content}\n${imageMarkdown}` : imageMarkdown,
+ }));
+ i.contentChange();
+ const textarea: any = document.getElementById(i.id);
+ autosize.update(textarea);
+ pictrsDeleteToast(image.name, res.data.delete_url as string);
+ } else {
+ throw JSON.stringify(res.data);
+ }
+ } else if (res.state === "failed") {
+ i.setState({ imageUploadStatus: undefined });
+ console.error(res.msg);
+ toast(res.msg, "danger");
+
+ throw res.msg;
+ }
}
contentChange() {
// Coerces the undefineds to empty strings, for replacing in the DB
- let content = this.state.content ?? "";
+ const content = this.state.content ?? "";
this.props.onContentChange?.(content);
}
i.contentChange();
}
+ // Keybind handler
+ // Keybinds inspired by github comment area
+ handleKeyBinds(i: MarkdownTextArea, event: KeyboardEvent) {
+ if (event.ctrlKey) {
+ switch (event.key) {
+ case "k": {
+ i.handleInsertLink(i, event);
+ break;
+ }
+ case "Enter": {
+ if (!this.isDisabled) {
+ i.handleSubmit(i, event);
+ }
+
+ break;
+ }
+ case "b": {
+ i.handleInsertBold(i, event);
+ break;
+ }
+ case "i": {
+ i.handleInsertItalic(i, event);
+ break;
+ }
+ case "e": {
+ i.handleInsertCode(i, event);
+ break;
+ }
+ case "8": {
+ i.handleInsertList(i, event);
+ break;
+ }
+ case "s": {
+ i.handleInsertSpoiler(i, event);
+ break;
+ }
+ case "p": {
+ if (i.state.content) i.handlePreviewToggle(i, event);
+ break;
+ }
+ case ".": {
+ i.handleInsertQuote(i, event);
+ break;
+ }
+ }
+ }
+ }
+
handlePreviewToggle(i: MarkdownTextArea, event: any) {
event.preventDefault();
i.setState({ previewMode: !i.state.previewMode });
handleSubmit(i: MarkdownTextArea, event: any) {
event.preventDefault();
- i.setState({ loading: true });
- let msg = {
- val: i.state.content,
- formId: i.formId,
- languageId: i.state.languageId,
- };
- i.props.onSubmit?.(msg);
+ if (i.state.content) {
+ i.setState({ loading: true, submitted: true });
+ i.props.onSubmit?.(i.state.content, i.formId, i.state.languageId);
+ }
}
handleReplyCancel(i: MarkdownTextArea) {
handleInsertList(i: MarkdownTextArea, event: any) {
event.preventDefault();
- i.simpleBeginningofLine("-");
+ i.simpleBeginningofLine(`-${i.getSelectedText() ? " " : ""}`);
}
handleInsertQuote(i: MarkdownTextArea, event: any) {
}
simpleInsert(chars: string) {
- let content = this.state.content;
+ const content = this.state.content;
if (!content) {
this.setState({ content: `${chars} ` });
} else {
});
}
- let textarea: any = document.getElementById(this.id);
+ const textarea: any = document.getElementById(this.id);
textarea.focus();
setTimeout(() => {
autosize.update(textarea);
handleInsertSpoiler(i: MarkdownTextArea, event: any) {
event.preventDefault();
- let beforeChars = `\n::: spoiler ${i18n.t("spoiler")}\n`;
- let afterChars = "\n:::\n";
+ const beforeChars = `\n::: spoiler ${i18n.t("spoiler")}\n`;
+ const afterChars = "\n:::\n";
i.simpleSurroundBeforeAfter(beforeChars, afterChars);
}
quoteInsert() {
- let textarea: any = document.getElementById(this.id);
- let selectedText = window.getSelection()?.toString();
- let content = this.state.content;
+ const textarea: any = document.getElementById(this.id);
+ const selectedText = window.getSelection()?.toString();
+ const { content } = this.state;
if (selectedText) {
- let quotedText =
+ const quotedText =
selectedText
.split("\n")
.map(t => `> ${t}`)
}
getSelectedText(): string {
- let textarea: any = document.getElementById(this.id);
- let start: number = textarea.selectionStart;
- let end: number = textarea.selectionEnd;
+ const { selectionStart: start, selectionEnd: end } =
+ document.getElementById(this.id) as any;
return start !== end ? this.state.content?.substring(start, end) ?? "" : "";
}
+
+ get isDisabled() {
+ return (
+ this.state.loading ||
+ this.props.disabled ||
+ !!this.state.imageUploadStatus
+ );
+ }
}