PageHelpers

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();

range.appendText("Heading Text\nRegular paragraph text.");

// Format just the first paragraph as a heading
range.formatParagraph(
  { index: 0, length: 12 }, // Only need to include part of the paragraph
  {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center'
  }
);

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();
const text = "Item 1\nItem 2\nItem 3";
range.appendText(text);

// Format all paragraphs as a bulleted list
range.formatParagraph(
  { index: 0, length: text.length },
  {
    listLevel: 1,
    listMarker: 'disc'
  }
);

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();
range.appendText("This text contains important information.");

// Format just the word "important"
range.formatText(
  { index: 16, length: 9 },
  {
    fontWeight: 'bold',
    color: '#FF0000'
  }
);

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();
range.appendText("Visit our website for more information.");

// Add a link to "our website"
range.formatText(
  { index: 6, length: 11 },
  {
    link: "https://www.example.com",
    decoration: 'underline',
    color: '#0066CC'
  }
);

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();
range.appendText("First paragraph. ");

// Append more text to the existing content
const result = range.appendText("This is additional text.");

// The bounds of the newly added text are returned
// Do something with the bounds - result.bounds, e.g. { index: 17, length: 24 }

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();
range.appendText("Normal text followed by ");

// Append formatted text
range.appendText("bold red text", {
  fontWeight: 'bold',
  color: '#FF0000'
});

// Append a new paragraph
range.appendText("\nThis is a new paragraph.");

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();
range.appendText("This text needs correction.");

// Replace "needs correction" with "is correct"
const result = range.replaceText(
  { index: 10, length: 16 },
  "is correct"
);

// The bounds of the replaced text are returned
// Do something with the bounds - result.bounds, e.g. { index: 10, length: 10 }

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();
range.appendText("Regular text that needs emphasis.");

// Replace "needs emphasis" with formatted text
range.replaceText(
  { index: 17, length: 15 },
  "is important",
  {
    fontWeight: 'bold',
    fontStyle: 'italic',
    color: '#0066CC'
  }
);

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();
range.appendText("First paragraph.\n", { fontWeight: 'bold' });
range.appendText("Second paragraph with formatting.", { color: '#FF0000' });

// Get plain text content without formatting
const plainText = range.readPlaintext();
// Do something with the plain text - plainText, e.g. "First paragraph.\nSecond paragraph with formatting."

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();
range.appendText("This text contains a searchable term.");

// Search for a specific word
const plainText = range.readPlaintext();
const searchTerm = "searchable";
const index = plainText.indexOf(searchTerm);

if (index !== -1) {
  // Format the found term
  range.formatText(
    { index, length: searchTerm.length },
    { fontWeight: 'bold', decoration: 'underline' }
  );
}

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();
range.appendText("Normal text ", {});
range.appendText("bold text", { fontWeight: 'bold' });
range.appendText(" and ", {});
range.appendText("red text", { color: '#FF0000' });

// Get formatted regions
const regions = range.readTextRegions();
// Do something with the regions, e.g.
// [
//   { text: "Normal text ", formatting: {} },
//   { text: "bold text", formatting: { fontWeight: 'bold' } },
//   { text: " and ", formatting: {} },
//   { text: "red text", formatting: { color: '#FF0000' } }
// ]

import { createRichtextRange } from "@canva/design";

const range = createRichtextRange();
range.appendText("Mixed ", {});
range.appendText("formatted ", { fontWeight: 'bold' });
range.appendText("text", { color: '#0066CC' });

// Analyze formatting variations
const regions = range.readTextRegions();
const formattingTypes = regions.map(region => {
  const formatting = region.formatting || {};
  return {
    text: region.text,
    hasWeight: !!formatting.fontWeight,
    hasColor: !!formatting.color
  };
});