[SDANSA-359] feat(editor): Added character limit for preformatted fie…

…lds (#3303) * feat(editor): Added character limit for preformatted fields * fix lint
superdesk · Jan 31, 2020 · 52f8458 · 52f8458
1 parent a23c7ae
commit 52f8458
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -37,6 +37,7 @@ To configure the build, the `superdesk.config.js` file must export a function th
 - `features.swimlane`: `null` - enables switch view button in monitoring view, which allows to switch between list view or swimlane view. Example: `features: {swimlane: {defaultNumberOfColumns: 4}}` will enable switch view button and displays 4 columns when turned ON, set null or keep undefined to disable
 - `features.confirmMediaOnUpdate`: `true` - Display the user confirmation dialog in the updated story to use the media from the original story.
 - `features.nestedItemsInOutputStage` : `false` - Display only latest version of published item in output stages.
+- `features.showCharacterLimit` : `number` -  a character limit in the preformatted text field. The number defines the placement of the limiter and is based on the number of characters on one line.
 
 ##### Workspace
 - `workspace.content`: `false` - enable content view in workspace (obsolete)

diff --git a/scripts/core/editor3/components/Editor3Component.tsx b/scripts/core/editor3/components/Editor3Component.tsx
@@ -464,6 +464,11 @@ export class Editor3Component extends React.Component<IProps, IState> {
 
         window[EDITOR_GLOBAL_REFS][this.editorKey] = this.editor;
 
+        if (appConfig.features.showCharacterLimit) {
+            document.documentElement.style.
+                setProperty('--preCharacterLimit', appConfig.features.showCharacterLimit + 'ch');
+        }
+
         this.spellcheck();
     }
 
@@ -521,6 +526,14 @@ export class Editor3Component extends React.Component<IProps, IState> {
             } : {},
         ));
 
+        const blockStyle = (contentBlock): string => {
+            const type = contentBlock.getType();
+
+            if (type === 'code-block' && appConfig.features.showCharacterLimit) {
+                return 'showCharacterLimit';
+            }
+        };
+
         return (
             <div
                 className={cx}
@@ -565,6 +578,7 @@ export class Editor3Component extends React.Component<IProps, IState> {
                         handleBeforeInput={this.handleBeforeInput}
                         blockRenderMap={blockRenderMap}
                         blockRendererFn={blockRenderer}
+                        blockStyleFn={blockStyle}
                         customStyleMap={{...customStyleMap, ...this.props.highlightsManager.styleMap}}
                         onChange={(editorStateNext: EditorState) => {
                             // in order to position the popup component we need to know the position of editor selection

diff --git a/scripts/core/editor3/styles.scss b/scripts/core/editor3/styles.scss
@@ -475,39 +475,36 @@ $editor-styleButton-size: 3rem;
 	padding: 10px 20px;
 }
 
-:root {
-	--preCharacterLimit:40ch;
-}
-
 .Editor3-editor .public-DraftStyleDefault-pre {
 	background-color: rgba(123, 123, 123, 0.1);
 	font-family: 'Roboto Mono', monospace !important;
 	padding: 0 2ch;
 	overflow-y: auto;
-	position: relative;
 
 	[data-block="true"] {
 		border-bottom: none;
 		margin: 0 0 0.5;
 	}
 	pre {
+		position: relative;
 		white-space: pre !important;
 		padding-right: 2ch;
 		.public-DraftStyleDefault-block {
 			white-space: inherit;
 		}
-	}
-	&.showCharacterLimit:after {
-		content: '';
-		display: block;
-		position: absolute;
-		left:2ch;
-		top: 0;
-		bottom: 0;
-		width: var(--preCharacterLimit);
-		border-right: 1px dotted red;
-		z-index: 1;
-		pointer-events: none;
+
+		&.showCharacterLimit:after {
+			content: '';
+			display: block;
+			position: absolute;
+			left: 0;
+			top: 0;
+			bottom: 0;
+			width: var(--preCharacterLimit);
+			border-right: 1px dotted red;
+			z-index: 1;
+			pointer-events: none;
+		}
 	}
 }
 

diff --git a/scripts/core/superdesk-api.d.ts b/scripts/core/superdesk-api.d.ts
@@ -1090,6 +1090,7 @@ declare module 'superdesk-api' {
             elasticHighlight?: any;
             onlyEditor3?: any;
             nestedItemsInOutputStage?: boolean;
+            showCharacterLimit?: number;
         };
         auth: {
             google: boolean

diff --git a/superdesk.config.js b/superdesk.config.js
@@ -17,6 +17,7 @@ module.exports = function(grunt) {
             },
             validatePointOfInterestForImages: true,
             hideRoutedDesks: false,
+            showCharacterLimit: 40,
         },
         auth: {google: false},
         ingest: {