Merge pull request #427 from thematters/feat/limits

feat: title & summary limitations

.gitignore

@@ -107,3 +107,4 @@ sources.list
 src/themes/*.json
 
 .parcel-cache
+types/**/*

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matters/matters-editor",
-  "version": "0.1.27-alpha.3",
+  "version": "0.1.28",
   "description": "The editor component.",
   "author": "https://github.com/thematters",
   "homepage": "https://github.com/thematters/matters-editor",

src/components/Summary/index.tsx

@@ -2,7 +2,7 @@ import autosize from 'autosize'
 import classNames from 'classnames'
 import React from 'react'
 
-import { KEYCODES } from '../../enums/common'
+import { KEYCODES, MAX_ARTICE_SUMMARY_LENGTH } from '../../enums/common'
 import { Texts } from '../../enums/text'
 
 /**
@@ -72,7 +72,7 @@ const MattersEditorSummary: React.FC<Props> = ({
   })
   const counterClasses = classNames({
     counter: true,
-    error: length > 200,
+    error: length > MAX_ARTICE_SUMMARY_LENGTH,
   })
 
   return (
@@ -88,7 +88,9 @@ const MattersEditorSummary: React.FC<Props> = ({
         onKeyPress={handleKeyPress}
       />
       {!readOnly && (
-        <section className={counterClasses}>({length}/200)</section>
+        <section className={counterClasses}>
+          ({length}/{MAX_ARTICE_SUMMARY_LENGTH})
+        </section>
       )}
     </section>
   )

src/components/Title/index.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import React from 'react'
 import { Texts } from '../../enums/text'
+import { MAX_ARTICE_TITLE_LENGTH } from '../../enums/common'
 
 /**
  * This is an optional component belonged to the edoitor.
@@ -21,10 +22,6 @@ interface Props {
   update: (params: { title: any }) => void
 }
 
-const getValidTitleValue = (value: any, fallback: any): string => {
-  return value && value !== fallback ? value : ''
-}
-
 const MattersEditorTitle: React.FC<Props> = ({
   defaultValue,
   readOnly,
@@ -43,6 +40,8 @@ const MattersEditorTitle: React.FC<Props> = ({
 
   React.useEffect(() => setValue(defaultValue), [defaultValue])
 
+  const title = value.slice(0, MAX_ARTICE_TITLE_LENGTH)
+
   return (
     <header className={classes}>
       <input
@@ -51,7 +50,7 @@ const MattersEditorTitle: React.FC<Props> = ({
         placeholder={texts.TITLE_PLACEHOLDER}
         onChange={handleChange}
         onBlur={handleBlur}
-        value={getValidTitleValue(value, texts.TITLE_FALLBACK)}
+        value={title}
       />
     </header>
   )

src/enums/common.ts

@@ -58,3 +58,7 @@ export const UPLOAD_IMAGE_SIZE_LIMIT: number = 5 * 1024 * 1024
 export const UPLOAD_AUDIO_SIZE_LIMIT: number = 100 * 1024 * 1024
 
 export const URL_LIKE_BUTTON: string = 'url_like_button'
+
+export const MAX_ARTICE_TITLE_LENGTH = 100
+export const MAX_ARTICE_SUMMARY_LENGTH = 200
+export const MAX_ARTICLE_CONTENT_LENGTH = 50e3