Markdown editor: Remove character limit
## Issue Closes 5687: Ensure post mode has no text limit ## Changes - `type="markdown"` can now have unlimited length if clients don't define `textAreaMaxWidth`. - The internal default limit of 2000 is narrowed down to `type=textarea`.
This commit is contained in:
parent
e164fbdeda
commit
5d40a4c9f6
3 changed files with 15 additions and 12 deletions
|
@ -80,7 +80,7 @@ export class FormField extends React.PureComponent<Props> {
|
||||||
labelOnLeft,
|
labelOnLeft,
|
||||||
blockWrap,
|
blockWrap,
|
||||||
charCount,
|
charCount,
|
||||||
textAreaMaxLength = FF_MAX_CHARS_DEFAULT,
|
textAreaMaxLength,
|
||||||
quickActionLabel,
|
quickActionLabel,
|
||||||
quickActionHandler,
|
quickActionHandler,
|
||||||
...inputProps
|
...inputProps
|
||||||
|
@ -208,7 +208,7 @@ export class FormField extends React.PureComponent<Props> {
|
||||||
// to pass the current value to it's callback, nor query the current
|
// to pass the current value to it's callback, nor query the current
|
||||||
// text length from the callback. So, we'll use our own widget.
|
// text length from the callback. So, we'll use our own widget.
|
||||||
const hasCharCount = charCount !== undefined && charCount >= 0;
|
const hasCharCount = charCount !== undefined && charCount >= 0;
|
||||||
const countInfo = hasCharCount && (
|
const countInfo = hasCharCount && textAreaMaxLength !== undefined && (
|
||||||
<span className="comment__char-count-mde">{`${charCount || '0'}/${textAreaMaxLength}`}</span>
|
<span className="comment__char-count-mde">{`${charCount || '0'}/${textAreaMaxLength}`}</span>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -242,7 +242,7 @@ export class FormField extends React.PureComponent<Props> {
|
||||||
);
|
);
|
||||||
} else if (type === 'textarea') {
|
} else if (type === 'textarea') {
|
||||||
const hasCharCount = charCount !== undefined && charCount >= 0;
|
const hasCharCount = charCount !== undefined && charCount >= 0;
|
||||||
const countInfo = hasCharCount && (
|
const countInfo = hasCharCount && textAreaMaxLength !== undefined && (
|
||||||
<span className="comment__char-count">{`${charCount || '0'}/${textAreaMaxLength}`}</span>
|
<span className="comment__char-count">{`${charCount || '0'}/${textAreaMaxLength}`}</span>
|
||||||
);
|
);
|
||||||
input = (
|
input = (
|
||||||
|
@ -255,7 +255,13 @@ export class FormField extends React.PureComponent<Props> {
|
||||||
{quickAction}
|
{quickAction}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<textarea type={type} id={name} maxLength={textAreaMaxLength} ref={this.input} {...inputProps} />
|
<textarea
|
||||||
|
type={type}
|
||||||
|
id={name}
|
||||||
|
maxLength={textAreaMaxLength || FF_MAX_CHARS_DEFAULT}
|
||||||
|
ref={this.input}
|
||||||
|
{...inputProps}
|
||||||
|
/>
|
||||||
{countInfo}
|
{countInfo}
|
||||||
</fieldset-section>
|
</fieldset-section>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import { FF_MAX_CHARS_IN_POST } from 'constants/form-field';
|
|
||||||
import { FormField } from 'component/common/form';
|
import { FormField } from 'component/common/form';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -12,10 +11,10 @@ type Props = {
|
||||||
fileMimeType: ?string,
|
fileMimeType: ?string,
|
||||||
streamingUrl: ?string,
|
streamingUrl: ?string,
|
||||||
isStillEditing: boolean,
|
isStillEditing: boolean,
|
||||||
fetchStreamingUrl: string => void,
|
fetchStreamingUrl: (string) => void,
|
||||||
setPrevFileText: string => void,
|
setPrevFileText: (string) => void,
|
||||||
updatePublishForm: ({}) => void,
|
updatePublishForm: ({}) => void,
|
||||||
setCurrentFileType: string => void,
|
setCurrentFileType: (string) => void,
|
||||||
};
|
};
|
||||||
|
|
||||||
function PostEditor(props: Props) {
|
function PostEditor(props: Props) {
|
||||||
|
@ -62,7 +61,7 @@ function PostEditor(props: Props) {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
function readFileStream(url) {
|
function readFileStream(url) {
|
||||||
return fetch(url).then(res => res.text());
|
return fetch(url).then((res) => res.text());
|
||||||
}
|
}
|
||||||
|
|
||||||
async function updateEditorText(url) {
|
async function updateEditorText(url) {
|
||||||
|
@ -107,8 +106,7 @@ function PostEditor(props: Props) {
|
||||||
placeholder={__('My content for this post...')}
|
placeholder={__('My content for this post...')}
|
||||||
value={ready ? fileText : __('Loading...')}
|
value={ready ? fileText : __('Loading...')}
|
||||||
disabled={!ready || disabled}
|
disabled={!ready || disabled}
|
||||||
onChange={value => updatePublishForm({ fileText: value })}
|
onChange={(value) => updatePublishForm({ fileText: value })}
|
||||||
textAreaMaxLength={FF_MAX_CHARS_IN_POST}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,3 @@
|
||||||
export const FF_MAX_CHARS_DEFAULT = 2000;
|
export const FF_MAX_CHARS_DEFAULT = 2000;
|
||||||
export const FF_MAX_CHARS_IN_COMMENT = 2000;
|
export const FF_MAX_CHARS_IN_COMMENT = 2000;
|
||||||
export const FF_MAX_CHARS_IN_DESCRIPTION = 5000;
|
export const FF_MAX_CHARS_IN_DESCRIPTION = 5000;
|
||||||
export const FF_MAX_CHARS_IN_POST = 10000;
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue