npm - @vcmap/ui - Versions diffs - 5.2.4 → 5.3.0 - Mend

@vcmap/ui 5.2.4 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/config/base.config.json +82 -0
package/dist/assets/cesium.js +1 -1
package/dist/assets/{core.83d353.js → core.7ca6f7.js} +3498 -3347
package/dist/assets/core.js +1 -1
package/dist/assets/index-0eb860e7.js +1 -0
package/dist/assets/ol.js +1 -1
package/dist/assets/{ui.300809.css → ui.a9e21c.css} +1 -1
package/dist/assets/{ui.300809.js → ui.a9e21c.js} +5691 -5181
package/dist/assets/ui.js +1 -1
package/dist/assets/vue.js +2 -2
package/dist/assets/{vuetify.b3de7a.js → vuetify.ecc326.js} +1 -1
package/dist/assets/vuetify.js +2 -2
package/dist/index.html +1 -1
package/package.json +2 -2
package/src/application/VcsApp.vue +154 -1
package/src/application/VcsApp.vue.d.ts +14 -0
package/src/application/VcsCustomScreen.vue +45 -0
package/src/application/VcsCustomScreen.vue.d.ts +15 -0
package/src/application/VcsSettings.vue +67 -0
package/src/application/VcsSettings.vue.d.ts +2 -0
package/src/application/VcsSplashScreen.vue +133 -0
package/src/application/VcsSplashScreen.vue.d.ts +31 -0
package/src/application/markdownHelper.js +19 -1
package/src/components/icons/+all.js +4 -0
package/src/components/icons/CrosshairIcon.vue +33 -0
package/src/components/icons/CrosshairIcon.vue.d.ts +2 -0
package/src/i18n/de.d.ts +41 -18
package/src/i18n/de.js +22 -0
package/src/i18n/en.d.ts +41 -18
package/src/i18n/en.js +22 -0
package/src/navigation/MapNavigation.vue +74 -4
package/src/navigation/MapNavigation.vue.d.ts +36 -0
package/src/navigation/ObliqueRotation.vue +8 -0
package/src/navigation/ObliqueRotation.vue.d.ts +13 -1
package/src/navigation/TiltSlider.vue +8 -1
package/src/navigation/TiltSlider.vue.d.ts +13 -1
package/src/navigation/VcsCompass.vue +7 -1
package/src/navigation/VcsCompass.vue.d.ts +11 -0
package/src/navigation/VcsZoomButton.vue +10 -0
package/src/navigation/VcsZoomButton.vue.d.ts +15 -1
package/src/navigation/locatorHelper.d.ts +9 -0
package/src/navigation/locatorHelper.js +294 -0
package/src/navigation/overviewMap.d.ts +21 -20
package/src/navigation/overviewMap.js +51 -39
package/src/uiConfig.d.ts +67 -0
package/src/uiConfig.js +30 -0
package/dist/assets/index-69733149.js +0 -1
/package/dist/assets/{cesium.162cd3.js → cesium.8ce891.js} +0 -0
/package/dist/assets/{ol.7cdede.js → ol.f313ea.js} +0 -0
/package/dist/assets/{vue.27f25a.js → vue.d7a2f9.js} +0 -0
/package/dist/assets/{vuetify.b3de7a.css → vuetify.ecc326.css} +0 -0

package/dist/assets/ui.js CHANGED Viewed

	@@ -1 +1 @@
1	- export * from "./ui.~~300809~~.js";
1	+ export * from "./ui.a9e21c.js";

package/dist/assets/vue.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vue.27f25a.js";
-import { default as f } from "./vue.27f25a.js";
+export * from "./vue.d7a2f9.js";
+import { default as f } from "./vue.d7a2f9.js";
 export {
   f as default
 };

package/dist/assets/{vuetify.b3de7a.js → vuetify.ecc326.js} RENAMED Viewed

@@ -13,7 +13,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify.b3de7a.css');import v from "./vue.27f25a.js";
+} await loadCss('./assets/vuetify.ecc326.css');import v from "./vue.d7a2f9.js";
 const Ne = v.extend().extend({
   name: "themeable",
   provide() {

package/dist/assets/vuetify.js CHANGED Viewed

@@ -1,5 +1,5 @@
-export * from "./vuetify.b3de7a.js";
-import { default as f } from "./vuetify.b3de7a.js";
+export * from "./vuetify.ecc326.js";
+import { default as f } from "./vuetify.ecc326.js";
 export {
   f as default
 };

package/dist/index.html CHANGED Viewed

@@ -95,7 +95,7 @@
         }
       }
     </style>
-    <script type="module" crossorigin src="./assets/index-69733149.js"></script>
+    <script type="module" crossorigin src="./assets/index-0eb860e7.js"></script>
   </head>
   <body style="height: 100vh; margin: 0;">
     <noscript>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "5.2.4",
+  "version": "5.3.0",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -53,7 +53,7 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^4.0.3",
-    "@vcmap/core": "^5.2.0",
+    "@vcmap/core": "^5.3.0",
     "ol": "^7.5.2",
     "vue": "~2.7.3",
     "vuetify": "~2.6.7"

package/src/application/VcsApp.vue CHANGED Viewed

@@ -1,5 +1,10 @@
 <template>
   <v-container class="fill-height pa-0" absolute fluid>
+    <VcsSplashScreen
+      v-if="splashScreen"
+      :text-page="splashScreen"
+      :window-id="'splashScreen'"
+    ></VcsSplashScreen>
     <VcsNavbar />
     <VcsContainer :attribution-action="attributionAction" />
     <v-footer
@@ -68,6 +73,10 @@
   import { getLegendEntries } from '../legend/legendHelper.js';
   import VcsAttributionsFooter from './VcsAttributionsFooter.vue';
   import VcsTextPageFooter from './VcsTextPageFooter.vue';
+  import VcsSplashScreen, {
+    createSplashScreenAction,
+  } from './VcsSplashScreen.vue';
+  import VcsCustomScreen from './VcsCustomScreen.vue';
   import VcsAttributions from './VcsAttributions.vue';
   import { getAttributions } from './attributionsHelper.js';
   import VcsDefaultLogoMobile from '../logo-mobile.svg';
@@ -254,6 +263,103 @@
     };
   }
+  /**
+   * This helper function will add a customScreen action button to the apps NavbarManager MENU location.
+   * @param {import("../vcsUiApp.js").default} app
+   * @returns {function():void}
+   */
+  function setupCustomScreen(app) {
+    function setupCustomScreenAction() {
+      const { customScreen } = app.uiConfig.config.value;
+      const { action: customScreenAction, destroy: customScreenDestroy } =
+        createToggleAction(
+          {
+            name: customScreen.name || 'components.customScreen.name',
+            icon: customScreen.icon || 'mdi-information',
+            title: customScreen.title,
+          },
+          {
+            id: 'customScreenId',
+            component: VcsCustomScreen,
+            state: {
+              headerIcon: customScreen.icon,
+              headerTitle: customScreen.name,
+            },
+            slot: WindowSlot.DETACHED,
+            position: customScreen.windowPosition,
+            props: customScreen,
+          },
+          app.windowManager,
+          vcsAppSymbol,
+        );
+      if (app.navbarManager.has('customScreenToggle')) {
+        app.navbarManager.remove('customScreenToggle');
+      }
+      app.navbarManager.add(
+        {
+          id: 'customScreenToggle',
+          action: customScreenAction,
+        },
+        vcsAppSymbol,
+        ButtonLocation.MENU,
+      );
+      return () => {
+        customScreenDestroy();
+      };
+    }
+    let customScreen;
+    const stopCustomScreenWatcher = watch(
+      () => app.uiConfig.config.value.customScreen,
+      (newCustomScreen) => {
+        if (newCustomScreen) {
+          customScreen = setupCustomScreenAction();
+        }
+      },
+      { immediate: true },
+    );
+    return () => {
+      if (customScreen) {
+        customScreen();
+      }
+      stopCustomScreenWatcher();
+    };
+  }
+  /**
+   * This helper function will add a Splash Screen action button to the apps NavbarManager MENU location.
+   * @param {import("../vcsUiApp.js").default} app
+   */
+  function setupSplashScreen(app) {
+    function setupSplashScreenAction() {
+      const { splashScreen } = app.uiConfig.config.value;
+      const splashScreenAction = createSplashScreenAction({
+        name: splashScreen.name || 'components.splashScreen.name',
+        icon: splashScreen.icon || 'mdi-alert-box',
+        title: splashScreen.title,
+      });
+      if (app.navbarManager.has('splashScreenToggle')) {
+        app.navbarManager.remove('splashScreenToggle');
+      }
+      app.navbarManager.add(
+        {
+          id: 'splashScreenToggle',
+          action: splashScreenAction,
+        },
+        vcsAppSymbol,
+        ButtonLocation.MENU,
+      );
+    }
+    return watch(
+      () => app.uiConfig.config.value.splashScreen,
+      (newSplashScreen) => {
+        if (newSplashScreen) {
+          setupSplashScreenAction();
+        }
+      },
+      { immediate: true },
+    );
+  }
   /**
    * This helper function will add a settings action button to the apps NavbarManager MENU location.
    * @param {import("../vcsUiApp.js").default} app
@@ -456,6 +562,33 @@
     };
   }
+  /**
+   * This helper sets up a listener to sync the display quality settings from the {@see UiConfigObject}
+   * @param {import("../vcsUiApp.js").default} app
+   * @returns {function():void} - call to stop syncing
+   */
+  export function setupUiConfigDisplayQuality(app) {
+    const listeners = [
+      app.uiConfig.added.addEventListener((item) => {
+        if (item.name === 'displayQuality') {
+          app.displayQuality.updateOptions(item.value);
+        }
+      }),
+      app.uiConfig.removed.addEventListener((item) => {
+        if (item.name === 'displayQuality') {
+          app.displayQuality.updateOptions({});
+        }
+      }),
+    ];
+    return () => {
+      listeners.forEach((cb) => {
+        cb();
+      });
+      listeners.splice(0);
+    };
+  }
   /**
    * This helper gets attributions of all active maps, layers and oblique collections and returns an array of entries.
    * It also returns a attributionAction to toggle the attributions window and a destroy function.
@@ -507,6 +640,7 @@
       VcsPositionDisplay,
       VcsAttributionsFooter,
       VcsTextPageFooter,
+      VcsSplashScreen,
       VcsNavbar,
       VContainer,
       VFooter,
@@ -521,16 +655,18 @@
       /** @type {import("../vcsUiApp.js").default} */
       const app = getVcsAppById(props.appId);
       provide('vcsApp', app);
       const mapNavbarListener = setupMapNavbar(app);
       const legendDestroy = setupLegendWindow(app);
       const settingsDestroy = setupSettingsWindow(app);
+      const stopCustomScreen = setupCustomScreen(app);
+      const stopSplashScreen = setupSplashScreen(app);
       setupHelpButton(app);
       const destroyComponentsWindow = setupCategoryManagerWindow(app);
       const destroyThemingListener = setupUiConfigTheming(
         app,
         getCurrentInstance().proxy.$vuetify,
       );
+      const destroyDisplayQualityListener = setupUiConfigDisplayQuality(app);
       const { attributionEntries, attributionAction, destroyAttributions } =
         setupAttributions(app);
@@ -546,9 +682,12 @@
         mapNavbarListener();
         legendDestroy();
         settingsDestroy();
+        stopCustomScreen();
+        stopSplashScreen();
         destroyComponentsWindow();
         destroyThemingListener();
         destroyAttributions();
+        destroyDisplayQualityListener();
       });
       return {
@@ -578,6 +717,20 @@
           }
           return undefined;
         }),
+        splashScreen: computed(() => {
+          if (app.uiConfig.config.value.splashScreen) {
+            return {
+              title: 'components.splashScreen.name',
+              tooltip: 'components.splashScreen.tooltip',
+              position: {
+                width: '800px',
+                height: '400px',
+              },
+              ...app.uiConfig.config.value.splashScreen,
+            };
+          }
+          return undefined;
+        }),
         attributionEntries,
         attributionAction,
       };

package/src/application/VcsApp.vue.d.ts CHANGED Viewed

@@ -49,6 +49,12 @@ export function setupCategoryManagerWindow(app: import("../vcsUiApp.js").default
  * @returns {function():void} - call to stop syncing
  */
 export function setupUiConfigTheming(app: import("../vcsUiApp.js").default, vuetify: import("vuetify").Framework): () => void;
+/**
+ * This helper sets up a listener to sync the display quality settings from the {@see UiConfigObject}
+ * @param {import("../vcsUiApp.js").default} app
+ * @returns {function():void} - call to stop syncing
+ */
+export function setupUiConfigDisplayQuality(app: import("../vcsUiApp.js").default): () => void;
 /**
  * This helper gets attributions of all active maps, layers and oblique collections and returns an array of entries.
  * It also returns a attributionAction to toggle the attributions window and a destroy function.
@@ -75,6 +81,14 @@ declare const _default: import("vue").DefineComponent<{
         title: string;
         tooltip: string;
     } | undefined>;
+    splashScreen: import("vue").ComputedRef<{
+        title: string;
+        tooltip: string;
+        position: {
+            width: string;
+            height: string;
+        };
+    } | undefined>;
     attributionEntries: import("vue").Ref<import("./attributionsHelper.js").AttributionEntry[]>;
     attributionAction: import("../actions/actionHelper.js").VcsAction;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{

package/src/application/VcsCustomScreen.vue ADDED Viewed

@@ -0,0 +1,45 @@
+<template>
+  <v-card>
+    <div class="px-2 pt-2 pb-1">
+      <v-card-text>
+        <div v-html="customScreenText"></div>
+      </v-card-text>
+    </div>
+  </v-card>
+</template>
+<script>
+  import { VCard, VCardText } from 'vuetify/lib';
+  import { computed, getCurrentInstance } from 'vue';
+  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  export default {
+    name: 'VcsCustomScreen',
+    components: {
+      VCard,
+      VCardText,
+    },
+    props: {
+      content: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      const vm = getCurrentInstance().proxy;
+      const dialog = true;
+      const customScreenText = computed(() => {
+        const translatedContent = vm.$t(props.content);
+        return parseAndSanitizeMarkdown(translatedContent);
+      });
+      return {
+        dialog,
+        customScreenText,
+      };
+    },
+  };
+</script>
+<style scoped lang="scss"></style>

package/src/application/VcsCustomScreen.vue.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+declare const _default: import("vue").DefineComponent<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    dialog: boolean;
+    customScreenText: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/src/application/VcsSettings.vue CHANGED Viewed

@@ -14,6 +14,27 @@
         />
       </v-col>
     </v-row>
+    <v-row v-if="is3D" no-gutters>
+      <VcsLabel html-for="settingsDisplayQuality">
+        {{ $t('settings.displayQuality.title') }}
+      </VcsLabel>
+    </v-row>
+    <v-row v-if="is3D" no-gutters class="quality-slider-padding">
+      <VcsSlider
+        step="1"
+        v-model="displaySettings"
+        type="number"
+        max="2"
+        min="0"
+        ticks="always"
+        tick-size="5"
+        :tick-labels="[
+          $t('settings.displayQuality.level.low'),
+          $t('settings.displayQuality.level.medium'),
+          $t('settings.displayQuality.level.high'),
+        ]"
+      />
+    </v-row>
     <v-row no-gutters>
       <v-col>
         <VcsLabel html-for="settingsLanguageSelect">
@@ -38,9 +59,11 @@
 <script>
   import { ref, inject, onUnmounted, getCurrentInstance, computed } from 'vue';
   import { VCol, VContainer, VRow } from 'vuetify/lib';
+  import { CesiumMap, DisplayQualityLevel } from '@vcmap/core';
   import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
   import VcsSelect from '../components/form-inputs-controls/VcsSelect.vue';
   import VcsRadio from '../components/form-inputs-controls/VcsRadio.vue';
+  import VcsSlider from '../components/form-inputs-controls/VcsSlider.vue';
   /**
    * @description The settings window of a VcsMap application
@@ -48,6 +71,7 @@
   export default {
     name: 'VcsSettings',
     components: {
+      VcsSlider,
       VcsSelect,
       VcsRadio,
       VcsLabel,
@@ -84,15 +108,58 @@
       const addedListener = app.i18n.added.addEventListener(setupI18n);
       const removedListener = app.i18n.removed.addEventListener(setupI18n);
+      const levels = [
+        DisplayQualityLevel.LOW,
+        DisplayQualityLevel.MEDIUM,
+        DisplayQualityLevel.HIGH,
+      ];
+      const localDisplaySettings = ref();
+      const displaySettings = computed({
+        get() {
+          return localDisplaySettings.value;
+        },
+        set(value) {
+          app.displayQuality.setLevel(levels[value]);
+        },
+      });
+      const setDisplayQualityLevel = () => {
+        localDisplaySettings.value = levels.indexOf(
+          app.displayQuality.currentQualityLevel,
+        );
+      };
+      setDisplayQualityLevel();
+      const displayQualityListener =
+        app.displayQuality.qualityLevelChanged.addEventListener(
+          setDisplayQualityLevel,
+        );
+      const is3D = ref(false);
+      const updateIs3D = () => {
+        is3D.value = app.maps.activeMap instanceof CesiumMap;
+      };
+      const mapActivatedListener =
+        app.maps.mapActivated.addEventListener(updateIs3D);
+      updateIs3D();
       onUnmounted(() => {
         localeChangedListener();
         addedListener();
         removedListener();
+        displayQualityListener();
+        mapActivatedListener();
       });
       return {
         language,
         languages,
+        displaySettings,
+        is3D,
       };
     },
   };
 </script>
+<style scoped>
+  .quality-slider-padding {
+    padding-bottom: 20px !important;
+  }
+</style>

package/src/application/VcsSettings.vue.d.ts CHANGED Viewed

@@ -1,5 +1,7 @@
 declare const _default: import("vue").DefineComponent<{}, {
     language: import("vue").WritableComputedRef<string>;
     languages: import("vue").Ref<never[]>;
+    displaySettings: import("vue").WritableComputedRef<any>;
+    is3D: import("vue").Ref<boolean>;
 }, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/src/application/VcsSplashScreen.vue ADDED Viewed

@@ -0,0 +1,133 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    :width="textPage.position.width"
+    :height="textPage.position.height"
+    :max-width="textPage.position.maxWidth"
+    :max-height="textPage.position.maxHeight"
+    persistent
+  >
+    <v-card>
+      <div class="px-2 pt-2 pb-1">
+        <v-card-text>
+          <div v-html="splashScreenText"></div>
+          <v-row class="mt-2" v-if="acceptInput" no-gutters>
+            <v-col class="align-center d-flex">
+              <VcsCheckbox
+                id="checkbox_splashScreen"
+                style="margin-bottom: 16px"
+                v-model="checkBox"
+              >
+              </VcsCheckbox>
+              <VcsLabel>
+                <div
+                  v-html="splashScreenCheckboxText"
+                  class="marked-checkbox-content"
+                ></div>
+              </VcsLabel>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions>
+          <v-col class="text-right">
+            <VcsFormButton
+              color="primary"
+              @click="exitScreen"
+              :disabled="!checkBox"
+              >{{ buttonTitle }}</VcsFormButton
+            >
+          </v-col>
+        </v-card-actions>
+      </div>
+    </v-card>
+  </v-dialog>
+</template>
+<script>
+  import {
+    VDialog,
+    VCard,
+    VCardText,
+    VCardActions,
+    VRow,
+    VCol,
+  } from 'vuetify/lib';
+  import { computed, getCurrentInstance, ref } from 'vue';
+  import { parseAndSanitizeMarkdown } from './markdownHelper.js';
+  import VcsFormButton from '../components/buttons/VcsFormButton.vue';
+  import VcsCheckbox from '../components/form-inputs-controls/VcsCheckbox.vue';
+  import VcsLabel from '../components/form-inputs-controls/VcsLabel.vue';
+  const dialog = ref(true);
+  export function createSplashScreenAction(options) {
+    return {
+      ...options,
+      callback() {
+        dialog.value = true;
+      },
+    };
+  }
+  export default {
+    name: 'VcsSplashScreen',
+    components: {
+      VcsLabel,
+      VDialog,
+      VCard,
+      VCardText,
+      VCardActions,
+      VcsFormButton,
+      VcsCheckbox,
+      VRow,
+      VCol,
+    },
+    props: {
+      textPage: {
+        type: Object,
+        default: () => {},
+      },
+      windowId: {
+        type: String,
+        required: true,
+      },
+    },
+    setup(props) {
+      const vm = getCurrentInstance().proxy;
+      const splashScreenText = computed(() => {
+        const translatedContent = vm.$t(props.textPage.content);
+        return parseAndSanitizeMarkdown(translatedContent);
+      });
+      const buttonTitle = vm.$t(props.textPage.buttonTitle);
+      const splashScreenCheckboxText = computed(() => {
+        const translatedContent = vm.$t(props.textPage.checkBoxText);
+        return parseAndSanitizeMarkdown(translatedContent);
+      });
+      const acceptInput = ref(props.textPage.acceptInput);
+      const checkBox = ref(!acceptInput.value);
+      const exitScreen = () => {
+        dialog.value = false;
+      };
+      return {
+        dialog,
+        exitScreen,
+        splashScreenText,
+        splashScreenCheckboxText,
+        checkBox,
+        acceptInput,
+        buttonTitle,
+      };
+    },
+  };
+</script>
+<style scoped lang="scss">
+  .marked-checkbox-content ::v-deep p {
+    margin-bottom: 0;
+  }
+</style>

package/src/application/VcsSplashScreen.vue.d.ts ADDED Viewed

@@ -0,0 +1,31 @@
+export function createSplashScreenAction(options: any): any;
+declare const _default: import("vue").DefineComponent<{
+    textPage: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    windowId: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    dialog: import("vue").Ref<boolean>;
+    exitScreen: () => void;
+    splashScreenText: import("vue").ComputedRef<string>;
+    splashScreenCheckboxText: import("vue").ComputedRef<string>;
+    checkBox: import("vue").Ref<boolean>;
+    acceptInput: any;
+    buttonTitle: any;
+}, {}, {}, {}, import("vue/types/v3-component-options.js").ComponentOptionsMixin, import("vue/types/v3-component-options.js").ComponentOptionsMixin, {}, string, Readonly<import("vue").ExtractPropTypes<{
+    textPage: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    windowId: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {
+    textPage: Record<string, any>;
+}>;
+export default _default;

package/src/application/markdownHelper.js CHANGED Viewed

@@ -1,12 +1,30 @@
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
+// Create a custom renderer
+const renderer = new marked.Renderer();
+renderer.link = (href, title, text) => {
+  const target = '_blank';
+  const titleAttr = title ? ` title="${title}"` : '';
+  return `<a href="${href}" target="${target}"${titleAttr}>${text}</a>`;
+};
+// Set options for marked to use the custom renderer
+marked.setOptions({
+  renderer,
+  breaks: true, // Enable line breaks
+});
 /**
  * @param {string} content
  * @returns {string}
  */
 export function parseAndSanitizeMarkdown(content) {
-  return DOMPurify.sanitize(marked(content));
+  // First, convert the Markdown to HTML using marked
+  const html = marked(content);
+  // Then sanitize the HTML using DOMPurify
+  return DOMPurify.sanitize(html, { ADD_ATTR: ['target'] });
 }
 /**