CustomTextEditor Component

File Information

• Path: app/components/dam/CustomTextEditor.vue
• Purpose: Lightweight rich-text editor built on document.execCommand. Provides bold, italic, underline, and hyperlink formatting for announcement body text.

Overview

CustomTextEditor renders a contenteditable div with a fixed toolbar. It intentionally avoids a third-party rich-text library to keep bundle size minimal — announcements only need basic formatting.

The component tracks active-state for each format (isBold, isItalic, isUnderline, isLink) using document.queryCommandState() on selectionchange events, so toolbar buttons update in real-time as the cursor moves.

Toolbar actions

Button	Behaviour
Bold	document.execCommand('bold')
Italic	document.execCommand('italic')
Underline	document.execCommand('underline')
Link	Opens inline URL popover; validates URL before inserting or removing the anchor

Link popover

Clicking the link icon opens a v-menu with a text field. The component:

1. Validates the URL format
2. On insert: wraps the current selection with document.execCommand('createLink', false, url)
3. On remove: calls document.execCommand('unlink')

Props

Prop	Type	Default	Description
modelValue	String	required	HTML content string (two-way via v-model)
disabled	Boolean	false	Disables all toolbar buttons and the editable area
placeholder	String	''	Placeholder text shown when the editor is empty

Events

Event	Payload	When
update:modelValue	string	User changes content in the editable area

Usage

<CustomTextEditor
  v-model="announcementBody"
  placeholder="Write your announcement..."
/>

Known Limitations

• document.execCommand is deprecated but still widely supported. A future migration to a proper ProseMirror/Tiptap editor is tracked in the backlog.
• Pasting rich HTML from external sources is not sanitized — the parent should strip unsafe tags before saving.

Related Documentation

• Announcements Feature — feature overview
• Announcement Dialog — the dialog that hosts this editor