New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@cartamd/plugin-attachment
Advanced tools
@cartamd/plugin-attachment - npm Package Compare versions
Comparing version 2.7.1 to 2.7.2
| { | ||
| "name": "@cartamd/plugin-attachment", | ||
| "version": "2.7.1", | ||
| "version": "2.7.2", | ||
| "type": "module", | ||
@@ -23,3 +23,3 @@ "main": "./dist/index.js", | ||
| "files": ["dist", "!dist/**/*.test.*", "!dist/**/*.spec.*"], | ||
| "peerDependencies": { "carta-md": "^2.7.1", "marked": "^4.3.0", "svelte": "^3.54.0 || ^4.0.0" }, | ||
| "peerDependencies": { "carta-md": "^2.7.2", "marked": "^4.3.0", "svelte": "^3.54.0 || ^4.0.0" }, | ||
| "devDependencies": { | ||
@@ -26,0 +26,0 @@ "@sveltejs/adapter-auto": "^2.0.0", |
185
README.md
@@ -1,66 +0,28 @@ | ||
| <div align="center"> | ||
| <img src="https://see.fontimg.com/api/renderfont4/lemD/eyJyIjoiZnMiLCJoIjoxMjMsInciOjEyNTAsImZzIjo5OCwiZmdjIjoiIzQ2RUJFNyIsImJnYyI6IiNGRkZGRkYiLCJ0IjoxfQ/Q2FydGE/bukhari-script.png" width="240" alt="logo"> | ||
| </div> | ||
| # Carta Attachment Plugin | ||
| <br> | ||
| This plugin adds support for attachments. Install it using: | ||
| <div align="center"> | ||
| <a href="https://www.npmjs.com/package/carta-md"><img src="https://img.shields.io/npm/v/carta-md?color=16b57c&labelColor=171d27&logo=npm&logoColor=white" alt="npm"></a> | ||
| <a href="https://bundlephobia.com/package/carta-md"><img src="https://img.shields.io/bundlephobia/min/carta-md?color=16b57c&labelColor=171d27&logo=javascript&logoColor=white" 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=16b57c&labelColor=171d27&logo=git&logoColor=white" alt="license"></a> | ||
| <a href="http://beartocode.github.io/carta-md/"><img src="https://img.shields.io/badge/available-red?label=demo&color=16b57c&labelColor=171d27&logo=svelte&logoColor=white" alt="demo"></a> | ||
| </div> | ||
| ``` | ||
| npm i @cartamd/plugin-attachment | ||
| ``` | ||
| <br> | ||
| ## Setup | ||
| Carta is a **lightweight**, **fast** and **extensible** Svelte Markdown editor and viewer, based on [Marked](https://github.com/markedjs/marked). Check out the [demo](http://beartocode.github.io/carta-md/) to see it in action. | ||
| Differently from most editors, Carta includes neither ProseMirror nor CodeMirror, allowing for an extremely small bundle size and fast loading time. | ||
| ### Styles | ||
| ## Features | ||
| Import the default theme, or create you own: | ||
| - 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); | ||
| - **Attachment** support(plugin); | ||
| - Code blocks **syntax highlighting** (plugin). | ||
| ## Getting started | ||
| > **Warning** | ||
| > Sanitization is not dealt with by Carta. You need to provide a `sanitizer` in the options. | ||
| > Common sanitizers are [isomorphic-dompurify](https://www.npmjs.com/package/isomorphic-dompurify) (suggested) and [sanitize-html](https://www.npmjs.com/package/sanitize-html). | ||
| ### Installation | ||
| Core package: | ||
| ```ts | ||
| import '@cartamd/plugin-attachment/default.css'; | ||
| ``` | ||
| npm i carta-md | ||
| ``` | ||
| Plugins: | ||
| ### Extension | ||
| ``` | ||
| npm i @cartamd/plugin-name | ||
| ``` | ||
| ### Basic configuration | ||
| ```svelte | ||
| <script lang="ts"> | ||
| import { Carta, CartaEditor } from 'carta-md'; | ||
| // Component default theme | ||
| import 'carta-md/default-theme.css'; | ||
| // Markdown input theme (Speed Highlight) | ||
| import 'carta-md/light.css'; | ||
| import { attachment } from '@cartamd/plugin-attachment'; | ||
| const carta = new Carta({ | ||
| // Remember to use a sanitizer to prevent XSS attacks | ||
| // sanitizer: mySanitizer | ||
| extensions: [attachment()] | ||
| }); | ||
@@ -70,95 +32,38 @@ </script> | ||
| <CartaEditor {carta} /> | ||
| <style> | ||
| /* Or in global stylesheet */ | ||
| /* Set your custom monospace font */ | ||
| :global(.carta-font-code) { | ||
| font-family: '...', monospace; | ||
| } | ||
| </style> | ||
| ``` | ||
| Editor component exported properties: | ||
| ## Options | ||
| | Name | Type | Description | | ||
| | ---------------- | ----------------------------- | ----------------------------------------- | | ||
| | `carta` | `Carta` | Carta Editor | | ||
| | `theme` | `string` | For custom css themes, see below for more | | ||
| | `value` | `string` | Markdown input | | ||
| | `placeholder` | `string` | Placeholder text for textarea | | ||
| | `mode` | `'tabs' \| 'split' \| 'auto'` | Tabs settings | | ||
| | `disableToolbar` | `boolean` | Option to disable the toolbar | | ||
| Here are the options you can pass to `attachment()`: | ||
| ### Plugins | ||
| Each plugin's _readme_ includes a guide on its use. | ||
| | Name | Description | | ||
| | -------------------------------------------------------------------------------------------------- | --------------------------------------- | | ||
| | [plugin-math](https://github.com/BearToCode/carta-md/tree/master/packages/plugin-math) | Katex support | | ||
| | [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 | | ||
| | [plugin-attachment](https://github.com/BearToCode/carta-md/tree/master/packages/plugin-attachment) | Attachments support | | ||
| ## Themes customization | ||
| By using the `theme` property in `CartaEditor` and `CartaPreview` you can change their classes to `carta-editor__{theme}` and `carta-viewer__{theme}`. | ||
| Check out the [default theme](https://github.com/BearToCode/carta-md/blob/master/packages/carta-md/src/lib/default-theme.css) to customize it. | ||
| If you are using a plugin, look at its _readme_ for its customization. | ||
| 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). | ||
| ## Extensibility | ||
| ### Options | ||
| Carta options: | ||
| | Name | Type | Description | | ||
| | ------------------ | ------------------------------ | ----------------------------------------------- | | ||
| | `extensions` | `CartaExtension[]` | Editor/viewer extensions | | ||
| | `rendererDebounce` | `number` | Renderer debouncing timeout, in ms (def. 300ms) | | ||
| | `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 | | ||
| | `mangle` | `false` | Allows disabling of marked-mangle | | ||
| | `gfmHeadingId` | `GfmHeadingIdOptions \| false` | marked-gfm-heading-id options, or disabling | | ||
| You can easily extend Carta by creating custom plugins. Here are all the `CartaExtension` properties: | ||
| | Name | Type | Description | | ||
| | ------------------ | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `markedExtensions` | `marked.MarkedExtension[]` | Marked extensions, more on that [here](https://marked.js.org/using_advanced) | | ||
| | `shortcuts` | `KeyboardShortcut[]` | Additional keyboard shortcuts | | ||
| | `icons` | `CartaIcon[]` | Additional icons | | ||
| | `prefixes` | `Prefix[]` | Additional prefixes | | ||
| | `listeners` | `CartaListener[]` | Textarea event listeners | | ||
| | `components` | `CartaExtensionComponents` | 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). | | ||
| | `onLoad` | `(data: { carta:Carta, ... }) => void` | Use this callback to execute code when one Carta instance loads the extension. | | ||
| If you created a plugin and want to share it, you can open an _issue_ and we will consider sponsoring it on this guide. | ||
| ## Contributions | ||
| Every contribution is well accepted. If you have a feature request you can open a new issue. | ||
| This package uses a [pnpm workspace](https://pnpm.io/workspaces), so pnpm is required to download and put everything together properly. | ||
| ### Committing | ||
| This repository is [commitizen](https://github.com/commitizen/cz-cli) friendly. To commit use: | ||
| ```ts | ||
| export interface AttachmentExtensionOptions { | ||
| /** | ||
| * Upload a file to the server. Return the url of the uploaded file. | ||
| * If an error occurs, return null. This function does **not** handle errors. | ||
| * @param file The file to upload | ||
| * @returns The uploaded file url, or null if it failed | ||
| */ | ||
| upload: (file: File) => Promise<string | null>; | ||
| /** | ||
| * Supported mime types. | ||
| * | ||
| * @default ['image/png', 'image/jpeg', 'image/gif', 'image/svg+xml']. | ||
| */ | ||
| supportedMimeTypes?: string[]; | ||
| /** | ||
| * Whether to disable the attach icon. | ||
| * | ||
| * @default false | ||
| */ | ||
| disableIcon?: boolean; | ||
| /** | ||
| * Custom drop overlay component. Use `false` to disable the overlay. | ||
| */ | ||
| dropOverlay?: false | typeof SvelteComponent; | ||
| /** | ||
| * Custom loading overlay component. Use `false` to disable the overlay. | ||
| */ | ||
| loadingOverlay?: false | typeof SvelteComponent<{ uploadingFiles: Writable<File[]> }>; | ||
| } | ||
| ``` | ||
| npm run commit | ||
| # or, if you have commitizen installed globally | ||
| git cz | ||
| ``` |
No alert changes
Worsened metrics
- Total package byte prevSize
16945
-33.52%- Number of lines in readme file
69
-57.93%No dependency changes