diff --git a/docs/src/demos/Experiments/CharacterLimit/extension/index.ts b/docs/src/demos/Experiments/CharacterLimit/extension/index.ts deleted file mode 100644 index 7770eb81..00000000 --- a/docs/src/demos/Experiments/CharacterLimit/extension/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { CharacterLimit } from './CharacterLimit' - -export * from './CharacterLimit' -export default CharacterLimit diff --git a/docs/src/demos/Experiments/CharacterLimit/index.vue b/docs/src/demos/Extensions/CharacterCount/index.vue similarity index 79% rename from docs/src/demos/Experiments/CharacterLimit/index.vue rename to docs/src/demos/Extensions/CharacterCount/index.vue index fa5d9cdb..5304ed85 100644 --- a/docs/src/demos/Experiments/CharacterLimit/index.vue +++ b/docs/src/demos/Extensions/CharacterCount/index.vue @@ -1,8 +1,9 @@ @@ -12,7 +13,7 @@ import { Editor, EditorContent } from '@tiptap/vue-starter-kit' import Document from '@tiptap/extension-document' import Paragraph from '@tiptap/extension-paragraph' import Text from '@tiptap/extension-text' -import CharacterLimit from './extension' +import CharacterCount from '@tiptap/extension-character-count' export default { components: { @@ -32,7 +33,7 @@ export default { Document, Paragraph, Text, - CharacterLimit.configure({ + CharacterCount.configure({ limit: this.limit, }), ], @@ -70,6 +71,10 @@ export default { .character-limit { margin-top: 1rem; - color: #adb5bd; + color: #868e96; + + &--warning { + color: #f03e3e; + } } diff --git a/docs/src/docPages/api/extensions/character-count.md b/docs/src/docPages/api/extensions/character-count.md new file mode 100644 index 00000000..53d8ea5d --- /dev/null +++ b/docs/src/docPages/api/extensions/character-count.md @@ -0,0 +1,25 @@ +# CharacterCount +[![Version](https://img.shields.io/npm/v/@tiptap/extension-character-count.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-character-count) +[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-character-count.svg)](https://npmcharts.com/compare/@tiptap/extension-character-count?minimal=true) + +The `CharacterCount` extension limits the number of allowed character to a specific length. That’s it, that’s all. + +## Installation +```bash +# with npm +npm install @tiptap/extension-character-count + +# with Yarn +yarn add @tiptap/extension-character-count +``` + +## Settings +| Option | Type | Default | Description | +| ------ | -------- | ------- | -------------------------------------------------------- | +| limit | `Number` | `0` | The maximum number of characters that should be allowed. | + +## Source code +[packages/extension-character-count/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-character-count/) + +## Usage + diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md index 4315079e..89d5f090 100644 --- a/docs/src/docPages/experiments.md +++ b/docs/src/docPages/experiments.md @@ -9,4 +9,4 @@ Congratulations! You’ve found our secret playground with a list of experiments * [Commands](/experiments/commands) ## Waiting for approval -* [CharacterLimit](/experiments/character-limit) +– diff --git a/docs/src/docPages/experiments/character-limit.md b/docs/src/docPages/experiments/character-limit.md deleted file mode 100644 index fa6a209a..00000000 --- a/docs/src/docPages/experiments/character-limit.md +++ /dev/null @@ -1,5 +0,0 @@ -# CharacterLimit - -⚠️ Experiment - - diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 73023311..921c161d 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -183,6 +183,9 @@ # - title: Annotation # link: /api/extensions/annotation # type: draft + - title: CharacterCount + link: /api/extensions/character-count + type: new - title: Collaboration link: /api/extensions/collaboration type: pro diff --git a/packages/extension-character-count/README.md b/packages/extension-character-count/README.md new file mode 100644 index 00000000..555586c2 --- /dev/null +++ b/packages/extension-character-count/README.md @@ -0,0 +1,14 @@ +# @tiptap/extension-character-count +[![Version](https://img.shields.io/npm/v/@tiptap/extension-character-count.svg?label=version)](https://www.npmjs.com/package/@tiptap/extension-character-count) +[![Downloads](https://img.shields.io/npm/dm/@tiptap/extension-character-count.svg)](https://npmcharts.com/compare/tiptap?minimal=true) +[![License](https://img.shields.io/npm/l/@tiptap/extension-character-count.svg)](https://www.npmjs.com/package/@tiptap/extension-character-count) +[![Sponsor](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub)](https://github.com/sponsors/ueberdosis) + +## Introduction +tiptap is a headless wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich text WYSIWYG editors, which is already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*. + +## Offical Documentation +Documentation can be found on the [tiptap website](https://tiptap.dev). + +## License +tiptap is open-sourced software licensed under the [MIT license](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md). diff --git a/packages/extension-character-count/package.json b/packages/extension-character-count/package.json new file mode 100644 index 00000000..e745a8c3 --- /dev/null +++ b/packages/extension-character-count/package.json @@ -0,0 +1,28 @@ +{ + "name": "@tiptap/extension-character-count", + "description": "font family extension for tiptap", + "version": "2.0.0-alpha.5", + "homepage": "https://tiptap.dev", + "keywords": [ + "tiptap", + "tiptap extension" + ], + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/ueberdosis" + }, + "main": "dist/tiptap-extension-character-count.cjs.js", + "umd": "dist/tiptap-extension-character-count.umd.js", + "module": "dist/tiptap-extension-character-count.esm.js", + "unpkg": "dist/tiptap-extension-character-count.bundle.umd.min.js", + "types": "dist/packages/extension-character-count/src/index.d.ts", + "files": [ + "src", + "dist" + ], + "peerDependencies": { + "@tiptap/core": "^2.0.0-alpha.6", + "@tiptap/extension-text-style": "^2.0.0-alpha.0" + } +} diff --git a/docs/src/demos/Experiments/CharacterLimit/extension/CharacterLimit.ts b/packages/extension-character-count/src/character-count.ts similarity index 60% rename from docs/src/demos/Experiments/CharacterLimit/extension/CharacterLimit.ts rename to packages/extension-character-count/src/character-count.ts index 7a8a2ea6..9d6583cf 100644 --- a/docs/src/demos/Experiments/CharacterLimit/extension/CharacterLimit.ts +++ b/packages/extension-character-count/src/character-count.ts @@ -1,20 +1,17 @@ -// @ts-nocheck import { Extension } from '@tiptap/core' -import { - Plugin, PluginKey, -} from 'prosemirror-state' +import { Plugin, PluginKey } from 'prosemirror-state' export const pluginKey = new PluginKey('characterLimit') -export interface CharacterLimitOptions { - limit: number, +export interface CharacterCountOptions { + limit?: number, } -export const CharacterLimit = Extension.create({ - name: 'characterLimit', +export const CharacterCount = Extension.create({ + name: 'characterCount', - defaultOptions: { - limit: 100, + defaultOptions: { + limit: 0, }, addProseMirrorPlugins() { @@ -28,7 +25,7 @@ export const CharacterLimit = Extension.create({ appendTransaction: (transactions, oldState, newState) => { const length = newState.doc.content.size - if (length > options.limit) { + if (options.limit && length > options.limit) { return newState.tr.insertText('', options.limit + 1, length) } }, @@ -39,6 +36,6 @@ export const CharacterLimit = Extension.create({ declare module '@tiptap/core' { interface AllExtensions { - CharacterLimit: typeof CharacterLimit, + CharacterCount: typeof CharacterCount, } } diff --git a/packages/extension-character-count/src/index.ts b/packages/extension-character-count/src/index.ts new file mode 100644 index 00000000..29876dc4 --- /dev/null +++ b/packages/extension-character-count/src/index.ts @@ -0,0 +1,5 @@ +import { CharacterCount } from './character-count' + +export * from './character-count' + +export default CharacterCount