A vue component with a SageCell

ReadMe.md

SageCell.vue is a Vue 2 component that dynamically creates a SageCell. It akes the following properties as input.

• script: A string that is inserted into the input of the generated SageCell.
• cellName: A name attribute vor the div containing the SageCell
• kernelKey: A name for the SageMath computational environment. Components using the same kernelKey shall run in the same computational environmen. Their SageCells shall be linked.
• options: An options object as defined in the SageCell documentation

When the SageCell input field is edited or when the cell is evaluated, the component sends a respective signal to its parent component. The current content of the SageCell input can be retrieved by calling the method getCurrentScript of the component.

SageCell.vue

<template>
  <div class="container" :name="cellName">
    <div v-html="makeCell"></div>
  </div>
</template>

<script src="https://sagecell.sagemath.org/embedded_sagecell.js"></script>

<script>
export default {
  props: {
    script: {
      type: String,
      default: "1+1",
    },
    cellName: {
      type: String,
      default: 'sagecell'
    },
    kernelKey: {
      type: String,
      default: 'sageServer'
    },
    options: {
      type: Object,
      default() {
        return {
          // Make *any* div with class 'compute' a Sage cell
          inputLocation: "div.compute",
          //languages: sagecell.allLanguages,
          //languages: ["maxima","sage","singular","r"],
          languages: ["sage"],
          evalButtonText: "Evaluate",
          linked: true,
          linkKey: this.kernelKey,
          callback: () => {
            let node = document.getElementsByName(this.cellName)[0];
            let bt = node.getElementsByClassName("sagecell_evalButton");
            bt[0].addEventListener("click", this.isEvaluated);
            let cm = node.getElementsByClassName("CodeMirror");
            cm[0].addEventListener("change", this.isEdited);
          },
        };
      },
    },
  },
  data() {
    return {
    };
  },
  
  mounted() {
    sagecell.makeSagecell(this.options);
  },
  methods: {
    isEvaluated() {
      let script = this.getCurrentScript();
      this.$emit('evaluated',script);
    },
    isEdited() {
      this.$emit('edited')
    },
    getCurrentScript () {
      let node = document.getElementsByName(this.cellName)[0];
      let cm = node.getElementsByClassName("CodeMirror");
      let script=cm[0].CodeMirror.getValue();
      return script;
    },
  },
  computed: {
    makeCell() {
      return (
        '<div class="compute"><script type="text/x-sage">' +
        this.script +
        "<\/script></div>"
      );
    },
  },
};
</script>