diff --git a/docs/src/demos/Extensions/Link/index.vue b/docs/src/demos/Extensions/Link/index.vue index 0eb52905..79521730 100644 --- a/docs/src/demos/Extensions/Link/index.vue +++ b/docs/src/demos/Extensions/Link/index.vue @@ -1,8 +1,11 @@ @@ -36,7 +39,7 @@ export default { ], content: `

- Try to add some links to the world wide web. By default every link will get a rel="noopener noreferrer nofollow" attribute. + Try to add some links to the world wide web. By default every link will get a rel="noopener noreferrer nofollow" attribute.

`, }) @@ -44,9 +47,9 @@ export default { methods: { addLink() { - const url = window.prompt('Link:') + const url = window.prompt('URL') - this.editor.link(url) + this.editor.chain().focus().link({ href: url }).run() }, }, diff --git a/docs/src/docPages/api/events.md b/docs/src/docPages/api/events.md index ca5dd39c..b1dd1a27 100644 --- a/docs/src/docPages/api/events.md +++ b/docs/src/docPages/api/events.md @@ -44,13 +44,13 @@ editor.off('update', callback) ``` ## List of events -| Event | Description | Parameters | -| -------- | ----------------------------- | ------------------------------------ | -| `blur` | Editor isn’t focused anymore. | `{ event }` | -| `focus` | Editor is in focus. | `{ event }` | -| `init` | Editor has been initialized. | *None* | -| `update` | Content has changed. | *None* | -| `transaction` | State has changed. | `{ transaction }` | +| Event | Description | Parameters | +| ------------- | ----------------------------- | ----------------- | +| `blur` | Editor isn’t focused anymore. | `{ event }` | +| `focus` | Editor is in focus. | `{ event }` | +| `init` | Editor has been initialized. | *None* | +| `transaction` | State has changed. | `{ transaction }` | +| `update` | Content has changed. | *None* | :::info List of hooks The according hooks are called `onBlur`, `onFocus`, `onInit`, `onUpdate` and `onTransaction`. diff --git a/docs/src/docPages/api/extensions/link.md b/docs/src/docPages/api/extensions/link.md index 3b787750..5756507a 100644 --- a/docs/src/docPages/api/extensions/link.md +++ b/docs/src/docPages/api/extensions/link.md @@ -1,5 +1,9 @@ # Link -Enables you to use the `` HTML tag in the editor. +The Link extension adds support for `` tags to the editor. The extension is renderless too, there is no actual UI to add, modify or delete links. The usage example below uses the native JavaScript prompt to show you how that could work. + +In a real world application, you would probably add a more sophisticated user interface. [Check out the example](/examples/links) to see how that could look like. + +Pasted URLs will be linked automatically. ## Installation ```bash @@ -11,22 +15,25 @@ yarn add @tiptap/extension-link ``` ## Settings -| Option | Type | Default | Description | -| ----------- | ------- | ------- | -------------------------------------------- | -| class | string | – | Add a custom class to the rendered HTML tag. | -| openOnClick | Boolean | true | Specifies if links will be opened on click. | +| Option | Type | Default | Description | +| ----------- | ------- | ---------------------------- | -------------------------------------------- | +| class | string | – | Add a custom class to the rendered HTML tag. | +| openOnClick | Boolean | true | If enabled, links will be opened on click. | +| rel | string | noopener noreferrer nofollow | Configure the `rel` attribute. | +| target | _self | | Set the default `target` of links. | ## Commands -| Command | Options | Description | -| ------- | ------- | ----------------------- | -| link | — | Link the selected text. | +| Command | Options | Description | +| ------- | -------------- | ----------------------------------------------------------- | +| link | href
target | Link the selected text. Removes a link, if `href` is empty. | ## Keyboard shortcuts -* Windows/Linux: `Control` `K` -* macOS: `Cmd` `K` +:::warning Doesn’t have a keyboard shortcut +This extension doesn’t bind a specific keyboard shortcut. You would probably open your UI on `Mod-k` though. +::: ## Source code [packages/extension-link/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/) ## Usage - + diff --git a/docs/src/docPages/examples/links.md b/docs/src/docPages/examples/links.md index 3cb662c8..78aa359f 100644 --- a/docs/src/docPages/examples/links.md +++ b/docs/src/docPages/examples/links.md @@ -1,3 +1,3 @@ # Links - \ No newline at end of file + diff --git a/docs/src/links.yaml b/docs/src/links.yaml index 4d3af126..ef1473f6 100644 --- a/docs/src/links.yaml +++ b/docs/src/links.yaml @@ -19,9 +19,9 @@ # - title: Floating Menu # link: /examples/floating-menu # draft: true - # - title: Links - # link: /examples/links - # draft: true + - title: Links + link: /examples/links + draft: true # - title: Images # link: /examples/images # draft: true @@ -145,7 +145,6 @@ link: /api/extensions/italic - title: Link link: /api/extensions/link - draft: true - title: ListItem link: /api/extensions/list-item # - title: Mention diff --git a/packages/extension-link/index.ts b/packages/extension-link/index.ts index d95f5475..196e9735 100644 --- a/packages/extension-link/index.ts +++ b/packages/extension-link/index.ts @@ -6,9 +6,10 @@ import { Plugin, PluginKey } from 'prosemirror-state' export interface LinkOptions { openOnClick: boolean, target: string, + rel: string, } -export type LinkCommand = (url?: string) => Command +export type LinkCommand = (options: {href?: string, target?: string}) => Command declare module '@tiptap/core/src/Editor' { interface Commands { @@ -22,7 +23,8 @@ export default new Mark() .name('link') .defaults({ openOnClick: true, - target: '', + target: '_self', + rel: 'noopener noreferrer nofollow', }) .schema(({ options }) => ({ attrs: { @@ -45,19 +47,17 @@ export default new Mark() ], toDOM: node => ['a', { ...node.attrs, - rel: 'noopener noreferrer nofollow', - target: options.target, + rel: options.rel, + target: node.attrs.target ? node.attrs.target : options.target, }, 0], })) .commands(({ name }) => ({ - link: url => ({ commands }) => { - if (!url) { + link: attributes => ({ commands }) => { + if (!attributes.href) { return commands.removeMark(name) } - return commands.updateMark(name, { - href: url, - }) + return commands.updateMark(name, attributes) }, })) .pasteRules(({ type }) => [