Testing 1 2 3...

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Link test

Here is a function to create a slug from a string:

const before = 'áéíóúâêîôûãõñçà'.split('')
const after = 'aeiouaeiouaonca'.split('')

export function asSlug(title: string) {
  let slug = title.toLocaleLowerCase()

  before.forEach((letter, index) => {
    slug = slug.replaceAll(letter, after[index]!)
  })

  slug = slug.replaceAll(/[^a-z0-9]+/g, '-')
  slug = slug.replaceAll(/^-|-$/g, '')

  return slug
}

// Add styles with your preferred CSS technology
const TooltipContent = styled(Tooltip.Content, {
  backgroundColor: 'black',
  borderRadius: '3px',
  padding: '5px'
});

const PopoverContent = styled(Popover.Content, {
  backgroundColor: 'white',
  boxShadow: '0 2px 10px -3px rgb(0 0 0 / 20%)',
  borderRadius: '3px',
});

const DialogContent = styled(Dialog.Content, {
  backgroundColor: 'white',
  boxShadow: '0 3px 15px -4px rgb(0 0 0 / 30%)',
  borderRadius: '5px',
});

export const StatusTooltip = ({ state, label }) => {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger asChild>
        <Text>
          <Status variant={state} />
        </Text>
      </Tooltip.Trigger>
      <Tooltip.Portal>
        <TooltipContent>
          <Tooltip.Arrow />
          <span>{label}</span>
        </TooltipContent>
      </Tooltip.Portal>
    </Tooltip.Root>
  );
};

.blog-post-min-h {
  min-height: 12rem;
}

.blog-post {
  p.is-editor-empty:first-child::before {
    content: attr(data-placeholder);
  }

  // Code editor

  > * + * {
    margin-top: 0.75em;
  }

  pre {
    code {
      color: #edeef0;
    }
  }

  .token.property,
  .token.tag,
  .token.symbol {
    color: #ff92ad !important;
  }

  .token.selector,
  .token.attr-name,
  .token.string,
  .token.inserted {
    color: #0bd8b6;
  }

  .token.italic {
    font-style: italic;
  }
}

A bold text:

• Item 1

• Item 2

• Item 3 with inline text as code.