@designcrowd/library.brand-page 5.10.20 → 5.10.31

package/src/brand-page-maker/components/rich-text-editor/RichTextEditor.vue

@@ -1,4 +1,60 @@
 <template>
+  <div v-if="isAdmin" class="tw-p-3">
+    <p
+      class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mb-2 tw-mt-4"
+    >
+      {{ textStyleFieldTr(`color`) }}
+    </p>
+    <ColorField
+      :id="`${rawId}-color${textItemIndex ?? ''}`"
+      :enable-color-match="true"
+      :name="name + 'TextStyle'"
+      :value="textColorValue"
+      :options="colorConvertor.convert(props.styles)"
+      :is-admin="isAdmin"
+      :logo-theme="logoTheme"
+      :show-color-pallet="false"
+      :is-toggled="true"
+      @update:model-value="
+        (color: ColorPickerEvent) => {
+          handleAdminColorChange(color, 'textColor');
+
+          if (!color.value || color.value === '') {
+            isTextColorPickerDisabled = false;
+          } else {
+            isTextColorPickerDisabled = true;
+          }
+        }
+      "
+    />
+    <p
+      class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mb-2 tw-mt-4"
+    >
+      {{ textStyleFieldTr(`backgroundColor`) }}
+    </p>
+    <ColorField
+      :id="`${rawId}-backgroundStyle${textItemIndex ?? ''}`"
+      :enable-color-match="true"
+      :name="name"
+      :value="textBackgroundColorValue"
+      :options="backgroundColorConvertor.convert(props.styles)"
+      :is-admin="isAdmin"
+      :show-color-pallet="false"
+      :logo-theme="logoTheme"
+      :is-toggled="false"
+      @update:model-value="
+        (color: ColorPickerEvent) => {
+          handleAdminColorChange(color, 'backgroundColor');
+
+          if (!color.value || color.value === '') {
+            isBackgroundColorPickerDisabled = false;
+          } else {
+            isBackgroundColorPickerDisabled = true;
+          }
+        }
+      "
+    />
+  </div>
   <div
     class="rich-text-editor tw-border tw-border-solid tw-border-grayscale-500 tw-rounded"
   >
@@ -6,6 +62,7 @@
       <div class="style-editor">
         <Dropdown
           ref="textStyleTypeDropdownRef"
+          v-click-outside="(e: MouseEvent) => clickOutsideTextStyle(e)"
           data-test-tag="text-style-dropdown"
           class="style-editor-button style-editor-button-textstyle"
           :title="
@@ -16,7 +73,6 @@
           icon-size="xs"
           element-classes="text-dropdown-title"
           menu-element-classes="tw-min-w-[310px] tw-left-0"
-          v-click-outside="(e: MouseEvent) => clickOutsideTextStyle(e)"
         >
           <div
             class="tw-z-1000 tw-bg-white tw-text-grayscale-600"
@@ -25,8 +81,8 @@
             <div
               v-for="option in textStyleTypeOptions"
               :key="option.value"
-              @click="onSelectTextStyleType(option)"
               class="tw-flex tw-items-center tw-px-2 tw-py-2 drop-down-item tw-cursor-pointer"
+              @click="onSelectTextStyleType(option)"
             >
               <span
                 class="tw-flex tw-flex-row tw-w-full tw-justify-between tw-items-center"
@@ -39,6 +95,7 @@
         </Dropdown>
         <Dropdown
           ref="fontStyleDropdownRef"
+          v-click-outside="(e: MouseEvent) => clickOutsideFontStyle(e)"
           data-test-tag="font-style-dropdown"
           :title="fontSettings.selectedFont"
           icon-size="xs"
@@ -47,7 +104,6 @@
           menu-element-classes="tw-min-w-[340px] left-align"
           menu-align="left"
           tooltip="Font"
-          v-click-outside="(e: MouseEvent) => clickOutsideFontStyle(e)"
         >
           <DropdownItem
             :key="fontFamilySelectorKey"
@@ -55,8 +111,8 @@
             class="tw-min-w-[340px] tw-max-h-[400px] tw-overflow-auto tw-z-1000 tw-bg-white hover:tw-bg-white tw-text-grayscale-600"
           >
             <FontFamilySelector
-              class="tw-w-full"
               :key="fontFamilySelectorKey"
+              class="tw-w-full"
               :font-family-options="availableTextFontFamilyOptions"
               :value="fontSettings.selectedFont"
               @on-select="
@@ -93,8 +149,11 @@
         </div>
         <div class="style-editor-button" title="Text Color">
           <ColorField
-            class="tw-max-h-9 tw-max-w-9 tw-justify-center"
             id="text-color-picker"
+            class="tw-max-h-9 tw-max-w-9 tw-justify-center"
+            :class="{
+              'tw-opacity-50 tw-pointer-events-none': isTextColorPickerDisabled,
+            }"
             data-test-tag="text-color-picker"
             name="fill"
             :is-rich-text-editor="true"
@@ -122,33 +181,31 @@
           class="toolbar-editor-button"
           data-test-tag="bold-toolbar"
           icon="maker-bold"
-          iconSize="sm"
+          icon-size="sm"
           :class="{
             active: editor.isActive('bold'),
           }"
           @click="
             triggerEditorStyleChange({ type: 'fontWeight', value: 'bold' })
           "
-          alt-text="Bold"
         />
         <Button
           class="toolbar-editor-button"
           data-test-tag="italic-toolbar"
           icon="maker-italic"
-          iconSize="sm"
+          icon-size="sm"
           :class="{
             active: editor.isActive('italic'),
           }"
           @click="
             triggerEditorStyleChange({ type: 'fontStyle', value: 'italic' })
           "
-          alt-text="Italic"
         />
         <Button
           class="toolbar-editor-button"
           icon="maker-underline"
           data-test-tag="underline-toolbar"
-          iconSize="sm"
+          icon-size="sm"
           :class="{
             active: editor.isActive('underline'),
           }"
@@ -158,7 +215,6 @@
               value: 'underline',
             })
           "
-          alt-text="Underline"
         />
 
         <div class="border mobile" />
@@ -166,7 +222,7 @@
           class="toolbar-editor-button"
           data-test-tag="strikethrough-toolbar"
           icon="maker-strikethrough"
-          iconSize="sm"
+          icon-size="sm"
           justify="center"
           :class="{
             active: editor.isActive('strike'),
@@ -177,12 +233,15 @@
               value: 'line-through',
             })
           "
-          alt-text="Strikethrough"
         />
         <div class="toolbar-editor-button" title="Highlight Color">
           <ColorField
-            class="tw-max-h-9 tw-max-w-9 tw-justify-center"
             id="text-background-color-picker"
+            class="tw-max-h-9 tw-max-w-9 tw-justify-center"
+            :class="{
+              'tw-opacity-50 tw-pointer-events-none':
+                isBackgroundColorPickerDisabled,
+            }"
             data-test-tag="background-color-picker"
             name="fill"
             :is-rich-text-editor="true"
@@ -207,7 +266,7 @@
           class="toolbar-editor-button"
           :icon="currentAlignment.icon"
           data-test-tag="alignment-toolbar"
-          iconSize="sm"
+          icon-size="sm"
           justify="center"
           :class="{
             active: currentAlignment.isActive(),
@@ -215,13 +274,12 @@
           @click="
             triggerEditorStyleChange({ type: 'textAlign', value: 'center' })
           "
-          alt-text="Alignment"
         />
         <Button
           class="toolbar-editor-button"
           data-test-tag="alignment-toolbar"
           icon="maker-spacing"
-          iconSize="sm"
+          icon-size="sm"
           justify="center"
           :class="{
             active:
@@ -230,48 +288,151 @@
               isSpacingDropdownOpen,
           }"
           @click="isSpacingDropdownOpen = !isSpacingDropdownOpen"
-          alt-text="Spacing"
+        />
+        <Button
+          class="toolbar-editor-button"
+          data-test-tag="link-toolbar"
+          icon="maker-link"
+          icon-size="sm"
+          justify="center"
+          :class="{
+            active: editor.isActive('link'),
+          }"
+          @click="onClickHyperlink()"
         />
       </div>
       <div
         v-if="isSpacingDropdownOpen"
         ref="spacingPopupRef"
-        class="spacing-popup-container tw-max-w-[310px]"
-        data-test-tag="spacing-toolbar"
         v-click-outside="(e: MouseEvent) => clickOutsideTextSpacing(e)"
+        class="popup-container tw-max-w-[310px] spacing-popup"
+        data-test-tag="spacing-toolbar"
       >
-        <div class="spacing-popup-panel">
+        <div class="popup-panel">
           <label class="tw-block tw-text-sm tw-mb-1 tw-font-bold"
             >Letter Spacing</label
           >
           <Slider
+            v-model="letterSpacingValue"
             :min="MIN_LETTER_SPACING_PERCENT"
             :max="MAX_LETTER_SPACING_PERCENT"
             :prevent-negative="true"
-            v-model="letterSpacingValue"
           />
 
           <label class="tw-block tw-text-sm tw-mt-3 tw-mb-1 tw-font-bold"
             >Line Height</label
           >
           <Slider
+            v-model="lineHeightValue"
             :min="MIN_LINE_HEIGHT"
             :max="MAX_LINE_HEIGHT"
             :step="0.1"
             :max-decimal-point="1"
-            v-model="lineHeightValue"
+          />
+        </div>
+      </div>
+      <div
+        v-if="isHyperlinkPopupOpen"
+        ref="linkPopupRef"
+        v-click-outside="(e: MouseEvent) => clickOutsideHyperlink(e)"
+        class="popup-container tw-min-w-[300px] hyperlink-popup"
+        data-test-tag="hyperlink-toolbar"
+      >
+        <div class="popup-panel tw-flex tw-flex-col tw-gap-3">
+          <FieldSubHeader title="Text" />
+          <TextInput v-model="markedText" placeholder="Display Text" />
+
+          <FieldSubHeader title="Link to" />
+          <ButtonGroup
+            :options="btnLinkOptions"
+            :columns="2"
+            @on-select="onSelectLinkType"
+          />
+          <UrlField
+            v-if="selectedLinkType === HYPERLINK_TYPE.url"
+            id="id"
+            name="url"
+            :role="selectedLinkTypeValue"
+            :value="hyperlinkUrlValue"
+            :settings="urlValidationSettings"
+            placeholder="https://example.com"
+            @update:model-value="(obj) => setHyperlinkUrlValue(obj.value)"
+          />
+          <PageDropdownField
+            v-if="selectedLinkType === HYPERLINK_TYPE.page"
+            id="page-dropdown"
+            name="page"
+            :value="selectedPage"
+            placeholder="Select a page"
+            :show-upgrade-btn="false"
+            @update:model-value="onPageSelected"
+          />
+          <Button
+            :disabled="isAddLinkButtonDisabled"
+            class="tw-w-full"
+            :full-width="true"
+            label="Add Link"
+            variant="secondary"
+            size="small"
+            @click="applyHyperlink"
           />
         </div>
       </div>
     </div>
-    <EditorContent
-      tabindex="0"
-      @focus="onFocus"
-      @blur="onBlur"
-      :id="id"
-      :editor="editor"
-      :v-model="model"
-    />
+    <div class="tw-relative">
+      <BubbleMenu
+        :editor="editor"
+        :tippy-options="tippyOptions"
+        :update-delay="0"
+        :should-show="shouldShow"
+        class="tw-w-fit"
+      >
+        <div class="bubble-menu">
+          <div
+            class="popup-panel tw-grid tw-grid-cols-4 tw-gap-2 tw-items-center tw-justify-between"
+          >
+            <div
+              class="tw-border-solid tw-border-r tw-border-grayscale-500 tw-pr-4 tw-mr-4 tw-col-span-3 tw-overflow-hidden tw-text-ellipsis"
+            >
+              <a
+                v-if="isExternalLink"
+                :href="editor.getAttributes('link').href"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="maker-anchor tw-whitespace-pre"
+              >
+                {{ editor.getAttributes('link').href }}
+              </a>
+              <div v-else class="tw-whitespace-pre">
+                {{ `/${editor.getAttributes('link').href}` }}
+              </div>
+            </div>
+            <div class="tw-flex tw-gap-4 tw-col-span-1">
+              <Icon
+                name="edit"
+                size="sm"
+                class="tw-cursor-pointer"
+                @click="onClickHyperlink()"
+              />
+              <Icon
+                name="delete"
+                size="sm"
+                class="tw-cursor-pointer"
+                @click="handleHyperlink('remove')"
+              />
+            </div>
+          </div>
+        </div>
+      </BubbleMenu>
+      <EditorContent
+        :id="id"
+        tabindex="0"
+        :editor="editor"
+        :v-model="model"
+        @focus="onFocus"
+        @blur="onBlur"
+      />
+    </div>
   </div>
 </template>
 
@@ -285,6 +446,7 @@ import {
   ref,
   onMounted,
   watch,
+  nextTick,
 } from 'vue';
 import {
   Button,
@@ -293,14 +455,19 @@ import {
   NumberStepper,
   Slider,
   Icon,
+  ButtonGroup,
+  TextInput,
 } from '@designcrowd/fe-shared-lib';
-import { EditorContent } from '@tiptap/vue-3';
+import { EditorContent, BubbleMenu } from '@tiptap/vue-3';
 import { useRichTextEditor } from '../../composables/rich-text-editor/useRichTextEditor';
 import FontFamilySelector from '../../../shared/font-family-selector/FontFamilySelector.vue';
 import ColorField from '../../../shared/content-settings/components/color-field/ColorField.vue';
+import UrlField from '../../../shared/content-settings/components/url-field/UrlField.vue';
 
 import { useUiStyleSettingsStore } from '../../../shared/style-settings/store';
 import { useUiContentSettingsStore } from '../../../shared/content-settings/store';
+import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
+import { URL_REG_EX } from '../../../shared/content-settings/constants';
 import { v4 as uuidV4 } from 'uuid';
 import {
   MIN_LETTER_SPACING_PERCENT,
@@ -310,12 +477,23 @@ import {
   DEFAULT_FONT_SIZE,
   MAX_TEXT_SIZE_PX,
   TEXT_STYLE_TYPES,
+  HYPERLINK_TYPE,
   type TextStyleDeclaration,
   type TextStyles,
   type TextItem,
+  type HyperlinkType,
+  STYLE_THEME_KEYS,
 } from '../../../brand-page';
 import { useBrandPageMakerUserStore, useUiStore } from '../../stores';
 import type { ButtonGroupOption } from '../../models/button-group.model';
+import FieldSubHeader from '../../../shared/content-settings/components/field-sub-header/FieldSubHeader.vue';
+import PageDropdownField from '../../../shared/content-settings/components/page-dropdown-field/PageDropdownField.vue';
+import { textStyleFieldTr } from '../../../composables/useTranslate';
+import {
+  backgroundColorConvertor,
+  colorConvertor,
+} from '../../../brand-page-maker/convertors';
+import { hasLogoColorVar } from '../../../brand-page-maker/utils';
 
 interface DropdownInstance {
   hideMenu: () => void;
@@ -358,6 +536,7 @@ const props = withDefaults(
 
 const styleSettingsStore = useUiStyleSettingsStore();
 const contentSettingStore = useUiContentSettingsStore();
+const pageSettingsStore = useUiPageSettingsStore();
 
 const fontStyleDropdownRef = ref<DropdownInstance>();
 const textStyleTypeDropdownRef = ref<DropdownInstance>();
@@ -367,7 +546,12 @@ const availableTextFontFamilyOptions = computed(
 );
 
 const model = defineModel();
-const emit = defineEmits(['focus', 'blur', 'update:modelValue']);
+const emit = defineEmits([
+  'focus',
+  'blur',
+  'update:modelValue',
+  'update:adminColorMatch',
+]);
 
 const fontFamilySelectorKey = computed(() => `fontFamilySelector-${uuidV4()}`);
 
@@ -387,9 +571,24 @@ const fontSettings = reactive({
   selectedTextColor: '#000000',
   selectedBackgroundColor: 'transparent',
 });
-
 const updateRichTextEditor = ref(false);
 
+// Control disabled state of color pickers based on color values
+const isTextColorPickerDisabled = ref(false);
+const isBackgroundColorPickerDisabled = ref(false);
+
+// Initialize disabled states based on admin color values
+const initializeDisabledStates = () => {
+  if (props.textItemIndex !== undefined && selectedGlobalTextStyles.value) {
+    toggleTextColor.value = selectedGlobalTextStyles.value?.style?.color ?? '';
+  }
+
+  isTextColorPickerDisabled.value = hasLogoColorVar(textColorValue.value);
+  isBackgroundColorPickerDisabled.value = hasLogoColorVar(
+    textBackgroundColorValue.value,
+  );
+};
+
 const textStyleTypeOptions = reactive([
   {
     value: undefined,
@@ -411,15 +610,177 @@ const selectedGlobalTextStyles = computed({
   set: (type: string) => styleSettingsStore.textStyles.textStyleOptions[type],
 });
 
+const isHyperlinkPopupOpen = ref(false);
+const selectedPage = ref('');
+const selectedLinkTypeValue = ref<HyperlinkType>(HYPERLINK_TYPE.url);
+
+const btnLinkOptions = computed(() => [
+  {
+    value: HYPERLINK_TYPE.url,
+    label: 'URL',
+    isSelected: selectedLinkTypeValue.value === HYPERLINK_TYPE.url,
+  },
+  {
+    value: HYPERLINK_TYPE.page,
+    label: 'Page',
+    isSelected: selectedLinkTypeValue.value === HYPERLINK_TYPE.page,
+    disabled: pageSettingsStore.pages.length <= 1,
+  },
+]);
+
+const selectedLinkType = computed({
+  get: (): HyperlinkType => selectedLinkTypeValue.value,
+  set: (type: HyperlinkType) => {
+    selectedLinkTypeValue.value = type;
+  },
+});
+
+const hyperlinkUrlValue = computed(() => hyperlinkValue.value?.value || '');
+const urlValidationSettings = computed(() => {
+  const urlValue = hyperlinkUrlValue.value;
+  const isValidUrl = !urlValue || URL_REG_EX.test(urlValue);
+
+  return {
+    isValid: isValidUrl,
+    errorMessage: isValidUrl ? '' : 'Please enter a valid URL',
+  };
+});
+
+const isAddLinkButtonDisabled = computed(() => {
+  if (selectedLinkType.value === HYPERLINK_TYPE.url) {
+    const urlValue = hyperlinkUrlValue.value;
+    // Check if URL is invalid OR doesn't have https protocol
+    const hasValidProtocol =
+      urlValue.startsWith('https://') || urlValue.startsWith('http://');
+    return (
+      !urlValue || !urlValidationSettings.value.isValid || !hasValidProtocol
+    );
+  }
+  return selectedLinkType.value === HYPERLINK_TYPE.page && !selectedPage.value;
+});
+
+const toggleTextColor = ref(props.styles.color ?? '');
+
+const textColorValue = computed(() => toggleTextColor.value);
+
+watch(
+  () => props.styles.color,
+  (newColor) => {
+    if (isAdmin.value) {
+      toggleTextColor.value = newColor ?? '';
+      isTextColorPickerDisabled.value = hasLogoColorVar(newColor ?? '');
+    }
+  },
+);
+
+const toggleTextBackgroundColor = ref(props.styles.backgroundColor ?? '');
+
+const textBackgroundColorValue = computed(
+  () => toggleTextBackgroundColor.value,
+);
+
+watch(
+  () => props.styles.backgroundColor,
+  (newColor) => {
+    if (isAdmin.value) {
+      toggleTextBackgroundColor.value = newColor ?? '';
+      isBackgroundColorPickerDisabled.value = hasLogoColorVar(newColor ?? '');
+    }
+  },
+);
+
+watch(
+  () =>
+    contentSettingStore.getItem(props.rawId)?.settings?.content?.textItemsStyle
+      ?.color,
+  (newColor) => {
+    if (isAdmin.value) {
+      if (props.textItemIndex !== undefined && selectedGlobalTextStyles) {
+        toggleTextColor.value =
+          selectedGlobalTextStyles.value.style.color ?? '';
+        isTextColorPickerDisabled.value = hasLogoColorVar(
+          selectedGlobalTextStyles.value.style.color ?? '',
+        );
+        contentSettingStore.updateTextItemTextStyleTypeWithStyles({
+          id: props.rawId,
+          name: props.name,
+          value: {
+            color: selectedGlobalTextStyles.value.style.color,
+          },
+          index: props.textItemIndex,
+        });
+      }
+    }
+  },
+);
+
+if (isAdmin.value) initializeDisabledStates();
+
 watch(
   () => props.styles.textStyleType,
   (newType) => {
     if (newType) {
       unsetAllMarks();
-      copyGlobalStyleSettings(
+      const globalStyle =
         styleSettingsStore.textStyles.textStyleOptions[newType ?? 'titles']
-          .style,
-      );
+          .style;
+      copyGlobalStyleSettings(globalStyle);
+
+      // syncing with admin global color match feature
+      if (isAdmin.value) {
+        if (
+          globalStyle.color &&
+          (globalStyle.color.includes(STYLE_THEME_KEYS.LogoTextColor) ||
+            globalStyle.color.includes(STYLE_THEME_KEYS.LogoTextMultiColor))
+        ) {
+          if (props.name === 'textItems') {
+            contentSettingStore.updateTextItemTextStyleTypeWithStyles({
+              id: props.rawId,
+              name: props.name,
+              value: {
+                color: globalStyle.color,
+                backgroundColor: undefined,
+              },
+              index: props.textItemIndex,
+            });
+          } else {
+            contentSettingStore.updateTextStyles({
+              id: props.rawId,
+              name: props.name,
+              value: {
+                color: globalStyle.color,
+                backgroundColor: undefined,
+              },
+            });
+          }
+          toggleTextColor.value = globalStyle.color;
+        } else {
+          isTextColorPickerDisabled.value = false;
+          isBackgroundColorPickerDisabled.value = false;
+          toggleTextColor.value = globalStyle.color ?? '';
+
+          if (props.name === 'textItems') {
+            contentSettingStore.updateTextItemTextStyleTypeWithStyles({
+              id: props.rawId,
+              name: props.name,
+              value: {
+                color: globalStyle.color ?? '',
+                backgroundColor: undefined,
+              },
+              index: props.textItemIndex,
+            });
+          } else {
+            contentSettingStore.updateTextStyles({
+              id: props.rawId,
+              name: props.name,
+              value: {
+                color: globalStyle.color ?? '',
+                backgroundColor: undefined,
+              },
+            });
+          }
+        }
+      }
     } else {
       // make sure text style options are updated and selected Global style is set to none
       if (selectedGlobalTextStyles.value) {
@@ -428,6 +789,18 @@ watch(
     }
   },
 );
+// Watch pages button should be disabled if no other pages and switch to URL if page type is selected but no pages available
+watch(
+  () => pageSettingsStore.pages.length,
+  (pagesCount) => {
+    if (
+      pagesCount <= 1 &&
+      selectedLinkTypeValue.value === HYPERLINK_TYPE.page
+    ) {
+      selectedLinkTypeValue.value = HYPERLINK_TYPE.url;
+    }
+  },
+);
 
 const onSelectTextStyleType = (option: ButtonGroupOption) => {
   textStyleTypeOptions.forEach((item) => {
@@ -490,10 +863,7 @@ const onSelectTextStyleType = (option: ButtonGroupOption) => {
   textStyleTypeDropdownRef.value?.hideMenu();
 };
 
-onMounted(() => {
-  setInitialStyleSettings();
-});
-
+// Event handlers for dropdowns and popups
 const clickOutsideTextStyle = (event: MouseEvent) => {
   const target = event.target as HTMLElement;
   if (!target.closest('.toolbar-editor-button')) {
@@ -501,24 +871,47 @@ const clickOutsideTextStyle = (event: MouseEvent) => {
   }
 };
 
+const clickOutsideFontStyle = (event: MouseEvent) => {
+  const target = event.target as HTMLElement;
+  if (!target.closest('.toolbar-editor-button')) {
+    fontStyleDropdownRef.value?.hideMenu();
+  }
+};
+
 const clickOutsideTextSpacing = (event: MouseEvent) => {
   const target = event.target as HTMLElement;
-  if (!target.closest('.spacing-popup-container')) {
+  if (!target.closest('.spacing-popup')) {
     isSpacingDropdownOpen.value = false;
   }
 };
 
-const clickOutsideFontStyle = (event: MouseEvent) => {
+const clickOutsideHyperlink = (event: MouseEvent) => {
   const target = event.target as HTMLElement;
-  if (!target.closest('.toolbar-editor-button')) {
-    fontStyleDropdownRef.value?.hideMenu();
+  if (!target.closest('.hyperlink-popup')) {
+    isHyperlinkPopupOpen.value = false;
   }
 };
 
+// Handle link type selection
+const onSelectLinkType = (option: ButtonGroupOption) => {
+  const isPageOption = option.value === HYPERLINK_TYPE.page;
+  const isDisabled = isPageOption && pageSettingsStore.pages.length <= 1;
+
+  if (!isDisabled) {
+    selectedLinkType.value = option.value as HyperlinkType;
+  }
+};
+
+onMounted(() => {
+  setInitialStyleSettings();
+});
+
 const onForceUpdate = () => {
   updateRichTextEditor.value = true;
 };
 
+const markedText = ref('');
+
 defineExpose({
   onForceUpdate,
 });
@@ -534,6 +927,12 @@ const {
   setInitialStyleSettings,
   copyGlobalStyleSettings,
   unsetAllMarks,
+  handleHyperlink,
+  hyperlinkValue,
+  setHyperlinkUrlValue,
+  shouldShow,
+  tippyOptions,
+  handleAdminColorChange,
 } = useRichTextEditor(
   model,
   props,
@@ -544,7 +943,84 @@ const {
   onSelectTextStyleType,
   updateRichTextEditor,
   textStyleTypeOptions,
+  markedText,
+  isHyperlinkPopupOpen,
 );
+
+const isExternalLink = computed(() => {
+  const href = editor.getAttributes('link').href;
+  return href && (href.startsWith('http://') || href.startsWith('https://'));
+});
+
+// Apply hyperlink based on selected type (page or URL)
+const applyHyperlink = () => {
+  const url =
+    selectedLinkType.value === HYPERLINK_TYPE.page
+      ? getPageUrl(selectedPage.value)
+      : hyperlinkValue.value?.value || '';
+
+  if (url) {
+    setHyperlinkUrlValue(url);
+    handleHyperlink('apply');
+  } else {
+    isHyperlinkPopupOpen.value = false;
+  }
+};
+
+// Generate page slug for internal page links
+const getPageUrl = (pageSlug: string): string => {
+  const page = pageSettingsStore.pages.find((p) => p.slug === pageSlug);
+  if (!page) return '';
+
+  return page.slug;
+};
+
+// Handle page selection from dropdown
+const onPageSelected = (obj: { id: string; name: string; value: string }) => {
+  selectedPage.value = obj.value;
+};
+
+// Find page by slug (matches page slug only)
+const findPageByUrl = (href: string) => {
+  return pageSettingsStore.pages.find((p) => {
+    return href === p.slug;
+  });
+};
+
+// Reset all hyperlink form values
+const resetHyperlinkValues = () => {
+  selectedPage.value = '';
+  setHyperlinkUrlValue('');
+  markedText.value = '';
+  selectedLinkTypeValue.value = HYPERLINK_TYPE.url;
+};
+
+const pageLinkEdit = (page: any) => {
+  selectedLinkType.value = HYPERLINK_TYPE.page;
+  selectedPage.value = page.slug;
+  handleHyperlink('toggle');
+};
+
+const urlLinkEdit = (linkHref?: string, text?: string) => {
+  selectedLinkType.value = HYPERLINK_TYPE.url;
+  handleHyperlink(
+    'toggle',
+    linkHref && text ? { href: linkHref, text } : undefined,
+  );
+};
+
+// Handle hyperlink editing - detects if link is internal page or external URL
+const onClickHyperlink = (href?: string, text?: string) => {
+  resetHyperlinkValues();
+  const linkHref = href || editor.getAttributes('link').href;
+
+  if (linkHref) {
+    const page = findPageByUrl(linkHref);
+    page ? pageLinkEdit(page) : urlLinkEdit(linkHref, text);
+  } else {
+    urlLinkEdit();
+  }
+};
 </script>
 
 <style scoped>
@@ -596,26 +1072,36 @@ const {
   font-family: 'Lato' !important;
 }
 
+::v-deep .ProseMirror a,
+::v-deep .ProseMirror a * {
+  color: #0097d7 !important;
+  text-decoration: underline !important;
+}
+
 .error-message {
   color: #d32f2f;
   font-size: 0.875rem;
   margin-top: 4px;
 }
 
-.spacing-popup-container {
-  @apply tw-absolute;
-  z-index: 9999;
+.popup-container {
+  @apply tw-absolute tw-z-10;
   right: 8%;
 }
 
-.spacing-popup-panel {
+.hyperlink-preview {
+  @apply tw-absolute;
+  z-index: 10;
+}
+
+.popup-panel {
   background: #fff;
   border: 1px solid #ccc;
   border-radius: 8px;
   padding: 18px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
 }
-.spacing-popup-panel ::v-deep input {
+.popup-panel ::v-deep input {
   border: 1px solid #ccc;
   border-radius: 8px;
 }
@@ -659,6 +1145,9 @@ const {
   ::v-deep .left-align {
     transform: translateX(-50%);
   }
+  .hyperlink-popup {
+    z-index: 9999;
+  }
 }
 
 @media (min-width: 400px) {