mirror of
https://github.com/ueberdosis/tiptap.git
synced 2025-01-18 06:03:22 +08:00
try to improve react support
This commit is contained in:
Philipp Kühn
parent
48c747be02
commit
c20b43aa6c
@ -5,5 +5,6 @@ module.exports = {
|
||||
],
|
||||
plugins: [
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
],
|
||||
}
|
||||
|
||||
@ -57,6 +57,7 @@ module.exports = function (api) {
|
||||
api.chainWebpack(config => {
|
||||
config.resolve.extensions
|
||||
.add('.ts')
|
||||
.add('.tsx')
|
||||
.add('.jsx')
|
||||
|
||||
config.module
|
||||
|
||||
@ -35,7 +35,9 @@
|
||||
"yjs": "^13.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/plugin-proposal-class-properties": "^7.13.0",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.13.0",
|
||||
"@babel/plugin-syntax-class-properties": "^7.12.13",
|
||||
"@babel/preset-env": "^7.13.5",
|
||||
"@babel/preset-react": "^7.12.13",
|
||||
"html-loader": "^1.3.2",
|
||||
|
||||
143
docs/src/demos/Examples/Default/React/index-nope.jsx
Normal file
143
docs/src/demos/Examples/Default/React/index-nope.jsx
Normal file
@ -0,0 +1,143 @@
|
||||
import * as React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { EditorState } from 'prosemirror-state'
|
||||
import { EditorView } from 'prosemirror-view'
|
||||
import { Node, Schema } from 'prosemirror-model'
|
||||
// import applyDevTools from 'prosemirror-dev-tools'
|
||||
// import styled from 'styled-components'
|
||||
|
||||
// Here we have the (too simple) React component which
|
||||
// we'll be rendering content into.
|
||||
//
|
||||
class Underlined extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.hole = React.createRef()
|
||||
}
|
||||
// We'll put the content into what we render using
|
||||
// this function, which appends a given node to
|
||||
// a ref HTMLElement, if present.
|
||||
//
|
||||
append(node) {
|
||||
if (this.hole) {
|
||||
this.hole.current.appendChild(node)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
// Just really wanted to prove I could get React AND
|
||||
// styled-component abilities at the same time.
|
||||
//
|
||||
// const UnderlinedText = styled.p`
|
||||
// text-decoration: underline;
|
||||
// `
|
||||
|
||||
// The styled components version is basically just a wrapper to do SCSS styling.
|
||||
// Questionable if it's even needed for such simple styling and because you can't clearly see the
|
||||
// DOM structure from the code (hence making `& > ${Component}` selectors quite unintuitive)
|
||||
// return <span style="text-decoration: underline" ref={this.hole} />
|
||||
return <p ref={this.hole} style={{textDecoration: 'underline'}}></p>
|
||||
}
|
||||
}
|
||||
|
||||
// This class is our actual interactor for ProseMirror itself.
|
||||
// It glues DOM rendering, React, and ProseMirror nodes together.
|
||||
//
|
||||
class Underline {
|
||||
constructor(node) {
|
||||
// We'll use this to access our Underlined component's
|
||||
// instance methods.
|
||||
//
|
||||
this.ref = React.createRef()
|
||||
|
||||
// Here, we'll provide a container to render React into.
|
||||
// Coincidentally, this is where ProseMirror will put its
|
||||
// generated contentDOM. React will throw out that content
|
||||
// once rendered, and at the same time we'll append it into
|
||||
// the component tree, like a fancy shell game. This isn't
|
||||
// obvious to the user, but would it be more obvious on an
|
||||
// expensive render?
|
||||
//
|
||||
this.dom = document.createElement('span')
|
||||
|
||||
// Finally, we provide an element to render content into.
|
||||
// We will be moving this node around as we need to.
|
||||
//
|
||||
this.contentDOM = document.createElement('span')
|
||||
|
||||
// Better way of doing this would be portals https://reactjs.org/docs/portals.html
|
||||
ReactDOM.render(
|
||||
<Underlined ref={this.ref} />,
|
||||
this.dom,
|
||||
this.putContentDomInRef
|
||||
)
|
||||
}
|
||||
|
||||
update(node) {
|
||||
return true
|
||||
}
|
||||
|
||||
// This is the least complex part. Now we've put
|
||||
// all of our interlocking pieces behind refs and
|
||||
// instance properties, this becomes the callback
|
||||
// which performs the actual shell game.
|
||||
//
|
||||
putContentDomInRef = () => {
|
||||
this.ref.current.append(this.contentDOM)
|
||||
}
|
||||
|
||||
// Required to not to leave the React nodes orphaned.
|
||||
destroy() {
|
||||
ReactDOM.unmountComponentAtNode(this.dom)
|
||||
}
|
||||
}
|
||||
|
||||
export default class Editor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.editorState = EditorState.create({
|
||||
schema: new Schema({
|
||||
nodes: {
|
||||
doc: {
|
||||
content: 'block+'
|
||||
},
|
||||
underline: {
|
||||
group: 'block',
|
||||
content: 'inline*',
|
||||
parseDOM: [{ tag: 'p' }],
|
||||
toDOM() { return ['p', 0] }
|
||||
},
|
||||
text: {
|
||||
group: 'inline'
|
||||
},
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
createEditorView = (element) => {
|
||||
if (element != null) {
|
||||
this.editorView = new EditorView(element, {
|
||||
nodeViews: {
|
||||
underline: (node) => new Underline(node)
|
||||
},
|
||||
state: this.editorState,
|
||||
})
|
||||
// applyDevTools(this.editorView)
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
if (this.editorView) {
|
||||
this.editorView.destroy()
|
||||
}
|
||||
}
|
||||
|
||||
shouldComponentUpdate() {
|
||||
return false
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div id="editor" ref={ref => { this.createEditorView(ref) }} />
|
||||
}
|
||||
}
|
||||
167
docs/src/demos/Examples/Default/React/index-ori.jsx
Normal file
167
docs/src/demos/Examples/Default/React/index-ori.jsx
Normal file
@ -0,0 +1,167 @@
|
||||
import React, { useState } from 'react'
|
||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
||||
import { useEditor, Editor } from '@tiptap/react'
|
||||
import './styles.scss'
|
||||
|
||||
// useEditor only works for child components of <Editor />
|
||||
const MenuBar = () => {
|
||||
const editor = useEditor()
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||
className={`${editor.isActive('bold') ? 'is-active' : ''}`}
|
||||
>
|
||||
bold
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||
className={`${editor.isActive('italic') ? 'active' : ''}`}
|
||||
>
|
||||
italic
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleStrike().run()}
|
||||
className={`${editor.isActive('strike') ? 'active' : ''}`}
|
||||
>
|
||||
strike
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleCode().run()}
|
||||
className={`${editor.isActive('code') ? 'active' : ''}`}
|
||||
>
|
||||
code
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
|
||||
clear marks
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().clearNodes().run()}>
|
||||
clear nodes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().setParagraph().run()}
|
||||
className={`${editor.isActive('paragraph') ? 'active' : ''}`}
|
||||
>
|
||||
paragraph
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 1 }) ? 'active' : ''}`}
|
||||
>
|
||||
h1
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 2 }) ? 'active' : ''}`}
|
||||
>
|
||||
h2
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 3 }) ? 'active' : ''}`}
|
||||
>
|
||||
h3
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 4 }) ? 'active' : ''}`}
|
||||
>
|
||||
h4
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 5 }) ? 'active' : ''}`}
|
||||
>
|
||||
h5
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 6 }) ? 'active' : ''}`}
|
||||
>
|
||||
h6
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||||
className={`${editor.isActive('bulletList') ? 'active' : ''}`}
|
||||
>
|
||||
bullet list
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||||
className={`${editor.isActive('orderedList') ? 'active' : ''}`}
|
||||
>
|
||||
ordered list
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
||||
className={`${editor.isActive('codeBlock') ? 'active' : ''}`}
|
||||
>
|
||||
code block
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
||||
className={`${editor.isActive('blockquote') ? 'active' : ''}`}
|
||||
>
|
||||
blockquote
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
|
||||
horizontal rule
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().setHardBreak().run()}>
|
||||
hard break
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().undo().run()}>
|
||||
undo
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().redo().run()}>
|
||||
redo
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const [value, setValue] = useState(`
|
||||
<h2>
|
||||
Hi there,
|
||||
</h2>
|
||||
<p>
|
||||
this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
That’s a bullet list with one …
|
||||
</li>
|
||||
<li>
|
||||
… or two list items.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
|
||||
</p>
|
||||
<pre><code class="language-css">body {
|
||||
display: none;
|
||||
}</code></pre>
|
||||
<p>
|
||||
I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
|
||||
</p>
|
||||
<blockquote>
|
||||
Wow, that’s amazing. Good work, boy! 👏
|
||||
<br />
|
||||
— Mom
|
||||
</blockquote>
|
||||
`)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Editor
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
extensions={defaultExtensions()}
|
||||
>
|
||||
<MenuBar />
|
||||
</Editor>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,167 +1,84 @@
|
||||
import React, { useState } from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import { defaultExtensions } from '@tiptap/starter-kit'
|
||||
import { useEditor, Editor } from '@tiptap/react'
|
||||
import Paragraph from '@tiptap/extension-paragraph'
|
||||
import { Editor, EditorContent, ReactNodeViewRenderer } from '@tiptap/react'
|
||||
import './styles.scss'
|
||||
import { render, unmountComponentAtNode } from 'react-dom'
|
||||
|
||||
// useEditor only works for child components of <Editor />
|
||||
const MenuBar = () => {
|
||||
const editor = useEditor()
|
||||
const useEditor = (options = {}) => {
|
||||
const [editor, setEditor] = useState(null)
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleBold().run()}
|
||||
className={`${editor.isActive('bold') ? 'is-active' : ''}`}
|
||||
>
|
||||
bold
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleItalic().run()}
|
||||
className={`${editor.isActive('italic') ? 'active' : ''}`}
|
||||
>
|
||||
italic
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleStrike().run()}
|
||||
className={`${editor.isActive('strike') ? 'active' : ''}`}
|
||||
>
|
||||
strike
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleCode().run()}
|
||||
className={`${editor.isActive('code') ? 'active' : ''}`}
|
||||
>
|
||||
code
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
|
||||
clear marks
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().clearNodes().run()}>
|
||||
clear nodes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().setParagraph().run()}
|
||||
className={`${editor.isActive('paragraph') ? 'active' : ''}`}
|
||||
>
|
||||
paragraph
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 1 }) ? 'active' : ''}`}
|
||||
>
|
||||
h1
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 2 }) ? 'active' : ''}`}
|
||||
>
|
||||
h2
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 3 }) ? 'active' : ''}`}
|
||||
>
|
||||
h3
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 4 }) ? 'active' : ''}`}
|
||||
>
|
||||
h4
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 5 }) ? 'active' : ''}`}
|
||||
>
|
||||
h5
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
|
||||
className={`${editor.isActive('heading', { level: 6 }) ? 'active' : ''}`}
|
||||
>
|
||||
h6
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleBulletList().run()}
|
||||
className={`${editor.isActive('bulletList') ? 'active' : ''}`}
|
||||
>
|
||||
bullet list
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleOrderedList().run()}
|
||||
className={`${editor.isActive('orderedList') ? 'active' : ''}`}
|
||||
>
|
||||
ordered list
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleCodeBlock().run()}
|
||||
className={`${editor.isActive('codeBlock') ? 'active' : ''}`}
|
||||
>
|
||||
code block
|
||||
</button>
|
||||
<button
|
||||
onClick={() => editor.chain().focus().toggleBlockquote().run()}
|
||||
className={`${editor.isActive('blockquote') ? 'active' : ''}`}
|
||||
>
|
||||
blockquote
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
|
||||
horizontal rule
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().setHardBreak().run()}>
|
||||
hard break
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().undo().run()}>
|
||||
undo
|
||||
</button>
|
||||
<button onClick={() => editor.chain().focus().redo().run()}>
|
||||
redo
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
useEffect(() => {
|
||||
const instance = new Editor(options)
|
||||
setEditor(instance)
|
||||
|
||||
return () => {
|
||||
instance.destroy()
|
||||
}
|
||||
}, [])
|
||||
|
||||
return editor
|
||||
}
|
||||
|
||||
|
||||
|
||||
function reactNodeView(Component) {
|
||||
const renderComponent = (props, dom) => render(<Component {...props} />, dom)
|
||||
|
||||
return (node, view, getPos, decorations) => {
|
||||
let dom = document.createElement("div")
|
||||
renderComponent({ node, view, decorations, getPos }, dom)
|
||||
|
||||
console.log(dom)
|
||||
return {
|
||||
dom,
|
||||
contentDOM: dom.querySelector('[data-node-view-content]'),
|
||||
update(node, decorations) {
|
||||
renderComponent({ node, view, decorations, getPos }, dom)
|
||||
return true
|
||||
},
|
||||
destroy() {
|
||||
unmountComponentAtNode(dom)
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default () => {
|
||||
const [value, setValue] = useState(`
|
||||
<h2>
|
||||
Hi there,
|
||||
</h2>
|
||||
<p>
|
||||
this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
That’s a bullet list with one …
|
||||
</li>
|
||||
<li>
|
||||
… or two list items.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
|
||||
</p>
|
||||
<pre><code class="language-css">body {
|
||||
display: none;
|
||||
}</code></pre>
|
||||
<p>
|
||||
I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
|
||||
</p>
|
||||
<blockquote>
|
||||
Wow, that’s amazing. Good work, boy! 👏
|
||||
<br />
|
||||
— Mom
|
||||
</blockquote>
|
||||
`)
|
||||
const editor = useEditor({
|
||||
content: '<p>hello react</p>',
|
||||
extensions: [
|
||||
...defaultExtensions(),
|
||||
Paragraph.extend({
|
||||
addNodeView() {
|
||||
return reactNodeView(() => {
|
||||
// useEffect(() => {
|
||||
// console.log('effect')
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<p className="jooo" data-node-view-wrapper>
|
||||
<span data-node-view-content></span>
|
||||
</p>
|
||||
)
|
||||
})
|
||||
return ReactNodeViewRenderer(() => {
|
||||
// useEffect(() => {
|
||||
// console.log('effect')
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<p className="jooo" data-node-view-wrapper>
|
||||
<span data-node-view-content></span>
|
||||
</p>
|
||||
)
|
||||
})
|
||||
},
|
||||
}),
|
||||
]
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<Editor
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
extensions={defaultExtensions()}
|
||||
>
|
||||
<MenuBar />
|
||||
</Editor>
|
||||
</>
|
||||
<EditorContent editor={editor} />
|
||||
)
|
||||
}
|
||||
|
||||
@ -23,9 +23,13 @@
|
||||
],
|
||||
"peerDependencies": {
|
||||
"@tiptap/core": "^2.0.0-beta.1",
|
||||
"react": "^17.0.1"
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"prosemirror-view": "^1.17.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react-dom": "^17.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
5
packages/react/src/Editor.ts
Normal file
5
packages/react/src/Editor.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { Editor as CoreEditor } from '@tiptap/core'
|
||||
|
||||
export class Editor extends CoreEditor {
|
||||
public contentComponent: any | null = null
|
||||
}
|
||||
71
packages/react/src/EditorContent.jsx
Normal file
71
packages/react/src/EditorContent.jsx
Normal file
@ -0,0 +1,71 @@
|
||||
import React, { useState, useRef, useEffect } from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { Editor } from './Editor'
|
||||
|
||||
// export const EditorContent = ({ editor }) => {
|
||||
// const editorContentRef = useRef(null)
|
||||
|
||||
// useEffect(() => {
|
||||
// if (editor && editor.options.element) {
|
||||
// console.log('set editorContent element')
|
||||
|
||||
// const element = editorContentRef.current
|
||||
|
||||
// element.appendChild(editor.options.element.firstChild)
|
||||
|
||||
// editor.setOptions({
|
||||
// element,
|
||||
// })
|
||||
|
||||
// console.log({instance: this})
|
||||
|
||||
// // TODO: why setTimeout?
|
||||
// setTimeout(() => {
|
||||
// editor.createNodeViews()
|
||||
// }, 0)
|
||||
// }
|
||||
// })
|
||||
|
||||
// return (
|
||||
// <div ref={editorContentRef} />
|
||||
// )
|
||||
// }
|
||||
|
||||
export class EditorContent extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.editorContentRef = React.createRef()
|
||||
this.editorPortalRef = React.createRef()
|
||||
|
||||
this.state = {
|
||||
editor: this.props.editor
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
const { editor } = this.props
|
||||
|
||||
if (editor && editor.options.element) {
|
||||
const element = this.editorContentRef.current
|
||||
|
||||
element.appendChild(editor.options.element.firstChild)
|
||||
|
||||
editor.setOptions({
|
||||
element,
|
||||
})
|
||||
|
||||
editor.contentComponent = this
|
||||
|
||||
// TODO: why setTimeout?
|
||||
setTimeout(() => {
|
||||
editor.createNodeViews()
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div ref={this.editorContentRef} />
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -1 +1,209 @@
|
||||
export default class ReactNodeViewRenderer {}
|
||||
// @ts-nocheck
|
||||
import { Node, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
|
||||
import { Decoration, NodeView } from 'prosemirror-view'
|
||||
import { NodeSelection } from 'prosemirror-state'
|
||||
import { Node as ProseMirrorNode } from 'prosemirror-model'
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import { Editor } from './Editor'
|
||||
import { ReactRenderer } from './ReactRenderer'
|
||||
import test from './test'
|
||||
|
||||
interface ReactNodeViewRendererOptions {
|
||||
stopEvent: ((event: Event) => boolean) | null,
|
||||
update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
|
||||
}
|
||||
|
||||
class ReactNodeView implements NodeView {
|
||||
|
||||
renderer!: ReactRenderer
|
||||
|
||||
editor: Editor
|
||||
|
||||
extension!: Node
|
||||
|
||||
node!: ProseMirrorNode
|
||||
|
||||
decorations!: Decoration[]
|
||||
|
||||
getPos!: any
|
||||
|
||||
isDragging = false
|
||||
|
||||
options: ReactNodeViewRendererOptions = {
|
||||
stopEvent: null,
|
||||
update: null,
|
||||
}
|
||||
|
||||
constructor(component: any, props: NodeViewRendererProps, options?: Partial<ReactNodeViewRendererOptions>) {
|
||||
this.options = { ...this.options, ...options }
|
||||
this.editor = props.editor as Editor
|
||||
this.extension = props.extension
|
||||
this.node = props.node
|
||||
this.getPos = props.getPos
|
||||
this.mount(component)
|
||||
}
|
||||
|
||||
mount(component: any) {
|
||||
const props = {}
|
||||
|
||||
if (!component.displayName) {
|
||||
component.displayName = this.extension.config.name
|
||||
}
|
||||
|
||||
this.renderer = new ReactRenderer(component, {
|
||||
editor: this.editor,
|
||||
props,
|
||||
})
|
||||
}
|
||||
|
||||
get dom() {
|
||||
// if (!this.renderer.element) {
|
||||
// return null
|
||||
// }
|
||||
|
||||
// if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {
|
||||
// throw Error('Please use the NodeViewWrapper component for your node view.')
|
||||
// }
|
||||
|
||||
return this.renderer.element
|
||||
}
|
||||
|
||||
get contentDOM() {
|
||||
// console.log(this.dom)
|
||||
// return null
|
||||
// if (!this.renderer.element) {
|
||||
// return null
|
||||
// }
|
||||
|
||||
const hasContent = !this.node.type.isAtom
|
||||
|
||||
if (!hasContent) {
|
||||
return null
|
||||
}
|
||||
|
||||
const contentElement = this.dom.querySelector('[data-node-view-content]')
|
||||
|
||||
return contentElement || this.dom
|
||||
}
|
||||
|
||||
stopEvent(event: Event) {
|
||||
if (typeof this.options.stopEvent === 'function') {
|
||||
return this.options.stopEvent(event)
|
||||
}
|
||||
|
||||
const target = (event.target as HTMLElement)
|
||||
const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
|
||||
|
||||
// ignore all events from child nodes
|
||||
if (!isInElement) {
|
||||
return false
|
||||
}
|
||||
|
||||
const { isEditable } = this.editor
|
||||
const { isDragging } = this
|
||||
const isDraggable = !!this.node.type.spec.draggable
|
||||
const isSelectable = NodeSelection.isSelectable(this.node)
|
||||
const isCopyEvent = event.type === 'copy'
|
||||
const isPasteEvent = event.type === 'paste'
|
||||
const isCutEvent = event.type === 'cut'
|
||||
const isClickEvent = event.type === 'mousedown'
|
||||
const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
|
||||
|
||||
// ProseMirror tries to drag selectable nodes
|
||||
// even if `draggable` is set to `false`
|
||||
// this fix prevents that
|
||||
if (!isDraggable && isSelectable && isDragEvent) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
if (isDraggable && isDragEvent && !isDragging) {
|
||||
event.preventDefault()
|
||||
return false
|
||||
}
|
||||
|
||||
// we have to store that dragging started
|
||||
if (isDraggable && isEditable && !isDragging && isClickEvent) {
|
||||
const dragHandle = target.closest('[data-drag-handle]')
|
||||
const isValidDragHandle = dragHandle
|
||||
&& (this.dom === dragHandle || (this.dom.contains(dragHandle)))
|
||||
|
||||
if (isValidDragHandle) {
|
||||
this.isDragging = true
|
||||
document.addEventListener('dragend', () => {
|
||||
this.isDragging = false
|
||||
}, { once: true })
|
||||
}
|
||||
}
|
||||
|
||||
// these events are handled by prosemirror
|
||||
if (
|
||||
isDragging
|
||||
|| isCopyEvent
|
||||
|| isPasteEvent
|
||||
|| isCutEvent
|
||||
|| (isClickEvent && isSelectable)
|
||||
) {
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
|
||||
if (mutation.type === 'selection') {
|
||||
if (this.node.isLeaf) {
|
||||
return true
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.contentDOM) {
|
||||
return true
|
||||
}
|
||||
|
||||
const contentDOMHasChanged = !this.contentDOM.contains(mutation.target)
|
||||
|| this.contentDOM === mutation.target
|
||||
|
||||
return contentDOMHasChanged
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this.renderer.destroy()
|
||||
}
|
||||
|
||||
update(node: ProseMirrorNode, decorations: Decoration[]) {
|
||||
if (typeof this.options.update === 'function') {
|
||||
return this.options.update(node, decorations)
|
||||
}
|
||||
|
||||
if (node.type !== this.node.type) {
|
||||
return false
|
||||
}
|
||||
|
||||
if (node === this.node && this.decorations === decorations) {
|
||||
return true
|
||||
}
|
||||
|
||||
this.node = node
|
||||
this.decorations = decorations
|
||||
// this.renderer.updateProps({ node, decorations })
|
||||
this.renderer.render()
|
||||
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
export function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer {
|
||||
return (props: NodeViewRendererProps) => {
|
||||
// try to get the parent component
|
||||
// this is important for vue devtools to show the component hierarchy correctly
|
||||
// maybe it’s `undefined` because <editor-content> isn’t rendered yet
|
||||
if (!(props.editor as Editor).contentComponent) {
|
||||
return {}
|
||||
}
|
||||
|
||||
return new ReactNodeView(component, props, options) as NodeView
|
||||
}
|
||||
}
|
||||
|
||||
@ -1 +1,58 @@
|
||||
export default class ReactRenderer {}
|
||||
// @ts-nocheck
|
||||
|
||||
import React from 'react'
|
||||
import { render, unmountComponentAtNode } from 'react-dom'
|
||||
|
||||
import { Editor } from './Editor'
|
||||
|
||||
export interface VueRendererOptions {
|
||||
as?: string;
|
||||
editor: Editor;
|
||||
props?: { [key: string]: any };
|
||||
}
|
||||
|
||||
export class ReactRenderer {
|
||||
id: string
|
||||
|
||||
editor: Editor
|
||||
|
||||
component: any
|
||||
|
||||
teleportElement: Element
|
||||
|
||||
element: Element
|
||||
|
||||
props: { [key: string]: any }
|
||||
|
||||
constructor(component: any, { props = {}, editor }: VueRendererOptions) {
|
||||
this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
|
||||
this.component = component
|
||||
this.editor = editor
|
||||
this.props = props
|
||||
|
||||
this.teleportElement = document.createElement('div')
|
||||
// this.teleportElement.setAttribute('data-bla', '')
|
||||
// render(React.createElement(component), this.teleportElement)
|
||||
// render(React.createElement(component), this.teleportElement)
|
||||
this.render()
|
||||
// this.element = this.teleportElement.firstElementChild as Element
|
||||
this.element = this.teleportElement
|
||||
}
|
||||
|
||||
render() {
|
||||
render(React.createElement(this.component), this.teleportElement)
|
||||
}
|
||||
|
||||
updateProps(props: { [key: string]: any } = {}) {
|
||||
// TODO
|
||||
}
|
||||
|
||||
destroy() {
|
||||
// TODO
|
||||
// console.log('DESTROY', { bla: this.teleportElement })
|
||||
// console.log(document.querySelector('[data-bla]'))
|
||||
unmountComponentAtNode(this.teleportElement)
|
||||
// unmountComponentAtNode(document.querySelector('[data-bla]'))
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
// @ts-nocheck
|
||||
export * from '@tiptap/core'
|
||||
export { default as ReactRenderer } from './ReactRenderer'
|
||||
export { default as ReactNodeViewRenderer } from './ReactNodeViewRenderer'
|
||||
export {
|
||||
Editor, EditorContext, useEditor,
|
||||
} from './components/Editor'
|
||||
export { Editor } from './Editor'
|
||||
// export {
|
||||
// Editor, EditorContext, useEditor,
|
||||
// } from './components/Editor'
|
||||
export * from './ReactRenderer'
|
||||
export * from './ReactNodeViewRenderer'
|
||||
export * from './EditorContent'
|
||||
|
||||
7
packages/react/src/test.jsx
Normal file
7
packages/react/src/test.jsx
Normal file
@ -0,0 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
export default () => {
|
||||
return (
|
||||
<div className="jooo" data-node-view-wrapper></div>
|
||||
)
|
||||
}
|
||||
81
yarn.lock
81
yarn.lock
@ -1952,9 +1952,9 @@
|
||||
universal-user-agent "^6.0.0"
|
||||
|
||||
"@octokit/openapi-types@^5.3.0":
|
||||
version "5.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-5.3.0.tgz#29e3faa119da90082dc653ea74c8bb345d197bf7"
|
||||
integrity sha512-5q2qBz4iZ0xS/DEJ0ROusFbN4cVlbJE9GvOByen+mv7artuGXfVhONqcuRd7jYN2glTmCnzcZw+X6LrjRVqs0A==
|
||||
version "5.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-5.3.1.tgz#a49d119a1b9e47b7a9f5133ab14be2d8afaa183d"
|
||||
integrity sha512-TvVk2QuIA0lQZcIMd6xbdGaGDVeNYIOa3l1ZVagAIk5K3t/WMYbcg4BISNDhzdVhm/TgQB26frAgd/GV81aHJA==
|
||||
|
||||
"@octokit/plugin-enterprise-rest@^6.0.1":
|
||||
version "6.0.1"
|
||||
@ -2313,6 +2313,21 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
|
||||
integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
|
||||
|
||||
"@types/react-dom@^17.0.1":
|
||||
version "17.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.1.tgz#d92d77d020bfb083e07cc8e0ac9f933599a4d56a"
|
||||
integrity sha512-yIVyopxQb8IDZ7SOHeTovurFq+fXiPICa+GV3gp0Xedsl+MwQlMLKmvrnEjFbQxjliH5YVAEWFh975eVNmKj7Q==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*":
|
||||
version "17.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
|
||||
integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==
|
||||
dependencies:
|
||||
"@types/prop-types" "*"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@types/react@^16.8.12":
|
||||
version "16.14.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.4.tgz#365f6a1e117d1eec960ba792c7e1e91ecad38e6f"
|
||||
@ -3393,9 +3408,9 @@ bcrypt-pbkdf@^1.0.0:
|
||||
tweetnacl "^0.14.3"
|
||||
|
||||
before-after-hook@^2.0.0:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.1.1.tgz#99ae36992b5cfab4a83f6bee74ab27835f28f405"
|
||||
integrity sha512-5ekuQOvO04MDj7kYZJaMab2S8SPjGJbotVNyv7QYFCOAwrGZs/YnoDNlh1U+m5hl7H2D/+n0taaAV/tfyd3KMA==
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.0.tgz#09c40d92e936c64777aa385c4e9b904f8147eaf0"
|
||||
integrity sha512-jH6rKQIfroBbhEXVmI7XmXe3ix5S/PgJqpzdDPnR8JGLHWNYLsYZ6tK5iWOF/Ra3oqEX0NobXGlzbiylIzVphQ==
|
||||
|
||||
big.js@^3.1.3:
|
||||
version "3.2.0"
|
||||
@ -4195,9 +4210,9 @@ cli-width@^2.0.0:
|
||||
integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
|
||||
|
||||
clipboard@^2.0.0:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.6.tgz#52921296eec0fdf77ead1749421b21c968647376"
|
||||
integrity sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==
|
||||
version "2.0.7"
|
||||
resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.7.tgz#da927f817b1859426df39212ac81feb07dbaeadc"
|
||||
integrity sha512-8M8WEZcIvs0hgOma+wAPkrUxpv0PMY1L6VsAJh/2DOKARIMpyWe6ZLcEoe1qktl6/ced5ceYHs+oGedSbgZ3sg==
|
||||
dependencies:
|
||||
good-listener "^1.2.2"
|
||||
select "^1.1.2"
|
||||
@ -4299,9 +4314,9 @@ color-name@^1.0.0, color-name@~1.1.4:
|
||||
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
|
||||
|
||||
color-string@^1.5.3, color-string@^1.5.4:
|
||||
version "1.5.4"
|
||||
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.4.tgz#dd51cd25cfee953d138fe4002372cc3d0e504cb6"
|
||||
integrity sha512-57yF5yt8Xa3czSEW1jfQDE79Idk0+AkN/4KWad6tbdxUmAs3MvjxlWSWD4deYytcRfoZ9nhKyFl1kj5tBvidbw==
|
||||
version "1.5.5"
|
||||
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.5.tgz#65474a8f0e7439625f3d27a6a19d89fc45223014"
|
||||
integrity sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==
|
||||
dependencies:
|
||||
color-name "^1.0.0"
|
||||
simple-swizzle "^0.2.2"
|
||||
@ -5792,9 +5807,9 @@ ee-first@1.1.1:
|
||||
integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
|
||||
|
||||
electron-to-chromium@^1.3.649:
|
||||
version "1.3.681"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.681.tgz#facd915ae46a020e8be566a2ecdc0b9444439be9"
|
||||
integrity sha512-W6uYvSUTHuyX2DZklIESAqx57jfmGjUkd7Z3RWqLdj9Mmt39ylhBuvFXlskQnvBHj0MYXIeQI+mjiwVddZLSvA==
|
||||
version "1.3.682"
|
||||
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.682.tgz#f4b5c8d4479df96b61e508a721d6c32c1262ef23"
|
||||
integrity sha512-zok2y37qR00U14uM6qBz/3iIjWHom2eRfC2S1StA0RslP7x34jX+j4mxv80t8OEOHLJPVG54ZPeaFxEI7gPrwg==
|
||||
|
||||
elegant-spinner@^1.0.1:
|
||||
version "1.0.1"
|
||||
@ -7063,9 +7078,9 @@ gitconfiglocal@^1.0.0:
|
||||
ini "^1.3.2"
|
||||
|
||||
github-buttons@^2.8.0:
|
||||
version "2.14.3"
|
||||
resolved "https://registry.yarnpkg.com/github-buttons/-/github-buttons-2.14.3.tgz#421691619d6becc451fe1ad175d5e29fe3ae2651"
|
||||
integrity sha512-kOXAjak/qEZYKORe1W80q+v8Ehas2yjHjyVWe4OO/MvmaRVH30m6n2xL4OM1+RBq3thVWxdCeVt3LIzbdATsKA==
|
||||
version "2.14.4"
|
||||
resolved "https://registry.yarnpkg.com/github-buttons/-/github-buttons-2.14.4.tgz#f4b335d1af235bfb4a4598162e8f2ca190635124"
|
||||
integrity sha512-Fikb6lylJ2skQnoBaEv9m1yc6QwA8qbRFMRFWU08tMKXpbaql1LMKCghBAiuNpiWiGA25NiKuFO0oeD63030Kw==
|
||||
|
||||
github-from-package@0.0.0:
|
||||
version "0.0.0"
|
||||
@ -7088,9 +7103,9 @@ glob-parent@^3.1.0:
|
||||
path-dirname "^1.0.0"
|
||||
|
||||
glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
|
||||
version "5.1.1"
|
||||
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
|
||||
integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
|
||||
version "5.1.2"
|
||||
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
|
||||
integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
|
||||
dependencies:
|
||||
is-glob "^4.0.1"
|
||||
|
||||
@ -10072,9 +10087,9 @@ no-case@^3.0.4:
|
||||
tslib "^2.0.3"
|
||||
|
||||
node-abi@^2.7.0:
|
||||
version "2.20.0"
|
||||
resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.20.0.tgz#0659ee1a4a04dacabd3ac4429fac6297ed58e92e"
|
||||
integrity sha512-6ldtfVR5l3RS8D0aT+lj/uM2Vv/PGEkeWzt2tl8DFBsGY/IuVnAIHl+dG6C14NlWClVv7Rn2+ZDvox+35Hx2Kg==
|
||||
version "2.21.0"
|
||||
resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.21.0.tgz#c2dc9ebad6f4f53d6ea9b531e7b8faad81041d48"
|
||||
integrity sha512-smhrivuPqEM3H5LmnY3KU6HfYv0u4QklgAxfFyRNujKUzbUcYZ+Jc2EhukB9SRcD2VpqhxM7n/MIcp1Ua1/JMg==
|
||||
dependencies:
|
||||
semver "^5.4.1"
|
||||
|
||||
@ -14689,9 +14704,9 @@ uuid@^3.0.1, uuid@^3.3.2, uuid@^3.4.0:
|
||||
integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
|
||||
|
||||
v8-compile-cache@^2.0.3:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz#9471efa3ef9128d2f7c6a7ca39c4dd6b5055b132"
|
||||
integrity sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
|
||||
integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
|
||||
|
||||
validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.3:
|
||||
version "3.0.4"
|
||||
@ -15189,9 +15204,9 @@ ws@^6.2.1:
|
||||
async-limiter "~1.0.0"
|
||||
|
||||
ws@^7.2.0:
|
||||
version "7.4.3"
|
||||
resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.3.tgz#1f9643de34a543b8edb124bdcbc457ae55a6e5cd"
|
||||
integrity sha512-hr6vCR76GsossIRsr8OLR9acVVm1jyfEWvhbNjtgPOrfvAlKzvyeg/P6r8RuDjRyrcQoPQT7K0DGEPc7Ae6jzA==
|
||||
version "7.4.4"
|
||||
resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.4.tgz#383bc9742cb202292c9077ceab6f6047b17f2d59"
|
||||
integrity sha512-Qm8k8ojNQIMx7S+Zp8u/uHOx7Qazv3Yv4q68MiWWWOJhiwG5W3x7iqmRtJo8xxrciZUY4vRxUTJCKuRnF28ZZw==
|
||||
|
||||
x-is-string@^0.1.0:
|
||||
version "0.1.0"
|
||||
@ -15232,9 +15247,9 @@ y-leveldb@^0.1.0:
|
||||
lib0 "^0.2.31"
|
||||
|
||||
y-prosemirror@^1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/y-prosemirror/-/y-prosemirror-1.0.6.tgz#75cfdd3ec65638f4c3112dd1a5ccd2daeb147f12"
|
||||
integrity sha512-rbYA/kssa/4yMlvdfYrKtZwG15UCdwCIO6fCitua4VaJSVN2ruLvR1OrPl8txhKzyiPiBAphFzjj+ZXkm4D/6w==
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/y-prosemirror/-/y-prosemirror-1.0.7.tgz#e0d3bbbc8b88bc4942d9720fd8413da393999200"
|
||||
integrity sha512-AnlwGoz6+o6PkrBm09kY3+dXP3Yt6QHDIMHhtn0mGeUnSQRVcI0/raQwh/kYD7z1EUPghKfDaH8DoI0duAu5sg==
|
||||
dependencies:
|
||||
lib0 "^0.2.34"
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user