<commit_before><div class="lively-content" style="width: max-content; height: 41.625px; border: 1px solid gray; position: absolute; background-color: white; left: 38.61px; top: 271.31px; z-index: 500;" data-lively-id="bde8ccbe-f96f-4fd4-be65-4f5043e075df" data-lively-part-name="formatting" tabindex="0"><script data-name="fontSize" type="lively4script">function fontSize(element) {
  if (!element || that.contentEditable) return ;
  
  if (element.tagName == "FONT") {
    var size = element.getAttribute("size")
    if (size !== undefined) {
      return size
    }
  } 
  return this.fontSize(element.parentElement)
  
}</script><script data-name="increateFontSize" type="lively4script">function increateFontSize(evt) {
  
}</script><script data-name="commandButton" type="lively4script">function commandButton(label, command, parameter) {
  var button = document.createElement("button")
  button.innerHTML = label
  button.addEventListener("click", (evt) => {
    document.execCommand(command, true, parameter)
    evt.preventDefault()
    evt.stopPropagation()
  })
  this.shadowRoot.appendChild(button)
}</script><script data-name="selectFont" type="lively4script">function selectFont(name) {
  lively.notify("select " + name)
  document.execCommand("styleWithCSS", true, true)
  document.execCommand("fontName", true, name)
}</script><script data-name="getSelection" type="lively4script">function getSelection() {
  var selection = window.getSelection();  
  console.log("active element: " + document.activeElement)
  if (document.activeElement && document.activeElement.shadowRoot) {
    var innerSelection = document.activeElement.shadowRoot.getSelection()
    if (innerSelection.anchorNode) {
      selection = innerSelection
    }
  }
  return selection
}</script><script data-name="rememberSelection" type="lively4script">function rememberSelection() {
  this.selection = this.getSelection()
  this.range = this.selection.getRangeAt(0)
}</script><script data-name="customButton" type="lively4script">function customButton(label, callback) {
  var button = document.createElement("button")
  button.innerHTML = label
  button.addEventListener("click", (evt) => {
    callback(evt, button)
    evt.preventDefault()
    evt.stopPropagation()
  })
  this.shadowRoot.appendChild(button)
}</script><script data-name="chooseFont" type="lively4script">function chooseFont(evt, button) {
  var fontlist = ["serif", "sans-serif", "monospace"]
  lively.create("lively-menu").then(menu => {
    menu.openOn(fontlist.map(ea => {
      return [ea, () => {
        this.selection.addRange(this.range)
        this.selectFont(ea)
        menu.remove()
      }]
    }));          

    lively.setGlobalPosition(menu, lively.getGlobalBounds(button).bottomLeft())
    menu.style.zIndex = 40000;

     // defere event registration to prevent closing the menu as it was opened
    setTimeout(() => {
      lively.addEventListener("contextMenu", document.documentElement, "click", () => {
        menu.remove();
      });        
    }, 0)
  })
}</script><script data-name="livelyLoad" type="lively4script">function livelyLoad() {
  (async () => {
    this.createShadowRoot();
    this.setAttribute("tabindex", 0)

    this.shadowRoot.innerHTML = "<style data-src='/src/external/font-awesome/css/font-awesome.min.css'></style>"
    await lively.fillTemplateStyles(this.shadowRoot)

    lively.removeEventListener("StyleBalloon", this)
    lively.addEventListener("StyleBalloon", this,"mousedown", () => this.rememberSelection())

    this.customButton('<i class="fa fa-font" aria-hidden="true"></i>', (evt, button) => 
        this.chooseFont(evt, button))
    
    
    this.commandButton('<i class="fa fa-bold" aria-hidden="true"></i>', "bold")
    this.commandButton('<i class="fa fa-italic" aria-hidden="true"></i>', "italic")

    this.colorChooser("fore", "foreColor") 
    this.colorChooser("back", "backColor") 

    
    
    // this.commandButton("fontName", "fontName", "Times") 
    this.commandButton('<i class="fa fa-align-left" aria-hidden="true"></i>', "justifyLeft")

    this.commandButton('<i class="fa fa-align-justify" aria-hidden="true"></i>', "justifyFull")
    this.commandButton('<i class="fa fa-align-center" aria-hidden="true"></i>', "justifyCenter")
    this.commandButton('<i class="fa fa-align-right" aria-hidden="true"></i>', "justifyRight")
    this.commandButton('<i class="fa fa-eraser" aria-hidden="true"></i>', "removeFormat")

    this.style.width = "max-content"
  })()
 }</script><script data-name="colorChooser" type="lively4script">function colorChooser(label, command, parameter) {
  var color = document.createElement("lively-crayoncolors")
  color.style.position = "relative"
  color.style.top = "7px" // #Hack the padding of buttons seems to be weirred #TODO
  // color.textContent = label
  color.addEventListener("value-changed", (evt) => {
    var parameter = evt.detail.value
    this.colorChooserChoose(command, parameter)
    evt.preventDefault()
    evt.stopPropagation()
  })
  lively.components.openIn(this.shadowRoot, color)
}</script><script data-name="colorChooserChoose" type="lively4script">function colorChooserChoose(command, color) {
    this.selection.addRange(this.range)
    document.execCommand(command, true, color)
}</script></div><commit_msg>fix color and font choosing in style balloon<commit_after><div class="lively-content" style="width: max-content; height: 41.625px; border: 1px solid gray; position: absolute; background-color: white; left: -433.79px; top: 400px; z-index: 500;" data-lively-id="bde8ccbe-f96f-4fd4-be65-4f5043e075df" data-lively-part-name="formatting" tabindex="0"><script data-name="fontSize" type="lively4script">function fontSize(element) {
  if (!element || that.contentEditable) return ;
  
  if (element.tagName == "FONT") {
    var size = element.getAttribute("size")
    if (size !== undefined) {
      return size
    }
  } 
  return this.fontSize(element.parentElement)
  
}</script><script data-name="increateFontSize" type="lively4script">function increateFontSize(evt) {
  
}</script><script data-name="commandButton" type="lively4script">function commandButton(label, command, parameter) {
  var button = document.createElement("button")
  button.innerHTML = label
  button.addEventListener("click", (evt) => {
    document.execCommand(command, true, parameter)
    evt.preventDefault()
    evt.stopPropagation()
  })
  this.shadowRoot.appendChild(button)
}</script><script data-name="selectFont" type="lively4script">function selectFont(name) {
  lively.notify("select " + name)
  document.execCommand("styleWithCSS", true, true)
  document.execCommand("fontName", true, name)
}</script><script data-name="getSelection" type="lively4script">function getSelection() {
  var selection = window.getSelection();  
  console.log("active element: " + document.activeElement)
  if (document.activeElement && document.activeElement.shadowRoot) {
    var innerSelection = document.activeElement.shadowRoot.getSelection()
    if (innerSelection.anchorNode) {
      selection = innerSelection
    }
  }
  return selection
}</script><script data-name="rememberSelection" type="lively4script">function rememberSelection() {
  this.selection = this.getSelection()
  this.range = this.selection.getRangeAt(0)
}</script><script data-name="customButton" type="lively4script">function customButton(label, callback) {
  var button = document.createElement("button")
  button.innerHTML = label
  button.addEventListener("click", (evt) => {
    callback(evt, button)
    evt.preventDefault()
    evt.stopPropagation()
  })
  this.shadowRoot.appendChild(button)
}</script><script data-name="livelyLoad" type="lively4script">function livelyLoad() {
  (async () => {
    this.createShadowRoot();
    this.setAttribute("tabindex", 0)

    this.shadowRoot.innerHTML = "<style data-src='/src/external/font-awesome/css/font-awesome.min.css'></style>"
    await lively.fillTemplateStyles(this.shadowRoot)

    lively.removeEventListener("StyleBalloon", this)
    lively.addEventListener("StyleBalloon", this,"mousedown", () => this.rememberSelection())

    this.customButton('<i class="fa fa-font" aria-hidden="true"></i>', (evt, button) => 
        this.chooseFont(evt, button))
    
    
    this.commandButton('<i class="fa fa-bold" aria-hidden="true"></i>', "bold")
    this.commandButton('<i class="fa fa-italic" aria-hidden="true"></i>', "italic")

    this.colorChooser("fore", "foreColor") 
    this.colorChooser("back", "backColor") 

    
    
    // this.commandButton("fontName", "fontName", "Times") 
    this.commandButton('<i class="fa fa-align-left" aria-hidden="true"></i>', "justifyLeft")

    this.commandButton('<i class="fa fa-align-justify" aria-hidden="true"></i>', "justifyFull")
    this.commandButton('<i class="fa fa-align-center" aria-hidden="true"></i>', "justifyCenter")
    this.commandButton('<i class="fa fa-align-right" aria-hidden="true"></i>', "justifyRight")
    this.commandButton('<i class="fa fa-eraser" aria-hidden="true"></i>', "removeFormat")

    this.style.width = "max-content"
  })()
 }</script><script data-name="colorChooser" type="lively4script">function colorChooser(label, command, parameter) {
  var color = document.createElement("lively-crayoncolors")
  color.style.position = "relative"
  color.style.top = "7px" // #Hack the padding of buttons seems to be weirred #TODO
  // color.textContent = label
  color.addEventListener("value-changed", (evt) => {
    var parameter = evt.detail.value
    this.colorChooserChoose(command, parameter)
    evt.preventDefault()
    evt.stopPropagation()
  })
  lively.components.openIn(this.shadowRoot, color)
}</script><script data-name="chooseFont" type="lively4script">function chooseFont(evt, button) {
  var fontlist = ["serif", "sans-serif", "monospace"]
  lively.create("lively-menu").then(menu => {
    menu.openOn(fontlist.map(ea => {
      return [ea, () => {
        console.log("range", this.range)
        this.selection.removeAllRanges()
        this.selection.addRange(this.range)
        this.selectFont(ea)
        menu.remove()
      }]
    }));          

    lively.setGlobalPosition(menu, lively.getGlobalBounds(button).bottomLeft())
    menu.style.zIndex = 40000;

     // defere event registration to prevent closing the menu as it was opened
    setTimeout(() => {
      lively.addEventListener("contextMenu", document.documentElement, "click", () => {
        menu.remove();
      });        
    }, 0)
  })
}</script><script data-name="colorChooserChoose" type="lively4script">function colorChooserChoose(command, color) {
    this.selection.removeAllRanges()
    this.selection.addRange(this.range)
    document.execCommand(command, true, color)
}</script></div>
{'fraction_non_alphanumeric': 0.16100827829969305, 'fraction_numerical': 0.009952562552320715, 'mean_word_length': 4.629319371727749, 'pattern_counts': {'":': 0, '<': 87, '<?xml version=': 0, '>': 109, 'https://': 0, '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': '6687083', 'n_tokens_mistral': 3336, 'n_tokens_neox': 3273, 'n_words': 570}