From 113888204ee0eadbb0b3e1601d7b5739e6e35b63 Mon Sep 17 00:00:00 2001
From: Michael Wedl <michael@syslifters.com>
Date: Thu, 14 Dec 2023 15:12:49 +0100
Subject: [PATCH 1/3] Spell check configuration

---
 .../api_utils/serializers.py                  | 48 +++++++++++++++++--
 api/src/reportcreator_api/conf/settings.py    |  2 +
 docs/docs/setup/configuration.md              | 13 ++++-
 languagetool/Dockerfile                       |  2 +-
 4 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/api/src/reportcreator_api/api_utils/serializers.py b/api/src/reportcreator_api/api_utils/serializers.py
index dd7c02e1c..fd7255c4f 100644
--- a/api/src/reportcreator_api/api_utils/serializers.py
+++ b/api/src/reportcreator_api/api_utils/serializers.py
@@ -72,14 +72,15 @@ def validate_language(self, value):
 
     async def spellcheck(self):
         data = self.validated_data
-        return await self.languagetool_request('/v2/check', {
+        return await self.languagetool_request('/v2/check', settings.SPELLCHECK_LANGUAGETOOL_CONFIG | {
             'language': data['language'],
             'data': json.dumps(data['data'], ensure_ascii=False),
+            'level': 'picky' if settings.SPELLCHECK_MODE_PICKY else 'default',
             **({
                 'preferredVariants': ','.join(self.spellcheck_languages),
             } if data['language'] == 'auto' else {}),
         })
-        
+
 
 def validate_singe_word(val):
     if ' ' in val:
@@ -127,4 +128,45 @@ def validate_aes_key(self, value):
         except ValueError:
             raise serializers.ValidationError('Invalid base64 encoding')
 
-        
+
+# TODO: spellcheck adaptions
+# * [x] update languagetool
+# * [x] picky mode + advanced config
+# * [x] spellcheck API: use picky mode + config
+# * [ ] frontend
+#   * [ ] in community: reset spellcheckEnabled to false on navigation
+#   * [x] rework spellcheck enabled
+#      * [x] localSettings.spellcheckEnabled
+#      * [x] MarkdownFieldContent
+#      * [x] MarkdownTextFieldContent
+#      * [x] MarkdownPage
+#      * [x] MarkdownToolbar
+#   * [x] pass spellcheckEnabled as props + event update:spellcheckEnabled
+#      * [x] section
+#      * [x] finding
+#      * [x] project note
+#      * [x] personal notes
+#      * [x] template
+#      * [x] preview data
+#      * [x] layout editor
+#      * [x] report fields
+#      * [x] finding fields
+#   * [ ] rework markdownEditorMode
+#      * [ ] localSettings.markdownEditorMode
+#      * [ ] MarkdownFieldContent
+#      * [ ] MarkdownTextFieldContent
+#      * [ ] MarkdownPage
+#      * [ ] MarkdownToolbar
+#   * [ ] pass markdownEditorMode as props + event update:markdownEditorMode
+#      * [ ] section
+#      * [ ] finding
+#      * [ ] project note
+#      * [ ] personal notes
+#      * [ ] template
+#      * [ ] preview data
+#      * [ ] layout editor
+#      * [ ] report fields
+#      * [ ] finding fields
+# * [ ] docs: new languagetool env variables
+# * [x] markdown images: add "{width=100%}""
+        
\ No newline at end of file
diff --git a/api/src/reportcreator_api/conf/settings.py b/api/src/reportcreator_api/conf/settings.py
index 908b80000..7a6d11e4f 100644
--- a/api/src/reportcreator_api/conf/settings.py
+++ b/api/src/reportcreator_api/conf/settings.py
@@ -507,6 +507,8 @@ def __bool__(self):
 
 SPELLCHECK_URL = config('SPELLCHECK_URL', default=None)
 SPELLCHECK_DICTIONARY_PER_USER = config('SPELLCHECK_DICTIONARY_PER_USER', cast=bool, default=False)
+SPELLCHECK_MODE_PICKY = config('SPELLCHECK_MODE_PICKY', cast=bool, default=False)
+SPELLCHECK_LANGUAGETOOL_CONFIG = config('SPELLCHECK_LANGUAGETOOL_CONFIG', cast=json.loads, default='{"disabledRules": "TODO,TO_DO_HYPHEN"}')
 
 BACKUP_KEY = config('BACKUP_KEY', default=None)
 
diff --git a/docs/docs/setup/configuration.md b/docs/docs/setup/configuration.md
index f69523288..326251265 100644
--- a/docs/docs/setup/configuration.md
+++ b/docs/docs/setup/configuration.md
@@ -124,10 +124,21 @@ Words are added to a global spell check dictionary by default, which is availabl
 Using both global and personal dictionaries at the same time is not possible. Words of personal dictionaries are not shared between users. If one user adds an unknown word to their personal dictionary, the spell checker will still detect an error for other users, even when they are working in the same project or finding.
 
 
-``` title="Example:"
+``` title="Spell check dictionary configuration"
 SPELLCHECK_DICTIONARY_PER_USER=false
 ```
 
+The picky mode enables additional spell check rules. 
+
+It is also possible to selectively enable and disable rules or rule-categories by passing a LanguageTool configuration as JSON. 
+See https://languagetool.org/http-api/ for available options on the `/check` request.
+See https://community.languagetool.org/rule/list for available rules (note: rule IDs might differ for languages).
+
+``` title="Spell check rule configuration"
+SPELLCHECK_PICKY_MODE=true
+SPELLCHECK_LANGUAGETOOL_CONFIG='{"disabledRules": "TODO,TO_DO_HYPHEN,PASSIVE_VOICE,PASSIVE_SENTENCE_DE"}'
+```
+
 ### Languages
 Configure which languages are available in the language selection.
 By default all languages are shown.
diff --git a/languagetool/Dockerfile b/languagetool/Dockerfile
index 3a0797a19..355da767f 100644
--- a/languagetool/Dockerfile
+++ b/languagetool/Dockerfile
@@ -1,4 +1,4 @@
-FROM erikvl87/languagetool:6.1
+FROM erikvl87/languagetool:6.3
 
 # Add custom CA certificates
 ARG CA_CERTIFICATES=""

From ba78dfa6787cb64149c686e9aa2ffe91d686b041 Mon Sep 17 00:00:00 2001
From: Michael Wedl <michael@syslifters.com>
Date: Thu, 14 Dec 2023 16:04:41 +0100
Subject: [PATCH 2/3] Scopes for spellcheck and MDE mode settings

---
 .../api_utils/serializers.py                  | 38 ++++++++++---------
 .../Design/InputFieldDefinition.vue           |  4 ++
 .../components/Design/LayoutComponentForm.vue | 11 +++++-
 .../src/components/Design/PreviewDataForm.vue | 30 ++++++++-------
 frontend/src/components/DynamicInputField.vue | 15 ++++----
 .../src/components/Markdown/FieldContent.vue  | 12 +++---
 frontend/src/components/Markdown/Page.vue     | 14 +++----
 frontend/src/components/Markdown/Preview.vue  |  2 +-
 frontend/src/components/Markdown/Toolbar.vue  | 37 +++++++++---------
 frontend/src/components/Template/Editor.vue   | 37 +++++++++---------
 frontend/src/composables/apisettings.ts       |  3 +-
 frontend/src/composables/lockedit.ts          | 21 ++++++++--
 frontend/src/composables/markdown.ts          | 27 +++++++++++--
 .../designs/[projectTypeId]/pdfdesigner.vue   |  2 +-
 .../src/pages/notes/personal/[noteId].vue     | 13 +++++--
 .../notes/[noteId]/history/[historyDate].vue  |  2 +
 .../[projectId]/notes/[noteId]/index.vue      |  3 ++
 .../pages/templates/[templateId]/index.vue    |  2 +-
 frontend/src/stores/settings.ts               | 29 +++++---------
 19 files changed, 180 insertions(+), 122 deletions(-)

diff --git a/api/src/reportcreator_api/api_utils/serializers.py b/api/src/reportcreator_api/api_utils/serializers.py
index fd7255c4f..a01a7d23e 100644
--- a/api/src/reportcreator_api/api_utils/serializers.py
+++ b/api/src/reportcreator_api/api_utils/serializers.py
@@ -151,22 +151,26 @@ def validate_aes_key(self, value):
 #      * [x] layout editor
 #      * [x] report fields
 #      * [x] finding fields
-#   * [ ] rework markdownEditorMode
-#      * [ ] localSettings.markdownEditorMode
-#      * [ ] MarkdownFieldContent
-#      * [ ] MarkdownTextFieldContent
-#      * [ ] MarkdownPage
-#      * [ ] MarkdownToolbar
-#   * [ ] pass markdownEditorMode as props + event update:markdownEditorMode
-#      * [ ] section
-#      * [ ] finding
-#      * [ ] project note
-#      * [ ] personal notes
-#      * [ ] template
-#      * [ ] preview data
-#      * [ ] layout editor
-#      * [ ] report fields
-#      * [ ] finding fields
-# * [ ] docs: new languagetool env variables
+#   * [x] rework markdownEditorMode
+#      * [x] localSettings.markdownEditorMode
+#      * [x] MarkdownFieldContent
+#      * [x] MarkdownPage
+#      * [x] MarkdownToolbar
+#   * [x] pass markdownEditorMode as props + event update:markdownEditorMode
+#      * [x] section
+#      * [x] finding
+#      * [x] project note
+#      * [x] personal notes
+#      * [x] template
+#      * [x] preview data
+#      * [x] layout editor
+#      * [x] report fields
+#      * [x] finding fields
+#      * [x] template history
+#      * [x] section history 
+#      * [x] finding history
+#      * [x] project note history
+
+# * [x] docs: new languagetool env variables
 # * [x] markdown images: add "{width=100%}""
         
\ No newline at end of file
diff --git a/frontend/src/components/Design/InputFieldDefinition.vue b/frontend/src/components/Design/InputFieldDefinition.vue
index 42c9322e8..8e06b2b19 100644
--- a/frontend/src/components/Design/InputFieldDefinition.vue
+++ b/frontend/src/components/Design/InputFieldDefinition.vue
@@ -221,6 +221,8 @@
         @update:model-value="updateProperty('default', $event)"
         :definition="{...props.modelValue, label: 'Default Value', required: false, pattern: null} as FieldDefinition"
         :lang="props.lang"
+        v-model:spellcheck-enabled="localSettings.designSpellcheckEnabled"
+        v-model:markdown-editor-mode="localSettings.designMarkdownEditorMode"
         :disabled="props.disabled"
         :disable-validation="true"
       />
@@ -289,6 +291,8 @@ const emit = defineEmits<{
   'update:modelValue': [FieldDefinitionWithId];
 }>();
 
+const localSettings = useLocalSettings();
+
 const rules = {
   id: [
     (id: string) => (
diff --git a/frontend/src/components/Design/LayoutComponentForm.vue b/frontend/src/components/Design/LayoutComponentForm.vue
index fd209cc20..fc35c4295 100644
--- a/frontend/src/components/Design/LayoutComponentForm.vue
+++ b/frontend/src/components/Design/LayoutComponentForm.vue
@@ -179,6 +179,7 @@
 
 <script setup lang="ts">
 import pick from "lodash/pick";
+import { MarkdownEditorMode } from "~/utils/types";
 import type { MarkdownProps } from "~/composables/markdown";
 
 const props = defineProps<{
@@ -189,7 +190,15 @@ const emit = defineEmits<{
   'update:modelValue': [any];
 }>();
 
-const markdownProps = computed(() => pick(props, ['disabled', 'lang', 'uploadFile', 'rewriteFileUrl', 'rewriteReferenceLink']));
+const localSettings = useLocalSettings();
+
+const markdownProps = computed(() => ({
+  ...pick(props, ['disabled', 'lang', 'uploadFile', 'rewriteFileUrl', 'rewriteReferenceLink']),
+  spellcheckEnabled: localSettings.designSpellcheckEnabled,
+  'onUpdate:spellcheckEnabled': (value: boolean) => { localSettings.designSpellcheckEnabled = value },
+  markdownEditorMode: localSettings.designMarkdownEditorMode,
+  'onUpdate:markdownEditorMode': (value: MarkdownEditorMode) => { localSettings.designMarkdownEditorMode = value },
+}));
 
 const form = ref();
 watch(() => props.modelValue, () => {
diff --git a/frontend/src/components/Design/PreviewDataForm.vue b/frontend/src/components/Design/PreviewDataForm.vue
index a2705b9ca..f5baf425f 100644
--- a/frontend/src/components/Design/PreviewDataForm.vue
+++ b/frontend/src/components/Design/PreviewDataForm.vue
@@ -68,12 +68,7 @@
             @update:model-value="updateSectionField(fieldId, $event)"
             :id="fieldId"
             :definition="props.projectType.report_fields[fieldId]"
-            :show-field-ids="true"
-            :upload-file="uploadFile"
-            :rewrite-file-url="rewriteFileUrl"
-            :selectable-users="[auth.user.value as UserShortInfo]"
-            :lang="props.projectType.language"
-            :disabled="props.disabled"
+            v-bind="fieldAttrs"
           />
         </div>
       </template>
@@ -84,12 +79,7 @@
             @update:model-value="updateFindingField(fieldId, $event)"
             :id="fieldId"
             :definition="props.projectType.finding_fields[fieldId]"
-            :show-field-ids="true"
-            :upload-file="uploadFile"
-            :rewrite-file-url="rewriteFileUrl"
-            :selectable-users="[auth.user.value as UserShortInfo]"
-            :lang="props.projectType.language"
-            :disabled="props.disabled"
+            v-bind="fieldAttrs"
           />
         </div>
       </template>
@@ -100,7 +90,7 @@
 <script setup lang="ts">
 import Draggable from "vuedraggable";
 import { v4 as uuidv4 } from "uuid";
-import { FieldDataType } from "~/utils/types";
+import { FieldDataType, MarkdownEditorMode } from "~/utils/types";
 import { scoreFromVector, levelNumberFromLevelName, levelNumberFromScore } from "~/utils/cvss";
 
 const props = defineProps<{
@@ -114,6 +104,7 @@ const emit = defineEmits<{
   'update:modelValue': [any];
 }>();
 
+const localSettings = useLocalSettings();
 const auth = useAuth();
 
 const menuSize = ref(20);
@@ -214,6 +205,19 @@ function riskLevel(finding: any) {
     return 'unknown';
   }
 }
+
+const fieldAttrs = computed(() => ({
+  showFieldIds: true,
+  uploadFile: props.uploadFile,
+  rewriteFileUrl: props.rewriteFileUrl,
+  selectableUsers: [auth.user.value],
+  lang: props.projectType.language,
+  disabled: props.disabled,
+  spellcheckEnabled: localSettings.designSpellcheckEnabled,
+  'onUpdate:spellcheckEnabled': (val: boolean) => { localSettings.designSpellcheckEnabled = val },
+  markdownEditorMode: localSettings.designMarkdownEditorMode,
+  'onUpdate:markdownEditorMode': (val: MarkdownEditorMode) => { localSettings.designMarkdownEditorMode = val },
+}));
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/components/DynamicInputField.vue b/frontend/src/components/DynamicInputField.vue
index 30e906b9f..e4781774d 100644
--- a/frontend/src/components/DynamicInputField.vue
+++ b/frontend/src/components/DynamicInputField.vue
@@ -230,6 +230,8 @@
 
 <script setup lang="ts">
 import Draggable from 'vuedraggable';
+import pick from 'lodash/pick';
+import { MarkdownEditorMode } from '~/utils/types';
 import type { MarkdownProps } from "~/composables/markdown";
 import regexWorkerUrl from '~/workers/regexWorker?worker&url';
 
@@ -244,7 +246,9 @@ const props = defineProps<MarkdownProps & {
   disableValidation?: boolean;
 }>();
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: any): void;
+  'update:modelValue': [value: any];
+  'update:spellcheckEnabled': [value: boolean];
+  'update:markdownEditorMode': [value: MarkdownEditorMode];
 }>();
 
 function getInitialValue(fieldDef: FieldDefinition, useDefault = true): any {
@@ -373,12 +377,9 @@ const attrs = useAttrs();
 const fieldAttrs = computed(() => ({
   ...attrs,
   label: label.value,
-  disabled: props.disabled,
-  autofocus: props.autofocus,
-  lang: props.lang,
-  uploadFile: props.uploadFile,
-  rewriteFileUrl: props.rewriteFileUrl,
-  rewriteReferenceLink: props.rewriteReferenceLink,
+  ...pick(props, ['disabled', 'autofocus', 'lang', 'spellcheckEnabled', 'markdownEditorMode', 'uploadFile', 'rewriteFileUrl', 'rewriteReferenceLink']),
+  'onUpdate:spellcheckEnabled': (v: boolean) => emit('update:spellcheckEnabled', v),
+  'onUpdate:markdownEditorMode': (v: MarkdownEditorMode) => emit('update:markdownEditorMode', v),
 }))
 </script>
 
diff --git a/frontend/src/components/Markdown/FieldContent.vue b/frontend/src/components/Markdown/FieldContent.vue
index 18bcba1f3..9189d06f5 100644
--- a/frontend/src/components/Markdown/FieldContent.vue
+++ b/frontend/src/components/Markdown/FieldContent.vue
@@ -4,17 +4,17 @@
     <v-divider />
 
     <v-row no-gutters class="w-100">
-      <v-col :cols="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW ? 6 : undefined" v-show="localSettings.markdownEditorMode !== MarkdownEditorMode.PREVIEW">
+      <v-col :cols="props.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW ? 6 : undefined" v-show="props.markdownEditorMode !== MarkdownEditorMode.PREVIEW">
         <div
           ref="editorRef"
           class="mde-editor"
-          :class="{'mde-editor-side': localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW}"
+          :class="{'mde-editor-side': props.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW}"
         />
       </v-col>
-      <v-col v-if="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW">
+      <v-col v-if="props.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW">
         <v-divider vertical class="h-100" />
       </v-col>
-      <v-col :cols="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW ? 6 : undefined" v-if="localSettings.markdownEditorMode !== MarkdownEditorMode.MARKDOWN">
+      <v-col :cols="props.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW ? 6 : undefined" v-if="props.markdownEditorMode !== MarkdownEditorMode.MARKDOWN">
         <markdown-preview v-bind="markdownPreviewAttrs" class="preview" />
       </v-col>
     </v-row>
@@ -25,8 +25,6 @@
 </template>
 
 <script setup lang="ts">
-const localSettings = useLocalSettings();
-
 const props = defineProps(makeMarkdownProps({
   files: true,
   spellcheckSupportedDefault: true,
@@ -34,7 +32,7 @@ const props = defineProps(makeMarkdownProps({
 const emit = defineEmits(makeMarkdownEmits());
 
 const { editorView, markdownToolbarAttrs, markdownStatusbarAttrs, markdownPreviewAttrs, focus, blur } = useMarkdownEditor({
-  props: computed(() => ({ ...props, spellcheckSupported: true })),
+  props: computed(() => ({ ...props, spellcheckSupported: true } as any)),
   emit,
   extensions: markdownEditorDefaultExtensions(),
 });
diff --git a/frontend/src/components/Markdown/Page.vue b/frontend/src/components/Markdown/Page.vue
index 72cadf1ed..576c4b378 100644
--- a/frontend/src/components/Markdown/Page.vue
+++ b/frontend/src/components/Markdown/Page.vue
@@ -7,17 +7,17 @@
 
     <template #default>
       <v-row no-gutters class="w-100 h-100">
-        <v-col :cols="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW ? 6 : undefined" v-show="localSettings.markdownEditorMode !== MarkdownEditorMode.PREVIEW" class="h-100">
+        <v-col :cols="props.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW ? 6 : undefined" v-show="props.markdownEditorMode !== MarkdownEditorMode.PREVIEW" class="h-100">
           <div
             ref="editorRef"
             class="mde-editor h-100 overflow-y-auto"
-            :class="{'mde-editor-side': localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW}"
+            :class="{'mde-editor-side': props.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW}"
           />
         </v-col>
-        <v-col v-if="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW" class="h-100">
+        <v-col v-if="props.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW" class="h-100">
           <v-divider vertical class="h-100" />
         </v-col>
-        <v-col :cols="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW ? 6 : undefined" v-if="localSettings.markdownEditorMode !== MarkdownEditorMode.MARKDOWN" class="h-100">
+        <v-col :cols="props.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW ? 6 : undefined" v-if="props.markdownEditorMode !== MarkdownEditorMode.MARKDOWN" class="h-100">
           <markdown-preview v-bind="markdownPreviewAttrs" class="preview h-100 overflow-y-scroll" />
         </v-col>
       </v-row>
@@ -26,10 +26,6 @@
 </template>
 
 <script setup lang="ts">
-import { markdownEditorPageExtensions } from "~/composables/markdown";
-
-const localSettings = useLocalSettings();
-
 const props = defineProps(makeMarkdownProps({
   files: true,
   spellcheckSupportedDefault: true,
@@ -37,7 +33,7 @@ const props = defineProps(makeMarkdownProps({
 const emit = defineEmits(makeMarkdownEmits());
 
 const { editorView, markdownToolbarAttrs, markdownPreviewAttrs, focus, blur } = useMarkdownEditor({
-  props: computed(() => ({ ...props, spellcheckSupported: true })),
+  props: computed(() => ({ ...props, spellcheckSupported: true } as any)),
   emit,
   extensions: markdownEditorPageExtensions(),
 });
diff --git a/frontend/src/components/Markdown/Preview.vue b/frontend/src/components/Markdown/Preview.vue
index 45855d0a3..4c009129a 100644
--- a/frontend/src/components/Markdown/Preview.vue
+++ b/frontend/src/components/Markdown/Preview.vue
@@ -36,7 +36,7 @@ function rewriteFileSource(imgSrc: string) {
     return imgSrc;
   }
 
-  return absoluteApiUrl(props.rewriteFileUrl(`${imgSrc}?c=${cacheBuster}`));
+  return absoluteApiUrl(props.rewriteFileUrl(`${imgSrc}?c=${cacheBuster.value}`));
 }
 const updatePreviewThrottled = throttle(() => {
   // Render markdown to HTML
diff --git a/frontend/src/components/Markdown/Toolbar.vue b/frontend/src/components/Markdown/Toolbar.vue
index b5e66fab8..327477b86 100644
--- a/frontend/src/components/Markdown/Toolbar.vue
+++ b/frontend/src/components/Markdown/Toolbar.vue
@@ -17,7 +17,7 @@
     <span class="separator" />
     <markdown-toolbar-button
       v-if="apiSettings.isProfessionalLicense"
-      @click="spellcheckEnabled = !spellcheckEnabled"
+      @click="toggleSpellcheck"
       title="Spellcheck"
       icon="mdi-spellcheck"
       :disabled="props.disabled || !spellcheckSupported"
@@ -25,8 +25,8 @@
     />
     <markdown-toolbar-button
       v-else
-      @click="toggleBrowserSpellcheckCommunity"
-      :title="'Spellcheck (browser-based)'"
+      @click="toggleSpellcheck"
+      :title="'Spellcheck'"
       icon="mdi-spellcheck"
       :dot="!spellcheckSupported ? undefined : (spellcheckEnabled ? 'warning' : 'error')"
       :disabled="props.disabled || !spellcheckSupported"
@@ -37,9 +37,9 @@
     <markdown-toolbar-button @click="codemirrorAction(redo)" title="Redo" icon="mdi-redo" :disabled="props.disabled || !canRedo" />
     <span class="separator" />
     <v-spacer />
-    <markdown-toolbar-button v-if="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN" @click="setMarkdownEditorMode(MarkdownEditorMode.MARKDOWN_AND_PREVIEW)" title="Markdown" icon="mdi-language-markdown" :active="true" />
-    <markdown-toolbar-button v-else-if="localSettings.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW" @click="setMarkdownEditorMode(MarkdownEditorMode.PREVIEW)" title="Side-by-Side View" icon="mdi-view-split-vertical" :active="true" />
-    <markdown-toolbar-button v-else-if="localSettings.markdownEditorMode === MarkdownEditorMode.PREVIEW" @click="setMarkdownEditorMode(MarkdownEditorMode.MARKDOWN)" title="Preview" icon="mdi-image-filter-hdr" :active="true" />
+    <markdown-toolbar-button v-if="props.markdownEditorMode === MarkdownEditorMode.MARKDOWN" @click="setMarkdownEditorMode(MarkdownEditorMode.MARKDOWN_AND_PREVIEW)" title="Markdown" icon="mdi-language-markdown" :active="true" />
+    <markdown-toolbar-button v-else-if="props.markdownEditorMode === MarkdownEditorMode.MARKDOWN_AND_PREVIEW" @click="setMarkdownEditorMode(MarkdownEditorMode.PREVIEW)" title="Side-by-Side View" icon="mdi-view-split-vertical" :active="true" />
+    <markdown-toolbar-button v-else-if="props.markdownEditorMode === MarkdownEditorMode.PREVIEW" @click="setMarkdownEditorMode(MarkdownEditorMode.MARKDOWN)" title="Preview" icon="mdi-image-filter-hdr" :active="true" />
   </v-toolbar>
 </template>
 
@@ -69,30 +69,33 @@ import { MarkdownEditorMode } from '@/utils/types';
 const props = defineProps<{
   editorView: EditorView;
   editorState: EditorState;
+  spellcheckEnabled?: boolean;
+  markdownEditorMode?: MarkdownEditorMode;
   disabled?: boolean;
   lang?: string;
   uploadFiles?: (files: FileList) => Promise<void>;
   fileUploadInProgress?: boolean;
 }>();
+const emit = defineEmits<{
+  'update:spellcheckEnabled': [value: boolean];
+  'update:markdownEditorMode': [value: MarkdownEditorMode];
+}>();
 
-const localSettings = useLocalSettings();
 const apiSettings = useApiSettings();
 
 const spellcheckSupported = computed(() => {
   if (apiSettings.isProfessionalLicense) {
-    return apiSettings.spellcheckLanguageToolSupported;
+    return apiSettings.spellcheckLanguageToolSupportedForLanguage(props.lang);
   } else {
+    // Browser-based spellcheck
     return Boolean(props.lang);
   }
 });
-const spellcheckEnabled = computed({
-  get: () => localSettings.spellcheckEnabled && spellcheckSupported.value,
-  set: (val) => { localSettings.spellcheckEnabled = val },
-});
-function toggleBrowserSpellcheckCommunity() {
-  spellcheckEnabled.value = !spellcheckEnabled.value;
-  if (spellcheckEnabled.value) {
-    warningToast('Enabled browser-based spellcheck. Upgrade to Professional for built-in spellchecking.');
+function toggleSpellcheck() {
+  const newVal = !props.spellcheckEnabled;
+  emit('update:spellcheckEnabled', newVal);
+  if (newVal && !apiSettings.isProfessionalLicense) {
+    warningToast('Basic spellcheck enabled. Upgrade to Professional for advanced options.');
   }
 }
 
@@ -135,7 +138,7 @@ async function setMarkdownEditorMode(mode: MarkdownEditorMode) {
   const { y: prevTop } = toolbarRef.value!.$el.getBoundingClientRect();
 
   // Update editor mode => changes view and potentially causes layout jump
-  localSettings.markdownEditorMode = mode;
+  emit('update:markdownEditorMode', mode);
   await nextTick();
 
   // Restore position, such the toolbar is at the same position
diff --git a/frontend/src/components/Template/Editor.vue b/frontend/src/components/Template/Editor.vue
index 3208c254f..0ec635152 100644
--- a/frontend/src/components/Template/Editor.vue
+++ b/frontend/src/components/Template/Editor.vue
@@ -52,15 +52,8 @@
     <v-window v-model="currentTab">
       <v-window-item v-for="(translation, idx) in template.translations" :key="idx">
         <dynamic-input-field
-          :model-value="translation.data.title"
-          @update:model-value="(v: string) => updateTranslationData(translation, fieldDefinitionTitle.id, v)"
-          :id="fieldDefinitionTitle.id"
-          :definition="fieldDefinitionTitle"
-          :selectable-users="[]"
-          :lang="translation.language"
-          :upload-file="uploadFile"
-          :rewrite-file-url="rewriteFileUrl"
           :disabled="props.readonly"
+          v-bind="fieldAttrs(translation, fieldDefinitionTitle)"
         />
 
         <s-status-selection
@@ -88,16 +81,9 @@
 
         <div v-for="d in visibleFieldDefinitionsExceptTitle" :key="d.id" class="d-flex flex-row">
           <dynamic-input-field
-            :model-value="(d.id in translation.data) ? translation.data[d.id] : mainTranslation.data[d.id]"
-            @update:model-value="(v: any) => updateTranslationData(translation, d.id, v)"
-            :id="d.id"
-            :definition="d"
-            :selectable-users="[]"
-            :lang="translation.language"
-            :upload-file="uploadFile"
-            :rewrite-file-url="rewriteFileUrl"
             :disabled="props.readonly || (!translation.is_main && !(d.id in translation.data))"
             class="flex-grow-width"
+            v-bind="fieldAttrs(translation, d)"
           />
           <div v-if="!translation.is_main" class="mt-4 ml-1">
             <s-btn-secondary
@@ -136,6 +122,7 @@
 <script setup lang="ts">
 import cloneDeep from "lodash/cloneDeep";
 import { v4 as uuidv4 } from "uuid";
+import { MarkdownEditorMode } from "~/utils/types";
 
 const props = withDefaults(defineProps<{
   modelValue: FindingTemplate;
@@ -157,8 +144,9 @@ const emit = defineEmits<{
   (e: 'update:modelValue', value: FindingTemplate): void;
 }>();
 
-const templateStore = useTemplateStore();
+const localSettings = useLocalSettings();
 const apiSettings = useApiSettings();
+const templateStore = useTemplateStore();
 useLazyAsyncData(async () => await templateStore.getFieldDefinition());
 
 const template = computed(() => props.modelValue);
@@ -246,6 +234,21 @@ function deleteTranslation(translationId: string) {
   updateTemplateField('translations', template.value.translations.filter(tr => tr.id !== translationId))
 }
 
+const fieldAttrs = computed(() => (translation: FindingTemplateTranslation, definition: FieldDefinitionWithId) => ({
+  modelValue: (definition.id in translation.data) ? translation.data[definition.id] : mainTranslation.value.data[definition.id],
+  'onUpdate:modelValue': (v: any) => updateTranslationData(translation, definition.id, v),
+  id: definition.id,
+  definition,
+  lang: translation.language,
+  selectableUsers: [],
+  spellcheckEnabled: localSettings.templateSpellcheckEnabled,
+  'onUpdate:spellcheckEnabled': (value: boolean) => { localSettings.templateSpellcheckEnabled = value },
+  markdownEditorMode: localSettings.templateMarkdownEditorMode,
+  'onUpdate:markdownEditorMode': (value: MarkdownEditorMode) => { localSettings.templateMarkdownEditorMode = value },
+  uploadFile: props.uploadFile,
+  rewriteFileUrl: props.rewriteFileUrl,
+}))
+
 defineExpose({
   toolbarRef,
 });
diff --git a/frontend/src/composables/apisettings.ts b/frontend/src/composables/apisettings.ts
index 7e11beee2..3d23dcff2 100644
--- a/frontend/src/composables/apisettings.ts
+++ b/frontend/src/composables/apisettings.ts
@@ -53,7 +53,8 @@ export const useApiSettings = defineStore('apisettings', {
       return this.settings?.features?.spellcheck || false;
     },
     spellcheckLanguageToolSupportedForLanguage() {
-      return (lang: string|null) => this.spellcheckLanguageToolSupported && this.settings!.languages.find(l => l.code === lang)?.spellcheck;
+      return (lang?: string|null) => this.spellcheckLanguageToolSupported && 
+        (!!this.settings!.languages.find(l => l.code === lang)?.spellcheck || lang === 'auto');
     },
   }
 })
diff --git a/frontend/src/composables/lockedit.ts b/frontend/src/composables/lockedit.ts
index edfa38601..f3a844f12 100644
--- a/frontend/src/composables/lockedit.ts
+++ b/frontend/src/composables/lockedit.ts
@@ -6,7 +6,8 @@ import { formatISO9075 } from "date-fns";
 import {
   EditMode,
   ProjectTypeScope,
-  UploadedFileType
+  UploadedFileType,
+  MarkdownEditorMode,
 } from "~/utils/types";
 import type {
   PentestProject,
@@ -174,7 +175,6 @@ export function useProjectTypeLockEdit(options: {
   performDelete?: (data: ProjectType) => Promise<void>;
 }) {
   const auth = useAuth();
-  const apiSettings = useApiSettings();
   const projectType = computed(() => options.projectType.value);
 
   const baseUrl = computed(() => `/api/v1/projecttypes/${projectType.value.id}/`);
@@ -242,12 +242,15 @@ export function useProjectLockEdit<T>(options: {
   fetchProjectType: boolean;
   historyDate?: string;
   canUploadFiles?: boolean;
+  spellcheckEnabled?: Ref<boolean>;
+  markdownEditorMode?: Ref<MarkdownEditorMode>;
   performSave?: (project: PentestProject, data: T) => Promise<any>;
   performDelete?: (project: PentestProject, data: T) => Promise<any>;
   updateInStore?: (project: PentestProject, data: T) => any;
   autoSaveOnUpdateData? (options: { oldValue: T, newValue: T }): boolean;
 }) {
   const route = useRoute();
+  const localSettings = useLocalSettings();
   const projectStore = useProjectStore();
   const projectTypeStore = useProjectTypeStore();
 
@@ -306,7 +309,7 @@ export function useProjectLockEdit<T>(options: {
     const uploadUrl = urlJoin(projectUrl.value, options.canUploadFiles ? '/upload/' : '/images/');
     const res = await uploadFileHelper<UploadedFileInfo>(uploadUrl, file);
     if (res.resource_type === UploadedFileType.IMAGE) {
-      return `![](/images/name/${res.name})`;
+      return `![](/images/name/${res.name}){width="100%"}`;
     } else {
       return `[](/files/name/${res.name})`;
     }
@@ -329,9 +332,21 @@ export function useProjectLockEdit<T>(options: {
     return null;
   }
 
+  const spellcheckEnabled = options.spellcheckEnabled || computed({ 
+    get: () => localSettings.reportingSpellcheckEnabled && !options.historyDate,
+    set: (val: boolean) => { localSettings.reportingSpellcheckEnabled = val; }, 
+  });
+  const markdownEditorMode = options.markdownEditorMode || computed({
+    get: () => localSettings.reportingMarkdownEditorMode,
+    set: (val: MarkdownEditorMode) => { localSettings.reportingMarkdownEditorMode = val; },
+  })
   const inputFieldAttrs = computed(() => ({
     lang: project.value?.language || 'en-US',
     selectableUsers: [...(project.value?.members || []), ...(project.value?.imported_members || [])],
+    spellcheckEnabled: spellcheckEnabled.value,
+    'onUpdate:spellcheckEnabled': (val: boolean) => { spellcheckEnabled.value = val; },
+    markdownEditorMode: markdownEditorMode.value,
+    'onUpdate:markdownEditorMode': (val: MarkdownEditorMode) => { markdownEditorMode.value = val; },
     uploadFile,
     rewriteFileUrl,
     rewriteReferenceLink,
diff --git a/frontend/src/composables/markdown.ts b/frontend/src/composables/markdown.ts
index 28aaf9a55..dd57aff0d 100644
--- a/frontend/src/composables/markdown.ts
+++ b/frontend/src/composables/markdown.ts
@@ -10,9 +10,12 @@ import {
   syntaxHighlighting, markdownHighlightStyle, markdownHighlightCodeBlocks
   // @ts-ignore
 } from "reportcreator-markdown/editor";
+import { MarkdownEditorMode } from '@/utils/types';
 
 export type MarkdownProps = {
   lang?: string|null;
+  spellcheckEnabled?: boolean;
+  markdownEditorMode?: MarkdownEditorMode;
   uploadFile?: (file: File) => Promise<string>;
   rewriteFileUrl?: (fileSrc: string) => string;
   rewriteReferenceLink?: (src: string) => {href: string, title: string}|null;
@@ -36,6 +39,14 @@ export function makeMarkdownProps(options: { files: boolean, spellcheckSupported
       type: Boolean,
       default: options.spellcheckSupportedDefault,
     },
+    spellcheckEnabled: {
+      type: Boolean,
+      default: undefined,
+    },
+    markdownEditorMode: {
+      type: String as PropType<MarkdownEditorMode>,
+      default: MarkdownEditorMode.MARKDOWN_AND_PREVIEW,
+    },
     ...(options.files ? {
       uploadFile: {
         type: Function as PropType<MarkdownProps['uploadFile']>,
@@ -53,7 +64,7 @@ export function makeMarkdownProps(options: { files: boolean, spellcheckSupported
   }
 }
 export function makeMarkdownEmits() {
-  return ['update:modelValue', 'focus', 'blur'];
+  return ['update:modelValue', 'update:spellcheckEnabled', 'update:markdownEditorMode', 'focus', 'blur'];
 }
 
 export function useMarkdownEditor({ props, emit, extensions }: {
@@ -63,24 +74,28 @@ export function useMarkdownEditor({ props, emit, extensions }: {
         disabled?: boolean;
         lang?: string|null;
         spellcheckSupported?: boolean;
+        spellcheckEnabled?: boolean;
+        markdownEditorMode?: MarkdownEditorMode;
         uploadFile?: (file: File) => Promise<string>;
         rewriteFileUrl?: (fileSrc: string) => string;
         rewriteReferenceLink?: (src: string) => string|null;
     }>;
     emit: any;
 }) {
-  const localSettings = useLocalSettings();
+  const apiSettings = useApiSettings();
   const theme = useTheme();
 
   const valueNotNull = computed(() => props.value.modelValue || '');
   const spellcheckLanguageToolEnabled = computed(() =>
     !props.value.disabled &&
     !!props.value.spellcheckSupported &&
-    localSettings.spellcheckLanguageToolEnabled(props.value.lang || null))
+    !!props.value.spellcheckEnabled &&
+    apiSettings.spellcheckLanguageToolSupportedForLanguage(props.value.lang));
   const spellcheckBrowserEnabled = computed(() =>
     !props.value.disabled &&
     !!props.value.spellcheckSupported &&
-    localSettings.spellcheckBrowserEnabled(props.value.lang || null))
+    !!props.value.spellcheckEnabled &&
+    !apiSettings.isProfessionalLicense);
   const previewCacheBuster = uuid4();
 
   async function performSpellcheckRequest(data: any): Promise<any> {
@@ -262,6 +277,10 @@ export function useMarkdownEditor({ props, emit, extensions }: {
     uploadFiles: props.value.uploadFile ? uploadFiles : undefined,
     fileUploadInProgress: fileUploadInProgress.value,
     lang: props.value.lang,
+    spellcheckEnabled: props.value.spellcheckEnabled,
+    'onUpdate:spellcheckEnabled': (val: boolean) => emit('update:spellcheckEnabled', val),
+    markdownEditorMode: props.value.markdownEditorMode,
+    'onUpdate:markdownEditorMode': (val: MarkdownEditorMode) => emit('update:markdownEditorMode', val),
   }));
   const markdownStatusbarAttrs = computed(() => ({
     editorState: editorState.value,
diff --git a/frontend/src/pages/designs/[projectTypeId]/pdfdesigner.vue b/frontend/src/pages/designs/[projectTypeId]/pdfdesigner.vue
index 1dcd458b2..153d29472 100644
--- a/frontend/src/pages/designs/[projectTypeId]/pdfdesigner.vue
+++ b/frontend/src/pages/designs/[projectTypeId]/pdfdesigner.vue
@@ -151,7 +151,7 @@ watch(projectType, () => loadPdf(false), { deep: true })
 
 async function uploadFile(file: File) {
   const img = await uploadFileHelper<UploadedFileInfo>(`/api/v1/projecttypes/${projectType.value.id}/assets/`, file);
-  return `![](/assets/name/${img.name})`;
+  return `![](/assets/name/${img.name}){width="100%"}`;
 }
 function rewriteFileUrl(imgSrc: string) {
   return urlJoin(`/api/v1/projecttypes/${projectType.value.id}/`, imgSrc);
diff --git a/frontend/src/pages/notes/personal/[noteId].vue b/frontend/src/pages/notes/personal/[noteId].vue
index 671eed9fe..4185c8eff 100644
--- a/frontend/src/pages/notes/personal/[noteId].vue
+++ b/frontend/src/pages/notes/personal/[noteId].vue
@@ -24,8 +24,6 @@
               <markdown-text-field-content
                 ref="titleRef"
                 v-model="note.title"
-                :disabled="readonly"
-                :spellcheck-supported="true"
                 v-bind="inputFieldAttrs"
                 class="note-title"
               />
@@ -45,7 +43,6 @@
         <markdown-page
           ref="textRef"
           v-model="note.text"
-          :disabled="readonly"
           v-bind="inputFieldAttrs"
         />
       </template>
@@ -55,9 +52,11 @@
 
 <script setup lang="ts">
 import urlJoin from "url-join";
+import { MarkdownEditorMode } from "~/utils/types";
 import { uploadFileHelper } from "~/utils/upload";
 
 const route = useRoute();
+const localSettings = useLocalSettings();
 const userNotesStore = useUserNotesStore();
 
 const baseUrl = computed(() => `/api/v1/pentestusers/self/notes/${route.params.noteId}/`);
@@ -92,14 +91,20 @@ async function uploadFile(file: File) {
   if (obj.resource_type === 'file') {
     return `[${obj.name}](/files/name/${obj.name})`;
   } else {
-    return `![](/images/name/${obj.name})`;
+    return `![](/images/name/${obj.name}){width="100%"}`;
   }
 }
 function rewriteFileUrl(imgSrc: string) {
   return urlJoin('/api/v1/pentestusers/self/notes/', imgSrc);
 }
 const inputFieldAttrs = computed(() => ({
+  disabled: readonly.value,
   lang: 'auto',
+  spellcheckSupported: true,
+  spellcheckEnabled: localSettings.userNoteSpellcheckEnabled,
+  'onUpdate:spellcheckEnabled': (val: boolean) => { localSettings.userNoteSpellcheckEnabled = val }, 
+  markdownEditorMode: localSettings.userNoteMarkdownEditorMode,
+  'onUpdate:markdownEditorMode': (val: MarkdownEditorMode) => { localSettings.userNoteMarkdownEditorMode = val },
   uploadFile,
   rewriteFileUrl,
 }));
diff --git a/frontend/src/pages/projects/[projectId]/notes/[noteId]/history/[historyDate].vue b/frontend/src/pages/projects/[projectId]/notes/[noteId]/history/[historyDate].vue
index 9cf39980f..a397502bc 100644
--- a/frontend/src/pages/projects/[projectId]/notes/[noteId]/history/[historyDate].vue
+++ b/frontend/src/pages/projects/[projectId]/notes/[noteId]/history/[historyDate].vue
@@ -75,6 +75,7 @@
 
 <script setup lang="ts">
 const route = useRoute();
+const localSettings = useLocalSettings();
 const projectStore = useProjectStore();
 
 const baseUrl = `/api/v1/pentestprojects/${route.params.projectId}/history/${route.params.historyDate}/notes/${route.params.noteId}/`;
@@ -82,6 +83,7 @@ const { data: note, project, readonly, toolbarAttrs, fetchLoaderAttrs, inputFiel
   baseUrl,
   fetchProjectType: false,
   historyDate: route.params.historyDate as string,
+  markdownEditorMode: computed({ get: () => localSettings.projectNoteMarkdownEditorMode, set: (val) => { localSettings.projectNoteMarkdownEditorMode = val } }),
 });
 const historyVisible = ref(false);
 const hasChildNotes = computed(() => false);
diff --git a/frontend/src/pages/projects/[projectId]/notes/[noteId]/index.vue b/frontend/src/pages/projects/[projectId]/notes/[noteId]/index.vue
index 2fae9d449..dbf7d8b4a 100644
--- a/frontend/src/pages/projects/[projectId]/notes/[noteId]/index.vue
+++ b/frontend/src/pages/projects/[projectId]/notes/[noteId]/index.vue
@@ -79,6 +79,7 @@
 import urlJoin from "url-join";
 
 const route = useRoute();
+const localSettings = useLocalSettings();
 const projectStore = useProjectStore();
 
 const baseUrl = `/api/v1/pentestprojects/${route.params.projectId}/notes/${route.params.noteId}/`;
@@ -86,6 +87,8 @@ const { data: note, project, readonly, toolbarAttrs, fetchLoaderAttrs, inputFiel
   baseUrl,
   fetchProjectType: false,
   canUploadFiles: true,
+  spellcheckEnabled: computed({ get: () => localSettings.projectNoteSpellcheckEnabled, set: (val) => { localSettings.projectNoteSpellcheckEnabled = val } }),
+  markdownEditorMode: computed({ get: () => localSettings.projectNoteMarkdownEditorMode, set: (val) => { localSettings.projectNoteMarkdownEditorMode = val } }),
   performSave: projectStore.partialUpdateNote,
   performDelete: async (project, note) => {
     await projectStore.deleteNote(project, note);
diff --git a/frontend/src/pages/templates/[templateId]/index.vue b/frontend/src/pages/templates/[templateId]/index.vue
index 3756d499f..c95cb8d30 100644
--- a/frontend/src/pages/templates/[templateId]/index.vue
+++ b/frontend/src/pages/templates/[templateId]/index.vue
@@ -91,7 +91,7 @@ const { toolbarAttrs, fetchLoaderAttrs, readonly } = useLockEdit({
 
 async function uploadFile(file: File) {
   const img = await uploadFileHelper<UploadedFileInfo>(urlJoin(baseUrl.value, '/images/'), file);
-  return `![](/images/name/${img.name})`;
+  return `![](/images/name/${img.name}){width="100%"}`;
 }
 function rewriteFileUrl(imgSrc: string) {
   return urlJoin(baseUrl.value, imgSrc);
diff --git a/frontend/src/stores/settings.ts b/frontend/src/stores/settings.ts
index 9010da597..43cbfba11 100644
--- a/frontend/src/stores/settings.ts
+++ b/frontend/src/stores/settings.ts
@@ -4,8 +4,16 @@ import { MarkdownEditorMode } from "~/utils/types";
 export const useLocalSettings = defineStore('settings', {
   state: () => ({
     autoSaveEnabled: true,
-    markdownEditorMode: MarkdownEditorMode.MARKDOWN as MarkdownEditorMode,
-    spellcheckEnabled: true,
+    reportingMarkdownEditorMode: MarkdownEditorMode.MARKDOWN_AND_PREVIEW as MarkdownEditorMode,
+    projectNoteMarkdownEditorMode: MarkdownEditorMode.MARKDOWN_AND_PREVIEW as MarkdownEditorMode,
+    userNoteMarkdownEditorMode: MarkdownEditorMode.MARKDOWN_AND_PREVIEW as MarkdownEditorMode,
+    designMarkdownEditorMode: MarkdownEditorMode.MARKDOWN_AND_PREVIEW as MarkdownEditorMode,
+    templateMarkdownEditorMode: MarkdownEditorMode.MARKDOWN_AND_PREVIEW as MarkdownEditorMode,
+    reportingSpellcheckEnabled: true,
+    projectNoteSpellcheckEnabled: true,
+    userNoteSpellcheckEnabled: true,
+    designSpellcheckEnabled: true,
+    templateSpellcheckEnabled: true,
     reportInputMenuSize: 15,
     templateInputMenuSize: 15,
     notebookInputMenuSize: 15,
@@ -30,23 +38,6 @@ export const useLocalSettings = defineStore('settings', {
         return val === undefined ? true : val;
       };
     },
-    spellcheckLanguageToolEnabled() {
-      const apiSettings = useApiSettings();
-      return (lang: string|null) => {
-        return lang !== null &&
-            this.spellcheckEnabled &&
-            apiSettings.settings!.features.spellcheck &&
-            Boolean(apiSettings.settings!.languages.find(l => l.code === lang)?.spellcheck || lang === 'auto');
-      }
-    },
-    spellcheckBrowserEnabled() {
-      const apiSettings = useApiSettings();
-      return (lang: string|null) => {
-        return lang !== null &&
-            this.spellcheckEnabled &&
-            !apiSettings.settings!.features.spellcheck;
-      }
-    },
   },
   persist: {
     storage: persistedState.localStorage,

From 55f6e0a4abe82a7a3756b3749a7df935a966eeed Mon Sep 17 00:00:00 2001
From: Michael Wedl <michael@syslifters.com>
Date: Thu, 14 Dec 2023 16:33:19 +0100
Subject: [PATCH 3/3] Reset browser-based spellcheck

---
 .../api_utils/serializers.py                  | 46 -------------------
 frontend/src/app.vue                          | 16 +++++--
 frontend/src/components/Markdown/Toolbar.vue  |  6 +--
 .../src/components/Markdown/ToolbarButton.vue |  2 +-
 4 files changed, 16 insertions(+), 54 deletions(-)

diff --git a/api/src/reportcreator_api/api_utils/serializers.py b/api/src/reportcreator_api/api_utils/serializers.py
index a01a7d23e..87af82e81 100644
--- a/api/src/reportcreator_api/api_utils/serializers.py
+++ b/api/src/reportcreator_api/api_utils/serializers.py
@@ -128,49 +128,3 @@ def validate_aes_key(self, value):
         except ValueError:
             raise serializers.ValidationError('Invalid base64 encoding')
 
-
-# TODO: spellcheck adaptions
-# * [x] update languagetool
-# * [x] picky mode + advanced config
-# * [x] spellcheck API: use picky mode + config
-# * [ ] frontend
-#   * [ ] in community: reset spellcheckEnabled to false on navigation
-#   * [x] rework spellcheck enabled
-#      * [x] localSettings.spellcheckEnabled
-#      * [x] MarkdownFieldContent
-#      * [x] MarkdownTextFieldContent
-#      * [x] MarkdownPage
-#      * [x] MarkdownToolbar
-#   * [x] pass spellcheckEnabled as props + event update:spellcheckEnabled
-#      * [x] section
-#      * [x] finding
-#      * [x] project note
-#      * [x] personal notes
-#      * [x] template
-#      * [x] preview data
-#      * [x] layout editor
-#      * [x] report fields
-#      * [x] finding fields
-#   * [x] rework markdownEditorMode
-#      * [x] localSettings.markdownEditorMode
-#      * [x] MarkdownFieldContent
-#      * [x] MarkdownPage
-#      * [x] MarkdownToolbar
-#   * [x] pass markdownEditorMode as props + event update:markdownEditorMode
-#      * [x] section
-#      * [x] finding
-#      * [x] project note
-#      * [x] personal notes
-#      * [x] template
-#      * [x] preview data
-#      * [x] layout editor
-#      * [x] report fields
-#      * [x] finding fields
-#      * [x] template history
-#      * [x] section history 
-#      * [x] finding history
-#      * [x] project note history
-
-# * [x] docs: new languagetool env variables
-# * [x] markdown images: add "{width=100%}""
-        
\ No newline at end of file
diff --git a/frontend/src/app.vue b/frontend/src/app.vue
index c83eb67ae..c6d80e419 100644
--- a/frontend/src/app.vue
+++ b/frontend/src/app.vue
@@ -8,14 +8,14 @@
 
 <script setup lang="ts">
 const route = useRoute();
-useHeadExtended({
-  titleTemplate: title => rootTitleTemplate(title, route),
-});
-
 const auth = useAuth();
 const localSettings = useLocalSettings();
 const apiSettings = useApiSettings();
 
+useHeadExtended({
+  titleTemplate: title => rootTitleTemplate(title, route),
+});
+
 const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: dark)');
 const systemThemeIsDark = ref<boolean>(colorSchemeQueryList.matches);
 colorSchemeQueryList.addEventListener('change', (event) => {
@@ -40,4 +40,12 @@ const theme = computed(() => {
     return baseTheme;
   }
 });
+
+const router = useRouter();
+watch(router.currentRoute, () => {
+  // Reset browser-based spellcheck on navigation
+  if (!apiSettings.settings?.features.spellcheck) {
+    localSettings.setAllSpellcheckSettings(false);
+  }
+})
 </script>
diff --git a/frontend/src/components/Markdown/Toolbar.vue b/frontend/src/components/Markdown/Toolbar.vue
index 327477b86..5f6fef4ab 100644
--- a/frontend/src/components/Markdown/Toolbar.vue
+++ b/frontend/src/components/Markdown/Toolbar.vue
@@ -18,7 +18,7 @@
     <markdown-toolbar-button
       v-if="apiSettings.isProfessionalLicense"
       @click="toggleSpellcheck"
-      title="Spellcheck"
+      title="Spell check"
       icon="mdi-spellcheck"
       :disabled="props.disabled || !spellcheckSupported"
       :active="spellcheckEnabled"
@@ -26,7 +26,7 @@
     <markdown-toolbar-button
       v-else
       @click="toggleSpellcheck"
-      :title="'Spellcheck'"
+      :title="'Spell check (basic)'"
       icon="mdi-spellcheck"
       :dot="!spellcheckSupported ? undefined : (spellcheckEnabled ? 'warning' : 'error')"
       :disabled="props.disabled || !spellcheckSupported"
@@ -95,7 +95,7 @@ function toggleSpellcheck() {
   const newVal = !props.spellcheckEnabled;
   emit('update:spellcheckEnabled', newVal);
   if (newVal && !apiSettings.isProfessionalLicense) {
-    warningToast('Basic spellcheck enabled. Upgrade to Professional for advanced options.');
+    warningToast('Basic spell check enabled. Upgrade to SysReptor Professional for advanced options.');
   }
 }
 
diff --git a/frontend/src/components/Markdown/ToolbarButton.vue b/frontend/src/components/Markdown/ToolbarButton.vue
index 13a8efcb4..7bf37be7a 100644
--- a/frontend/src/components/Markdown/ToolbarButton.vue
+++ b/frontend/src/components/Markdown/ToolbarButton.vue
@@ -11,7 +11,7 @@
     </v-badge>
     <v-icon v-else size="small" :icon="props.icon" />
 
-    <s-tooltip v-if="props.title" :text="props.title" />
+    <s-tooltip v-if="props.title" activator="parent" location="top" :text="props.title" />
   </s-btn-icon>
 </template>