diff --git a/README.md b/README.md index 3ebad88394..1489948040 100644 --- 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 index 8c9dc12bdd..e810ecb56f 100644 --- a/scripts/core/editor3/components/Editor3Component.tsx +++ b/scripts/core/editor3/components/Editor3Component.tsx @@ -464,6 +464,11 @@ export class Editor3Component extends React.Component { 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 { } : {}, )); + const blockStyle = (contentBlock): string => { + const type = contentBlock.getType(); + + if (type === 'code-block' && appConfig.features.showCharacterLimit) { + return 'showCharacterLimit'; + } + }; + return (
{ 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 index 3f74ef4c52..123dba2c68 100644 --- 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 index ad4c8dd48f..37ed556d0e 100644 --- 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 index 1ee75bd0a6..280d4082e4 100644 --- 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: {