{"id":13810530,"url":"https://github.com/sibiraj-s/svelte-tiptap","last_synced_at":"2025-04-14T04:12:53.271Z","repository":{"id":37496947,"uuid":"385942765","full_name":"sibiraj-s/svelte-tiptap","owner":"sibiraj-s","description":"Svelte components for tiptap v2","archived":false,"fork":false,"pushed_at":"2025-03-25T19:52:27.000Z","size":2223,"stargazers_count":286,"open_issues_count":5,"forks_count":28,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-14T04:12:48.965Z","etag":null,"topics":["svelte","tiptap","tiptap-v2","wyswig-editor"],"latest_commit_sha":null,"homepage":"https://sibiraj-s.github.io/svelte-tiptap/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sibiraj-s.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["sibiraj-s"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2021-07-14T13:04:31.000Z","updated_at":"2025-04-09T15:12:01.000Z","dependencies_parsed_at":"2023-01-30T18:00:38.001Z","dependency_job_id":"377e4921-72ad-4b1e-88d2-46cd9f485846","html_url":"https://github.com/sibiraj-s/svelte-tiptap","commit_stats":{"total_commits":302,"total_committers":10,"mean_commits":30.2,"dds":0.07947019867549665,"last_synced_commit":"b177a21f5e93614257a5829dd4ede9d81dec9bb6"},"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibiraj-s%2Fsvelte-tiptap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibiraj-s%2Fsvelte-tiptap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibiraj-s%2Fsvelte-tiptap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibiraj-s%2Fsvelte-tiptap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sibiraj-s","download_url":"https://codeload.github.com/sibiraj-s/svelte-tiptap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248819404,"owners_count":21166477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["svelte","tiptap","tiptap-v2","wyswig-editor"],"created_at":"2024-08-04T02:00:57.996Z","updated_at":"2025-04-14T04:12:53.251Z","avatar_url":"https://github.com/sibiraj-s.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sibiraj-s"],"categories":["TypeScript","Svelte"],"sub_categories":[],"readme":"# svelte-tiptap\n\n\u003e Svelte components for tiptap v2\n\n[![Tests](https://github.com/sibiraj-s/svelte-tiptap/actions/workflows/tests.yml/badge.svg)](https://github.com/sibiraj-s/svelte-tiptap/actions/workflows/tests.yml)\n[![NPM Version](https://badgen.net/npm/v/svelte-tiptap)](https://www.npmjs.com/package/svelte-tiptap)\n[![Total Downloads](https://badgen.net/npm/dt/svelte-tiptap)](https://www.npmjs.com/package/svelte-tiptap)\n[![Monthly Downloads](https://badgen.net/npm/dm/svelte-tiptap)](https://www.npmjs.com/package/svelte-tiptap)\n[![License](https://badgen.net/npm/license/svelte-tiptap)](https://github.com/sibiraj-s/svelte-tiptap/blob/master/LICENSE)\n\n## Installation\n\n```bash\nnpm i svelte-tiptap\n# or\nyarn add svelte-tiptap\n```\n\n\u003e [!NOTE]\n\u003e This package just provides components for svelte. For configuring/customizing the editor, refer [tiptap's official documentation](https://www.tiptap.dev/).\n\nFor any issues with the editor. You may need to open the issue on [tiptap's repository](https://github.com/ueberdosis/tiptap/issues)\n\nYou can find some [examples for the editor here](./src/routes/)\n\n## Usage\n\nA Simple editor.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { onMount } from 'svelte';\n  import type { Readable } from 'svelte/store';\n  import { createEditor, Editor, EditorContent } from 'svelte-tiptap';\n  import StarterKit from '@tiptap/starter-kit';\n\n  let editor = $state() as Readable\u003cEditor\u003e;\n\n  onMount(() =\u003e {\n    editor = createEditor({\n      extensions: [StarterKit],\n      content: `Hello world!`,\n    });\n  });\n\u003c/script\u003e\n\n\u003cEditorContent editor={$editor} /\u003e\n```\n\nRefer https://www.tiptap.dev/api/commands/ for available commands\n\n## Extensions\n\nRefer: https://www.tiptap.dev/api/extensions\n\n### Floating menu\n\nThis will make a contextual menu appear near a selection of text.\n\nThe markup and styling are totally up to you.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { EditorContent, FloatingMenu } from 'svelte-tiptap';\n\n  // ...create the editor instance on mount\n\u003c/script\u003e\n\n\u003cEditorContent editor={$editor} /\u003e\n\u003cFloatingMenu editor={$editor} /\u003e\n```\n\nRefer: https://www.tiptap.dev/api/extensions/floating-menu\n\n### Bubble Menu\n\nThis will make a contextual menu appear near a selection of text. Use it to let users apply marks to their text selection.\n\nThe markup and styling are totally up to you.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { EditorContent, BubbleMenu } from 'svelte-tiptap';\n\n  // ...create the editor instance on mount\n\u003c/script\u003e\n\n\u003cEditorContent editor={$editor} /\u003e\n\u003cBubbleMenu editor={$editor} /\u003e\n```\n\nRefer: https://www.tiptap.dev/api/extensions/bubble-menu\n\n## SvelteNodeViewRenderer\n\nSvelteNodeViewRenderer enables rendering Svelte Components as NodeViews. The following is an example for creating a counter component\n\n### Create a Node Extension\n\n```ts\nimport { Node, mergeAttributes } from '@tiptap/core';\nimport { SvelteNodeViewRenderer } from 'svelte-tiptap';\n\nimport CounterComponent from './Counter.svelte';\n\nexport const SvelteCounterExtension = Node.create({\n  name: 'svelteCounterComponent',\n  group: 'block',\n  atom: true,\n  draggable: true, // Optional: to make the node draggable\n  inline: false,\n\n  addAttributes() {\n    return {\n      count: {\n        default: 0,\n      },\n    };\n  },\n\n  parseHTML() {\n    return [{ tag: 'svelte-counter-component' }];\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['svelte-counter-component', mergeAttributes(HTMLAttributes)];\n  },\n\n  addNodeView() {\n    return SvelteNodeViewRenderer(CounterComponent);\n  },\n});\n```\n\n### Create a Component\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import type { NodeViewProps } from '@tiptap/core';\n  import cx from 'clsx';\n  import { NodeViewWrapper } from 'svelte-tiptap';\n\n  let { node, updateAttributes }: NodeViewProps = $props();\n\n  const handleClick = () =\u003e {\n    updateAttributes({ count: node.attrs.count + 1 });\n  };\n\u003c/script\u003e\n\n\u003cNodeViewWrapper\u003e\n  \u003cspan\u003eSvelte Component\u003c/span\u003e\n\n  \u003cdiv\u003e\n    \u003cbutton onclick={handleClick} type=\"button\"\u003e\n      This button has been clicked {node.attrs.count} times.\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/NodeViewWrapper\u003e\n```\n\n### Use the extension\n\n```ts\nimport { onMount, onDestroy } from 'svelte';\nimport type { Readable } from 'svelte/store';\nimport { Editor, EditorContent } from 'svelte-tiptap';\nimport StarterKit from '@tiptap/starter-kit';\n\nimport { SvelteCounterExtension } from './SvelteExtension';\n\nlet editor = $state() as Readable\u003cEditor\u003e;\n\nonMount(() =\u003e {\n  editor = createEditor({\n    extensions: [StarterKit, SvelteCounterExtension],\n    content: `\n        \u003cp\u003eThis is still the text editor you’re used to, but enriched with node views.\u003c/p\u003e\n        \u003csvelte-counter-component count=\"0\"\u003e\u003c/svelte-counter-component\u003e\n        \u003cp\u003eDid you see that? That’s a Svelte component. We are really living in the future.\u003c/p\u003e\n      `,\n  });\n});\n```\n\n### Access/Update Attributes\n\nRefer https://www.tiptap.dev/guide/node-views/react/#all-available-props for the list of all available attributes. You can access them like\n\n```ts\nimport type { NodeViewProps } from '@tiptap/core';\n\nlet { node, updateAttributes }: NodeViewProps = $props();\n\n// update attributes\nconst handleClick = () =\u003e {\n  updateAttributes({ count: node.attrs.count + 1 });\n};\n```\n\n### Dragging\n\nTo make your node views draggable, set `draggable: true` in the extension and add `data-drag-handle` to the DOM element that should function as the drag handle.\n\n### Adding a content editable\n\nThere is another action called `editable` which helps you adding editable content to your node view. Here is an example.\n\n```svelte\n\u003cscript lang=\"ts\"\u003e\n  import { NodeViewWrapper, NodeViewContent } from 'svelte-tiptap';\n\u003c/script\u003e\n\n\u003cNodeViewWrapper class=\"svelte-component\"\u003e\n  \u003cspan class=\"label\" contenteditable=\"false\"\u003eSvelte Editable Component\u003c/span\u003e\n\n  \u003c!-- Content is inserted here --\u003e\n  \u003cNodeViewContent /\u003e\n\u003c/NodeViewWrapper\u003e\n```\n\nThe NodeViewWrapper and NodeViewContent components render a `\u003cdiv\u003e` HTML tag (`\u003cspan\u003e` for inline nodes),\nbut you can change that. For example `\u003cNodeViewContent as=\"p\"\u003e` should render a paragraph.\nOne limitation though: That tag must not change during runtime.\n\nRefer: https://www.tiptap.dev/guide/node-views/react/#adding-a-content-editable\n\n## Contributing\n\nAll types of contributions are welcome. See [CONTRIBUTING.md](./.github/CONTRIBUTING.md) to get started.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsibiraj-s%2Fsvelte-tiptap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsibiraj-s%2Fsvelte-tiptap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsibiraj-s%2Fsvelte-tiptap/lists"}