Next.js Discord

Discord Forum

wyiswg editor

Unanswered
Chinese Alligator posted this in #help-forum
Open in Discord
Chinese AlligatorOP
what wyiswg editor do you recommend for next.js app ?

30 Replies

Chinese AlligatorOP
it has buttons
not icons
for bold, italic etc
@Chinese Alligator it has buttons
B33fb0n3
By default it’s just the editor. You can either use their toolbar (search in the docs for it) or create a custom one
Chinese AlligatorOP
i need rather something which is done
simple solution
not next notion
B33fb0n3
Yea, then add their toolbar (search their docs) and place it in your editor. Everything is already done
Chinese AlligatorOP
i want change icons
and dont have notion moving etc
@Chinese Alligator i want change icons
B33fb0n3
You can change icons easily by creating your own custom toolbar. Use the template from them and just exchange the icons 🙂
Chinese AlligatorOP
ok
Chinese AlligatorOP
'use client'

import { useEditor, EditorContent } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'

const Tiptap = () => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Hello World! 🌎️</p>',
    // Don't render immediately on the server to avoid SSR issues
    immediatelyRender: false,
  })

  return <EditorContent editor={editor} />
}

export default Tiptap
how to type this? this is js code
@Chinese Alligator how to type this? this is js code
B33fb0n3
tiptap is already typed by default. Make sure to use it in a .ts file. More [see here](https://tiptap.dev/docs/guides/typescript)
Chinese AlligatorOP
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React from 'react'

const MenuBar = ({ editor }) => {
  if (!editor) {
    return null
  }

  return (
    <div className="control-group">
      <div className="button-group">
        <button
Binding element 'editor' implicitly has an 'any' type.
error in editor props
how to type this ?
and second thing
import { EditorContent, useEditor } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React from 'react'

const MenuBar = ({ editor }: {editor: any}) => {
  if (!editor) {
    return null
  }

  return (
    <div className="control-group">
      <div className="button-group">
        <button
          onClick={() => editor.chain().focus().setParagraph().run()}
          className={editor.isActive('paragraph') ? 'is-active' : ''}
        >
          Paragraph
        </button>
        <button
          onClick={(e) => {e.preventDefault(); editor.chain().focus().toggleBold().run()}}
          className={editor.isActive('bold') ? 'is-active' : ''}
        >
          Bold
        </button>
        <button
          onClick={() => editor.chain().focus().toggleItalic().run()}
          className={editor.isActive('italic') ? 'is-active' : ''}
        >
          Italic
        </button>
        <button
          onClick={() => editor.chain().focus().toggleStrike().run()}
          className={editor.isActive('strike') ? 'is-active' : ''}
        >
          Strike
        </button>
      </div>
    </div>
  )
}

export default () => {
  const editor = useEditor({
    extensions: [
      StarterKit
    ],
    content: ``, 
    immediatelyRender: false,
    editorProps: {
        attributes: {
            class: 'border-2 border-black p-3 min-h-[320px] focus:outline-none',
        },
    },
  })

  return (
    <>
      <MenuBar editor={editor} />
      <EditorContent editor={editor} />
    </>
  )
}
after click on Bold it goes to the top of the page and enters it again
also with\ Italic, Strike
Chinese AlligatorOP
??
B33fb0n3
iirc there is an "Editor" type from tiptap itself. The rerender can be fixed when setting the "transaction" config key to be not the default. So when default is false, set it to true
Chinese AlligatorOP
transaction: true
?
hmm
iirc there is an "Editor" type from tiptap itself.
but how to import it
Chinese AlligatorOP
????