LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-26 06:11:15 +00:00
Code Issues Projects Releases Wiki Activity

Fixing markup not throwing onContentChange. Fixes #182

Browse source
This commit is contained in:
Dessalines 2021-02-21 21:30:11 -05:00
parent ee77f700b3
commit 12e27b4c64
1 changed files with 81 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

153
src/shared/components/markdown-textarea.tsx
View file

@ -1,5 +1,5 @@
import { Component, linkEvent } from 'inferno'; import { Component, linkEvent } from "inferno";
import { Prompt } from 'inferno-router'; import { Prompt } from "inferno-router";
import { import {
mdToHtml, mdToHtml,
randomStr, randomStr,
@ -9,12 +9,12 @@ import {
pictrsDeleteToast, pictrsDeleteToast,
setupTippy, setupTippy,
isBrowser, isBrowser,
} from '../utils'; } from "../utils";
import { UserService } from '../services'; import { UserService } from "../services";
import autosize from 'autosize'; import autosize from "autosize";
import { i18n } from '../i18next'; import { i18n } from "../i18next";
import { pictrsUri } from '../env'; import { pictrsUri } from "../env";
import { Icon, Spinner } from './icon'; import { Icon, Spinner } from "./icon";
interface MarkdownTextAreaProps { interface MarkdownTextAreaProps {
initialContent: string; initialContent: string;
@ -65,7 +65,7 @@ export class MarkdownTextArea extends Component<
if (textarea) { if (textarea) {
autosize(textarea); autosize(textarea);
this.tribute.attach(textarea); this.tribute.attach(textarea);
textarea.addEventListener('tribute-replaced', () => { textarea.addEventListener("tribute-replaced", () => {
this.state.content = textarea.value; this.state.content = textarea.value;
this.setState(this.state); this.setState(this.state);
autosize.update(textarea); autosize.update(textarea);
@ -94,7 +94,7 @@ export class MarkdownTextArea extends Component<
if (nextProps.finished) { if (nextProps.finished) {
this.state.previewMode = false; this.state.previewMode = false;
this.state.loading = false; this.state.loading = false;
this.state.content = ''; this.state.content = "";
this.setState(this.state); this.setState(this.state);
if (this.props.replyType) { if (this.props.replyType) {
this.props.onReplyCancel(); this.props.onReplyCancel();
@ -117,13 +117,13 @@ export class MarkdownTextArea extends Component<
<form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}> <form id={this.formId} onSubmit={linkEvent(this, this.handleSubmit)}>
<Prompt <Prompt
when={!this.props.hideNavigationWarnings && this.state.content} when={!this.props.hideNavigationWarnings && this.state.content}
message={i18n.t('block_leaving')} message={i18n.t("block_leaving")}
/> />
<div class="form-group row"> <div class="form-group row">
<div className={`col-sm-12`}> <div className={`col-sm-12`}>
<textarea <textarea
id={this.id} id={this.id}
className={`form-control ${this.state.previewMode && 'd-none'}`} className={`form-control ${this.state.previewMode && "d-none"}`}
value={this.state.content} value={this.state.content}
onInput={linkEvent(this, this.handleContentChange)} onInput={linkEvent(this, this.handleContentChange)}
onPaste={linkEvent(this, this.handleImageUploadPaste)} onPaste={linkEvent(this, this.handleImageUploadPaste)}
@ -140,7 +140,7 @@ export class MarkdownTextArea extends Component<
)} )}
</div> </div>
<label class="sr-only" htmlFor={this.id}> <label class="sr-only" htmlFor={this.id}>
{i18n.t('body')} {i18n.t("body")}
</label> </label>
</div> </div>
<div class="row"> <div class="row">
@ -164,41 +164,41 @@ export class MarkdownTextArea extends Component<
class="btn btn-sm btn-secondary mr-2" class="btn btn-sm btn-secondary mr-2"
onClick={linkEvent(this, this.handleReplyCancel)} onClick={linkEvent(this, this.handleReplyCancel)}
> >
{i18n.t('cancel')} {i18n.t("cancel")}
</button> </button>
)} )}
{this.state.content && ( {this.state.content && (
<button <button
className={`btn btn-sm btn-secondary mr-2 ${ className={`btn btn-sm btn-secondary mr-2 ${
this.state.previewMode && 'active' this.state.previewMode && "active"
}`} }`}
onClick={linkEvent(this, this.handlePreviewToggle)} onClick={linkEvent(this, this.handlePreviewToggle)}
> >
{i18n.t('preview')} {i18n.t("preview")}
</button> </button>
)} )}
{/* A flex expander */} {/* A flex expander */}
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<button <button
class="btn btn-sm text-muted" class="btn btn-sm text-muted"
data-tippy-content={i18n.t('bold')} data-tippy-content={i18n.t("bold")}
aria-label={i18n.t('bold')} aria-label={i18n.t("bold")}
onClick={linkEvent(this, this.handleInsertBold)} onClick={linkEvent(this, this.handleInsertBold)}
> >
<Icon icon="bold" classes="icon-inline" /> <Icon icon="bold" classes="icon-inline" />
</button> </button>
<button <button
class="btn btn-sm text-muted" class="btn btn-sm text-muted"
data-tippy-content={i18n.t('italic')} data-tippy-content={i18n.t("italic")}
aria-label={i18n.t('italic')} aria-label={i18n.t("italic")}
onClick={linkEvent(this, this.handleInsertItalic)} onClick={linkEvent(this, this.handleInsertItalic)}
> >
<Icon icon="italic" classes="icon-inline" /> <Icon icon="italic" classes="icon-inline" />
</button> </button>
<button <button
class="btn btn-sm text-muted" class="btn btn-sm text-muted"
data-tippy-content={i18n.t('link')} data-tippy-content={i18n.t("link")}
aria-label={i18n.t('link')} aria-label={i18n.t("link")}
onClick={linkEvent(this, this.handleInsertLink)} onClick={linkEvent(this, this.handleInsertLink)}
> >
<Icon icon="link" classes="icon-inline" /> <Icon icon="link" classes="icon-inline" />
@ -206,8 +206,8 @@ export class MarkdownTextArea extends Component<
<form class="btn btn-sm text-muted font-weight-bold"> <form class="btn btn-sm text-muted font-weight-bold">
<label <label
htmlFor={`file-upload-${this.id}`} htmlFor={`file-upload-${this.id}`}
className={`mb-0 ${UserService.Instance.user && 'pointer'}`} className={`mb-0 ${UserService.Instance.user && "pointer"}`}
data-tippy-content={i18n.t('upload_image')} data-tippy-content={i18n.t("upload_image")}
> >
{this.state.imageLoading ? ( {this.state.imageLoading ? (
<Spinner /> <Spinner />
@ -227,64 +227,64 @@ export class MarkdownTextArea extends Component<
</form> </form>
<button <button
class="btn btn-sm text-muted" class="btn btn-sm text-muted"
data-tippy-content={i18n.t('header')} data-tippy-content={i18n.t("header")}
aria-label={i18n.t('header')} aria-label={i18n.t("header")}
onClick={linkEvent(this, this.handleInsertHeader)} onClick={linkEvent(this, this.handleInsertHeader)}
> >
<Icon icon="header" classes="icon-inline" /> <Icon icon="header" classes="icon-inline" />
</button> </button>
<button <button
class="btn btn-sm text-muted" class="btn btn-sm text-muted"
data-tippy-content={i18n.t('strikethrough')} data-tippy-content={i18n.t("strikethrough")}
aria-label={i18n.t('strikethrough')} aria-label={i18n.t("strikethrough")}
onClick={linkEvent(this, this.handleInsertStrikethrough)} onClick={linkEvent(this, this.handleInsertStrikethrough)}
> >
<Icon icon="strikethrough" classes="icon-inline" /> <Icon icon="strikethrough" classes="icon-inline" />
</button> </button>
<button <button
class="btn btn-sm text-muted" class="btn btn-sm text-muted"
data-tippy-content={i18n.t('quote')} data-tippy-content={i18n.t("quote")}
aria-label={i18n.t('quote')} aria-label={i18n.t("quote")}
onClick={linkEvent(this, this.handleInsertQuote)} onClick={linkEvent(this, this.handleInsertQuote)}
> >
<Icon icon="format_quote" classes="icon-inline" /> <Icon icon="format_quote" classes="icon-inline" />
</button> </button>
<button <button
class="btn btn-sm text-muted" class="btn btn-sm text-muted"
data-tippy-content={i18n.t('list')} data-tippy-content={i18n.t("list")}
aria-label={i18n.t('list')} aria-label={i18n.t("list")}
onClick={linkEvent(this, this.handleInsertList)} onClick={linkEvent(this, this.handleInsertList)}
> >
<Icon icon="list" classes="icon-inline" /> <Icon icon="list" classes="icon-inline" />
</button> </button>
<button <button
class="btn btn-sm text-muted" class="btn btn-sm text-muted"
data-tippy-content={i18n.t('code')} data-tippy-content={i18n.t("code")}
aria-label={i18n.t('code')} aria-label={i18n.t("code")}
onClick={linkEvent(this, this.handleInsertCode)} onClick={linkEvent(this, this.handleInsertCode)}
> >
<Icon icon="code" classes="icon-inline" /> <Icon icon="code" classes="icon-inline" />
</button> </button>
<button <button
class="btn btn-sm text-muted" class="btn btn-sm text-muted"
data-tippy-content={i18n.t('subscript')} data-tippy-content={i18n.t("subscript")}
aria-label={i18n.t('subscript')} aria-label={i18n.t("subscript")}
onClick={linkEvent(this, this.handleInsertSubscript)} onClick={linkEvent(this, this.handleInsertSubscript)}
> >
<Icon icon="subscript" classes="icon-inline" /> <Icon icon="subscript" classes="icon-inline" />
</button> </button>
<button <button
class="btn btn-sm text-muted" class="btn btn-sm text-muted"
data-tippy-content={i18n.t('superscript')} data-tippy-content={i18n.t("superscript")}
aria-label={i18n.t('superscript')} aria-label={i18n.t("superscript")}
onClick={linkEvent(this, this.handleInsertSuperscript)} onClick={linkEvent(this, this.handleInsertSuperscript)}
> >
<Icon icon="superscript" classes="icon-inline" /> <Icon icon="superscript" classes="icon-inline" />
</button> </button>
<button <button
class="btn btn-sm text-muted" class="btn btn-sm text-muted"
data-tippy-content={i18n.t('spoiler')} data-tippy-content={i18n.t("spoiler")}
aria-label={i18n.t('spoiler')} aria-label={i18n.t("spoiler")}
onClick={linkEvent(this, this.handleInsertSpoiler)} onClick={linkEvent(this, this.handleInsertSpoiler)}
> >
<Icon icon="alert-triangle" classes="icon-inline" /> <Icon icon="alert-triangle" classes="icon-inline" />
@ -292,7 +292,7 @@ export class MarkdownTextArea extends Component<
<a <a
href={markdownHelpUrl} href={markdownHelpUrl}
class="btn btn-sm text-muted font-weight-bold" class="btn btn-sm text-muted font-weight-bold"
title={i18n.t('formatting_help')} title={i18n.t("formatting_help")}
rel="noopener" rel="noopener"
> >
<Icon icon="help-circle" classes="icon-inline" /> <Icon icon="help-circle" classes="icon-inline" />
@ -320,20 +320,20 @@ export class MarkdownTextArea extends Component<
} }
const formData = new FormData(); const formData = new FormData();
formData.append('images[]', file); formData.append("images[]", file);
i.state.imageLoading = true; i.state.imageLoading = true;
i.setState(i.state); i.setState(i.state);
fetch(pictrsUri, { fetch(pictrsUri, {
method: 'POST', method: "POST",
body: formData, body: formData,
}) })
.then(res => res.json()) .then(res => res.json())
.then(res => { .then(res => {
console.log('pictrs upload:'); console.log("pictrs upload:");
console.log(res); console.log(res);
if (res.msg == 'ok') { if (res.msg == "ok") {
let hash = res.files[0].file; let hash = res.files[0].file;
let url = `${pictrsUri}/${hash}`; let url = `${pictrsUri}/${hash}`;
let deleteToken = res.files[0].delete_token; let deleteToken = res.files[0].delete_token;
@ -343,33 +343,38 @@ export class MarkdownTextArea extends Component<
content = content ? `${content}\n${imageMarkdown}` : imageMarkdown; content = content ? `${content}\n${imageMarkdown}` : imageMarkdown;
i.state.content = content; i.state.content = content;
i.state.imageLoading = false; i.state.imageLoading = false;
i.contentChange();
i.setState(i.state); i.setState(i.state);
let textarea: any = document.getElementById(i.id); let textarea: any = document.getElementById(i.id);
autosize.update(textarea); autosize.update(textarea);
pictrsDeleteToast( pictrsDeleteToast(
i18n.t('click_to_delete_picture'), i18n.t("click_to_delete_picture"),
i18n.t('picture_deleted'), i18n.t("picture_deleted"),
deleteUrl deleteUrl
); );
} else { } else {
i.state.imageLoading = false; i.state.imageLoading = false;
i.setState(i.state); i.setState(i.state);
toast(JSON.stringify(res), 'danger'); toast(JSON.stringify(res), "danger");
} }
}) })
.catch(error => { .catch(error => {
i.state.imageLoading = false; i.state.imageLoading = false;
i.setState(i.state); i.setState(i.state);
toast(error, 'danger'); toast(error, "danger");
}); });
} }
contentChange() {
if (this.props.onContentChange) {
this.props.onContentChange(this.state.content);
}
}
handleContentChange(i: MarkdownTextArea, event: any) { handleContentChange(i: MarkdownTextArea, event: any) {
i.state.content = event.target.value; i.state.content = event.target.value;
i.contentChange();
i.setState(i.state); i.setState(i.state);
if (i.props.onContentChange) {
i.props.onContentChange(i.state.content);
}
} }
handlePreviewToggle(i: MarkdownTextArea, event: any) { handlePreviewToggle(i: MarkdownTextArea, event: any) {
@ -393,7 +398,7 @@ export class MarkdownTextArea extends Component<
handleInsertLink(i: MarkdownTextArea, event: any) { handleInsertLink(i: MarkdownTextArea, event: any) {
event.preventDefault(); event.preventDefault();
if (!i.state.content) { if (!i.state.content) {
i.state.content = ''; i.state.content = "";
} }
let textarea: any = document.getElementById(i.id); let textarea: any = document.getElementById(i.id);
let start: number = textarea.selectionStart; let start: number = textarea.selectionStart;
@ -408,10 +413,11 @@ export class MarkdownTextArea extends Component<
textarea.focus(); textarea.focus();
setTimeout(() => (textarea.selectionEnd = end + 3), 10); setTimeout(() => (textarea.selectionEnd = end + 3), 10);
} else { } else {
i.state.content += '[]()'; i.state.content += "[]()";
textarea.focus(); textarea.focus();
setTimeout(() => (textarea.selectionEnd -= 1), 10); setTimeout(() => (textarea.selectionEnd -= 1), 10);
} }
i.contentChange();
i.setState(i.state); i.setState(i.state);
} }
@ -420,16 +426,16 @@ export class MarkdownTextArea extends Component<
} }
simpleBeginningofLine(chars: string) { simpleBeginningofLine(chars: string) {
this.simpleSurroundBeforeAfter(`${chars} `, '', ''); this.simpleSurroundBeforeAfter(`${chars} `, "", "");
} }
simpleSurroundBeforeAfter( simpleSurroundBeforeAfter(
beforeChars: string, beforeChars: string,
afterChars: string, afterChars: string,
emptyChars = '___' emptyChars = "___"
) { ) {
if (!this.state.content) { if (!this.state.content) {
this.state.content = ''; this.state.content = "";
} }
let textarea: any = document.getElementById(this.id); let textarea: any = document.getElementById(this.id);
let start: number = textarea.selectionStart; let start: number = textarea.selectionStart;
@ -446,6 +452,7 @@ export class MarkdownTextArea extends Component<
} else { } else {
this.state.content += `${beforeChars}${emptyChars}${afterChars}`; this.state.content += `${beforeChars}${emptyChars}${afterChars}`;
} }
this.contentChange();
this.setState(this.state); this.setState(this.state);
setTimeout(() => { setTimeout(() => {
autosize.update(textarea); autosize.update(textarea);
@ -454,47 +461,47 @@ export class MarkdownTextArea extends Component<
handleInsertBold(i: MarkdownTextArea, event: any) { handleInsertBold(i: MarkdownTextArea, event: any) {
event.preventDefault(); event.preventDefault();
i.simpleSurround('**'); i.simpleSurround("**");
} }
handleInsertItalic(i: MarkdownTextArea, event: any) { handleInsertItalic(i: MarkdownTextArea, event: any) {
event.preventDefault(); event.preventDefault();
i.simpleSurround('*'); i.simpleSurround("*");
} }
handleInsertCode(i: MarkdownTextArea, event: any) { handleInsertCode(i: MarkdownTextArea, event: any) {
event.preventDefault(); event.preventDefault();
i.simpleSurround('`'); i.simpleSurround("`");
} }
handleInsertStrikethrough(i: MarkdownTextArea, event: any) { handleInsertStrikethrough(i: MarkdownTextArea, event: any) {
event.preventDefault(); event.preventDefault();
i.simpleSurround('~~'); i.simpleSurround("~~");
} }
handleInsertList(i: MarkdownTextArea, event: any) { handleInsertList(i: MarkdownTextArea, event: any) {
event.preventDefault(); event.preventDefault();
i.simpleBeginningofLine('-'); i.simpleBeginningofLine("-");
} }
handleInsertQuote(i: MarkdownTextArea, event: any) { handleInsertQuote(i: MarkdownTextArea, event: any) {
event.preventDefault(); event.preventDefault();
i.simpleBeginningofLine('>'); i.simpleBeginningofLine(">");
} }
handleInsertHeader(i: MarkdownTextArea, event: any) { handleInsertHeader(i: MarkdownTextArea, event: any) {
event.preventDefault(); event.preventDefault();
i.simpleBeginningofLine('#'); i.simpleBeginningofLine("#");
} }
handleInsertSubscript(i: MarkdownTextArea, event: any) { handleInsertSubscript(i: MarkdownTextArea, event: any) {
event.preventDefault(); event.preventDefault();
i.simpleSurround('~'); i.simpleSurround("~");
} }
handleInsertSuperscript(i: MarkdownTextArea, event: any) { handleInsertSuperscript(i: MarkdownTextArea, event: any) {
event.preventDefault(); event.preventDefault();
i.simpleSurround('^'); i.simpleSurround("^");
} }
simpleInsert(chars: string) { simpleInsert(chars: string) {
@ -509,13 +516,14 @@ export class MarkdownTextArea extends Component<
setTimeout(() => { setTimeout(() => {
autosize.update(textarea); autosize.update(textarea);
}, 10); }, 10);
this.contentChange();
this.setState(this.state); this.setState(this.state);
} }
handleInsertSpoiler(i: MarkdownTextArea, event: any) { handleInsertSpoiler(i: MarkdownTextArea, event: any) {
event.preventDefault(); event.preventDefault();
let beforeChars = `\n::: spoiler ${i18n.t('spoiler')}\n`; let beforeChars = `\n::: spoiler ${i18n.t("spoiler")}\n`;
let afterChars = '\n:::\n'; let afterChars = "\n:::\n";
i.simpleSurroundBeforeAfter(beforeChars, afterChars); i.simpleSurroundBeforeAfter(beforeChars, afterChars);
} }
@ -525,15 +533,16 @@ export class MarkdownTextArea extends Component<
if (selectedText) { if (selectedText) {
let quotedText = let quotedText =
selectedText selectedText
.split('\n') .split("\n")
.map(t => `> ${t}`) .map(t => `> ${t}`)
.join('\n') + '\n\n'; .join("\n") + "\n\n";
if (this.state.content == null) { if (this.state.content == null) {
this.state.content = ''; this.state.content = "";
} else { } else {
this.state.content += '\n'; this.state.content += "\n";
} }
this.state.content += quotedText; this.state.content += quotedText;
this.contentChange();
this.setState(this.state); this.setState(this.state);
// Not sure why this needs a delay // Not sure why this needs a delay
setTimeout(() => autosize.update(textarea), 10); setTimeout(() => autosize.update(textarea), 10);