diff --git a/CHANGELOG.md b/CHANGELOG.md index 9d7616dfc..4a49398b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ ## UNRELEASED +### Changed + +- ([#104](https://github.com/demos-europe/demosplan-ui/pull/104)) Add slots for modal and button in DpEditor ([@gruenbergerdemos](https://github.com/gruenbergerdemos)) +- ([#104](https://github.com/demos-europe/demosplan-ui/pull/104)) Remove deprecated props in DpEditor ([@gruenbergerdemos](https://github.com/gruenbergerdemos)) +- ([#104](https://github.com/demos-europe/demosplan-ui/pull/104)) Remove unnecessary routes in DpEditor ([@gruenbergerdemos](https://github.com/gruenbergerdemos)) + ### Fixed - ([#111](https://github.com/demos-europe/demosplan-ui/pull/111)) Fix checkbox positioning in DpTableCardListHeader ([@muellerdemos](https://github.com/muellerdemos)) diff --git a/src/components/core/DpEditor/DpBoilerPlate.stories.mdx b/src/components/core/DpEditor/DpBoilerPlate.stories.mdx deleted file mode 100644 index 2bda4cf13..000000000 --- a/src/components/core/DpEditor/DpBoilerPlate.stories.mdx +++ /dev/null @@ -1,4 +0,0 @@ -# Boilerplate - -This component contains a multiselect to insert a boilerplate into a textarea. -It receives the boilerplates as a prop. diff --git a/src/components/core/DpEditor/DpBoilerPlate.vue b/src/components/core/DpEditor/DpBoilerPlate.vue deleted file mode 100644 index 5182b3ed7..000000000 --- a/src/components/core/DpEditor/DpBoilerPlate.vue +++ /dev/null @@ -1,126 +0,0 @@ - - - diff --git a/src/components/core/DpEditor/DpBoilerPlateModal.stories.mdx b/src/components/core/DpEditor/DpBoilerPlateModal.stories.mdx deleted file mode 100644 index 5ebc322e6..000000000 --- a/src/components/core/DpEditor/DpBoilerPlateModal.stories.mdx +++ /dev/null @@ -1,6 +0,0 @@ -# Boilerplate Modal - -This component contains the UI for inserting boilerplates into a textarea. - -If used in combination with DpEditor.vue and its wrapper TipTapEditText.vue (as is currently the case), the -button to open the modal is located in TipTapEditText.vue; otherwise, you need to define it. diff --git a/src/components/core/DpEditor/DpBoilerPlateModal.vue b/src/components/core/DpEditor/DpBoilerPlateModal.vue index 7d826ca8d..e69de29bb 100644 --- a/src/components/core/DpEditor/DpBoilerPlateModal.vue +++ b/src/components/core/DpEditor/DpBoilerPlateModal.vue @@ -1,147 +0,0 @@ - - - diff --git a/src/components/core/DpEditor/DpEditor.vue b/src/components/core/DpEditor/DpEditor.vue index d1b42c7c8..b4421bc83 100644 --- a/src/components/core/DpEditor/DpEditor.vue +++ b/src/components/core/DpEditor/DpEditor.vue @@ -4,14 +4,6 @@ v-if="maxlength !== 0" :class="prefixClass('lbl__hint')" v-cleanhtml="counterText" /> - - +
- - - - +
import('./DpBoilerPlateModal'), DpLinkModal: () => import('./DpLinkModal'), - DpRecommendationModal: () => import('./DpRecommendationModal'), DpUploadModal: () => import('./DpUploadModal') }, @@ -401,18 +369,7 @@ export default { props: { /** - * Defines which boilerplate types we want to see in modal. Possible are: consideration, email, news.notes - * if this property is set, the boilerPlate button appears in the tiptap editor - * @deprecated use toolbarItems instead - */ - boilerPlate: { - type: [String, Array], - default: '', - required: false - }, - - /** - * Needed to get the correct textarea for adding boilerplates via DpBoilerPlateModal.vue + * Only needed for testing purposes with data-cy */ editorId: { type: String, @@ -420,17 +377,6 @@ export default { default: '' }, - /** - * Array with numbers 1-6 defining which heading-buttons we want to show - * - * @deprecated use toolbarItems instead - */ - headings: { - required: false, - type: Array, - default: () => [] - }, - /** * To send data with submit form action we sometimes need to have a hidden input with tiptap's content. If the * hidden input should be added, the prop should be a string with input name (e.g. r_name) @@ -441,43 +387,6 @@ export default { default: '' }, - /** - * If true, the button to add images will be shown and the initial text will be scanned for img placeholders which will be then replaced by actual images. - * Inserted pictures will also be converted to placeholders on save. - * - * @deprecated use toolbarItems instead - */ - imageButton: { - type: Boolean, - required: false, - default: false - }, - - /** - * Enables menu buttons to mark text as deleted and inserted. - * The buttons will wrap the current text selection with a `del` or `ins` element, - * enabling users to indicate content changes in relation to a prior content version. - * This feature is currently only used for planning document paragraphs. - * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del - * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins - * - * @deprecated use toolbarItems instead - */ - insertAndDelete: { - type: Boolean, - required: false, - default: false - }, - - /** - * @deprecated use toolbarItems instead - */ - fullscreenButton: { - type: Boolean, - required: false, - default: true - }, - required: { type: Boolean, required: false, @@ -485,45 +394,8 @@ export default { }, /** - * Define if a button to add links should be visible in menu - * - * @deprecated use toolbarItems instead - */ - linkButton: { - required: false, - type: Boolean, - default: false - }, - - /** - * Define if a button to add ordered/unordered list should be visible in menu - * - * @deprecated use toolbarItems instead - */ - listButtons: { - required: false, - type: Boolean, - default: true - }, - - /** - * Enables a menu button to highlight/mark text. - * This will wrap the current text selection with a `mark` element, - * enabling users to enrich content with a semantic element to highlight text. - * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark - * - * @deprecated use toolbarItems instead - */ - mark: { - required: false, - type: Boolean, - default: false - }, - - /** - * Defaults will be set in this.menu: + * Defaults will be set in this.toolbar: * { - * boilerPlate: '', # [] || 'string' * headings: [], # Array of numbers 1-6 * imageButton: false, * insertAndDelete: false, @@ -531,7 +403,6 @@ export default { * linkButton: false, * listButtons: true, * mark: false, - * recommendationButton: false, * strikethrough: false, * table: false, * textDecoration: true @@ -559,36 +430,15 @@ export default { default: false }, - /** - * ProcedureId is required if we want to enable boilerplates - */ - procedureId: { - type: String, - required: false, - default: '' - }, - readonly: { required: false, default: false, type: Boolean }, - recommendationButton: { - required: false, - type: Boolean, - default: false - }, - /** - * boilerplateEditViewRoute: (Optional) route to a view that allows editing - * boilerplates. Displayed as a link at the bottom of the boilerplate modal, if - * toolbar.boilerplate is set * getFileByHash: (Optional) function that receives a file hash as parameter * and returns a route to that file. Used for displaying images. - * similarRecommendationsRoute: (Optional) route to fetch similar - * recommendations (needed if toolbar.recommendationButton is set to - * true) */ routes: { type: Object, @@ -596,32 +446,11 @@ export default { default: () => ({}), validator: (prop) => { return Object.keys(prop).every(key => [ - 'boilerplateEditViewRoute', - 'getFileByHash', - 'similarRecommendationsRoute' + 'getFileByHash' ].includes(key)) } }, - segmentId: { - type: String, - required: false, - default: '' - }, - - /** - * Enables a menu button to strike out text. - * This will wrap the current text selection with a `s` element, enabling users - * to enrich content with a semantic element to mark text as no longer relevant. - * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s - * @deprecated use toolbarItems instead - */ - strikethrough: { - required: false, - type: Boolean, - default: false - }, - /** * Pass in an Array of suggestions if you would like to use the suggestion plugin in tiptap. */ @@ -651,26 +480,6 @@ export default { default: () => ([]) }, - /** - * Set to true if you want table-insert button - * - * @deprecated use toolbarItems instead - */ - table: { - required: false, - type: Boolean, - default: false - }, - - /** - * @deprecated use toolbarItems instead - */ - textDecoration: { - type: Boolean, - required: false, - default: true - }, - value: { type: String, required: true @@ -751,27 +560,57 @@ export default { ] }, toolbar: Object.assign({ - boilerPlate: this.boilerPlate, - headings: this.headings, - imageButton: this.imageButton, - insertAndDelete: this.insertAndDelete, - fullscreenButton: this.fullscreenButton, - linkButton: this.linkButton, - listButtons: this.listButtons, - mark: this.mark, + /** + * Array with numbers 1-6 defining which heading-buttons we want to show + */ + headings: [], + /** + * If true, the button to add images will be shown and the initial text will be scanned for img placeholders which will be then replaced by actual images. + */ + imageButton: false, + /** + * Enables menu buttons to mark text as deleted and inserted. + * The buttons will wrap the current text selection with a `del` or `ins` element, + * enabling users to indicate content changes in relation to a prior content version. + * This feature is currently only used for planning document paragraphs. + * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del + * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins + */ + insertAndDelete: false, + fullscreenButton: true, + /** + * Define if a button to add links should be visible in menu + */ + linkButton: false, + /** + * Define if a button to add ordered/unordered list should be visible in menu + */ + listButtons: true, + /** + * Enables a menu button to highlight/mark text. + * This will wrap the current text selection with a `mark` element, + * enabling users to enrich content with a semantic element to highlight text. + * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark + */ + mark: false, obscure: this.obscure, - strikethrough: this.strikethrough, - table: this.table, - textDecoration: this.textDecoration + /** + * Enables a menu button to strike out text. + * This will wrap the current text selection with a `s` element, enabling users + * to enrich content with a semantic element to mark text as no longer relevant. + * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s + */ + strikethrough: false, + /** + * Set to true if you want table-insert button + */ + table: false, + textDecoration: true }, this.toolbarItems) } }, computed: { - boilerPlateEnabled () { - return Boolean(this.toolbar.boilerPlate) - }, - counterText () { return maxlengthHint(this.hiddenInputValue.length, this.maxlength) }, @@ -898,14 +737,6 @@ export default { return linkMark }, - openBoilerPlateModal () { - this.$refs.boilerPlateModal.toggleModal() - }, - - openRecommendationModal () { - this.$refs.recommendationModal.toggleModal('open') - }, - openUploadModal (data) { this.$refs.uploadModal.toggleModal(data) }, @@ -1056,9 +887,7 @@ export default { new Heading({ levels: this.toolbar.headings }) ] - if (this.toolbar.boilerPlate) { - extensions.push(new EditorInsertAtCursorPos()) - } + extensions.push(new EditorInsertAtCursorPos()) if (this.suggestions.length > 0) { this.suggestions.forEach(suggestionGroup => { diff --git a/src/components/core/DpEditor/DpRecommendationModal.stories.mdx b/src/components/core/DpEditor/DpRecommendationModal.stories.mdx deleted file mode 100644 index d53d5a016..000000000 --- a/src/components/core/DpEditor/DpRecommendationModal.stories.mdx +++ /dev/null @@ -1,3 +0,0 @@ -# Recommendation modal - -This component contains the UI for inserting recommendations into a textarea. diff --git a/src/components/core/DpEditor/DpRecommendationModal.vue b/src/components/core/DpEditor/DpRecommendationModal.vue index 9f0b7be45..e69de29bb 100644 --- a/src/components/core/DpEditor/DpRecommendationModal.vue +++ b/src/components/core/DpEditor/DpRecommendationModal.vue @@ -1,276 +0,0 @@ - - - diff --git a/src/components/core/DpEditor/DpRecommendationModal/DpInsertableRecommendation.vue b/src/components/core/DpEditor/DpRecommendationModal/DpInsertableRecommendation.vue deleted file mode 100644 index aec5c0b8d..000000000 --- a/src/components/core/DpEditor/DpRecommendationModal/DpInsertableRecommendation.vue +++ /dev/null @@ -1,129 +0,0 @@ - - -