mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-12-28 19:20:21 +00:00
Merge pull request #1334 from jsit/feat/markdown-format-bar-above
feat: Move text formatting bar above textarea
This commit is contained in:
SleeplessOne1917
GitHub
commit
19b3de1bc2
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
.md-div p:last-child {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.md-div img {
|
||||
|
|
@ -371,7 +371,7 @@ br.big {
|
|||
}
|
||||
|
||||
.tribute-container li {
|
||||
padding: 5px 5px;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -410,13 +410,7 @@ br.big {
|
|||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.lang-select-action {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.lang-select-action:focus {
|
||||
width: auto;
|
||||
}
|
||||
em-emoji-picker {
|
||||
.emoji-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
--warning: #f39c12;
|
||||
--danger: #e74c3c;
|
||||
--light: #303030;
|
||||
--medium-light: var(--secondary);
|
||||
--dark: #dee2e6;
|
||||
--breakpoint-xs: 0;
|
||||
--breakpoint-sm: 576px;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
--warning: #ffc107;
|
||||
--danger: #873208;
|
||||
--light: #f8f9fa;
|
||||
--medium-light: var(--bs-gray-300);
|
||||
--dark: #343a40;
|
||||
--breakpoint-xs: 0;
|
||||
--breakpoint-sm: 576px;
|
||||
|
|
|
|||
|
|
@ -100,12 +100,9 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
|
|||
|
||||
return (
|
||||
<select
|
||||
className={classNames(
|
||||
"lang-select-action",
|
||||
this.props.iconVersion
|
||||
? "btn btn-sm text-muted"
|
||||
: "form-control custom-select"
|
||||
)}
|
||||
className={classNames("lang-select-action", {
|
||||
"form-control custom-select": !this.props.iconVersion,
|
||||
})}
|
||||
id={this.id}
|
||||
onChange={linkEvent(this, this.handleLanguageChange)}
|
||||
aria-label={i18n.t("language_select_placeholder")}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import autosize from "autosize";
|
||||
import classNames from "classnames";
|
||||
import { NoOptionI18nKeys } from "i18next";
|
||||
import { Component, linkEvent } from "inferno";
|
||||
import { Language } from "lemmy-js-client";
|
||||
|
|
@ -144,101 +145,123 @@ export class MarkdownTextArea extends Component<
|
|||
}
|
||||
/>
|
||||
<div className="form-group row">
|
||||
<div className={`col-sm-12`}>
|
||||
<textarea
|
||||
id={this.id}
|
||||
className={`form-control ${this.state.previewMode && "d-none"}`}
|
||||
value={this.state.content}
|
||||
onInput={linkEvent(this, this.handleContentChange)}
|
||||
onPaste={linkEvent(this, this.handleImageUploadPaste)}
|
||||
onKeyDown={linkEvent(this, this.handleKeyBinds)}
|
||||
required
|
||||
disabled={this.isDisabled}
|
||||
rows={2}
|
||||
maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
|
||||
placeholder={this.props.placeholder}
|
||||
/>
|
||||
{this.state.previewMode && this.state.content && (
|
||||
<div
|
||||
className="card border-secondary card-body md-div"
|
||||
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")}
|
||||
</label>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-12 d-flex flex-wrap">
|
||||
{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
|
||||
htmlFor={`file-upload-${this.id}`}
|
||||
className={`mb-0 ${
|
||||
UserService.Instance.myUserInfo && "pointer"
|
||||
}`}
|
||||
data-tippy-content={i18n.t("upload_image")}
|
||||
>
|
||||
{this.state.imageUploadStatus ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Icon icon="image" classes="icon-inline" />
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
id={`file-upload-${this.id}`}
|
||||
type="file"
|
||||
accept="image/*,video/*"
|
||||
name="file"
|
||||
className="d-none"
|
||||
multiple
|
||||
disabled={!UserService.Instance.myUserInfo || this.isDisabled}
|
||||
onChange={linkEvent(this, this.handleImageUpload)}
|
||||
/>
|
||||
</form>
|
||||
{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"
|
||||
title={i18n.t("formatting_help")}
|
||||
rel={relTags}
|
||||
<div className="col-12">
|
||||
<div
|
||||
className="rounded bg-light overflow-hidden"
|
||||
style={{
|
||||
border: "1px solid var(--medium-light)",
|
||||
}}
|
||||
>
|
||||
<Icon icon="help-circle" classes="icon-inline" />
|
||||
</a>
|
||||
<div
|
||||
className="d-flex flex-wrap"
|
||||
style={{
|
||||
"border-bottom": "1px solid var(--medium-light)",
|
||||
}}
|
||||
>
|
||||
{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
|
||||
htmlFor={`file-upload-${this.id}`}
|
||||
className={`mb-0 ${
|
||||
UserService.Instance.myUserInfo && "pointer"
|
||||
}`}
|
||||
data-tippy-content={i18n.t("upload_image")}
|
||||
>
|
||||
{this.state.imageUploadStatus ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<Icon icon="image" classes="icon-inline" />
|
||||
)}
|
||||
</label>
|
||||
<input
|
||||
id={`file-upload-${this.id}`}
|
||||
type="file"
|
||||
accept="image/*,video/*"
|
||||
name="file"
|
||||
className="d-none"
|
||||
multiple
|
||||
disabled={
|
||||
!UserService.Instance.myUserInfo || this.isDisabled
|
||||
}
|
||||
onChange={linkEvent(this, this.handleImageUpload)}
|
||||
/>
|
||||
</form>
|
||||
{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"
|
||||
title={i18n.t("formatting_help")}
|
||||
rel={relTags}
|
||||
>
|
||||
<Icon icon="help-circle" classes="icon-inline" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<textarea
|
||||
id={this.id}
|
||||
className={classNames("form-control border-0 rounded-0", {
|
||||
"d-none": this.state.previewMode,
|
||||
})}
|
||||
value={this.state.content}
|
||||
onInput={linkEvent(this, this.handleContentChange)}
|
||||
onPaste={linkEvent(this, this.handleImageUploadPaste)}
|
||||
onKeyDown={linkEvent(this, this.handleKeyBinds)}
|
||||
required
|
||||
disabled={this.isDisabled}
|
||||
rows={2}
|
||||
maxLength={
|
||||
this.props.maxLength ?? markdownFieldCharacterLimit
|
||||
}
|
||||
placeholder={this.props.placeholder}
|
||||
/>
|
||||
{this.state.previewMode && this.state.content && (
|
||||
<div
|
||||
className="card border-secondary card-body md-div"
|
||||
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")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-sm-12 d-flex align-items-center flex-wrap">
|
||||
<div className="col-12 d-flex align-items-center flex-wrap mt-2">
|
||||
{this.props.showLanguage && (
|
||||
<LanguageSelect
|
||||
iconVersion
|
||||
|
|
@ -258,7 +281,7 @@ export class MarkdownTextArea extends Component<
|
|||
{this.props.buttonTitle && (
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-sm btn-secondary mr-2"
|
||||
className="btn btn-sm btn-secondary ml-2"
|
||||
disabled={this.isDisabled}
|
||||
>
|
||||
{this.state.loading ? (
|
||||
|
|
@ -271,7 +294,7 @@ export class MarkdownTextArea extends Component<
|
|||
{this.props.replyType && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-secondary mr-2"
|
||||
className="btn btn-sm btn-secondary ml-2"
|
||||
onClick={linkEvent(this, this.handleReplyCancel)}
|
||||
>
|
||||
{i18n.t("cancel")}
|
||||
|
|
@ -279,7 +302,7 @@ export class MarkdownTextArea extends Component<
|
|||
)}
|
||||
{this.state.content && (
|
||||
<button
|
||||
className={`btn btn-sm btn-secondary mr-2 ${
|
||||
className={`btn btn-sm btn-secondary ml-2 ${
|
||||
this.state.previewMode && "active"
|
||||
}`}
|
||||
onClick={linkEvent(this, this.handlePreviewToggle)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue