Merge pull request #8 from BearToCode/dev

v2.0.0

.eslintrc.json

@@ -16,7 +16,9 @@
 		"sourceType": "module"
 	},
 	"plugins": ["@typescript-eslint", "svelte3"],
-	"rules": {},
+	"rules": {
+		"no-mixed-spaces-and-tabs": 0
+	},
 	"settings": {
 		"svelte3/typescript": true
 	}

.prettierignore

@@ -1,11 +1,12 @@
 .DS_Store
 node_modules
-/build
-/.svelte-kit
-/package
+build
+.svelte-kit
+package
 .env
 .env.*
 !.env.example
+dist
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-	"cSpell.words": ["Carta", "cartamd", "Katex"],
+	"cSpell.words": ["Carta", "cartamd", "Katex", "tikzjax", "tikz"],
 	"typescript.tsdk": "node_modules\\typescript\\lib"
 }

README.md

@@ -1,9 +1,11 @@
-# Carta
+<div align="center">
+	<h1>Carta</h1>
+	<a href="https://www.npmjs.com/package/carta-md"><img src="https://img.shields.io/npm/v/carta-md?color=%234f7ce3" alt="npm"></a>
+	<a href="https://bundlephobia.com/package/carta-md"><img src="https://img.shields.io/bundlephobia/min/carta-md?color=%235db8fc" alt="bundle"></a>
+	<a href="https://github.com/BearToCode/carta-md/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/carta-md?color=%232cd1de" alt="license"></a>
+</div>
 
-<a href="https://pnpm.io/"><img src="https://img.shields.io/badge/published%20with-pnpm-%23a255e6" alt="pnpm"></a>
-<a href="https://www.npmjs.com/package/carta-md"><img src="https://img.shields.io/npm/v/carta-md?color=%234f7ce3" alt="npm"></a>
-<a href="https://bundlephobia.com/package/carta-md"><img src="https://img.shields.io/bundlephobia/min/carta-md?color=%235db8fc" alt="bundle"></a>
-<a href="https://github.com/BearToCode/carta-md/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/carta-md?color=%232cd1de" alt="license"></a>
+![Demo](https://github.com/BearToCode/carta-md/blob/master/images/demo.png?raw=true)
 
 A **lightweight**, **fast** and **extensible** Svelte Markdown editor and viewer. Check out the [demo](http://beartocode.me/carta-md/) to see it in action.
 
@@ -14,10 +16,12 @@ Differently from most editors, Carta includes neither ProseMirror nor CodeMirror
 - Keyboard **shortcuts** (extensible);
 - Toolbar (extensible);
 - Markdown syntax highlighting;
+- Scroll sync;
 - **SSR** compatible;
 - **Katex** support (plugin);
 - **Slash** commands (plugin);
 - **Emojis**, with included search (plugin);
+- **Tikz** support(plugin).
 - Code blocks **syntax highlighting** (plugin).
 
 ## Getting started
@@ -45,7 +49,7 @@ npm i @cartamd/plugin-name
 	import { Carta, CartaEditor } from 'carta-md';
 	// Component default theme
 	import 'carta-md/default-theme.css';
-	// Markdown input theme (PrismJS)
+	// Markdown input theme (Speed Highlight)
 	import 'carta-md/light.css';
 
 	const carta = new Carta({
@@ -85,6 +89,7 @@ Each plugin's _readme_ includes a guide on its use.
 | [plugin-slash](https://github.com/BearToCode/carta-md/tree/master/packages/plugin-slash) | Slash commands support                  |
 | [plugin-emoji](https://github.com/BearToCode/carta-md/tree/master/packages/plugin-emoji) | Emojis support, including inline search |
 | [plugin-code](https://github.com/BearToCode/carta-md/tree/master/packages/plugin-code)   | Code blocks syntax highlighting         |
+| [plugin-tikz](https://github.com/BearToCode/carta-md/tree/master/packages/plugin-tikz)   | TikZ support using TikZJax              |
 
 ## Themes customization
 
@@ -94,7 +99,7 @@ Check out the [default theme](https://github.com/BearToCode/carta-md/blob/master
 
 If you are using a plugin, look at its _readme_ for its customization.
 
-Markdown highlighting is done using **PrismJS**, [here](https://github.com/PrismJS/prism-themes) you can find some themes, but you can find more by searching online.
+Markdown highlighting is done using **Speed Highlight JS**, [here](https://github.com/speed-highlight/core/tree/main/src/themes) you can find more themes.
 
 You can find complete Markdown stylesheet online. For example [github-markdown-css](https://github.com/sindresorhus/github-markdown-css)(used in the demo), or [tailwind-typography](https://tailwindcss.com/docs/typography-plugin).
 
@@ -108,9 +113,9 @@ Carta options:
 | ------------------ | ------------------------------ | ----------------------------------------------- |
 | `extensions`       | `CartaExtension[]`             | Editor/viewer extensions                        |
 | `rendererDebounce` | `number`                       | Renderer debouncing timeout, in ms (def. 300ms) |
-| `disableShortcuts` | `DefaultShortcutId[]`          | Remove default shortcuts by ids                 |
-| `disableIcons`     | `DefaultIconId[]`              | Remove default icons by ids                     |
-| `disablePrefixes`  | `DefaultPrefixId[]`            | Remove default prefixes by ids                  |
+| `disableShortcuts` | `DefaultShortcutId[] \| true`  | Remove default shortcuts by ids                 |
+| `disableIcons`     | `DefaultIconId[] \| true`      | Remove default icons by ids                     |
+| `disablePrefixes`  | `DefaultPrefixId[] \| true`    | Remove default prefixes by ids                  |
 | `historyOptions`   | `Partial<CartaHistoryOptions>` | History (Undo/Redo) options                     |
 | `sanitizer`        | `(html: string) => string`     | HTML sanitizer                                  |
 
@@ -124,6 +129,7 @@ You can easily extend Carta by creating custom plugins. Here are all the `CartaE
 | `prefixes`         | `Prefix[]`                     | Additional prefixes                                                                                                                                                                     |
 | `listeners`        | `CartaListener[]`              | Textarea event listeners                                                                                                                                                                |
 | `components`       | `CartaExtensionComponentArray` | Additional components, that will be put after the editor. All components are given a `carta: Carta`. prop The editor has a `relative` position, so you can position elements absolutely |
+| `highlightRules`   | `HighlightRule[]`              | Custom markdown highlight rules. See [Speed-Highlight Wiki](https://github.com/speed-highlight/core/wiki/Create-or-suggest-new-languages).                                              |
 
 If you created a plugin and want to share it, you can open an _issue_ and we will consider sponsoring it on this guide.
 

demo/package.json

@@ -31,6 +31,7 @@
 		"@cartamd/plugin-emoji": "workspace:^",
 		"@cartamd/plugin-math": "workspace:^",
 		"@cartamd/plugin-slash": "workspace:^",
+		"@cartamd/plugin-tikz": "workspace:^",
 		"@speed-highlight/core": "^1.1.11",
 		"carta-md": "workspace:^",
 		"katex": "^0.16.7"

demo/src/routes/+page.svelte

@@ -4,6 +4,7 @@
 	import { slash } from '@cartamd/plugin-slash';
 	import { emoji } from '@cartamd/plugin-emoji';
 	import { code } from '@cartamd/plugin-code';
+	import { tikz } from '@cartamd/plugin-tikz';
 	import { placeholderText } from './placeholder';
 
 	import 'carta-md/default-theme.css';
@@ -14,10 +15,14 @@
 	import '@cartamd/plugin-code/default.css';
 	import '@cartamd/plugin-slash/default-theme.css';
 	import '@cartamd/plugin-emoji/default-theme.css';
+	import '@cartamd/plugin-tikz/fonts.css';
 
 	const carta = new Carta({
-		extensions: [math(), slash(), emoji(), code()]
+		extensions: [tikz(), slash(), emoji(), code(), math()]
 	});
+
+	let syncScroll = true;
+	let mode: 'tabs' | 'split' | 'auto' = 'auto';
 </script>
 
 <svelte:head>
@@ -35,7 +40,35 @@
 </svelte:head>
 
 <main>
-	<CartaEditor value={placeholderText} {carta} />
+	<div class="options">
+		<fieldset>
+			<legend>Scroll</legend>
+
+			<input bind:checked={syncScroll} type="checkbox" id="scroll" name="scroll" />
+			<label for="scroll">Sync scroll</label>
+		</fieldset>
+
+		<fieldset>
+			<legend>Editor mode</legend>
+
+			<div>
+				<input type="radio" id="auto" name="drone" value="auto" bind:group={mode} />
+				<label for="auto">Auto</label>
+			</div>
+
+			<div>
+				<input type="radio" id="tabs" name="drone" value="tabs" bind:group={mode} />
+				<label for="tabs">Tabs</label>
+			</div>
+
+			<div>
+				<input type="radio" id="split" name="drone" value="split" bind:group={mode} />
+				<label for="split">Split</label>
+			</div>
+		</fieldset>
+	</div>
+
+	<CartaEditor value={placeholderText} scroll={syncScroll ? 'sync' : 'async'} {carta} {mode} />
 </main>
 
 <style>
@@ -60,6 +93,15 @@
 		padding: 2rem 0 2rem 0;
 	}
 
+	fieldset {
+		display: flex;
+	}
+
+	.options {
+		margin-bottom: 1.5rem;
+		display: flex;
+	}
+
 	/* Responsive main */
 
 	@media screen and (max-width: 640px) {

demo/src/routes/placeholder.ts

@@ -1,6 +1,33 @@
-export const placeholderText = `# :notebook_with_decorative_cover: Carta Demo
+export const placeholderText = `# Carta Demo
+
+Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the **Galaxy** lies a small unregarded yellow sun.
+Orbiting this at a distance of roughly _ninety-two million miles_ is an utterly insignificant little blue green planet :earth_africa: whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.
+\`\`\`tikz
+\\usepackage{pgfplots}
+\\pgfplotsset{compat=1.16}
+
+\\pgfplotsset{width=7cm,compat=1.8}
+\\begin{document}
+\\begin{tikzpicture}[thick,scale=1.2, every node/.style={scale=1.2}]
+  \\begin{axis}
+     \\addplot3[
+         surf,
+         colormap/viridis,
+         samples=20,
+         domain=0:2*pi,
+         y domain=0:2*pi,
+         z buffer=sort
+       ]
+       ( {(2+cos(deg(x)))*cos(deg(y+pi/2))}, 
+         {(2+cos(deg(x)))*sin(deg(y+pi/2))}, 
+         {sin(deg(x))}
+       );
+  \\end{axis}
+\\end{tikzpicture}
+\\end{document}
+\`\`\`
 
-## :page_with_curl: Markdown
+# Basic Markdown
 
 You can have different types of text: **bold**, _italic_, \`code\` and ~~strikethrough~~. This is a [link](http://beartocode.me/carta-md/) to the page you are currently viewing.
 
@@ -24,18 +51,17 @@ And then some lists:
  
 You can also create tables, like so:
 
-| Name  | Age | Occupation |
-| ----  | --- | ---------- |
-| Emily | 28  | Programmer |
-| Jack  | 42  | Lawyer     |
-| Sarah | 35  | Doctor     |
-| Alex  | 19  | Student    |
+| Item    | Price | Origin |
+| ------- | ----- | ------ |
+| :apple: | 2.1   | Italy  |
+| :banana:| 42    | Brazil |
+| :lemon: | 18    | Spain  |
 
-With the \`plugin-slash\`, you can also use the **slash** (/) to have a list of commands. Try it!
+# Official Plugins
 
-## :computer: Code
+## \`plugin-code\`
 
-Using the \`plugin-code\`, you can have syntax highlighting on your code blocks.
+This plugin adds support for **syntax highlighting** on your code blocks:
 
 \`\`\`rs
 fn visit_mars() {
@@ -45,22 +71,51 @@ fn visit_mars() {
 	spaceship.head_to(Planet::Mars);
 	thread::sleep(Time::Month(6));
 	spaceship.land();
-
-	let humans = spaceship.unload();
 }
 \`\`\`
 
-## :mortar_board: Math
+## \`plugin-math\`
 
-You can use \`plugin-math\` to write beautiful Katex expressions, both _inline_ $\\underline{v}=A-\\lambda I_d$, and as _block_:
+
+With this plugin you can write beautiful Katex expressions, both _inline_ $\\underline{v}=A-\\lambda I_d$, and as _block_ equations:
 
 $$
 {\\displaystyle {\\boldsymbol {\\sigma }}=\\zeta (\\nabla \\cdot \\mathbf {u} )\\mathbf {I} +\\mu \\left[\\nabla \\mathbf {u} +(\\nabla \\mathbf {u} )^{\\mathrm {T} }-{\\tfrac {2}{3}}(\\nabla \\cdot \\mathbf {u} )\\mathbf {I} \\right]}
 $$
 
-## :smile_cat: Emojis
+## \`plugin-emoji\`
+
+Adds support for **emojis**, as well as an inline emoji search, that appears after typing a colon. :smile_cat:
+
+Try typing an icon to see the inline search. :alien:
+
+## \`plugin-slash\`
+
+Use a **slash** / to use commands while writing markdown. You can add your custom commands too. Also includes a inline command search.
+
+## \`plugin-tikz\`
+
+
+\`\`\`tikz
+\\usepackage{pgfplots}
+\\pgfplotsset{compat=1.16}
+\\pgfplotsset{width=7cm}
+
+\\begin{document}
+\\begin{tikzpicture}[thick,scale=1.2, every node/.style={scale=1.2}]
+  \\begin{axis}[domain=-1:1,y domain=-1:1]
+    \\addplot3[
+	surf,
+	colormap/viridis,
+	samples = 18
+	] 
+    {x*y*exp(x+2*y-9*x^2-9*y^2)};
+  \\end{axis}
+\\end{tikzpicture}
+\\end{document}
+\`\`\`
+
+Adds support for **TikZ**, thanks to [TikZJax](https://tikzjax.com/).
 
-And with \`plugin-emoji\` you can also use emojis:exclamation:
 
-Try and type a colon (:), you can also search them! :alien:
 `;

demo/tsconfig.json

@@ -9,8 +9,7 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true
-	},
-	"references": [{ "path": "../packages/tsconfig.json" }]
+	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes

package.json

@@ -10,6 +10,7 @@
 	},
 	"scripts": {
 		"preinstall": "npx only-allow pnpm",
+		"postinstall": "node ./scripts/gen-speed-highlight.js",
 		"core": "cd packages/carta-md && npm run dev",
 		"dev": "cd demo && npm run dev",
 		"check": "cd packages/carta-md && npm run check",

packages/carta-md/.gitignore

@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+speed-highlight