diff --git a/io.sc.engine.rule.core/src/main/java/io/sc/engine/rule/core/code/impl/support/processor/MathFormula.java b/io.sc.engine.rule.core/src/main/java/io/sc/engine/rule/core/code/impl/support/processor/MathFormula.java
index 6bb99a8e..db6b61b1 100644
--- a/io.sc.engine.rule.core/src/main/java/io/sc/engine/rule/core/code/impl/support/processor/MathFormula.java
+++ b/io.sc.engine.rule.core/src/main/java/io/sc/engine/rule/core/code/impl/support/processor/MathFormula.java
@@ -85,11 +85,64 @@ public class MathFormula {
     public static void main(String[] args)throws Exception {
         String xml ="<math>\n" +
                 "  <mspace/>\n" +
-                "  <mi>x</mi>\n" +
+                "  <mfrac>\n" +
+                "    <mrow>\n" +
+                "      <mspace/>\n" +
+                "      <mfrac>\n" +
+                "        <mrow>\n" +
+                "          <mspace/>\n" +
+                "          <mn>1</mn>\n" +
+                "          <mspace/>\n" +
+                "        </mrow>\n" +
+                "        <mrow>\n" +
+                "          <mspace/>\n" +
+                "          <mn>1</mn>\n" +
+                "          <mspace/>\n" +
+                "          <mo>+</mo>\n" +
+                "          <mspace/>\n" +
+                "          <msup>\n" +
+                "            <mrow>\n" +
+                "              <mspace/>\n" +
+                "              <mn>e</mn>\n" +
+                "              <mspace/>\n" +
+                "            </mrow>\n" +
+                "            <mrow>\n" +
+                "              <mspace/>\n" +
+                "              <mi>  主营业务增长率_Slope</mi>\n" +
+                "              <mspace/>\n" +
+                "              <mo>×</mo>\n" +
+                "              <mspace/>\n" +
+                "              <mi>(</mi>\n" +
+                "              <mspace/>\n" +
+                "              <mi> 主营业务增长率_Center</mi>\n" +
+                "              <mspace/>\n" +
+                "              <mo style=\"padding-top: 5px; padding-bottom: 5px;\">-</mo>\n" +
+                "              <mspace/>\n" +
+                "              <mi> 主营业务收入增长率</mi>\n" +
+                "              <mspace/>\n" +
+                "              <mi>)</mi>\n" +
+                "              <mspace/>\n" +
+                "            </mrow>\n" +
+                "          </msup>\n" +
+                "          <mspace/>\n" +
+                "        </mrow>\n" +
+                "      </mfrac>\n" +
+                "      <mspace/>\n" +
+                "      <mo style=\"padding-top: 5px; padding-bottom: 5px;\">-</mo>\n" +
+                "      <mspace/>\n" +
+                "      <mi> 主营业务增长率_LogitMeanAfterLmp</mi>\n" +
+                "      <mspace/>\n" +
+                "    </mrow>\n" +
+                "    <mrow>\n" +
+                "      <mspace/>\n" +
+                "      <mi> 主营业务增长率_LogitStDevAfterLmp</mi>\n" +
+                "      <mspace/>\n" +
+                "    </mrow>\n" +
+                "  </mfrac>\n" +
                 "  <mspace/>\n" +
-                "  <mo>+</mo>\n" +
+                "  <mo>×</mo>\n" +
                 "  <mspace/>\n" +
-                "  <mn>c</mn>\n" +
+                "  <mn>50</mn>\n" +
                 "  <mspace/>\n" +
                 "</math>";
         Reader reader = new StringReader(xml);
diff --git a/io.sc.engine.rule.core/src/main/java/io/sc/engine/rule/core/code/impl/support/processor/NumberRange.java b/io.sc.engine.rule.core/src/main/java/io/sc/engine/rule/core/code/impl/support/processor/NumberRange.java
index 0ee58d5f..bdd98f59 100644
--- a/io.sc.engine.rule.core/src/main/java/io/sc/engine/rule/core/code/impl/support/processor/NumberRange.java
+++ b/io.sc.engine.rule.core/src/main/java/io/sc/engine/rule/core/code/impl/support/processor/NumberRange.java
@@ -1,5 +1,6 @@
 package io.sc.engine.rule.core.code.impl.support.processor;
 
+import java.math.BigDecimal;
 import java.util.ArrayList;
 import java.util.List;
 
@@ -20,8 +21,8 @@ import com.fasterxml.jackson.core.type.TypeReference;
 @JsonIgnoreProperties(ignoreUnknown=true)
 public class NumberRange {
 	private Boolean minIncluded;
-	private Double min;
-	private Double max;
+	private BigDecimal min;
+	private BigDecimal max;
 	private Boolean maxIncluded;
 	private String value;
 	
@@ -218,16 +219,16 @@ public class NumberRange {
 	public void setMinIncluded(Boolean minIncluded) {
 		this.minIncluded = minIncluded;
 	}
-	public Double getMin() {
+	public BigDecimal getMin() {
 		return min;
 	}
-	public void setMin(Double min) {
+	public void setMin(BigDecimal min) {
 		this.min = min;
 	}
-	public Double getMax() {
+	public BigDecimal getMax() {
 		return max;
 	}
-	public void setMax(Double max) {
+	public void setMax(BigDecimal max) {
 		this.max = max;
 	}
 	public Boolean getMaxIncluded() {
diff --git a/io.sc.engine.rule.frontend/src/views/resources/designer/Processor.vue b/io.sc.engine.rule.frontend/src/views/resources/designer/Processor.vue
index 7372e216..6899922b 100644
--- a/io.sc.engine.rule.frontend/src/views/resources/designer/Processor.vue
+++ b/io.sc.engine.rule.frontend/src/views/resources/designer/Processor.vue
@@ -723,6 +723,7 @@
               },
               type: 'w-grid',
               height: 300,
+              dbClickOperation: 'edit',
               autoFetchData: false,
               denseBody: true,
               draggable: true,
@@ -776,8 +777,8 @@
                     }
                   },
                 },
-                { width: 100, name: 'min', label: $t('minValue'), align: 'right', sortable: false },
-                { width: 100, name: 'max', label: $t('maxValue'), align: 'right', sortable: false },
+                { width: 150, name: 'min', label: $t('minValue'), align: 'right', sortable: false },
+                { width: 150, name: 'max', label: $t('maxValue'), align: 'right', sortable: false },
                 {
                   width: 60,
                   name: 'maxIncluded',
@@ -802,9 +803,9 @@
                   colsNum: 4,
                   fields: [
                     { name: 'uuid', label: 'uuid', hidden: true, colSpan: 4 },
-                    { name: 'min', label: $t('minValue'), type: 'text', colSpan: 3 },
+                    { name: 'min', label: $t('minValue'), type: 'number', colSpan: 3 },
                     { name: 'minIncluded', label: $t('include'), type: 'checkbox' },
-                    { name: 'max', label: $t('maxValue'), type: 'text', colSpan: 3 },
+                    { name: 'max', label: $t('maxValue'), type: 'number', colSpan: 3 },
                     { name: 'maxIncluded', label: $t('include'), type: 'checkbox' },
                     { name: 'value', label: $t('value'), type: 'number', colSpan: 3 },
                   ],
@@ -832,6 +833,7 @@
               },
               type: 'w-grid',
               height: 300,
+              dbClickOperation: 'edit',
               autoFetchData: false,
               denseBody: true,
               draggable: true,
diff --git a/io.sc.platform.core.frontend/src/platform/components/expression/editor/VariableEditor.vue b/io.sc.platform.core.frontend/src/platform/components/expression/editor/VariableEditor.vue
index 5530b516..45165b50 100644
--- a/io.sc.platform.core.frontend/src/platform/components/expression/editor/VariableEditor.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/expression/editor/VariableEditor.vue
@@ -16,6 +16,7 @@
   >
     <w-code-mirror
       v-model="modelValueRef"
+      :toolbar="false"
       lang="java"
       :rows="2"
       :placeholder="true"
diff --git a/io.sc.platform.core.frontend/src/platform/components/expression/toolbar/Toolbar.vue b/io.sc.platform.core.frontend/src/platform/components/expression/toolbar/Toolbar.vue
index d806a3b6..76a5acb5 100644
--- a/io.sc.platform.core.frontend/src/platform/components/expression/toolbar/Toolbar.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/expression/toolbar/Toolbar.vue
@@ -170,6 +170,7 @@ const zoomModelValueRef = defineModel('zoom', { type: Number, default: ZoomLevel
 
 const props = defineProps({
   sourceCodeEditor: { type: Object, default: undefined },
+  type: { type: String, default: 'math' },
 });
 
 const undoManager = new UndoManager();
diff --git a/io.sc.platform.core.frontend/src/platform/components/expression/toolbar/base/Const.vue b/io.sc.platform.core.frontend/src/platform/components/expression/toolbar/base/Const.vue
index c6237744..28925f1c 100644
--- a/io.sc.platform.core.frontend/src/platform/components/expression/toolbar/base/Const.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/expression/toolbar/base/Const.vue
@@ -1,7 +1,7 @@
 <template>
   <q-btn :title="$t('math.toolbar.base.const')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
     <math display="inline">
-      <mn>c</mn>
+      <mn>n</mn>
     </math>
   </q-btn>
 </template>
diff --git a/io.sc.platform.core.frontend/src/platform/components/form/elements/WCodeMirror.vue b/io.sc.platform.core.frontend/src/platform/components/form/elements/WCodeMirror.vue
index 40e8b6d0..8a9d65fd 100644
--- a/io.sc.platform.core.frontend/src/platform/components/form/elements/WCodeMirror.vue
+++ b/io.sc.platform.core.frontend/src/platform/components/form/elements/WCodeMirror.vue
@@ -66,7 +66,7 @@ import { sql } from '@codemirror/lang-sql';
 import { xml, xmlLanguage } from '@codemirror/lang-xml';
 
 import PlaceholderPlugin from './w-code-mirror/PlaceholderPlugin';
-import Toolbar from '@/platform/components/expression/toolbar/Toolbar.vue';
+import Toolbar from '@/platform/components/math/toolbar/Toolbar.vue';
 
 const modelValueRef = defineModel({ type: String, default: '' });
 
diff --git a/io.sc.platform.core.frontend/src/platform/components/index.ts b/io.sc.platform.core.frontend/src/platform/components/index.ts
index 8878a253..4389181a 100644
--- a/io.sc.platform.core.frontend/src/platform/components/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/components/index.ts
@@ -50,6 +50,7 @@ import WSelectAssigneeDialog from './workflow/WSelectAssigneeDialog.vue';
 
 import WEcharts from './echarts/WEcharts.vue';
 import WExpression from './expression/WExpression.vue';
+import WMath from './math/WMath.vue';
 
 import WHtmlA from './html/WHtmlA.vue';
 
@@ -105,6 +106,7 @@ export default {
 
     app.component('WEcharts', WEcharts);
     app.component('WExpression', WExpression);
+    app.component('WMath', WMath);
     app.component('WHtmlA', WHtmlA);
   },
 };
@@ -147,6 +149,7 @@ export {
   WSelectAssigneeDialog,
   WEcharts,
   WExpression,
+  WMath,
   WHtmlA,
 };
 
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/WMath.vue b/io.sc.platform.core.frontend/src/platform/components/math/WMath.vue
new file mode 100644
index 00000000..83714a90
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/WMath.vue
@@ -0,0 +1,282 @@
+<template>
+  <div v-show="showIfComputed" :class="readOnly ? '' : 'border border-gray-200'" style="min-width: 600px">
+    <div v-if="!readOnly" class="row py-1 border-b border-b-gray-200">
+      <Toolbar v-model="modelValueRef" v-model:zoom="zoomModelValueRef"></Toolbar>
+    </div>
+    <div style="overflow: auto">
+      <math
+        ref="mathEditorRef"
+        display="inline"
+        :class="`math p-2 select-none text-${zoom}`"
+        @contextmenu="contextmenu"
+        @mouseover="mouseover"
+        @mouseout="mouseout"
+        @dblclick="dblclick"
+        @dragover="dragover"
+        @dragleave="dragleave"
+        @drop="drop"
+      >
+      </math>
+    </div>
+    <ContextMenu ref="contextMenuRef" @changed="contentChanged"></ContextMenu>
+    <NumberEditorDialog ref="numberEditorDialogRef" @changed="contentChanged"></NumberEditorDialog>
+    <VariableEditorDialog ref="variableEditorDialogRef" :auto-completion="autoCompletion" @changed="contentChanged"></VariableEditorDialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { onMounted, onUpdated, ref, computed, getCurrentInstance, watch } from 'vue';
+import { ZoomLevels } from '@/platform/components/math/utils/ZoomLevels';
+import { VueTools } from '@/platform';
+import Toolbar from './toolbar/Toolbar.vue';
+import ContextMenu from './context-menu/ContextMenu.vue';
+import NumberEditorDialog from './dialog/NumberEditorDialog.vue';
+import VariableEditorDialog from './dialog/VariableEditorDialog.vue';
+
+const props = defineProps({
+  readOnly: { type: Boolean, default: false },
+  required: { type: Boolean, default: false },
+  restore: { type: Boolean, default: false },
+  form: { type: Object, default: undefined },
+  onChange: {
+    type: Function,
+    default: () => {},
+  },
+  showIf: {
+    type: Function,
+    default: () => {
+      return true;
+    },
+  },
+  requiredIf: {
+    type: Function,
+    default: undefined,
+  },
+  readOnlyIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  disableIf: {
+    type: Function,
+    default: () => {
+      return false;
+    },
+  },
+  autoCompletion: {
+    type: Function,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const zoomModelValueRef = defineModel('zoom', { type: Number, default: ZoomLevels.defaultLevel });
+
+const mathEditorRef = ref();
+const contextMenuRef = ref();
+const numberEditorDialogRef = ref();
+const variableEditorDialogRef = ref();
+const selectedElementClass = '';
+const selectedElementHighLightClass = 'bg-gray-300';
+const mathMsSpaceClass = 'mathMsSpaceClass';
+const mathMsSpaceHighLightClass = 'mathMsSpaceHighLightClass';
+
+const showIfComputed = computed(() => {
+  return props.showIf({
+    value: modelValueRef.value.innerHTML,
+    form: props.form,
+  });
+});
+
+const requiredIfComputed = computed(() => {
+  if (props.requiredIf) {
+    return (
+      props.requiredIf({
+        value: modelValueRef.value.innerHTML,
+        form: props.form,
+      }) || false
+    );
+  } else if (props.required) {
+    return true;
+  }
+  return false;
+});
+
+const readonlyIfComputed = computed(() => {
+  if (props.form && props.form.getStatus() === 'view') {
+    return true;
+  }
+  return props.readOnlyIf({
+    value: modelValueRef.value.innerHTML,
+    form: props.form,
+  });
+});
+
+const disableIfComputed = computed(() => {
+  return props.disableIf({
+    value: modelValueRef.value.innerHTML,
+    form: props.form,
+  });
+});
+
+const contextmenu = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  contextMenuRef.value.show(event.srcElement);
+};
+
+const dblclick = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'mi') {
+    variableEditorDialogRef.value.open(event.srcElement);
+  } else if (tagName === 'mn') {
+    const element = event.srcElement;
+    if (element.innerHTML !== 'e' && element.innerHTML !== 'π') {
+      numberEditorDialogRef.value.open(event.srcElement);
+    }
+  }
+};
+
+const mouseover = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'math' || tagName === 'mspace') {
+    return;
+  }
+  if (tagName === 'mo' && event.target.innerHTML === '-') {
+    event.target.style.paddingTop = 5;
+    event.target.style.paddingBottom = 5;
+  }
+  event.target.className = selectedElementHighLightClass;
+};
+
+const mouseout = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'math' || tagName === 'mspace') {
+    return;
+  }
+  event.target.className = selectedElementClass;
+};
+
+const dragover = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'mspace') {
+    event.target.className = mathMsSpaceHighLightClass;
+  }
+};
+
+const dragleave = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'mspace') {
+    console.log('dragleave');
+    event.target.className = mathMsSpaceClass;
+  }
+};
+
+const drop = (event) => {
+  if (props.readOnly) {
+    return;
+  }
+  event.preventDefault();
+  const tagName = event.target.tagName.toLowerCase();
+  if (tagName === 'math') {
+    return;
+  }
+  event.target.outerHTML = event.dataTransfer.getData('math');
+  event.target.className = '';
+  modelValueRef.value = mathEditorRef.value.innerHTML;
+  setTimeout(refresh, 100);
+};
+
+const init = () => {
+  const font = ZoomLevels.getStyle(zoomModelValueRef.value);
+  mathEditorRef.value.style.fontSize = font['font-size'];
+  mathEditorRef.value.style.lineHeight = font['line-height'];
+  mathEditorRef.value.innerHTML = modelValueRef.value || '<mspace></mspace>';
+  refresh();
+};
+
+const getElementLevel = (element): number => {
+  let level = 0;
+  let parent = element.parentElement;
+  while (parent.nodeName !== 'math') {
+    if (parent.nodeName !== 'mrow') {
+      level++;
+    }
+    parent = parent.parentElement;
+  }
+  return level;
+};
+
+const refresh = () => {
+  setTimeout(() => {
+    const style = ZoomLevels.getStyle(zoomModelValueRef.value);
+    mathEditorRef.value.style.fontSize = style['font-size'];
+    mathEditorRef.value.style.lineHeight = style['line-height'];
+    const mspaces = mathEditorRef.value.getElementsByTagName('mspace');
+    const pixels = style.pixels;
+    for (const mspace of mspaces) {
+      const level = getElementLevel(mspace);
+      const pixel = pixels[level];
+      mspace.className = mathMsSpaceClass;
+      mspace.setAttribute('height', pixel + 'px');
+    }
+  }, 0);
+};
+
+const contentChanged = () => {
+  modelValueRef.value = mathEditorRef.value.innerHTML;
+};
+
+onMounted(() => {
+  init();
+  watch(
+    () => zoomModelValueRef.value,
+    (newVal, oldVal) => {
+      refresh();
+    },
+  );
+});
+
+onUpdated(() => {
+  init();
+});
+
+defineExpose({
+  refresh,
+});
+
+const instance = getCurrentInstance();
+VueTools.expose2Instance(instance);
+</script>
+<style>
+.mathMsSpaceClass {
+  width: 4px;
+}
+.mathMsSpaceHighLightClass {
+  background-color: red;
+  width: 4px;
+}
+</style>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/context-menu/ContextMenu.vue b/io.sc.platform.core.frontend/src/platform/components/math/context-menu/ContextMenu.vue
new file mode 100644
index 00000000..f81a5782
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/context-menu/ContextMenu.vue
@@ -0,0 +1,42 @@
+<template>
+  <q-menu ref="contextMenuRef" context-menu>
+    <q-list dense style="min-width: 100px">
+      <q-item v-close-popup clickable @click="remove">
+        <q-item-section>{{ $t('delete') }}</q-item-section>
+      </q-item>
+    </q-list>
+  </q-menu>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const emit = defineEmits(['changed']);
+
+const contextMenuRef = ref();
+let targetElement = null;
+
+const show = (element) => {
+  targetElement = element;
+  contextMenuRef.value.show();
+};
+
+const remove = (element) => {
+  if (targetElement) {
+    const previous = targetElement.previousElementSibling;
+    if (previous?.tagName === 'mspace') {
+      previous.outerHTML = '';
+    }
+    const next = targetElement.nextElementSibling;
+    if (next?.tagName === 'mspace') {
+      next.outerHTML = '';
+    }
+    targetElement.outerHTML = '<mspace></mspace>';
+    emit('changed');
+  }
+};
+
+defineExpose({
+  show,
+  remove,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/dialog/NumberEditorDialog.vue b/io.sc.platform.core.frontend/src/platform/components/math/dialog/NumberEditorDialog.vue
new file mode 100644
index 00000000..60dde9af
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/dialog/NumberEditorDialog.vue
@@ -0,0 +1,45 @@
+<template>
+  <w-dialog
+    ref="dialogRef"
+    :title="$t('math.toolbar.base.number')"
+    width="300px"
+    :can-maximize="false"
+    :buttons="[
+      {
+        label: $t('confirm'),
+        noCaps: true,
+        click: () => {
+          targetElementRef.innerHTML = modelValueRef;
+          emit('changed');
+          close();
+        },
+      },
+    ]"
+  >
+    <q-input v-model="modelValueRef" type="number" dense outlined></q-input>
+  </w-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const emit = defineEmits(['changed']);
+
+const dialogRef = ref();
+const targetElementRef = ref();
+const modelValueRef = ref();
+
+const open = (element) => {
+  targetElementRef.value = element;
+  modelValueRef.value = element.innerHTML;
+  dialogRef.value.show();
+};
+
+const close = () => {
+  dialogRef.value.hide();
+};
+
+defineExpose({
+  open,
+  close,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/dialog/VariableEditorDialog.vue b/io.sc.platform.core.frontend/src/platform/components/math/dialog/VariableEditorDialog.vue
new file mode 100644
index 00000000..658a6e2e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/dialog/VariableEditorDialog.vue
@@ -0,0 +1,63 @@
+<template>
+  <w-dialog
+    ref="dialogRef"
+    :title="$t('math.toolbar.base.variable')"
+    width="600px"
+    :can-maximize="false"
+    :buttons="[
+      {
+        label: $t('confirm'),
+        noCaps: true,
+        click: () => {
+          let string = modelValueRef;
+          string = string.replace(/\$\{(.+?)\}/g, '$1');
+          targetElementRef.innerHTML = string;
+          emit('changed');
+          close();
+        },
+      },
+    ]"
+  >
+    <w-code-mirror
+      v-model="modelValueRef"
+      :toolbar="false"
+      lang="java"
+      :rows="2"
+      :placeholder="true"
+      :line-wrap="true"
+      :line-break="false"
+      :auto-completion="autoCompletion"
+    ></w-code-mirror>
+  </w-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  autoCompletion: {
+    type: Function,
+    default: undefined,
+  },
+});
+
+const emit = defineEmits(['changed']);
+
+const dialogRef = ref();
+const targetElementRef = ref();
+const modelValueRef = ref();
+
+const open = (element) => {
+  targetElementRef.value = element;
+  modelValueRef.value = '${' + element.innerHTML.trim() + '}';
+  dialogRef.value.show();
+};
+
+const close = () => {
+  dialogRef.value.hide();
+};
+
+defineExpose({
+  open,
+  close,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/dialog/XmlDialog.vue b/io.sc.platform.core.frontend/src/platform/components/math/dialog/XmlDialog.vue
new file mode 100644
index 00000000..b785da51
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/dialog/XmlDialog.vue
@@ -0,0 +1,36 @@
+<template>
+  <w-dialog ref="dialogRef" :title="$t('xml')" width="800px" :can-maximize="false">
+    <div class="py-1"></div>
+    <w-code-mirror v-model="xmlRef" outlined :rows="20" lang="xml" line-number />
+  </w-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Tools } from '@/platform';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const dialogRef = ref();
+const xmlRef = ref();
+
+const open = () => {
+  const xmlDom = Tools.xml2Dom('<math>' + modelValueRef.value + '</math>');
+  if (xmlDom) {
+    const elements = xmlDom.querySelectorAll('*');
+    for (const element of elements) {
+      element.removeAttribute('position');
+      element.removeAttribute('height');
+      element.removeAttribute('class');
+    }
+    let xml = Tools.dom2xml(xmlDom);
+    if (xml) {
+      xml = Tools.xmlFormat(xml);
+      xmlRef.value = xml;
+    }
+  }
+  dialogRef.value.show();
+};
+
+defineExpose({
+  open,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/Toolbar.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/Toolbar.vue
new file mode 100644
index 00000000..e1217e08
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/Toolbar.vue
@@ -0,0 +1,159 @@
+<template>
+  <q-toolbar style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px">
+    <input style="width: 0px" /><!--采用宽度为0的输入框,避免第一按钮默认获得焦点-->
+    <template v-if="!sourceCodeEditor">
+      <!-- 操作 -->
+      <Xml v-model="modelValueRef"></Xml>
+      <Clean v-model="modelValueRef"></Clean>
+      <q-separator vertical />
+      <ZoomIn v-model:zoom="zoomModelValueRef"></ZoomIn>
+      <ZoomOut v-model:zoom="zoomModelValueRef"></ZoomOut>
+      <q-separator vertical />
+      <Undo v-model="modelValueRef" :undo-manager="undoManager"></Undo>
+      <Redo v-model="modelValueRef" :undo-manager="undoManager"></Redo>
+      <q-separator vertical />
+    </template>
+
+    <!-- 基本 -->
+    <Variable v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Variable>
+    <NumberConst v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></NumberConst>
+    <Addition v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Addition>
+    <Subtraction v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Subtraction>
+    <Multiply v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Multiply>
+    <Division v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Division>
+    <LeftParenthesis v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></LeftParenthesis>
+    <RightParenthesis v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></RightParenthesis>
+    <Comma v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Comma>
+    <q-separator vertical />
+
+    <!-- 数学 -->
+    <q-btn :label="$t('math.toolbar.math')" stretch flat dense padding="0px 10px" icon-right="arrow_drop_down">
+      <q-menu>
+        <q-list dense>
+          <q-item v-close-popup clickable>
+            <q-item-section><Pi v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Pi></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><E v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></E></q-item-section>
+          </q-item>
+          <q-separator inset spaced />
+          <q-item v-close-popup clickable>
+            <q-item-section><Power2 v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Power2></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><Exp v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Exp></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><Power v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Power></q-item-section>
+          </q-item>
+          <q-separator inset spaced />
+          <q-item v-close-popup clickable>
+            <q-item-section><Sqrt v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Sqrt></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><Root v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Root></q-item-section>
+          </q-item>
+          <q-separator inset spaced />
+          <q-item v-close-popup clickable>
+            <q-item-section><Lg v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Lg></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><Ln v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Ln></q-item-section>
+          </q-item>
+          <q-item v-close-popup clickable>
+            <q-item-section><Log v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Log></q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+    </q-btn>
+
+    <!-- 函数 -->
+    <q-btn :label="$t('math.toolbar.functions')" stretch flat dense padding="0px 10px" icon-right="arrow_drop_down">
+      <q-menu>
+        <q-list>
+          <!-- 特殊值值处理函数 -->
+          <SpecialValue v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></SpecialValue>
+          <q-separator inset spaced />
+          <!-- 数值处理函数 -->
+          <Digit v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Digit>
+          <q-separator inset spaced />
+          <!-- 字符串处理函数 -->
+          <StringVue v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></StringVue>
+          <q-separator inset spaced />
+          <!-- 日期处理函数 -->
+          <Date v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Date>
+          <q-separator inset spaced />
+          <!-- 三角函数 -->
+          <Trigonometric v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Trigonometric>
+          <q-separator inset spaced />
+          <!-- 概率函数 -->
+          <Probability v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Probability>
+          <q-separator inset spaced />
+          <!-- 格式化函数 -->
+          <Formater v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Formater>
+        </q-list>
+      </q-menu>
+    </q-btn>
+  </q-toolbar>
+</template>
+<script setup lang="ts">
+import { onMounted, onUpdated, watch } from 'vue';
+import { UndoManager } from '@/platform';
+import { ZoomLevels } from '@/platform/components/math/utils/ZoomLevels';
+
+import Xml from './actions/Xml.vue';
+import Clean from './actions/Clean.vue';
+import ZoomIn from './actions/ZoomIn.vue';
+import ZoomOut from './actions/ZoomOut.vue';
+import Undo from './actions/Undo.vue';
+import Redo from './actions/Redo.vue';
+
+import NumberConst from './base/NumberConst.vue';
+import Variable from './base/Variable.vue';
+import Addition from './base/Addition.vue';
+import Subtraction from './base/Subtraction.vue';
+import Multiply from './base/Multiply.vue';
+import Division from './base/Division.vue';
+import LeftParenthesis from './base/LeftParenthesis.vue';
+import RightParenthesis from './base/RightParenthesis.vue';
+
+import Comma from './base/Comma.vue';
+
+import E from './math/E.vue';
+import Root from './math/Root.vue';
+import Lg from './math/Lg.vue';
+import Ln from './math/Ln.vue';
+import Log from './math/Log.vue';
+import Pi from './math/Pi.vue';
+import Power from './math/Power.vue';
+import Power2 from './math/Power2.vue';
+import Exp from './math/Exp.vue';
+import Sqrt from './math/Sqrt.vue';
+
+import SpecialValue from './functions/SpecialValue.vue';
+import Digit from './functions/Digit.vue';
+import StringVue from './functions/String.vue';
+import Date from './functions/Date.vue';
+import Trigonometric from './functions/Trigonometric.vue';
+import Probability from './functions/Probability.vue';
+import Formater from './functions/Formater.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const zoomModelValueRef = defineModel('zoom', { type: Number, default: ZoomLevels.defaultLevel });
+
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+  type: { type: String, default: 'math' },
+});
+
+const undoManager = new UndoManager();
+
+onMounted(() => {
+  watch(
+    () => modelValueRef.value,
+    (newVal, oldVal) => {
+      undoManager.setValue(newVal);
+    },
+  );
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Clean.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Clean.vue
new file mode 100644
index 00000000..4a7bd1e0
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Clean.vue
@@ -0,0 +1,15 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.clean')" stretch flat no-caps icon="sym_o_cleaning_services" padding="4px 10px" @click="clean"></q-btn>
+</template>
+<script setup lang="ts">
+import { $t, DialogManager } from '@/platform';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+
+const clean = () => {
+  // DialogManager.confirm($t('math.toolbar.actions.clean.confirm'), () => {
+  //   modelValueRef.value = '<mspace></mspace>';
+  // });
+  modelValueRef.value = '<mspace></mspace>';
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Redo.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Redo.vue
new file mode 100644
index 00000000..b066f1cd
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Redo.vue
@@ -0,0 +1,20 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.redo')" stretch flat no-caps icon="redo" padding="4px 10px" @click="redo"></q-btn>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  undoManager: {
+    type: Object,
+    default: () => {
+      return undefined;
+    },
+  },
+});
+
+const modelValueRef = defineModel({ type: String, default: '' });
+
+const redo = () => {
+  const value = props.undoManager?.redo();
+  modelValueRef.value = value;
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Undo.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Undo.vue
new file mode 100644
index 00000000..3bae87f2
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Undo.vue
@@ -0,0 +1,20 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.undo')" stretch flat no-caps icon="undo" padding="4px 10px" @click="undo"></q-btn>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  undoManager: {
+    type: Object,
+    default: () => {
+      return undefined;
+    },
+  },
+});
+
+const modelValueRef = defineModel({ type: String, default: '' });
+
+const undo = () => {
+  const value = props.undoManager?.undo();
+  modelValueRef.value = value;
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Xml.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Xml.vue
new file mode 100644
index 00000000..6e3b3355
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/Xml.vue
@@ -0,0 +1,16 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.xml')" stretch flat no-caps icon="bi-filetype-xml" @click="openXmlDialog"></q-btn>
+  <XmlDialog ref="xmlDialogRef" v-model="modelValueRef"></XmlDialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import XmlDialog from '@/platform/components/expression/dialog/XmlDialog.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+
+const xmlDialogRef = ref();
+
+const openXmlDialog = () => {
+  xmlDialogRef.value.open();
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/ZoomIn.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/ZoomIn.vue
new file mode 100644
index 00000000..12644ad0
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/ZoomIn.vue
@@ -0,0 +1,19 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.zoomIn')" stretch flat no-caps icon="bi-zoom-in" padding="4px 10px" @click="zoomIn"></q-btn>
+</template>
+<script setup lang="ts">
+import { ZoomLevels } from '@/platform/components/expression/utils/ZoomLevels';
+
+const zoomModelValueRef = defineModel('zoom', { type: Number, default: ZoomLevels.defaultLevel });
+
+const zoomIn = () => {
+  let zoomLevel = zoomModelValueRef.value;
+  console.log(zoomLevel);
+  zoomLevel++;
+  if (zoomLevel > ZoomLevels.getLength() - 1) {
+    zoomLevel = ZoomLevels.getLength() - 1;
+  }
+  zoomModelValueRef.value = zoomLevel;
+  console.log(zoomModelValueRef.value);
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/ZoomOut.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/ZoomOut.vue
new file mode 100644
index 00000000..e500519c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/actions/ZoomOut.vue
@@ -0,0 +1,17 @@
+<template>
+  <q-btn :title="$t('math.toolbar.actions.zoomOut')" stretch flat no-caps icon="bi-zoom-out" padding="4px 10px" @click="zoomOut"></q-btn>
+</template>
+<script setup lang="ts">
+import { ZoomLevels } from '@/platform/components/expression/utils/ZoomLevels';
+
+const zoomModelValueRef = defineModel('zoom', { type: Number, default: ZoomLevels.defaultLevel });
+
+const zoomOut = () => {
+  let zoomLevel = zoomModelValueRef.value;
+  zoomLevel--;
+  if (zoomLevel < 0) {
+    zoomLevel = 0;
+  }
+  zoomModelValueRef.value = zoomLevel;
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Addition.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Addition.vue
new file mode 100644
index 00000000..d0f62fe5
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Addition.vue
@@ -0,0 +1,31 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.addition')" stretch flat size="16px" padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mrow>
+        <mo>+</mo>
+      </mrow>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>+</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('+'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/And.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/And.vue
new file mode 100644
index 00000000..e0b816f3
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/And.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.and')" stretch flat padding="0px 2px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&&</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&&</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('&&'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Comma.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Comma.vue
new file mode 100644
index 00000000..f42b3375
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Comma.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.comma')" stretch flat size="16px" padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>,</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>,</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection(','));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Division.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Division.vue
new file mode 100644
index 00000000..2c58bcc4
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Division.vue
@@ -0,0 +1,51 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.division')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mfrac>
+        <mrow>
+          <mspace></mspace>
+          <mi>x</mi>
+          <mspace></mspace>
+        </mrow>
+        <mrow>
+          <mspace></mspace>
+          <mi>y</mi>
+          <mspace></mspace>
+        </mrow>
+      </mfrac>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mfrac>
+    <mrow>
+      <mspace></mspace>
+      <mi>x</mi>
+      <mspace></mspace>
+    </mrow>
+    <mrow>
+      <mspace></mspace>
+      <mi>y</mi>
+      <mspace></mspace>
+    </mrow>
+  </mfrac>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('/'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Equals.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Equals.vue
new file mode 100644
index 00000000..f6fd5d49
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Equals.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.equals')" stretch flat padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>=</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>=</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('=='));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Ge.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Ge.vue
new file mode 100644
index 00000000..83b33ca7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Ge.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.ge')" stretch flat padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&#x2265;</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&#x2265;</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('>='));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Gt.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Gt.vue
new file mode 100644
index 00000000..81c3d734
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Gt.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.gt')" stretch flat padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&gt;</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&gt;</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('>'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Le.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Le.vue
new file mode 100644
index 00000000..ae3902ff
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Le.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.le')" stretch flat padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&#x2264;</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&#x2264;</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('<='));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/LeftParenthesis.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/LeftParenthesis.vue
new file mode 100644
index 00000000..021b9c49
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/LeftParenthesis.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.leftParenthesis')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mi>(</mi>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mi>(</mi>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('('));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Lt.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Lt.vue
new file mode 100644
index 00000000..b8ad5edd
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Lt.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.lt')" stretch flat padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&lt;</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&lt;</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('<'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Multiply.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Multiply.vue
new file mode 100644
index 00000000..7f5c1752
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Multiply.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.multiply')" stretch flat size="16px" padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>&#xD7;</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>&#xD7;</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('*'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Not.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Not.vue
new file mode 100644
index 00000000..dd4d62be
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Not.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.not')" stretch flat padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>!</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>!</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('!'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/NumberConst.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/NumberConst.vue
new file mode 100644
index 00000000..045b3df5
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/NumberConst.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.number')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mn>N</mn>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mn>N</mn>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('N'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Or.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Or.vue
new file mode 100644
index 00000000..6da314e5
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Or.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.or')" stretch flat padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>||</mo>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>||</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('||'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/RightParenthesis.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/RightParenthesis.vue
new file mode 100644
index 00000000..5bfa94e7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/RightParenthesis.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.rightParenthesis')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mi>)</mi>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mi>)</mi>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection(')'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Subtraction.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Subtraction.vue
new file mode 100644
index 00000000..eae29808
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Subtraction.vue
@@ -0,0 +1,31 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.subtraction')" stretch flat size="16px" padding="0px 6px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mrow>
+        <mo>-</mo>
+      </mrow>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>-</mo>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('-'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Variable.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Variable.vue
new file mode 100644
index 00000000..ed331078
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/base/Variable.vue
@@ -0,0 +1,29 @@
+<template>
+  <q-btn :title="$t('math.toolbar.base.variable')" stretch flat size="16px" padding="0px 10px" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mi>x</mi>
+    </math>
+  </q-btn>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mi>x</mi>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('${x}'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Date.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Date.vue
new file mode 100644
index 00000000..96cb8811
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Date.vue
@@ -0,0 +1,28 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.date') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list>
+        <q-item v-close-popup clickable :title="$t('math.toolbar.functions.date.now')" draggable="true" @dragstart="nowRef?.dragstart" @click="nowRef?.append">
+          <q-item-section><Now ref="nowRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Now></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Now from './date/Now.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const nowRef = ref();
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Digit.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Digit.vue
new file mode 100644
index 00000000..9639f43b
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Digit.vue
@@ -0,0 +1,171 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.number') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.abs')"
+          draggable="true"
+          @dragstart="absRef?.dragstart"
+          @click="absRef?.append"
+        >
+          <q-item-section><Abs ref="absRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Abs></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.max')"
+          draggable="true"
+          @dragstart="maxRef?.dragstart"
+          @click="maxRef?.append"
+        >
+          <q-item-section><Max ref="maxRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Max></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.min')"
+          draggable="true"
+          @dragstart="minRef?.dragstart"
+          @click="minRef?.append"
+        >
+          <q-item-section><Min ref="minRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Min></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.sum')"
+          draggable="true"
+          @dragstart="sumRef?.dragstart"
+          @click="sumRef?.append"
+        >
+          <q-item-section><Sum ref="sumRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Sum></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.rint')"
+          draggable="true"
+          @dragstart="rintRef?.dragstart"
+          @click="rintRef?.append"
+        >
+          <q-item-section><Rint ref="rintRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Rint></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.ceil')"
+          draggable="true"
+          @dragstart="ceilRef?.dragstart"
+          @click="ceilRef?.append"
+        >
+          <q-item-section><Ceil ref="ceilRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Ceil></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.floor')"
+          draggable="true"
+          @dragstart="floorRef?.dragstart"
+          @click="floorRef?.append"
+        >
+          <q-item-section><Floor ref="floorRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Floor></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.round')"
+          draggable="true"
+          @dragstart="roundRef?.dragstart"
+          @click="roundRef?.append"
+        >
+          <q-item-section><Round ref="roundRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Round></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.randomInt')"
+          draggable="true"
+          @dragstart="randomIntRef?.dragstart"
+          @click="randomIntRef?.append"
+        >
+          <q-item-section><RandomInt ref="randomIntRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></RandomInt></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.random')"
+          draggable="true"
+          @dragstart="randomRef?.dragstart"
+          @click="randomRef?.append"
+        >
+          <q-item-section><Random ref="randomRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Random></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.mod')"
+          draggable="true"
+          @dragstart="modRef?.dragstart"
+          @click="modRef?.append"
+        >
+          <q-item-section><Mod ref="modRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Mod></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.number.remainder')"
+          draggable="true"
+          @dragstart="remainderRef?.dragstart"
+          @click="remainderRef?.append"
+        >
+          <q-item-section><Remainder ref="remainderRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Remainder></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Abs from './digit/Abs.vue';
+import Max from './digit/Max.vue';
+import Min from './digit/Min.vue';
+import Sum from './digit/Sum.vue';
+import Ceil from './digit/Ceil.vue';
+import Floor from './digit/Floor.vue';
+import Mod from './digit/Mod.vue';
+import Random from './digit/Random.vue';
+import RandomInt from './digit/RandomInt.vue';
+import Remainder from './digit/Remainder.vue';
+import Rint from './digit/Rint.vue';
+import Round from './digit/Round.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const absRef = ref();
+const maxRef = ref();
+const minRef = ref();
+const sumRef = ref();
+const rintRef = ref();
+const ceilRef = ref();
+const floorRef = ref();
+const roundRef = ref();
+const randomIntRef = ref();
+const randomRef = ref();
+const modRef = ref();
+const remainderRef = ref();
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Formater.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Formater.vue
new file mode 100644
index 00000000..5943ab60
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Formater.vue
@@ -0,0 +1,59 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.formater') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.formater.precision')"
+          draggable="true"
+          @dragstart="decimalRef?.dragstart"
+          @click="decimalRef?.append"
+        >
+          <q-item-section><Decimal ref="decimalRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Decimal></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.formater.comma')"
+          draggable="true"
+          @dragstart="commaRef?.dragstart"
+          @click="commaRef?.append"
+        >
+          <q-item-section><Comma ref="commaRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Comma></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.formater.percent')"
+          draggable="true"
+          @dragstart="percentRef?.dragstart"
+          @click="percentRef?.append"
+        >
+          <q-item-section><Percent ref="percentRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Percent></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Decimal from './formater/Decimal.vue';
+import Comma from './formater/Comma.vue';
+import Percent from './formater/Percent.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const decimalRef = ref();
+const commaRef = ref();
+const percentRef = ref();
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Probability.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Probability.vue
new file mode 100644
index 00000000..b3883afa
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Probability.vue
@@ -0,0 +1,47 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.probability') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.probability.normal')"
+          draggable="true"
+          @dragstart="normalRef?.dragstart"
+          @click="normalRef?.append"
+        >
+          <q-item-section><Normal ref="normalRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Normal></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.probability.inverseNormal')"
+          draggable="true"
+          @dragstart="inverseNormalRef?.dragstart"
+          @click="inverseNormalRef?.append"
+        >
+          <q-item-section><InverseNormal ref="inverseNormalRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></InverseNormal></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Normal from './probability/Normal.vue';
+import InverseNormal from './probability/InverseNormal.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const normalRef = ref();
+const inverseNormalRef = ref();
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/SpecialValue.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/SpecialValue.vue
new file mode 100644
index 00000000..939b13f7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/SpecialValue.vue
@@ -0,0 +1,121 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.specialValue') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.isNil')"
+          draggable="true"
+          @dragstart="isNilRef?.dragstart"
+          @click="isNilRef?.append"
+        >
+          <q-item-section><IsNil ref="isNilRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></IsNil></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.isZero')"
+          draggable="true"
+          @dragstart="isZeroRef?.dragstart"
+          @click="isZeroRef?.append"
+        >
+          <q-item-section><IsZero ref="isZeroRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></IsZero></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.isNan')"
+          draggable="true"
+          @dragstart="isNanRef?.dragstart"
+          @click="isNanRef?.append"
+        >
+          <q-item-section><IsNan ref="isNanRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></IsNan></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.isInfinite')"
+          draggable="true"
+          @dragstart="isInfiniteRef?.dragstart"
+          @click="isInfiniteRef?.append"
+        >
+          <q-item-section><IsInfinite ref="isInfiniteRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></IsInfinite></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.nil')"
+          draggable="true"
+          @dragstart="nilRef?.dragstart"
+          @click="nilRef?.append"
+        >
+          <q-item-section><Nil ref="nilRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Nil></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.zero')"
+          draggable="true"
+          @dragstart="zeroRef?.dragstart"
+          @click="zeroRef?.append"
+        >
+          <q-item-section><Zero ref="zeroRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Zero></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.nan')"
+          draggable="true"
+          @dragstart="nanRef?.dragstart"
+          @click="nanRef?.append"
+        >
+          <q-item-section><Nan ref="nanRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Nan></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.specialValue.infinite')"
+          draggable="true"
+          @dragstart="infiniteRef?.dragstart"
+          @click="infiniteRef?.append"
+        >
+          <q-item-section><Infinite ref="infiniteRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Infinite></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import IsNil from './specialValue/IsNil.vue';
+import IsZero from './specialValue/IsZero.vue';
+import IsNan from './specialValue/IsNan.vue';
+import IsInfinite from './specialValue/IsInfinite.vue';
+import Nil from './specialValue/Nil.vue';
+import Zero from './specialValue/Zero.vue';
+import Nan from './specialValue/Nan.vue';
+import Infinite from './specialValue/Infinite.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const isNilRef = ref();
+const isZeroRef = ref();
+const isNanRef = ref();
+const isInfiniteRef = ref();
+
+const nilRef = ref();
+const zeroRef = ref();
+const nanRef = ref();
+const infiniteRef = ref();
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/String.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/String.vue
new file mode 100644
index 00000000..2041b984
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/String.vue
@@ -0,0 +1,121 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.string') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.length')"
+          draggable="true"
+          @dragstart="lengthRef?.dragstart"
+          @click="lengthRef?.append"
+        >
+          <q-item-section><Length ref="lengthRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Length></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.trim')"
+          draggable="true"
+          @dragstart="trimRef?.dragstart"
+          @click="trimRef?.append"
+        >
+          <q-item-section><Trim ref="trimRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Trim></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.upperCase')"
+          draggable="true"
+          @dragstart="upperCaseRef?.dragstart"
+          @click="upperCaseRef?.append"
+        >
+          <q-item-section><UpperCase ref="upperCaseRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></UpperCase></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.lowerCase')"
+          draggable="true"
+          @dragstart="lowerCaseRef?.dragstart"
+          @click="lowerCaseRef?.append"
+        >
+          <q-item-section><LowerCase ref="lowerCaseRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></LowerCase></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.contains')"
+          draggable="true"
+          @dragstart="containsRef?.dragstart"
+          @click="containsRef?.append"
+        >
+          <q-item-section><Contains ref="containsRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Contains></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.startsWith')"
+          draggable="true"
+          @dragstart="startsWithRef?.dragstart"
+          @click="startsWithRef?.append"
+        >
+          <q-item-section><StartsWith ref="startsWithRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></StartsWith></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.endsWith')"
+          draggable="true"
+          @dragstart="endsWithRef?.dragstart"
+          @click="endsWithRef?.append"
+        >
+          <q-item-section><EndsWith ref="endsWithRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></EndsWith></q-item-section>
+        </q-item>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.string.join')"
+          draggable="true"
+          @dragstart="joinRef?.dragstart"
+          @click="joinRef?.append"
+        >
+          <q-item-section><Join ref="joinRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Join></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Length from './string/Length.vue';
+import Trim from './string/Trim.vue';
+import UpperCase from './string/UpperCase.vue';
+import LowerCase from './string/LowerCase.vue';
+import Contains from './string/Contains.vue';
+import StartsWith from './string/StartsWith.vue';
+import EndsWith from './string/EndsWith.vue';
+import Join from './string/Join.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const lengthRef = ref();
+const trimRef = ref();
+const upperCaseRef = ref();
+const lowerCaseRef = ref();
+const containsRef = ref();
+const startsWithRef = ref();
+const endsWithRef = ref();
+const joinRef = ref();
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Trigonometric.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Trigonometric.vue
new file mode 100644
index 00000000..9fc27e04
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/Trigonometric.vue
@@ -0,0 +1,56 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.trigonometric') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <Trigonometric v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Trigonometric>
+        <InverseTrigonometric v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></InverseTrigonometric>
+        <Hyperbolic v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Hyperbolic>
+        <InverseHyperbolic v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></InverseHyperbolic>
+        <q-separator inset spaced />
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.degrees')"
+          draggable="true"
+          @dragstart="degreesRef?.dragstart"
+          @click="degreesRef?.append"
+        >
+          <q-item-section><Degrees ref="degreesRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Degrees></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.radians')"
+          draggable="true"
+          @dragstart="radiansRef?.dragstart"
+          @click="radiansRef?.append"
+        >
+          <q-item-section><Radians ref="radiansRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Radians></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Trigonometric from './trigonometric/trigonometric/Trigonometric.vue';
+import InverseTrigonometric from './trigonometric/inverseTrigonometric/InverseTrigonometric.vue';
+import Hyperbolic from './trigonometric/hyperbolic/Hyperbolic.vue';
+import InverseHyperbolic from './trigonometric/inverseHyperbolic/InverseHyperbolic.vue';
+import Degrees from './trigonometric/Degrees.vue';
+import Radians from './trigonometric/Radians.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const degreesRef = ref();
+const radiansRef = ref();
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/date/Now.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/date/Now.vue
new file mode 100644
index 00000000..ecf45fb7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/date/Now.vue
@@ -0,0 +1,40 @@
+<template>
+  <math display="inline">
+    <mrow>
+      <mo>now</mo>
+      <mi>(</mi>
+      <mi>)</mi>
+    </mrow>
+  </math>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>now</mo>
+    <mi>(</mi>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('now()'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Abs.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Abs.vue
new file mode 100644
index 00000000..4544ee13
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Abs.vue
@@ -0,0 +1,50 @@
+<template>
+  <span>
+    <math display="inline">
+      <mspace></mspace>
+      <mrow>
+        <mo>abs</mo>
+        <mi>(</mi>
+        <mspace></mspace>
+        <mi>x</mi>
+        <mspace></mspace>
+        <mi>)</mi>
+      </mrow>
+      <mspace></mspace>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>abs</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('abs(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Ceil.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Ceil.vue
new file mode 100644
index 00000000..2db80f79
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Ceil.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>ceil</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>ceil</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('ceil(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Floor.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Floor.vue
new file mode 100644
index 00000000..5d759a49
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Floor.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>floor</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>floor</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('floor(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Max.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Max.vue
new file mode 100644
index 00000000..22a56d22
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Max.vue
@@ -0,0 +1,59 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>max</mo>
+        <mi>(</mi>
+        <mi>a</mi>
+        <mo>,</mo>
+        <mi>b</mi>
+        <mo>,</mo>
+        <mo>...</mo>
+        <mi>n</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>max</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>a</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>b</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>n</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('max(a,b,n)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Min.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Min.vue
new file mode 100644
index 00000000..ce1423fc
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Min.vue
@@ -0,0 +1,59 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>min</mo>
+        <mi>(</mi>
+        <mi>a</mi>
+        <mo>,</mo>
+        <mi>b</mi>
+        <mo>,</mo>
+        <mo>...</mo>
+        <mi>n</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>min</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>a</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>b</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>n</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('min(a,b,n)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Mod.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Mod.vue
new file mode 100644
index 00000000..175fff14
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Mod.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>mod</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>mod</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('mod(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Random.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Random.vue
new file mode 100644
index 00000000..7c3c8de9
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Random.vue
@@ -0,0 +1,42 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>random</mo>
+        <mi>(</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>random</mo>
+    <mi>(</mi>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('random()'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/RandomInt.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/RandomInt.vue
new file mode 100644
index 00000000..b76a2d2b
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/RandomInt.vue
@@ -0,0 +1,42 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>randomInt</mo>
+        <mi>(</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>randomInt</mo>
+    <mi>(</mi>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('randomInt'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Remainder.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Remainder.vue
new file mode 100644
index 00000000..10fd93a4
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Remainder.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>remainder</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>remainder</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('remainder(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Rint.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Rint.vue
new file mode 100644
index 00000000..aa51dcf7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Rint.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>rint</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>rint</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('rint(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Round.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Round.vue
new file mode 100644
index 00000000..34785150
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Round.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>round</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>round</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('round(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Sum.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Sum.vue
new file mode 100644
index 00000000..0436237c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/digit/Sum.vue
@@ -0,0 +1,59 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>sum</mo>
+        <mi>(</mi>
+        <mi>a</mi>
+        <mo>,</mo>
+        <mi>b</mi>
+        <mo>,</mo>
+        <mo>...</mo>
+        <mi>n</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>sum</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>a</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>b</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>n</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('sum(a,b,n)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Comma.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Comma.vue
new file mode 100644
index 00000000..6d4ae7d9
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Comma.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>comma</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>comma</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('comma(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Decimal.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Decimal.vue
new file mode 100644
index 00000000..c9c45f1e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Decimal.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <math display="inline">
+      <mrow>
+        <mo>decimal</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>decimal</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('decimal(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Percent.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Percent.vue
new file mode 100644
index 00000000..9a32621e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/formater/Percent.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>percent</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>percent</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('percent(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/probability/InverseNormal.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/probability/InverseNormal.vue
new file mode 100644
index 00000000..5ef5cf78
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/probability/InverseNormal.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>iG</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>iG</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('iG(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/probability/Normal.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/probability/Normal.vue
new file mode 100644
index 00000000..8e724302
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/probability/Normal.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>G</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>G</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('G(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Infinite.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Infinite.vue
new file mode 100644
index 00000000..9dd9d81e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Infinite.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>infinite</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>infinite</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('infinite(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsInfinite.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsInfinite.vue
new file mode 100644
index 00000000..2ef95dc9
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsInfinite.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>isInfinite</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>isInfinite</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('isInfinite(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsNan.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsNan.vue
new file mode 100644
index 00000000..c30c1786
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsNan.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="isNan">
+      <mrow>
+        <mo>isNan</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>isNan</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('isNan(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsNil.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsNil.vue
new file mode 100644
index 00000000..3b356529
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsNil.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>isNil</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>isNil</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('isNil(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsZero.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsZero.vue
new file mode 100644
index 00000000..a6e304a7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/IsZero.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>isZero</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>isZero</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('isZero(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Nan.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Nan.vue
new file mode 100644
index 00000000..c5d35f4c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Nan.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>nan</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>nan</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('nan(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Nil.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Nil.vue
new file mode 100644
index 00000000..1f2acd0f
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Nil.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>nil</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>nil</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('nil(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Zero.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Zero.vue
new file mode 100644
index 00000000..cf5ac2cc
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/specialValue/Zero.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>zero</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>zero</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('zero(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Contains.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Contains.vue
new file mode 100644
index 00000000..e339856a
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Contains.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>contains</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>contains</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('contains(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/EndsWith.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/EndsWith.vue
new file mode 100644
index 00000000..2039bf33
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/EndsWith.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>endsWith</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>endsWith</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('endsWith(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Join.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Join.vue
new file mode 100644
index 00000000..b5fa4041
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Join.vue
@@ -0,0 +1,64 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>join</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>a</mi>
+        <mo>,</mo>
+        <mi>b</mi>
+        <mo>,</mo>
+        <mi>n</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>join</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>a</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>b</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>n</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('join(x,a,b,n)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Length.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Length.vue
new file mode 100644
index 00000000..26b39a04
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Length.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>length</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>length</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('length(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/LowerCase.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/LowerCase.vue
new file mode 100644
index 00000000..da0309fc
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/LowerCase.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>lowerCase</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>lowerCase</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('lowerCase(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/StartsWith.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/StartsWith.vue
new file mode 100644
index 00000000..c71753ff
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/StartsWith.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>startsWith</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mo>,</mo>
+        <mi>y</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>startsWith</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('startsWith(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Trim.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Trim.vue
new file mode 100644
index 00000000..9ec81ec2
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/Trim.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>trim</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>trim</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('trim(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/UpperCase.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/UpperCase.vue
new file mode 100644
index 00000000..1c02b7cb
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/string/UpperCase.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>upperCase</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>upperCase</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('upperCase(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/Degrees.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/Degrees.vue
new file mode 100644
index 00000000..cc12a9c0
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/Degrees.vue
@@ -0,0 +1,44 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>degrees</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>degrees</mo>
+    <mi>(</mi>
+    <mi>x</mi>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('degress(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/Radians.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/Radians.vue
new file mode 100644
index 00000000..4dd0beaa
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/Radians.vue
@@ -0,0 +1,44 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>radians</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>radians</mo>
+    <mi>(</mi>
+    <mi>x</mi>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('radians(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Cosh.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Cosh.vue
new file mode 100644
index 00000000..ed6ae407
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Cosh.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>cosh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>cosh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('cosh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Coth.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Coth.vue
new file mode 100644
index 00000000..350e3efb
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Coth.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>coth</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>coth</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('coth(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Csch.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Csch.vue
new file mode 100644
index 00000000..705b8832
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Csch.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>csch</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>csch</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('csch(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Hyperbolic.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Hyperbolic.vue
new file mode 100644
index 00000000..8eacdbb7
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Hyperbolic.vue
@@ -0,0 +1,95 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.trigonometric.hyperbolic') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.sinh')"
+          draggable="true"
+          @dragstart="sinhRef?.dragstart"
+          @click="sinhRef?.append"
+        >
+          <q-item-section><Sinh ref="sinhRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Sinh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.cosh')"
+          draggable="true"
+          @dragstart="coshRef?.dragstart"
+          @click="coshRef?.append"
+        >
+          <q-item-section><Cosh ref="coshRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Cosh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.tanh')"
+          draggable="true"
+          @dragstart="tanhRef?.dragstart"
+          @click="tanhRef?.append"
+        >
+          <q-item-section><Tanh ref="tanhRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Tanh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.coth')"
+          draggable="true"
+          @dragstart="cothRef?.dragstart"
+          @click="cothRef?.append"
+        >
+          <q-item-section><Coth ref="cothRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Coth></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.sech')"
+          draggable="true"
+          @dragstart="sechRef?.dragstart"
+          @click="sechRef?.append"
+        >
+          <q-item-section><Sech ref="sechRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Sech></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.hyperbolic.csch')"
+          draggable="true"
+          @dragstart="cschRef?.dragstart"
+          @click="cschRef?.append"
+        >
+          <q-item-section><Csch ref="cschRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Csch></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Sinh from './Sinh.vue';
+import Cosh from './Cosh.vue';
+import Tanh from './Tanh.vue';
+import Coth from './Coth.vue';
+import Sech from './Sech.vue';
+import Csch from './Csch.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const sinhRef = ref();
+const coshRef = ref();
+const tanhRef = ref();
+const cothRef = ref();
+const sechRef = ref();
+const cschRef = ref();
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Sech.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Sech.vue
new file mode 100644
index 00000000..a9536755
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Sech.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>sech</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>sech</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('sech(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Sinh.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Sinh.vue
new file mode 100644
index 00000000..7a493419
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Sinh.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>sinh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>sinh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('sinh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Tanh.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Tanh.vue
new file mode 100644
index 00000000..f8b32e86
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/hyperbolic/Tanh.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>tanh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>tanh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('tanh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCosh.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCosh.vue
new file mode 100644
index 00000000..f75b403c
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCosh.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccosh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccosh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccosh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCoth.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCoth.vue
new file mode 100644
index 00000000..170ba928
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCoth.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccoth</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccoth</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccoth(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCsch.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCsch.vue
new file mode 100644
index 00000000..46b0e422
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcCsch.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccsch</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccsch</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccsch(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcSech.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcSech.vue
new file mode 100644
index 00000000..12ae63bb
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcSech.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arcsech</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arcsech</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arcsech(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcSinh.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcSinh.vue
new file mode 100644
index 00000000..4d10f3a5
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcSinh.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arcsinh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arcsinh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arcsinh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcTanh.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcTanh.vue
new file mode 100644
index 00000000..5d4efd4d
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/ArcTanh.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arctanh</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arctanh</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arctanh(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/InverseHyperbolic.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/InverseHyperbolic.vue
new file mode 100644
index 00000000..09c0eeb4
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseHyperbolic/InverseHyperbolic.vue
@@ -0,0 +1,95 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.trigonometric.inverseHyperbolic') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcSinh')"
+          draggable="true"
+          @dragstart="arcSinhRef?.dragstart"
+          @click="arcSinhRef?.append"
+        >
+          <q-item-section><ArcSinh ref="arcSinhRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcSinh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcCosh')"
+          draggable="true"
+          @dragstart="arcCoshRef?.dragstart"
+          @click="arcCoshRef?.append"
+        >
+          <q-item-section><ArcCosh ref="arcCoshRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcCosh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcTanh')"
+          draggable="true"
+          @dragstart="arcTanhRef?.dragstart"
+          @click="arcTanhRef?.append"
+        >
+          <q-item-section><ArcTanh ref="arcTanhRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcTanh></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcCoth')"
+          draggable="true"
+          @dragstart="arcCothRef?.dragstart"
+          @click="arcCothRef?.append"
+        >
+          <q-item-section><ArcCoth ref="arcCothRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcCoth></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcSech')"
+          draggable="true"
+          @dragstart="arcSechRef?.dragstart"
+          @click="arcSechRef?.append"
+        >
+          <q-item-section><ArcSech ref="arcSechRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcSech></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.arcCsch')"
+          draggable="true"
+          @dragstart="arcCschRef?.dragstart"
+          @click="arcCschRef?.append"
+        >
+          <q-item-section><ArcCsch ref="arcCschRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcCsch></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import ArcSinh from './ArcSinh.vue';
+import ArcCosh from './ArcCosh.vue';
+import ArcTanh from './ArcTanh.vue';
+import ArcCoth from './ArcCoth.vue';
+import ArcSech from './ArcSech.vue';
+import ArcCsch from './ArcCsch.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const arcSinhRef = ref();
+const arcCoshRef = ref();
+const arcTanhRef = ref();
+const arcCothRef = ref();
+const arcSechRef = ref();
+const arcCschRef = ref();
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCos.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCos.vue
new file mode 100644
index 00000000..d713a4ee
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCos.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccos</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccos</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccos(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCot.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCot.vue
new file mode 100644
index 00000000..43e2ba06
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCot.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccot</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccot</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccot(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCsc.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCsc.vue
new file mode 100644
index 00000000..90f1c12e
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcCsc.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arccsc</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arccsc</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arccsc(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcSec.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcSec.vue
new file mode 100644
index 00000000..0ef9b8b5
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcSec.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arcsec</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arcsec</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arcsec(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcSin.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcSin.vue
new file mode 100644
index 00000000..3f96a209
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcSin.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arcsin</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arcsin</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arcsin(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcTan.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcTan.vue
new file mode 100644
index 00000000..8f095055
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/ArcTan.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>arctan</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>arctan</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('arctan(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/InverseTrigonometric.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/InverseTrigonometric.vue
new file mode 100644
index 00000000..7b116cc5
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/inverseTrigonometric/InverseTrigonometric.vue
@@ -0,0 +1,95 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.trigonometric.inverseTrigonometric') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+    <q-menu anchor="top end" self="top start">
+      <q-list>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.inverseTrigonometric.arcSin')"
+          draggable="true"
+          @dragstart="arcSinRef?.dragstart"
+          @click="arcSinRef?.append"
+        >
+          <q-item-section><ArcSin ref="arcSinRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcSin></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.inverseTrigonometric.arcCos')"
+          draggable="true"
+          @dragstart="arcCosRef?.dragstart"
+          @click="arcCosRef?.append"
+        >
+          <q-item-section><ArcCos ref="arcCosRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcCos></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.inverseTrigonometric.arcTan')"
+          draggable="true"
+          @dragstart="arcTanRef?.dragstart"
+          @click="arcTanRef?.append"
+        >
+          <q-item-section><ArcTan ref="arcTanRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcTan></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.inverseTrigonometric.arcCot')"
+          draggable="true"
+          @dragstart="arcCotRef?.dragstart"
+          @click="arcCotRef?.append"
+        >
+          <q-item-section><ArcCot ref="arcCotRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcCot></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.inverseTrigonometric.arcSec')"
+          draggable="true"
+          @dragstart="arcSecRef?.dragstart"
+          @click="arcSecRef?.append"
+        >
+          <q-item-section><ArcSec ref="arcSecRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcSec></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.inverseTrigonometric.arcCsc')"
+          draggable="true"
+          @dragstart="arcCscRef?.dragstart"
+          @click="arcCscRef?.append"
+        >
+          <q-item-section><ArcCsc ref="arcCscRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></ArcCsc></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import ArcSin from './ArcSin.vue';
+import ArcCos from './ArcCos.vue';
+import ArcTan from './ArcTan.vue';
+import ArcCot from './ArcCot.vue';
+import ArcSec from './ArcSec.vue';
+import ArcCsc from './ArcCsc.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const arcSinRef = ref();
+const arcCosRef = ref();
+const arcTanRef = ref();
+const arcCotRef = ref();
+const arcSecRef = ref();
+const arcCscRef = ref();
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Cos.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Cos.vue
new file mode 100644
index 00000000..ba7aed59
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Cos.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>cos</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>cos</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('cos(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Cot.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Cot.vue
new file mode 100644
index 00000000..f49b07dd
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Cot.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>cot</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>cot</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('cot(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Csc.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Csc.vue
new file mode 100644
index 00000000..d0df4406
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Csc.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>csc</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>csc</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('csc(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Sec.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Sec.vue
new file mode 100644
index 00000000..0a46bd90
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Sec.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>sec</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>sec</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('sec(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Sin.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Sin.vue
new file mode 100644
index 00000000..c2eb41a9
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Sin.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>sin</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>sin</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('sin(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Tan.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Tan.vue
new file mode 100644
index 00000000..ec119d63
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Tan.vue
@@ -0,0 +1,46 @@
+<template>
+  <span>
+    <math display="inline">
+      <mrow>
+        <mo>tan</mo>
+        <mi>(</mi>
+        <mi>x</mi>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </span>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>tan</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('tan(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+
+defineExpose({
+  dragstart,
+  append,
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Trigonometric.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Trigonometric.vue
new file mode 100644
index 00000000..b2e526b1
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/functions/trigonometric/trigonometric/Trigonometric.vue
@@ -0,0 +1,96 @@
+<template>
+  <q-item clickable>
+    <q-item-section>
+      <q-item-label>{{ $t('math.toolbar.functions.trigonometric.trigonometric') }}</q-item-label>
+    </q-item-section>
+    <q-item-section side>
+      <q-icon name="keyboard_arrow_right" />
+    </q-item-section>
+
+    <q-menu anchor="top end" self="top start">
+      <q-list dense>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.trigonometric.sin')"
+          draggable="true"
+          @dragstart="sinRef?.dragstart"
+          @click="sinRef?.append"
+        >
+          <q-item-section><Sin ref="sinRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Sin></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.trigonometric.cos')"
+          draggable="true"
+          @dragstart="cosRef?.dragstart"
+          @click="cosRef?.append"
+        >
+          <q-item-section><Cos ref="cosRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Cos></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.trigonometric.tan')"
+          draggable="true"
+          @dragstart="tanRef?.dragstart"
+          @click="tanRef?.append"
+        >
+          <q-item-section><Tan ref="tanRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Tan></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.trigonometric.cot')"
+          draggable="true"
+          @dragstart="cotRef?.dragstart"
+          @click="cotRef?.append"
+        >
+          <q-item-section><Cot ref="cotRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Cot></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.trigonometric.sec')"
+          draggable="true"
+          @dragstart="secRef?.dragstart"
+          @click="secRef?.append"
+        >
+          <q-item-section><Sec ref="secRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Sec></q-item-section>
+        </q-item>
+        <q-item
+          v-close-popup
+          clickable
+          :title="$t('math.toolbar.functions.trigonometric.trigonometric.csc')"
+          draggable="true"
+          @dragstart="cscRef?.dragstart"
+          @click="cscRef?.append"
+        >
+          <q-item-section><Csc ref="cscRef" v-model="modelValueRef" :source-code-editor="sourceCodeEditor"></Csc></q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+  </q-item>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import Sin from './Sin.vue';
+import Cos from './Cos.vue';
+import Tan from './Tan.vue';
+import Cot from './Cot.vue';
+import Sec from './Sec.vue';
+import Csc from './Csc.vue';
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const sinRef = ref();
+const cosRef = ref();
+const tanRef = ref();
+const cotRef = ref();
+const secRef = ref();
+const cscRef = ref();
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/E.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/E.vue
new file mode 100644
index 00000000..ba53eecd
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/E.vue
@@ -0,0 +1,29 @@
+<template>
+  <div v-close-popup :title="$t('math.toolbar.math.e')" class="text-xl" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mn>e</mn>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mn>e</mn>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('E'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Exp.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Exp.vue
new file mode 100644
index 00000000..00a8c7ba
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Exp.vue
@@ -0,0 +1,51 @@
+<template>
+  <div v-close-popup :title="$t('math.toolbar.math.exp')" class="text-xl" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <msup>
+        <mrow>
+          <mspace></mspace>
+          <mn>e</mn>
+          <mspace></mspace>
+        </mrow>
+        <mrow>
+          <mspace></mspace>
+          <mi>x</mi>
+          <mspace></mspace>
+        </mrow>
+      </msup>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <msup>
+    <mrow>
+      <mspace></mspace>
+      <mn>e</mn>
+      <mspace></mspace>
+    </mrow>
+    <mrow>
+      <mspace></mspace>
+      <mi>x</mi>
+      <mspace></mspace>
+    </mrow>
+  </msup>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('exp(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Lg.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Lg.vue
new file mode 100644
index 00000000..df13c717
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Lg.vue
@@ -0,0 +1,43 @@
+<template>
+  <div v-close-popup :title="$t('math.toolbar.math.lg')" class="text-xl" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mrow>
+        <mo>lg</mo>
+        <mi>(</mi>
+        <mspace></mspace>
+        <mi>x</mi>
+        <mspace></mspace>
+        <mi>)</mi>
+      </mrow>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>lg</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>  
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('lg(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Ln.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Ln.vue
new file mode 100644
index 00000000..e9743b27
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Ln.vue
@@ -0,0 +1,37 @@
+<template>
+  <div v-close-popup :title="$t('math.toolbar.math.ln')" class="text-xl" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>ln</mo>
+      <mi>(</mi>
+      <mi>x</mi>
+      <mi>)</mi>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mo>ln</mo>
+  <mi>(</mi>
+  <mspace></mspace>
+  <mi>x</mi>
+  <mspace></mspace>
+  <mi>)</mi>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('ln(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Log.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Log.vue
new file mode 100644
index 00000000..a579c972
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Log.vue
@@ -0,0 +1,46 @@
+<template>
+  <div v-close-popup :title="$t('math.toolbar.math.log')" class="text-xl" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mo>
+        <msub>
+          <mo>log</mo>
+          <mi>y</mi>
+        </msub>
+      </mo>
+      <mi>x</mi>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mrow>
+    <mo>log</mo>
+    <mi>(</mi>
+    <mspace></mspace>
+    <mi>x</mi>
+    <mspace></mspace>
+    <mo>,</mo>
+    <mspace></mspace>
+    <mi>y</mi>
+    <mspace></mspace>
+    <mi>)</mi>
+  </mrow>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('log(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Pi.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Pi.vue
new file mode 100644
index 00000000..2d0acc8f
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Pi.vue
@@ -0,0 +1,29 @@
+<template>
+  <div v-close-popup :title="$t('math.toolbar.math.pi')" class="text-xl" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mn>π</mn>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mn>π</mn>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('PI'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Power.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Power.vue
new file mode 100644
index 00000000..9eed97e0
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Power.vue
@@ -0,0 +1,51 @@
+<template>
+  <div v-close-popup :title="$t('math.toolbar.math.power')" class="text-xl" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <msup>
+        <mrow>
+          <mspace></mspace>
+          <mi>x</mi>
+          <mspace></mspace>
+        </mrow>
+        <mrow>
+          <mspace></mspace>
+          <mi>y</mi>
+          <mspace></mspace>
+        </mrow>
+      </msup>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <msup>
+    <mrow>
+      <mspace></mspace>
+      <mi>x</mi>
+      <mspace></mspace>
+    </mrow>
+    <mrow>
+      <mspace></mspace>
+      <mi>y</mi>
+      <mspace></mspace>
+    </mrow>
+  </msup>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('power(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Power2.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Power2.vue
new file mode 100644
index 00000000..1004bb34
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Power2.vue
@@ -0,0 +1,47 @@
+<template>
+  <div v-close-popup :title="$t('math.toolbar.math.power2')" class="text-xl" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <msup>
+        <mrow>
+          <mspace></mspace>
+          <mi>x</mi>
+          <mspace></mspace>
+        </mrow>
+        <mrow>
+          <mn>2</mn>
+        </mrow>
+      </msup>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <msup>
+    <mrow>
+      <mspace></mspace>
+      <mi>x</mi>
+      <mspace></mspace>
+    </mrow>
+    <mrow>
+      <mn>2</mn>
+    </mrow>
+  </msup>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('power(x,2)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Root.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Root.vue
new file mode 100644
index 00000000..8c6da322
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Root.vue
@@ -0,0 +1,51 @@
+<template>
+  <div v-close-popup :title="$t('math.toolbar.math.root')" class="text-xl" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <mroot>
+        <mrow>
+          <mspace></mspace>
+          <mi>x</mi>
+          <mspace></mspace>
+        </mrow>
+        <mrow>
+          <mspace></mspace>
+          <mi>y</mi>
+          <mspace></mspace>
+        </mrow>
+      </mroot>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <mroot>
+    <mrow>
+      <mspace></mspace>
+      <mi>x</mi>
+      <mspace></mspace>
+    </mrow>
+    <mrow>
+      <mspace></mspace>
+      <mi>y</mi>
+      <mspace></mspace>
+    </mrow>
+  </mroot>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('root(x,y)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Sqrt.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Sqrt.vue
new file mode 100644
index 00000000..89484bef
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/math/Sqrt.vue
@@ -0,0 +1,41 @@
+<template>
+  <div v-close-popup :title="$t('math.toolbar.math.sqrt')" class="text-xl" draggable="true" @dragstart="dragstart" @click="append">
+    <math display="inline">
+      <msqrt>
+        <mrow>
+          <mspace></mspace>
+          <mi>x</mi>
+          <mspace></mspace>
+        </mrow>
+      </msqrt>
+    </math>
+  </div>
+</template>
+<script setup lang="ts">
+const xmlData = `
+  <mspace></mspace>
+  <msqrt>
+    <mrow>
+      <mspace></mspace>
+      <mi>x</mi>
+      <mspace></mspace>
+    </mrow>
+  </msqrt>
+  <mspace></mspace>
+`;
+
+const modelValueRef = defineModel({ type: String, default: '' });
+const props = defineProps({
+  sourceCodeEditor: { type: Object, default: undefined },
+});
+
+const dragstart = (event) => {
+  event.dataTransfer.setData('math', xmlData);
+  event.dataTransfer.setDragImage(event.srcElement, 0, 0);
+};
+
+const append = () => {
+  props.sourceCodeEditor?.dispatch(props.sourceCodeEditor?.state?.replaceSelection('sqrt(x)'));
+  modelValueRef.value = modelValueRef.value + xmlData.replace('<mspace></mspace>', '');
+};
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/toolbar/tools/Tools.vue b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/tools/Tools.vue
new file mode 100644
index 00000000..4ddb2799
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/toolbar/tools/Tools.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="flex pr-1">
+        <q-btn :label="$t('math.tools')" flat dense padding="0px 10px" icon-right="arrow_drop_down">
+            <q-menu>
+                <q-list> </q-list>
+            </q-menu>
+        </q-btn>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onUpdated } from 'vue';
+
+const props = defineProps({
+    container: { type: Object, default: undefined },
+});
+
+let container = props.container;
+
+onMounted(() => {
+    container = props.container;
+});
+
+onUpdated(() => {
+    container = props.container;
+});
+</script>
diff --git a/io.sc.platform.core.frontend/src/platform/components/math/utils/ZoomLevels.ts b/io.sc.platform.core.frontend/src/platform/components/math/utils/ZoomLevels.ts
new file mode 100644
index 00000000..070c3950
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/platform/components/math/utils/ZoomLevels.ts
@@ -0,0 +1,95 @@
+class ZoomLevels {
+  public static defaultLevel: number = 6;
+  public static levels: any[] = [
+    /*0*/ { 'font-size': '0.75rem', 'line-height': '1rem', pixels: [9, 6, 5, 4] }, //12px,16px
+    /*1*/ { 'font-size': '0.875rem', 'line-height': '1.25rem', pixels: [10, 7, 6, 4] }, //14px,20px
+    /*2*/ { 'font-size': '1rem', 'line-height': '1.5rem', pixels: [11, 8, 7, 5] }, //16px,24px
+    /*3*/ { 'font-size': '1.125rem', 'line-height': '1.75rem', pixels: [12, 9, 7, 5] }, //18px,28px
+    /*4*/ { 'font-size': '1.25rem', 'line-height': '1.75rem', pixels: [14, 10, 8, 6] }, //20px,28px
+    /*5*/ { 'font-size': '1.5rem', 'line-height': '2rem', pixels: [17, 12, 10, 7] }, //24px,32px
+    /*6*/ { 'font-size': '1.875rem', 'line-height': '2.25rem', pixels: [21, 15, 12, 9] }, //30px,36px
+    /*7*/ { 'font-size': '2.25rem', 'line-height': '2.5rem', pixels: [25, 18, 15, 11] }, //36px,40px
+    /*8*/ { 'font-size': '3rem', 'line-height': '1', pixels: [34, 24, 20, 14] }, //48px
+    /*9*/ { 'font-size': '3.75rem', 'line-height': '1', pixels: [42, 30, 25, 18] }, //60px
+    /*10*/ { 'font-size': '4.5rem', 'line-height': '1', pixels: [50, 37, 30, 21] }, //72px
+    /*11*/ { 'font-size': '6rem', 'line-height': '1', pixels: [67, 49, 41, 28] }, //96px
+    /*12*/ { 'font-size': '8rem', 'line-height': '1', pixels: [89, 66, 54, 38] }, //128px
+  ];
+
+  public static getLength(): number {
+    return ZoomLevels.levels.length;
+  }
+
+  public static getStyle(index: number): object {
+    return ZoomLevels.levels[index];
+  }
+
+  /*
+  public static defaultName: string = '3xl';
+  static #names = {
+    xs: 0,
+    sm: 1,
+    base: 2,
+    lg: 3,
+    xl: 4,
+    '2xl': 5,
+    '3xl': 6,
+    '4xl': 7,
+    '5xl': 8,
+    '6xl': 9,
+    '7xl': 10,
+    '8xl': 11,
+    '9xl': 12,
+  };
+  static #styles = [
+    { 'font-size': '0.75rem', 'line-height': '1rem' }, //12px,16px
+    { 'font-size': '0.875rem', 'line-height': '1.25rem' }, //14px,20px
+    { 'font-size': '1rem', 'line-height': '1.5rem' }, //16px,24px
+    { 'font-size': '1.125rem', 'line-height': '1.75rem' }, //18px,28px
+    { 'font-size': '1.25rem', 'line-height': '1.75rem' }, //20px,28px
+    { 'font-size': '1.5rem', 'line-height': '2rem' }, //24px,32px
+    { 'font-size': '1.875rem', 'line-height': '2.25rem' }, //30px,36px
+    { 'font-size': '2.25rem', 'line-height': '2.5rem' }, //36px,40px
+    { 'font-size': '3rem', 'line-height': '1' }, //48px
+    { 'font-size': '3.75rem', 'line-height': '1' }, //60px
+    { 'font-size': '4.5rem', 'line-height': '1' }, //72px
+    { 'font-size': '6rem', 'line-height': '1' }, //96px
+    { 'font-size': '8rem', 'line-height': '1' }, //128px
+  ];
+
+  public static getLength(): number {
+    return ZoomLevels.#styles.length;
+  }
+
+  public static getLevelByName(name: string): number {
+    let index = ZoomLevels.#names[name];
+    if (index === null || typeof index === 'undefined') {
+      index = ZoomLevels.defaultLevel;
+    }
+    return index;
+  }
+
+  public static getNameByIndex(index: number): string | null {
+    for (const name in ZoomLevels.#names) {
+      if (ZoomLevels.#names[name] === index) {
+        return name;
+      }
+    }
+    return null;
+  }
+
+  public static getStyleByName(name: string): object {
+    let index = ZoomLevels.#names[name];
+    if (index === null || typeof index === 'undefined') {
+      index = ZoomLevels.defaultLevel;
+    }
+    return ZoomLevels.#styles[index];
+  }
+
+  public static getStyleByIndex(index: number): object {
+    return ZoomLevels.#styles[index];
+  }
+  */
+}
+
+export { ZoomLevels };
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages.json b/io.sc.platform.core.frontend/src/platform/i18n/messages.json
index 9f9bca02..01019022 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages.json
@@ -159,7 +159,7 @@
   "math.toolbar.actions.redo": "Redo",
 
   "math.toolbar.base.variable": "Variable",
-  "math.toolbar.base.const": "Const",
+  "math.toolbar.base.number": "Number",
   "math.toolbar.base.addition": "Addition",
   "math.toolbar.base.subtraction": "Subtraction",
   "math.toolbar.base.multiply": "Multiply",
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json b/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
index d515f3c2..a93bb83d 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages_tw_CN.json
@@ -159,7 +159,7 @@
   "math.toolbar.actions.redo": "重做",
 
   "math.toolbar.base.variable": "變量",
-  "math.toolbar.base.const": "常量",
+  "math.toolbar.base.number": "數字",
   "math.toolbar.base.addition": "加法",
   "math.toolbar.base.subtraction": "減法",
   "math.toolbar.base.multiply": "乘法",
diff --git a/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json b/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
index bda506bc..0d3b8240 100644
--- a/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
+++ b/io.sc.platform.core.frontend/src/platform/i18n/messages_zh_CN.json
@@ -159,7 +159,7 @@
   "math.toolbar.actions.redo": "重做",
 
   "math.toolbar.base.variable": "变量",
-  "math.toolbar.base.const": "常量",
+  "math.toolbar.base.number": "数字",
   "math.toolbar.base.addition": "加法",
   "math.toolbar.base.subtraction": "减法",
   "math.toolbar.base.multiply": "乘法",
diff --git a/io.sc.platform.core.frontend/src/platform/index.ts b/io.sc.platform.core.frontend/src/platform/index.ts
index 2fca4070..203f1f7a 100644
--- a/io.sc.platform.core.frontend/src/platform/index.ts
+++ b/io.sc.platform.core.frontend/src/platform/index.ts
@@ -155,6 +155,7 @@ export {
   WSelectAssigneeDialog,
   WEcharts,
   WExpression,
+  WMath,
   WHtmlA,
 } from './components';
 
diff --git a/io.sc.platform.core.frontend/src/views/testcase/math/AutoCompletionManager.ts b/io.sc.platform.core.frontend/src/views/testcase/math/AutoCompletionManager.ts
new file mode 100644
index 00000000..8558fb90
--- /dev/null
+++ b/io.sc.platform.core.frontend/src/views/testcase/math/AutoCompletionManager.ts
@@ -0,0 +1,170 @@
+import { Tools } from '@/platform';
+
+class AutoCompletionManager {
+  parameters: object[];
+  valueTypes: object[];
+
+  public setParameters(parameters) {
+    this.parameters = parameters;
+  }
+  public setValueTypes(valueTypes) {
+    this.valueTypes = valueTypes;
+  }
+
+  public getOptions(path: string): any {
+    if (!path) {
+      return this.getParameterOptions();
+    }
+    if (path.endsWith('.')) {
+      path = path.substring(0, path.length - 1);
+    }
+    const names = path.split('.');
+    if (!names) {
+      return this.getParameterOptions();
+    }
+    //参数
+    const parameter = this.findParmeter(names[0]);
+    if (!parameter) {
+      return null;
+    }
+    const valueTypeString = parameter.valueType;
+    const valueTypeVersion = parameter.valueTypeVersion;
+    let valueType = this.findValueType(valueTypeString, valueTypeVersion);
+    if (!valueType || !valueType.properties || valueType.properties.length <= 0) {
+      return null;
+    }
+    let index = 1;
+    while (index < names.length) {
+      valueType = this.findValueTypeByProperty(valueType.code, valueType.version, names[index++]);
+    }
+
+    const options = [];
+    for (const property of valueType.properties) {
+      const propertyValueType = this.findValueType(property.valueType, property.valueTypeVersion);
+      if (!propertyValueType) {
+        continue;
+      }
+      const info = propertyValueType.version ? propertyValueType.name + '(V' + propertyValueType.version + ')' : propertyValueType.name;
+      options.push({ label: property.name, type: 'property', apply: '${' + property.name + '}', info: info });
+    }
+    return options;
+  }
+
+  public findParmeter(parameterName) {
+    for (const parameter of this.parameters) {
+      if (parameter.name === parameterName) {
+        return parameter;
+      }
+    }
+    return null;
+  }
+
+  public findValueType(valueTypeString, valueTypeVersion) {
+    for (const valueType of this.valueTypes) {
+      if (valueType.code === valueTypeString && valueType.version === valueTypeVersion) {
+        return valueType;
+      }
+    }
+    return null;
+  }
+
+  public findValueTypeByProperty(valueTypeString, valueTypeVersion, propertyName) {
+    const valueType = this.findValueType(valueTypeString, valueTypeVersion);
+    if (!valueType) {
+      return null;
+    }
+    for (const property of valueType.properties) {
+      if (property.name === propertyName) {
+        return this.findValueType(property.valueType, property.valueTypeVersion);
+      }
+    }
+  }
+
+  public getParameterOptions(): any {
+    const options = [];
+    for (const parameter of this.parameters) {
+      const valueType = this.findValueType(parameter.valueType, parameter.valueTypeVersion);
+      const info = valueType.version ? valueType.name + '(V' + valueType.version + ')' : valueType.name;
+      options.push({ label: parameter.name, type: 'variable', apply: '${' + parameter.name + '}', info: info });
+    }
+    return options;
+  }
+
+  public getPropertyOptions(parameterName: string): any {
+    let parameterType = undefined;
+    for (const parameter of this.parameters) {
+      if (parameter.name === parameterName) {
+        parameterType = parameter.valueType;
+      }
+    }
+    if (!parameterType) {
+      return null;
+    }
+    for (const type of this.valueTypes) {
+      if (type.code === parameterType) {
+        parameterType = type;
+      }
+    }
+    if (!parameterType) {
+      return null;
+    }
+
+    if (parameterType.properties && parameterType.properties.length > 0) {
+      const options = [];
+      for (const property of parameterType.properties) {
+        options.push({ label: property.name, type: 'property', apply: '${' + property.name + '}', detail: this.findValueTypeInfo(property.valueType) });
+      }
+      return options;
+    }
+  }
+
+  public autoCompletionParameters(to, matchedText): any {
+    return {
+      from: to,
+      options: this.getParameterOptions(),
+      validFor: /(.*)?/,
+    };
+  }
+
+  public autoCompletionProperties(to, matchedText): any {
+    const matchedTextReverse = Tools.reverseString(matchedText);
+    const regReverse = /(\.\}(.+?)\{\$)+/g; //匹配 '.}xxx{$' 模式
+    const matcheds = matchedTextReverse.match(regReverse);
+    if (Tools.isUndefinedOrNull(matcheds) || matcheds.length <= 0) {
+      return null;
+    }
+    const matched = Tools.reverseString(matcheds[0]);
+    const parameterName = matched.replace(/\$\{(.+?)\}/g, '$1');
+    if (Tools.isUndefinedOrNull(parameterName)) {
+      return null;
+    }
+    const options = this.getOptions(parameterName);
+    if (Tools.isUndefinedOrNull(options)) {
+      return null;
+    }
+    return {
+      from: to,
+      options: options,
+      validFor: /^(.*)?$/,
+    };
+  }
+
+  public autoCompletion(context): any {
+    const beforeMatched = context.matchBefore(/(.+?)/g);
+    if (Tools.isUndefinedOrNull(beforeMatched)) {
+      return null;
+    }
+    const beforeText = beforeMatched.text || '';
+    if (beforeText.endsWith('.')) {
+      //匹配属性
+      return this.autoCompletionProperties(beforeMatched.to, beforeText);
+    } else if (beforeText.endsWith(' ')) {
+      //匹配参数
+      return this.autoCompletionParameters(beforeMatched.to);
+    } else {
+      return null;
+    }
+  }
+}
+
+export { AutoCompletionManager };
diff --git a/io.sc.platform.core.frontend/src/views/testcase/math/MathEditor.vue b/io.sc.platform.core.frontend/src/views/testcase/math/MathEditor.vue
index c652f01d..9332d46b 100644
--- a/io.sc.platform.core.frontend/src/views/testcase/math/MathEditor.vue
+++ b/io.sc.platform.core.frontend/src/views/testcase/math/MathEditor.vue
@@ -1,11 +1,24 @@
 <template>
   <div>
-    <w-expression v-model="formulaRef" v-model:zoom="zoomRef"></w-expression>
+    <w-math v-model="formulaRef" v-model:zoom="zoomRef" :auto-completion="autoCompletion"></w-math>
   </div>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
 import { axios, Environment } from '@/platform';
+import { AutoCompletionManager } from './AutoCompletionManager';
+
+const autoCompletionManager = new AutoCompletionManager();
+
+const autoCompletion = (context) => {
+  return autoCompletionManager.autoCompletion(context);
+};
+
+// 获取代码提示列表
+axios.get(Environment.apiContextPath('/api/re/common/listParameterAndValueTypeByParameterId/8153516a-a88e-4d19-b145-e49862e73b0b')).then((response) => {
+  autoCompletionManager.setParameters(response.data.parameters);
+  autoCompletionManager.setValueTypes(response.data.valueTypes);
+});
 
 const zoomRef = ref(10);
 const formula = '';
diff --git a/io.sc.platform.core.frontend/template-project/package.json b/io.sc.platform.core.frontend/template-project/package.json
index 7b877239..30797a09 100644
--- a/io.sc.platform.core.frontend/template-project/package.json
+++ b/io.sc.platform.core.frontend/template-project/package.json
@@ -1,6 +1,6 @@
 {
   "name": "platform-core",
-  "version": "8.1.275",
+  "version": "8.1.277",
   "description": "前端核心包,用于快速构建前端的脚手架",
   "private": false,
   "keywords": [],
@@ -104,7 +104,7 @@
     "luckyexcel": "1.0.1",
     "mockjs": "1.1.0",
     "pinia": "2.1.7",
-    "platform-core": "8.1.275",
+    "platform-core": "8.1.277",
     "quasar": "2.15.4",
     "tailwindcss": "3.4.4",
     "vue": "3.4.31",
diff --git a/io.sc.platform.core/src/main/java/io/sc/platform/core/bean/FirstApplicationInitializer.java b/io.sc.platform.core/src/main/java/io/sc/platform/core/bean/FirstApplicationInitializer.java
index 8d4e35fe..bd6dc8e0 100644
--- a/io.sc.platform.core/src/main/java/io/sc/platform/core/bean/FirstApplicationInitializer.java
+++ b/io.sc.platform.core/src/main/java/io/sc/platform/core/bean/FirstApplicationInitializer.java
@@ -18,6 +18,6 @@ public class FirstApplicationInitializer implements ApplicationRunner {
 
     @Override
     public void run(ApplicationArguments args) throws Exception {
-        Environment.getInstance().setApplicationContext(applicationContext);
+        //Environment.getInstance().setApplicationContext(applicationContext);
     }
 }
diff --git a/io.sc.platform.core/src/main/java/io/sc/platform/core/springboot/PlatformSpringApplicationRunListener.java b/io.sc.platform.core/src/main/java/io/sc/platform/core/springboot/PlatformSpringApplicationRunListener.java
new file mode 100644
index 00000000..d69e5c10
--- /dev/null
+++ b/io.sc.platform.core/src/main/java/io/sc/platform/core/springboot/PlatformSpringApplicationRunListener.java
@@ -0,0 +1,16 @@
+package io.sc.platform.core.springboot;
+
+import io.sc.platform.core.Environment;
+import org.springframework.boot.SpringApplicationRunListener;
+import org.springframework.context.ConfigurableApplicationContext;
+import org.springframework.boot.SpringApplication;
+
+public class PlatformSpringApplicationRunListener implements SpringApplicationRunListener {
+    public PlatformSpringApplicationRunListener(SpringApplication application, String[] args) {
+    }
+
+    @Override
+    public void contextPrepared(ConfigurableApplicationContext context) {
+        Environment.getInstance().setApplicationContext(context);
+    }
+}
diff --git a/io.sc.platform.core/src/main/resources/META-INF/spring.factories b/io.sc.platform.core/src/main/resources/META-INF/spring.factories
index 09e12ea4..9a139d11 100644
--- a/io.sc.platform.core/src/main/resources/META-INF/spring.factories
+++ b/io.sc.platform.core/src/main/resources/META-INF/spring.factories
@@ -16,6 +16,11 @@ org.springframework.boot.env.EnvironmentPostProcessor=\
 io.sc.platform.core.springboot.BeforeEnvironmentProcessor,\
 io.sc.platform.core.springboot.AfterEnvironmentProcessor
 
+
+# Application Listeners
+org.springframework.boot.SpringApplicationRunListener=\
+io.sc.platform.core.springboot.PlatformSpringApplicationRunListener
+
 # platform plugin spi service
 io.sc.platform.core.spi.PluginSpiService=\
 io.sc.platform.core.plugins.PluginSpiServiceImpl
\ No newline at end of file
diff --git a/io.sc.platform.orm.api/src/main/java/io/sc/platform/orm/api/types/AbstractStringWrapper.java b/io.sc.platform.orm.api/src/main/java/io/sc/platform/orm/api/types/AbstractStringWrapper.java
new file mode 100644
index 00000000..755080cb
--- /dev/null
+++ b/io.sc.platform.orm.api/src/main/java/io/sc/platform/orm/api/types/AbstractStringWrapper.java
@@ -0,0 +1,21 @@
+package io.sc.platform.orm.api.types;
+
+/**
+ * 字符串封装类型
+ */
+public class AbstractStringWrapper {
+    protected String value;
+
+    public AbstractStringWrapper(){}
+    public AbstractStringWrapper(String value){
+        this.value =value;
+    }
+
+    public String getValue() {
+        return value;
+    }
+
+    public void setValue(String value) {
+        this.value = value;
+    }
+}
diff --git a/io.sc.platform.orm.api/src/main/java/io/sc/platform/orm/api/types/DesensitizeAndEncodeStringWrapper.java b/io.sc.platform.orm.api/src/main/java/io/sc/platform/orm/api/types/DesensitizeAndEncodeStringWrapper.java
new file mode 100644
index 00000000..b99415e7
--- /dev/null
+++ b/io.sc.platform.orm.api/src/main/java/io/sc/platform/orm/api/types/DesensitizeAndEncodeStringWrapper.java
@@ -0,0 +1,18 @@
+package io.sc.platform.orm.api.types;
+
+/**
+ * 脱敏加密字符串封装类型
+ */
+public class DesensitizeAndEncodeStringWrapper extends AbstractStringWrapper {
+    public DesensitizeAndEncodeStringWrapper() {
+    }
+
+    public DesensitizeAndEncodeStringWrapper(String value) {
+        super(value);
+    }
+
+    @Override
+    public String toString() {
+        return value;
+    }
+}
diff --git a/io.sc.platform.orm.api/src/main/java/io/sc/platform/orm/api/types/DesensitizeStringWrapper.java b/io.sc.platform.orm.api/src/main/java/io/sc/platform/orm/api/types/DesensitizeStringWrapper.java
new file mode 100644
index 00000000..048b5971
--- /dev/null
+++ b/io.sc.platform.orm.api/src/main/java/io/sc/platform/orm/api/types/DesensitizeStringWrapper.java
@@ -0,0 +1,18 @@
+package io.sc.platform.orm.api.types;
+
+/**
+ * 脱敏字符串封装类型
+ */
+public class DesensitizeStringWrapper extends AbstractStringWrapper {
+    public DesensitizeStringWrapper() {
+    }
+
+    public DesensitizeStringWrapper(String value) {
+        super(value);
+    }
+
+    @Override
+    public String toString() {
+        return value;
+    }
+}
diff --git a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/annotation/Desensitizeable.java b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/annotation/Desensitizeable.java
deleted file mode 100644
index 3a9fbc98..00000000
--- a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/annotation/Desensitizeable.java
+++ /dev/null
@@ -1,4 +0,0 @@
-package io.sc.platform.orm.annotation;
-
-public @interface Desensitizeable {
-}
diff --git a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/DesensitizeStringCoverter.java b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/DesensitizeStringCoverter.java
index d8ddb2a4..784dbf9a 100644
--- a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/DesensitizeStringCoverter.java
+++ b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/DesensitizeStringCoverter.java
@@ -14,7 +14,7 @@ public interface DesensitizeStringCoverter extends AttributeConverter<String, St
 
     @Override
     default public String convertToDatabaseColumn(String attribute) {
-        return StringEncryptorUtil.encrypt(attribute);
+        return attribute;
     }
 
     @Override
diff --git a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/support/DesensitizeConvertWrapper.java b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/support/DesensitizeConvertWrapper.java
deleted file mode 100644
index 30b4eac3..00000000
--- a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/support/DesensitizeConvertWrapper.java
+++ /dev/null
@@ -1,39 +0,0 @@
-package io.sc.platform.orm.converter.support;
-
-public class DesensitizeConvertWrapper<T> {
-    private T value;
-    private String className;
-    private String fieldName;
-
-    public DesensitizeConvertWrapper(){}
-    public DesensitizeConvertWrapper(String className, String fieldName, T value){
-        this.className =className;
-        this.fieldName =fieldName;
-        this.value =value;
-    }
-
-
-    public T getValue() {
-        return value;
-    }
-
-    public void setValue(T value) {
-        this.value = value;
-    }
-
-    public String getClassName() {
-        return className;
-    }
-
-    public void setClassName(String className) {
-        this.className = className;
-    }
-
-    public String getFieldName() {
-        return fieldName;
-    }
-
-    public void setFieldName(String fieldName) {
-        this.fieldName = fieldName;
-    }
-}
diff --git a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/types/DesensitizeStringWrapperType.java b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/types/DesensitizeStringWrapperType.java
new file mode 100644
index 00000000..56fe3aa5
--- /dev/null
+++ b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/types/DesensitizeStringWrapperType.java
@@ -0,0 +1,41 @@
+package io.sc.platform.orm.converter.types;
+
+import io.sc.platform.orm.api.types.DesensitizeStringWrapper;
+import org.hibernate.dialect.Dialect;
+import org.hibernate.type.AbstractSingleColumnStandardBasicType;
+import org.hibernate.type.DiscriminatorType;
+import org.hibernate.type.descriptor.sql.VarcharTypeDescriptor;
+import org.hibernate.usertype.ParameterizedType;
+
+import java.util.Properties;
+
+public class DesensitizeStringWrapperType extends AbstractSingleColumnStandardBasicType<DesensitizeStringWrapper> implements DiscriminatorType<DesensitizeStringWrapper>, ParameterizedType {
+    public static final DesensitizeStringWrapperType INSTANCE = new DesensitizeStringWrapperType();
+
+    public DesensitizeStringWrapperType() {
+        super(VarcharTypeDescriptor.INSTANCE, DesensitizeStringWrapperTypeDescriptor.INSTANCE);
+    }
+
+    @Override
+    public void setParameterValues(Properties parameters) {
+        if(parameters!=null && !parameters.isEmpty()) {
+            DesensitizeStringWrapperTypeDescriptor.INSTANCE.setDesensitizeFieldKey((String) parameters.get("key"));
+            DesensitizeStringWrapperTypeDescriptor.INSTANCE.setDesensitizer((String) parameters.get("desensitizer"));
+        }
+    }
+
+    @Override
+    public DesensitizeStringWrapper stringToObject(String xml) throws Exception {
+        return new DesensitizeStringWrapper(xml);
+    }
+
+    @Override
+    public String objectToSQLString(DesensitizeStringWrapper value, Dialect dialect) throws Exception {
+        return value.getValue();
+    }
+
+    @Override
+    public String getName() {
+        return "desensitizeString";
+    }
+}
diff --git a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/types/DesensitizeStringWrapperTypeDescriptor.java b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/types/DesensitizeStringWrapperTypeDescriptor.java
new file mode 100644
index 00000000..660bfb3c
--- /dev/null
+++ b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/converter/types/DesensitizeStringWrapperTypeDescriptor.java
@@ -0,0 +1,72 @@
+package io.sc.platform.orm.converter.types;
+
+import io.sc.platform.core.Environment;
+import io.sc.platform.orm.service.DesensitizerAuthorizerService;
+import io.sc.platform.orm.service.DesensitizerManagerService;
+import io.sc.platform.orm.api.types.DesensitizeStringWrapper;
+import org.hibernate.type.descriptor.WrapperOptions;
+import org.hibernate.type.descriptor.java.AbstractTypeDescriptor;
+import org.springframework.context.ApplicationContext;
+
+public class DesensitizeStringWrapperTypeDescriptor extends AbstractTypeDescriptor<DesensitizeStringWrapper> {
+    public static final DesensitizeStringWrapperTypeDescriptor INSTANCE = new DesensitizeStringWrapperTypeDescriptor();
+    private String desensitizeFieldKey;
+    private String desensitizer;
+
+    public DesensitizeStringWrapperTypeDescriptor() {
+        super( DesensitizeStringWrapper.class );
+    }
+
+    public void setDesensitizeFieldKey(String desensitizeFieldKey) {
+        this.desensitizeFieldKey = desensitizeFieldKey;
+    }
+
+    public void setDesensitizer(String desensitizer) {
+        this.desensitizer = desensitizer;
+    }
+
+    @Override
+    public DesensitizeStringWrapper fromString(String string) {
+        return new DesensitizeStringWrapper(string);
+    }
+
+    @Override
+    public <X> X unwrap(DesensitizeStringWrapper value, Class<X> type, WrapperOptions options) {
+        if(desensitizeFieldKey!=null){
+        }
+        if ( value == null ) {
+            return null;
+        }
+        if ( String.class.isAssignableFrom( type ) ) {
+            return (X) value.getValue();
+        }
+        throw unknownUnwrap( type );
+    }
+
+    @Override
+    public <X> DesensitizeStringWrapper wrap(X value, WrapperOptions options) {
+        if (value == null) {
+            return null;
+        }
+        if(desensitizeFieldKey!=null){
+            ApplicationContext applicationContext =Environment.getInstance().getApplicationContext();
+            //if(applicationContext!=null){
+                DesensitizerAuthorizerService authorizer = applicationContext.getBean(DesensitizerAuthorizerService.class);
+                if(authorizer.authorize(desensitizeFieldKey)) {
+                    // 通过脱敏管理器获取脱敏器
+                    DesensitizerManagerService manager = applicationContext.getBean(DesensitizerManagerService.class);
+                    io.sc.platform.orm.service.support.Desensitizer desensitizer = manager.getDesensitizer(this.desensitizer);
+                    if (String.class.isInstance(value)) {
+                        String _value =desensitizer.desensitize((String)value);
+                        return new DesensitizeStringWrapper(_value);
+                    }
+                    throw unknownWrap(value.getClass());
+                }
+            //}
+        }
+        if (String.class.isInstance(value)) {
+            return new DesensitizeStringWrapper((String) value);
+        }
+        throw unknownWrap(value.getClass());
+    }
+}
diff --git a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/serializer/DesensitizeStringWrapperJsonDeserializer.java b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/serializer/DesensitizeStringWrapperJsonDeserializer.java
new file mode 100644
index 00000000..e4159c46
--- /dev/null
+++ b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/serializer/DesensitizeStringWrapperJsonDeserializer.java
@@ -0,0 +1,18 @@
+package io.sc.platform.orm.serializer;
+
+import com.fasterxml.jackson.core.JsonParser;
+import com.fasterxml.jackson.databind.DeserializationContext;
+import com.fasterxml.jackson.databind.JsonDeserializer;
+import io.sc.platform.orm.api.types.DesensitizeStringWrapper;
+
+import java.io.IOException;
+
+/**
+ * DesensitizeStringWrapper 类型的 json 反序列化器
+ */
+public class DesensitizeStringWrapperJsonDeserializer extends JsonDeserializer<DesensitizeStringWrapper> {
+    @Override
+    public DesensitizeStringWrapper deserialize(JsonParser p, DeserializationContext ctxt) throws IOException {
+        return new DesensitizeStringWrapper(p.getValueAsString());
+    }
+}
diff --git a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/serializer/DesensitizeStringWrapperJsonSerializer.java b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/serializer/DesensitizeStringWrapperJsonSerializer.java
new file mode 100644
index 00000000..fbae70bd
--- /dev/null
+++ b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/serializer/DesensitizeStringWrapperJsonSerializer.java
@@ -0,0 +1,15 @@
+package io.sc.platform.orm.serializer;
+
+import com.fasterxml.jackson.core.JsonGenerator;
+import com.fasterxml.jackson.databind.JsonSerializer;
+import com.fasterxml.jackson.databind.SerializerProvider;
+import io.sc.platform.orm.api.types.DesensitizeStringWrapper;
+
+import java.io.IOException;
+
+public class DesensitizeStringWrapperJsonSerializer extends JsonSerializer<DesensitizeStringWrapper> {
+    @Override
+    public void serialize(DesensitizeStringWrapper value, JsonGenerator gen, SerializerProvider serializers) throws IOException {
+        gen.writeString(value.getValue());
+    }
+}
diff --git a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/autoconfigure/support/PageJsonSerializer.java b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/serializer/PageJsonSerializer.java
similarity index 95%
rename from io.sc.platform.orm/src/main/java/io/sc/platform/orm/autoconfigure/support/PageJsonSerializer.java
rename to io.sc.platform.orm/src/main/java/io/sc/platform/orm/serializer/PageJsonSerializer.java
index 113a1edf..a98320f9 100644
--- a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/autoconfigure/support/PageJsonSerializer.java
+++ b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/serializer/PageJsonSerializer.java
@@ -1,4 +1,4 @@
-package io.sc.platform.orm.autoconfigure.support;
+package io.sc.platform.orm.serializer;
 
 import java.io.IOException;
 
diff --git a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/service/DesensitizerAuthorizerService.java b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/service/DesensitizerAuthorizerService.java
index b3f31e32..51ed979e 100644
--- a/io.sc.platform.orm/src/main/java/io/sc/platform/orm/service/DesensitizerAuthorizerService.java
+++ b/io.sc.platform.orm/src/main/java/io/sc/platform/orm/service/DesensitizerAuthorizerService.java
@@ -2,4 +2,5 @@ package io.sc.platform.orm.service;
 
 public interface DesensitizerAuthorizerService {
     public boolean authorize(String className,String fieldName);
+    public boolean authorize(String key);
 }
diff --git a/io.sc.platform.orm/src/main/resources/META-INF/platform/plugins/json-serializers.json b/io.sc.platform.orm/src/main/resources/META-INF/platform/plugins/json-serializers.json
index bdc9a214..5e4bd2fc 100644
--- a/io.sc.platform.orm/src/main/resources/META-INF/platform/plugins/json-serializers.json
+++ b/io.sc.platform.orm/src/main/resources/META-INF/platform/plugins/json-serializers.json
@@ -1,6 +1,11 @@
 [
   {
     "className" : "org.springframework.data.domain.Page",
-    "serializer" : "io.sc.platform.orm.autoconfigure.support.PageJsonSerializer"
+    "serializer" : "io.sc.platform.orm.serializer.PageJsonSerializer"
+  },
+  {
+    "className" : "io.sc.platform.orm.api.types.DesensitizeStringWrapper",
+    "serializer" : "io.sc.platform.orm.serializer.DesensitizeStringWrapperJsonSerializer",
+    "deserializer"  : "io.sc.platform.orm.serializer.DesensitizeStringWrapperJsonDeserializer"
   }
 ]
\ No newline at end of file
diff --git a/io.sc.platform.system.api/src/main/java/io/sc/platform/system/api/user/UserVo.java b/io.sc.platform.system.api/src/main/java/io/sc/platform/system/api/user/UserVo.java
index 0c88aafd..0f7a0b8a 100644
--- a/io.sc.platform.system.api/src/main/java/io/sc/platform/system/api/user/UserVo.java
+++ b/io.sc.platform.system.api/src/main/java/io/sc/platform/system/api/user/UserVo.java
@@ -1,6 +1,7 @@
 package io.sc.platform.system.api.user;
 
 import com.fasterxml.jackson.annotation.JsonProperty;
+import io.sc.platform.orm.api.types.DesensitizeStringWrapper;
 import io.sc.platform.orm.api.vo.CorporationAuditorVo;
 
 public class UserVo extends CorporationAuditorVo {
@@ -54,7 +55,7 @@ public class UserVo extends CorporationAuditorVo {
 
     //手机号
     @JsonProperty(index = 13)
-    private String mobile;
+    private DesensitizeStringWrapper mobile;
 
     //微信号
     @JsonProperty(index = 14)
@@ -160,11 +161,11 @@ public class UserVo extends CorporationAuditorVo {
         this.phone = phone;
     }
 
-    public String getMobile() {
+    public DesensitizeStringWrapper getMobile() {
         return mobile;
     }
 
-    public void setMobile(String mobile) {
+    public void setMobile(DesensitizeStringWrapper mobile) {
         this.mobile = mobile;
     }
 
diff --git a/io.sc.platform.system.frontend/src/views/desensitizer/Desensitizer.vue b/io.sc.platform.system.frontend/src/views/desensitizer/Desensitizer.vue
index aeb85fe9..9db560cb 100644
--- a/io.sc.platform.system.frontend/src/views/desensitizer/Desensitizer.vue
+++ b/io.sc.platform.system.frontend/src/views/desensitizer/Desensitizer.vue
@@ -97,7 +97,6 @@ const refreshRelationshipComponents = (id) => {
   currentSelectedDesensitizeFieldId.value = id;
   roleGridRef.value?.refresh();
 };
-
 const selectIn = (ids: string[], gridComponent, dialogComponent) => {
   axios
     .post(Environment.apiContextPath('/api/system/desensitizeField/addRoles'), {
@@ -109,7 +108,6 @@ const selectIn = (ids: string[], gridComponent, dialogComponent) => {
       dialogComponent?.close();
     });
 };
-
 const selectOut = (ids, gridComponent) => {
   axios
     .post(Environment.apiContextPath('/api/system/desensitizeField/removeRoles'), {
@@ -120,7 +118,6 @@ const selectOut = (ids, gridComponent) => {
       gridComponent?.refresh();
     });
 };
-
 const selectAllIn = (gridComponent) => {
   axios
     .post(Environment.apiContextPath('/api/system/desensitizeField/addAllRoles'), {
@@ -131,7 +128,6 @@ const selectAllIn = (gridComponent) => {
       gridComponent?.refresh();
     });
 };
-
 const selectAllOut = (gridComponent) => {
   axios
     .post(Environment.apiContextPath('/api/system/desensitizeField/removeAllRoles'), {
diff --git a/io.sc.platform.system/src/main/java/io/sc/platform/system/desensitizer/service/impl/DesensitizeFieldServiceImpl.java b/io.sc.platform.system/src/main/java/io/sc/platform/system/desensitizer/service/impl/DesensitizeFieldServiceImpl.java
index 49f62eae..6a217f9c 100644
--- a/io.sc.platform.system/src/main/java/io/sc/platform/system/desensitizer/service/impl/DesensitizeFieldServiceImpl.java
+++ b/io.sc.platform.system/src/main/java/io/sc/platform/system/desensitizer/service/impl/DesensitizeFieldServiceImpl.java
@@ -59,6 +59,20 @@ public class DesensitizeFieldServiceImpl extends DaoServiceImpl<DesensitizeField
         }
     }
 
+    @Override
+    public boolean authorize(String key) {
+        synchronized (lock) {
+            if (StringUtils.hasText(key) && StringUtils.hasText(key)) {
+                Map<String, String> roles = desensitizerAndRoleMap.get(key);
+                if (roles != null && !roles.isEmpty()) {
+                    return roles.containsKey(SecurityUtil.getDefaultRoleId());
+                }
+            }
+            return false;
+        }
+    }
+
+
     private void buildDesensitizerAndRoleMap() {
         synchronized (lock) {
             desensitizerAndRoleMap.clear();
diff --git a/io.sc.platform.system/src/main/java/io/sc/platform/system/user/jpa/entity/UserEntity.java b/io.sc.platform.system/src/main/java/io/sc/platform/system/user/jpa/entity/UserEntity.java
index 111e6503..9ff97051 100644
--- a/io.sc.platform.system/src/main/java/io/sc/platform/system/user/jpa/entity/UserEntity.java
+++ b/io.sc.platform.system/src/main/java/io/sc/platform/system/user/jpa/entity/UserEntity.java
@@ -1,16 +1,22 @@
 package io.sc.platform.system.user.jpa.entity;
 
 import com.fasterxml.jackson.databind.annotation.JsonSerialize;
-import io.sc.platform.orm.converter.EncodeStringConverter;
+import io.sc.platform.orm.api.types.DesensitizeStringWrapper;
 import io.sc.platform.orm.converter.NumericBooleanConverter;
 import io.sc.platform.orm.entity.CorporationAuditorEntity;
+import io.sc.platform.orm.service.support.Desensitizer;
 import io.sc.platform.system.api.user.UserVo;
 import io.sc.platform.system.department.jpa.entity.DepartmentEntity;
 import io.sc.platform.system.org.jpa.entity.OrgEntity;
 import io.sc.platform.system.role.jpa.entity.RoleEntity;
-import io.sc.platform.system.user.convert.*;
+import io.sc.platform.system.user.convert.EmailDesensitizeAndEncodeStringCoverter;
+import io.sc.platform.system.user.convert.PhoneDesensitizeAndEncodeStringCoverter;
+import io.sc.platform.system.user.convert.QqDesensitizeAndEncodeStringCoverter;
+import io.sc.platform.system.user.convert.WeixinDesensitizeAndEncodeStringCoverter;
 import io.sc.platform.system.user.jpa.support.UserEntityJsonSerializer;
 import org.hibernate.annotations.GenericGenerator;
+import org.hibernate.annotations.Parameter;
+import org.hibernate.annotations.Type;
 
 import javax.persistence.*;
 import javax.validation.constraints.NotBlank;
@@ -131,9 +137,12 @@ public class UserEntity extends CorporationAuditorEntity<UserVo> {
 	
 	//手机号
 	@Column(name="MOBILE_",length=128)
-	@Size(max=128)
-	@Convert(converter= MobileDesensitizeAndEncodeStringCoverter.class)
-	private String mobile;
+	//@Convert(converter= MobileDesensitizeAndEncodeStringCoverter.class)
+	@Type(type= "io.sc.platform.orm.converter.types.DesensitizeStringWrapperType", parameters = {
+		@Parameter(name = "key", value ="io.sc.platform.system.user.jpa.entity.UserEntity.mobile"),
+		@Parameter(name = "desensitizer", value = Desensitizer.MOBILE),
+	})
+	private DesensitizeStringWrapper mobile;
 	
 	//微信号
 	@Column(name="WEIXIN_",length=128)
@@ -412,7 +421,7 @@ public class UserEntity extends CorporationAuditorEntity<UserVo> {
 	 * 获取手机号码
 	 * @return 手机号码
 	 */
-	public String getMobile() {
+	public DesensitizeStringWrapper getMobile() {
 		return this.mobile;
 	}
 	
@@ -420,7 +429,7 @@ public class UserEntity extends CorporationAuditorEntity<UserVo> {
 	 * 设置手机号码
 	 * @param mobile 手机号码
 	 */
-	public void setMobile(String mobile) {
+	public void setMobile(DesensitizeStringWrapper mobile) {
 		this.mobile =mobile;
 	}