Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/andi23rosca/tiptap-solid
https://github.com/andi23rosca/tiptap-solid
Last synced: 21 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/andi23rosca/tiptap-solid
- Owner: andi23rosca
- License: mit
- Created: 2021-10-20T17:42:41.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-07-25T11:06:27.000Z (5 months ago)
- Last Synced: 2024-11-02T19:34:13.409Z (about 1 month ago)
- Language: TypeScript
- Size: 168 KB
- Stars: 49
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-solid-js - TipTap Solid
README
# tiptap-solid
> Solid components for tiptap v2
[](https://open.vscode.dev/andi23rosca/tiptap-solid)
[](https://www.npmjs.com/package/tiptap-solid)
[](https://www.npmjs.com/package/tiptap-solid)
[](https://www.npmjs.com/package/tiptap-solid)
[](https://github.com/andi23rosca/tiptap-solid/blob/master/LICENSE)
## Installation
```bash
npm i tiptap-solid
# or
yarn add tiptap-solid
```
**Note**: This package just provides components for solid. For configuring/customizing the editor, refer [tiptap's official documentation](https://www.tiptap.dev/).
For any issues with the editor. You may need to open the issue on [tiptap's repository](https://github.com/ueberdosis/tiptap/issues)
## Issues
There's a recurring issue caused by prosemirror dependencies: `RangeError: Adding different instances of a keyed plugin (plugin$)`
These are the steps to fix it:
1. add all `prosemirror` dependencies explicityly: `yarn add prosemirror-state prosemirror-transform prosemirror-model prosemirror-view`
2. include the packages in `vite.config.ts` in `optimizeDeps`
```ts
optimizeDeps: {
include: [
'prosemirror-state',
'prosemirror-transform',
'prosemirror-model',
'prosemirror-view'
]
}
```
## Usage
The structure of the helper components has been designed to mimic the React components provided by tiptap, so for further inspiration on how to use `tiptap-solid` see [tiptap's section on React](https://tiptap.dev/guide/node-views/react)
### A Simple editor
```tsx
import { Component } from "solid-js";
import StarterKit from "@tiptap/starter-kit";
import { createEditor, EditorContent } from "tiptap-solid";
const App: Component = () => {
const editor = createEditor({
extensions: [StarterKit],
content: `Hello world!`,
});
return ;
};
```
### Rendering a Solid component inside the editor:
#### Create a component `Counter.tsx`
```tsx
import { NodeViewProps } from "@tiptap/core";
import { Component } from "solid-js";
import { NodeViewWrapper, NodeViewContent } from "tiptap-solid";
const Counter: Component = (props) => {
const increase = () => {
props.updateAttributes({
count: props.node.attrs.count + 1,
});
};
return (
Solid Component
This button has been clicked {props.node.attrs.count} times.
);
};
export default Counter;
```
#### Create a node extension `Extension.ts`
```ts
import { Node, mergeAttributes } from "@tiptap/core";
import { SolidNodeViewRenderer } from "tiptap-solid";
import Counter from "./Counter";
export default Node.create({
name: "solidComponent",
group: "block",
content: 'inline*',
addAttributes() {
return {
count: {
default: 0,
},
};
},
parseHTML() {
return [
{
tag: "solid-component",
},
];
},
renderHTML({ HTMLAttributes }) {
return ["solid-component", mergeAttributes(HTMLAttributes)];
},
addNodeView() {
return SolidNodeViewRenderer(Counter);
},
});
```
#### Register extension in your editor, and use the component's tag `App.tsx`
```tsx
import { Component } from "solid-js";
import StarterKit from "@tiptap/starter-kit";
import { createEditor, EditorContent } from "tiptap-solid";
import Extension from "./Extension";
const App: Component = () => {
const editor = createEditor({
extensions: [StarterKit, Extension],
content: `
This is still the text editor you’re used to, but enriched with node views.
Editable
Did you see that? That’s a Solid component. We are really living in the future.
`,
});
return ;
};
```
## Solid Contexts
`solid` works with the concept of reactivity owners. Any `createEffect`, `useContext`, etc. is tied to the owner it's defined in.
Owners can have children and parents similarly to how components have children and parents, when you try to use a context.
Solid will look up the chain of reactivity owners for the closest one that has the context.
The custom node components in `tiptap-solid` are rendered somewhat independently, but the library has some internal logic that automatically attaches the owner of `EditorContent` to any node components rendered inside of it.
The issue is if you need to use contexts inside of the extensions classes. The classes are instantiated and called outside of the usual reactivity tree, and don't have access to any of the contexts.
As a workaround the library exports a function called `getTiptapSolidReactiveOwner` that will return the owner of the `EditorContent` component.
Using the return with `runWithOwner` will let you have access to any context editor has access to.
Example:
```ts
export default Node.create({
name: "solidComponent",
group: "block",
atom: true,
addAttributes() {
return {
count: {
default: 0,
},
};
},
parseHTML() {
return [
{
tag: "solid-component",
},
];
},
renderHTML({ HTMLAttributes }) {
const owner = getTiptapSolidReactiveOwner(this.editor);
const context = runWithOwner(owner, () => useContext(SomeContext));
// Do some logic based on the context, render stuff differently, etc.
return ["solid-component", mergeAttributes(HTMLAttributes)];
},
addNodeView() {
return SolidNodeViewRenderer(Counter);
},
});
```