Code blocks in rich text editor.

now_i_am_a_strawberry2 years ago

5

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

• 

  jessrynkar2 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

  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.
• 

  jessrynkar2 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

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

• 

  jessrynkar2 years ago

  Any time!