Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to open the controller pop up for Math Equations and Links #1494

Open
fancypants119 opened this issue Jan 10, 2025 · 1 comment
Open

Comments

@fancypants119
Copy link

Describe the bug
After adding a Math Equation or a Link the controller should pop up when the relevant content is interacted with it giving the user to edit as shown in the demo editor in the website. The controller appears for images and table elements added but not for links and equations.

I am using the library on REACT - please tell me if its a bug or have configured something wrong?

Here is my code :

import React, { useRef } from 'react';

import katex from 'katex';
import SunEditor from 'suneditor-react';
import 'suneditor/dist/css/suneditor.min.css';
import 'katex/dist/katex.min.css';


import {
    align,
    font,
    fontColor,
    fontSize,
    formatBlock,
    hiliteColor,
    horizontalRule,
    lineHeight,
    list,
    paragraphStyle,
    table,
    template,
    textStyle,
    image,
    link,
    math
  } from "suneditor/src/plugins";

const SunEditorWithMath = () => {
  const editorRef = useRef(null);

  
  const preprocessMathContent = (content) => {
    return content.replace(/\((.*?)\)/g, (_, latex) => {
      return `<span class="katex" data-exp="${latex}">${latex}</span>`;
    });
  };

 
  const setEditorContent = () => {
    const rawContent = "Here is a fraction: (\\frac{a}{b}) and a square root: (\\sqrt{x^2 + y^2}).";
    const processedContent = preprocessMathContent(rawContent);

    // Ensure editorRef.current is valid and set content
    if (editorRef.current) {
      editorRef.current.setContents(processedContent);
    }
  };

  return (
    <div>
      <h1>SunEditor with LaTeX Equations</h1>

      {/* SunEditor instance */}

      <SunEditor
        showToolbar={true}
        getSunEditorInstance={(sunEditor) => {
          editorRef.current = sunEditor;
        }}
        
        setOptions={{
            
            mode: "classic",
            tabDisable: "false",
            height: 300,
          plugins: [
            font,
            fontSize,
            align,
            fontColor,
            formatBlock,
            hiliteColor,
            horizontalRule,
            lineHeight,
            list,
            paragraphStyle,
            template,
            textStyle,
            image,
            link,
            math,
            table
          ],
          buttonList: [
            [
              "bold",
              "underline",
              "italic",
              "strike",
              "list",
              "align",
              "fontSize",
              "formatBlock",
              "table",
              "image",
              "codeView",
              "math",
              "link"
            ]
          ],
          katex: katex,
        }}
      />

      <button onClick={setEditorContent}>Set Content with Math</button>
    </div>
  );
};

export default SunEditorWithMath;

suneditor.mp4
@roker16
Copy link

roker16 commented Jan 16, 2025

This is problem with react library which maintainer is not maintaining since long time. That is why i requested to realease official package for Suneditor react. @JiHong88 Kindly address this issue, i am not updating suneditor since 1 year because of this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants