From 98556e8176b24ec56268b2d4c2446196f80d964e Mon Sep 17 00:00:00 2001
From: Nathan Woodhull <woodhull@gmail.com>
Date: Mon, 20 Jan 2025 22:38:49 -0500
Subject: [PATCH] Allow consumers of core to set their own default placeholder
 URL

---
 packages/core/src/editor/components/ui/link-input-popover.tsx | 4 +++-
 packages/core/src/editor/index.tsx                            | 3 +++
 packages/core/src/editor/nodes/button/button-label-input.tsx  | 4 +++-
 packages/core/src/editor/provider.tsx                         | 4 ++++
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/editor/components/ui/link-input-popover.tsx b/packages/core/src/editor/components/ui/link-input-popover.tsx
index ead6a12..d4beda1 100644
--- a/packages/core/src/editor/components/ui/link-input-popover.tsx
+++ b/packages/core/src/editor/components/ui/link-input-popover.tsx
@@ -10,6 +10,7 @@ import { BaseButton } from '../base-button';
 import { useRef, useState } from 'react';
 import { Tooltip, TooltipTrigger, TooltipContent } from './tooltip';
 import {
+  DEFAULT_PLACEHOLDER_URL,
   DEFAULT_RENDER_VARIABLE_FUNCTION,
   DEFAULT_VARIABLE_TRIGGER_CHAR,
   useMailyContext,
@@ -59,6 +60,7 @@ export function LinkInputPopover(props: LinkInputPopoverProps) {
     variables = [],
     variableTriggerCharacter = DEFAULT_VARIABLE_TRIGGER_CHAR,
     renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION,
+    placeholderUrl = DEFAULT_PLACEHOLDER_URL
   } = useMailyContext();
 
   const autoCompleteOptions = useMemo(() => {
@@ -189,7 +191,7 @@ export function LinkInputPopover(props: LinkInputPopoverProps) {
                   }}
                   autoCompleteOptions={autoCompleteOptions}
                   ref={linkInputRef}
-                  placeholder="maily.to/"
+                  placeholder={placeholderUrl}
                   className="-mly-ms-px mly-block mly-h-8 mly-w-52 mly-rounded-lg mly-rounded-s-none mly-border mly-border-gray-300 mly-px-2 mly-py-1.5 mly-pr-6 mly-text-sm mly-shadow-sm mly-outline-none placeholder:mly-text-gray-400"
                   triggerChar={variableTriggerCharacter}
                   onSelectOption={(value) => {
diff --git a/packages/core/src/editor/index.tsx b/packages/core/src/editor/index.tsx
index ab66906..47df9d8 100644
--- a/packages/core/src/editor/index.tsx
+++ b/packages/core/src/editor/index.tsx
@@ -15,6 +15,7 @@ import { TextBubbleMenu } from './components/text-menu/text-bubble-menu';
 import { extensions as defaultExtensions } from './extensions';
 import { DEFAULT_SLASH_COMMANDS } from './extensions/slash-command/default-slash-commands';
 import {
+  DEFAULT_PLACEHOLDER_URL,
   DEFAULT_RENDER_VARIABLE_FUNCTION,
   DEFAULT_VARIABLE_TRIGGER_CHAR,
   DEFAULT_VARIABLES,
@@ -63,6 +64,7 @@ export function Editor(props: EditorProps) {
     blocks = DEFAULT_SLASH_COMMANDS,
     variableTriggerCharacter = DEFAULT_VARIABLE_TRIGGER_CHAR,
     renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION,
+    placeholderUrl = DEFAULT_PLACEHOLDER_URL
   } = props;
 
   let formattedContent: any = null;
@@ -136,6 +138,7 @@ export function Editor(props: EditorProps) {
       blocks={blocks}
       variableTriggerCharacter={variableTriggerCharacter}
       renderVariable={renderVariable}
+      placeholderUrl={placeholderUrl}
     >
       <div
         className={cn('mly-editor mly-antialiased', wrapClassName)}
diff --git a/packages/core/src/editor/nodes/button/button-label-input.tsx b/packages/core/src/editor/nodes/button/button-label-input.tsx
index ff45810..187a6c5 100644
--- a/packages/core/src/editor/nodes/button/button-label-input.tsx
+++ b/packages/core/src/editor/nodes/button/button-label-input.tsx
@@ -1,5 +1,6 @@
 import { InputAutocomplete } from '@/editor/components/ui/input-autocomplete';
 import {
+  DEFAULT_PLACEHOLDER_URL,
   DEFAULT_RENDER_VARIABLE_FUNCTION,
   DEFAULT_VARIABLE_TRIGGER_CHAR,
   useMailyContext,
@@ -29,6 +30,7 @@ export function ButtonLabelInput(props: ButtonLabelInputProps) {
     variables = [],
     variableTriggerCharacter = DEFAULT_VARIABLE_TRIGGER_CHAR,
     renderVariable = DEFAULT_RENDER_VARIABLE_FUNCTION,
+    placeholderUrl = DEFAULT_PLACEHOLDER_URL,
   } = useMailyContext();
 
   const autoCompleteOptions = useMemo(() => {
@@ -75,7 +77,7 @@ export function ButtonLabelInput(props: ButtonLabelInputProps) {
           }}
           autoCompleteOptions={autoCompleteOptions}
           ref={linkInputRef}
-          placeholder="maily.to/"
+          placeholder={placeholderUrl}
           className="mly-h-7 mly-w-40 mly-rounded-md mly-px-2 mly-pr-6 mly-text-sm mly-text-midnight-gray hover:mly-bg-soft-gray focus:mly-bg-soft-gray focus:mly-outline-none"
           triggerChar={variableTriggerCharacter}
           onSelectOption={(value) => {
diff --git a/packages/core/src/editor/provider.tsx b/packages/core/src/editor/provider.tsx
index 96cd376..eeeb29f 100644
--- a/packages/core/src/editor/provider.tsx
+++ b/packages/core/src/editor/provider.tsx
@@ -37,12 +37,15 @@ export type RenderVariableFunction = (
   opts: RenderVariableOptions
 ) => JSX.Element | null;
 
+export const DEFAULT_PLACEHOLDER_URL = 'maily.to/'
+
 export const DEFAULT_VARIABLE_TRIGGER_CHAR = '@';
 export const DEFAULT_VARIABLES: Variables = [];
 export const DEFAULT_RENDER_VARIABLE_FUNCTION: RenderVariableFunction =
   DefaultRenderVariable;
 
 export type MailyContextType = {
+  placeholderUrl?: string
   variableTriggerCharacter?: string;
   variables?: Variables;
   blocks?: BlockItem[];
@@ -50,6 +53,7 @@ export type MailyContextType = {
 };
 
 export const MailyContext = createContext<MailyContextType>({
+  placeholderUrl: DEFAULT_PLACEHOLDER_URL,
   variableTriggerCharacter: DEFAULT_VARIABLE_TRIGGER_CHAR,
   variables: DEFAULT_VARIABLES,
   blocks: DEFAULT_SLASH_COMMANDS,