From 5a9894aa5cc744148a19ccb52a3a5721476ced8b Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 5 Nov 2020 21:14:21 +0100 Subject: [PATCH 1/7] add more content --- docs/src/docPages/api/schema.md | 4 - .../docPages/guide/build-custom-extensions.md | 120 +++++++++++++++--- docs/src/docPages/sponsor.md | 2 +- 3 files changed, 100 insertions(+), 26 deletions(-) diff --git a/docs/src/docPages/api/schema.md b/docs/src/docPages/api/schema.md index 3fe871d4..0af9ad93 100644 --- a/docs/src/docPages/api/schema.md +++ b/docs/src/docPages/api/schema.md @@ -66,10 +66,6 @@ const Text = createNode({ }) ``` -### Parse HTML - -### Render HTML - ## Nodes and marks ### Differences diff --git a/docs/src/docPages/guide/build-custom-extensions.md b/docs/src/docPages/guide/build-custom-extensions.md index 195d4b8d..da1e454b 100644 --- a/docs/src/docPages/guide/build-custom-extensions.md +++ b/docs/src/docPages/guide/build-custom-extensions.md @@ -3,9 +3,16 @@ ## toc ## Introduction -One of the strength of tiptap is it’s extendability. You don’t depend on the provided extensions, it’s intended to extend the editor to your liking. With custom extensions you can add new content types and new functionalities, on top of what already exists or starting from scratch. +One of the strength of tiptap is it’s extendability. You don’t depend on the provided extensions, it’s intended to extend the editor to your liking. With custom extensions you can add new content types and new functionalities, on top of what already exists or from scratch. -## Option 1: Extend existing extensions +## How extensions work +Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap. + +Existing [nodes](/api/nodes), [marks](/api/marks) and [extensions](/api/extensions) can give you a good impression on how to approach your own extensions. To make it easier to switch between the documentation and the source code, we linked to the file on GitHub from every single extension documentation page. + +We recommend to start with customizing existing extensions first, and create your own extensions with the gained knowledge later. That’s why all the below examples extend existing extensions, but all examples will work on newly created extensions aswell. + +## Customize existing extensions Let’s say you want to change the keyboard shortcuts for the bullet list. You should start by looking at [the source code of the `BulletList` extension](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/index.ts) and find the part you would like to change. In that case, the keyboard shortcut, and just that. Every extension has an `extend()` method, which takes an object with everything you want to change or add to it. For the bespoken example, your code could like that: @@ -95,10 +102,10 @@ const CustomParagraph = Paragraph.extend({ }) // Result: -//

Example Text

+//

Example Text

``` -That’s already enough to tell tiptap about the new attribute, and set `'pink'` as the default value. All attributes will be rendered as a data-attributes by default, and parsed as data-attributes from the content. +That’s already enough to tell tiptap about the new attribute, and set `'pink'` as the default value. All attributes will be rendered as a HTML attribute by default, and parsed as attributes from the content. Let’s stick with the color example and assume you’ll want to add an inline style to actually color the text. With the `renderHTML` function you can return HTML attributes which will be rendered in the output. @@ -123,10 +130,10 @@ const CustomParagraph = Paragraph.extend({ }) // Result: -//

Example Text

+//

Example Text

``` -You can also control how the attribute is parsed from the HTML. Let’s say you want to store the color in an attribute called `data-my-fancy-color-attribute`. Legit, right? Anyway, here’s how you would do that: +You can also control how the attribute is parsed from the HTML. Let’s say you want to store the color in an attribute called `data-color`, here’s how you would do that: ```js const CustomParagraph = Paragraph.extend({ @@ -137,13 +144,13 @@ const CustomParagraph = Paragraph.extend({ // Customize the HTML parsing (for example, to load the initial content) parseHTML: element => { return { - color: element.getAttribute('data-my-fancy-color-attribute'), + color: element.getAttribute('data-color'), } }, // … and customize the HTML rendering. renderHTML: attributes => { return { - 'data-my-fancy-color-attribute': atttributes.color, + 'data-color': atttributes.color, style: `color: ${attributes.color}`, } }, @@ -153,9 +160,11 @@ const CustomParagraph = Paragraph.extend({ }) // Result: -//

Example Text

+//

Example Text

``` +You can disable the rendering of attributes, if you pass `rendered: false`. + ### Global Attributes Attributes can be applied to multiple extensions at once. That’s useful for text alignment, line height, color, font family, and other styling related attributes. @@ -219,10 +228,46 @@ renderHTML({ attributes }) { ``` ### Parse HTML -> Associates DOM parser information with this mark (see the corresponding node spec field). The mark field in the rules is implied. +The `parseHTML()` function tries to load the editor document from HTML. The function gets the HTML DOM element passed as a parameter, and is expected to return an object with attributes and their values. Here is a simplified example from the [`Bold`](/api/marks/bold) mark: + +```js + parseHTML() { + return [ + { + tag: 'strong', + }, + ] + }, +``` + +This defines a rule to convert all `` tags to `Bold` marks. But you can get more advanced with this, here is the full example from the extension: + +```js + parseHTML() { + return [ + // + { + tag: 'strong', + }, + // + { + tag: 'b', + getAttrs: node => node.style.fontWeight !== 'normal' && null, + }, + // + { + style: 'font-weight', + getAttrs: value => /^(bold(er)?|[5-9]\d{2,})$/.test(value as string) && null, + }, + ] + }, +``` + +This looks for `` and `` tags, and any HTML tag with an inline style setting the `font-weight` to bold. + +As you can see, you can optionally pass a `getAttrs` callback, to add more complex checks, for example for specific HTML attributes. The callback gets passed the HTML DOM node, except when checking for the `style` attribute, then it’s the value. ### Commands - ```js import Paragraph from '@tiptap/extension-paragraph' @@ -254,7 +299,6 @@ const CustomBulletList = BulletList.extend({ ``` ### Input rules - ```js // Use the ~single tilde~ markdown shortcut import Strike from '@tiptap/extension-strike' @@ -272,7 +316,6 @@ const CustomStrike = Strike.extend({ ``` ### Paste rules - ```js // Overwrite the underline regex for pasted text import Underline from '@tiptap/extension-underline' @@ -289,17 +332,52 @@ const CustomUnderline = Underline.extend({ }) ``` -### Node views +### Node views (Advanced) +```js +import Link from '@tiptap/extension-underline' -## Option 2: Start from scratch +const CustomLink = Link.extend({ + addNodeView() { + return () => { + const container = document.createElement('div') -### Read the documentation -Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap. + container.addEventListener('change', event => { + alert('clicked on the container') + }) -### Have a look at existing extensions + return { + dom: container, + } + } + }, +}) +``` -### Get started +## Start from scratch -### Ask questions +### Create a node +```js +import { createNode } from '@tiptap/core' -### Share your extension +const CustomNode = createNode({ + // Your code goes here. +}) +``` + +### Create a mark +```js +import { createMark } from '@tiptap/core' + +const CustomMark = createMark({ + // Your code goes here. +}) +``` + +### Create an extension +```js +import { createExtension } from '@tiptap/core' + +const CustomExtension = createExtension({ + // Your code goes here. +}) +``` diff --git a/docs/src/docPages/sponsor.md b/docs/src/docPages/sponsor.md index 40a16564..53b11185 100644 --- a/docs/src/docPages/sponsor.md +++ b/docs/src/docPages/sponsor.md @@ -9,7 +9,7 @@ If you’re using tiptap in a commercial project or just want to give back to th * Your issues and pull requests get a `sponsor 💖` label * Get a sponsor badge in all your comments on GitHub * Show the support in your GitHub profile -* Receive monthly reports related to our open source work +* Receive monthly reports about to our open source work Does that sound good? [Sponsor us on GitHub!](https://github.com/sponsors/ueberdosis) From a74453f96ca89787448ce7ac259461214cba168d Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 5 Nov 2020 21:25:03 +0100 Subject: [PATCH 2/7] add missing comman descriptions --- docs/src/docPages/api/commands.md | 50 ++++++++++++++----------------- 1 file changed, 23 insertions(+), 27 deletions(-) diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md index 83d495ad..d375dff9 100644 --- a/docs/src/docPages/api/commands.md +++ b/docs/src/docPages/api/commands.md @@ -69,33 +69,29 @@ commands.try([ Have a look at all of the core commands listed below. They should give you a good first impression of what’s possible. ### Content -| Command | Description | -| ---------------- | ----------------------------------------------------------- | -| .clearContent() | Clear the whole document. | -| .insertgetHTML() | Insert a string of HTML at the currently selected position. | -| .insertText() | Insert a string of text at the currently selected position. | -| .insertHTML() | | -| .setContent() | Replace the whole document with new content. | +| Command | Description | +| --------------- | ------------------------------------------------ | +| .clearContent() | Clear the whole document. | +| .insertHTML() | Insert a string of HTML at the current position. | +| .insertText() | Insert a string of text at the current position. | +| .setContent() | Replace the whole document with new content. | ### Nodes & Marks -| Command | Description | -| ---------------------- | ------------------------------------------ | -| .clearNodes() | | -| .removeMark() | | -| .removeMark() | Remove a mark in the current selection. | -| .removeMarks() | | -| .removeMarks() | Remove all marks in the current selection. | -| .resetNodeAttributes() | | -| .selectParentNode() | Select the parent node. | -| .setBlockType() | Replace a given range with a node. | -| .setNodeAttributes() | | -| .splitBlock() | Forks a new node from an existing node. | -| .toggleBlockType() | Toggle a node with another node. | -| .toggleMark() | | -| .toggleMark() | Toggle a mark on and off. | -| .toggleWrap() | | -| .updateMark() | | -| .updateMark() | Update a mark with new attributes. | +| Command | Description | +| ---------------------- | --------------------------------------------------------- | +| .clearNodes() | Normalize nodes to a simple paragraph. | +| .removeMark() | Remove a mark in the current selection. | +| .removeMarks() | Remove all marks in the current selection. | +| .removeMarks() | Remove all marks in the current selection. | +| .resetNodeAttributes() | Resets all node attributes to the default value. | +| .selectParentNode() | Select the parent node. | +| .setBlockType() | Replace a given range with a node. | +| .setNodeAttributes() | Update attributes of a node. | +| .splitBlock() | Forks a new node from an existing node. | +| .toggleBlockType() | Toggle a node with another node. | +| .toggleMark() | Toggle a mark on and off. | +| .toggleWrap() | Wraps nodes in another node, or removes an existing wrap. | +| .updateMark() | Update a mark with new attributes. | ### Lists | Command | Description | @@ -103,8 +99,8 @@ Have a look at all of the core commands listed below. They should give you a goo | .liftListItem() | Lift the list item into a wrapping list. | | .sinkListItem() | Sink the list item down into an inner list. | | .splitListItem() | Splits a textblock of a list item into two list items. | -| .toggleList() | Toggle between different list styles. | -| .wrapInList() | | +| .toggleList() | Toggle between different list types. | +| .wrapInList() | Wrap a node in a list. | ### Selection | Command | Description | From 810f3d6b6dc33f288ce77d86e870a62e0e8f4ce5 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 5 Nov 2020 21:39:08 +0100 Subject: [PATCH 3/7] add content to the dropcursor page --- .../demos/Extensions/Dropcursor/index.spec.js | 5 ++ .../src/demos/Extensions/Dropcursor/index.vue | 46 +++++++++++++++++++ docs/src/demos/Extensions/Gapcursor/index.vue | 32 ------------- .../src/docPages/api/extensions/dropcursor.md | 12 ++--- docs/src/links.yaml | 1 - 5 files changed, 54 insertions(+), 42 deletions(-) create mode 100644 docs/src/demos/Extensions/Dropcursor/index.spec.js create mode 100644 docs/src/demos/Extensions/Dropcursor/index.vue diff --git a/docs/src/demos/Extensions/Dropcursor/index.spec.js b/docs/src/demos/Extensions/Dropcursor/index.spec.js new file mode 100644 index 00000000..4b9ff4ee --- /dev/null +++ b/docs/src/demos/Extensions/Dropcursor/index.spec.js @@ -0,0 +1,5 @@ +context('/examples/dropcursor', () => { + before(() => { + cy.visit('/examples/dropcursor') + }) +}) diff --git a/docs/src/demos/Extensions/Dropcursor/index.vue b/docs/src/demos/Extensions/Dropcursor/index.vue new file mode 100644 index 00000000..613f754d --- /dev/null +++ b/docs/src/demos/Extensions/Dropcursor/index.vue @@ -0,0 +1,46 @@ + + + diff --git a/docs/src/demos/Extensions/Gapcursor/index.vue b/docs/src/demos/Extensions/Gapcursor/index.vue index 11d5bc99..ce5a475d 100644 --- a/docs/src/demos/Extensions/Gapcursor/index.vue +++ b/docs/src/demos/Extensions/Gapcursor/index.vue @@ -44,35 +44,3 @@ export default { }, } - - diff --git a/docs/src/docPages/api/extensions/dropcursor.md b/docs/src/docPages/api/extensions/dropcursor.md index 8759a51c..7ed60c6d 100644 --- a/docs/src/docPages/api/extensions/dropcursor.md +++ b/docs/src/docPages/api/extensions/dropcursor.md @@ -1,4 +1,7 @@ # Dropcursor +This extension loads the [ProseMirror Gapcursor plugin](https://github.com/ProseMirror/prosemirror-gapcursor) by Marijn Haverbeke, which adds a gap for the cursor in places that don’t allow regular selection. For example, after a table at the end of a document. + +Note that tiptap is renderless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below. ## Installation ```bash @@ -9,15 +12,6 @@ npm install @tiptap/extension-dropcursor yarn add @tiptap/extension-dropcursor ``` -## Settings -*None* - -## Commands -*None* - -## Keyboard shortcuts -*None* - ## Source code [packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/) diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 00bdd456..5f63280a 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -167,7 +167,6 @@ premium: true - title: Dropcursor link: /api/extensions/dropcursor - draft: true - title: Focus link: /api/extensions/focus draft: true From 73822bd6c91c43095edad0092395e67d7453b44e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Thu, 5 Nov 2020 21:55:21 +0100 Subject: [PATCH 4/7] update lock file --- yarn.lock | 136 ++++++++++++++++++++++++++++++++---------------------- 1 file changed, 82 insertions(+), 54 deletions(-) diff --git a/yarn.lock b/yarn.lock index 3e2c914f..d3a46efb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3660,9 +3660,9 @@ buffer@^4.3.0: isarray "^1.0.0" buffer@^5.2.1, buffer@^5.5.0: - version "5.7.0" - resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.0.tgz#88afbd29fc89fa7b58e82b39206f31f2cf34feed" - integrity sha512-cd+5r1VLBwUqTrmnzW+D7ABkJUM6mr7uv1dv+6jRw4Rcl7tFIFHDqHPL98LhpGFn3dbAt3gtLxtrWp4m1kFrqg== + version "5.7.1" + resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0" + integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ== dependencies: base64-js "^1.3.1" ieee754 "^1.1.13" @@ -3885,9 +3885,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001154: - version "1.0.30001154" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001154.tgz#f3bbc245ce55e4c1cd20fa731b097880181a7f17" - integrity sha512-y9DvdSti8NnYB9Be92ddMZQrcOe04kcQtcxtBx4NkB04+qZ+JUWotnXBJTmxlKudhxNTQ3RRknMwNU2YQl/Org== + version "1.0.30001156" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001156.tgz#75c20937b6012fe2b02ab58b30d475bf0718de97" + integrity sha512-z7qztybA2eFZTB6Z3yvaQBIoJpQtsewRD74adw2UbRWwsRq3jIPvgrQGawBMbfafekQaD21FWuXNcywtTDGGCw== case-sensitive-paths-webpack-plugin@^2.2.0: version "2.3.0" @@ -4394,9 +4394,9 @@ content-type@^1.0.4, content-type@~1.0.4: integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA== conventional-changelog-angular@^5.0.3: - version "5.0.11" - resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.11.tgz#99a3ca16e4a5305e0c2c2fae3ef74fd7631fc3fb" - integrity sha512-nSLypht/1yEflhuTogC03i7DX7sOrXGsRn14g131Potqi6cbGbGEE9PSDEHKldabB6N76HiSyw9Ph+kLmC04Qw== + version "5.0.12" + resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.12.tgz#c979b8b921cbfe26402eb3da5bbfda02d865a2b9" + integrity sha512-5GLsbnkR/7A89RyHLvvoExbiGbd9xKdKqDTrArnPbOqBqG/2wIosu0fHwpeIRI8Tl94MhVNBXcLJZl92ZQ5USw== dependencies: compare-func "^2.0.0" q "^1.5.1" @@ -4426,40 +4426,40 @@ conventional-changelog-preset-loader@^2.1.1: integrity sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g== conventional-changelog-writer@^4.0.6: - version "4.0.17" - resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-4.0.17.tgz#4753aaa138bf5aa59c0b274cb5937efcd2722e21" - integrity sha512-IKQuK3bib/n032KWaSb8YlBFds+aLmzENtnKtxJy3+HqDq5kohu3g/UdNbIHeJWygfnEbZjnCKFxAW0y7ArZAw== + version "4.0.18" + resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-4.0.18.tgz#10b73baa59c7befc69b360562f8b9cd19e63daf8" + integrity sha512-mAQDCKyB9HsE8Ko5cCM1Jn1AWxXPYV0v8dFPabZRkvsiWUul2YyAqbIaoMKF88Zf2ffnOPSvKhboLf3fnjo5/A== dependencies: compare-func "^2.0.0" - conventional-commits-filter "^2.0.6" + conventional-commits-filter "^2.0.7" dateformat "^3.0.0" handlebars "^4.7.6" json-stringify-safe "^5.0.1" lodash "^4.17.15" - meow "^7.0.0" + meow "^8.0.0" semver "^6.0.0" split "^1.0.0" - through2 "^3.0.0" + through2 "^4.0.0" -conventional-commits-filter@^2.0.2, conventional-commits-filter@^2.0.6: - version "2.0.6" - resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.6.tgz#0935e1240c5ca7698329affee1b6a46d33324c4c" - integrity sha512-4g+sw8+KA50/Qwzfr0hL5k5NWxqtrOVw4DDk3/h6L85a9Gz0/Eqp3oP+CWCNfesBvZZZEFHF7OTEbRe+yYSyKw== +conventional-commits-filter@^2.0.2, conventional-commits-filter@^2.0.7: + version "2.0.7" + resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.7.tgz#f8d9b4f182fce00c9af7139da49365b136c8a0b3" + integrity sha512-ASS9SamOP4TbCClsRHxIHXRfcGCnIoQqkvAzCSbZzTFLfcTqJVugB0agRgsEELsqaeWgsXv513eS116wnlSSPA== dependencies: lodash.ismatch "^4.4.0" modify-values "^1.0.0" conventional-commits-parser@^3.0.3: - version "3.1.0" - resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-3.1.0.tgz#10140673d5e7ef5572633791456c5d03b69e8be4" - integrity sha512-RSo5S0WIwXZiRxUGTPuYFbqvrR4vpJ1BDdTlthFgvHt5kEdnd1+pdvwWphWn57/oIl4V72NMmOocFqqJ8mFFhA== + version "3.2.0" + resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-3.2.0.tgz#9e261b139ca4b7b29bcebbc54460da36894004ca" + integrity sha512-XmJiXPxsF0JhAKyfA2Nn+rZwYKJ60nanlbSWwwkGwLQFbugsc0gv1rzc7VbbUWAzJfR1qR87/pNgv9NgmxtBMQ== dependencies: JSONStream "^1.0.4" is-text-path "^1.0.1" lodash "^4.17.15" - meow "^7.0.0" + meow "^8.0.0" split2 "^2.0.0" - through2 "^3.0.0" + through2 "^4.0.0" trim-off-newlines "^1.0.0" conventional-recommended-bump@^5.0.0: @@ -5428,9 +5428,9 @@ ee-first@1.1.1: integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0= electron-to-chromium@^1.3.585: - version "1.3.588" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.588.tgz#c6515571737bfb42678115a5eaa818384593a9a5" - integrity sha512-0zr+ZfytnLeJZxGgmEpPTcItu5Mm4A5zHPZXLfHcGp0mdsk95rmD7ePNewYtK1yIdLbk8Z1U2oTRRfOtR4gbYg== + version "1.3.589" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.589.tgz#bd26183ed8697dde6ac19acbc16a3bf33b1f8220" + integrity sha512-rQItBTFnol20HaaLm26UgSUduX7iGerwW7pEYX17MB1tI6LzFajiLV7iZ7LVcUcsN/7HrZUoCLrBauChy/IqEg== elegant-spinner@^1.0.1: version "1.0.1" @@ -7342,6 +7342,13 @@ hosted-git-info@^2.1.4, hosted-git-info@^2.7.1: resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488" integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg== +hosted-git-info@^3.0.6: + version "3.0.7" + resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.7.tgz#a30727385ea85acfcee94e0aad9e368c792e036c" + integrity sha512-fWqc0IcuXs+BmE9orLDyVykAG9GJtGLGuZAAqgcckPgv5xad4AcXGIv8galtQvlwutxSlaMcdw7BUtq2EIvqCQ== + dependencies: + lru-cache "^6.0.0" + hostic-dom@^0.8.5: version "0.8.5" resolved "https://registry.yarnpkg.com/hostic-dom/-/hostic-dom-0.8.5.tgz#500de796842454a745ce160d9cb0483c82643e28" @@ -8922,6 +8929,13 @@ lru-cache@^5.1.1: dependencies: yallist "^3.0.2" +lru-cache@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94" + integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA== + dependencies: + yallist "^4.0.0" + lunr@^2.3.9: version "2.3.9" resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1" @@ -9179,22 +9193,22 @@ meow@^4.0.0: redent "^2.0.0" trim-newlines "^2.0.0" -meow@^7.0.0: - version "7.1.1" - resolved "https://registry.yarnpkg.com/meow/-/meow-7.1.1.tgz#7c01595e3d337fcb0ec4e8eed1666ea95903d306" - integrity sha512-GWHvA5QOcS412WCo8vwKDlTelGLsCGBVevQB5Kva961rmNfun0PCbv5+xta2kUMFJyR8/oWnn7ddeKdosbAPbA== +meow@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/meow/-/meow-8.0.0.tgz#1aa10ee61046719e334ffdc038bb5069250ec99a" + integrity sha512-nbsTRz2fwniJBFgUkcdISq8y/q9n9VbiHYbfwklFh5V4V2uAcxtKQkDc0yCLPM/kP0d+inZBewn3zJqewHE7kg== dependencies: "@types/minimist" "^1.2.0" camelcase-keys "^6.2.2" decamelize-keys "^1.1.0" hard-rejection "^2.1.0" minimist-options "4.1.0" - normalize-package-data "^2.5.0" + normalize-package-data "^3.0.0" read-pkg-up "^7.0.1" redent "^3.0.0" trim-newlines "^3.0.0" - type-fest "^0.13.1" - yargs-parser "^18.1.3" + type-fest "^0.18.0" + yargs-parser "^20.2.3" merge-descriptors@1.0.1: version "1.0.1" @@ -9801,6 +9815,16 @@ normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package- semver "2 || 3 || 4 || 5" validate-npm-package-license "^3.0.1" +normalize-package-data@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-3.0.0.tgz#1f8a7c423b3d2e85eb36985eaf81de381d01301a" + integrity sha512-6lUjEI0d3v6kFrtgA/lOx4zHCWULXsFNIjHolnZCKCTLA6m/G625cdn3O7eNmT0iD3jfo6HZ9cdImGZwf21prw== + dependencies: + hosted-git-info "^3.0.6" + resolve "^1.17.0" + semver "^7.3.2" + validate-npm-package-license "^3.0.1" + normalize-path@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9" @@ -11650,7 +11674,7 @@ read@1, read@~1.0.1: string_decoder "~1.1.1" util-deprecate "~1.0.1" -"readable-stream@2 || 3", readable-stream@^3.0.2, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0: +"readable-stream@2 || 3", readable-stream@3, readable-stream@^3.0.2, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198" integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA== @@ -13427,6 +13451,13 @@ through2@^3.0.0: inherits "^2.0.4" readable-stream "2 || 3" +through2@^4.0.0: + version "4.0.2" + resolved "https://registry.yarnpkg.com/through2/-/through2-4.0.2.tgz#a7ce3ac2a7a8b0b966c80e7c49f0484c3b239764" + integrity sha512-iOqSav00cVxEEICeD7TjLB1sueEL+81Wpzp2bY17uZjZN0pWZPuo4suZ/61VujxmqSGFfgOcNuTZ85QJwNZQpw== + dependencies: + readable-stream "3" + through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6, through@^2.3.8: version "2.3.8" resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5" @@ -13669,10 +13700,10 @@ type-check@^0.4.0, type-check@~0.4.0: dependencies: prelude-ls "^1.2.1" -type-fest@^0.13.1: - version "0.13.1" - resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934" - integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg== +type-fest@^0.18.0: + version "0.18.0" + resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.18.0.tgz#2edfa6382d48653707344f7fccdb0443d460e8d6" + integrity sha512-fbDukFPnJBdn2eZ3RR+5mK2slHLFd6gYHY7jna1KWWy4Yr4XysHuCdXRzy+RiG/HwG4WJat00vdC2UHky5eKiQ== type-fest@^0.3.0: version "0.3.1" @@ -14265,24 +14296,24 @@ vue-hot-reload-api@^2.3.0: resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2" integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog== -vue-inbrowser-compiler-utils@^4.33.4: - version "4.33.4" - resolved "https://registry.yarnpkg.com/vue-inbrowser-compiler-utils/-/vue-inbrowser-compiler-utils-4.33.4.tgz#895d6053612d6b88a29e8c58d7284e44eebfbcf5" - integrity sha512-8/YvqKy0s7UUUdR8eHLwbuAEb3qs5SfM4Og21E9scKxAwfFBw20YJCLnXB/uEbYsGGpuMg/oY0P7lehfBhm1Tw== +vue-inbrowser-compiler-utils@^4.33.6: + version "4.33.6" + resolved "https://registry.yarnpkg.com/vue-inbrowser-compiler-utils/-/vue-inbrowser-compiler-utils-4.33.6.tgz#022353b3a4dc202e05271277cef1ef4d091ca6f2" + integrity sha512-g9ErL/xuTtRAdT6+VmzR4Lqxlw4hpH7ObEBGk8VGQgNqdcs9Pza8AMzlns160IGzQw4sI8gvvbYEPeZ54Z5OfA== dependencies: camelcase "^5.3.1" vue-inbrowser-compiler@^4.33.4: - version "4.33.5" - resolved "https://registry.yarnpkg.com/vue-inbrowser-compiler/-/vue-inbrowser-compiler-4.33.5.tgz#f6611a9d8e66be547b54265ee6171effe87d2bcd" - integrity sha512-uXhOfOSgQe6ax8qfg1E7wN9t81nqkmqSMHSqCrBsaACgOlyPWSTF3Xw3oiJtqbNahwjPW5Au8U4vp9diP7GvxQ== + version "4.33.6" + resolved "https://registry.yarnpkg.com/vue-inbrowser-compiler/-/vue-inbrowser-compiler-4.33.6.tgz#f66b5faac595bbf8eb410c6897f224fc9adeae66" + integrity sha512-V4jELDbvIwt3eKQXfXc1bvFOgKZLRkuxmhJGihRNa1rpNBziKFJABUypC6FsZo7jz4qQdQCTpaL9OTYqz8LVTw== dependencies: acorn "^6.1.1" acorn-jsx "^5.0.1" buble "^0.19.7" camelcase "^5.3.1" detect-browser "^5.2.0" - vue-inbrowser-compiler-utils "^4.33.4" + vue-inbrowser-compiler-utils "^4.33.6" walkes "^0.2.1" vue-live@^1.15.1: @@ -14768,13 +14799,10 @@ yargs-parser@^15.0.1: camelcase "^5.0.0" decamelize "^1.2.0" -yargs-parser@^18.1.3: - version "18.1.3" - resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0" - integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ== - dependencies: - camelcase "^5.0.0" - decamelize "^1.2.0" +yargs-parser@^20.2.3: + version "20.2.3" + resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.3.tgz#92419ba867b858c868acf8bae9bf74af0dd0ce26" + integrity sha512-emOFRT9WVHw03QSvN5qor9QQT9+sw5vwxfYweivSMHTcAXPefwVae2FjO7JJjj8hCE4CzPOPeFM83VwT29HCww== yargs@^13.3.2: version "13.3.2" From f946954e916bf93804d902d67d81104f2c95de75 Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Thu, 5 Nov 2020 21:57:25 +0100 Subject: [PATCH 5/7] add content to the collaboration cursor extension --- .../Extensions/CollaborationCursor/index.spec.js | 4 ++-- docs/src/demos/Extensions/Focus/index.spec.js | 4 ++-- .../docPages/api/extensions/collaboration-cursor.md | 13 ++++++++++--- docs/src/docPages/api/extensions/collaboration.md | 6 +++--- docs/src/docPages/api/extensions/dropcursor.md | 4 ++-- docs/src/docPages/api/extensions/focus.md | 3 +++ docs/src/docPages/examples/collaborative-editing.md | 4 ++-- docs/src/links.yaml | 3 --- 8 files changed, 24 insertions(+), 17 deletions(-) diff --git a/docs/src/demos/Extensions/CollaborationCursor/index.spec.js b/docs/src/demos/Extensions/CollaborationCursor/index.spec.js index cb36824e..77c2a808 100644 --- a/docs/src/demos/Extensions/CollaborationCursor/index.spec.js +++ b/docs/src/demos/Extensions/CollaborationCursor/index.spec.js @@ -1,5 +1,5 @@ -context('/api/extensions/collaboration', () => { +context('/api/extensions/collaboration-cursor', () => { before(() => { - cy.visit('/api/extensions/collaboration') + cy.visit('/api/extensions/collaboration-cursor') }) }) diff --git a/docs/src/demos/Extensions/Focus/index.spec.js b/docs/src/demos/Extensions/Focus/index.spec.js index 029eb69e..ba1f4ce3 100644 --- a/docs/src/demos/Extensions/Focus/index.spec.js +++ b/docs/src/demos/Extensions/Focus/index.spec.js @@ -1,6 +1,6 @@ -context('/examples/focus', () => { +context('/api/extensions/focus', () => { before(() => { - cy.visit('/examples/focus') + cy.visit('/api/extensions/focus') }) it('should have class', () => { diff --git a/docs/src/docPages/api/extensions/collaboration-cursor.md b/docs/src/docPages/api/extensions/collaboration-cursor.md index 8987916d..52ae2f11 100644 --- a/docs/src/docPages/api/extensions/collaboration-cursor.md +++ b/docs/src/docPages/api/extensions/collaboration-cursor.md @@ -1,7 +1,14 @@ # Collaboration Cursor +This extension adds information about all connected users (like their name and a specified color), their current cursor position and their text selection (if there’s one). -:::premium Premium Extension -Using this in production requires a **tiptap pro** license. [Read more](/sponsor) +Open this page in multiple browser windows to test it. + +:::premium 💖 Pro Extension +We kindly ask you to sponsor us, before using this extension in production. [Read more](/sponsor) +::: + +::: warning Use with Collaboration +This extension requires the [`Collaboration`](/api/extensions/collaboration) extension. ::: ## Installation @@ -31,4 +38,4 @@ yarn add @tiptap/extension-collaboration-cursor :::warning Public The content of this editor is shared with other users. ::: - + diff --git a/docs/src/docPages/api/extensions/collaboration.md b/docs/src/docPages/api/extensions/collaboration.md index 1815948b..0957ca1f 100644 --- a/docs/src/docPages/api/extensions/collaboration.md +++ b/docs/src/docPages/api/extensions/collaboration.md @@ -1,8 +1,8 @@ # Collaboration The Collaboration extension enables you to collaborate with others on one document. The implementation is based on [Y.js by Kevin Jahns](https://github.com/yjs/yjs), which is the coolest thing to [integrate collaborative editing](/guide/collaborative-editing) in your project. -:::premium Premium Extension -Using this in production requires a **tiptap pro** license. [Read more](/sponsor) +:::premium Pro Extension +We kindly ask you to sponsor us, before using this extension in production. [Read more](/sponsor) ::: ## Installation @@ -33,4 +33,4 @@ yarn add @tiptap/extension-collaboration yjs y-webrtc :::warning Public The content of this editor is shared with other users. ::: - + diff --git a/docs/src/docPages/api/extensions/dropcursor.md b/docs/src/docPages/api/extensions/dropcursor.md index 7ed60c6d..b2efb7d6 100644 --- a/docs/src/docPages/api/extensions/dropcursor.md +++ b/docs/src/docPages/api/extensions/dropcursor.md @@ -1,5 +1,5 @@ # Dropcursor -This extension loads the [ProseMirror Gapcursor plugin](https://github.com/ProseMirror/prosemirror-gapcursor) by Marijn Haverbeke, which adds a gap for the cursor in places that don’t allow regular selection. For example, after a table at the end of a document. +This extension loads the [ProseMirror Dropcursor plugin](https://github.com/ProseMirror/prosemirror-dropcursor) by Marijn Haverbeke, which shows a cursor at the drop position when something is dragged over the editor. Note that tiptap is renderless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below. @@ -16,4 +16,4 @@ yarn add @tiptap/extension-dropcursor [packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/) ## Usage - + diff --git a/docs/src/docPages/api/extensions/focus.md b/docs/src/docPages/api/extensions/focus.md index 2d011777..ff888d6d 100644 --- a/docs/src/docPages/api/extensions/focus.md +++ b/docs/src/docPages/api/extensions/focus.md @@ -1,4 +1,7 @@ # Focus +The Focus extension adds a CSS class to focused nodes. By default it adds `.has-class`, but you can change that. + +Note that it’s only a class, the styling is totally up to you. The usage example below has some CSS for that class. ## Installation ```bash diff --git a/docs/src/docPages/examples/collaborative-editing.md b/docs/src/docPages/examples/collaborative-editing.md index 7c0f4566..ea52b29a 100644 --- a/docs/src/docPages/examples/collaborative-editing.md +++ b/docs/src/docPages/examples/collaborative-editing.md @@ -1,7 +1,7 @@ # Collaborative editing -:::premium Requires Premium Extensions -Using this example in production requires a **tiptap pro** license. [Read more](/sponsor) +:::premium Requires pro extensions +We kindly ask you to sponsor us, before using this example in production. [Read more](/sponsor) ::: This example shows how you can use tiptap to let different users collaboratively work on the same text in real-time. diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 5f63280a..4d18b0b5 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -16,7 +16,6 @@ link: /examples/basic - title: Collaborative editing link: /examples/collaborative-editing - premium: true - title: Markdown shortcuts link: /examples/markdown-shortcuts # - title: Menu Bubble @@ -163,13 +162,11 @@ premium: true - title: CollaborationCursor link: /api/extensions/collaboration-cursor - draft: true premium: true - title: Dropcursor link: /api/extensions/dropcursor - title: Focus link: /api/extensions/focus - draft: true - title: Gapcursor link: /api/extensions/gapcursor - title: History From 3ce0e791f60d0cf86e926c2942a587357f4e0c98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Thu, 5 Nov 2020 21:59:04 +0100 Subject: [PATCH 6/7] rename updateMark and setNodeAttributes, fix #38 --- docs/src/docPages/api/commands.md | 35 +++++++++---------- ...{updateMark.ts => updateMarkAttributes.ts} | 11 +++--- ...eAttributes.ts => updateNodeAttributes.ts} | 0 packages/core/src/extensions/commands.ts | 8 ++--- packages/extension-link/index.ts | 2 +- packages/extension-text-align/index.ts | 2 +- 6 files changed, 29 insertions(+), 29 deletions(-) rename packages/core/src/commands/{updateMark.ts => updateMarkAttributes.ts} (77%) rename packages/core/src/commands/{setNodeAttributes.ts => updateNodeAttributes.ts} (100%) diff --git a/docs/src/docPages/api/commands.md b/docs/src/docPages/api/commands.md index 83d495ad..3dc0c916 100644 --- a/docs/src/docPages/api/commands.md +++ b/docs/src/docPages/api/commands.md @@ -78,24 +78,23 @@ Have a look at all of the core commands listed below. They should give you a goo | .setContent() | Replace the whole document with new content. | ### Nodes & Marks -| Command | Description | -| ---------------------- | ------------------------------------------ | -| .clearNodes() | | -| .removeMark() | | -| .removeMark() | Remove a mark in the current selection. | -| .removeMarks() | | -| .removeMarks() | Remove all marks in the current selection. | -| .resetNodeAttributes() | | -| .selectParentNode() | Select the parent node. | -| .setBlockType() | Replace a given range with a node. | -| .setNodeAttributes() | | -| .splitBlock() | Forks a new node from an existing node. | -| .toggleBlockType() | Toggle a node with another node. | -| .toggleMark() | | -| .toggleMark() | Toggle a mark on and off. | -| .toggleWrap() | | -| .updateMark() | | -| .updateMark() | Update a mark with new attributes. | +| Command | Description | +| ----------------------- | ------------------------------------------ | +| .clearNodes() | | +| .removeMark() | | +| .removeMark() | Remove a mark in the current selection. | +| .removeMarks() | | +| .removeMarks() | Remove all marks in the current selection. | +| .resetNodeAttributes() | | +| .selectParentNode() | Select the parent node. | +| .setBlockType() | Replace a given range with a node. | +| .updateNoteAttributes() | | +| .splitBlock() | Forks a new node from an existing node. | +| .toggleBlockType() | Toggle a node with another node. | +| .toggleMark() | | +| .toggleMark() | Toggle a mark on and off. | +| .toggleWrap() | | +| .updateMarkAttributes() | Update a mark with new attributes. | ### Lists | Command | Description | diff --git a/packages/core/src/commands/updateMark.ts b/packages/core/src/commands/updateMarkAttributes.ts similarity index 77% rename from packages/core/src/commands/updateMark.ts rename to packages/core/src/commands/updateMarkAttributes.ts index a4cb3e92..fb96235c 100644 --- a/packages/core/src/commands/updateMark.ts +++ b/packages/core/src/commands/updateMarkAttributes.ts @@ -4,7 +4,7 @@ import getMarkType from '../utils/getMarkType' import getMarkRange from '../utils/getMarkRange' export default (typeOrName: string | MarkType, attrs: {}): Command => ({ tr, state, dispatch }) => { - const { selection, doc } = tr + const { selection } = tr let { from, to } = selection const { $from, empty } = selection const type = getMarkType(typeOrName, state.schema) @@ -18,11 +18,12 @@ export default (typeOrName: string | MarkType, attrs: {}): Command => ({ tr, sta } } - const hasMark = doc.rangeHasMark(from, to, type) + // TODO: toggleMark? + // const hasMark = doc.rangeHasMark(from, to, type) - if (hasMark && dispatch) { - tr.removeMark(from, to, type) - } + // if (hasMark && dispatch) { + // tr.removeMark(from, to, type) + // } if (dispatch) { tr.addMark(from, to, type.create(attrs)) diff --git a/packages/core/src/commands/setNodeAttributes.ts b/packages/core/src/commands/updateNodeAttributes.ts similarity index 100% rename from packages/core/src/commands/setNodeAttributes.ts rename to packages/core/src/commands/updateNodeAttributes.ts diff --git a/packages/core/src/extensions/commands.ts b/packages/core/src/extensions/commands.ts index 094c6245..4b945ac3 100644 --- a/packages/core/src/extensions/commands.ts +++ b/packages/core/src/extensions/commands.ts @@ -15,7 +15,6 @@ import selectAll from '../commands/selectAll' import selectParentNode from '../commands/selectParentNode' import setBlockType from '../commands/setBlockType' import setContent from '../commands/setContent' -import setNodeAttributes from '../commands/setNodeAttributes' import sinkListItem from '../commands/sinkListItem' import splitBlock from '../commands/splitBlock' import splitListItem from '../commands/splitListItem' @@ -24,7 +23,8 @@ import toggleList from '../commands/toggleList' import toggleMark from '../commands/toggleMark' import toggleWrap from '../commands/toggleWrap' import tryCommand from '../commands/try' -import updateMark from '../commands/updateMark' +import updateMarkAttributes from '../commands/updateMarkAttributes' +import updateNodeAttributes from '../commands/updateNodeAttributes' import wrapInList from '../commands/wrapInList' export const Commands = createExtension({ @@ -46,7 +46,6 @@ export const Commands = createExtension({ selectParentNode, setBlockType, setContent, - setNodeAttributes, sinkListItem, splitBlock, splitListItem, @@ -55,7 +54,8 @@ export const Commands = createExtension({ toggleMark, toggleWrap, try: tryCommand, - updateMark, + updateMarkAttributes, + updateNodeAttributes, wrapInList, } }, diff --git a/packages/extension-link/index.ts b/packages/extension-link/index.ts index 42e261c9..d31faa3b 100644 --- a/packages/extension-link/index.ts +++ b/packages/extension-link/index.ts @@ -50,7 +50,7 @@ const Link = createMark({ return commands.removeMark('link') } - return commands.updateMark('link', options) + return commands.updateMarkAttributes('link', options) }, } }, diff --git a/packages/extension-text-align/index.ts b/packages/extension-text-align/index.ts index dcf499eb..a237d470 100644 --- a/packages/extension-text-align/index.ts +++ b/packages/extension-text-align/index.ts @@ -39,7 +39,7 @@ const TextAlign = createExtension({ return false } - return commands.setNodeAttributes({ textAlign: alignment }) + return commands.updateNodeAttributes({ textAlign: alignment }) }, } }, From a3a8183088d0c336e9e9ead92951e74e7c21360d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Thu, 5 Nov 2020 22:04:18 +0100 Subject: [PATCH 7/7] fix bug in demo component, fix #39 --- docs/src/components/Demo/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue index b0b4bcbb..96115d84 100644 --- a/docs/src/components/Demo/index.vue +++ b/docs/src/components/Demo/index.vue @@ -106,7 +106,7 @@ export default { mounted() { this.files = collect(require.context('~/demos/', true, /.+\..+$/).keys()) - .filter(path => path.startsWith(`./${this.name}`)) + .filter(path => path.startsWith(`./${this.name}/`)) .map(path => path.replace('./', '')) .map(path => { const extension = path.split('.').pop()