Merge pull request #36 from CloudCannon/feat/file-based-url-options

Add new options to File and URL inputs

Author: georgephillips

src/inputs.d.ts

@@ -154,14 +154,14 @@ export interface TextInput extends BaseInput {
 	 * Sets an input type, which controls how this input appears and behaves.
 	 */
 	type:
-		| 'text'
-		| 'email'
-		| 'disabled'
-		| 'pinterest'
-		| 'facebook'
-		| 'twitter'
-		| 'github'
-		| 'instagram';
+	| 'text'
+	| 'email'
+	| 'disabled'
+	| 'pinterest'
+	| 'facebook'
+	| 'twitter'
+	| 'github'
+	| 'instagram';
 
 	/**
 	 * Options that are specific to this `type` of input.
@@ -314,40 +314,6 @@ export interface RangeInput extends BaseInput {
 	options?: RangeInputOptions;
 }
 
-export interface UrlInputOptions extends WithEmptyTypeText, WithPaths {
-	/**
-	 * Hides the option to link to a file. This does not prevent typing a file path in the input.
-	 *
-	 * @default false
-	 */
-	hide_link_to_file?: boolean;
-	/**
-	 * Hides the option to link to a page. This does not prevent typing a file's output URL in the
-	 * input.
-	 *
-	 * @default false
-	 */
-	hide_link_to_page?: boolean;
-	/**
-	 * Hides the option to link to an email address. This does not prevent typing a `mailto:` link in
-	 * the input.
-	 *
-	 * @default false
-	 */
-	hide_link_to_email_address?: boolean;
-}
-
-export interface UrlInput extends BaseInput {
-	/**
-	 * Sets an input type, which controls how this input appears and behaves.
-	 */
-	type: 'url';
-	/**
-	 * Options that are specific to this `type` of input.
-	 */
-	options?: UrlInputOptions;
-}
-
 export interface RichTextInputOptions extends WithEmptyTypeText, ImageResizeable, BlockEditable {
 	/**
 	 * Shows or hides the resize handler to vertically resize the input.
@@ -406,7 +372,7 @@ export interface TimeInput extends BaseInput {
 	options?: WithEmptyTypeText;
 }
 
-export interface FileInputOptions extends WithEmptyTypeText, WithPaths {
+export interface FileInputOptions extends WithEmptyTypeText, WithPaths, ImageResizeable {
 	/**
 	 * Restricts which file types are available to select or upload to this input. Accepted format is
 	 * an array or comma-separated string of MIME types. The special value '*' means any type is
@@ -418,30 +384,71 @@ export interface FileInputOptions extends WithEmptyTypeText, WithPaths {
 	 * sources can be uploaded to and selected from.
 	 */
 	allowed_sources?: string[];
+	/**
+	 * Disables the context menu option and the drop area for uploading files.
+	 *
+	 * @default false
+	 */
+	disable_upload_file?: boolean;
+	/**
+	 * Prevents typing into the text input, while still allowing context menu options to change the
+	 * value.
+	 *
+	 * @default false
+	 */
+	disable_direct_input?: boolean;
+	/**
+	 * Prevents file uploads inside the "Select existing file/image" file browser modal window.
+	 *
+	 * @default false
+	 */
+	disable_upload_file_in_file_browser?: boolean;
 }
 
 export interface FileInput extends BaseInput {
 	/**
 	 * Sets an input type, which controls how this input appears and behaves.
 	 */
-	type: 'file' | 'document';
+	type: 'file' | 'document' | 'image';
 	/**
-	 * Options that are specific to File inputs.
+	 * Options that are specific to File, Image and Document inputs.
 	 */
 	options?: FileInputOptions;
 }
 
-export type ImageInputOptions = FileInputOptions & ImageResizeable;
+export interface UrlInputOptions extends FileInputOptions {
+	/**
+	 * Hides the options to link to an existing file, and upload a new file. This does not prevent
+	 * typing a file path in the input.
+	 *
+	 * @default false
+	 */
+	hide_link_to_file?: boolean;
+	/**
+	 * Hides the option to link to a page. This does not prevent typing a file's output URL in the
+	 * input.
+	 *
+	 * @default false
+	 */
+	hide_link_to_page?: boolean;
+	/**
+	 * Hides the option to link to an email address. This does not prevent typing a `mailto:` link in
+	 * the input.
+	 *
+	 * @default false
+	 */
+	hide_link_to_email_address?: boolean;
+}
 
-export interface ImageInput extends BaseInput {
+export interface UrlInput extends BaseInput {
 	/**
 	 * Sets an input type, which controls how this input appears and behaves.
 	 */
-	type: 'image';
+	type: 'url';
 	/**
-	 * Options that are specific to Image inputs.
+	 * Options that are specific to URL inputs.
 	 */
-	options?: ImageInputOptions;
+	options?: UrlInputOptions;
 }
 
 export interface SelectInputOptions extends WithPreview, WithPickerPreview {
@@ -501,7 +508,7 @@ export interface MultiselectInput extends BaseInput {
 	options?: SelectInputOptions & WithEmptyTypeArray;
 }
 
-export interface ChoiceInputOptions extends Omit<SelectInputOptions, 'allow_create'> {}
+export interface ChoiceInputOptions extends Omit<SelectInputOptions, 'allow_create'> { }
 
 export interface ChoiceInput extends BaseInput {
 	/**
@@ -667,12 +674,11 @@ export type KnownInput =
 	| BooleanInput
 	| NumberInput
 	| RangeInput
-	| UrlInput
 	| RichTextInput
 	| DateInput
 	| TimeInput
 	| FileInput
-	| ImageInput
+	| UrlInput
 	| SelectInput
 	| MultiselectInput
 	| ChoiceInput

src/javascript-api.d.ts

@@ -1,6 +1,6 @@
 import type { Cascade } from './cascade';
 import type { SnippetConfig } from './snippets';
-import type { FileInput, ImageInput, RichTextInput } from './inputs';
+import type { FileInput, UrlInput, RichTextInput } from './inputs';
 
 export interface CloseCustomDataPanelOptions {
 	parentId: string;
@@ -17,12 +17,17 @@ export interface OpenCustomDataPanelOptions extends CloseCustomDataPanelOptions
 
 /**
  * Interface defining the public JavaScript API for interacting with CloudCannon's Visual Editor.
- * This API provides methods for managing content, handling file operations, and controlling the editor's state.
+ * This API provides methods for managing content, handling file operations, and controlling the
+ * editor's state.
  */
 export interface CloudCannonJavaScriptAPI {
-	/** Whether event handling is currently enabled */
+	/**
+	 * Whether event handling is currently enabled
+	 */
 	eventsEnabled: boolean;
-	/** Whether the API should be installed globally */
+	/**
+	 * Whether the API should be installed globally
+	 */
 	installGlobally: boolean;
 
 	/**
@@ -31,8 +36,7 @@ export interface CloudCannonJavaScriptAPI {
 	disableGlobalInstall(): void;
 
 	/**
-	 * Enables event handling for the API
-	 * This will also ensure the commit model is created
+	 * Enables event handling for the API This will also ensure the commit model is created
 	 */
 	enableEvents(): void;
 
@@ -42,26 +46,29 @@ export interface CloudCannonJavaScriptAPI {
 	disableEvents(): void;
 
 	/**
-	 * Refreshes the editor interface
-	 * Note: This has been replaced with a MutationObserver in editor-overlays-view
+	 * Refreshes the editor interface Note: This has been replaced with a MutationObserver in
+	 * editor-overlays-view
 	 */
 	refreshInterface(): void;
 
 	/**
 	 * Triggers an update event for a specific file
+	 *
 	 * @param sourcePath - The path of the file to update
 	 */
 	triggerUpdateEvent(sourcePath: string): void;
 
 	/**
 	 * Sets the loading state of the editor
+	 *
 	 * @param loadingData - Optional loading state message
 	 * @returns Promise that resolves when loading state is updated
 	 */
 	setLoading(loadingData: string | undefined): Promise<any>;
 
 	/**
 	 * Sets data for a specific field
+	 *
 	 * @param slug - The identifier of the field to set
 	 * @param value - The value to set
 	 * @returns Promise that resolves when the data is set
@@ -70,6 +77,7 @@ export interface CloudCannonJavaScriptAPI {
 
 	/**
 	 * Initiates editing of a specific field
+	 *
 	 * @param slug - The identifier of the field to edit
 	 * @param style - Optional style information
 	 * @param e - The mouse event that triggered the edit
@@ -78,28 +86,35 @@ export interface CloudCannonJavaScriptAPI {
 
 	/**
 	 * Opens a custom data panel for editing
+	 *
 	 * @param options - Configuration options for the panel
 	 * @returns Promise that resolves when the panel is opened
 	 */
 	openCustomDataPanel(options: OpenCustomDataPanelOptions): Promise<void>;
 
 	/**
 	 * Closes a custom data panel
+	 *
 	 * @param options - Configuration options for the panel to close
 	 * @returns Promise that resolves when the panel is closed
 	 */
 	closeCustomDataPanel(options: CloseCustomDataPanelOptions): Promise<void>;
 
 	/**
 	 * Uploads a file to the editor
+	 *
 	 * @param file - The file to upload
 	 * @param inputConfig - Optional configuration for the input
 	 * @returns Promise that resolves with the path of the uploaded file
 	 */
-	uploadFile(file: File, inputConfig: RichTextInput | ImageInput | FileInput | undefined): Promise<string | undefined>;
+	uploadFile(
+		file: File,
+		inputConfig: RichTextInput | UrlInput | FileInput | undefined,
+	): Promise<string | undefined>;
 
 	/**
 	 * Adds an item to an array field
+	 *
 	 * @param slug - The identifier of the array field
 	 * @param index - The position to insert at (null for end)
 	 * @param value - The value to insert
@@ -110,6 +125,7 @@ export interface CloudCannonJavaScriptAPI {
 
 	/**
 	 * Adds an item before a specific index in an array field
+	 *
 	 * @param slug - The identifier of the array field
 	 * @param index - The index to insert before
 	 * @param value - The value to insert
@@ -120,6 +136,7 @@ export interface CloudCannonJavaScriptAPI {
 
 	/**
 	 * Adds an item after a specific index in an array field
+	 *
 	 * @param slug - The identifier of the array field
 	 * @param index - The index to insert after
 	 * @param value - The value to insert
@@ -130,6 +147,7 @@ export interface CloudCannonJavaScriptAPI {
 
 	/**
 	 * Removes an item from an array field
+	 *
 	 * @param slug - The identifier of the array field
 	 * @param index - The index of the item to remove
 	 * @returns Promise that resolves when the item is removed
@@ -138,6 +156,7 @@ export interface CloudCannonJavaScriptAPI {
 
 	/**
 	 * Moves an item within an array field
+	 *
 	 * @param slug - The identifier of the array field
 	 * @param index - The current index of the item
 	 * @param toIndex - The target index for the item
@@ -147,34 +166,39 @@ export interface CloudCannonJavaScriptAPI {
 
 	/**
 	 * Gets the current value of the editor
+	 *
 	 * @param options - Optional configuration for the value retrieval
 	 * @returns Promise that resolves with the current value
 	 */
 	value(options?: { keepMarkdownAsHTML?: boolean }): Promise<string>;
 
 	/**
 	 * Claims a lock on a file
+	 *
 	 * @param sourcePath - Optional path of the file to lock
 	 * @returns Promise that resolves with the lock status
 	 */
 	claimLock(sourcePath?: string): Promise<{ readOnly: boolean }>;
 
 	/**
 	 * Releases a lock on a file
+	 *
 	 * @param sourcePath - Optional path of the file to unlock
 	 * @returns Promise that resolves with the lock status
 	 */
 	releaseLock(sourcePath?: string): Promise<{ readOnly: boolean }>;
 
 	/**
 	 * Gets prefetched files
+	 *
 	 * @returns Promise that resolves with a record of file blobs
 	 */
 	prefetchedFiles(): Promise<Record<string, Blob>>;
 
 	/**
 	 * Loads legacy Bookshop information
+	 *
 	 * @returns Promise that resolves with the Bookshop data
 	 */
 	loadLegacyBookshopInfo(): Promise<any>;
-}
+}