ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactoring

Browse Source
This commit is contained in:
Philipp Kühn
2021-03-08 22:07:51 +01:00
parent ed7f8c257e
commit a01b7356d7
2 changed files with 0 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
docs/src/demos/Examples/Default/React/index-nope.jsx
View File

@@ -1,51 +0,0 @@
// export default () => {
// const editor = useEditor({
// content: '<p>hello react</p>',
// onTransaction() {
// // console.log('update', this)
// },
// 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 &&
// <button
// onClick={() => editor.chain().focus().toggleBold().run()}
// className={editor.isActive('bold') ? 'is-active' : ''}
// >
// bold
// </button>
// }
// <EditorContent editor={editor} />
// </>
// )
// }

167
docs/src/demos/Examples/Default/React/index-ori.jsx
View File

@@ -1,167 +0,0 @@
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>
</>
)
}