carta/migration.html
2024-05-02 17:30:58 +00:00

108 lines
20 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>Migration Guide - 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">Overview</h3> <h1 class="mb-4 text-5xl font-bold text-white">Migration Guide</h1> <div class="markdown"> <!-- HTML_TAG_START --><h1 id="major-changes" data-svelte-h="svelte-1tg160a"><a href="#major-changes">Major Changes</a></h1> <h2 id="removal-of-marked" data-svelte-h="svelte-1ym65x3"><a href="#removal-of-marked">Removal of Marked</a></h2> <p data-svelte-h="svelte-s8z3r2">Marked has been replaced with a combination of Unified, Remark and Rehype. If you previously used a custom plugin with it, youll have to update it manually. Otherwise, all builtin plugins have already been updated. Make sure to <strong>update</strong> them!</p> <p data-svelte-h="svelte-1irrcb9">Some plugins now have a different implementation and their options have changed. Those plugins are <a href="https://beartocode.github.io/carta/plugins/math" rel="nofollow">plugin-math</a> and <a href="https://beartocode.github.io/carta/plugins/anchor" rel="nofollow">plugin-anchor</a>.</p> <h2 id="syntax-highlighter-update" data-svelte-h="svelte-1ym73dx"><a href="#syntax-highlighter-update">Syntax highlighter update</a></h2> <p data-svelte-h="svelte-3rqw20">SpeedHighlight has been replaced with <a href="https://shiki.matsu.io/" rel="nofollow">Shiki</a>. It now offers support for more languages, themes, and extensibility.</p> <p data-svelte-h="svelte-511g4">Make sure to remove previous themes imports, as Shiki uses JS based ones.</p> <pre class="language-ts"><!-- HTML_TAG_START --><code class="language-ts"><span class="token keyword">import</span> <span class="token string">'carta-md/light.css'</span><span class="token punctuation">;</span> <span class="token comment">// 👈 To be removed!</span></code><!-- HTML_TAG_END --></pre> <p data-svelte-h="svelte-19786vm">And also update the default theme. Previous based selectors should be removed:</p> <pre class="language-css"><!-- HTML_TAG_START --><code class="language-css"><span class="token comment">/* 👇 To be removed! */</span>
<span class="token selector">[class*='shj-lang-']</span> <span class="token punctuation">&#123;</span>
<span class="token comment">/* ... */</span>
<span class="token punctuation">&#125;</span></code><!-- HTML_TAG_END --></pre> <h2 id="removed-verbose-prefixes" data-svelte-h="svelte-3mj8ha"><a href="#removed-verbose-prefixes">Removed verbose prefixes</a></h2> <p data-svelte-h="svelte-rnaylg">Many exports have been renamed to make them less verbose:</p> <ul data-svelte-h="svelte-4cgeij"><li><code>CartaEditor</code> -&gt; <code>MarkdownEditor</code> (old one still supported);</li> <li><code>CartaRenderer</code> -&gt; <code>Markdown</code> (old one still supported);</li> <li><code>CartaEvent</code> -&gt; <code>Event</code>;</li> <li><code>CartaEventType</code> -&gt; <code>EventType</code>;</li> <li><code>CartaExtension</code> -&gt; <code>Plugin</code>;</li> <li><code>CartaExtensionComponent</code> -&gt; <code>ExtensionComponent</code>;</li> <li><code>CartaOptions</code> -&gt; <code>Options</code>;</li> <li><code>CartaHistory</code> -&gt; <code>TextAreaHistory</code>;</li> <li><code>CartaHistoryOptions</code> -&gt; <code>TextAreaHistoryOptions</code>;</li> <li><code>CartaIcon</code> -&gt; <code>Icon</code>;</li> <li><code>CartaListener</code> -&gt; <code>Listener</code>;</li> <li><code>CartaInput</code> -&gt; <code>InputEnhancer</code>;</li> <li><code>CartaRenderer</code> -&gt; <code>Renderer</code>;</li> <li><code>CartaLabels</code> -&gt; <code>Labels</code>;</li></ul> <h1 id="minor-changes" data-svelte-h="svelte-1cxdvk6"><a href="#minor-changes">Minor Changes</a></h1> <ul data-svelte-h="svelte-8dheqx"><li>If you dont use a sanitizer, you need to explicitly set it to <code>false</code>;</li> <li>Removed deprecated option <code>cartaRef</code> and <code>shjRef</code> for extensions;</li> <li>Removed deprecated options <code>postProcess</code> for <code>plugin-tikz</code>;</li> <li><code>Carta.options</code> are no longer available.</li></ul><!-- 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=\"major-changes\" data-svelte-h=\"svelte-1tg160a\">\u003Ca href=\"#major-changes\">Major Changes\u003C/a>\u003C/h1> \u003Ch2 id=\"removal-of-marked\" data-svelte-h=\"svelte-1ym65x3\">\u003Ca href=\"#removal-of-marked\">Removal of Marked\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-s8z3r2\">Marked has been replaced with a combination of Unified, Remark and Rehype. If you previously used a custom plugin with it, youll have to update it manually. Otherwise, all builtin plugins have already been updated. Make sure to \u003Cstrong>update\u003C/strong> them!\u003C/p> \u003Cp data-svelte-h=\"svelte-1irrcb9\">Some plugins now have a different implementation and their options have changed. Those plugins are \u003Ca href=\"https://beartocode.github.io/carta/plugins/math\" rel=\"nofollow\">plugin-math\u003C/a> and \u003Ca href=\"https://beartocode.github.io/carta/plugins/anchor\" rel=\"nofollow\">plugin-anchor\u003C/a>.\u003C/p> \u003Ch2 id=\"syntax-highlighter-update\" data-svelte-h=\"svelte-1ym73dx\">\u003Ca href=\"#syntax-highlighter-update\">Syntax highlighter update\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-3rqw20\">SpeedHighlight has been replaced with \u003Ca href=\"https://shiki.matsu.io/\" rel=\"nofollow\">Shiki\u003C/a>. It now offers support for more languages, themes, and extensibility.\u003C/p> \u003Cp data-svelte-h=\"svelte-511g4\">Make sure to remove previous themes imports, as Shiki uses JS based ones.\u003C/p> \u003Cpre class=\"language-ts\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-ts\">\u003Cspan class=\"token keyword\">import\u003C/span> \u003Cspan class=\"token string\">'carta-md/light.css'\u003C/span>\u003Cspan class=\"token punctuation\">;\u003C/span> \u003Cspan class=\"token comment\">// 👈 To be removed!\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Cp data-svelte-h=\"svelte-19786vm\">And also update the default theme. Previous based selectors should be removed:\u003C/p> \u003Cpre class=\"language-css\">\u003C!-- HTML_TAG_START -->\u003Ccode class=\"language-css\">\u003Cspan class=\"token comment\">/* 👇 To be removed! */\u003C/span>\n\u003Cspan class=\"token selector\">[class*='shj-lang-']\u003C/span> \u003Cspan class=\"token punctuation\">&#123;\u003C/span>\n\t\u003Cspan class=\"token comment\">/* ... */\u003C/span>\n\u003Cspan class=\"token punctuation\">&#125;\u003C/span>\u003C/code>\u003C!-- HTML_TAG_END -->\u003C/pre> \u003Ch2 id=\"removed-verbose-prefixes\" data-svelte-h=\"svelte-3mj8ha\">\u003Ca href=\"#removed-verbose-prefixes\">Removed verbose prefixes\u003C/a>\u003C/h2> \u003Cp data-svelte-h=\"svelte-rnaylg\">Many exports have been renamed to make them less verbose:\u003C/p> \u003Cul data-svelte-h=\"svelte-4cgeij\">\u003Cli>\u003Ccode>CartaEditor\u003C/code> -&gt; \u003Ccode>MarkdownEditor\u003C/code> (old one still supported);\u003C/li> \u003Cli>\u003Ccode>CartaRenderer\u003C/code> -&gt; \u003Ccode>Markdown\u003C/code> (old one still supported);\u003C/li> \u003Cli>\u003Ccode>CartaEvent\u003C/code> -&gt; \u003Ccode>Event\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>CartaEventType\u003C/code> -&gt; \u003Ccode>EventType\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>CartaExtension\u003C/code> -&gt; \u003Ccode>Plugin\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>CartaExtensionComponent\u003C/code> -&gt; \u003Ccode>ExtensionComponent\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>CartaOptions\u003C/code> -&gt; \u003Ccode>Options\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>CartaHistory\u003C/code> -&gt; \u003Ccode>TextAreaHistory\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>CartaHistoryOptions\u003C/code> -&gt; \u003Ccode>TextAreaHistoryOptions\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>CartaIcon\u003C/code> -&gt; \u003Ccode>Icon\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>CartaListener\u003C/code> -&gt; \u003Ccode>Listener\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>CartaInput\u003C/code> -&gt; \u003Ccode>InputEnhancer\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>CartaRenderer\u003C/code> -&gt; \u003Ccode>Renderer\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>CartaLabels\u003C/code> -&gt; \u003Ccode>Labels\u003C/code>;\u003C/li>\u003C/ul> \u003Ch1 id=\"minor-changes\" data-svelte-h=\"svelte-1cxdvk6\">\u003Ca href=\"#minor-changes\">Minor Changes\u003C/a>\u003C/h1> \u003Cul data-svelte-h=\"svelte-8dheqx\">\u003Cli>If you dont use a sanitizer, you need to explicitly set it to \u003Ccode>false\u003C/code>;\u003C/li> \u003Cli>Removed deprecated option \u003Ccode>cartaRef\u003C/code> and \u003Ccode>shjRef\u003C/code> for extensions;\u003C/li> \u003Cli>Removed deprecated options \u003Ccode>postProcess\u003C/code> for \u003Ccode>plugin-tikz\u003C/code>;\u003C/li> \u003Cli>\u003Ccode>Carta.options\u003C/code> are no longer available.\u003C/li>\u003C/ul>",css:{code:"",map:null},head:""},metadata:{title:"Migration Guide",section:"Overview"}},"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>