import {  createEditorConfig,  defaultExtensionNodes,  defaultTheme,  EditorContent,  EditorRoot,} from "@typix-editor/react";import {  CharacterLimitExtension,  useCharacterCount,} from "@typix-editor/extension-character-limit";import { Toolbar } from "./Toolbar";const MAX = 200;const config = createEditorConfig({  extensionNodes: defaultExtensionNodes,  theme: defaultTheme,});// useCharacterCount gives you raw numbers for your own status bar / counter UI.function StatsBar({ max }: { max: number }) {  const { characters, words } = useCharacterCount();  return (    <div className="stats-bar">      <span>{words} words</span>      <span>{characters}/{max}</span>    </div>  );}export default function CharacterLimitExample() {  return (    <EditorRoot config={config}>      <div className="editor-container">        <Toolbar />        <EditorContent placeholder={`Start typing (${MAX} character limit)...`} />        <StatsBar max={MAX} />      </div>      {/* Highlights overflow text and renders an inline remaining count */}      <CharacterLimitExtension maxLength={MAX} charset="UTF-16" />    </EditorRoot>  );}