148 lines
57 KiB
HTML
148 lines
57 KiB
HTML
<!doctype html>
|
||
<html class="dark" lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<link rel="icon" href="../favicon.png" />
|
||
<meta name="viewport" content="width=device-width" />
|
||
|
||
<link href="../_app/immutable/assets/0.7vSfiuRl.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/community-plugins.D9MMIz_R.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/examples.RBYF0z3s.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/index.DMK8G4el.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/math.DAoj5Yzl.css" rel="stylesheet">
|
||
<link href="../_app/immutable/assets/3.DWbm9oEh.css" rel="stylesheet">
|
||
<link rel="modulepreload" href="../_app/immutable/entry/start.BivPHxkC.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/entry.BgMXaDeF.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/scheduler.DKiYiPX0.js">
|
||
<link rel="modulepreload" href="../_app/immutable/entry/app.BXoi511P.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/preload-helper.BQ24v_F8.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/index.z4bt_ZBS.js">
|
||
<link rel="modulepreload" href="../_app/immutable/nodes/0.BI5UDqBb.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/_commonjsHelpers.bU_6Y6tS.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/Link.Dt5uOJAy.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/index.CvmYViMX.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/spread.CgU5AtxT.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/stores.DCXLGCG9.js">
|
||
<link rel="modulepreload" href="../_app/immutable/chunks/index.Ba2w8Bvc.js">
|
||
<link rel="modulepreload" href="../_app/immutable/nodes/3.CzhdhRpU.js"><title>Extension - Carta</title><!-- HEAD_svelte-lepr8h_START --><!-- HEAD_svelte-lepr8h_END -->
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<!-- Inter -->
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<!-- Fira Code -->
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
</head>
|
||
<body data-sveltekit-preload-data="hover">
|
||
<div style="display: contents"> <nav class="fixed left-0 right-0 top-0 z-10 bg-neutral-900 bg-opacity-50 backdrop-blur-2xl backdrop-filter"><div class="container mx-auto flex items-center justify-between px-4 py-1 sm:px-6"><a href="../"><img src="../logo.png" class="h-8" alt="carta logo"></a> <div class="flex-grow"></div> <button class="mr-2 block aspect-square md:hidden" data-svelte-h="svelte-1ff08e9"><iconify-icon icon="ion:search" class="text-2xl text-neutral-200"></iconify-icon></button> <button class="hidden w-[360px] items-center justify-between rounded-lg border border-neutral-700 bg-neutral-900 px-2 py-1.5 text-sm md:flex mx-auto"><div class="inline-flex items-center space-x-2" data-svelte-h="svelte-1kkkjyx"><iconify-icon icon="ion:search" class="text-xl text-neutral-500"></iconify-icon> <span class="text-neutral-500">Search...</span></div> <kbd class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100" data-svelte-h="svelte-zz9ey7"><span class="text-xs">⌘</span>K</kbd></button> <div data-portal="" data-melt-dialog-portalled="" data-bits-dialog-portal=""> </div> <div class="hidden flex-grow md:block"></div> <a href="https://github.com/BearToCode/carta" class="flex h-12 items-center space-x-2 p-2 ml-auto"><iconify-icon icon="mdi:github" class="text-2xl"></iconify-icon> <div class="hidden h-min flex-col justify-center space-y-1 md:flex"><p class="text-[0.9rem] font-semibold leading-3" data-svelte-h="svelte-pjnc05">BearToCode/carta</p> <div class="pulse my-1.5 h-3 w-[80px] rounded-full bg-neutral-800"></div></div></a></div> <div class="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-neutral-900 via-neutral-700 to-neutral-900"></div></nav> <div class="filter-blur-xl min-h-screen w-full py-16 xl:py-24"><div class="fixed bottom-0 left-0 right-0 top-0 z-[-1] backdrop-blur-2xl backdrop-filter" style="background: url(../background.png) no-repeat center center; background-size: cover;"></div> <div class="container mb-4 w-full border-b border-neutral-800 px-4 pb-1 sm:px-6 xl:hidden"><button class="text-neutral-500 hover:text-neutral-200" data-svelte-h="svelte-16xt1x4"><iconify-icon icon="ci:hamburger-lg" class="text-3xl"></iconify-icon></button></div> <div class="container relative mx-auto flex px-4 sm:px-6"><div class="h-full sticky top-24 hidden xl:block"><h3 class="mb-3 ml-4 mt-6 text-sm font-medium first:mt-0 last:mb-0" data-svelte-h="svelte-4l22iw">Overview</h3> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../introduction"><iconify-icon icon="radix-icons:dashboard" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-hmyc8p">Introduction</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../examples"><iconify-icon icon="ph:codesandbox-logo" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-zntwz8">Examples</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../getting-started"><iconify-icon icon="ic:round-download" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-10em7s">Getting Started</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../editing-styles"><iconify-icon icon="lucide:palette" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-1v8s4yb">Editing Styles</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../migration"><iconify-icon icon="material-symbols:upgrade" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-1t554qx">Migration</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../community-plugins"><iconify-icon icon="ph:stack-fill" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-oj1sxw">Community Plugins</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../using-components"><iconify-icon icon="ri:svelte-fill" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-193bojt">Using Components</span></a> <h3 class="mb-3 ml-4 mt-6 text-sm font-medium first:mt-0 last:mb-0" data-svelte-h="svelte-12104bp">Plugins</h3> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/math"><iconify-icon icon="tabler:math" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-17rk523">Math</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/code"><iconify-icon icon="fluent:code-16-filled" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-76jeei">Code</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/emoji"><iconify-icon icon="mingcute:emoji-line" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-64nitr">Emoji</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/slash"><iconify-icon icon="tabler:slash" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-rxesng">Slash</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/tikz"><iconify-icon icon="mdi:draw-pen" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-1aormjr">TikZ</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/attachment"><iconify-icon icon="tdesign:attach" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-ref5p2">Attachment</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../plugins/anchor"><iconify-icon icon="mingcute:link-fill" class="text-xl"></iconify-icon> <span class="text-[0.95rem]" data-svelte-h="svelte-10ozri2">Anchor</span></a> <h3 class="mb-3 ml-4 mt-6 text-sm font-medium first:mt-0 last:mb-0" data-svelte-h="svelte-11166a1">API</h3> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../api/utilities"><span class="text-[0.95rem]" data-svelte-h="svelte-1it2439">Utilities</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../api/core"><span class="text-[0.95rem]" data-svelte-h="svelte-1ud5hhw">Core</span></a> <a class="
|
||
text-neutral-400 hover:bg-neutral-800 hover:text-neutral-300
|
||
inline-flex w-full items-center space-x-2 rounded-lg px-4 py-1.5" href="../api/extension"><span class="text-[0.95rem]" data-svelte-h="svelte-17upky4">Extension</span></a></div> <main class="container max-w-4xl flex-shrink-0 flex-grow px-0 xl:max-w-3xl xl:px-4 2xl:max-w-4xl"> <h3 class="mb-2 font-semibold text-sky-300">API</h3> <h1 class="mb-4 text-5xl font-bold text-white">Extension</h1> <div class="markdown"> <!-- HTML_TAG_START --><h1 id="plugin-properties" data-svelte-h="svelte-te3xm9"><a href="#plugin-properties"><code>Plugin</code> properties</a></h1> <p data-svelte-h="svelte-vqgc1w">You can easily extend Carta by creating custom plugins.</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">const</span> ext<span class="token operator">:</span> Plugin <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">const</span> carta <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Carta</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
extensions<span class="token operator">:</span> <span class="token punctuation">[</span>ext<span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <button 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"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <p data-svelte-h="svelte-ojhiez">Here are all the <code>Plugin</code> properties:</p> <h3 id="transformers" data-svelte-h="svelte-t6l7yj"><a href="#transformers"><code>transformers</code></a></h3> <p data-svelte-h="svelte-xjnbrs">Type: <code>UnifiedTransformer</code></p> <p data-svelte-h="svelte-h81kcw">Remark or Rehype transformers.</p> <h4 id="unifiedtransformerexecution" data-svelte-h="svelte-ebqnks"><a href="#unifiedtransformerexecution"><code>UnifiedTransformer.execution</code></a></h4> <p data-svelte-h="svelte-gibbua">Type: <code>'sync' | 'async'</code></p> <p data-svelte-h="svelte-umc34g">If you specify async, this transformer won’t be available for SSR.</p> <h4 id="unifiedtransformertype" data-svelte-h="svelte-1aor0ss"><a href="#unifiedtransformertype"><code>UnifiedTransformer.type</code></a></h4> <p data-svelte-h="svelte-1v9dwks">Type: <code>'remark' | 'rehype'</code></p> <p 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.</p> <h4 id="unifiedtransformertransform" data-svelte-h="svelte-mx0qo6"><a href="#unifiedtransformertransform"><code>UnifiedTransformer.transform</code></a></h4> <p data-svelte-h="svelte-1jsm31q">Type: <code>({ processor, carta }) => void</code></p> <p data-svelte-h="svelte-2w24mv">The actual processor, can be async if the execution is specified as such.</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token punctuation">{</span>
|
||
execution<span class="token operator">:</span> <span class="token string">'sync'</span><span class="token punctuation">,</span>
|
||
type<span class="token operator">:</span> <span class="token string">'rehype'</span><span class="token punctuation">,</span>
|
||
<span class="token function">transform</span><span class="token punctuation">(</span><span class="token punctuation">{</span> processor <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
processor
|
||
<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>rehypeSlug<span class="token punctuation">)</span>
|
||
<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>rehypeAutolinkHeadings<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span></code><!-- HTML_TAG_END --></pre> <button 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"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h3 id="shortcuts" data-svelte-h="svelte-jocq82"><a href="#shortcuts"><code>shortcuts</code></a></h3> <p data-svelte-h="svelte-ls8kwy">Type: <code>KeyboardShortcut[]</code></p> <p data-svelte-h="svelte-16kpv2s">Additional keyboards shortcut. For example:</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">const</span> shortcut<span class="token operator">:</span> KeyboardShortcut <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token string">'bold'</span><span class="token punctuation">,</span>
|
||
combination<span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'control'</span><span class="token punctuation">,</span> <span class="token string">'b'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">action</span><span class="token operator">:</span> <span class="token punctuation">(</span>input<span class="token punctuation">)</span> <span class="token operator">=></span> input<span class="token punctuation">.</span><span class="token function">toggleSelectionSurrounding</span><span class="token punctuation">(</span><span class="token string">'**'</span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <button 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"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h4 id="keyboardshortcutid" data-svelte-h="svelte-rquu0x"><a href="#keyboardshortcutid"><code>KeyboardShortcut.id</code></a></h4> <p data-svelte-h="svelte-1uqpafo">Type: <code>string</code></p> <p data-svelte-h="svelte-16g2glh">Id of the shortcut.</p> <h4 id="keyboardshortcutcombination" data-svelte-h="svelte-1ayjyp1"><a href="#keyboardshortcutcombination"><code>KeyboardShortcut.combination</code></a></h4> <p data-svelte-h="svelte-88tabz">Type: <code>Set<string></code></p> <p data-svelte-h="svelte-i93vvt">Set of keys, corresponding to the <code>e.key</code> of <code>KeyboardEvent</code>s, but lowercase.</p> <h4 id="keyboardshortcutaction" data-svelte-h="svelte-1a4j8no"><a href="#keyboardshortcutaction"><code>KeyboardShortcut.action</code></a></h4> <p data-svelte-h="svelte-1cxa5mx">Type: <code>(input: InputEnhancer) => void</code></p> <p data-svelte-h="svelte-11hfkx3">Shortcut callback.</p> <h4 id="keyboardshortcutpreventsave" data-svelte-h="svelte-1y6l9pl"><a href="#keyboardshortcutpreventsave"><code>KeyboardShortcut.preventSave</code></a></h4> <p data-svelte-h="svelte-1t38il8">Prevent saving the current state in history.</p> <h3 id="icons" data-svelte-h="svelte-1ebgahj"><a href="#icons"><code>icons</code></a></h3> <p data-svelte-h="svelte-c4b34g">Type: <code>Icon[]</code></p> <p data-svelte-h="svelte-1vzwnn1">Additional toolbar icons. For example:</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">const</span> icon<span class="token operator">:</span> Icon <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token string">'heading'</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">action</span><span class="token operator">:</span> <span class="token punctuation">(</span>input<span class="token punctuation">)</span> <span class="token operator">=></span> input<span class="token punctuation">.</span><span class="token function">toggleLinePrefix</span><span class="token punctuation">(</span><span class="token string">'###'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
component<span class="token operator">:</span> HeadingIcon
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <button 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"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h4 id="iconid" data-svelte-h="svelte-vlce8n"><a href="#iconid"><code>Icon.id</code></a></h4> <p data-svelte-h="svelte-1uqpafo">Type: <code>string</code></p> <p data-svelte-h="svelte-1oavrww">Id of the icon.</p> <h4 id="iconaction" data-svelte-h="svelte-1lns4qa"><a href="#iconaction"><code>Icon.action</code></a></h4> <p data-svelte-h="svelte-1cxa5mx">Type: <code>(input: InputEnhancer) => void</code></p> <p data-svelte-h="svelte-1v7o0af">Click callback.</p> <h4 id="iconcomponent" data-svelte-h="svelte-ifnk2r"><a href="#iconcomponent"><code>Icon.component</code></a></h4> <p data-svelte-h="svelte-3i2tof">Type: <code>ComponentType</code> (SvelteComponent)</p> <p data-svelte-h="svelte-1em7plh">The Icon as a Svelte component.</p> <h3 id="prefixes" data-svelte-h="svelte-1lx4d9z"><a href="#prefixes"><code>prefixes</code></a></h3> <p data-svelte-h="svelte-blajub">Type: <code>Prefix[]</code></p> <p data-svelte-h="svelte-5g0fjc">Text prefixes, default ones include the <code>-</code> for bulleted lists, <code>1.</code> for numbered lists, <code>- [ ]</code> for task lists.</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">const</span> prefix<span class="token operator">:</span> Prefix <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token string">'bulletedList'</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">match</span><span class="token operator">:</span> <span class="token punctuation">(</span>line<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> prefix <span class="token operator">=</span> line<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>prefix <span class="token operator">===</span> <span class="token string">'- '</span><span class="token punctuation">)</span> <span class="token keyword">return</span> prefix<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">maker</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'- '</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <button 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"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h4 id="prefixid" data-svelte-h="svelte-gddn0y"><a href="#prefixid"><code>Prefix.id</code></a></h4> <p data-svelte-h="svelte-1uqpafo">Type: <code>string</code></p> <p data-svelte-h="svelte-1gan88v">Id of the prefix.</p> <h4 id="prefixmatch" data-svelte-h="svelte-17zzrii"><a href="#prefixmatch"><code>Prefix.match</code></a></h4> <p data-svelte-h="svelte-1ktwwvx">Type: <code>(line: string) => string | undefined</code></p> <p data-svelte-h="svelte-k42jg2">Function that returns the prefix, if it is present.</p> <h4 id="prefixmaker" data-svelte-h="svelte-g66sq1"><a href="#prefixmaker"><code>Prefix.maker</code></a></h4> <p data-svelte-h="svelte-1ul36kx">Type: <code>(previousMatch: string, previousLine: string) => string</code></p> <p data-svelte-h="svelte-1rjhqgb">Function that returns the prefix for the new line.</p> <p data-svelte-h="svelte-11lpom8">Example:</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">const</span> prefix<span class="token operator">:</span> Prefix <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||
id<span class="token operator">:</span> <span class="token string">'numberedList'</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">match</span><span class="token operator">:</span> <span class="token punctuation">(</span>line<span class="token punctuation">)</span> <span class="token operator">=></span> line<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^d+.</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token operator">?.</span><span class="token function">at</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">maker</span><span class="token operator">:</span> <span class="token punctuation">(</span>prev<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">Number</span><span class="token punctuation">(</span>prev<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">. </span><span class="token template-punctuation string">`</span></span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <button 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"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h3 id="listeners" data-svelte-h="svelte-1x903hg"><a href="#listeners"><code>listeners</code></a></h3> <p data-svelte-h="svelte-103zbuj">Type: <code>Listener[]</code></p> <p data-svelte-h="svelte-a4iodw">Textarea event listeners. Has an additional <code>carta-render</code> and <code>carta-render-ssr</code> events keys.</p> <div class="relative"><pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">const</span> click<span class="token operator">:</span> Listener <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'I was clicked!'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">const</span> render<span class="token operator">:</span> Listener <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token string">'carta-render'</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">const</span> carta <span class="token operator">=</span> e<span class="token punctuation">.</span>detail<span class="token punctuation">.</span>carta<span class="token punctuation">;</span>
|
||
<span class="token comment">// ...</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
once<span class="token operator">:</span> <span class="token boolean">true</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span></code><!-- HTML_TAG_END --></pre> <button 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"><iconify-icon icon="octicon:copy-16" class="p-2 text-lg"></iconify-icon></button></div> <h3 id="components" data-svelte-h="svelte-a3xxfv"><a href="#components"><code>components</code></a></h3> <p data-svelte-h="svelte-7uoepn">Type: <code>ExtensionComponent[]</code></p> <p data-svelte-h="svelte-1p54v4b">Additional components to be added to the editor or viewer.</p> <h4 id="extensioncomponentlttgtcomponent" data-svelte-h="svelte-4nc8mt"><a href="#extensioncomponentlttgtcomponent"><code>ExtensionComponent<T>.component</code></a></h4> <p data-svelte-h="svelte-19zys37">Type: <code>typeof SvelteComponentTyped<T & { carta: Carta }></code></p> <p data-svelte-h="svelte-1xjyux0">Svelte components that exports <code>carta: Carta</code> and all the other properties specified as the generic parameter and in <code>props</code>.</p> <h4 id="extensioncomponentlttgtprops" data-svelte-h="svelte-1361cdi"><a href="#extensioncomponentlttgtprops"><code>ExtensionComponent<T>.props</code></a></h4> <p data-svelte-h="svelte-1phll8j">Type: <code>T</code></p> <p data-svelte-h="svelte-1hgf4c0">Properties that will be handed to the component.</p> <h4 id="extensioncomponentlttgtparent" data-svelte-h="svelte-4zyqdu"><a href="#extensioncomponentlttgtparent"><code>ExtensionComponent<T>.parent</code></a></h4> <p data-svelte-h="svelte-1greb9j">Type: <code>MaybeArray<'editor' | 'input' | 'renderer' | 'preview'></code></p> <p data-svelte-h="svelte-1oocx94">Where the element will be placed.</p> <h3 id="grammarrules" data-svelte-h="svelte-63aqo3"><a href="#grammarrules"><code>grammarRules</code></a></h3> <p data-svelte-h="svelte-1a6pzpg">Type: <code>GrammarRule[]</code></p> <p data-svelte-h="svelte-v18ein">Custom Markdown TextMate grammar rules for Shiki. They will be injected into the language.</p> <h3 id="highlightrules" data-svelte-h="svelte-7nxrbg"><a href="#highlightrules"><code>highlightRules</code></a></h3> <p data-svelte-h="svelte-map36l">Type: <code>HighlightingRule[]</code></p> <p data-svelte-h="svelte-1p0s8h1">Custom highlighting rules for ShiKi. They will be injected into the selected theme.</p> <h3 id="onload" data-svelte-h="svelte-w2wb36"><a href="#onload"><code>onLoad</code></a></h3> <p data-svelte-h="svelte-1qimjqx">Type: <code>(data: { carta: Carta; highlight: HighlightFunctions }) => void</code></p> <p data-svelte-h="svelte-1acr24e">Use this callback to execute code when one Carta instance loads the extension.</p><!-- HTML_TAG_END --></div> <div class="mt-12 w-full border-t border-neutral-800 text-end" data-svelte-h="svelte-1n4hoz2"><span class="mt-6 block text-sm italic text-neutral-400">Handmade by <a target="_blank" class="hover:text-sky-300 hover:underline" href="https://github.com/BearToCode">Davide</a></span></div></main> <div class="h-full space-y-3 sticky top-24 hidden w-[15rem] flex-shrink-0 xl:block"></div></div></div>
|
||
|
||
<script>
|
||
{
|
||
__sveltekit_190djg1 = {
|
||
base: new URL("..", location).pathname.slice(0, -1),
|
||
assets: "/carta"
|
||
};
|
||
|
||
const element = document.currentScript.parentElement;
|
||
|
||
const data = [null,{"type":"data","data":{content:{html:"\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>",css:{code:"",map:null},head:""},metadata:{section:"API",title:"Extension"}},"uses":{"url":1}}];
|
||
|
||
Promise.all([
|
||
import("../_app/immutable/entry/start.BivPHxkC.js"),
|
||
import("../_app/immutable/entry/app.BXoi511P.js")
|
||
]).then(([kit, app]) => {
|
||
kit.start(app, element, {
|
||
node_ids: [0, 3],
|
||
data,
|
||
form: null,
|
||
error: null
|
||
});
|
||
});
|
||
}
|
||
</script>
|
||
</div>
|
||
</body>
|
||
</html>
|