SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity
openpencil/packages/docs/user-guide/text-editing.md

95 lines
4.6 KiB
Markdown
Raw Normal View History

Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
---
title: Text Editing
description: Creating and editing text with rich formatting, fonts, and inline editing in OpenPencil.
---
# Text Editing
Create text nodes and edit them directly on the canvas with full rich text support.
## Creating Text
Use <kbd> for keyboard shortcuts across all docs Wrap all keyboard shortcut references in <kbd> tags in user guide, reference, and development docs across all 7 locales (en, de, es, fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
Press <kbd>T</kbd> to activate the text tool, then click on the canvas. An empty text node appears with a blinking cursor — start typing immediately.
Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Inline Editing
Double-click any existing text node to enter inline editing mode. A blue outline appears around the text to indicate edit mode. Click outside the text node to commit and exit editing.
Remove implementation details from user guide Replace internal references (Yoga, CanvasKit, Paragraph API, style runs, characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit, Local Font Access API, COMPONENT type, override key format, hex codes, px specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
Text is rendered directly on the canvas — there's no separate text input overlay.
Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Cursor Navigation
| Action | Mac | Windows / Linux |
|--------|-----|-----------------|
Use <kbd> for keyboard shortcuts across all docs Wrap all keyboard shortcut references in <kbd> tags in user guide, reference, and development docs across all 7 locales (en, de, es, fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
| Move left/right | <kbd>←</kbd> / <kbd>→</kbd> | <kbd>←</kbd> / <kbd>→</kbd> |
| Move up/down | <kbd>↑</kbd> / <kbd>↓</kbd> | <kbd>↑</kbd> / <kbd>↓</kbd> |
| Move by word | <kbd>⌥</kbd><kbd>←</kbd> / <kbd>⌥</kbd><kbd>→</kbd> | <kbd>Ctrl</kbd> + <kbd>←</kbd> / <kbd>Ctrl</kbd> + <kbd>→</kbd> |
| Move to line start/end | <kbd>⌘</kbd><kbd>←</kbd> / <kbd>⌘</kbd><kbd>→</kbd> | <kbd>Home</kbd> / <kbd>End</kbd> |
Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
Use <kbd> for keyboard shortcuts across all docs Wrap all keyboard shortcut references in <kbd> tags in user guide, reference, and development docs across all 7 locales (en, de, es, fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
Hold <kbd>Shift</kbd> with any movement key to extend the selection.
Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Text Selection
- **Click** inside a text node to position the cursor
- **Click + drag** to select a range of text
- **Double-click** a word to select it
- **Triple-click** to select all text in the node
## Rich Text Formatting
Apply formatting to selected text, or toggle the style for the entire node when nothing is selected.
| Action | Mac | Windows / Linux |
|--------|-----|-----------------|
Use <kbd> for keyboard shortcuts across all docs Wrap all keyboard shortcut references in <kbd> tags in user guide, reference, and development docs across all 7 locales (en, de, es, fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
| Bold | <kbd>⌘</kbd><kbd>B</kbd> | <kbd>Ctrl</kbd> + <kbd>B</kbd> |
| Italic | <kbd>⌘</kbd><kbd>I</kbd> | <kbd>Ctrl</kbd> + <kbd>I</kbd> |
| Underline | <kbd>⌘</kbd><kbd>U</kbd> | <kbd>Ctrl</kbd> + <kbd>U</kbd> |
Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
Use <kbd> for keyboard shortcuts across all docs Wrap all keyboard shortcut references in <kbd> tags in user guide, reference, and development docs across all 7 locales (en, de, es, fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
Strikethrough is available via the **S** toggle button in the Typography section of the properties panel (no keyboard shortcut — <kbd>⌘</kbd><kbd>S</kbd> is used for Save).
Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
Remove implementation details from user guide Replace internal references (Yoga, CanvasKit, Paragraph API, style runs, characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit, Local Font Access API, COMPONENT type, override key format, hex codes, px specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
Formatting is applied per character. When you type between a bold and regular segment, the new text inherits the style of the preceding segment.
Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
The **B / I / U / S** toggle buttons in the Typography section of the properties panel also apply formatting.
## Editing Operations
| Action | Mac | Windows / Linux |
|--------|-----|-----------------|
Use <kbd> for keyboard shortcuts across all docs Wrap all keyboard shortcut references in <kbd> tags in user guide, reference, and development docs across all 7 locales (en, de, es, fr, it, pl, ru). Tables, inline prose, and parenthetical hints.
2026-03-08 09:48:02 +00:00
| Delete word before cursor | <kbd>⌥</kbd><kbd>⌫</kbd> | <kbd>Ctrl</kbd> + <kbd>Backspace</kbd> |
| Delete to line start | <kbd>⌘</kbd><kbd>⌫</kbd> | — |
| Cut | <kbd>⌘</kbd><kbd>X</kbd> | <kbd>Ctrl</kbd> + <kbd>X</kbd> |
| Copy | <kbd>⌘</kbd><kbd>C</kbd> | <kbd>Ctrl</kbd> + <kbd>C</kbd> |
| Paste | <kbd>⌘</kbd><kbd>V</kbd> | <kbd>Ctrl</kbd> + <kbd>V</kbd> |
Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Font Picker
Open the font picker in the Typography section of the properties panel to change the font family. The picker features:
- **Search filter** — type to narrow the font list
- **Font preview** — each font name is rendered in its own typeface
- **Virtual scroll** — handles large font lists efficiently
- **Scroll-to-current** — the current font is highlighted when the picker opens
## Font Weight
Remove implementation details from user guide Replace internal references (Yoga, CanvasKit, Paragraph API, style runs, characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit, Local Font Access API, COMPONENT type, override key format, hex codes, px specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
Change the font weight in the Typography section of the properties panel. Available weights depend on the selected font family (e.g., Regular, Medium, Bold, Black).
Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Font Sources
- **Default font** — Inter is loaded automatically
docs: explain font substitution diagnostics - Document the missing-font banner, active substitutions, retry flow, and font source behavior in every maintained user guide - Add list_available_fonts and get_font_status to the MCP tool reference and replace stale exact tool counts with a durable 100+ description
2026-08-13 17:26:25 +00:00
- **Desktop app** — system fonts plus enabled Google Fonts, Fontsource, Bunny Fonts, and Fontshare catalogs
- **Browser** — system fonts are available in Chrome and Edge; online font catalogs require the desktop app
- **Downloaded fonts** — the desktop app caches downloaded faces for reuse on the same machine
## Missing Fonts and Substitutions
When a requested family or style cannot be loaded, OpenPencil displays a warning above the editor instead of silently treating fallback rendering as faithful typography.
Expand the warning to see every affected face and its active substitute. Use **Select layers** to locate all affected text nodes or **Retry fonts** after changing network access, local-font permission, or provider settings. A style may be synthesized from another loaded face in the same family; a missing family falls back to Inter when available.
Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
## Tips
- The font list is preloaded at startup so the picker opens without delay.
Remove implementation details from user guide Replace internal references (Yoga, CanvasKit, Paragraph API, style runs, characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit, Local Font Access API, COMPONENT type, override key format, hex codes, px specs) with user-facing language across all 7 locales.
2026-03-08 09:55:25 +00:00
- IME input (Chinese, Japanese, Korean) is fully supported.
- Rich text formatting is preserved when opening and saving .fig files.
Add User Guide section with 11 articles derived from OpenSpec specs New docs/user-guide/ section covering: canvas navigation, selection & manipulation, drawing shapes, text editing, pen tool, layers & pages, context menu, exporting, auto-layout, components, and variables. Each article includes Mac+Win/Linux shortcuts tables, cross-platform note, cross-links between related articles, and consistent structure. VitePress sidebar updated with User Guide as first group (12 entries).
2026-03-01 10:02:47 +00:00
- See [Components](./components) for how text overrides work in component instances.
Reference in a new issue Copy permalink