F
Filament•5d ago
BloodDrunk

Issues with markdown editor being populated

Hello, I am experiencing a very weird issue which doesn't seem to be addressed anywhere, nor that anyone experienced such. I have created an edit action for the DocumentRelationManager, and when I trigger the action, slidingModal pops up as in the screenshot, with the empty content. I checked the data is correctly pulled from the database and populated (otherwise title wouldn't be populated, either). Now, if I were to click on the content textbox (I specifically have to click on the TEXTBOX part, where the cursor turns into the straight line), the content would show up. Same way, if I were to switch tab focuses (go to another tab and then back to it), it again shows the content. What the hell is going on here? Can someone help me resolve this? This is also happening SOMETIMES! Not always, but sometimes content just doesn't render, other times it renders normally, which makes it even harder to debug...
No description
No description
2 Replies
toeknee
toeknee•5d ago
I've got a feeling this is about mounting and how the editor isn't re-triggered possibly. I never did track it down
BloodDrunk
BloodDrunkOP•5d ago
I'm trying to find a way to control the MDE through the JS (alpine) in the component where the edit will be mounted, and I found that window object has EasyMDE and CodeMirror instance, but there isn't anything that I can use to perhaps trigger a refresh or re-render..I'm trying to manually trigger the render as it happens when I click on the textarea, or when i switch tabs 
setTimeout(() => {
  const editor =   document.querySelector('.CodeMirror');
  const scrollbar = editor?.querySelector('.CodeMirror-vscrollbar');

  if (scrollbar) {
    scrollbar.scrollTop = scrollbar.scrollHeight;
  }
}, 500);
setTimeout(() => {
  const editor =   document.querySelector('.CodeMirror');
  const scrollbar = editor?.querySelector('.CodeMirror-vscrollbar');

  if (scrollbar) {
    scrollbar.scrollTop = scrollbar.scrollHeight;
  }
}, 500);
So far what I got is that if I scroll, it will also render content, so I have to use timeout because idk how can I hook into when the component is mounted, to run the function...lousy hack but someone please provide better approach, to at least get rid of timeout I moved it to the formSchema for the relation manager. 
Forms\Components\MarkdownEditor::make('content')
  ->columnSpanFull()
  ->toolbarButtons([
    'bold',
    'italic',
    'heading',
    'bulletList',
    'orderedList',
  ])
  ->required()
  ->extraAttributes([
    'x-data' => '{}',
    'x-init' => '() => {
      /** Hack for Filament’s MarkdownEditor not rendering the content immediately.
      * By forcing a scroll on the CodeMirror instance after a short timeout,
      * we trigger the editor to re‐render its content.
      */
      setTimeout(() => {
        const editor = document.querySelector(".CodeMirror");
        const scrollbar = editor?.querySelector(".CodeMirror-vscrollbar");

        if (scrollbar) {
          scrollbar.scrollTop = scrollbar.scrollHeight;
        }
        }, 250);
      }',
    ]),
Forms\Components\MarkdownEditor::make('content')
  ->columnSpanFull()
  ->toolbarButtons([
    'bold',
    'italic',
    'heading',
    'bulletList',
    'orderedList',
  ])
  ->required()
  ->extraAttributes([
    'x-data' => '{}',
    'x-init' => '() => {
      /** Hack for Filament’s MarkdownEditor not rendering the content immediately.
      * By forcing a scroll on the CodeMirror instance after a short timeout,
      * we trigger the editor to re‐render its content.
      */
      setTimeout(() => {
        const editor = document.querySelector(".CodeMirror");
        const scrollbar = editor?.querySelector(".CodeMirror-vscrollbar");

        if (scrollbar) {
          scrollbar.scrollTop = scrollbar.scrollHeight;
        }
        }, 250);
      }',
    ]),
For anyone that encouters this crappy scenario, hope it will help..

Did you find this page helpful?