Code blocks in rich text editor.

jesschow

7 months ago

5

• 

  now_i_am_a_strawberry2 years ago

  Yes, this is exactly what I need! Thank you again for your help. 👍

• 

  jesschow

  2 years ago

  oic
  
  

  I don't think adding a new

  element

  to the rich text field is what you need here - but here is a good example on how you would set that up

  https://github.com/payloadcms/website-cms/tree/main/src/fields/richText/largeBody
  
  

  Are you looking for something similar to our code block in the payload blog?

  https://payloadcms.com/blog/white-label-admin-ui
  
  

  If yes, you would need to:

  
  

  1. Create a code block containing a

  code

  field

  https://github.com/payloadcms/website-cms/blob/main/src/blocks/Code/index.ts
  

  2. Add the code block to your collection

  https://github.com/payloadcms/website-cms/blob/main/src/collections/Posts.ts
  

  3. Render the block on the front end

  https://github.com/payloadcms/website/blob/main/src/blocks/CodeBlock/index.tsx
  

  4. Add syntax highlighting (can find a package for this or see how we do this)

  https://github.com/payloadcms/website/blob/main/src/components/Code/index.tsx
  
  

  Does this help?

• 

  now_i_am_a_strawberry2 years ago

  Thanks for the reply, but I'm afraid this is not what I'm after. A know that there's the code leaf (I'm currently using it), but that's an

  inline

  element. I'd like to create custom code

  block

  element. Like the code block at the bottom of the picture.
• 

  jesschow

  2 years ago

  Hi

  @368817293062569984

  , the code option within the rich text field is a default option with payload, so all you need to do is add

  code

  to your

  leaves

  like the following:

  
  
  

      {
        name: 'content',
        type: 'richText',
        admin: {
          leaves: [
            'code',
          ],
        },
      }

• 

  now_i_am_a_strawberry2 years ago

  Hi, I created my personal site that has blogging functionality with Payload and I'm loving it. The integration was super easy and coming from Wordpress, the UI feels super nice.

  
  
  

  My question is,

  How to have code blocks in rich text editor?

  I'd like to render code blocks in my blog posts. Currently, I'm using the inline code leaf, which isn't optimal for my case because of obvious reasons. A plus would be if it had syntax highlighting.

  
  
  

  I suppose it should be done like this. (

  https://payloadcms.com/docs/fields/rich-text#example

  ). Example from the docs.

  
  

    {
      name: 'codeblock',
      Button: CodeBlockButton,
      Element: CodeBlockElement,
      plugins: []
    }

  
  
  

  How should the

  CodeBlockElement

  and

  CodeBlockButton

  look like? (If that's how you achieve the code block functionality 😅 )

  
  
  

  Can you please share some info on how to do this? Thanks in advance.

  
  

  You're doing an amazing work. The best experience with CMS I've had. 👌