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 {
+ concurrentImageUpload,
customEmojisLookup,
isBrowser,
markdownFieldCharacterLimit,
markdownHelpUrl,
+ maxUploadImages,
mdToHtml,
+ numToSI,
pictrsDeleteToast,
randomStr,
relTags,
import { EmojiPicker } from "./emoji-picker";
import { Icon, Spinner } from "./icon";
import { LanguageSelect } from "./language-select";
+import ProgressBar from "./progress-bar";
interface MarkdownTextAreaProps {
initialContent?: string;
siteLanguages: number[]; // TODO same
}
+interface ImageUploadStatus {
+ total: number;
+ uploaded: number;
+}
+
interface MarkdownTextAreaState {
content?: string;
languageId?: number;
previewMode: boolean;
loading: boolean;
- imageLoading: boolean;
+ imageUploadStatus?: ImageUploadStatus;
}
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,
};
constructor(props: any, context: any) {
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);
}
onInput={linkEvent(this, this.handleContentChange)}
onPaste={linkEvent(this, this.handleImageUploadPaste)}
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")}
<button
type="submit"
className="btn btn-sm btn-secondary mr-2"
- disabled={this.props.disabled || this.state.loading}
+ disabled={this.isDisabled}
>
{this.state.loading ? (
<Spinner />
languageId ? Array.of(languageId) : undefined
}
siteLanguages={this.props.siteLanguages}
- multiple={false}
onChange={this.handleLanguageChange}
+ disabled={this.isDisabled}
/>
)}
- <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"
);
}
+ 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) {
}
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 = ``;
- 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: 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, file: File) {
+ try {
+ const res = await uploadImage(file);
+ console.log("pictrs upload:");
+ console.log(res);
+ if (res.msg === "ok") {
+ const imageMarkdown = ``;
+ i.setState(({ content }) => ({
+ content: content ? `${content}\n${imageMarkdown}` : imageMarkdown,
+ }));
+ i.contentChange();
+ const textarea: any = document.getElementById(i.id);
+ autosize.update(textarea);
+ pictrsDeleteToast(file.name, res.delete_url as string);
+ } else {
+ throw JSON.stringify(res);
+ }
+ } catch (error) {
+ i.setState({ imageUploadStatus: undefined });
+ console.error(error);
+ toast(error, "danger");
+
+ throw error;
+ }
}
contentChange() {
}
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
+ );
+ }
}
projects / lemmy-ui.git / commitdiff