From 8b2af35e9730f29c43f8c08f4acdeb4b403728e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Wed, 21 May 2025 17:57:35 +0200 Subject: [PATCH 1/5] Fix typo --- .../notification_location_user_on_period_has_moved.fr.txt.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/notification_location_user_on_period_has_moved.fr.txt.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/notification_location_user_on_period_has_moved.fr.txt.twig index df932067c..85bce211f 100644 --- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/notification_location_user_on_period_has_moved.fr.txt.twig +++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingPeriod/notification_location_user_on_period_has_moved.fr.txt.twig @@ -8,7 +8,7 @@ L'usager {{ oldPersonLocation|chill_entity_render_string }} a déménagé. Son adresse était utilisée pour localiser le parcours n°{{ period.id }}, dont vous êtes le référent. -En conséquence de ce déménage, le parcours est toujours localisé à cette adresse, mais à l'aide d'une +En conséquence de ce déménagement, le parcours est toujours localisé à cette adresse, mais à l'aide d'une adresse temporaire. Si vous continuez à suivre le parcours, vous pouvez le localiser à nouveau auprès de l'adresse de From 5c9396077db5eac3fe6e2679c70aa87618a4957f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Fri, 23 May 2025 11:56:34 +0200 Subject: [PATCH 2/5] remove "faked" entity and simplify template string in Activity index.js Replaced multi-line template string with a cleaner single-line backtick template. This improves readability and maintains consistent formatting in the code. --- .../Resources/public/vuejs/Activity/index.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js index 2c0a903e5..44f0192df 100644 --- a/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js +++ b/src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/index.js @@ -41,9 +41,7 @@ const i18nGendoc = _createI18n({}); document.querySelectorAll("div[data-docgen-template-picker]").forEach((el) => { fetchTemplates(el.dataset.entityClass).then((templates) => { const picker = { - template: - '', + template: ``, components: { PickTemplate, }, @@ -54,7 +52,7 @@ document.querySelectorAll("div[data-docgen-template-picker]").forEach((el) => { }; }, methods: { - generateDoc({ event, link, template }) { + generateDoc({ link, template }) { console.log("generateDoc"); console.log("link", link); console.log("template", template); From 976f293f28bdc7d872c33e1cb4c3485c4114224f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Fri, 23 May 2025 13:33:47 +0200 Subject: [PATCH 3/5] Add Emoji and Fullscreen features to CKEditor configuration Integrated Emoji, Mention (required for Emoji), and Fullscreen plugins into the CKEditor setup. Updated the toolbar to include respective buttons, enhancing functionality and user interaction. --- .changes/unreleased/Feature-20250523-133341.yaml | 6 ++++++ .../public/module/ckeditor5/editor_config.ts | 13 +++++++++++++ 2 files changed, 19 insertions(+) create mode 100644 .changes/unreleased/Feature-20250523-133341.yaml diff --git a/.changes/unreleased/Feature-20250523-133341.yaml b/.changes/unreleased/Feature-20250523-133341.yaml new file mode 100644 index 000000000..1a5513a0d --- /dev/null +++ b/.changes/unreleased/Feature-20250523-133341.yaml @@ -0,0 +1,6 @@ +kind: Feature +body: Add Emoji and Fullscreen feature to ckeditor configuration +time: 2025-05-23T13:33:41.645095128+02:00 +custom: + Issue: "" + SchemaChange: No schema change diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts index cddb5707f..a396da295 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts +++ b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/editor_config.ts @@ -8,6 +8,9 @@ import { Heading, Link, List, + Emoji, + Mention, + Fullscreen, } from "ckeditor5"; import coreTranslations from "ckeditor5/translations/fr.js"; @@ -26,6 +29,11 @@ export default { Link, List, Paragraph, + // both Emoji and Mention are required for Emoji feature + Emoji, + Mention, + // to enable fullscreen + Fullscreen, ], toolbar: { items: [ @@ -37,8 +45,13 @@ export default { "bulletedList", "numberedList", "blockQuote", + "|", + "emoji", + "|", "undo", "redo", + "|", + "fullscreen", ], }, translations: [coreTranslations], From 19dd4667f2cb1af98f5e105facb3a503b98eab66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Fri, 23 May 2025 13:34:50 +0200 Subject: [PATCH 4/5] Integrate Vue-based editor with rich and simple mode toggle Replaced CKEditor initialization with a Vue-based editor component. Introduced a toggle to switch between rich and simple editing modes, persisting the state in local storage. Updated CKEditor dependency to version 45.1.0. --- .../unreleased/Feature-20250523-133434.yaml | 6 + package.json | 2 +- .../public/module/ckeditor5/index.ts | 34 ++++- .../CommentEditor/CommentEditor.vue | 121 ++++++++++++++++++ .../translations/messages.fr.yml | 4 + 5 files changed, 159 insertions(+), 8 deletions(-) create mode 100644 .changes/unreleased/Feature-20250523-133434.yaml create mode 100644 src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue diff --git a/.changes/unreleased/Feature-20250523-133434.yaml b/.changes/unreleased/Feature-20250523-133434.yaml new file mode 100644 index 000000000..31dced03a --- /dev/null +++ b/.changes/unreleased/Feature-20250523-133434.yaml @@ -0,0 +1,6 @@ +kind: Feature +body: Create editor which allow us to toggle between rich and simple text editor +time: 2025-05-23T13:34:34.56795603+02:00 +custom: + Issue: "321" + SchemaChange: No schema change diff --git a/package.json b/package.json index 15697def7..f8489c27d 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "bindings": "^1.5.0", "bootstrap": "5.2.3", "chokidar": "^3.5.1", - "ckeditor5": "^44.1.0", + "ckeditor5": "^45.1.0", "dompurify": "^3.1.0", "eslint": "^9.14.0", "eslint-config-prettier": "^9.1.0", diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts index 9a14cec01..163ab012f 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts +++ b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts @@ -1,12 +1,32 @@ -import config from "./editor_config"; -import { ClassicEditor } from "ckeditor5"; +import { createApp } from "vue"; +import CommentEditor from "ChillMainAssets/vuejs/_components/CommentEditor/CommentEditor.vue"; const ckeditorFields: NodeListOf = document.querySelectorAll("textarea[ckeditor]"); ckeditorFields.forEach((field: HTMLTextAreaElement): void => { - ClassicEditor.create(field, config).catch((error) => { - console.error(error.stack); - throw error; - }); + const content = field.value; +const div = document.createElement("div"); + + if (field.parentNode !== null) { + field.parentNode.insertBefore(div, field); + } else { + throw "parent is null"; + } + + createApp({ + components: { CommentEditor }, + template: ``, + data() { + return { + content, + }; + }, + methods: { + handleInput() { + field.value = this.content; + }, + }, + }).mount(div); + + field.style.display = "none"; }); -//Fields.push.apply(Fields, document.querySelectorAll('.cf-fields textarea')); diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue new file mode 100644 index 000000000..7ebd78cf1 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor/CommentEditor.vue @@ -0,0 +1,121 @@ + + + + + diff --git a/src/Bundle/ChillMainBundle/translations/messages.fr.yml b/src/Bundle/ChillMainBundle/translations/messages.fr.yml index 4313da429..c883cb91c 100644 --- a/src/Bundle/ChillMainBundle/translations/messages.fr.yml +++ b/src/Bundle/ChillMainBundle/translations/messages.fr.yml @@ -915,3 +915,7 @@ multiselect: select_group_label: Appuyer sur "Entrée" pour sélectionner ce groupe deselect_group_label: Appuyer sur "Entrée" pour désélectionner ce groupe selected_label: Sélectionné' + +editor: + switch_to_simple: Éditeur simple + switch_to_complex: Éditeur riche From bb41af4ed2914d834b01a6e849ef46d4c2a94c67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Fastr=C3=A9?= Date: Fri, 23 May 2025 13:51:44 +0200 Subject: [PATCH 5/5] replace ck-editor by new CommentEditor on every vuejs components --- .../public/module/ckeditor5/index.ts | 2 +- .../AccompanyingCourse/components/Comment.vue | 15 +++----------- .../components/Resources/WriteComment.vue | 15 +++----------- .../vuejs/AccompanyingCourseWorkEdit/App.vue | 20 ++++--------------- .../components/FormEvaluation.vue | 16 +++------------ .../components/MemberDetails.vue | 13 +++--------- .../components/PersonComment.vue | 19 +++--------------- 7 files changed, 20 insertions(+), 80 deletions(-) diff --git a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts index 163ab012f..25ab1f55e 100644 --- a/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts +++ b/src/Bundle/ChillMainBundle/Resources/public/module/ckeditor5/index.ts @@ -5,7 +5,7 @@ const ckeditorFields: NodeListOf = document.querySelectorAll("textarea[ckeditor]"); ckeditorFields.forEach((field: HTMLTextAreaElement): void => { const content = field.value; -const div = document.createElement("div"); + const div = document.createElement("div"); if (field.parentNode !== null) { field.parentNode.insertBefore(div, field); 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 f063b7b8f..ec8cf1444 100644 --- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue +++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue @@ -13,14 +13,7 @@ $t("comment.label") }} - +