<commit_before>import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import classNames from 'classnames';
import withUser from '../common/withUser';
import Sentry from '@sentry/core';
import { Meteor } from 'meteor/meteor';

const scrollIndicatorColor = "#ddd";
const scrollIndicatorHoverColor = "#888";

const styles = theme => ({
  scrollIndicatorWrapper: {
    display: "block",
    position: "relative",
    
    paddingLeft: 13,
    paddingRight: 13,
  },
  
  hidden: {
    display: "none !important",
  },
  
  scrollIndicator: {
    position: "absolute",
    top: "50%",
    marginTop: -28,
    cursor: "pointer",
    
    // Scroll arrows use the CSS Triangle hack - see
    // https://css-tricks.com/snippets/css/css-triangle/ for a full explanation
    borderTop: "20px solid transparent",
    borderBottom: "20px solid transparent",
  },
  
  scrollIndicatorLeft: {
    left: 0,
    borderRight: "10px solid "+scrollIndicatorColor,
    
    "&:hover": {
      borderRight: "10px solid "+scrollIndicatorHoverColor,
    },
  },
  
  scrollIndicatorRight: {
    right: 0,
    borderLeft: "10px solid "+scrollIndicatorColor,
    
    "&:hover": {
      borderLeft: "10px solid "+scrollIndicatorHoverColor,
    },
  },
  
  scrollableLaTeX: {
    // Cancel out the margin created by the block elements above and below,
    // so that we can convert them into padding and get a larger touch
    // target.
    // !important to take precedence over .mjx-chtml
    marginTop: "-1em !important",
    marginBottom: "-1em !important",
    
    paddingTop: "2em !important",
    paddingBottom: "2em !important",
    
    // Hide the scrollbar (on browsers that support it) because our scroll
    // indicator is better
    "-ms-overflow-style": "-ms-autohiding-scrollbar",
    "&::-webkit-scrollbar": {
      display: "none",
    },
  }
});

interface ContentItemBodyProps extends WithStylesProps {
  dangerouslySetInnerHTML: { __html: string },
  className?: string,
  description?: string,
}
interface ContentItemBodyState {
  updatedElements: boolean,
}

// The body of a post/comment/etc, created by taking server-side-processed HTML
// out of the result of a GraphQL query and adding some decoration to it. In
// particular, if this is the client-side render, adds scroll indicators to
// horizontally-scrolling LaTeX blocks.
//
// This doesn't apply styling (other than for the decorators it adds) because
// it's shared between entity types, which have styling that differs.
//
// Props:
//    className <string>: Name of an additional CSS class to apply to this element.
//    dangerouslySetInnerHTML: Follows the same convention as
//      dangerouslySetInnerHTML on a div, ie, you set the HTML content of this
//      by passing dangerouslySetInnerHTML={{__html: "<p>foo</p>"}}.
//    description: (Optional) A human-readable string describing where this
//      content came from. Used in error logging only, not displayed to users.
class ContentItemBody extends Component<ContentItemBodyProps,ContentItemBodyState> {
  bodyRef: any
  replacedElements: Array<any>
  
  constructor(props: ContentItemBodyProps) {
    super(props);
    this.bodyRef = React.createRef();
    this.replacedElements = [];
    this.state = {updatedElements:false}
  }

  componentDidMount () {
    this.applyLocalModifications();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.dangerouslySetInnerHTML?.__html !== this.props.dangerouslySetInnerHTML?.__html) {<commit_msg>Fix bug which caused tag hover-preview to not close when navigating from tag page to tag page<commit_after>import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Components, registerComponent } from '../../lib/vulcan-lib';
import classNames from 'classnames';
import withUser from '../common/withUser';
import Sentry from '@sentry/core';
import { Meteor } from 'meteor/meteor';

const scrollIndicatorColor = "#ddd";
const scrollIndicatorHoverColor = "#888";

const styles = theme => ({
  scrollIndicatorWrapper: {
    display: "block",
    position: "relative",
    
    paddingLeft: 13,
    paddingRight: 13,
  },
  
  hidden: {
    display: "none !important",
  },
  
  scrollIndicator: {
    position: "absolute",
    top: "50%",
    marginTop: -28,
    cursor: "pointer",
    
    // Scroll arrows use the CSS Triangle hack - see
    // https://css-tricks.com/snippets/css/css-triangle/ for a full explanation
    borderTop: "20px solid transparent",
    borderBottom: "20px solid transparent",
  },
  
  scrollIndicatorLeft: {
    left: 0,
    borderRight: "10px solid "+scrollIndicatorColor,
    
    "&:hover": {
      borderRight: "10px solid "+scrollIndicatorHoverColor,
    },
  },
  
  scrollIndicatorRight: {
    right: 0,
    borderLeft: "10px solid "+scrollIndicatorColor,
    
    "&:hover": {
      borderLeft: "10px solid "+scrollIndicatorHoverColor,
    },
  },
  
  scrollableLaTeX: {
    // Cancel out the margin created by the block elements above and below,
    // so that we can convert them into padding and get a larger touch
    // target.
    // !important to take precedence over .mjx-chtml
    marginTop: "-1em !important",
    marginBottom: "-1em !important",
    
    paddingTop: "2em !important",
    paddingBottom: "2em !important",
    
    // Hide the scrollbar (on browsers that support it) because our scroll
    // indicator is better
    "-ms-overflow-style": "-ms-autohiding-scrollbar",
    "&::-webkit-scrollbar": {
      display: "none",
    },
  }
});

interface ContentItemBodyProps extends WithStylesProps {
  dangerouslySetInnerHTML: { __html: string },
  className?: string,
  description?: string,
}
interface ContentItemBodyState {
  updatedElements: boolean,
}

// The body of a post/comment/etc, created by taking server-side-processed HTML
// out of the result of a GraphQL query and adding some decoration to it. In
// particular, if this is the client-side render, adds scroll indicators to
// horizontally-scrolling LaTeX blocks.
//
// This doesn't apply styling (other than for the decorators it adds) because
// it's shared between entity types, which have styling that differs.
//
// Props:
//    className <string>: Name of an additional CSS class to apply to this element.
//    dangerouslySetInnerHTML: Follows the same convention as
//      dangerouslySetInnerHTML on a div, ie, you set the HTML content of this
//      by passing dangerouslySetInnerHTML={{__html: "<p>foo</p>"}}.
//    description: (Optional) A human-readable string describing where this
//      content came from. Used in error logging only, not displayed to users.
class ContentItemBody extends Component<ContentItemBodyProps,ContentItemBodyState> {
  bodyRef: any
  replacedElements: Array<any>
  
  constructor(props: ContentItemBodyProps) {
    super(props);
    this.bodyRef = React.createRef();
    this.replacedElements = [];
    this.state = {updatedElements:false}
  }

  componentDidMount () {
    this.applyLocalModifications();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.dangerouslySetInnerHTML?.__html !== this.props.dangerouslySetInnerHTML?.__html) {
      this.replacedElements = [];
{'fraction_non_alphanumeric': 0.11197124688968758, 'fraction_numerical': 0.008017694221730716, 'mean_word_length': 3.400851581508516, 'pattern_counts': {'":': 8, '<': 13, '<?xml version=': 0, '>': 15, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6199207', 'n_tokens_mistral': 2148, 'n_tokens_neox': 2079, 'n_words': 665}