mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-03 10:37:48 +09:00
Oleg Isonen
99371187dc
## Summary - move the complete GitBook documentation tree and assets into Builder under `/docs` - generate the exhaustive MCP page from the local CLI source in the same change - publish GitBook from a release-gated `docs` branch containing the exact successfully released revision - run MCP documentation tests, typechecking, and stale-output checks with the existing generated-docs check - remove links to the Community Discussions repository ## Technical choices - Import the current documentation as a linear snapshot so the branch satisfies Builder's required-linear-history protection. - Keep the Markdown wrapper separate from the TypeScript generator at `scripts/docs/mcp-page.md`. - Generate through `packages/cli/local.js` so CLI guidance and its documentation are reviewed together. - Let `check:generated-docs` reject CLI changes that leave the committed MCP page stale. - After both GitHub release creation and package publication succeed, fast-forward the read-only `docs` branch to the immutable release tag commit. A divergent update fails instead of publishing a different revision. - Configure GitBook to publish `/docs` from the `docs` branch, not directly from `main`. - Exclude `/docs` from the repository-wide `oxfmt` scan so imported GitBook Markdown retains its established formatting; generator tests and stale-output checks still validate the MCP page. - Exclude `transcripts/` and GitHub Discussions from the migration. ## Todo - [x] Import documentation, navigation, includes, and assets under `/docs`. - [x] Generate the MCP page from the local CLI source. - [x] Move MCP generation and validation into Builder. - [x] Require MCP documentation updates alongside CLI changes. - [x] Publish released revisions through a read-only `docs` branch. - [x] Remove Community repository links from Builder and the migrated docs. - [x] Preserve and verify a final Community Git bundle locally. - [ ] Merge this pull request. - [ ] Let the next successful release create or advance the `docs` branch. - [ ] Repoint GitBook Git Sync to `webstudio-is/webstudio`, branch `docs`, root directory `/docs`. - [ ] Verify `docs.webstudio.is`, navigation, assets, anchors, and the MCP page in production. - [ ] Delete `webstudio-is/webstudio-community`. ## Verification - `pnpm check:generated-docs` - `pnpm lint` - `pnpm oxfmt --check` - `git diff --check origin/main...HEAD` - generator regression test demonstrated failing when the GitBook wrapper behavior was removed, then passing after restoration - no fixture inputs or outputs are affected ## Known limitation All documentation merged after the previous release waits for the next successful release before GitBook publishes it. This deliberately keeps the public MCP reference aligned with an installable CLI revision. Ref #5986
3.8 KiB
3.8 KiB
description
| description |
|---|
| Style inline text spans within paragraphs in Webstudio. |
Inline Text Formatting
See MDN: <span>
Webstudio provides several components for inline text formatting within paragraphs and other text containers.
Overview
Inline formatting components allow you to style specific portions of text without affecting the entire text block. These components are typically used within Paragraph, Text, or Heading components.
Components
Span
The <span> element is a generic inline container for styling text.
Use cases:
- Apply custom colors to specific words
- Add backgrounds to highlighted text
- Apply multiple styles to a text portion
Properties:
| Property | Type | Description |
|---|---|---|
id |
string | Unique identifier |
class |
string | CSS class names |
Bold
The <strong> element indicates text with strong importance.
Use cases:
- Important warnings or key terms
- Emphasize critical information
- Highlight product names or features
Properties:
| Property | Type | Description |
|---|---|---|
id |
string | Unique identifier |
class |
string | CSS class names |
Note
: Bold has semantic meaning for screen readers. Use it for important content, not just visual styling.
Italic
The <em> element indicates emphasized text.
Use cases:
- Technical terms on first use
- Titles of works (books, movies)
- Foreign words or phrases
- Emphasis in speech
Properties:
| Property | Type | Description |
|---|---|---|
id |
string | Unique identifier |
class |
string | CSS class names |
Superscript
The <sup> element displays text slightly above the normal line.
Use cases:
- Footnote references¹
- Mathematical exponents (x²)
- Trademark symbols (™)
- Ordinal indicators (1st, 2nd)
Properties:
| Property | Type | Description |
|---|---|---|
id |
string | Unique identifier |
class |
string | CSS class names |
Subscript
The <sub> element displays text slightly below the normal line.
Use cases:
- Chemical formulas (H₂O)
- Mathematical subscripts
- Footnotes (in some styles)
Properties:
| Property | Type | Description |
|---|---|---|
id |
string | Unique identifier |
class |
string | CSS class names |
Using Rich Text Editing
The easiest way to apply inline formatting is through rich text editing:
- Double-click on a text component to enter edit mode
- Select the text you want to format
- Use the formatting toolbar:
- B for Bold
- I for Italic
- Link icon for hyperlinks
For Superscript and Subscript, you'll need to add the component manually and position it within your text.
Styling Tips
Custom Highlights
Paragraph
└── Span (background: yellow, padding: 2px 4px)
└── "highlighted text"
Gradient Text
Apply a gradient to text using Span:
- Add Span around text
- Set background to gradient
- Add
-webkit-background-clip: text - Set color to transparent
Multiple Styles
Nest formatting components for combined effects:
Paragraph
└── Bold
└── Italic
└── "bold and italic text"
Accessibility Considerations
- Use semantic elements: Bold (
<strong>) conveys importance to screen readers - Don't rely on color alone: Add additional indicators for important information
- Maintain contrast: Styled text should still be readable
- Use sparingly: Too much formatting reduces readability