{"_id":"@andesine/tiptap-solid","name":"@andesine/tiptap-solid","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.4":{"name":"@andesine/tiptap-solid","version":"1.0.4","description":"TipTap v2 integration for Solid.js","type":"module","source":"src/index.tsx","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/types/index.d.ts","exports":{".":{"solid":"./dist/source/index.jsx","import":"./dist/esm/index.js","browser":"./dist/esm/index.js","require":"./dist/cjs/index.js","node":"./dist/cjs/index.js","types":"./dist/types/index.d.ts"}},"keywords":["tiptap","wysiwyg","solid","solidjs"],"license":"MIT","dependencies":{"@tiptap/extension-bubble-menu":"2.11.5","@tiptap/extension-floating-menu":"2.11.5","nanoid":"^5.1.4"},"devDependencies":{"@tiptap/core":"2.11.5","@tiptap/pm":"2.11.5","rollup":"^4.36.0","rollup-preset-solid":"^3.0.0","solid-js":"^1.9.5","typescript":"^5.8.2"},"peerDependencies":{"@tiptap/core":"2.11.5","@tiptap/pm":"2.11.5","solid-js":"^1.9.5"},"scripts":{"build":"rollup -c","prepublish":"pnpm build"},"_id":"@andesine/tiptap-solid@1.0.4","_integrity":"sha512-NO30J+Ao2LNt6kP6Sgh6xe6uEOdVfRI1pPkwmxLn0FlQ/ErFMQxF1v0RRloLIBRdx/ZbigsD/gdaXnD/Oiv2Yg==","_resolved":"/private/var/folders/xq/hwlrv9gd569dh1x1zmzh7sm80000gn/T/e5de03d8d96b18a334c5991e0d6585f4/andesine-tiptap-solid-1.0.4.tgz","_from":"file:andesine-tiptap-solid-1.0.4.tgz","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-NO30J+Ao2LNt6kP6Sgh6xe6uEOdVfRI1pPkwmxLn0FlQ/ErFMQxF1v0RRloLIBRdx/ZbigsD/gdaXnD/Oiv2Yg==","shasum":"ce83d5c71b629e4053d5eb0b301a833617ee8f5c","tarball":"https://registry.npmjs.org/@andesine/tiptap-solid/-/tiptap-solid-1.0.4.tgz","fileCount":31,"unpackedSize":100741,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAMQlLs7rE2sOYcBZqXiMyBFrdY312c+gIEwSY6AMS8tAiAhqnYH+XOKL6cHEguIQtsCQ4CY3ZT9ZGcJegVe3j6m2Q=="}]},"_npmUser":{"name":"areknawo(u)","email":"areknawo@areknawo.com"},"directories":{},"maintainers":[{"name":"areknawo(u)","email":"areknawo@areknawo.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tiptap-solid_1.0.4_1742334866446_0.6057533341073018"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-18T21:54:26.366Z","1.0.4":"2025-03-18T21:54:26.620Z","modified":"2025-03-18T21:54:26.889Z"},"maintainers":[{"name":"areknawo(u)","email":"areknawo@areknawo.com"}],"description":"TipTap v2 integration for Solid.js","keywords":["tiptap","wysiwyg","solid","solidjs"],"license":"MIT","readme":"# TipTap-Solid\n\nTipTap integration with Solid.js, used in [Vrite](https://vrite.io)\n\n## Installation\n\nMake sure to have peer-dependencies (`solid-js`, `@tiptap/core` and `@tiptap/pm`) already installed.\n\n```\nnpm i @vrite/tiptap-solid\n```\n\n## Getting started\n\nThe integration is based on the official `@tiptap/react` package, that's [documented in the TipTap docs](https://tiptap.dev/installation/react), with several changes necessary to adapt it to Solid.js.\n\nHere are some examples of common use-cases:\n\n### Creating the editor\n\n```javascript\nimport { SolidEditorContent, useEditor } from \"@vrite/tiptap-solid\";\n\n// ...\nconst editor = useEditor({\n  extensions: [\n    // ...\n  ],\n  // ...\n});\n\n// Rendering\n<SolidEditorContent editor={editor()} />;\n```\n\n### Creating Solid-based Node Views\n\n```javascript\nimport { SolidNodeViewRenderer } from \"@vrite/tiptap-solid\";\n\nconst CustomNode = Node.create({\n  // ...\n  addNodeView() {\n    return SolidNodeViewRenderer(CustomNodeView);\n  },\n  // ...\n});\n```\n\nIn the `CustomNodeView` component, you can access the Node's state, including attributes, options, etc.\n\n```javascript\nimport { NodeViewWrapper, useSolidNodeView } from \"@vrite/tiptap-solid\";\n\nconst CustomNodeView = () => {\n  const { state } = useSolidNodeView();\n  const updateAttribute = (key, value) => {\n    state().updateAttributes({ [key]: value });\n  };\n  const options = () => state().extension.options;\n  const selected = () => {\n    return state().selected;\n  };\n  const attrs = () => {\n    return state().node.attrs;\n  };\n\n  return <NodeViewWrapper>{/* Your Node View*/}</NodeViewWrapper>;\n};\n```\n\n### Creating Bubble Menu\n\n```javascript\n// Rendering\n<BubbleMenuWrapper\n  editor={editor()}\n  tippyOptions={\n    {\n      // ...\n    }\n  }\n  shouldShow={({ editor, state, view, from, to }) => {\n    // ...\n  }}\n>\n  {/* Your menu */}\n</BubbleMenuWrapper>\n```\n","readmeFilename":"README.md","_rev":"1-819a5e265316e1f82a79e1fefc2cd87c"}