TipTap integration with Solid.js.
Original Repository: vriteio/tiptap-solid
This Fork: project-opus/tiptap-solid
This project is a fork of the original vriteio/tiptap-solid repository, with additional enhancements and maintenance. The original project provides TipTap integration for Solid.js, and this fork extends it with the following adjustments:
- Updated to latest TipTap v3 version
- Migrated from Tippy.js to Floating UI for menu positioning
- Switched rollup to tsup which uses esbuild backend
- Switched to npm as the main package manager
Make sure to have peer-dependencies (solid-js, @tiptap/core and @tiptap/pm) already installed.
npm i https://github.com/project-opus/tiptap-solid
The integration is based on the official @tiptap/react package, that's documented in the TipTap docs, with several changes necessary to adapt it to Solid.js.
Here are some examples of common use-cases:
import { SolidEditorContent, useEditor } from "@generalworks/tiptap-solid";
// ...
const editor = useEditor({
extensions: [
// ...
],
// ...
});
// Rendering
<SolidEditorContent editor={editor()} />;import { SolidNodeViewRenderer } from "@generalworks/tiptap-solid";
const CustomNode = Node.create({
// ...
addNodeView() {
return SolidNodeViewRenderer(CustomNodeView);
},
// ...
});In the CustomNodeView component, you can access the Node's state, including attributes, options, etc.
import { NodeViewWrapper, useSolidNodeView } from "@generalworks/tiptap-solid";
const CustomNodeView = () => {
const { state } = useSolidNodeView();
const updateAttribute = (key, value) => {
state().updateAttributes({ [key]: value });
};
const options = () => state().extension.options;
const selected = () => {
return state().selected;
};
const attrs = () => {
return state().node.attrs;
};
return <NodeViewWrapper>{/* Your Node View*/}</NodeViewWrapper>;
};// Rendering
<BubbleMenuWrapper
editor={editor()}
offset={6}
placement="top"
shouldShow={({ editor, state, view, from, to }) => {
// ...
}}
>
{/* Your menu */}
</BubbleMenuWrapper>// Rendering
<FloatingMenuWrapper
editor={editor()}
offset={6}
placement="top"
shouldShow={({ editor, state, view }) => {
// ...
}}
>
{/* Your menu */}
</FloatingMenuWrapper>Note: In TipTap v3, we've migrated from Tippy.js to Floating UI. The tippyOptions prop is automatically converted to Floating UI options for backward compatibility.