Function TextWidget

client/src/containers/Chart/TextWidget.jsx:29–555

({
  chart,
  onEditLayout,
  editingLayout,
  onCancelChanges,
  onSaveChanges,
  onEditContent,
  isPublic = false,
})

import { ButtonSpinner } from "../../components/ButtonSpinner";

function TextWidget({
  chart,
  onEditLayout,
  editingLayout,
  onCancelChanges,
  onSaveChanges,
  onEditContent,
  isPublic = false,
}) {
  const [content, setContent] = useState(chart.content || "");
  const [isEditing, setIsEditing] = useState(false);
  const [chartLoading, setChartLoading] = useState(false);
  const [deleteModal, setDeleteModal] = useState(false);
  const [isPreview, setIsPreview] = useState(false);

  const dispatch = useDispatch();
  const user = useSelector(selectUser);
  const team = useSelector(selectTeam);
  const params = useParams();
  const textareaRef = useRef(null);

  useEffect(() => {
    setIsEditing(chart.staged)
  }, [chart])

  // Add a new handler for interactive elements
  const handleInteractiveMouseDown = (e) => {
    e.stopPropagation();
  };

  const components = {
    // code: ({ children }) => {
    //   const formattedText = String(children).replace(/^`|`$/g, ""); // Remove backticks

    //   return (
    //     <Code>
    //       {formattedText}
    //     </Code>
    //   );
    // },
    code: ({ children, className }) => {
      const formattedText = String(children).replace(/^`|`$/g, ""); // Strip backticks

      return className ? (
        // Block code (if it has a class, meaning it's a code block)
        <pre className="bg-content2 text-foreground p-2 rounded-md overflow-auto">
          <code className={className}>{formattedText}</code>
        </pre>
      ) : (
        // Inline code (if no class)
        <span className="bg-content2 text-foreground px-1 rounded-sm">{formattedText}</span>
      );
    },
    li: ({ children, className }) => {
      // If this is a task list item, remove the bullet point and reduce padding
      if (className?.includes("task-list-item")) {
        return <li className={`${className} list-none -ml-6`}>{children}</li>;
      }