Feliday/Feliday-UI
5
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: Redesign the format bar / textarea into a single bordered area with divider

Browse source
This commit is contained in:
Jay Sitter 2023-06-16 19:49:28 -04:00
parent ebba5bdd80
commit f9f4caf260
1 changed files with 115 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/shared/components/common/markdown-textarea.tsx
View file

@ -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";
@ -143,7 +144,19 @@ export class MarkdownTextArea extends Component<
}
/>
<div className="form-group row">
<div className="col-sm-12 d-flex flex-wrap">
<div className="col-12">
<div
className="rounded bg-white"
style={{
border: "1px solid var(--bs-border-color)",
}}
>
<div
className="d-flex flex-wrap"
style={{
"border-bottom": "1px solid var(--bs-border-color)",
}}
>
{this.getFormatButton("bold", this.handleInsertBold)}
{this.getFormatButton("italic", this.handleInsertItalic)}
{this.getFormatButton("link", this.handleInsertLink)}
@ -172,7 +185,9 @@ export class MarkdownTextArea extends Component<
name="file"
className="d-none"
multiple
disabled={!UserService.Instance.myUserInfo || this.isDisabled}
disabled={
!UserService.Instance.myUserInfo || this.isDisabled
}
onChange={linkEvent(this, this.handleImageUpload)}
/>
</form>
@ -185,7 +200,10 @@ export class MarkdownTextArea extends Component<
{this.getFormatButton("list", this.handleInsertList)}
{this.getFormatButton("code", this.handleInsertCode)}
{this.getFormatButton("subscript", this.handleInsertSubscript)}
{this.getFormatButton("superscript", this.handleInsertSuperscript)}
{this.getFormatButton(
"superscript",
this.handleInsertSuperscript
)}
{this.getFormatButton("spoiler", this.handleInsertSpoiler)}
<a
href={markdownHelpUrl}
@ -197,10 +215,12 @@ export class MarkdownTextArea extends Component<
</a>
</div>
<div className="col-sm-12 mt-2">
<div>
<textarea
id={this.id}
className={`form-control ${this.state.previewMode && "d-none"}`}
className={classNames("form-control border-0", {
"d-none": this.state.previewMode,
})}
value={this.state.content}
onInput={linkEvent(this, this.handleContentChange)}
onPaste={linkEvent(this, this.handleImageUploadPaste)}
@ -208,7 +228,9 @@ export class MarkdownTextArea extends Component<
required
disabled={this.isDisabled}
rows={2}
maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
maxLength={
this.props.maxLength ?? markdownFieldCharacterLimit
}
placeholder={this.props.placeholder}
/>
{this.state.previewMode && this.state.content && (
@ -235,8 +257,10 @@ export class MarkdownTextArea extends Component<
<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 mt-2">
<div className="col-12 d-flex align-items-center flex-wrap mt-2">
{this.props.showLanguage && (
<LanguageSelect
iconVersion