From 578bce31b999b65b76e52867e65502cad7f4d25b Mon Sep 17 00:00:00 2001 From: Julie Lenaerts Date: Mon, 27 Jan 2025 11:28:44 +0100 Subject: [PATCH 01/10] Setup new component for text editor --- .../ChillActivityBundle/Form/ActivityType.php | 5 +- .../Resources/public/vuejs/Activity/App.vue | 5 +- .../Resources/public/vuejs/Activity/index.js | 3 + .../Resources/views/Activity/new.html.twig | 10 +-- .../vuejs/_components/CommentEditor.vue | 62 +++++++++++++++++++ .../Resources/public/vuejs/_js/i18n.ts | 5 ++ 6 files changed, 83 insertions(+), 7 deletions(-) create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue diff --git a/src/Bundle/ChillActivityBundle/Form/ActivityType.php b/src/Bundle/ChillActivityBundle/Form/ActivityType.php index 28c607acd..00570b16f 100644 --- a/src/Bundle/ChillActivityBundle/Form/ActivityType.php +++ b/src/Bundle/ChillActivityBundle/Form/ActivityType.php @@ -207,13 +207,14 @@ class ActivityType extends AbstractType ]); } - if ($activityType->isVisible('comment')) { +/* if ($activityType->isVisible('comment')) { $builder->add('comment', CommentType::class, [ +// 'disable_editor' => true, 'label' => empty($activityType->getLabel('comment')) ? 'activity.comment' : $activityType->getLabel('comment'), 'required' => $activityType->isRequired('comment'), ]); - } + }*/ if ($activityType->isVisible('privateComment')) { $builder->add('privateComment', PrivateCommentType::class, [ diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue index f17e42842..dd5b8cb9f 100644 --- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue +++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue @@ -2,20 +2,23 @@ + diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js index 2c0a903e5..a8870a549 100644 --- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js +++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js @@ -14,18 +14,21 @@ const i18n = _createI18n(activityMessages); const hasSocialIssues = document.querySelector("#social-issues-acc") !== null; const hasLocation = document.querySelector("#location") !== null; const hasPerson = document.querySelector("#add-persons") !== null; +const isSimpleEditor = true; const app = createApp({ template: ``, data() { return { hasSocialIssues, hasLocation, hasPerson, + isSimpleEditor }; }, }) diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig index 411380852..e111c4a50 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig @@ -80,9 +80,11 @@ {{ form_row(form.travelTime) }} {% endif %} -{%- if form.comment is defined -%} - {{ form_row(form.comment) }} -{% endif %} +{#{%- if form.comment is defined -%}#} +{# {{ form_row(form.comment) }}#} +{#{% endif %}#} + +
{%- if form.privateComment is defined -%} {{ form_row(form.privateComment) }} @@ -126,4 +128,4 @@ {% block css %} {{ encore_entry_link_tags('mod_pickentity_type') }} -{% endblock %} \ No newline at end of file +{% endblock %} diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue new file mode 100644 index 000000000..86b8e2b49 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue @@ -0,0 +1,62 @@ + + + + + diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts index db9a37104..8518147eb 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts @@ -54,6 +54,11 @@ const messages = { residential_address: "Adresse de résidence", located_at: "réside chez", }, + comment: { + label: "Commentaire", + editor_simple: "Simple", + editor_rich: "Riche" + } }, }; From 3aef0a185e3467d4a2d7998fb12bfe6fef050aa0 Mon Sep 17 00:00:00 2001 From: Julie Lenaerts Date: Mon, 27 Jan 2025 15:31:12 +0100 Subject: [PATCH 02/10] Implement localStorage and toggling of simple/rich text editor --- .../vuejs/_components/CommentEditor.vue | 85 ++++++++++++------- 1 file changed, 55 insertions(+), 30 deletions(-) diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue index 86b8e2b49..dc8aec5b1 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue @@ -1,27 +1,3 @@ - - + + From 04a14125622c1ae3ad628a520ee0dac68be66be1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Wed, 29 Jan 2025 22:05:50 +0100 Subject: [PATCH 03/10] upgrade ckeditor/vue --- package.json | 2 +- .../public/vuejs/AccompanyingCourse/components/Comment.vue | 4 ++-- .../AccompanyingCourse/components/Resources/WriteComment.vue | 4 ++-- .../Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue | 4 ++-- .../AccompanyingCourseWorkEdit/components/FormEvaluation.vue | 4 ++-- .../vuejs/HouseholdMembersEditor/components/MemberDetails.vue | 4 ++-- .../vuejs/HouseholdMembersEditor/components/PersonComment.vue | 4 ++-- 7 files changed, 13 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 397676b1b..823f4b46d 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "@ckeditor/ckeditor5-dev-webpack-plugin": "^31.1.13", "@ckeditor/ckeditor5-markdown-gfm": "^41.4.2", "@ckeditor/ckeditor5-theme-lark": "^41.4.2", - "@ckeditor/ckeditor5-vue": "^5.1.0", + "@ckeditor/ckeditor5-vue": "^7.3.0", "@eslint/js": "^9.14.0", "@luminateone/eslint-baseline": "^1.0.9", "@symfony/webpack-encore": "^4.1.0", diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue index d7c11d36d..b63061888 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue @@ -60,14 +60,14 @@ diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue new file mode 100644 index 000000000..2a3c9d2cd --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/i18n.js new file mode 100644 index 000000000..6c53020e5 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/i18n.js @@ -0,0 +1,14 @@ +import {personMessages} from "ChillPersonAssets/vuejs/_js/i18n"; +import {calendarUserSelectorMessages} from "ChillCalendarAssets/vuejs/_components/CalendarUserSelector/js/i18n"; +import {activityMessages} from "ChillActivityAssets/vuejs/Activity/i18n"; + +const appMessages = { + fr: { + comment:{ + label_public: "Note", + label_private: "Note privée", + } + }, +}; + +export { appMessages }; diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js new file mode 100644 index 000000000..41106ee65 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js @@ -0,0 +1,16 @@ +import { createApp } from "vue"; +import App from "./App.vue"; +import {_createI18n} from "ChillMainAssets/vuejs/_js/i18n"; +import {appMessages} from "ChillMainAssets/vuejs/CommentEditor/i18n"; + +const i18n = _createI18n(appMessages); +const commentContainer = document.getElementById('comment-widget'); + +const commentMode = commentContainer.dataset.commentMode; + +const app = createApp({ + template: ``, +}, { commentMode }) + .use(i18n) + .component("app", App) + .mount("#comment-widget"); diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue deleted file mode 100644 index 021dcef34..000000000 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue +++ /dev/null @@ -1,91 +0,0 @@ - - - - - diff --git a/src/Bundle/ChillMainBundle/chill.webpack.config.js b/src/Bundle/ChillMainBundle/chill.webpack.config.js index 88b537932..cc8761b25 100644 --- a/src/Bundle/ChillMainBundle/chill.webpack.config.js +++ b/src/Bundle/ChillMainBundle/chill.webpack.config.js @@ -120,4 +120,8 @@ module.exports = function (encore, entries) { "vue_onthefly", __dirname + "/Resources/public/vuejs/OnTheFly/index.js", ); + encore.addEntry( + "vue_comment_editor", + __dirname + "/Resources/public/vuejs/CommentEditor/index.js", + ); }; From 321d569ee906b22d31aefbb47335d14cd0f5f652 Mon Sep 17 00:00:00 2001 From: Julie Lenaerts Date: Thu, 6 Feb 2025 14:32:22 +0100 Subject: [PATCH 08/10] Remove comment editor component from Activity vue app --- .../Resources/public/vuejs/Activity/App.vue | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue index 238065d85..db2523b36 100644 --- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue +++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/App.vue @@ -2,14 +2,12 @@ - From c32c18b0e2163faa43dcb02b4aa04febc9fc89be Mon Sep 17 00:00:00 2001 From: Julie Lenaerts Date: Thu, 6 Feb 2025 15:10:49 +0100 Subject: [PATCH 09/10] Change logic to allow as many comment vue apps to be charged on same page as needed --- .../Resources/views/Activity/new.html.twig | 9 ++- .../public/chill/scss/comment-editor.scss | 14 +++++ .../public/vuejs/CommentEditor/App.vue | 41 +++++------- .../CommentEditor/component/CommentEditor.vue | 62 +++++-------------- .../public/vuejs/CommentEditor/i18n.js | 6 +- .../public/vuejs/CommentEditor/index.js | 33 +++++++--- .../translations/messages.fr.yml | 2 + 7 files changed, 84 insertions(+), 83 deletions(-) diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig index 1f38c7402..8117ec0ce 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig @@ -84,8 +84,15 @@ {# {{ form_row(form.comment) }}#} {#{% endif %}#} -
+
+ +
+
+
+ +
+
{#{%- if form.privateComment is defined -%}#} {# {{ form_row(form.privateComment) }}#} {#{% endif %}#} diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/comment-editor.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/comment-editor.scss index 05eacd1b1..e30326e48 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/chill/scss/comment-editor.scss +++ b/src/Bundle/ChillMainBundle/Resources/public/chill/scss/comment-editor.scss @@ -2,6 +2,20 @@ margin-top: 1.5rem; } +.toggle-button { + position: absolute; + bottom: -10px; + left: 10px; + padding: 2px 6px; + cursor: pointer; + z-index: 10; +} + +.editor-wrapper textarea { + resize: vertical; + min-height: 100px; +} + .editor-container { position: relative; display: flex; diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue index 63f659359..dfec5af1b 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue @@ -1,36 +1,29 @@ diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue index 2a3c9d2cd..9e6b3400f 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue @@ -16,74 +16,46 @@ class="form-control" > - {{ buttonText }} + {{ isSimple ? $t("mode.rich") : $t("mode.simple") }} diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/i18n.js index 6c53020e5..93a03a665 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/i18n.js +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/i18n.js @@ -4,9 +4,9 @@ import {activityMessages} from "ChillActivityAssets/vuejs/Activity/i18n"; const appMessages = { fr: { - comment:{ - label_public: "Note", - label_private: "Note privée", + mode: { + simple: "Editeur simple", + rich: "Editeur riche" } }, }; diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js index 41106ee65..033d3cd41 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js @@ -1,16 +1,29 @@ -import { createApp } from "vue"; +import { createApp, reactive } from "vue"; import App from "./App.vue"; import {_createI18n} from "ChillMainAssets/vuejs/_js/i18n"; -import {appMessages} from "ChillMainAssets/vuejs/CommentEditor/i18n"; +import { appMessages } from "ChillMainAssets/vuejs/CommentEditor/i18n"; const i18n = _createI18n(appMessages); -const commentContainer = document.getElementById('comment-widget'); -const commentMode = commentContainer.dataset.commentMode; +// Global reactive state to handle editorMode +const globalState = reactive({ + isSimple: localStorage.getItem('editorMode') === 'simple' +}); -const app = createApp({ - template: ``, -}, { commentMode }) - .use(i18n) - .component("app", App) - .mount("#comment-widget"); +// Watch for changes to `localStorage` and update the state +window.addEventListener('storage', () => { + globalState.isSimple = localStorage.getItem('editorMode') === 'simple'; +}); + +const commentWidgets = document.querySelectorAll('[id^="comment-widget"]'); +commentWidgets.forEach((commentContainer) => { + const app = createApp({ + template: `` + }); + + // Pass the global state to each app instance + app.use(i18n) + .provide('globalState', globalState) // Provide global state to components + .component("app", App) + .mount(commentContainer); +}); diff --git a/src/Bundle/ChillMainBundle/translations/messages.fr.yml b/src/Bundle/ChillMainBundle/translations/messages.fr.yml index 26631b3ed..428948a26 100644 --- a/src/Bundle/ChillMainBundle/translations/messages.fr.yml +++ b/src/Bundle/ChillMainBundle/translations/messages.fr.yml @@ -109,6 +109,8 @@ Any comment: Aucun commentaire # comment embeddable No comment associated: Aucun commentaire private comment: Notes privées +comment_public: Note +comment_private: Note privée #pagination Previous: Précédent From 506df432b0dafcc0dc229543fd2932757c2a349d Mon Sep 17 00:00:00 2001 From: Julie Lenaerts Date: Thu, 6 Feb 2025 16:07:40 +0100 Subject: [PATCH 10/10] WIP Allow for comment content to be submitted to backend --- .../Controller/ActivityController.php | 1 + .../ChillActivityBundle/Form/ActivityType.php | 22 +++++++------------ .../Resources/views/Activity/new.html.twig | 17 +++++++------- .../public/vuejs/CommentEditor/App.vue | 13 +++++++++-- .../CommentEditor/component/CommentEditor.vue | 9 +++++++- .../public/vuejs/CommentEditor/index.js | 6 +++-- 6 files changed, 41 insertions(+), 27 deletions(-) diff --git a/src/Bundle/ChillActivityBundle/Controller/ActivityController.php b/src/Bundle/ChillActivityBundle/Controller/ActivityController.php index f248c6559..9c9c9128d 100644 --- a/src/Bundle/ChillActivityBundle/Controller/ActivityController.php +++ b/src/Bundle/ChillActivityBundle/Controller/ActivityController.php @@ -447,6 +447,7 @@ final class ActivityController extends AbstractController } if (\array_key_exists('comment', $activityData) && $activityType->getCommentVisible() > 0) { + dump($activityData['comment']); $comment = new CommentEmbeddable(); $comment->setComment($activityData['comment']); $comment->setUserId($this->security->getUser()->getId()); diff --git a/src/Bundle/ChillActivityBundle/Form/ActivityType.php b/src/Bundle/ChillActivityBundle/Form/ActivityType.php index ae1be5ded..6eb74e4fa 100644 --- a/src/Bundle/ChillActivityBundle/Form/ActivityType.php +++ b/src/Bundle/ChillActivityBundle/Form/ActivityType.php @@ -20,9 +20,7 @@ use Chill\MainBundle\Entity\Center; use Chill\MainBundle\Entity\Location; use Chill\MainBundle\Entity\User; use Chill\MainBundle\Form\Type\ChillDateType; -use Chill\MainBundle\Form\Type\CommentType; use Chill\MainBundle\Form\Type\PickUserDynamicType; -use Chill\MainBundle\Form\Type\PrivateCommentType; use Chill\MainBundle\Form\Type\ScopePickerType; use Chill\MainBundle\Security\Authorization\AuthorizationHelper; use Chill\MainBundle\Templating\TranslatableStringHelper; @@ -207,21 +205,17 @@ class ActivityType extends AbstractType ]); } -/* if ($activityType->isVisible('comment')) { - $builder->add('comment', CommentType::class, [ -// 'disable_editor' => true, - 'label' => empty($activityType->getLabel('comment')) - ? 'activity.comment' : $activityType->getLabel('comment'), - 'required' => $activityType->isRequired('comment'), + if ($activityType->isVisible('comment')) { + $builder->add('comment', HiddenType::class, [ + 'data' => '', ]); - }*/ + } -/* if ($activityType->isVisible('privateComment')) { - $builder->add('privateComment', PrivateCommentType::class, [ - 'label' => '' === $activityType->getLabel('privateComment') ? 'private comment' : $activityType->getPrivateCommentLabel(), - 'required' => false, + if ($activityType->isVisible('privateComment')) { + $builder->add('privateComment', HiddenType::class, [ + 'data' => '', ]); - }*/ + } if ($activityType->isVisible('persons')) { $builder->add('persons', HiddenType::class); diff --git a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig index 8117ec0ce..52c3da56d 100644 --- a/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig +++ b/src/Bundle/ChillActivityBundle/Resources/views/Activity/new.html.twig @@ -80,22 +80,23 @@ {{ form_row(form.travelTime) }} {% endif %} -{#{%- if form.comment is defined -%}#} -{# {{ form_row(form.comment) }}#} -{#{% endif %}#} +{%- if form.comment is defined -%} + {{ form_row(form.comment) }} +{% endif %}
-
+
-
+
-{#{%- if form.privateComment is defined -%}#} -{# {{ form_row(form.privateComment) }}#} -{#{% endif %}#} + +{%- if form.privateComment is defined -%} + {{ form_row(form.privateComment) }} +{% endif %} {%- if form.attendee is defined -%} {{ form_row(form.attendee) }} diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue index dfec5af1b..4a42427d8 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/App.vue @@ -1,7 +1,7 @@ @@ -15,14 +15,23 @@ export default defineComponent({ components: { CommentEditor }, setup() { const globalState = inject('globalState'); + const fieldName = inject('fieldName') const toggleEditorMode = () => { globalState.isSimple = !globalState.isSimple; localStorage.setItem('editorMode', globalState.isSimple ? 'simple' : 'rich'); }; + const handleChange = (newContent) => { + const hiddenField = document.querySelector(`input[name="${fieldName}"]`); + if (hiddenField) { + hiddenField.value = newContent || ''; + } + }; + return { globalState, - toggleEditorMode + toggleEditorMode, + handleChange }; } }); diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue index 9e6b3400f..427883eb4 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/component/CommentEditor.vue @@ -7,6 +7,7 @@ :config="editorConfig" v-model="content" tag-name="textarea" + @input="emitChange" />
@@ -14,6 +15,7 @@ v-model="content" name="content" class="form-control" + @input="emitChange" >
{{ isSimple ? $t("mode.rich") : $t("mode.simple") }} @@ -45,12 +47,17 @@ export default defineComponent({ emit("toggle"); }; + const emitChange = () => { + emit("change", content.value); + }; + return { isSimple, content, classicEditor, editorConfig, - toggleSimpleEditor + toggleSimpleEditor, + emitChange }; } }); diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js index 033d3cd41..f543a27fb 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/CommentEditor/index.js @@ -21,9 +21,11 @@ commentWidgets.forEach((commentContainer) => { template: `` }); - // Pass the global state to each app instance + const fieldName = commentContainer.dataset.fieldname; + app.use(i18n) - .provide('globalState', globalState) // Provide global state to components + .provide('globalState', globalState) + .provide( 'fieldName', fieldName) .component("app", App) .mount(commentContainer); });