Text and Styling

// Pane ID
PANE_IDS.Text

// packages/story-editor/src/components/library/panes/text/textPresets.ts
interface TextPreset {
  type: 'text';
  fontSize: number;
  fontFamily: string;
  fontWeight: number;
  color: Color;
  // ... other styling properties
}

import { useInsertTextSet } from './useInsertTextSet';

const { insertTextSet } = useInsertTextSet();

// Insert a pre-designed text set
insertTextSet(textSetData);

<StylePanel selectedElements={selectedTextElements}>
  <FontControls />
  <ColorControls />
  <StyleControls />
  <BackgroundColorControls />
  <PaddingControls />
  <StylePresets />
</StylePanel>

import { FontPicker } from '@googleforcreators/design-system';

<FontPicker
  value={currentFont}
  onChange={handleFontChange}
  fonts={availableFonts}
/>

<FontProvider>
  {/* Editor components */}
</FontProvider>

<StoryFontPicker />

<ColorControls
  selectedElements={elements}
  onChange={handleColorChange}
/>

import { Eyedropper } from '../eyedropper';

<Eyedropper onSelect={handleColorSelect} />

<BackgroundColorControls
  selectedElements={elements}
  onChange={handleBackgroundChange}
/>

<PaddingControls
  selectedElements={elements}
  onChange={handlePaddingChange}
/>

<AlignmentControls
  value={alignment}
  onChange={setAlignment}
/>

<StylePresets
  selectedElements={elements}
  onApply={handleApplyPreset}
/>

import { getPagesWithFailedContrast } from '../../checklist';

const failedElements = await getPagesWithFailedContrast([page], pageSize);

<Warning>
  {ACCESSIBILITY_COPY.lowContrast}
</Warning>

<TextAccessibilityPanel selectedElement={textElement} />

<StyleControls
  selectedElements={elements}
  onChange={handleStyleChange}
/>

<FontPreview
  font={fontFamily}
  size={fontSize}
  weight={fontWeight}
/>

const { insertPreset } = useInsertPreset();

// Insert a text preset onto the canvas
insertPreset(presetConfig);

<StyleManager>
  {/* Color preset management */}
</StyleManager>

const { dropdownHighlight, colorHighlight } = useHighlights((state) => ({
  dropdownHighlight: state[states.Font],
  colorHighlight: state[states.TextColor],
}));

import { getUpdatedSizeAndPosition } from '../../../utils/getUpdatedSizeAndPosition';

// Automatically adjust size/position when text changes
usePresubmitHandler(getUpdatedSizeAndPosition, []);

<TextIcon />