From 591a18b09b24b76cc2f8f1100db254bbb56ad77e Mon Sep 17 00:00:00 2001 From: Konstantin Markov Date: Wed, 15 May 2024 12:40:34 +0300 Subject: [PATCH] Changes after review --- .../controllers/VocabularyEditController.tsx | 55 ++++++++++++------- .../views/vocabulary-config-modal.html | 8 +-- .../views/FormattingOptionsMultiSelect.tsx | 14 ++--- scripts/core/editor3/actions/editor3.tsx | 2 +- scripts/core/editor3/directive.tsx | 30 ++-------- scripts/core/helpers/utils.tsx | 4 ++ scripts/core/ui/ui.ts | 2 +- 7 files changed, 56 insertions(+), 59 deletions(-) diff --git a/scripts/apps/vocabularies/controllers/VocabularyEditController.tsx b/scripts/apps/vocabularies/controllers/VocabularyEditController.tsx index 3f0f15e9d9..f892c2a9b8 100644 --- a/scripts/apps/vocabularies/controllers/VocabularyEditController.tsx +++ b/scripts/apps/vocabularies/controllers/VocabularyEditController.tsx @@ -10,6 +10,8 @@ import {VocabularyItemsViewEdit} from '../components/VocabularyItemsViewEdit'; import {defaultAllowedWorkflows} from 'apps/relations/services/RelationsService'; import {EDITOR_BLOCK_FIELD_TYPE} from 'apps/workspace/content/constants'; import {getEditor3RichTextFormattingOptions} from 'apps/workspace/content/components/get-content-profiles-form-config'; +import {ContentState, convertToRaw} from 'draft-js'; +import {getObjectEntriesGeneric} from '../../../core/helpers/utils'; VocabularyEditController.$inject = [ '$scope', @@ -23,7 +25,6 @@ VocabularyEditController.$inject = [ ]; interface IScope extends IScopeConfigController { - item?: Partial; setFormDirty: () => void; newItemTemplate: any; idRegex: string; @@ -35,8 +36,13 @@ interface IScope extends IScopeConfigController { _errorUniqueness: boolean; errorMessage: string; save: () => void; + + // custom-editor-block props START formattingOptionsOnChange?: (options: Array) => void; editorBlockFormattingOptions?: Array<{value: [RICH_FORMATTING_OPTION, string]}>; + fakeItem?: Partial; + // custom-editor-block props END + updateUI: () => void; requestEditor3DirectivesToGenerateHtml: Array<() => void>; handleTemplateValueChange: (value: string) => void; @@ -57,6 +63,8 @@ interface IScope extends IScopeConfigController { const idRegex = '^[a-zA-Z0-9-_]+$'; const editorBlockFieldId = 'editor_block_field'; +type IFormattingOptionTuple = [notTranslatedOption: RICH_FORMATTING_OPTION, translatedOption: string]; + export function VocabularyEditController( $scope: IScope, notify, api, metadata, cvSchema, relationsService, $timeout, ) { @@ -99,8 +107,7 @@ export function VocabularyEditController( function onError(response) { if (angular.isDefined(response.data._issues)) { if (angular.isDefined(response.data._issues['validator exception'])) { - notify.error(gettext('Error: ' + - response.data._issues['validator exception'])); + notify.error(gettext('Error: {{ message }}', {message: response.data._issues['validator exception']})); } else if (angular.isDefined(response.data._issues.error) && response.data._issues.error.required_field) { let params = response.data._issues.params; @@ -129,13 +136,17 @@ export function VocabularyEditController( if ($scope.vocabulary.field_type === EDITOR_BLOCK_FIELD_TYPE) { const vocabulary = $scope.vocabulary; - $scope.item = { + $scope.fakeItem = { fields_meta: { /** * Fake field, needed for compatibility with sdEditor3 directive */ - [editorBlockFieldId]: {draftjsState: vocabulary.field_options?.template}, + [editorBlockFieldId]: { + draftjsState: vocabulary.field_options?.template != null + ? vocabulary.field_options.template + : [convertToRaw(ContentState.createFromText(''))], + }, }, }; @@ -149,21 +160,25 @@ export function VocabularyEditController( 'media', ]); - const formattingOptions = Object.entries(getEditor3RichTextFormattingOptions()) - .map(([notTranslatedOption, translatedOption]) => ({value: [notTranslatedOption, translatedOption]})) - .filter(({value}: {value: [RICH_FORMATTING_OPTION, string]}) => - excludedOptions.has(value[0]) === false, + const formattingOptions = getObjectEntriesGeneric( + getEditor3RichTextFormattingOptions(), + ) + .filter(([notTranslatedOption]) => + excludedOptions.has(notTranslatedOption) === false, + ) + .map(([notTranslatedOption, translatedOption]) => + ({value: [notTranslatedOption, translatedOption]}), ); - return formattingOptions as Array<{value: [RICH_FORMATTING_OPTION, string]}>; + return formattingOptions as Array<{value: IFormattingOptionTuple}>; })(); $scope.formattingOptionsOnChange = function(options) { - vocabulary.field_options = { - formatting_options: options, - }; + if (vocabulary.field_options == null) { + vocabulary.field_options = {}; + } - $scope.updateUI(); + vocabulary.field_options.formatting_options = options; /** * Apply current changes to item and save them to the field as html, @@ -173,10 +188,7 @@ export function VocabularyEditController( fn(); }); - $scope.$broadcast('formattingOptions-update', { - editorFormat: options, - editorState: $scope.item.fields_meta[editorBlockFieldId].draftjsState, - }); + $scope.updateUI(); }; } @@ -194,9 +206,14 @@ export function VocabularyEditController( fn(); }); $scope.vocabulary.field_options = $scope.vocabulary.field_options ?? {}; + + /** + * Formatting options are updated in formattingOptionsOnChange and + * don't need to be updated explicitly here again. + */ $scope.vocabulary.field_options = { ...$scope.vocabulary.field_options, - template: $scope.item.fields_meta?.[editorBlockFieldId].draftjsState, + template: $scope.fakeItem.fields_meta?.[editorBlockFieldId].draftjsState, }; } diff --git a/scripts/apps/vocabularies/views/vocabulary-config-modal.html b/scripts/apps/vocabularies/views/vocabulary-config-modal.html index 97ae5ab56b..483d37990b 100644 --- a/scripts/apps/vocabularies/views/vocabulary-config-modal.html +++ b/scripts/apps/vocabularies/views/vocabulary-config-modal.html @@ -168,10 +168,8 @@

CreateFormatting Options
Create diff --git a/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx b/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx index d0fd6268ee..f3d3146946 100644 --- a/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx +++ b/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx @@ -1,20 +1,18 @@ import React from 'react'; import {TreeSelect} from 'superdesk-ui-framework/react'; -import {IArticleField, RICH_FORMATTING_OPTION} from 'superdesk-api'; +import {RICH_FORMATTING_OPTION} from 'superdesk-api'; import {gettext} from 'core/utils'; interface IProps { value: Array | null; - fieldId: string; - fields: Dictionary; - onChange(value: Array, fieldId: string): void; - formattingOptions: Array<{value: [RICH_FORMATTING_OPTION, string]}>; + onChange(value: Array): void; + options: Array<{value: [RICH_FORMATTING_OPTION, string]}>; } export class FormattingOptionsTreeSelect extends React.Component { render(): React.ReactNode { const values = this.props.value != null - ? this.props.formattingOptions + ? this.props.options .filter((option) => this.props.value.includes(option.value[0])) .map((option) => option.value) : []; @@ -24,9 +22,9 @@ export class FormattingOptionsTreeSelect extends React.Component { kind="synchronous" getId={(option) => option[0]} getLabel={(option) => option[1]} - getOptions={() => this.props.formattingOptions} + getOptions={() => this.props.options} onChange={(newFormattingOptions) => { - this.props.onChange(newFormattingOptions.map((option) => option[0]), this.props.fieldId); + this.props.onChange(newFormattingOptions.map((option) => option[0])); }} value={values} allowMultiple diff --git a/scripts/core/editor3/actions/editor3.tsx b/scripts/core/editor3/actions/editor3.tsx index ebdf125aef..ccc58fa1b0 100644 --- a/scripts/core/editor3/actions/editor3.tsx +++ b/scripts/core/editor3/actions/editor3.tsx @@ -302,7 +302,7 @@ export function autocomplete(value: string) { } export type IActionPayloadSetExternalOptions = - Pick; + Partial>; export function setExternalOptions(payload: IActionPayloadSetExternalOptions) { return { diff --git a/scripts/core/editor3/directive.tsx b/scripts/core/editor3/directive.tsx index cfb600856f..2ac02e3e58 100644 --- a/scripts/core/editor3/directive.tsx +++ b/scripts/core/editor3/directive.tsx @@ -15,7 +15,7 @@ import createEditorStore, { } from './store'; import {getContentStateFromHtml} from './html/from-html'; -import {changeEditorState, setReadOnly, changeLimitConfig} from './actions'; +import {changeEditorState, setReadOnly, changeLimitConfig, setExternalOptions} from './actions'; import ng from 'core/services/ng'; import {IArticle, RICH_FORMATTING_OPTION} from 'superdesk-api'; @@ -196,13 +196,6 @@ class Editor3Directive { */ value: '=', - - /** - * @type {String} - * @description EditorValue is editorState instead of HTML. - */ - outputEditorState: '=', - /** * @type {String} * @description required for editor3 to be able to set metadata for fields. Mainly editor_state @@ -349,12 +342,10 @@ class Editor3Directive { } })(); - const renderEditor3 = (options?: {unmount: boolean}) => { + const renderEditor3 = () => { const element = $element.get(0); - if (options?.unmount) { - ReactDOM.unmountComponentAtNode(element); - } + ReactDOM.unmountComponentAtNode(element); const textStatistics = ( @@ -389,7 +380,6 @@ class Editor3Directive { const editor3 = ( { - store = createEditorStore( - { - ...this, - editorFormat: data.editorFormat, - editorState: data.editorState, - }, - ng.get('spellcheck'), - true, - ); - - renderEditor3({unmount: false}); + $scope.$watch('vm.editorFormat', (editorFormat) => { + store.dispatch(setExternalOptions({editorFormat: editorFormat})); }); // this is triggered from MacrosController.call diff --git a/scripts/core/helpers/utils.tsx b/scripts/core/helpers/utils.tsx index a64fdd8975..745482aacb 100644 --- a/scripts/core/helpers/utils.tsx +++ b/scripts/core/helpers/utils.tsx @@ -31,6 +31,10 @@ export function pick(obj: T, ...ke return picked; } +export function getObjectEntriesGeneric(obj: any): Array<[KEY, VALUE]> { + return Object.entries(obj) as Array<[KEY, VALUE]>; +} + // type-safe alternative to lodash.omit export function omit(obj: T, ...keysToOmit: Array): Omit { const keys = new Set(); diff --git a/scripts/core/ui/ui.ts b/scripts/core/ui/ui.ts index a6c3ce6652..645816c9ec 100644 --- a/scripts/core/ui/ui.ts +++ b/scripts/core/ui/ui.ts @@ -1293,7 +1293,7 @@ export default angular.module('superdesk.core.ui', [ 'sdFormattingOptionsTreeSelect', reactToAngular1( FormattingOptionsTreeSelect, - ['value', 'fieldId', 'fields', 'onChange', 'formattingOptions'], + ['value', 'onChange', 'options'], ), )