Lexical Inline Images / uploads?

tyteen4a032 years ago

5

• 

  arinji.2 years ago

  Would def love this feature added.

  
  
  @114557048678514693

  do you have any workarounds in mind?

• 

  tyteen4a032 years ago

  no, I think we'll need to wait for

  @360823574644129795

  to save us 😄

• 

  arinji.2 years ago

  yea lol, especially since lists are hard to just make :(

  
  
  @114557048678514693
  
  

  import { SerializedBlockNode } from "@payloadcms/richtext-lexical";
  import { Block } from "payload/types";
  
  export const ListBlock: Block = {
    slug: "List",
  
    interfaceName: "ListBlock",
    fields: [
      {
        name: "type",
        type: "select",
        required: true,
        admin: {
          description: "The message to display in the alert",
        },
        options: [
          {
            label: "Ordered",
            value: "ordered",
          },
          {
            label: "Unordered",
            value: "unordered",
          },
        ],
      },
      {
        name: "items",
        type: "array",
        required: true,
  
        fields: [
          {
            name: "item",
            type: "richText",
            required: true,
          },
        ],
      },
    ],
  };
  }

  
  
  

  I made this custom block, which works on my frontend.. you can use it if you want till the payload team gets inline images working

  
  
  
• 

  augdustlast year

  Did you ever find a nice solution for this

  @114557048678514693

  ? Was thinking of implementing it as a custom block (with a image field and it's own rich text field), but I didn't really love the editor experience with that approach.

  
  
  

  Tried adding a "position" field to uploads in the Lexical editor ('centered', 'floatLeft' and so on) but I can't seem to figure out how to style it so my image would floating left or right to the following paragraph/content in the richtext.

  
  
  

  See screenshot for reference of what I'm trying to accomplish visually.
• 

  tyteen4a03last year

  mine has it working on the frontend

  https://github.com/tyteen4a03/payload-lexical-renderer-example