{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "article-editor-toolbar", "title": "Article Editor Toolbar", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/article-editor-toolbar/article-editor-toolbar.component.ts", "content": "// Medium and Substack style rich text formatting toolbar and article drafting canvas with\n// typography controls, syntax highlighted code blocks, callouts, and publishing drawer.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, inject, signal } from '@angular/core'\nimport {\n AlignCenter,\n AlignLeft,\n AlignRight,\n AlertTriangle,\n ArrowLeft,\n ArrowUpRight,\n Bold,\n Bookmark,\n BookOpen,\n Check,\n CheckCheck,\n ChevronDown,\n Cloud,\n Code,\n Copy,\n ExternalLink,\n Eye,\n FileCode,\n Heart,\n HelpCircle,\n ImageIcon,\n Info,\n Italic,\n Layers,\n Lightbulb,\n Link2,\n List,\n ListOrdered,\n LucideAngularModule,\n Maximize2,\n MessageSquare,\n Minus,\n MoreHorizontal,\n PenLine,\n Plus,\n Quote,\n Redo2,\n RotateCcw,\n Send,\n Share2,\n Sparkles,\n Strikethrough,\n Tag,\n Terminal,\n Type,\n Underline,\n Undo2,\n Upload,\n Volume2,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport type ArticleTextStyle = 'paragraph' | 'h1' | 'h2' | 'h3'\nexport type ArticleCalloutType = 'tip' | 'warning' | 'info'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-article-editor-toolbar, [ui-article-editor-toolbar]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiSeparatorComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n
\n
\n \n
\n
\n
\n \n
\n
\n {{ publicationName }}\n / Editor\n
\n
\n\n
\n\n \n @if (!isAutosaving()) {\n \n } @else {\n \n }\n {{ lastSavedText() }}\n Saved\n \n
\n\n \n \n\n \n
\n
\n \n \n \n \n \n \n
\n\n
\n\n \n \n {{ isPreviewMode() ? 'Edit Story' : 'Preview Article' }}\n \n\n \n \n Publish Story\n \n
\n
\n
\n\n \n @if (!isPreviewMode()) {\n
\n \n \n
\n
\n \n \n {{ styleLabel() }}\n \n \n\n @if (isStyleDropdownOpen()) {\n \n \n \n \n \n
\n }\n
\n\n
\n\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n\n \n
\n
\n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n
\n\n \n \n AI Assist\n \n
\n
\n
\n }\n\n \n
\n @if (isPublishedSuccess()) {\n \n
\n \n
\n

Story Live on The Engineering Digest

\n

URL: {{ canonicalUrl() }}

\n
\n
\n \n \n }\n\n
\n
\n \n \n {{ topicTag() }}\n \n\n @if (isPreviewMode()) {\n
\n \n \n {{ readerFontSize() === 'large' ? 'Standard text' : 'Larger text' }}\n \n
\n }\n
\n\n @if (!isPreviewMode()) {\n
\n \n
\n } @else {\n

{{ articleTitle() }}

\n }\n\n @if (!isPreviewMode()) {\n
\n \n
\n } @else {\n

{{ articleSubtitle() }}

\n }\n\n \n
\n
\n \n AR\n
\n
\n
\n {{ authorName }}\n {{ authorHandle }}\n @if (isPreviewMode()) {\n \n {{ isFollowing() ? 'Following' : 'Follow' }}\n \n }\n
\n

\n Published in {{ publicationName }} · Oct 24, 2024 ·\n {{ readingTimeMinutes() }} min read\n

\n
\n
\n\n
\n \n \n Listen\n \n \n \n \n \n \n \n
\n \n\n
\n\n \n
\n

\n For nearly a decade, the standard recipe for building a frontend design system was predictable: spin up a\n private or public npm monorepo, bundle fifty UI components with Rollup or Vite, and force every\n application team to install\n @acme/design-system\n as a heavyweight runtime dependency.\n

\n\n \n
\n
\n
\n @switch (calloutType()) {\n @case ('tip') {\n \n }\n @case ('warning') {\n \n }\n @default {\n \n }\n }\n
\n
\n
\n

{{ calloutTitle() }}

\n @if (!isPreviewMode()) {\n
\n \n \n \n
\n }\n
\n

\n When UI primitives are distributed via semver npm packages, updating a single button variant\n requires a patch release, a dependency bump, and a potential cascade of peer-dependency conflicts\n across twenty consuming micro-frontends.\n

\n
\n
\n
\n\n

\n 1. The \"Own Your Code\" Revolution\n

\n\n

\n The\n \n {{ linkText() }}\n \n inverts this dynamic completely. Instead of consuming a closed npm black box, developers pull atomic,\n clean TypeScript source files directly into their repository via CLI tools like\n shadcn-vue or\n uipkge.\n

\n\n \n
\n
\n
\n \n \n
\n\n
\n \n {{ activeCodeTab() === 'json' ? 'JSON' : 'BASH' }}\n \n \n @if (isCodeBlockCopied()) {\n \n } @else {\n \n }\n {{ isCodeBlockCopied() ? 'Copied' : 'Copy' }}\n \n
\n
\n\n
\n @if (activeCodeTab() === 'json') {\n 
{{ '{' }}{{ '\n  ' }}\"$schema\": \"https://uipkge.dev/schema.json\",{{ '\n  ' }}\"style\": \"new-york\",{{ '\n  ' }}\"rsc\": true,{{ '\n  ' }}\"aliases\": {{ '{' }}{{ '\n    ' }}\"components\": \"@/components/ui\",{{ '\n    ' }}\"utils\": \"@/lib/utils\",{{ '\n    ' }}\"blocks\": \"@/components/blocks\"{{ '\n  ' }}{{ '}' }}{{ '\n' }}{{ '}' }}
\n } @else {\n # Add rich article drafting block to your project{{ '\n' }}npx shadcn-vue@latest add https://uipkge.dev/r/vue/article-editor-toolbar.json -y\n }\n
\n
\n\n
\n

\n \"The component registry model inverts the dependency tree. Instead of depending on an external\n maintainer's release cadence, your team owns every line of component markup, adapting it to your\n product's exact accessibility and branding needs without vendor lock-in.\"\n

\n
\n — Guillermo Rauch, CEO at Vercel\n
\n
\n\n

\n 2. Core Architectural Advantages\n

\n\n

\n When evaluating the switch from packaged distributions to registry generation, teams consistently report\n three major velocity unlocks:\n

\n\n
    \n
  1. \n \n 1\n \n
    \n Zero Runtime Overhead:\n \n Unused component variants and dead code branches are automatically pruned during application\n tree-shaking.\n \n
    \n
    2. \n
  2. \n \n 2\n \n
    \n Direct Source Control:\n \n Audit, modify, and patch WCAG accessibility tags directly inside your repository without waiting for\n upstream PR merges.\n \n
    \n
    3. \n
  3. \n \n 3\n \n
    \n Native OKLCH Token Integration:\n \n Colors and elevation variables adapt directly across modern Tailwind CSS v4 design systems.\n \n
    \n
    4. \n
\n\n \n
\n \n
\n \n \n
\n

Unbundled Registry Architecture Flow

\n

\n Registry CLI pulls atomic SFC files directly into src/components/ui\n

\n
\n
\n Figure 1.0\n \n \n \n
\n
\n
\n

\n Figure 1: Monolithic npm package distribution vs. direct registry source ownership.\n

\n
\n \n\n
\n \n \n \n
\n\n

\n The shift from monolithic npm packages to unbundled UI registries is not just a tooling trend; it\n represents a fundamental re-alignment of software ownership, empowering engineering teams to build\n resilient interfaces that evolve with their product.\n

\n \n
\n\n @if (isPreviewMode()) {\n \n
\n
\n \n \n {{ clapCount() }}\n \n\n \n \n 24\n \n
\n\n
\n \n \n Bookmark\n \n \n Publish\n \n
\n
\n \n }\n
\n\n \n @if (isPublishModalOpen()) {\n
\n \n
\n
\n

Publish Story to Publication

\n

\n Configure publication metadata, topic tags, and newsletter distribution.\n

\n
\n \n \n \n
\n\n
\n
\n

{{ articleTitle() }}

\n

{{ articleSubtitle() }}

\n
\n Author: {{ authorName }}\n ·\n {{ wordCount() }} words\n ·\n {{ readingTimeMinutes() }} min read\n
\n
\n\n
\n \n
\n @for (tag of publishTags(); track tag) {\n \n {{ tag }}\n \n \n \n \n }\n \n
\n
\n\n
\n
\n \n {{ seoDescription().length }}/160\n
\n \n
\n\n
\n \n \n
\n\n
\n
\n

Broadcast to Subscribers

\n

\n Send as an instant newsletter email to 14,200 active readers.\n

\n
\n \n
\n\n
\n \n \n
\n
\n\n
\n \n Cancel\n \n \n
\n
\n \n }\n\n \n @if (isLinkModalOpen()) {\n
\n
\n
\n

Insert Hyperlink

\n

Add an external reference link

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n Apply Link\n \n
\n
\n
\n }\n\n \n @if (toastMessage()) {\n \n \n {{ toastMessage() }}\n \n }\n \n `,\n})\nexport class UiArticleEditorToolbarComponent {\n protected readonly AlignCenter = AlignCenter\n protected readonly AlignLeft = AlignLeft\n protected readonly AlignRight = AlignRight\n protected readonly AlertTriangle = AlertTriangle\n protected readonly ArrowLeft = ArrowLeft\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Bold = Bold\n protected readonly Bookmark = Bookmark\n protected readonly BookOpen = BookOpen\n protected readonly Check = Check\n protected readonly CheckCheck = CheckCheck\n protected readonly ChevronDown = ChevronDown\n protected readonly Cloud = Cloud\n protected readonly Code = Code\n protected readonly Copy = Copy\n protected readonly ExternalLink = ExternalLink\n protected readonly Eye = Eye\n protected readonly FileCode = FileCode\n protected readonly Heart = Heart\n protected readonly HelpCircle = HelpCircle\n protected readonly ImageIcon = ImageIcon\n protected readonly Info = Info\n protected readonly Italic = Italic\n protected readonly Layers = Layers\n protected readonly Lightbulb = Lightbulb\n protected readonly Link2 = Link2\n protected readonly List = List\n protected readonly ListOrdered = ListOrdered\n protected readonly Maximize2 = Maximize2\n protected readonly MessageSquare = MessageSquare\n protected readonly Minus = Minus\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly PenLine = PenLine\n protected readonly Plus = Plus\n protected readonly Quote = Quote\n protected readonly Redo2 = Redo2\n protected readonly RotateCcw = RotateCcw\n protected readonly Send = Send\n protected readonly Share2 = Share2\n protected readonly Sparkles = Sparkles\n protected readonly Strikethrough = Strikethrough\n protected readonly Tag = Tag\n protected readonly Terminal = Terminal\n protected readonly Type = Type\n protected readonly Underline = Underline\n protected readonly Undo2 = Undo2\n protected readonly Upload = Upload\n protected readonly Volume2 = Volume2\n protected readonly X = X\n\n @Input('class') className?: string\n\n // View Mode\n readonly isPreviewMode = signal(false)\n\n // Story Content State\n readonly articleTitle = signal('The Death of the Monolithic Component Package')\n readonly articleSubtitle = signal('Why the unbundled registry architecture is replacing npm packages for UI systems.')\n readonly topicTag = signal('Architecture & UI')\n readonly authorName = 'Alex Rivera'\n readonly authorHandle = '@arivera_eng'\n readonly publicationName = 'The Engineering Digest'\n readonly lastSavedText = signal('Draft Saved 2m ago')\n readonly isAutosaving = signal(false)\n\n // Reader Engagement State\n readonly clapCount = signal(342)\n readonly isBookmarked = signal(false)\n readonly isFollowing = signal(false)\n readonly readerFontSize = signal<'normal' | 'large'>('normal')\n\n // Toolbar Formatter State\n readonly activeTextStyle = signal('paragraph')\n readonly isStyleDropdownOpen = signal(false)\n readonly isBoldActive = signal(false)\n readonly isItalicActive = signal(false)\n readonly isUnderlineActive = signal(false)\n readonly isStrikeActive = signal(false)\n readonly isInlineCodeActive = signal(false)\n\n // Active Block Elements in Canvas\n readonly calloutType = signal('tip')\n readonly isCodeBlockCopied = signal(false)\n readonly activeCodeTab = signal<'json' | 'bash'>('json')\n\n // Modals / Drawers\n readonly isPublishModalOpen = signal(false)\n readonly isLinkModalOpen = signal(false)\n readonly isPublishedSuccess = signal(false)\n readonly linkUrl = signal('https://uipkge.dev')\n readonly linkText = signal('unbundled registry architecture')\n\n // Publish Settings State\n readonly publishTags = signal(['Web Development', 'Design Systems', 'Vue', 'React', 'Frontend'])\n readonly newTagInput = signal('')\n readonly canonicalUrl = signal('https://theengineeringdigest.io/p/unbundled-ui-registries')\n readonly seoDescription = signal(\n 'A deep dive into why unbundled UI component registries like shadcn and uipkge are displacing monolithic npm component libraries across engineering teams.',\n )\n readonly sendNewsletter = signal(true)\n readonly publishSchedule = signal<'now' | 'schedule'>('now')\n\n // Toast Feedback\n readonly toastMessage = signal(null)\n private toastTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.toastTimer))\n }\n\n get rootClass(): string {\n return cn('bg-background text-foreground min-h-screen', this.className)\n }\n\n wordCount(): number {\n const fullText = `${this.articleTitle()} ${this.articleSubtitle()} For nearly a decade the standard recipe for building a frontend design system was predictable spin up a private or public npm monorepo bundle fifty UI components with Rollup or Vite and force every application team to install as a heavyweight runtime dependency The component registry model inverts this entire dynamic Instead of consuming a closed npm black box developers pull atomic clean TypeScript source files directly into their repository Zero Runtime Overhead Direct Accessibility Ownership Native Token Sync`\n return fullText.trim().split(/\\s+/).filter(Boolean).length + 1380\n }\n\n readingTimeMinutes(): number {\n return Math.max(1, Math.ceil(this.wordCount() / 220))\n }\n\n get previewToggleClass(): string {\n return cn(\n 'h-8 gap-1.5 text-xs font-medium',\n this.isPreviewMode() && 'bg-secondary text-secondary-foreground border-primary/40',\n )\n }\n\n get bookmarkClass(): string {\n return cn('text-muted-foreground hover:text-foreground size-8', this.isBookmarked() && 'text-primary')\n }\n\n get readerFontToggleClass(): string {\n return cn('text-muted-foreground h-7 text-xs', this.readerFontSize() === 'large' && 'bg-muted text-foreground')\n }\n\n get previewTitleClass(): string {\n return cn(\n 'text-foreground text-3xl leading-tight font-bold tracking-tight sm:text-4xl lg:text-5xl',\n this.readerFontSize() === 'large' && 'text-4xl sm:text-5xl lg:text-6xl',\n )\n }\n\n get previewSubtitleClass(): string {\n return cn(\n 'text-muted-foreground text-lg leading-relaxed font-normal sm:text-xl',\n this.readerFontSize() === 'large' && 'text-xl sm:text-2xl',\n )\n }\n\n get proseClass(): string {\n return cn(\n 'text-foreground space-y-6 leading-relaxed',\n this.readerFontSize() === 'large' ? 'text-lg sm:text-xl' : 'text-base sm:text-lg',\n )\n }\n\n get calloutClass(): string {\n return cn(\n 'my-8 rounded-xl border p-4.5 transition-colors sm:p-5',\n this.calloutType() === 'tip'\n ? 'text-foreground border-warning/30 bg-warning/10'\n : this.calloutType() === 'warning'\n ? 'text-foreground border-destructive/30 bg-destructive/10'\n : 'text-foreground border-info/30 bg-info/10',\n )\n }\n\n calloutTitle(): string {\n const t = this.calloutType()\n return t === 'tip'\n ? 'Key Architectural Takeaway'\n : t === 'warning'\n ? 'Dependency Fragility Warning'\n : 'Registry Distribution Note'\n }\n\n calloutTabClass(type: ArticleCalloutType): string {\n return cn(\n 'text-muted-foreground hover:text-foreground min-h-6 rounded px-1.5 py-0.5 text-xs',\n this.calloutType() === type && 'text-foreground font-semibold',\n )\n }\n\n codeTabClass(tab: 'json' | 'bash'): string {\n return cn(\n 'flex min-h-6 items-center gap-1.5 rounded px-2 py-1 text-xs font-medium transition-colors',\n this.activeCodeTab() === tab ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n styleLabel(): string {\n const s = this.activeTextStyle()\n return s === 'paragraph' ? 'Normal Text' : s.toUpperCase()\n }\n\n styleOptionClass(style: ArticleTextStyle): string {\n return cn(\n 'hover:bg-muted flex w-full items-center justify-between rounded-md px-2.5 py-1.5 text-left text-xs transition-colors',\n this.activeTextStyle() === style ? 'text-primary bg-muted/60 font-semibold' : 'text-popover-foreground',\n )\n }\n\n inlineToggleClass(active: boolean, activeClass: string): string {\n return cn('size-8', active ? activeClass : 'text-muted-foreground hover:text-foreground')\n }\n\n showToast(msg: string): void {\n clearTimeout(this.toastTimer)\n this.toastMessage.set(msg)\n this.toastTimer = setTimeout(() => this.toastMessage.set(null), 3000)\n }\n\n triggerManualSave(): void {\n this.isAutosaving.set(true)\n this.lastSavedText.set('Saving changes...')\n setTimeout(() => {\n this.isAutosaving.set(false)\n this.lastSavedText.set('Draft Saved just now')\n this.showToast('All draft changes saved to cloud.')\n }, 600)\n }\n\n handleAddTag(): void {\n const trimmed = this.newTagInput().trim()\n if (trimmed && !this.publishTags().includes(trimmed)) {\n this.publishTags.update((prev) => [...prev, trimmed])\n this.newTagInput.set('')\n }\n }\n\n handleAddTagFromKeyboard(event: Event): void {\n event.preventDefault()\n this.handleAddTag()\n }\n\n handleRemoveTag(tagToRemove: string): void {\n this.publishTags.update((prev) => prev.filter((t) => t !== tagToRemove))\n }\n\n copyCodeSnippet(): void {\n this.isCodeBlockCopied.set(true)\n this.showToast('Code snippet copied to clipboard!')\n setTimeout(() => this.isCodeBlockCopied.set(false), 2000)\n }\n\n handlePublish(): void {\n this.isPublishModalOpen.set(false)\n this.isPublishedSuccess.set(true)\n this.showToast('🎉 Story published successfully to The Engineering Digest!')\n }\n\n setCalloutType(type: ArticleCalloutType): void {\n this.calloutType.set(type)\n }\n\n insertCallout(type: ArticleCalloutType): void {\n this.calloutType.set(type)\n this.showToast(`Applied ${type.toUpperCase()} callout formatting.`)\n }\n\n cycleCallout(): void {\n const current = this.calloutType()\n this.insertCallout(current === 'tip' ? 'warning' : current === 'warning' ? 'info' : 'tip')\n }\n\n pickTextStyle(style: ArticleTextStyle): void {\n this.activeTextStyle.set(style)\n this.isStyleDropdownOpen.set(false)\n }\n\n toggleBold(): void {\n const next = !this.isBoldActive()\n this.isBoldActive.set(next)\n this.showToast(next ? 'Bold applied' : 'Bold removed')\n }\n\n toggleItalic(): void {\n const next = !this.isItalicActive()\n this.isItalicActive.set(next)\n this.showToast(next ? 'Italic applied' : 'Italic removed')\n }\n\n toggleUnderline(): void {\n const next = !this.isUnderlineActive()\n this.isUnderlineActive.set(next)\n this.showToast(next ? 'Underline applied' : 'Underline removed')\n }\n\n toggleStrike(): void {\n this.isStrikeActive.update((v) => !v)\n this.showToast('Strikethrough toggled')\n }\n\n toggleInlineCode(): void {\n this.isInlineCodeActive.update((v) => !v)\n this.showToast('Inline code toggled')\n }\n\n toggleBookmark(): void {\n const next = !this.isBookmarked()\n this.isBookmarked.set(next)\n this.showToast(next ? 'Saved to bookmarks' : 'Removed from bookmarks')\n }\n\n toggleFollow(): void {\n const next = !this.isFollowing()\n this.isFollowing.set(next)\n this.showToast(next ? 'Following Alex Rivera' : 'Unfollowed')\n }\n\n toggleReaderFontSize(): void {\n this.readerFontSize.update((v) => (v === 'normal' ? 'large' : 'normal'))\n }\n\n clap(): void {\n this.clapCount.update((v) => v + 1)\n this.showToast(`Clapped! (${this.clapCount()} claps total)`)\n }\n\n handleAiAssist(): void {\n this.showToast('✨ AI polished paragraph for conciseness and punchy cadence.')\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/article-editor-toolbar/article-editor-toolbar.component.ts" }, { "path": "packages/registry-angular/blocks/article-editor-toolbar/index.ts", "content": "export {\n UiArticleEditorToolbarComponent,\n type ArticleCalloutType,\n type ArticleTextStyle,\n} from './article-editor-toolbar.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/article-editor-toolbar/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "Medium and Substack style rich text formatting toolbar and article drafting canvas with typography controls, syntax highlighted code blocks, callouts, and publishing drawer.", "categories": [ "media", "app", "content" ] }