Insert Greek letters from a legacy-style special characters picker

This example uses ../assets/symbols_mathematical-symbols_Greek-letters.json and mirrors the old Summernote special characters plugin pattern from the jQuery build: a toolbar button opens a symbol grid, the current selection is preserved with editor.saveRange, and the chosen character is inserted back into the editor.

Insert immediately on click

Off by default: click selects, the footer button inserts.

Type an equation and use the Ω toolbar button to insert characters such as Δ, π, Σ, θ, or ∞.

Examples: area = πr², Δx → 0, Ω = 2πf, ∑_n=1^∞.

Selection output

Ready. Open the picker and choose a symbol.

Example configuration - Greek letters & math symbols

const response = await fetch('../assets/symbols_mathematical-symbols_Greek-letters.json');
const symbols = await response.json();

function GreekLettersButton(context) {
  const ui = context.ui;
  return ui.button({
    contents: '&Omega;',
    tooltip: 'Insert Greek letter or mathematical symbol',
    click() {
      context.invoke('editor.saveRange');
      openPicker(context.invoke('editor.getSelectedText'));
    },
  }).render();
}

summernote.create('#greek-symbols-editor', {
  height: 260,
  dialogsInBody: true,
  specialCharPicker: {
    insertOnClick: false,
    descriptionText: '',
  },
  toolbar: [
    ['style', ['bold', 'italic', 'underline']],
    ['insert', ['greekLetters', 'link']],
    ['view', ['codeview']],
  ],
  buttons: {
    greekLetters: GreekLettersButton,
  },
});

document.getElementById('greek-symbols-mode-switch').addEventListener('change', (event) => {
  const insertOnClick = event.currentTarget.checked;
  const instance = summernote.getInstance('#greek-symbols-editor');

  instance.options.specialCharPicker.insertOnClick = insertOnClick;
  instance.options.specialCharPicker.descriptionText = insertOnClick ? {
    'en-US': 'Click a symbol to insert it immediately.',
    'de-DE': 'Klicke auf ein Zeichen, um es direkt einzufügen.',
  } : '';
});