{"type":"data","nodes":[null,{"type":"data","data":[{"content":1,"metadata":6},{"html":2,"css":3,"head":4},"\u003Ch1 id=\"plugin-properties\" data-svelte-h=\"svelte-te3xm9\">\u003Ca href=\"#plugin-properties\">\u003Ccode>Plugin\u003C/code> properties\u003C/a>\u003C/h1> \u003Cp data-svelte-h=\"svelte-vqgc1w\">You can easily extend Carta by creating custom plugins.\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">const\u003C/span> ext\u003Cspan class=\"token operator\">:\u003C/span> Plugin \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\u003Cspan class=\"token comment\">// ...\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\n\u003Cspan class=\"token keyword\">const\u003C/span> carta \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token keyword\">new\u003C/span> \u003Cspan class=\"token class-name\">Carta\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span>\n\textensions\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>ext\u003Cspan class=\"token punctuation\">]\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre>  \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Cp data-svelte-h=\"svelte-ojhiez\">Here are all the \u003Ccode>Plugin\u003C/code> properties:\u003C/p> \u003Ch3 id=\"transformers\" data-svelte-h=\"svelte-t6l7yj\">\u003Ca href=\"#transformers\">\u003Ccode>transformers\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-xjnbrs\">Type: \u003Ccode>UnifiedTransformer\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-h81kcw\">Remark or Rehype transformers.\u003C/p> \u003Ch4 id=\"unifiedtransformerexecution\" data-svelte-h=\"svelte-ebqnks\">\u003Ca href=\"#unifiedtransformerexecution\">\u003Ccode>UnifiedTransformer.execution\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-gibbua\">Type: \u003Ccode>'sync' | 'async'\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-umc34g\">If you specify async, this transformer won’t be available for SSR.\u003C/p> \u003Ch4 id=\"unifiedtransformertype\" data-svelte-h=\"svelte-1aor0ss\">\u003Ca href=\"#unifiedtransformertype\">\u003Ccode>UnifiedTransformer.type\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1v9dwks\">Type: \u003Ccode>'remark' | 'rehype'\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-e43zst\">This determines at which step the transformer will operate, whether on Remark, on a Markdown-based syntax tree, or Rehype, on a HTML-based one.\u003C/p> \u003Ch4 id=\"unifiedtransformertransform\" data-svelte-h=\"svelte-mx0qo6\">\u003Ca href=\"#unifiedtransformertransform\">\u003Ccode>UnifiedTransformer.transform\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1jsm31q\">Type: \u003Ccode>({ processor, carta }) => void\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-2w24mv\">The actual processor, can be async if the execution is specified as such.\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token punctuation\">{\u003C/span>\n\texecution\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'sync'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\ttype\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'rehype'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\u003Cspan class=\"token function\">transform\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">{\u003C/span> processor \u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\tprocessor\n\t\t\t\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">use\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>rehypeSlug\u003Cspan class=\"token punctuation\">)\u003C/span>\n\t\t\t\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">use\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>rehypeAutolinkHeadings\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre>  \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch3 id=\"shortcuts\" data-svelte-h=\"svelte-jocq82\">\u003Ca href=\"#shortcuts\">\u003Ccode>shortcuts\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-ls8kwy\">Type: \u003Ccode>KeyboardShortcut[]\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-16kpv2s\">Additional keyboards shortcut. For example:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">const\u003C/span> shortcut\u003Cspan class=\"token operator\">:\u003C/span> KeyboardShortcut \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\tid\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'bold'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\tcombination\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token keyword\">new\u003C/span> \u003Cspan class=\"token class-name\">Set\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token string\">'control'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token string\">'b'\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\u003Cspan class=\"token function-variable function\">action\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>input\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> input\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">toggleSelectionSurrounding\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token string\">'**'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre>  \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch4 id=\"keyboardshortcutid\" data-svelte-h=\"svelte-rquu0x\">\u003Ca href=\"#keyboardshortcutid\">\u003Ccode>KeyboardShortcut.id\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1uqpafo\">Type: \u003Ccode>string\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-16g2glh\">Id of the shortcut.\u003C/p> \u003Ch4 id=\"keyboardshortcutcombination\" data-svelte-h=\"svelte-1ayjyp1\">\u003Ca href=\"#keyboardshortcutcombination\">\u003Ccode>KeyboardShortcut.combination\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-88tabz\">Type: \u003Ccode>Set<string>\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-i93vvt\">Set of keys, corresponding to the \u003Ccode>e.key\u003C/code> of \u003Ccode>KeyboardEvent\u003C/code>s, but lowercase.\u003C/p> \u003Ch4 id=\"keyboardshortcutaction\" data-svelte-h=\"svelte-1a4j8no\">\u003Ca href=\"#keyboardshortcutaction\">\u003Ccode>KeyboardShortcut.action\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1cxa5mx\">Type: \u003Ccode>(input: InputEnhancer) => void\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-11hfkx3\">Shortcut callback.\u003C/p> \u003Ch4 id=\"keyboardshortcutpreventsave\" data-svelte-h=\"svelte-1y6l9pl\">\u003Ca href=\"#keyboardshortcutpreventsave\">\u003Ccode>KeyboardShortcut.preventSave\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1t38il8\">Prevent saving the current state in history.\u003C/p> \u003Ch3 id=\"icons\" data-svelte-h=\"svelte-1ebgahj\">\u003Ca href=\"#icons\">\u003Ccode>icons\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-c4b34g\">Type: \u003Ccode>Icon[]\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-1vzwnn1\">Additional toolbar icons. For example:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">const\u003C/span> icon\u003Cspan class=\"token operator\">:\u003C/span> Icon \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\tid\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'heading'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\u003Cspan class=\"token function-variable function\">action\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>input\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> input\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">toggleLinePrefix\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token string\">'###'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\tcomponent\u003Cspan class=\"token operator\">:\u003C/span> HeadingIcon\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre>  \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch4 id=\"iconid\" data-svelte-h=\"svelte-vlce8n\">\u003Ca href=\"#iconid\">\u003Ccode>Icon.id\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1uqpafo\">Type: \u003Ccode>string\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-1oavrww\">Id of the icon.\u003C/p> \u003Ch4 id=\"iconaction\" data-svelte-h=\"svelte-1lns4qa\">\u003Ca href=\"#iconaction\">\u003Ccode>Icon.action\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1cxa5mx\">Type: \u003Ccode>(input: InputEnhancer) => void\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-1v7o0af\">Click callback.\u003C/p> \u003Ch4 id=\"iconcomponent\" data-svelte-h=\"svelte-ifnk2r\">\u003Ca href=\"#iconcomponent\">\u003Ccode>Icon.component\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-3i2tof\">Type: \u003Ccode>ComponentType\u003C/code> (SvelteComponent)\u003C/p> \u003Cp data-svelte-h=\"svelte-1em7plh\">The Icon as a Svelte component.\u003C/p> \u003Ch3 id=\"prefixes\" data-svelte-h=\"svelte-1lx4d9z\">\u003Ca href=\"#prefixes\">\u003Ccode>prefixes\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-blajub\">Type: \u003Ccode>Prefix[]\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-5g0fjc\">Text prefixes, default ones include the \u003Ccode>-\u003C/code> for bulleted lists, \u003Ccode>1.\u003C/code> for numbered lists, \u003Ccode>- [ ]\u003C/code> for task lists.\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">const\u003C/span> prefix\u003Cspan class=\"token operator\">:\u003C/span> Prefix \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\tid\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'bulletedList'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\u003Cspan class=\"token function-variable function\">match\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>line\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\u003Cspan class=\"token keyword\">const\u003C/span> prefix \u003Cspan class=\"token operator\">=\u003C/span> line\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">slice\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token number\">0\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token number\">2\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\u003Cspan class=\"token keyword\">if\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>prefix \u003Cspan class=\"token operator\">===\u003C/span> \u003Cspan class=\"token string\">'- '\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token keyword\">return\u003C/span> prefix\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\u003Cspan class=\"token function-variable function\">maker\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token string\">'- '\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre>  \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch4 id=\"prefixid\" data-svelte-h=\"svelte-gddn0y\">\u003Ca href=\"#prefixid\">\u003Ccode>Prefix.id\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1uqpafo\">Type: \u003Ccode>string\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-1gan88v\">Id of the prefix.\u003C/p> \u003Ch4 id=\"prefixmatch\" data-svelte-h=\"svelte-17zzrii\">\u003Ca href=\"#prefixmatch\">\u003Ccode>Prefix.match\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1ktwwvx\">Type: \u003Ccode>(line: string) => string | undefined\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-k42jg2\">Function that returns the prefix, if it is present.\u003C/p> \u003Ch4 id=\"prefixmaker\" data-svelte-h=\"svelte-g66sq1\">\u003Ca href=\"#prefixmaker\">\u003Ccode>Prefix.maker\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1ul36kx\">Type: \u003Ccode>(previousMatch: string, previousLine: string) => string\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-1rjhqgb\">Function that returns the prefix for the new line.\u003C/p> \u003Cp data-svelte-h=\"svelte-11lpom8\">Example:\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">const\u003C/span> prefix\u003Cspan class=\"token operator\">:\u003C/span> Prefix \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\tid\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token string\">'numberedList'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\u003Cspan class=\"token function-variable function\">match\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>line\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> line\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">match\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token regex\">\u003Cspan class=\"token regex-delimiter\">/\u003C/span>\u003Cspan class=\"token regex-source language-regex\">^d+.\u003C/span>\u003Cspan class=\"token regex-delimiter\">/\u003C/span>\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token operator\">?.\u003C/span>\u003Cspan class=\"token function\">at\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token number\">0\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\u003Cspan class=\"token function-variable function\">maker\u003C/span>\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>prev\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token template-string\">\u003Cspan class=\"token template-punctuation string\">`\u003C/span>\u003Cspan class=\"token interpolation\">\u003Cspan class=\"token interpolation-punctuation punctuation\">${\u003C/span>\u003Cspan class=\"token function\">Number\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>prev\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">slice\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token number\">0\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token operator\">-\u003C/span>\u003Cspan class=\"token number\">1\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">+\u003C/span> \u003Cspan class=\"token number\">1\u003C/span>\u003Cspan class=\"token interpolation-punctuation punctuation\">}\u003C/span>\u003C/span>\u003Cspan class=\"token string\">. \u003C/span>\u003Cspan class=\"token template-punctuation string\">`\u003C/span>\u003C/span>\n\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre>  \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch3 id=\"listeners\" data-svelte-h=\"svelte-1x903hg\">\u003Ca href=\"#listeners\">\u003Ccode>listeners\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-103zbuj\">Type: \u003Ccode>Listener[]\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-a4iodw\">Textarea event listeners. Has an additional \u003Ccode>carta-render\u003C/code> and \u003Ccode>carta-render-ssr\u003C/code> events keys.\u003C/p> \u003Cdiv class=\"relative\">\u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">const\u003C/span> click\u003Cspan class=\"token operator\">:\u003C/span> Listener \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\u003Cspan class=\"token string\">'click'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span> \u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token builtin\">console\u003C/span>\u003Cspan class=\"token punctuation\">.\u003C/span>\u003Cspan class=\"token function\">log\u003C/span>\u003Cspan class=\"token punctuation\">(\u003C/span>\u003Cspan class=\"token string\">'I was clicked!'\u003C/span>\u003Cspan class=\"token punctuation\">)\u003C/span>\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\n\u003Cspan class=\"token keyword\">const\u003C/span> render\u003Cspan class=\"token operator\">:\u003C/span> Listener \u003Cspan class=\"token operator\">=\u003C/span> \u003Cspan class=\"token punctuation\">[\u003C/span>\n\t\u003Cspan class=\"token string\">'carta-render'\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\u003Cspan class=\"token punctuation\">(\u003C/span>e\u003Cspan class=\"token punctuation\">)\u003C/span> \u003Cspan class=\"token operator\">=>\u003C/span> \u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\t\u003Cspan class=\"token keyword\">const\u003C/span> carta \u003Cspan class=\"token operator\">=\u003C/span> e\u003Cspan class=\"token punctuation\">.\u003C/span>detail\u003Cspan class=\"token punctuation\">.\u003C/span>carta\u003Cspan class=\"token punctuation\">;\u003C/span>\n\t\t\u003Cspan class=\"token comment\">// ...\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\u003Cspan class=\"token punctuation\">,\u003C/span>\n\t\u003Cspan class=\"token punctuation\">{\u003C/span>\n\t\tonce\u003Cspan class=\"token operator\">:\u003C/span> \u003Cspan class=\"token boolean\">true\u003C/span>\n\t\u003Cspan class=\"token punctuation\">}\u003C/span>\n\u003Cspan class=\"token punctuation\">]\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre>  \u003Cbutton title=\"Copy\" class=\"absolute right-4 top-[min(50%_,_32px)] aspect-square -translate-y-1/2 transform rounded hover:bg-neutral-800 hover:text-neutral-300 active:text-sky-300 \" data-svelte-h=\"svelte-ms5nns\">\u003Ciconify-icon icon=\"octicon:copy-16\" class=\"p-2 text-lg\">\u003C/iconify-icon>\u003C/button>\u003C/div> \u003Ch3 id=\"components\" data-svelte-h=\"svelte-a3xxfv\">\u003Ca href=\"#components\">\u003Ccode>components\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-7uoepn\">Type: \u003Ccode>ExtensionComponent[]\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-1p54v4b\">Additional components to be added to the editor or viewer.\u003C/p> \u003Ch4 id=\"extensioncomponentlttgtcomponent\" data-svelte-h=\"svelte-4nc8mt\">\u003Ca href=\"#extensioncomponentlttgtcomponent\">\u003Ccode>ExtensionComponent<T>.component\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-19zys37\">Type: \u003Ccode>typeof SvelteComponentTyped<T & { carta: Carta }>\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-1xjyux0\">Svelte components that exports \u003Ccode>carta: Carta\u003C/code> and all the other properties specified as the generic parameter and in \u003Ccode>props\u003C/code>.\u003C/p> \u003Ch4 id=\"extensioncomponentlttgtprops\" data-svelte-h=\"svelte-1361cdi\">\u003Ca href=\"#extensioncomponentlttgtprops\">\u003Ccode>ExtensionComponent<T>.props\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1phll8j\">Type: \u003Ccode>T\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-1hgf4c0\">Properties that will be handed to the component.\u003C/p> \u003Ch4 id=\"extensioncomponentlttgtparent\" data-svelte-h=\"svelte-4zyqdu\">\u003Ca href=\"#extensioncomponentlttgtparent\">\u003Ccode>ExtensionComponent<T>.parent\u003C/code>\u003C/a>\u003C/h4> \u003Cp data-svelte-h=\"svelte-1greb9j\">Type: \u003Ccode>MaybeArray<'editor' | 'input' | 'renderer' | 'preview'>\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-1oocx94\">Where the element will be placed.\u003C/p> \u003Ch3 id=\"grammarrules\" data-svelte-h=\"svelte-63aqo3\">\u003Ca href=\"#grammarrules\">\u003Ccode>grammarRules\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-1a6pzpg\">Type: \u003Ccode>GrammarRule[]\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-v18ein\">Custom Markdown TextMate grammar rules for Shiki. They will be injected into the language.\u003C/p> \u003Ch3 id=\"highlightrules\" data-svelte-h=\"svelte-7nxrbg\">\u003Ca href=\"#highlightrules\">\u003Ccode>highlightRules\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-map36l\">Type: \u003Ccode>HighlightingRule[]\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-1p0s8h1\">Custom highlighting rules for ShiKi. They will be injected into the selected theme.\u003C/p> \u003Ch3 id=\"onload\" data-svelte-h=\"svelte-w2wb36\">\u003Ca href=\"#onload\">\u003Ccode>onLoad\u003C/code>\u003C/a>\u003C/h3> \u003Cp data-svelte-h=\"svelte-1qimjqx\">Type: \u003Ccode>(data: { carta: Carta; highlight: HighlightFunctions }) => void\u003C/code>\u003C/p> \u003Cp data-svelte-h=\"svelte-1acr24e\">Use this callback to execute code when one Carta instance loads the extension.\u003C/p>",{"code":4,"map":5},"",null,{"section":7,"title":8},"API","Extension"],"uses":{"url":1}}]}