MathLive: Инициализация

import { MathField } from 'mcnmo_math-editor_npm';

const MyComponent = () => {
  return <MathField config={keyboardConfig} onChange={(val) => console.log(val)} />
}

Два вида конфига

Общие настройки конфигурации

const config =  {
  accessCode: ['KeyP', 'KeyO', 'Space'],
  accessKey: ['a', 'd', 'c'],
  toolbar: false,
  desk: {
    // Здесь определяется внешний вид контента клавиатур, т.е. как будет выглядеть кнопки
    customVirtualKeyboardLayers: {
      name: { ... }, // name - Название слоя клавиатуры
      trigonometricKeyboardLayer: { ... }, // например тригонометрическая клавиатура
      numericKeypadLayer: { ... } // например цифровая клавиатура
    },
    customVirtualKeyboards: { // описываются табы
      name1: {
        label: 'Название вкладки клавиатура name1, любой html текст, можно картинку',
        tooltip: 'Подсказка которая будет показываться при наведении',
        layer: 'name', // Название слоя клавиатуры которое мы определили в customVirtualKeyboardLayers
      },
      name2: {
        label: '<img src="https://..." width="20" height="20" />',
        tooltip: 'Тригонометрическая клавиатура',
        layer: 'trigonometricKeyboardLayer',
      },
      name3: {
        label: 'Цифровая клавиатура',
        layer: 'numericKeypadLayer'
      }
    },
    // Через запятую прописываем какие клавиатуры мы будем отображать
    virtualKeyboards: 'name2 name3'
  }
};

1. Базовый конфиг

const config = {
  mobile: {}, //...
  desk: {
    customVirtualKeyboardLayers: {
      nameKeyboardLayer: {
        // blocks это массив строк
        blocks: [
          // первая строка
          {
            // строка может быть разбира на колонки
            data: [
              // первая колонка в данном случае состоит из 7 кнопок
              {
                title: 'Арифметические операции',
                // цвет кнопок название взял из bootstrap
                type: 'primary',
                // Сами кнопки, это может быть или индетификатор кнопки если он записан в виде текста
                // Или это может быть команда, если передаётся в виде обьекта { latex: '$$a^{b}$$', insert: '{#?}^{#?}' }
                btns: ['+', '-', '/', '*', { latex: '$$a^{b}$$', insert: '{#?}^{#?}' }, 'sqrt{a}', '|a|'],
              },
              // 2 пустые кнопки
              {
                btns: ['', ''] // делаем отступ в 2 кнопки
              },
              {
                title: 'Группа, индекс',
                type: 'light',
                btns: ['(...)', 'x_{i}', ''],
              },
              {
                title: 'Переменные в задаче',
                type: 'warning',
                btns: ['x'],
              },
            ]
          }
        ]
      }
    }
  }
};

2. Блочный конфиг

const config = {
  mobile: {}, //...
  desk: {
    customVirtualKeyboardLayers: {
      nameKeyboardLayer: {
        // blocks это массив строк и колонок
        blocks: [
          {
            // цвет кнопок название взял из bootstrap
            type: 'primary',
            // 4-ре строки по одной колонкаме
            btns: [['+'], ['-'], ['*'], ['/']],
          },
          {
            type: 'light',
            // 4-ре строки по 3 колонки
            btns: [
              [1, 2, 3],
              [4, 5, 6],
              [7, 8, 9],
              [',', 0, '']
            ],
          },
          {
            type: 'success',
            btns: [
              ['|#?|', '(...)', '|#?|/|#?|'],
              ['^2', '^3', '^0'],
              ['sqrt[#?]', 'sqrt[#?]3', 'sqrt[#?]{#0}'],
              ['log', 'ln', 'lg']
            ],
          },
          {
            type: 'turquoise',
            // Сами кнопки, это может быть или индетификатор кнопки если он записан в виде текста
            // Или это может быть команда, если передаётся в виде обьекта { latex: '$$a^{b}$$', insert: '{#?}^{#?}' }
            btns: [
              [{ id: '(|#?|; |#?|)', size: '15' }, { id: '[|#?|; |#?|]', size: '15' }],
              [{ id: '[|#?|; |#?|)', size: '15' }, { id: '(|#?|; |#?|]', size: '15' }],
              [{ id: '-infty', size: '15' }, { id: '+infty', size: '15' }],
              ['union', '{#?}', 'emptyset']
            ],
          },
          {
            type: 'purple',
            btns: [
              ['sin', { id: 'arcsin', size: '15' }],
              ['cos', { id: 'arccos', size: '15' }],
              ['tg',  { id: 'arctg', size: '15' }],
              ['ctg', { id: 'arcctg', size: '15' }]
            ],
          },
        ]
      }
    }
  }
};

Описание кнопок

 operators = {
   'buttonId': {
     // Ввод команд например удалить последний символ command: ['performWithFeedback', 'deletePreviousChar']
     // Переключится на альтернативню клавиатуру command: ['toggleVirtualKeyboardAlt']
     command: ['performWithFeedback', 'deletePreviousChar'],
     // Команда которая будет вставленна когда будет нажата кнопка
     insert: '$$\\operatorname{arcsin}\\left( #0 \\right)$$',
     // Latex оператор который будет отображаться на кнопке и при вставке в поле ввода
     latex: '\\operatorname{arcsin}',
     // Добавляем к контенту кнопки тег <aside> и вставляем туда содержимое
     aside: 'доп. инф.',
     // Используется для вставки svg символов на кнопку
     shifted: '<svg><use xlink:href="#svg-angle-double-right" /></svg>',
     // Команда которая будет выполненна когда произойдёт нажатие на кнопку с символом из shifted
     shiftedCommand: ['toggleVirtualKeyboardAlt'],
     // Текст кнопки innerHTML, но если стоит зарезервированный класс, то innerHTML будет браться из latex, insert, content
     label: '<img src="https://..." width="20" height="20" />'
   },
   '*': {
     label: '•',
     insert: '*'
   },
   'a^{b}': {
     latex: '$$a^{b}$$',
     insert: '{#?}^{#?}'
   },
   'sqrt{a}': {
     latex: '\\sqrt{a}',
     insert: '$$\\sqrt{#0}$$'
   },
   '|a|': {
     latex: '\\left| a \\right|',
     insert: '$$\\left| #0 \\right|$$'
   },
   '(...)': {
     label: '(...)',
     insert: '$$\\left( #0 \\right)$$'
   },
   'x_{i}': {
     latex: 'x_{i}',
     insert: '{#?}_{#?}'
   },
   ...
 }