Fast Text Color

https://github.com/superschnizel/obsidian-fast-text-color
Admin
An Obsidian plugin that enables users to create beautifully colored interactive notes using a custom...
Tokens:5,325
Snippets:20
Trust Score:6.7
License:GPL-3.0
Update:11 months ago
Show doc for...
Tokens:
Raw
### Custom Text Coloring Syntax Example

Source: https://github.com/superschnizel/obsidian-fast-text-color/blob/master/README.md

Demonstrates the custom syntax used to color text sections within Obsidian notes. This syntax, when processed by the plugin, applies specific styles defined by active themes or custom CSS classes.

```markdown
~={id} This text is colored according to the id=~
```

--------------------------------

### Dynamic CSS Class Generation for Themes

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Explains the dynamic generation of CSS classes for text colors, incorporating theme names and color IDs. It shows example CSS for different color applications and how these classes are injected into the document's style element, updating dynamically.

```css
// CSS class naming pattern: ftc-color-{themeName}-{colorId}

// Example generated CSS:
.ftc-color-default-red {
  --ftc-color: #ff0000;
  color: var(--ftc-color);
}

.ftc-color-default-highlight {
  --ftc-color: #ffff00;
  color: var(--ftc-color);
  font-weight: bold;
  font-style: italic;
  text-decoration: underline;
}

.ftc-color-default-caps {
  --ftc-color: #00ff00;
  color: var(--ftc-color);
  text-transform: uppercase;
}

.ftc-color-builtin-blue {
  --ftc-color: var(--color-blue);
  color: var(--ftc-color);
}

// With colorCodeSection setting enabled:
.ftc-color-default-red {
  --ftc-color: #ff0000;
  color: var(--ftc-color);
  --code-normal: var(--ftc-color);  // Colors inline code blocks
}

// Classes are injected into <style id="fast-text-color-stylesheet">
// Updated whenever settings change or themes are modified
```

--------------------------------

### Manage Plugin Settings, Themes, and Colors (TypeScript)

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Provides functions for managing plugin settings, including adding, getting, and deleting themes and their associated colors. It utilizes functions like `getColors`, `addTheme`, `selectNextTheme`, and `deleteTheme`. Input is a `FastTextColorPluginSettings` object.

```typescript
import {
  getColors,
  getCurrentTheme,
  addTheme,
  selectNextTheme,
  deleteTheme,
  FastTextColorPluginSettings
} from './src/FastTextColorSettings';

function manageSettings(settings: FastTextColorPluginSettings) {
  // Get colors from current active theme
  const activeColors = getColors(settings);
  console.log(activeColors); // Array of TextColor objects

  // Get colors from specific theme by index
  const theme0Colors = getColors(settings, 0);

  // Get current active theme object
  const currentTheme = getCurrentTheme(settings);
  console.log(currentTheme.name); // "default"

  // Add new theme with default colors
  addTheme(settings, "dark-theme");

  // Add theme with custom colors
  const customColors = [
    new TextColor("#1a1a1a", "dark", "dark-theme", false, false, 0, 0, 'D'),
    new TextColor("#e0e0e0", "light", "dark-theme", false, false, 0, 0, 'L')
  ];
  addTheme(settings, "custom-theme", customColors);

  // Cycle through themes
  selectNextTheme(settings); // Move to next theme

  // Delete theme by index (won't delete if only one theme remains)
  deleteTheme(settings, 1);

  // Delete current active theme
  deleteTheme(settings); // index defaults to -1 (current)
}
```

--------------------------------

### Custom Color Syntax for Obsidian Markdown (Markdown)

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Details the custom markdown syntax used by the Obsidian Fast Text Color plugin to mark colored text. It includes basic syntax, examples with different colors, nested coloring, multiple sections, formatting, and theme overrides via frontmatter.

```markdown
# Basic Syntax

~={colorId}This text will be colored=~

# Examples

~={red}Important warning message=~
~={blue}Note: Remember to save your work=~
~={highlight}Key concept here=~

# Nested Coloring (Supported)

~={red}Outer color ~={blue}inner color=~ back to outer=~

# Multiple Sections

~={green}First section=~ regular text ~={yellow}Second section=~

# With Formatting

~={bold-red}This uses a color with bold formatting enabled=~
~={italic-blue}This uses a color with italic formatting enabled=~
~={underline-highlight}This uses a color with underline enabled=~

# Theme Override via Frontmatter

---
ftcTheme: dark-theme
---

~={primary}This will use the 'primary' color from 'dark-theme'=~
```

--------------------------------

### TextColorTheme Class

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Bundles multiple TextColor objects into a named collection. Themes can be activated globally or per-note, providing a way to manage sets of colors and their associated formatting.

```APIDOC
## TextColorTheme Class

### Description
`TextColorTheme` bundles multiple `TextColor` objects into a named collection that can be activated globally or per-note.

### Method
```typescript
new TextColorTheme(name: string, colors: TextColor[])
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
(Constructor Parameters)
- **name** (string) - The name of the theme.
- **colors** (TextColor[]) - An array of `TextColor` objects included in this theme.

### Request Example
```typescript
import { TextColorTheme } from './src/color/TextColorTheme';
import { TextColor } from './src/color/TextColor';

// Create color definitions
const colors = [
  new TextColor("#ff0000", "red", "mytheme", false, false, 0, 0, 'R'),
  new TextColor("#00ff00", "green", "mytheme", false, false, 0, 0, 'G'),
  new TextColor("#0000ff", "blue", "mytheme", false, false, 0, 0, 'B')
];

// Create theme
const myTheme = new TextColorTheme("mytheme", colors);
```

### Response
#### Success Response (Instance)
- **TextColorTheme instance**: An object representing the color theme.

#### Response Example
```typescript
// Access theme properties
console.log(myTheme.name);    // "mytheme"
console.log(myTheme.colors);  // Array of TextColor objects
```
```

--------------------------------

### Plugin Commands for Text Coloring

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Provides commands to change text color by opening a color suggester or menu, and to remove existing color formatting. It details how the commands function based on settings like 'useKeybindings' and how text is wrapped with color syntax.

```typescript
// Command: 'change-text-color'
// Opens color menu or suggester modal based on settings

// With useKeybindings=false:
// - Opens ColorSuggestModal with searchable color list
// - Select color by typing and pressing Enter

// With useKeybindings=true:
// - Opens color menu at bottom of screen
// - Press assigned keybind to apply color (e.g., 'R' for red)
// - Press Escape to close menu without applying

// Usage in Obsidian:
// 1. Select text
// 2. Press hotkey assigned to 'Fast Text Color: Change text color'
// 3. Choose color from menu
// 4. Text is wrapped with syntax: ~={colorId}text=~

// Command: 'remove-text-color'
// Removes color from cursor position or selection
// - No selection: Removes surrounding color markers
// - With selection: Removes all color markers in selection
```

--------------------------------

### Interactive Color Widget Creation and Interaction (TypeScript)

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Illustrates the `ColorWidget` class, used to create interactive UI elements for color IDs within the text. Although typically managed internally by `TextColorViewPlugin`, this shows manual instantiation and the expected dispatch calls for changing or removing colors. Dependencies include `ColorWidget` and `EditorView`.

```typescript
import { ColorWidget } from './src/widgets/ColorWidget';
import { EditorView } from '@codemirror/view';

// ColorWidget is automatically created by TextColorViewPlugin
// When text like ~={red}Hello=~ is rendered, the "red" part
// becomes an interactive widget (⬤) when cursor is outside

// Widget behavior:
// - Click: Selects the color ID for editing
// - Hover: Shows menu with available colors and remove option

// Example of manual widget creation (typically internal):
const widget = new ColorWidget(
  "red",           // color id
  10,              // from position
  13,              // to position
  25,              // expression end position
  "default"        // theme name
);

// Widget interaction creates dispatch calls:
// Change color: { changes: { from: 10, to: 13, insert: 'blue' } }
// Remove color: { changes: [
//   { from: 7, to: 14, insert: '' },    // ~={red}
//   { from: 23, to: 25, insert: '' }    // =~
// ]}
```

--------------------------------

### TextColorTheme Class - Obsidian Plugin API

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Bundles multiple TextColor objects into a named collection that can be activated globally or per-note. It allows managing sets of colors and their associated formatting.

```typescript
import { TextColorTheme } from './src/color/TextColorTheme';
import { TextColor } from './src/color/TextColor';

// Create color definitions
const colors = [
  new TextColor("#ff0000", "red", "mytheme", false, false, 0, 0, 'R'),
  new TextColor("#00ff00", "green", "mytheme", false, false, 0, 0, 'G'),
  new TextColor("#0000ff", "blue", "mytheme", false, false, 0, 0, 'B')
];

// Create theme
const myTheme = new TextColorTheme("mytheme", colors);

// Access theme properties
console.log(myTheme.name);    // "mytheme"
console.log(myTheme.colors);  // Array of TextColor objects
```

--------------------------------

### Fast Text Color Plugin Settings Interface

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Defines the TypeScript interface for the plugin's settings, including options for themes, interactive delimiters, keybindings, node rebuilding, and code section coloring. It also provides default settings and mentions the use of Obsidian's built-in CSS variables for colors.

```typescript
interface FastTextColorPluginSettings {
  themes: Array<TextColorTheme>;     // All available themes
  themeIndex: number;                 // Currently active theme index
  version: string;                    // Settings schema version
  interactiveDelimiters: boolean;     // Show interactive color widgets
  useKeybindings: boolean;            // Use keyboard color menu vs suggester
  useNodeRebuilding: boolean;         // Experimental rendering feature
  colorCodeSection: boolean;          // Apply colors to inline code blocks
}

// Default settings:
const DEFAULT_SETTINGS: FastTextColorPluginSettings = {
  themes: [
    new TextColorTheme("builtin", BUILTIN_COLORS),
    new TextColorTheme("default", DEFAULT_COLORS)
  ],
  themeIndex: 0,
  version: "3",
  interactiveDelimiters: true,
  useKeybindings: false,
  useNodeRebuilding: false,
  colorCodeSection: false
}

// Builtin colors use CSS variables from Obsidian theme:
// --color-red, --color-orange, --color-yellow, --color-green,
// --color-cyan, --color-blue, --color-purple, --color-pink
```

--------------------------------

### Editor Context Menu Integration for Coloring

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Details how the plugin integrates a 'Color' submenu into the editor's right-click context menu when text is selected. Each color option includes a visual indicator and applies the selected color immediately upon clicking.

```typescript
// Automatically registered in plugin onload()
// When text is selected and user right-clicks:

// Context Menu Structure:
// └─ Color
//    ├─ red (with color indicator)
//    ├─ green (with color indicator)
//    ├─ blue (with color indicator)
//    └─ remove (removes any existing color)

// Each color option shows a visual indicator using the actual color
// Clicking a color immediately wraps the selected text
// Only appears when text is selected
```

--------------------------------

### applyColor Function

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Applies color formatting to selected text in the editor by wrapping it with the plugin's custom syntax markers. Supports single and multiple selections.

```APIDOC
## applyColor Function

### Description
Applies color formatting to selected text in the editor by wrapping it with the plugin's custom syntax markers.

### Method
```typescript
applyColor(color: TextColor, editor: Editor)
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
(Function Arguments)
- **color** (TextColor) - The `TextColor` object defining the color and formatting to apply.
- **editor** (Editor) - The Obsidian editor instance.

### Request Example
```typescript
import { applyColor } from './src/color/TextColorFunctions';
import { Editor } from 'obsidian';
import { TextColor } from './src/color/TextColor';

// In a plugin context with access to editor
function colorSelectedText(editor: Editor) {
  const blueColor = new TextColor("#0000ff", "blue", "default", false, false, 0, 0, 'B');

  // If text is selected, it will be wrapped with color markers
  // Selection: "Hello World"
  // Result: "~={blue}Hello World=~"
  applyColor(blueColor, editor);

  // If nothing is selected, markers are inserted at cursor position
  // Cursor position: |
  // Result: "~={blue}|=~"
  // Cursor remains between markers for immediate typing
}

// Multiple selections are supported
function colorMultipleSelections(editor: Editor) {
  const redColor = new TextColor("#ff0000", "red", "default", false, false, 0, 0, 'R');

  // With multiple selections active
  // Selections: "first" and "second"
  // Result: "~={red}first=~" and "~={red}second=~"
  applyColor(redColor, editor);
}
```

### Response
#### Success Response (Void)
This function does not return a value. It directly modifies the editor content.

#### Response Example
None (modifies editor state directly)
```

--------------------------------

### applyColor Function - Obsidian Plugin API

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Applies color formatting to selected text in the editor by wrapping it with the plugin's custom syntax markers. It supports single and multiple selections, and inserts markers at the cursor if no text is selected.

```typescript
import { applyColor } from './src/color/TextColorFunctions';
import { Editor } from 'obsidian';
import { TextColor } from './src/color/TextColor';

// In a plugin context with access to editor
function colorSelectedText(editor: Editor) {
  const blueColor = new TextColor("#0000ff", "blue", "default", false, false, 0, 0, 'B');

  // If text is selected, it will be wrapped with color markers
  // Selection: "Hello World"
  // Result: "~={blue}Hello World=~"
  applyColor(blueColor, editor);

  // If nothing is selected, markers are inserted at cursor position
  // Cursor position: |
  // Result: ~={blue}|="
  // Cursor remains between markers for immediate typing
}

// Multiple selections are supported
function colorMultipleSelections(editor: Editor) {
  const redColor = new TextColor("#ff0000", "red", "default", false, false, 0, 0, 'R');

  // With multiple selections active
  // Selections: "first" and "second"
  // Result: "~={red}first=~" and "~={red}second=~"
  applyColor(redColor, editor);
}
```

--------------------------------

### TextColor Class

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Represents a single color configuration with associated formatting options like bold, italic, capitalization, and line decorations. It allows for the creation of custom color definitions and the generation of CSS styles.

```APIDOC
## TextColor Class

### Description
The `TextColor` class represents a single color configuration with associated formatting options including bold, italic, capitalization modes, and line decorations.

### Method
```typescript
new TextColor(color: string, id: string, theme: string, italic: boolean, bold: boolean, cap_mode_index: number, line_mode_index: number, keybind: string, useCssColorVariable?: boolean, colorVariable?: string)
```

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
(Constructor Parameters)
- **color** (string) - The color value (e.g., hex code).
- **id** (string) - The unique identifier for the color.
- **theme** (string) - The name of the theme this color belongs to.
- **italic** (boolean) - Whether the text should be italicized.
- **bold** (boolean) - Whether the text should be bold.
- **cap_mode_index** (number) - Index for capitalization mode (0=normal, 1=all_caps, 2=small_caps).
- **line_mode_index** (number) - Index for line decoration mode (0=none, 1=underline, 2=overline, 3=line-through).
- **keybind** (string) - The keybind associated with this color.
- **useCssColorVariable** (boolean) - Optional. Whether to use a CSS color variable.
- **colorVariable** (string) - Optional. The name of the CSS color variable.

### Methods
- **getColorValue()**: Returns the color value (handles CSS variables).
- **getCssClass()**: Returns the full CSS class definition string.
- **getCssInlineStyle()**: Returns the inline style string for direct application.

### Request Example
```typescript
import { TextColor } from './src/color/TextColor';

// Create a basic text color with default settings
const redColor = new TextColor(
  "#ff0000",        // color value
  "red",            // color id/name
  "default",        // theme name
  false,            // italic
  false,            // bold
  0,                // cap_mode index (0=normal, 1=all_caps, 2=small_caps)
  0,                // line_mode index (0=none, 1=underline, 2=overline, 3=line-through)
  'R',              // keybind
  false,            // useCssColorVariable
  "--color-base-00" // colorVariable
);
```

### Response
#### Success Response (Instance)
- **TextColor instance**: An object representing the configured text color.

#### Response Example
```typescript
// Get color value (handles CSS variables)
const colorValue = redColor.getColorValue(); // Returns: "#ff0000"

// Generate CSS class string
const cssClass = redColor.getCssClass(); // Returns full CSS class definition

// Get inline style string for direct application
const inlineStyle = redColor.getCssInlineStyle(); // Returns: "color: #ff0000; font-weight: bold;"
```
```

--------------------------------

### TextColor Class - Obsidian Plugin API

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Represents a single color configuration with formatting options like bold, italic, capitalization, and line decorations. It allows generating CSS class strings and inline styles for text.

```typescript
import { TextColor } from './src/color/TextColor';

// Create a basic text color with default settings
const redColor = new TextColor(
  "#ff0000",        // color value
  "red",            // color id/name
  "default",        // theme name
  false,            // italic
  false,            // bold
  0,                // cap_mode index (0=normal, 1=all_caps, 2=small_caps)
  0,                // line_mode index (0=none, 1=underline, 2=overline, 3=line-through)
  'R',              // keybind
  false,            // useCssColorVariable
  "--color-base-00" // colorVariable
);

// Create a formatted color with italic, bold, and underline
const highlightColor = new TextColor(
  "#ffff00",
  "highlight",
  "default",
  true,   // italic
  true,   // bold
  0,      // normal caps
  1,      // underline
  'H'
);

// Get color value (handles CSS variables)
const colorValue = redColor.getColorValue(); // Returns: "#ff0000"

// Generate CSS class string
const cssClass = redColor.getCssClass(); // Returns full CSS class definition

// Get inline style string for direct application
const inlineStyle = redColor.getCssInlineStyle(); // Returns: "color: #ff0000; font-weight: bold;"
```

--------------------------------

### Tab Key Navigation for Color Markers

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Describes the specific functionality where pressing the Tab key allows the cursor to jump out of a color marker when positioned inside the closing delimiter. This enhances navigation by enabling quick movement past colored text segments.

```typescript
// Registered as high-priority keymap in plugin
// Syntax: ~={colorId}text here=~|
//                              ^ cursor position

// Behavior:
// Before Tab: ~={red}Hello World=|
//                               ^ cursor
// After Tab:  ~={red}Hello World=~|
//                                 ^ cursor (jumped out)

// Only activates when cursor is inside TcRight node
// Returns false if not applicable, allowing normal Tab behavior
// Useful for quickly moving to next section after coloring text
```

--------------------------------

### Remove Color Formatting from Text (TypeScript)

Source: https://context7.com/superschnizel/obsidian-fast-text-color/llms.txt

Demonstrates how to remove color formatting from text at the cursor or within a selection using the `removeColor` function. It handles cases with no selection and selections containing colored text. Dependencies include Obsidian's `Editor` and CodeMirror's `EditorView`.

```typescript
import { removeColor } from './src/color/TextColorFunctions';
import { Editor } from 'obsidian';
import { EditorView } from '@codemirror/view';

function removeColorFromText(editor: Editor, editorView: EditorView) {
  // Case 1: No selection - removes surrounding color markers
  // Before (cursor at |): ~={red}Hello| World=~
  // After: Hello World
  removeColor(editor, editorView);

  // Case 2: Selection contains colored sections
  // Before (selection: [~={red}Hello=~ ~={blue}World=~])
  // After: Hello World
  // All color markers within selection are removed
}

// Example in plugin command
this.addCommand({
  id: 'remove-text-color',
  name: 'Remove text color',
  editorCallback: (editor, view) => {
    const editorView = (view as any).editor.cm as EditorView;
    removeColor(editor, editorView);
  }
});
```
Tokens:
Raw